From a77221ae1e374278f14cd5122d2e7272f9a75aa1 Mon Sep 17 00:00:00 2001
From: Korbinian <KorbinianK@users.noreply.github.com>
Date: Wed, 8 May 2024 16:41:54 +0200
Subject: [PATCH] feat(bridge-ui): add WETH warning (#17051)

---
 .../config/schemas/configuredCustomTokens.schema.json  |  3 +++
 .../ReviewStep/ReviewStep.svelte                       | 10 ++++++++++
 packages/bridge-ui/src/i18n/en.json                    |  9 +++++----
 packages/bridge-ui/src/libs/token/tokens.ts            |  4 ++++
 packages/bridge-ui/src/libs/token/types.ts             |  1 +
 5 files changed, 23 insertions(+), 4 deletions(-)

diff --git a/packages/bridge-ui/config/schemas/configuredCustomTokens.schema.json b/packages/bridge-ui/config/schemas/configuredCustomTokens.schema.json
index 044be0aff9..1a92562b13 100644
--- a/packages/bridge-ui/config/schemas/configuredCustomTokens.schema.json
+++ b/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"]
diff --git a/packages/bridge-ui/src/components/Bridge/FungibleBridgeComponents/ReviewStep/ReviewStep.svelte b/packages/bridge-ui/src/components/Bridge/FungibleBridgeComponents/ReviewStep/ReviewStep.svelte
index 17a5dd1a86..099573e7cf 100644
--- a/packages/bridge-ui/src/components/Bridge/FungibleBridgeComponents/ReviewStep/ReviewStep.svelte
+++ b/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
diff --git a/packages/bridge-ui/src/i18n/en.json b/packages/bridge-ui/src/i18n/en.json
index 7b76320727..0a32cdb4ac 100644
--- a/packages/bridge-ui/src/i18n/en.json
+++ b/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",
@@ -361,10 +362,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. ",
diff --git a/packages/bridge-ui/src/libs/token/tokens.ts b/packages/bridge-ui/src/libs/token/tokens.ts
index aab7965a15..1d93f217ee 100644
--- a/packages/bridge-ui/src/libs/token/tokens.ts
+++ b/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;
diff --git a/packages/bridge-ui/src/libs/token/types.ts b/packages/bridge-ui/src/libs/token/types.ts
index da71e4b15e..8472614d9f 100644
--- a/packages/bridge-ui/src/libs/token/types.ts
+++ b/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 & {