feat(bridge-ui): add WETH warning

packages/bridge-ui/config/schemas/configuredCustomTokens.schema.json

@@ -30,6 +30,9 @@
       },
       "mintable": {
         "type": "boolean"
+      },
+      "wrapped": {
+        "type": "boolean"
       }
     },
     "required": ["name", "addresses", "symbol", "decimals", "type", "logoURI"]

packages/bridge-ui/src/components/Bridge/FungibleBridgeComponents/ReviewStep/ReviewStep.svelte

@@ -9,6 +9,7 @@
   import { destNetwork as destChain, enteredAmount, selectedToken } from '$components/Bridge/state';
   import { PUBLIC_SLOW_L1_BRIDGING_WARNING } from '$env/static/public';
   import { LayerType } from '$libs/chain';
+  import { isWrapped, type Token } from '$libs/token';
   import { connectedSourceChain } from '$stores/network';
 
   export let hasEnoughEth: boolean = false;
@@ -21,6 +22,10 @@
 
   $: displayL1Warning = slowL1Warning && $destChain?.id && chainConfig[$destChain.id].type === LayerType.L1;
 
+  $: wrapped = $selectedToken !== null && isWrapped($selectedToken as Token);
+
+  $: wrappedAssetWarning = $t('bridge.alerts.wrapped_eth');
+
   const dispatch = createEventDispatcher();
 
   const editTransactionDetails = () => {
@@ -64,6 +69,11 @@
   <Alert type="warning">{$t('bridge.alerts.slow_bridging')}</Alert>
 {/if}
 
+{#if wrapped}
+  <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+  <Alert type="warning">{@html wrappedAssetWarning}</Alert>
+{/if}
+
 <div class="h-sep" />
 <!-- 
 Recipient & Processing Fee

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

@@ -38,7 +38,8 @@
       "nft_scan_again": "Scan again"
     },
     "alerts": {
-      "slow_bridging": "Please note: Bridging to L1 will take around 24hrs!"
+      "slow_bridging": "Please note: Bridging to L1 will take around 24hrs!",
+      "wrapped_eth": "You are bridging wrapped ETH. Please be aware that un-wrapping will only work on the original chain of the token, <span class=\"font-bold\">NOT</span> on the destination."
     },
     "button": {
       "approve": "Approve",
@@ -360,10 +361,10 @@
     "transactions": "Transactions"
   },
   "paginator": {
-    "of": "of",
-    "page": "Page",
+    "everything_loaded": "Everything loaded",
     "more": "Fetch more...",
-    "everything_loaded": "Everything loaded"
+    "of": "of",
+    "page": "Page"
   },
   "paused_modal": {
     "description": "The bridge is currently not available. Follow our official communication channels for more information. ",

packages/bridge-ui/src/libs/token/tokens.ts

@@ -24,3 +24,7 @@ export const testNFT: Token[] = customToken.filter(
 );
 
 export const tokens = [ETHToken, ...testERC20Tokens];
+
+export const getTokensByType = (type: TokenType): Token[] => tokens.filter((token) => token.type === type);
+
+export const isWrapped = (token: Token): boolean => tokens.find((token) => token.wrapped === true) === token;

packages/bridge-ui/src/libs/token/types.ts

@@ -23,6 +23,7 @@ export type Token = {
   imported?: boolean;
   mintable?: boolean;
   balance?: bigint;
+  wrapped?: boolean;
 };
 
 export type NFT = Token & {