From 37889bad682614ce0f0cb76657e8ee903600e3de Mon Sep 17 00:00:00 2001
From: Jack Hamer <jackhamer0990@gmail.com>
Date: Tue, 23 May 2023 22:13:15 +0300
Subject: [PATCH] feat: other send options

---
 components/destination/DestinationItem.vue |   9 +++++
 pages/transaction/zksync/era/index.vue     |  38 +++++++++++++++++++++
 public/.DS_Store                           | Bin 6148 -> 6148 bytes
 public/img/layerswap.svg                   |   6 ++++
 public/img/orbiter.svg                     |  24 +++++++++++++
 store/destinations.ts                      |  10 ++++++
 6 files changed, 87 insertions(+)
 create mode 100644 public/img/layerswap.svg
 create mode 100644 public/img/orbiter.svg

diff --git a/components/destination/DestinationItem.vue b/components/destination/DestinationItem.vue
index 64adcb49b..9c596c0bc 100644
--- a/components/destination/DestinationItem.vue
+++ b/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>
diff --git a/pages/transaction/zksync/era/index.vue b/pages/transaction/zksync/era/index.vue
index c7bd6a587..4d7601d9e 100644
--- a/pages/transaction/zksync/era/index.vue
+++ b/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";
diff --git a/public/.DS_Store b/public/.DS_Store
index 72a9d2aecf7310de910bdb2f4c33396cfbe1590b..2d443e668cf30b1ada58def19e81c2b00d33f1f0 100644
GIT binary patch
delta 349
zcmZoMXfc=|#>B`mF;R?_gMono$Pkfb0y02=8HgDf7z7xK3zBm3lYqP(Nd*%Vm)C<N
zm>Dt|av9Q-%8?~=GK)(L46ZRUF|)9;v9oisbF;?=XXKX$mn4>y7CR*tMT2-D`T03X
zFm_^6SY~Q@ynu*veqKppW?pI$SVLw?Do{yGcxGNoez{YAX<kY(SZ^>;q8=#2$;rVP
zFCbA}ZDeMkqhM@cQmdm-ZD|B#n^+pv)^c))D(hPZ#b@W_=H+(*oeKnvK)-+iFO-H+
z-9QG^J83D!$w@%xfs{gp%7TmXa`N-ifg(@?Hm3h$oopb&vYDHMn*$hl8xy}XPv#d<
SWCaDB!em1c;msZ*dzb;@lT=6m

delta 111
zcmZoMXfc=|#>AjHu~68Ak%57MnIV%QmmxhZr8qe$KR*W~1O`k{8YBS30t`_3&4Ntd
pST`#$ZDQQa&cV+CGzlp3oq009h$1IQZ30N&WD_3c%`qY?m;rlQ6tVyS

diff --git a/public/img/layerswap.svg b/public/img/layerswap.svg
new file mode 100644
index 000000000..60f23f857
--- /dev/null
+++ b/public/img/layerswap.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg viewBox="100 100 400 400" width="400" height="400" xmlns="http://www.w3.org/2000/svg">
+  <path opacity="0.6" d="M 221.051 236.854 C 221.051 228.68 227.68 222.051 235.851 222.051 L 363.504 222.051 C 371.678 222.051 378.304 228.68 378.304 236.854 L 378.304 364.504 C 378.304 372.678 371.678 379.307 363.504 379.307 L 235.851 379.307 C 227.68 379.307 221.051 372.678 221.051 364.504 L 221.051 236.854 Z" fill="#ff0093" style=""/>
+  <path opacity="0.5" d="M 250.103 265.9 C 250.103 257.728 256.728 251.1 264.902 251.1 L 392.555 251.1 C 400.727 251.1 407.355 257.728 407.355 265.9 L 407.355 393.552 C 407.355 401.727 400.727 408.352 392.555 408.352 L 264.902 408.352 C 256.728 408.352 250.103 401.727 250.103 393.552 L 250.103 265.9 Z" fill="#ff0093" style=""/>
+  <path opacity="0.9" d="M 192 207.8 C 192 199.625 198.625 193 206.8 193 L 334.453 193 C 342.627 193 349.252 199.625 349.252 207.8 L 349.252 335.453 C 349.252 343.627 342.627 350.252 334.453 350.252 L 206.8 350.252 C 198.625 350.252 192 343.627 192 335.453 L 192 207.8 Z" fill="#ff0093" style=""/>
+</svg>
\ No newline at end of file
diff --git a/public/img/orbiter.svg b/public/img/orbiter.svg
new file mode 100644
index 000000000..4c7baf30f
--- /dev/null
+++ b/public/img/orbiter.svg
@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg viewBox="100 100 400 400" width="400" height="400" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="icon-light-logo-mobile_paint0_linear_1066_28677" x1="14.9566" y1="12.6306" x2="26.4824" y2="24.5481" gradientUnits="userSpaceOnUse" gradientTransform="matrix(5.319468, 0, 0, 5.319468, 190.182358, 188.701294)">
+      <stop stop-color="#EF2F2D"/>
+      <stop offset="1" stop-color="#89272D"/>
+    </linearGradient>
+    <linearGradient id="icon-light-logo-mobile_paint1_linear_1066_28677" x1="3.38138" y1="17.1975" x2="42.5798" y2="27.7053" gradientUnits="userSpaceOnUse" gradientTransform="matrix(5.319468, 0, 0, 5.319468, 190.182358, 188.701294)">
+      <stop stop-color="#434344"/>
+      <stop offset="0.29" stop-color="#404041"/>
+      <stop offset="0.51" stop-color="#363637"/>
+      <stop offset="0.71" stop-color="#262627"/>
+      <stop offset="0.9" stop-color="#0F0F0F"/>
+      <stop offset="1"/>
+    </linearGradient>
+  </defs>
+  <path d="M 335.182 273.139 C 335.615 283.711 337.122 301.608 337.85 310.395 C 337.901 311.034 337.817 311.678 337.601 312.283 C 337.388 312.888 337.046 313.441 336.601 313.904 C 336.155 314.367 335.617 314.731 335.023 314.97 C 334.426 315.209 333.786 315.319 333.143 315.293 C 326.643 314.988 314.543 314.528 300.068 314.465 C 285.958 314.398 274.284 314.787 267.957 315.058 C 267.318 315.084 266.679 314.973 266.088 314.734 C 265.493 314.494 264.957 314.132 264.514 313.671 C 264.07 313.208 263.73 312.658 263.516 312.057 C 263.3 311.454 263.216 310.811 263.267 310.175 C 263.985 301.465 265.396 283.704 265.854 273.139 C 266.165 264.169 269.954 255.674 276.423 249.452 C 282.891 243.23 291.528 239.772 300.503 239.811 C 309.482 239.765 318.126 243.22 324.602 249.441 C 331.076 255.664 334.872 264.165 335.182 273.139 Z M 300.457 256.316 C 296.425 256.315 292.485 257.509 289.132 259.748 C 285.781 261.985 283.168 265.171 281.623 268.894 C 280.08 272.618 279.676 276.716 280.46 280.67 C 281.246 284.624 283.187 288.257 286.038 291.107 C 288.887 293.958 292.517 295.899 296.472 296.686 C 300.427 297.472 304.523 297.07 308.25 295.528 C 311.973 293.986 315.157 291.372 317.398 288.021 C 319.637 284.67 320.831 280.729 320.831 276.698 C 320.831 271.295 318.688 266.115 314.868 262.292 C 311.052 258.472 305.872 256.321 300.471 256.316 L 300.457 256.316 Z" fill="url(#icon-light-logo-mobile_paint0_linear_1066_28677)" style=""/>
+  <path d="M 300.817 265.006 C 302.001 266.364 302.654 268.103 302.656 269.904 C 302.634 270.934 302.411 271.95 301.997 272.893 C 301.584 273.839 300.986 274.69 300.243 275.403 C 299.499 276.117 298.622 276.676 297.662 277.05 C 296.7 277.425 295.677 277.606 294.646 277.584 C 293.457 277.591 292.28 277.335 291.2 276.836 C 290.12 276.335 289.165 275.603 288.401 274.692 C 288.26 275.411 288.186 276.144 288.183 276.878 C 288.183 283.438 293.722 288.757 300.554 288.757 C 307.387 288.757 312.917 283.438 312.917 276.878 C 312.917 270.316 307.528 265.109 300.817 265.006 Z" fill="#2D2F31" style=""/>
+  <path d="M 319.091 252.686 C 318.933 252.695 318.776 252.674 318.628 252.621 C 318.477 252.57 318.341 252.487 318.224 252.383 C 318.107 252.278 318.012 252.15 317.943 252.008 C 317.875 251.866 317.838 251.711 317.829 251.553 C 317.727 248.9 318.204 243.465 325.077 237.533 C 329.813 233.45 336.406 231.975 344.699 233.14 C 344.858 233.161 345.011 233.214 345.146 233.296 C 345.284 233.38 345.404 233.488 345.497 233.618 C 345.59 233.747 345.658 233.894 345.692 234.05 C 345.728 234.205 345.731 234.367 345.705 234.525 C 345.648 234.818 345.484 235.078 345.244 235.256 C 345.004 235.434 344.706 235.514 344.408 235.481 C 336.859 234.413 330.931 235.694 326.765 239.279 C 320.786 244.457 320.256 249.096 320.294 251.475 C 320.302 251.78 320.19 252.078 319.982 252.302 C 319.774 252.527 319.488 252.662 319.182 252.68 L 319.091 252.686 Z" fill="#2D2F31" style=""/>
+  <path d="M 343.02 236.711 C 344.919 236.711 346.457 235.232 346.457 233.404 C 346.457 231.579 344.919 230.099 343.02 230.099 C 341.123 230.099 339.585 231.579 339.585 233.404 C 339.585 235.232 341.123 236.711 343.02 236.711 Z" fill="#2D2F31" style=""/>
+  <path d="M 283.176 252.906 C 283.333 252.917 283.491 252.896 283.64 252.845 C 283.789 252.792 283.926 252.714 284.043 252.608 C 284.16 252.503 284.256 252.376 284.324 252.235 C 284.391 252.092 284.43 251.937 284.437 251.779 C 284.548 249.063 284.094 242.872 277.191 236.898 C 272.46 232.817 265.862 231.34 257.568 232.505 C 257.409 232.528 257.258 232.582 257.122 232.666 C 256.985 232.746 256.866 232.856 256.771 232.986 C 256.679 233.115 256.612 233.261 256.576 233.417 C 256.541 233.572 256.537 233.733 256.564 233.89 C 256.618 234.182 256.783 234.445 257.024 234.623 C 257.263 234.8 257.561 234.881 257.857 234.849 C 265.407 233.779 271.341 235.062 275.502 238.646 C 281.501 243.822 282.018 249.219 281.94 251.664 C 281.931 251.971 282.043 252.27 282.251 252.497 C 282.458 252.725 282.745 252.862 283.053 252.88 L 283.176 252.906 Z" fill="#2D2F31" style=""/>
+  <path d="M 259.747 236.711 C 261.646 236.711 263.185 235.232 263.185 233.404 C 263.185 231.579 261.646 230.099 259.747 230.099 C 257.851 230.099 256.312 231.579 256.312 233.404 C 256.312 235.232 257.851 236.711 259.747 236.711 Z" fill="#2D2F31" style=""/>
+  <path d="M 410.99 357.23 C 410.99 346.509 384.139 329.48 384.139 329.48 L 383.829 329.389 C 388.254 311.48 390.531 303.509 390.823 291.862 C 391.47 265.264 384.761 242.748 367.899 223.006 C 352.222 204.651 327.266 194 300.61 194 C 272.276 194 250.438 204.8 234.231 222.69 C 218.023 240.58 209.89 259.983 210.358 291.564 C 210.492 300.402 212.498 315.239 216.827 328.543 L 216.522 328.633 C 216.522 328.633 190.183 345.338 190.183 356.914 C 190.183 360.336 204.417 364.678 233.778 366.055 L 217.402 390.592 C 216.756 392.681 217.157 395.553 218.911 396.783 C 220.639 397.922 222.616 398.623 224.674 398.834 C 227.788 398.924 228.757 398.025 229.903 395.96 L 246.344 367.337 C 263.814 368.03 274.929 368.398 294.915 368.436 L 294.915 401.196 C 295.032 403.168 295.867 406.774 301.166 406.774 C 305.979 406.774 306.807 403.396 306.807 401.196 L 306.807 368.456 C 326.769 368.417 337.626 368.683 355.064 367.998 L 372.293 395.644 C 372.606 396.536 373.204 397.301 373.993 397.821 C 374.784 398.341 375.723 398.589 376.667 398.523 C 378.349 398.549 380.002 398.1 381.441 397.229 C 383.383 396.361 383.383 393.172 382.599 390.281 L 366.373 366.689 C 394.711 364.334 410.99 359.98 410.99 357.23 Z M 240.948 354.086 C 238.311 354.045 235.8 352.958 233.963 351.067 C 232.128 349.172 231.118 346.628 231.158 343.991 C 231.158 338.415 235.538 334.526 240.948 334.526 C 246.357 334.526 250.737 338.408 250.737 343.991 C 250.774 346.627 249.766 349.171 247.931 351.065 C 246.095 352.956 243.583 354.044 240.948 354.086 Z M 300.59 354.643 C 298.581 354.704 296.597 354.165 294.896 353.094 C 293.195 352.02 291.852 350.465 291.04 348.626 C 290.226 346.787 289.983 344.746 290.338 342.767 C 290.691 340.787 291.628 338.958 293.029 337.514 C 294.43 336.072 296.227 335.079 298.197 334.664 C 300.163 334.25 302.21 334.431 304.073 335.187 C 305.937 335.942 307.532 337.236 308.656 338.904 C 309.779 340.572 310.379 342.538 310.379 344.549 C 310.419 347.186 309.41 349.729 307.573 351.622 C 305.738 353.514 303.227 354.602 300.59 354.643 Z M 360.225 355.204 C 358.216 355.266 356.234 354.728 354.532 353.656 C 352.83 352.584 351.487 351.029 350.675 349.189 C 349.863 347.349 349.618 345.31 349.973 343.329 C 350.328 341.35 351.265 339.521 352.666 338.079 C 354.065 336.635 355.865 335.642 357.831 335.228 C 359.799 334.814 361.847 334.995 363.709 335.751 C 365.572 336.505 367.169 337.8 368.292 339.468 C 369.416 341.136 370.014 343.1 370.014 345.112 C 370.053 347.747 369.042 350.291 367.208 352.183 C 365.372 354.077 362.862 355.163 360.225 355.204 Z M 375.244 325.702 C 356.317 320.88 328.294 321.12 300.582 321.12 C 272.871 321.12 246.881 320.272 225.822 325.702 C 222.67 313.039 220.198 300.402 219.88 290.613 C 218.404 245.115 249.139 201.973 300.582 201.973 C 352.027 201.973 383.791 245.147 381.823 290.613 C 381.208 304.925 377.216 318.027 375.244 325.702 Z" fill="url(#icon-light-logo-mobile_paint1_linear_1066_28677)" style=""/>
+</svg>
\ No newline at end of file
diff --git a/store/destinations.ts b/store/destinations.ts
index 0be9c7b2d..54b8f3db1 100644
--- a/store/destinations.ts
+++ b/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 {