feat: add list of custom bridges for tokens

.github/workflows/feature.yml

@@ -35,6 +35,8 @@ jobs:
           echo "SCREENING_API_URL=${{ secrets.SCREENING_API_URL }}" >> .env
           echo "DATAPLANE_URL=${{ secrets.DATAPLANE_URL }}" >> .env
           echo "RUDDER_KEY=${{ secrets.RUDDER_KEY }}" >> .env
+          echo "MASA_KEY=${{ secrets.MASA_KEY }}" >> .env
+          echo "MASA_APP_ID=${{ secrets.MASA_APP_ID }}" >> .env
 
       - name: Build
         run: |

.github/workflows/production.yml

@@ -37,6 +37,8 @@ jobs:
           echo "SCREENING_API_URL=${{ secrets.SCREENING_API_URL }}" >> .env
           echo "DATAPLANE_URL=${{ secrets.DATAPLANE_URL }}" >> .env
           echo "RUDDER_KEY=${{ secrets.RUDDER_KEY }}" >> .env
+          echo "MASA_KEY=${{ secrets.MASA_KEY }}" >> .env
+          echo "MASA_APP_ID=${{ secrets.MASA_APP_ID }}" >> .env
 
       - name: Build
         run: |

.github/workflows/release.yml

@@ -68,6 +68,8 @@ jobs:
           echo "SCREENING_API_URL=${{ secrets.SCREENING_API_URL }}" >> .env
           echo "DATAPLANE_URL=${{ secrets.DATAPLANE_URL }}" >> .env
           echo "RUDDER_KEY=${{ secrets.RUDDER_KEY }}" >> .env
+          echo "MASA_KEY=${{ secrets.MASA_KEY }}" >> .env
+          echo "MASA_APP_ID=${{ secrets.MASA_APP_ID }}" >> .env
 
       - name: Build
         run: |

components/common/Alert.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="alert-container" :class="[`variant-${variant}`, { 'has-icon': !!icon }]">
+  <div class="alert-container" :class="[`variant-${variant}`, `size-${size}`, { 'has-icon': !!icon }]">
     <div v-if="icon" class="alert-icon-container">
       <component :is="icon" class="alert-icon" aria-hidden="true" />
     </div>
@@ -14,6 +14,10 @@ defineProps({
   variant: {
     type: String as PropType<"info" | "neutral" | "success" | "warning" | "error">,
   },
+  size: {
+    type: String as PropType<"md" | "sm">,
+    default: "md",
+  },
   icon: {
     type: [Object, Function] as PropType<Component>,
   },
@@ -26,6 +30,14 @@ 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;
@@ -64,16 +76,25 @@ defineProps({
       }
     }
     &warning {
-      @apply border p-block-padding-1/2 sm:p-block-padding;
+      @apply border p-block-padding-1/2;
       @apply border-warning-400/30 bg-warning-400/10;
+      &.size-md {
+        .alert-icon-container {
+          @apply h-12 w-12 bg-warning-400;
 
-      .alert-icon-container {
-        @apply h-12 w-12 bg-warning-400;
+          .alert-icon {
+            @apply text-neutral-950;
+          }
+        }
 
+        @apply sm:p-block-padding;
+      }
+      &.size-sm {
         .alert-icon {
-          @apply text-neutral-950;
+          @apply text-warning-400;
         }
       }
+
       .alert-body {
         .alert-link {
           @apply hover:text-orange-600 dark:text-warning-400 dark:hover:text-warning-600;

components/transaction/CustomBridge.vue

@@ -0,0 +1,58 @@
+<template>
+  <div>
+    <CommonAlert variant="warning" size="sm" :icon="ExclamationTriangleIcon" class="mb-block-gap">
+      <p>{{ customBridgeToken.symbol }} token requires use of a custom bridge</p>
+    </CommonAlert>
+    <TypographyCategoryLabel>
+      Use 3rd party bridges or CEXs to bridge {{ customBridgeToken.symbol }} to
+      {{ type === "deposit" ? eraNetwork.name : eraNetwork.l1Network?.name }}.
+    </TypographyCategoryLabel>
+    <CommonCardWithLineButtons>
+      <DestinationItem
+        v-for="(item, index) in displayedBridges"
+        :key="index"
+        :label="item.label"
+        :icon-url="item.iconUrl"
+        :href="item.href!"
+        :icon="ArrowTopRightOnSquareIcon"
+        as="a"
+        target="_blank"
+      />
+    </CommonCardWithLineButtons>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ExclamationTriangleIcon, ArrowTopRightOnSquareIcon } from "@heroicons/vue/24/outline";
+
+import { type CustomBridgeToken } from "@/data/customBridgeTokens";
+
+const props = defineProps({
+  customBridgeToken: {
+    type: Object as PropType<CustomBridgeToken>,
+    required: true,
+  },
+  type: {
+    type: String as PropType<"deposit" | "withdraw">,
+    required: true,
+  },
+});
+
+const { eraNetwork } = storeToRefs(useZkSyncProviderStore());
+const displayedBridges = computed(() => {
+  if (props.type === "deposit") {
+    return props.customBridgeToken.bridges
+      .map((e) => ({
+        ...e,
+        href: e.depositUrl,
+      }))
+      .filter((e) => e.href);
+  }
+  return props.customBridgeToken.bridges
+    .map((e) => ({
+      ...e,
+      href: e.withdrawUrl,
+    }))
+    .filter((e) => e.href);
+});
+</script>

data/customBridgeTokens.ts

@@ -1,21 +1,49 @@
-type CustomBridgeToken = {
+export type CustomBridgeToken = {
   chainId: number;
   l1Address: string;
   l2Address: string;
-  bridgeName: string;
-  bridgeUrlDeposit: string;
-  bridgeUrlWithdraw: string;
   symbol: string;
+  bridges: {
+    label: string;
+    iconUrl: string;
+    depositUrl?: string;
+    withdrawUrl?: 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",
+    bridges: [
+      {
+        label: "txSync Bridge",
+        iconUrl: "/img/txsync.png",
+        depositUrl: "https://portal.txsync.io/bridge/?token=0x703b52F2b28fEbcB60E1372858AF5b18849FE867",
+        withdrawUrl: "https://portal.txsync.io/bridge/withdraw/?token=0x703b52F2b28fEbcB60E1372858AF5b18849FE867",
+      },
+    ],
     symbol: "wstETH",
   },
+  {
+    chainId: 1,
+    l1Address: "0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48",
+    l2Address: "0x3355df6D4c9C3035724Fd0e3914dE96A5a83aaf4",
+    bridges: [
+      {
+        label: "Orbiter",
+        iconUrl: "/img/orbiter.svg",
+        depositUrl: "https://www.orbiter.finance/?source=Ethereum&dest=zkSync%20Era&token=USDC",
+        withdrawUrl: "https://www.orbiter.finance/?source=zkSync%20Era&dest=Ethereum&token=USDC",
+      },
+      {
+        label: "Symbiosis",
+        iconUrl: "/img/symbiosis.svg",
+        depositUrl: "https://app.symbiosis.finance/bridge",
+        withdrawUrl: "https://app.symbiosis.finance/bridge",
+      },
+    ],
+    symbol: "USDC",
+  },
 ];

views/transactions/Deposit.vue

@@ -86,28 +86,13 @@
               <span>{{ destination.label }}</span>
             </CommonButtonDropdown>
           </template>
-          <template v-if="tokenCustomBridge" #input-body>
-            <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
+        <TransactionCustomBridge
           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>
+          type="deposit"
+          class="mt-6"
+          :custom-bridge-token="tokenCustomBridge"
+        />
       </template>
       <template v-else-if="step === 'wallet-warning'">
         <CommonAlert variant="warning" :icon="ExclamationTriangleIcon" class="mb-block-padding-1/2 sm:mb-block-gap">

views/transactions/Transfer.vue

@@ -98,29 +98,14 @@
               <span class="truncate">{{ destination.label }}</span>
             </CommonButtonDropdown>
           </template>
-          <template v-if="tokenCustomBridge" #input-body>
-            <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
+        <TransactionCustomBridge
           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>
+          type="withdraw"
+          class="mt-6"
+          :custom-bridge-token="tokenCustomBridge"
+        />
       </template>
       <template v-else-if="step === 'withdrawal-finalization-warning'">
         <CommonAlert variant="warning" :icon="ExclamationTriangleIcon" class="mb-block-padding-1/2 sm:mb-block-gap">