fix(bridge-ui): small fixes (#17375)

taikoxyz · May 28, 2024 · 5236d0a · 5236d0a
1 parent 6d64cad
commit 5236d0a
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 19 deletions.
diff --git a/packages/bridge-ui/src/app.config.ts b/packages/bridge-ui/src/app.config.ts
@@ -15,7 +15,7 @@ export const processingFeeComponent = {
 };
 
 export const pendingTransaction = {
-  waitTimeout: 30_000,
+  waitTimeout: 90_000,
 };
 
 export const storageService = {

diff --git a/...-ui/src/components/Bridge/SharedBridgeComponents/ConfirmationStep/ConfirmationStep.svelte b/...-ui/src/components/Bridge/SharedBridgeComponents/ConfirmationStep/ConfirmationStep.svelte
@@ -67,8 +67,8 @@
       await pendingTransactions.add(txHash, currentChain);
 
       successToast({
-        title: $t('bridge.actions.approve.success.title'),
-        message: $t('bridge.actions.approve.success.message', {
+        title: $t('bridge.actions.bridge.success.title'),
+        message: $t('bridge.actions.bridge.success.message', {
           values: {
             token: $selectedToken.symbol,
           },
@@ -146,22 +146,31 @@
     });
 
     refreshUserBalance();
-    await pendingTransactions.add(approveTxHash, currentChain);
-    statusTitle = $t('bridge.actions.approve.success.title');
-    statusDescription = $t('bridge.step.confirm.approve.success.message', {
-      values: { url: `${explorer}/tx/${txHash}` },
-    });
+    try {
+      await pendingTransactions.add(approveTxHash, currentChain);
+
+      statusTitle = $t('bridge.actions.approve.success.title');
+      statusDescription = $t('bridge.step.confirm.approve.success.message', {
+        values: { url: `${explorer}/tx/${txHash}` },
+      });
 
-    await getTokenApprovalStatus($selectedToken);
+      await getTokenApprovalStatus($selectedToken);
 
-    successToast({
-      title: $t('bridge.actions.approve.success.title'),
-      message: $t('bridge.actions.approve.success.message', {
-        values: {
-          token: $selectedToken.symbol,
-        },
-      }),
-    });
+      successToast({
+        title: $t('bridge.actions.approve.success.title'),
+        message: $t('bridge.actions.approve.success.message', {
+          values: {
+            token: $selectedToken.symbol,
+          },
+        }),
+      });
+    } catch (error) {
+      if (error instanceof TransactionTimeoutError) {
+        handleTimeout(txHash);
+      } else {
+        handleBridgeError(error as Error);
+      }
+    }
   };
 
   async function approve() {

diff --git a/...bridge-ui/src/components/Bridge/SharedBridgeComponents/ProcessingFee/ProcessingFee.svelte b/...bridge-ui/src/components/Bridge/SharedBridgeComponents/ProcessingFee/ProcessingFee.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { tick } from 'svelte';
   import { t } from 'svelte-i18n';
-  import { formatEther } from 'viem';
+  import { formatEther, formatGwei } from 'viem';
 
   import FlatAlert from '$components/Alert/FlatAlert.svelte';
   import { processingFee, processingFeeMethod } from '$components/Bridge/state';
@@ -90,6 +90,10 @@
     if (tempProcessingFeeMethod !== ProcessingFeeMethod.CUSTOM) return;
 
     const { value } = event.target as HTMLInputElement;
+    if (parseToWei(value) <= 0) {
+      // If the user tries to input 0 or less, we set it to 1 gwei
+      inputBox?.setValue(formatGwei(1n));
+    }
     tempprocessingFee = parseToWei(value);
   }
 

diff --git a/packages/bridge-ui/src/i18n/en.json b/packages/bridge-ui/src/i18n/en.json
@@ -117,6 +117,10 @@
         "message": "Please try again",
         "title": "Failed to send"
       },
+      "transaction_timeout": {
+        "message": "Transaction timed out. Try refreshing the page and retry",
+        "title": "Timed out"
+      },
       "unknown_error": {
         "message": "An unexpected error has occurred. Please try again.",
         "title": "Unknown error"

diff --git a/packages/bridge-ui/src/libs/bridge/handleBridgeErrors.ts b/packages/bridge-ui/src/libs/bridge/handleBridgeErrors.ts
@@ -3,7 +3,7 @@ import { t } from 'svelte-i18n';
 import { TransactionExecutionError, UserRejectedRequestError } from 'viem';
 
 import { errorToast, warningToast } from '$components/NotificationToast';
-import { InsufficientAllowanceError, SendERC20Error, SendMessageError } from '$libs/error';
+import { InsufficientAllowanceError, SendERC20Error, SendMessageError, TransactionTimeoutError } from '$libs/error';
 
 export const handleBridgeError = (error: Error) => {
   switch (true) {
@@ -39,6 +39,12 @@ export const handleBridgeError = (error: Error) => {
         title: get(t)('bridge.errors.approve_rejected.title'),
       });
       break;
+    case error instanceof TransactionTimeoutError:
+      warningToast({
+        title: get(t)('bridge.errors.transaction_timeout.title'),
+        message: get(t)('bridge.errors.transaction_timeout.message'),
+      });
+      break;
     default:
       errorToast({
         title: get(t)('bridge.errors.unknown_error.title'),