fix: enable bridged usdc withdrawal, improve l1 name for custom bridg…

…e tokens
matter-labs · Apr 18, 2024 · 2ea62c4 · 2ea62c4
1 parent 7e872e4
commit 2ea62c4
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 7 deletions.
diff --git a/data/customBridgeTokens.ts b/data/customBridgeTokens.ts
@@ -3,6 +3,7 @@ export type CustomBridgeToken = {
   l1Address: string;
   l2Address: string;
   symbol: string;
+  name?: string;
   bridges: {
     label: string;
     iconUrl: string;
@@ -25,6 +26,7 @@ export const customBridgeTokens: CustomBridgeToken[] = [
       },
     ],
     symbol: "wstETH",
+    name: "Wrapped liquid staked Ether 2.0",
   },
   {
     chainId: 1,
@@ -36,10 +38,9 @@ export const customBridgeTokens: CustomBridgeToken[] = [
         iconUrl: "/img/symbiosis.svg",
         depositUrl:
           "https://app.symbiosis.finance/swap?amountIn&chainIn=Ethereum&chainOut=ZkSync%20Era&tokenIn=0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48&tokenOut=0x1d17CBcF0D6D143135aE902365D2E5e2A16538D4",
-        withdrawUrl:
-          "https://app.symbiosis.finance/swap?chainIn=ZkSync%20Era&chainOut=Ethereum&tokenIn=0x1d17CBcF0D6D143135aE902365D2E5e2A16538D4&tokenOut=0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48",
       },
     ],
     symbol: "USDC",
+    name: "USD Coin",
   },
 ];
diff --git a/store/zksync/tokens.ts b/store/zksync/tokens.ts
@@ -1,5 +1,7 @@
 import { $fetch } from "ofetch";
 
+import { customBridgeTokens } from "@/data/customBridgeTokens";
+
 import type { Api, Token } from "@/types";
 
 export const useZkSyncTokensStore = defineStore("zkSyncTokens", () => {
@@ -40,7 +42,14 @@ export const useZkSyncTokensStore = defineStore("zkSyncTokens", () => {
     return Object.fromEntries(
       tokensRaw.value
         .filter((e) => e.l1Address)
-        .map((token) => [token.l1Address!, { ...token, l1Address: undefined, address: token.l1Address! }])
+        .map((token) => {
+          const customBridgeToken = customBridgeTokens.find(
+            (e) => eraNetwork.value.l1Network?.id === e.chainId && token.l1Address === e.l1Address
+          );
+          const name = customBridgeToken?.name || token.name;
+          const symbol = customBridgeToken?.symbol || token.symbol;
+          return [token.l1Address!, { ...token, name, symbol, l1Address: undefined, address: token.l1Address! }];
+        })
     );
   });
 

diff --git a/views/transactions/Deposit.vue b/views/transactions/Deposit.vue
@@ -49,7 +49,7 @@
           :tokens="availableTokens"
           :balances="availableBalances"
           :max-amount="maxAmount"
-          :approve-required="!enoughAllowance"
+          :approve-required="!enoughAllowance && !tokenCustomBridge"
           :loading="tokensRequestInProgress || balanceInProgress"
           class="mb-block-padding-1/2 sm:mb-block-gap"
         >
@@ -432,9 +432,13 @@ const tokenCustomBridge = computed(() => {
   if (!selectedToken.value) {
     return undefined;
   }
-  return customBridgeTokens.find(
+  const customBridgeToken = customBridgeTokens.find(
     (e) => eraNetwork.value.l1Network?.id === e.chainId && e.l1Address === selectedToken.value?.address
   );
+  if (!customBridgeToken?.bridges.some((e) => e.depositUrl)) {
+    return undefined;
+  }
+  return customBridgeToken;
 });
 const amountInputTokenAddress = computed({
   get: () => selectedToken.value?.address,

diff --git a/views/transactions/Transfer.vue b/views/transactions/Transfer.vue
@@ -56,7 +56,7 @@
           :loading="tokensRequestInProgress || balanceInProgress"
         >
           <template v-if="type === 'withdrawal' && account.address" #token-dropdown-bottom>
-            <CommonAlert class="sticky bottom-0 mt-3" variant="neutral" :icon="InformationCircleIcon">
+            <CommonAlert class="sticky bottom-0 mt-6" variant="neutral" :icon="InformationCircleIcon">
               <p>Only tokens available for withdrawal are displayed</p>
             </CommonAlert>
           </template>
@@ -365,9 +365,13 @@ const tokenCustomBridge = computed(() => {
   if (props.type !== "withdrawal" && selectedToken.value) {
     return undefined;
   }
-  return customBridgeTokens.find(
+  const customBridgeToken = customBridgeTokens.find(
     (e) => eraNetwork.value.l1Network?.id === e.chainId && e.l1Address === selectedToken.value?.l1Address
   );
+  if (!customBridgeToken?.bridges.some((e) => e.withdrawUrl)) {
+    return undefined;
+  }
+  return customBridgeToken;
 });
 const amountInputTokenAddress = computed({
   get: () => selectedToken.value?.address,