feat: other send options

components/destination/DestinationItem.vue

@@ -9,6 +9,9 @@
         <div v-if="description" class="destination-item-description">{{ description }}</div>
       </div>
     </template>
+    <template #right v-if="icon">
+      <component :is="icon" class="destination-icon" aria-hidden="true" />
+    </template>
   </CommonButtonLineWithImg>
 </template>
 
@@ -28,6 +31,9 @@ defineProps({
   description: {
     type: String,
   },
+  icon: {
+    type: [Object, Function] as PropType<Component>,
+  },
 });
 </script>
 
@@ -50,5 +56,8 @@ defineProps({
       @apply text-sm leading-tight text-gray-secondary;
     }
   }
+  .destination-icon {
+    @apply mx-3 h-4 w-4 text-gray-secondary;
+  }
 }
 </style>

pages/transaction/zksync/era/index.vue

@@ -14,10 +14,48 @@
         description="Withdraw to Ethereum (L1)"
       />
     </CommonCardWithLineButtons>
+
+    <TypographyCategoryLabel>Send to exchange</TypographyCategoryLabel>
+    <CommonCardWithLineButtons>
+      <DestinationItem
+        label="Official bridge"
+        :icon-url="destinations.ethereum.iconUrl"
+        as="RouterLink"
+        :to="{ name: 'transaction-zksync-era-withdraw', query: $route.query }"
+        description="Send to exchange using official bridge"
+        disabled
+      />
+      <DestinationItem
+        v-bind="destinations.layerswap"
+        :icon="ArrowUpRightIcon"
+        as="a"
+        target="_blank"
+        href="https://www.layerswap.io/?networkName=ZKSYNCERA_MAINNET"
+      />
+    </CommonCardWithLineButtons>
+
+    <TypographyCategoryLabel>Send to another network</TypographyCategoryLabel>
+    <CommonCardWithLineButtons>
+      <DestinationItem
+        v-bind="destinations.layerswap"
+        :icon="ArrowUpRightIcon"
+        as="a"
+        target="_blank"
+        href="https://www.layerswap.io/?networkName=ZKSYNCERA_MAINNET"
+      />
+      <DestinationItem
+        v-bind="destinations.orbiter"
+        :icon="ArrowUpRightIcon"
+        as="a"
+        target="_blank"
+        href="https://www.orbiter.finance/?source=zkSync%20Era"
+      />
+    </CommonCardWithLineButtons>
   </SelectDestination>
 </template>
 
 <script lang="ts" setup>
+import { ArrowUpRightIcon } from "@heroicons/vue/24/outline";
 import { storeToRefs } from "pinia";
 
 import { useRouter } from "#app";

store/destinations.ts

@@ -30,6 +30,16 @@ export const useDestinationsStore = defineStore("destinations", () => {
       label: `Ethereum ${capitalize(selectedEthereumNetwork.value.network)}`,
       iconUrl: "/img/ethereum.svg",
     },
+    layerswap: {
+      key: "layerswap",
+      label: "Layerswap",
+      iconUrl: "/img/layerswap.svg",
+    },
+    orbiter: {
+      key: "orbiter",
+      label: "Orbiter",
+      iconUrl: "/img/orbiter.svg",
+    },
   }));
 
   return {