imporove failed swap UX

unstoppabledomains · Nov 12, 2024 · 91e5e66 · 91e5e66
1 parent f4717d5
commit 91e5e66
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 35 deletions.
diff --git a/packages/ui-components/src/components/Wallet/Swap.tsx b/packages/ui-components/src/components/Wallet/Swap.tsx
@@ -275,8 +275,8 @@ const Swap: React.FC<Props> = ({
     config.WALLETS.SWAP.SUPPORTED_TOKENS.DESTINATION.map(configToken => {
       return {
         ...configToken,
-        walletAddress: wallets.find(w => w.symbol === configToken.walletType)!
-          .address,
+        walletAddress: wallets.find(w => w.symbol === configToken.walletType)
+          ?.address!,
       };
     })
       .map(configToken => {
@@ -461,8 +461,7 @@ const Swap: React.FC<Props> = ({
   const handleGetQuote = async () => {
     // validate parameters
     if (!sourceToken || !destinationToken) {
-      setErrorMessage(t('swap.chooseTokens'));
-      return;
+      throw new Error('source and destination tokens are required');
     }
 
     // hide the swap intro
@@ -498,11 +497,8 @@ const Swap: React.FC<Props> = ({
         const walletToken = allTokens.find(
           token => token.symbol === swapTokenSource.symbol,
         );
-        if (!walletToken) {
-          setErrorMessage(
-            t('swap.noTokenPrice', {token: swapTokenSource.symbol}),
-          );
-          return;
+        if (!walletToken?.value || !walletToken?.balance) {
+          throw new Error('source token price not found');
         }
         swapTokenSource.price = walletToken.value / walletToken.balance;
       }
@@ -599,8 +595,14 @@ const Swap: React.FC<Props> = ({
     }
 
     try {
-      // request the transaction details required to swap
+      // retrieve and validate fireblocks state
       setIsSwapping(true);
+      const clientState = getBootstrapState(state);
+      if (!clientState) {
+        throw new Error('invalid wallet client state');
+      }
+
+      // request the transaction details required to swap
       const txResponse = await getSwapTransactionV2({
         ...quoteRequest,
         integration: quotes[0].quote.integration,
@@ -611,28 +613,20 @@ const Swap: React.FC<Props> = ({
 
       // validate the response
       if (!txResponse?.tx) {
-        setErrorMessage(t('swap.errorCreatingTx'));
-        return;
+        throw new Error('SwingError: swap transaction details not found');
       }
       if (txResponse.error && txResponse.message) {
-        setErrorMessage(t('swap.errorCreatingTx'));
-        return;
-      }
-
-      // retrieve and validate fireblocks state
-      const clientState = getBootstrapState(state);
-      if (!clientState) {
-        setErrorMessage(t('swap.errorRetrievingWallet'));
-        return;
+        throw new Error(
+          `SwingError: ${txResponse.error}, ${txResponse.message}`,
+        );
       }
 
       // retrieve and validate the asset required to sign this message
       const asset = getAsset(clientState.assets, {
         chainId: txResponse.fromChain.chainId,
       });
       if (!asset?.accountId) {
-        setErrorMessage(t('swap.errorRetrievingWallet'));
-        return;
+        throw new Error('error retrieving source asset from wallet state');
       }
 
       // create and validate the swap transaction
@@ -649,8 +643,7 @@ const Swap: React.FC<Props> = ({
         swapTx,
       );
       if (!operationResponse) {
-        setErrorMessage(t('swap.errorCreatingTx'));
-        return;
+        throw new Error('error creating MPC transaction for swap');
       }
 
       // sign the swap transaction
@@ -983,7 +976,18 @@ const Swap: React.FC<Props> = ({
         {isTxComplete && <Animation autorun={{speed: 3, duration: 1}} />}
         {errorMessage && (
           <Box mb={1}>
-            <Alert severity="error">{errorMessage}</Alert>
+            <Alert
+              severity="error"
+              action={
+                errorMessage.toLowerCase().includes('refresh') ? (
+                  <Button onClick={handleGetQuote} color="inherit" size="small">
+                    {t('common.refresh')}
+                  </Button>
+                ) : undefined
+              }
+            >
+              {errorMessage}
+            </Alert>
           </Box>
         )}
         {isGettingQuote && sourceToken && destinationToken && (

diff --git a/packages/ui-components/src/locales/en.json b/packages/ui-components/src/locales/en.json
@@ -832,21 +832,17 @@
   "swap": {
     "balance": "Balance",
     "bridge": "Bridge",
-    "chooseTokens": "Choose tokens to swap",
     "description": "Swap your crypto",
-    "errorCreatingTx": "Failed to prepare your swap. Select new tokens or try a different amount.",
-    "errorRetrievingWallet": "Error retrieving wallet details",
-    "errorSwappingTokens": "Failed to complete your swap. Select new tokens or try a different amount.",
+    "errorSwappingTokens": "Failed to complete swap, but your funds are safe. Refresh the quote or choose a different amount.",
     "gettingQuote": "Getting a quote to swap your {{source}} \u2192 {{destination}}",
     "introContent": "Choose a token from your wallet and the amount you want to swap. A quote will be created to preview your new tokens.",
     "introTitle": "Convert tokens with swap",
-    "noQuoteAvailable": "No quotes available at this time. Select new tokens or try a different amount.",
-    "noTokenPrice": "Error determining {{token}} token price",
-    "pairNotSupported": "Swapping {{source}} to {{destination}} is not supported at this time. Choose another token and try again.",
+    "noQuoteAvailable": "No quotes available for {{source}}  \u2192 {{destination}} at this time. Select new tokens or try a different amount.",
+    "pairNotSupported": "Swapping {{source}}  \u2192 {{destination}} is not supported at this time. Choose another token and try again.",
     "pay": "Pay",
-    "payWithToken": "Pay with token",
+    "payWithToken": "From token",
     "receive": "Receive",
-    "receiveToken": "Receive token",
+    "receiveToken": "To token",
     "swap": "Swap",
     "swapping": "Swapping your {{source}} \u2192 {{destination}}. Estimated processing time is {{minutes}} minute{{s}}. Leave this window open until complete.",
     "title": "Swap"