fix: add custom bridge deposit notice (#177)

matter-labs · May 23, 2024 · acd2eda · acd2eda
1 parent 9a0c98d
commit acd2eda
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 25 deletions.
diff --git a/assets/css/style.scss b/assets/css/style.scss
@@ -1,5 +1,5 @@
 html.dark {
-  @apply bg-neutral-950;
+  @apply bg-black;
 }
 html,
 body {

diff --git a/components/common/Alert.vue b/components/common/Alert.vue
@@ -30,14 +30,6 @@ defineProps({
   &.has-icon {
     @apply grid grid-cols-[max-content_1fr] gap-block-padding-1/2;
   }
-  /* &.size- {
-    &md {
-      @apply p-4;
-    }
-    &sm {
-      @apply p-2;
-    }
-  } */
   &.variant- {
     &info {
       @apply border bg-primary-300 text-primary-700;
@@ -76,8 +68,7 @@ defineProps({
       }
     }
     &warning {
-      @apply border p-block-padding-1/2;
-      @apply border-warning-400/30 bg-warning-400/10;
+      @apply border border-warning-400/30 bg-warning-400/10;
       &.size-md {
         .alert-icon-container {
           @apply h-12 w-12 bg-warning-400;
@@ -90,6 +81,8 @@ defineProps({
         @apply sm:p-block-padding;
       }
       &.size-sm {
+        @apply p-block-padding-1/2;
+
         .alert-icon {
           @apply text-warning-400;
         }

diff --git a/components/transaction/CustomBridge.vue b/components/transaction/CustomBridge.vue
@@ -1,10 +1,16 @@
 <template>
   <div>
-    <CommonAlert variant="warning" size="sm" :icon="ExclamationTriangleIcon" class="mb-block-gap">
+    <CommonAlert
+      v-if="customBridgeToken.bridgingDisabled"
+      variant="warning"
+      size="sm"
+      :icon="ExclamationTriangleIcon"
+      class="mb-block-gap"
+    >
       <p>Bridging {{ customBridgeToken.symbol }} is not supported by zkSync Portal.</p>
     </CommonAlert>
     <TypographyCategoryLabel>
-      Use 3rd party bridges or CEXs to bridge {{ customBridgeToken.symbol }} to
+      Use 3rd party bridges to get native {{ customBridgeToken.symbol }} on
       {{ type === "deposit" ? eraNetwork.name : eraNetwork.l1Network?.name }}.
     </TypographyCategoryLabel>
     <CommonCardWithLineButtons>

diff --git a/data/customBridgeTokens.ts b/data/customBridgeTokens.ts
@@ -3,7 +3,10 @@ export type CustomBridgeToken = {
   l1Address: string;
   l2Address: string;
   symbol: string;
+  bridgedSymbol: string;
   name?: string;
+  bridgingDisabled?: true;
+  learnMoreUrl?: string;
   bridges: {
     label: string;
     iconUrl: string;
@@ -26,21 +29,18 @@ export const customBridgeTokens: CustomBridgeToken[] = [
       },
     ],
     symbol: "wstETH",
+    bridgedSymbol: "wstETH",
     name: "Wrapped liquid staked Ether 2.0",
+    bridgingDisabled: true,
   },
   {
     chainId: 1,
     l1Address: "0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48",
     l2Address: "0x3355df6D4c9C3035724Fd0e3914dE96A5a83aaf4",
-    bridges: [
-      {
-        label: "Symbiosis",
-        iconUrl: "/img/symbiosis.svg",
-        depositUrl:
-          "https://app.symbiosis.finance/swap?amountIn&chainIn=Ethereum&chainOut=ZkSync%20Era&tokenIn=0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48&tokenOut=0x1d17CBcF0D6D143135aE902365D2E5e2A16538D4",
-      },
-    ],
+    learnMoreUrl: "https://www.circle.com/blog/native-usdc-now-available-on-zksync",
+    bridges: [],
     symbol: "USDC",
+    bridgedSymbol: "USDC.e",
     name: "USD Coin",
   },
 ];
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 && !tokenCustomBridge"
+          :approve-required="!enoughAllowance && (!tokenCustomBridge || !tokenCustomBridge.bridgingDisabled)"
           :loading="tokensRequestInProgress || balanceInProgress"
           class="mb-block-padding-1/2 sm:mb-block-gap"
         >
@@ -67,11 +67,29 @@
             </CommonButtonDropdown>
           </template>
         </CommonInputTransactionAmount>
+        <CommonHeightTransition :opened="!!tokenCustomBridge && !tokenCustomBridge.bridgingDisabled">
+          <div class="mb-block-padding-1/2 sm:mb-block-gap">
+            <CommonAlert variant="warning" size="sm">
+              <p>
+                Bridged {{ tokenCustomBridge?.symbol }} ({{ tokenCustomBridge?.bridgedSymbol }}) will work but is
+                different from native {{ tokenCustomBridge?.symbol }}.
+              </p>
+              <a
+                v-if="tokenCustomBridge?.learnMoreUrl"
+                class="underline underline-offset-2"
+                target="_blank"
+                :href="tokenCustomBridge.learnMoreUrl"
+              >
+                Learn more
+              </a>
+            </CommonAlert>
+          </div>
+        </CommonHeightTransition>
         <CommonInputTransactionAddress
           v-model="address"
           label="To"
           :default-label="`To your account ${account.address ? shortenAddress(account.address) : ''}`"
-          :address-input-hidden="!!tokenCustomBridge"
+          :address-input-hidden="tokenCustomBridge?.bridgingDisabled"
         >
           <template #dropdown>
             <CommonButtonDropdown
@@ -88,7 +106,7 @@
           </template>
         </CommonInputTransactionAddress>
         <TransactionCustomBridge
-          v-if="tokenCustomBridge"
+          v-if="tokenCustomBridge?.bridgingDisabled"
           type="deposit"
           class="mt-6"
           :custom-bridge-token="tokenCustomBridge"
@@ -146,7 +164,9 @@
         <DepositSubmitted :transaction="transactionInfo!" :make-another-transaction="resetForm" />
       </template>
 
-      <template v-if="!tokenCustomBridge && (step === 'form' || step === 'confirm')">
+      <template
+        v-if="(!tokenCustomBridge || !tokenCustomBridge?.bridgingDisabled) && (step === 'form' || step === 'confirm')"
+      >
         <CommonErrorBlock v-if="feeError" class="mt-2" @try-again="estimate">
           Fee estimation error: {{ feeError.message }}
         </CommonErrorBlock>