feat: show custom bridge notice

matter-labs · Jan 17, 2024 · a26466e · a26466e
1 parent 43cf8d3
commit a26466e
Show file tree

Hide file tree

Showing 4 changed files with 94 additions and 6 deletions.
diff --git a/components/common/input/TransactionAddress.vue b/components/common/input/TransactionAddress.vue
@@ -5,7 +5,7 @@
         <div class="font-bold">{{ label }}</div>
         <slot name="dropdown" />
       </div>
-      <div v-if="defaultLabel && isConnected">
+      <div v-if="!addressInputHidden && defaultLabel && isConnected">
         <span class="font-bold">{{ inputVisible ? "To another account" : defaultLabel }}</span>
         <CommonButtonLabel variant="light" class="ml-1" @click="toggleCustomValue()">
           {{ inputVisible ? "Use my account" : "Change" }}
@@ -50,6 +50,7 @@
         </CommonCardWithLineButtons>
       </transition>
     </div>
+    <slot name="input-body" />
     <CommonInputErrorMessage>
       <transition v-bind="TransitionOpacity()">
         <span v-if="addressError">
@@ -85,6 +86,10 @@ const props = defineProps({
   defaultLabel: {
     type: String,
   },
+  addressInputHidden: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const emit = defineEmits<{
@@ -113,7 +118,7 @@ const toggleCustomValue = () => {
 };
 
 const inputVisible = computed(() => {
-  return !props.defaultLabel || usingCustomValue.value || inputted.value;
+  return !props.addressInputHidden && (!props.defaultLabel || usingCustomValue.value || inputted.value);
 });
 
 const isAddressValid = computed(() => isAddress(inputted.value));

diff --git a/data/customBridgeTokens.ts b/data/customBridgeTokens.ts
@@ -0,0 +1,21 @@
+type CustomBridgeToken = {
+  chainId: number;
+  l1Address: string;
+  l2Address: string;
+  bridgeName: string;
+  bridgeUrlDeposit: string;
+  bridgeUrlWithdraw: string;
+  symbol: string;
+};
+
+export const customBridgeTokens: CustomBridgeToken[] = [
+  {
+    chainId: 1,
+    l1Address: "0x7f39C581F595B53c5cb19bD0b3f8dA6c935E2Ca0",
+    l2Address: "0x703b52F2b28fEbcB60E1372858AF5b18849FE867",
+    bridgeName: "txSync Bridge",
+    bridgeUrlDeposit: "https://portal.txsync.io/bridge/?token=0x703b52F2b28fEbcB60E1372858AF5b18849FE867",
+    bridgeUrlWithdraw: "https://portal.txsync.io/bridge/withdraw/?token=0x703b52F2b28fEbcB60E1372858AF5b18849FE867",
+    symbol: "wstETH",
+  },
+];
diff --git a/views/transactions/Deposit.vue b/views/transactions/Deposit.vue
@@ -68,6 +68,7 @@
           v-model="address"
           label="To"
           :default-label="`To your account ${account.address ? shortenAddress(account.address) : ''}`"
+          :address-input-hidden="!!tokenCustomBridge"
         >
           <template #dropdown>
             <CommonButtonDropdown
@@ -82,7 +83,28 @@
               <span>{{ destination.label }}</span>
             </CommonButtonDropdown>
           </template>
+          <template #input-body v-if="tokenCustomBridge">
+            <div class="mt-4">
+              Bridging {{ tokenCustomBridge.symbol }} token to {{ destination.label }} requires custom bridge. Please
+              use
+              <a :href="tokenCustomBridge.bridgeUrlDeposit" target="_blank" class="underline underline-offset-2">
+                {{ tokenCustomBridge.bridgeName }} </a
+              >.
+            </div>
+          </template>
         </CommonInputTransactionAddress>
+        <CommonButton
+          v-if="tokenCustomBridge"
+          type="submit"
+          as="a"
+          target="_blank"
+          :href="tokenCustomBridge?.bridgeUrlDeposit"
+          variant="primary"
+          class="mt-4 w-full gap-1"
+        >
+          Open {{ tokenCustomBridge?.bridgeName }}
+          <ArrowTopRightOnSquareIcon class="h-6 w-6" aria-hidden="true" />
+        </CommonButton>
       </template>
       <template v-else-if="step === 'confirm'">
         <CommonCardWithLineButtons>
@@ -107,7 +129,7 @@
         <DepositSubmitted :transaction="transactionInfo!" :make-another-transaction="resetForm" />
       </template>
 
-      <template v-if="step === 'form' || step === 'confirm'">
+      <template v-if="!tokenCustomBridge && (step === 'form' || step === 'confirm')">
         <CommonErrorBlock v-if="feeError" class="mt-2" @try-again="estimate">
           Fee estimation error: {{ feeError.message }}
         </CommonErrorBlock>
@@ -337,6 +359,7 @@ import type { Token, TokenAmount } from "@/types";
 import type { BigNumberish } from "ethers";
 
 import { useRoute, useRouter } from "#app";
+import { customBridgeTokens } from "@/data/customBridgeTokens";
 import { useDestinationsStore } from "@/store/destinations";
 import { useNetworkStore } from "@/store/network";
 import { useOnboardStore } from "@/store/onboard";
@@ -420,6 +443,14 @@ const selectedToken = computed<Token | undefined>(() => {
     defaultToken.value
   );
 });
+const tokenCustomBridge = computed(() => {
+  if (!selectedToken.value) {
+    return undefined;
+  }
+  return customBridgeTokens.find(
+    (e) => eraNetwork.value.l1Network?.id === e.chainId && e.l1Address === selectedToken.value?.address
+  );
+});
 const amountInputTokenAddress = computed({
   get: () => selectedToken.value?.address,
   set: (address) => {

diff --git a/views/transactions/Transfer.vue b/views/transactions/Transfer.vue
@@ -69,6 +69,7 @@
           v-model="address"
           label="To"
           :default-label="`To your account ${account.address ? shortenAddress(account.address) : ''}`"
+          :address-input-hidden="!!tokenCustomBridge"
           class="mt-6"
         >
           <template #dropdown>
@@ -85,8 +86,29 @@
               <span class="truncate">{{ destination.label }}</span>
             </CommonButtonDropdown>
           </template>
+          <template #input-body v-if="tokenCustomBridge">
+            <div class="mt-4">
+              Bridging {{ tokenCustomBridge.symbol }} token to {{ destination.label }} requires custom bridge. Please
+              use
+              <a :href="tokenCustomBridge.bridgeUrlWithdraw" target="_blank" class="underline underline-offset-2">
+                {{ tokenCustomBridge.bridgeName }} </a
+              >.
+            </div>
+          </template>
         </CommonInputTransactionAddress>
         <CommonInputTransactionAddress v-else v-model="address" class="mt-6" />
+        <CommonButton
+          v-if="tokenCustomBridge"
+          type="submit"
+          as="a"
+          target="_blank"
+          :href="tokenCustomBridge?.bridgeUrlDeposit"
+          variant="primary"
+          class="mt-4 w-full gap-1"
+        >
+          Open {{ tokenCustomBridge?.bridgeName }}
+          <ArrowTopRightOnSquareIcon class="h-6 w-6" aria-hidden="true" />
+        </CommonButton>
       </template>
       <template v-else-if="step === 'confirm'">
         <CommonAlert
@@ -123,7 +145,7 @@
         <TransferSubmitted :transaction="transactionInfo!" :make-another-transaction="resetForm" />
       </template>
 
-      <template v-if="step === 'form' || step === 'confirm'">
+      <template v-if="!tokenCustomBridge && (step === 'form' || step === 'confirm')">
         <CommonErrorBlock v-if="feeError" class="mt-2" @try-again="estimate">
           Fee estimation error: {{ feeError.message }}
         </CommonErrorBlock>
@@ -214,7 +236,7 @@
 <script lang="ts" setup>
 import { computed, onBeforeUnmount, ref, watch } from "vue";
 
-import { ExclamationTriangleIcon, InformationCircleIcon } from "@heroicons/vue/24/outline";
+import { ArrowTopRightOnSquareIcon, ExclamationTriangleIcon, InformationCircleIcon } from "@heroicons/vue/24/outline";
 import { useRouteQuery } from "@vueuse/router";
 import { BigNumber } from "ethers";
 import { isAddress } from "ethers/lib/utils";
@@ -227,12 +249,13 @@ import useTransaction from "@/composables/zksync/useTransaction";
 
 import type { FeeEstimationParams } from "@/composables/zksync/useFee";
 import type { TransactionDestination } from "@/store/destinations";
+import type { TransactionInfo } from "@/store/zksync/transactionStatus";
 import type { Token, TokenAmount } from "@/types";
 import type { BigNumberish } from "ethers";
 import type { PropType } from "vue";
-import type { TransactionInfo } from "~/store/zksync/transactionStatus";
 
 import { useRoute, useRouter } from "#app";
+import { customBridgeTokens } from "@/data/customBridgeTokens";
 import { useDestinationsStore } from "@/store/destinations";
 import { useOnboardStore } from "@/store/onboard";
 import { usePreferencesStore } from "@/store/preferences";
@@ -328,6 +351,14 @@ const selectedToken = computed<Token | undefined>(() => {
         defaultToken.value
     : defaultToken.value;
 });
+const tokenCustomBridge = computed(() => {
+  if (props.type !== "withdrawal" && selectedToken.value) {
+    return undefined;
+  }
+  return customBridgeTokens.find(
+    (e) => eraNetwork.value.l1Network?.id === e.chainId && e.l1Address === selectedToken.value?.l1Address
+  );
+});
 const amountInputTokenAddress = computed({
   get: () => selectedToken.value?.address,
   set: (address) => {