finish the sell ADA on Encryptus flow

packages/yoroi-extension/app/components/buySell/BuySellDialog.js

@@ -20,6 +20,8 @@ import adaPng from '../../assets/images/ada.png';
 import banxaPng from '../../assets/images/banxa.png';
 import encryptusPng from '../../assets/images/encryptus.png';
 import { ReactComponent as InfoIcon } from '../../assets/images/info-icon-revamp.inline.svg';
+import { ReactComponent as YoroiIcon } from '../../assets/images/yoroi-logo-shape-blue.inline.svg';
+import { ReactComponent as FailIcon } from '../../assets/images/service-unavailable-error.svg';
 import { exchangeApiMaker, exchangeManagerMaker } from '@yoroi/exchange'
 
 declare var chrome;
@@ -55,24 +57,38 @@ const messages = defineMessages({
   },
   disclaimerText: {
     id: 'buysell.dialog.disclaimerText',
-    defaultMessage: '!!!Yoroi Wallet utilizes third-party web3 on-and-off ramp solutions for direct Fiat-ADA exchanges.  By clicking "Proceed," you acknowledge that you will be redirected to our partner\'s website, where you may need to accept their terms and conditions.  Please note, the third party web3 solution may have limitations based on your location and financial institution.'
+    defaultMessage: '!!!Yoroi Wallet utilizes third-party web3 on-and-off ramp solutions for direct Fiat-ADA exchanges. By clicking "Proceed," you acknowledge that you will be redirected to our partner\'s website, where you may need to accept their terms and conditions.  Please note, the third party web3 solution may have limitations based on your location and financial institution.'
   },
   proceed: {
     id: 'buysell.dialog.proceed',
     defaultMessage: 'PROCEED',
   },
+  urlGenerationErrorDialogTitle: {
+    id: 'buysell.dialog.error.dialog.title',
+    defaultMessage: '!!!url generation',
+  },
+  longLoadingDialogText: {
+    id: 'buysell.dialog.longloading.text',
+    defaultMessage: '!!!We are redirecting you outside Yoroi. Please wait.',
+  },
+  failDialogText: {
+    id: 'buysell.dialog.fail.text',
+    defaultMessage: '!!!This service is currently unavailable. Please try again later.'
+  },
 });
 
 type Props = {|
   +onCancel: void => void,
   +onExchangeCallback: void => void,
-  +currentBalanceAda: string,
+  +currentBalanceAda: BigNumber,
   +receiveAdaAddressPromise: Promise<string | null>,
 |};
 
 type State = {|
   +isBuying: boolean,
-  +error: null | 'lessThanBuyMinimum' | 'notEnoughBalance' | 'lessThanSellMinimum',
+  +inputError: null | 'lessThanBuyMinimum' | 'notEnoughBalance' | 'lessThanSellMinimum',
+  // 'longLoading' is not really an error but is an temporary state
+  +urlGenerationError: null | 'longLoading' | 'timeout' | 'failed' | 'aborted',
   +amountAda: string,
   +isSubmitting: boolean,
 |};
@@ -151,6 +167,36 @@ const Disclaimer = styled(Box)({
   padding: 'var(--spacing-12, 12px) var(--spacing-16, 16px) var(--spacing-16, 16px) var(--spacing-16, 16px)'
 });
 
+const ErrorPopoutContent = styled(Box)({
+  height: '428px',
+  width: '343px',
+  // horizontally center the icon and text {
+  display: 'flex',
+  margin: 'auto',
+  '& .content': {
+    margin: 'auto',
+  },
+  // }
+  '& svg': {
+    // vertically center {
+    display: 'block',
+    margin: '0 auto',
+    // }
+    width: '137px',
+  },
+  '& .text': {
+    marginTop: '24px',
+    fontFamily: 'Rubik',
+    fontSize: '20px',
+    fontWeight: 500,
+    lineHeight: '30px',
+    textAlign: 'center',
+  },
+});
+
+const URL_GENERATION_LONG_LOADING_TIMEOUT = 2 * 1000;
+const URL_GENERATION_TIMEOUT = 30 * 1000;
+
 @observer
 export default class BuySellDialog extends Component<Props, State> {
   static contextTypes: {| intl: $npm$ReactIntl$IntlFormat |} = {
@@ -159,15 +205,18 @@ export default class BuySellDialog extends Component<Props, State> {
 
   state: State = {
     isBuying: true,
-    error: null,
+    inputError: null,
+    urlGenerationError: null,
     amountAda: '',
     isSubmitting: false,
   };
 
+  urlGenerationTimeout: null | TimeoutID = null;
+
   onSubmit: () => Promise<void> = async () => {
     const { state, props } = this;
 
-    this.setState({ isSubmitting: true });
+    this.setState({ isSubmitting: true, urlGenerationError: null, });
     const api = exchangeApiMaker({ isProduction: true, partner: 'yoroi' });
     const manager = exchangeManagerMaker({ api });
 
@@ -182,7 +231,7 @@ export default class BuySellDialog extends Component<Props, State> {
           orderType: 'buy',
           returnUrl: EXCHANGE_CALLBACK_URL,
           coinAmount: Number(state.amountAda),
-          balance: props.currentBalanceAda,
+          balance: props.currentBalanceAda.toString(),
         }
       }
     } else {
@@ -195,12 +244,48 @@ export default class BuySellDialog extends Component<Props, State> {
           orderType: 'sell',
           returnUrl: EXCHANGE_CALLBACK_URL,
           coinAmount: Number(state.amountAda),
-          balance: props.currentBalanceAda,
+          balance: props.currentBalanceAda.toString(),
         }
       }
     }
 
-    const url = await manager.referralLink.create(params);
+    this.urlGenerationTimeout = setTimeout(
+      () => {
+        // may already have failed
+        if (this.state.urlGenerationError) {
+          return;
+        }
+        this.setState({ urlGenerationError: 'longLoading' });
+        this.urlGenerationTimeout = setTimeout(
+          () => {
+            if (this.state.urlGenerationError) {
+              return;
+            }
+            this.setState({ urlGenerationError: 'timeout' });
+          },
+          URL_GENERATION_TIMEOUT - URL_GENERATION_LONG_LOADING_TIMEOUT
+        );
+      },
+      URL_GENERATION_LONG_LOADING_TIMEOUT 
+    );
+
+    let url;
+    try {
+      url = await manager.referralLink.create(params);
+    } catch (_error) {
+      this.setState({ urlGenerationError: 'failed' });
+      return;
+    } finally {
+      clearTimeout(this.urlGenerationTimeout);
+    }
+
+    // if timeout already happened or user aborted, give up on the process
+    const { urlGenerationError } = this.state;
+    if (urlGenerationError === 'timeout' || urlGenerationError === 'aborted') {
+      return;
+    }
+    // may be in `longLoading` now
+    this.setState({ urlGenerationError: null });
 
     const self = this;
     chrome.tabs.create({ url: url.href }, (exchangePageTab) => {
@@ -226,7 +311,7 @@ export default class BuySellDialog extends Component<Props, State> {
       return;
     }
 
-    const error = (() => {
+    const inputError = (() => {
       if (value === '') {
         return null;
       }
@@ -248,7 +333,7 @@ export default class BuySellDialog extends Component<Props, State> {
       return null;
     })();
 
-    this.setState({ amountAda: value, error });
+    this.setState({ amountAda: value, inputError });
   }
 
   renderBuySell(): Node {
@@ -263,11 +348,11 @@ export default class BuySellDialog extends Component<Props, State> {
 
     // set a place holder so that when it becomes an error message, the height doesn't change
     let helperText = ' ';
-    if (state.error === 'lessThanBuyMinimum') {
+    if (state.inputError === 'lessThanBuyMinimum') {
       helperText = intl.formatMessage(messages.lessThanMinimum, { amount: MINIMUM_BUY_ADA.toString() });
-    } else if (state.error === 'lessThanSellMinimum') {
+    } else if (state.inputError === 'lessThanSellMinimum') {
       helperText = intl.formatMessage(messages.lessThanMinimum, { amount: MINIMUM_SELL_ADA.toString() });
-    } else if (state.error === 'notEnoughBalance') {
+    } else if (state.inputError === 'notEnoughBalance') {
       helperText = intl.formatMessage(messages.notEnoughBalance);
     }
 
@@ -301,7 +386,7 @@ export default class BuySellDialog extends Component<Props, State> {
           }}
           value={state.amountAda}
           onChange={this.onChangeAmount}
-          error={state.error !== null}
+          error={state.inputError !== null}
           helperText={helperText}
           autoFocus
         />
@@ -331,10 +416,54 @@ export default class BuySellDialog extends Component<Props, State> {
   render(): Node {
     const { intl } = this.context;
     const { state, props } = this;
+    const { urlGenerationError } = state;
+
+    if (urlGenerationError === 'longLoading') {
+      const abortUrlGeneration = () => {
+        this.setState({ urlGenerationError: 'aborted', isSubmitting: false, });
+      };
+      return (
+        <Dialog
+          title={intl.formatMessage(messages.urlGenerationErrorDialogTitle)}
+          closeOnOverlayClick={false}
+          closeButton={<DialogCloseButton />}
+          onClose={abortUrlGeneration}
+        >
+          <ErrorPopoutContent>
+            <div className="content">
+              <YoroiIcon/>
+              <div className="text">{intl.formatMessage(messages.longLoadingDialogText)}</div>
+            </div>
+          </ErrorPopoutContent>
+        </Dialog>
+      );
+    }
 
+    if (urlGenerationError === 'timeout' || urlGenerationError === 'failed') {
+      const dismissUrlGenerationError = () => {
+        this.setState({ urlGenerationError: null, isSubmitting: false, });
+      };
+
+      return (
+        <Dialog
+          title={intl.formatMessage(messages.urlGenerationErrorDialogTitle)}
+          closeOnOverlayClick={true}
+          closeButton={<DialogCloseButton />}
+          onClose={dismissUrlGenerationError}
+        >
+          <ErrorPopoutContent>
+            <div className="content">
+              <FailIcon/>
+              <div className="text">{intl.formatMessage(messages.failDialogText)}</div>
+            </div>
+          </ErrorPopoutContent>
+        </Dialog>
+      );
+    }
+
     return (
       <Dialog
-        title={intl.formatMessage(globalMessages.buyAda)}
+        title={intl.formatMessage(messages.dialogTitle)}
         closeOnOverlayClick={false}
         onClose={props.onCancel}
         closeButton={<DialogCloseButton />}
@@ -343,7 +472,7 @@ export default class BuySellDialog extends Component<Props, State> {
           {
             label: intl.formatMessage(messages.proceed),
             primary: true,
-            disabled: state.amountAda === '' || state.error !== null,
+            disabled: state.amountAda === '' || state.inputError !== null,
             onClick: this.onSubmit,
             isSubmitting: state.isSubmitting,
           }
@@ -353,7 +482,7 @@ export default class BuySellDialog extends Component<Props, State> {
       >
         <Tabs
           value={state.isBuying ? 0 : 1}
-          onChange={() => this.setState({ isBuying: !state.isBuying })}
+          onChange={() => this.setState({ isBuying: !state.isBuying, inputError: null, })}
           sx={{
             width: '100%',
             [`& .${tabsClasses.indicator}`]: {

packages/yoroi-extension/app/components/topbar/BuySellAdaButton.js

@@ -46,7 +46,7 @@ class BuySellAdaButton extends Component<Props & InjectedProps> {
         variant="secondary"
         onClick={() => this.props.onBuySellClick()}
       >
-        {intl.formatMessage(globalMessages.buyAda)}
+        {intl.formatMessage(globalMessages.buySellAda)}
       </Button>
     );
 

packages/yoroi-extension/app/components/wallet/send/TransactionSuccessDialog.js

@@ -20,11 +20,20 @@ const messages = defineMessages({
     id: 'wallet.transaction.success.explanation',
     defaultMessage: '!!!Check this transaction in the list of wallet transactions',
   },
+  sellSendDone: {
+    id: 'wallet.transactions.success.sell',
+    defaultMessage: '!!!Transaction has been submitted',
+  },
+  goToExchange: {
+    id: 'wallet.transactions.success.button.exchange',
+    defaultMessage: '!!!Go to the exchange page',
+  },
 });
 
 type Props = {|
   +onClose: void => PossiblyAsync<void>,
   +classicTheme: boolean,
+  +process: 'for-sell' | 'normal',
 |};
 
 @observer
@@ -41,7 +50,9 @@ export default class TransactionSuccessDialog extends Component<Props> {
         title={intl.formatMessage(messages.title)}
         actions={[
           {
-            label: intl.formatMessage(globalMessages.goToTransactions),
+            label: intl.formatMessage(
+              this.props.process === 'normal' ? globalMessages.goToTransactions : messages.goToExchange
+            ),
             onClick: this.props.onClose,
             primary: true,
           },
@@ -58,7 +69,9 @@ export default class TransactionSuccessDialog extends Component<Props> {
             textAlign="center"
             maxWidth="400px"
           >
-            {intl.formatMessage(messages.explanation)}
+            {intl.formatMessage(
+              this.props.process === 'normal' ? messages.explanation: messages.sellSendDone
+            )}
           </Typography>
         </Stack>
       </Dialog>

packages/yoroi-extension/app/containers/NavBarContainerRevamp.js

@@ -195,10 +195,9 @@ export default class NavBarContainerRevamp extends Component<Props> {
           onExchangeCallback={() =>
             this.props.actions.router.goToRoute.trigger({ route: ROUTES.EXCHANGE_END })
           }
-          currentBalanceAda={balance
-            .getDefault()
-            .shiftedBy(-numberOfDecimals)
-            .toFormat(numberOfDecimals)}
+          currentBalanceAda={
+            balance.getDefault().shiftedBy(-numberOfDecimals)
+          }
           receiveAdaAddressPromise={getReceiveAdaAddress()}
         />
       );

packages/yoroi-extension/app/containers/wallet/WalletSendPage.js

@@ -74,8 +74,13 @@ class WalletSendPage extends Component<AllProps> {
   @observable showSupportedAddressDomainBanner: boolean = true;
 
   closeTransactionSuccessDialog: void => void = () => {
-    this.props.actions.dialogs.closeActiveDialog.trigger();
-    this.props.actions.router.goToRoute.trigger({ route: ROUTES.WALLETS.TRANSACTIONS });
+    const redirect = this.props.stores.loading.sellAdaParams?.redirect;
+    if (redirect) {
+      window.document.location = redirect;
+    } else {
+      this.props.actions.dialogs.closeActiveDialog.trigger();
+      this.props.actions.router.goToRoute.trigger({ route: ROUTES.WALLETS.TRANSACTIONS });
+    }
   };
 
   openTransactionSuccessDialog: void => void = () => {
@@ -293,8 +298,11 @@ class WalletSendPage extends Component<AllProps> {
       return this.noCloudWarningDialog();
     }
     if (uiDialogs.isOpen(TransactionSuccessDialog)) {
+      const process = this.props.stores.loading.sellAdaParams?.redirect ?
+        'for-sell' : 'normal';
       return (
         <TransactionSuccessDialog
+          process={process}
           onClose={this.closeTransactionSuccessDialog}
           classicTheme={this.props.stores.profile.isClassicTheme}
         />

packages/yoroi-extension/app/i18n/locales/en-US.json

@@ -50,8 +50,11 @@
   "buysell.dialog.currentBalance": "Current balance: {amount} ADA",
   "buysell.dialog.disclaimer": "Disclaimer",
   "buysell.dialog.disclaimerText": "Yoroi Wallet utilizes third-party web3 on-and-off ramp solutions for direct Fiat-ADA exchanges.  By clicking \"Proceed,\" you acknowledge that you will be redirected to our partner's website, where you may need to accept their terms and conditions.  Please note, the third party web3 solution may have limitations based on your location and financial institution.",
+  "buysell.dialog.error.dialog.title": "url generation",
   "buysell.dialog.error.minimum": "Minimum {amount} ADA required",
   "buysell.dialog.error.not.enough": "Not enough balance",
+  "buysell.dialog.fail.text": "This service is currently unavailable. Please try again later.",
+  "buysell.dialog.longloading.text": "We are redirecting you outside Yoroi. Please wait.",
   "buysell.dialog.proceed": "PROCEED",
   "buysell.dialog.provider": "Provider",
   "buysell.dialog.providerFee": "Provider fee",
@@ -949,6 +952,8 @@
   "wallet.transaction.type.stakeKeyRegistered": "Staking key registered",
   "wallet.transaction.withdraw": "Withdraw",
   "wallet.transaction.withdrawalsLabel": "Withdrawals",
+  "wallet.transactions.success.button.exchange": "Go to the exchange page",
+  "wallet.transactions.success.sell": "Transaction has been submitted",
   "wallet.transfer.deregister.deregister": "Deregister",
   "wallet.transfer.deregister.keep": "Keep registered",
   "wallet.transfer.deregister.line1": "When withdrawing rewards, you also have the option to deregister the staking key",