chore(bridge-ui-v2): follow up for toast notifications (#14990)

Co-authored-by: Danylo Soloviov <41167337+Denend@users.noreply.github.com>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: xiaodino <ruby@taiko.xyz>

packages/bridge-ui-v2/src/components/Bridge/Bridge.svelte

@@ -17,7 +17,6 @@
   import { hasBridge } from '$libs/bridge/bridges';
   import type { ERC20Bridge } from '$libs/bridge/ERC20Bridge';
   import { getBridgeArgs } from '$libs/bridge/getBridgeArgs';
-  import { handleApproveError } from '$libs/bridge/handleApproveError';
   import { handleBridgeError } from '$libs/bridge/handleBridgeErrors';
   import { bridgeTxService } from '$libs/storage';
   import { ETHToken, tokens, TokenType } from '$libs/token';
@@ -138,7 +137,7 @@
       }
     } catch (err) {
       console.error(err);
-      handleApproveError(err as Error);
+      handleBridgeError(err as Error);
     }
   }
 

packages/bridge-ui-v2/src/components/Bridge/NFTBridge.svelte

@@ -20,7 +20,6 @@
   import type { ERC1155Bridge } from '$libs/bridge/ERC1155Bridge';
   import { fetchNFTs } from '$libs/bridge/fetchNFTs';
   import { getBridgeArgs } from '$libs/bridge/getBridgeArgs';
-  import { handleApproveError } from '$libs/bridge/handleApproveError';
   import { handleBridgeError } from '$libs/bridge/handleBridgeErrors';
   import { bridgeTxService } from '$libs/storage';
   import { ETHToken, type NFT, TokenType } from '$libs/token';
@@ -137,29 +136,31 @@
       const { explorer } = chainConfig[$network.id].urls;
 
       if (txHash)
-        infoToast(
-          $t('bridge.actions.approve.tx', {
+        infoToast({
+          title: $t('bridge.actions.approve.tx.title'),
+          message: $t('bridge.actions.approve.tx.message', {
             values: {
               token: $selectedToken.symbol,
               url: `${explorer}/tx/${txHash}`,
             },
           }),
-        );
+        });
 
       await pendingTransactions.add(txHash, $network.id);
 
       actionsComponent.checkTokensApproved();
 
-      successToast(
-        $t('bridge.actions.approve.success', {
+      successToast({
+        title: $t('bridge.actions.approve.success.title'),
+        message: $t('bridge.actions.approve.success.message', {
           values: {
             token: $selectedToken.symbol,
           },
         }),
-      );
+      });
     } catch (err) {
       console.error(err);
-      handleApproveError(err as Error);
+      handleBridgeError(err as Error);
     }
   }
 
@@ -187,25 +188,23 @@
 
       const explorer = chainConfig[bridgeArgs.srcChainId].urls.explorer;
 
-      infoToast(
-        $t('bridge.actions.bridge.tx', {
+      infoToast({
+        title: $t('bridge.actions.bridge.tx.title'),
+        message: $t('bridge.actions.bridge.tx.message', {
           values: {
             token: $selectedToken.symbol,
             url: `${explorer}/tx/${txHash}`,
           },
         }),
-      );
+      });
 
       //TODO: everything below should be handled differently for the stepper design. Still tbd
       await pendingTransactions.add(txHash, $network.id);
 
-      successToast(
-        $t('bridge.actions.bridge.success', {
-          values: {
-            network: $destinationChain.name,
-          },
-        }),
-      );
+      successToast({
+        title: $t('bridge.actions.bridge.success.title'),
+        message: $t('bridge.actions.bridge.success.message'),
+      });
 
       // Let's add it to the user's localStorage
       const bridgeTx = {
@@ -339,7 +338,6 @@
     nftStepDescription = $t(`bridge.description.nft.${stepKey}`);
     nextStepButtonText = getStepText();
   }
-
   onDestroy(() => {
     resetForm();
   });

packages/bridge-ui-v2/src/components/Faucet/Faucet.svelte

@@ -39,7 +39,7 @@
       console.error(err);
 
       if (err instanceof UserRejectedRequestError) {
-        warningToast({title: $t('messages.network.rejected')});
+        warningToast({ title: $t('messages.network.rejected.title') });
       }
     } finally {
       switchingNetwork = false;
@@ -81,14 +81,14 @@
 
       switch (true) {
         case err instanceof UserRejectedRequestError:
-          warningToast({title: $t('faucet.mint.rejected')});
+          warningToast({ title: $t('faucet.mint.rejected') });
           break;
         case err instanceof MintError:
           // TODO: see contract for all possible errors
-          errorToast({title: $t('faucet.mint.error')});
+          errorToast({ title: $t('faucet.mint.error') });
           break;
         default:
-          errorToast({title: $t('faucet.mint.unknown_error')});
+          errorToast({ title: $t('faucet.mint.unknown_error') });
           break;
       }
     } finally {

packages/bridge-ui-v2/src/components/NotificationToast/ItemToast.svelte

@@ -46,7 +46,7 @@
     success: 'fill-green-600',
     error: 'fill-red-500',
     warning: 'fill-yellow-500',
-    info: 'fill-pink-700',
+    info: 'fill-pink-200',
     unknown: 'fill-grey-5',
   };
 
@@ -68,10 +68,10 @@
     <Icon type={iconTypeMap[type]} size={24} fillClass={alertIconClassMap[type]} />
     <div class={messageClasses}>
       <!-- eslint-disable-next-line svelte/no-at-html-tags -->
-      <div class='callout-bold leading-[24px]'>{@html title}</div>
+      <div class="callout-bold leading-[24px]">{@html title}</div>
       {#if message}
         <!-- eslint-disable-next-line svelte/no-at-html-tags -->
-        <div class='callout-regular'>{@html message}</div>
+        <div class="callout-regular">{@html message}</div>
       {/if}
     </div>
   </div>

packages/bridge-ui-v2/src/components/NotificationToast/NotificationToast.svelte

@@ -14,10 +14,23 @@
     closeManually?: boolean;
   };
 
+  const closeManuallyDefaults: Record<TypeToast, boolean> = {
+    // Defaults when no value was provided for closeManually
+    success: false,
+    error: true,
+    warning: false,
+    info: false,
+    unknown: false,
+  };
+
+  function getDefaultCloseBehaviour(type: TypeToast): boolean {
+    return closeManuallyDefaults[type];
+  }
+
   export function notify(notificationType: NotificationType) {
     const id = Number(uid());
     const close = () => toast.pop(id);
-    const { title, message, type = 'unknown', closeManually = false } = notificationType;
+    const { title, message, type = 'unknown', closeManually = getDefaultCloseBehaviour(type) } = notificationType;
 
     toast.push({
       id,
@@ -33,31 +46,27 @@
     notify({
       ...notificationType,
       type: 'success',
-      closeManually: false
     });
   }
 
   export function errorToast(notificationType: NotificationType) {
     notify({
       ...notificationType,
       type: 'error',
-      closeManually: true
     });
   }
 
   export function warningToast(notificationType: NotificationType) {
     notify({
       ...notificationType,
       type: 'warning',
-      closeManually: false
     });
   }
 
   export function infoToast(notificationType: NotificationType) {
     notify({
       ...notificationType,
       type: 'info',
-      closeManually: false
     });
   }
 </script>
@@ -68,7 +77,6 @@
 
   const options: SvelteToastOptions = {
     duration: toastConfig.duration,
-    pausable: false,
   };
 </script>
 
@@ -93,7 +101,7 @@
     --toastPadding: 0;
     --toastMsgPadding: 0;
     --toastBarWidth: 0;
-    --toastBarHeight: 0;
+    --toastBarHeight: 1;
     --toastBtnWidth: 0;
     --toastBtnHeight: 0;
     --toastBtnContent: '';

packages/bridge-ui-v2/src/i18n/en.json

@@ -4,7 +4,7 @@
       "approve": {
         "tx": {
           "title": "Approval sent",
-          "message": "Track {token} token approval status on the explorer <a href=\"{url}\" target=\"_blank\"><b>here</b></a>."
+          "message": "Track the {token} token approval status on the explorer <a href=\"{url}\" target=\"_blank\"><b>here</b></a>."
         },
         "success": {
           "title": "Approved token",
@@ -46,20 +46,42 @@
       }
     },
     "errors": {
-      "approve_error": "Failed to approve token",
-      "approve_rejected": "Request to approve rejected by user",
-      "bll_token": "BLL has a deliberate ~50% failure rate. Refer to our guide",
+      "approve_error": {
+        "title": "Approval failed",
+        "message": "We encountered an issue while trying to approve this token."
+      },
+      "approve_rejected": {
+        "title": "Request to approve rejected by user"
+      },
       "cannot_fetch_balance": "Error fetching balance. Wrong chain?",
       "custom_token": {
         "description": "Are you on the right network?",
         "not_found": "Token not found!"
       },
-      "insufficient_allowance": "You need to increase your allowance in order to be able to bridge.",
-      "insufficient_balance": "Not enough balance in your wallet for this token.",
-      "no_allowance_required": "You already have enough allowance.",
-      "send_erc20_error": "Failed to send ERC20 token",
-      "send_message_error": "Failed to send message",
-      "unknown_error": "An error occured"
+      "insufficient_allowance": {
+        "message": "Please increase your allowance to proceed with bridging.",
+        "title": "Insufficient allowance"
+      },
+      "insufficient_balance": {
+        "message": "Sorry, your wallet balance is too low to cover this token.",
+        "title": "Insufficient wallet balance"
+      },
+      "no_allowance_required": {
+        "message": "You already have sufficient allowance for this request.",
+        "title": "Allowance already set"
+      },
+      "send_erc20_error": {
+        "title": "Failed to send",
+        "message": "There was an issue attempting to send ERC20 token."
+      },
+      "send_message_error": {
+        "title": "Failed to send",
+        "message": "Please try again"
+      },
+      "unknown_error": {
+        "message": "An unexpected error has occurred. Please try again.",
+        "title": "Unknown error"
+      }
     },
     "nft": {
       "step": {
@@ -138,19 +160,19 @@
       "rejected": {
         "title": "Error minting token",
         "message": "An error occurred while attempting to mint the token."
-      },
-      "title": "Faucet",
-      "warning": {
-        "insufficient_balance": "You don't have enough ETH to complete the transaction. Please add some ETH to your wallet.",
-        "no_connected": "Please connect your wallet to mint tokens.",
-        "not_mintable": "This token is not mintable on this network",
-        "token_minted": "You have already minted this token.",
-        "unknown": "Something did not work"
-      },
-      "wrong_chain": {
-        "button": "Switch to {network}",
-        "message": "It appears you are on the wrong network. Switch to {network} to mint tokens."
       }
+    },
+    "title": "Faucet",
+    "warning": {
+      "insufficient_balance": "You don't have enough ETH to complete the transaction. Please add some ETH to your wallet.",
+      "no_connected": "Please connect your wallet to mint tokens.",
+      "not_mintable": "This token is not mintable on this network",
+      "token_minted": "You have already minted this token.",
+      "unknown": "Something did not work"
+    },
+    "wrong_chain": {
+      "button": "Switch to {network}",
+      "message": "It appears you are on the wrong network. Switch to {network} to mint tokens."
     }
   },
   "inputs": {
@@ -188,8 +210,14 @@
       "required": "Please connect your wallet."
     },
     "network": {
-      "pending": "A network switch is still pending, open your wallet to check the status.",
-      "rejected": "Request to switch chain rejected.",
+      "pending": {
+        "message": "Please open your wallet to check the current status.",
+        "title": "Network switch pending"
+      },
+      "rejected": {
+        "message": "Request to switch network has failed.",
+        "title": "Network switch error"
+      },
       "required": "Source chain must be selected.",
       "required_dest": "Destination chain must be selected.",
       "switching": "Switching network"