Feat/multichain swap

packages/extension/src/ui/action/components/app-menu/index.vue

@@ -40,6 +40,7 @@
             <more-icon />
           </tooltip>
         </button>
+        <!-- DROPDOWN MENU-->
         <div v-show="isOpenMore" ref="dropdown" class="app__menu-dropdown">
           <button class="app__menu-dropdown-link" @click="otherNetworksAction">
             <manage-networks-icon /> <span>Other networks</span>
@@ -65,6 +66,7 @@
         </div>
       </div>
     </div>
+    <!-- SEARCH-->
     <base-search
       ref="searchNetworksComponent"
       v-show="isExpanded"
@@ -83,6 +85,18 @@
         </button>
       </tooltip>
     </div>
+    <!-- Cross Chain SWAP -->
+    <button
+      v-if="isExpanded"
+      class="app__menu__cross-chain-button"
+      @click="openSwap"
+    >
+      <swap-multicolor-icon />
+      <div>
+        <p class="title">Cross Chain Swap</p>
+        <p class="subtext">Swap assets on any chains</p>
+      </div>
+    </button>
 
     <!-- Networks Tabs  -->
     <app-menu-tab
@@ -198,7 +212,9 @@ import { useUpdatesStore } from '@action/store/updates-store';
 import { storeToRefs } from 'pinia';
 import { onClickOutside } from '@vueuse/core';
 import SearchIcon from '@action/icons/common/search.vue';
+import SwapMulticolorIcon from '@action/icons/actions/swap-multicolor.vue';
 import { useMenuStore } from '@action/store/menu-store';
+import { useRoute, useRouter } from 'vue-router';
 
 const appMenuRef = ref(null);
 
@@ -524,6 +540,24 @@ const updateGradient = (newGradient: string) => {
     (appMenuRef.value as HTMLElement).style.background =
       `radial-gradient(137.35% 97% at 100% 50%, rgba(250, 250, 250, 0.94) 0%, rgba(250, 250, 250, 0.96) 28.91%, rgba(250, 250, 250, 0.98) 100%), linear-gradient(180deg, ${newGradient} 80%, #684CFF 100%)`;
 };
+
+/** ------------------
+ * Swap Button
+ ------------------*/
+const route = useRoute();
+const router = useRouter();
+const openSwap = () => {
+  try {
+    router.push({
+      name: 'swap',
+      params: {
+        id: route.params.id,
+      },
+    });
+  } catch (e) {
+    console.error('Error opening swap:', e);
+  }
+};
 </script>
 
 <style lang="less">
@@ -688,7 +722,7 @@ const updateGradient = (newGradient: string) => {
       box-shadow 0.4s ease-in-out;
     &__scroll-area {
       &-expand {
-        height: 448px;
+        height: 382px;
       }
       &-collapse {
         height: 496px;
@@ -753,6 +787,43 @@ const updateGradient = (newGradient: string) => {
     box-shadow: inset 0px 1px 2px rgba(0, 0, 0, 0.25);
     backdrop-filter: blur(40px);
   }
+  &__cross-chain-button {
+    background: @white;
+    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.16);
+    padding: 8px 12px;
+    margin-top: 8px;
+    margin-bottom: 1px;
+    width: 100%;
+    border-radius: 10px;
+    display: flex;
+    gap: 12px;
+    justify-content: flex-start;
+    align-items: center;
+    transition: background 300ms ease-in-out;
+    text-align: left;
+
+    p {
+      margin: 0;
+    }
+    .title {
+      font-weight: 700;
+      font-size: 16px;
+      line-height: 20px;
+      letter-spacing: 0.15px;
+    }
+    .subtext {
+      font-weight: 400;
+      font-size: 12px;
+      line-height: 16px;
+      letter-spacing: 0.5px;
+      color: @black06;
+    }
+
+    svg {
+      width: 42px !important;
+      height: 42px !important;
+    }
+  }
 }
 button {
   background: none;

packages/extension/src/ui/action/icons/actions/swap-multicolor.vue

@@ -0,0 +1,36 @@
+<template>
+  <svg
+    width="42"
+    height="42"
+    viewBox="0 0 42 42"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M7.91173 12.435C7.02792 14.2258 6.81526 16.1458 6.76499 18.583L4.59099 16.409C3.71231 15.5303 2.28769 15.5303 1.40901 16.409C0.53033 17.2877 0.53033 18.7123 1.40901 19.591L7.40901 25.591C7.83097 26.0129 8.40326 26.25 9 26.25C9.59674 26.25 10.169 26.0129 10.591 25.591L16.591 19.591C17.4697 18.7123 17.4697 17.2877 16.591 16.409C15.7123 15.5303 14.2877 15.5303 13.409 16.409L11.2735 18.5445C11.3243 16.3953 11.4807 15.3714 11.9471 14.4265C12.4766 13.3536 13.7082 12.0683 14.7576 11.4935C16.0512 10.785 17.2061 10.6915 20.8011 10.5382C21.3806 10.5135 21.9494 10.5 22.4999 10.5C26.0995 10.5 28.5599 10.8599 30.0743 11.1964C30.8318 11.3647 31.354 11.5275 31.6652 11.6374C31.8208 11.6923 31.924 11.7341 31.9777 11.7569C31.9992 11.766 32.0128 11.7721 32.0187 11.7747C33.1253 12.3114 34.4609 11.8594 35.0124 10.7562C35.5681 9.64476 35.1176 8.29325 34.0062 7.73753L33 9.75C34.0062 7.73753 34.0042 7.73653 34.0042 7.73653L34.0021 7.7355L33.9977 7.73334L33.9882 7.72865L33.9658 7.71775C33.9493 7.70984 33.9298 7.70064 33.9073 7.69024C33.8622 7.66944 33.805 7.64386 33.7351 7.61423C33.5954 7.55497 33.4056 7.47958 33.1628 7.3939C32.6771 7.22247 31.9806 7.01026 31.0505 6.80358C29.1899 6.39011 26.4003 6 22.4999 6C21.877 6 21.2437 6.01522 20.6094 6.04226L20.2686 6.05669C17.1295 6.18906 14.9034 6.28294 12.596 7.54672C10.7361 8.56538 8.85021 10.5334 7.91173 12.435ZM33.0001 15.75C33.5968 15.75 34.1691 15.9871 34.5911 16.409L40.5911 22.409C41.4698 23.2877 41.4698 24.7123 40.5911 25.591C39.7124 26.4697 38.2878 26.4697 37.4091 25.591L35.2353 23.4172C35.185 25.8542 34.9723 27.7742 34.0885 29.565C33.1501 31.4666 31.2642 33.4346 29.4043 34.4533C27.0969 35.7171 24.8707 35.8109 21.7317 35.9433L21.3909 35.9577C20.7565 35.9848 20.1233 36 19.5004 36C15.5999 36 12.8104 35.6099 10.9498 35.1964C10.0197 34.9897 9.32312 34.7775 8.83742 34.6061C8.59465 34.5204 8.40484 34.445 8.26514 34.3858C8.19531 34.3561 8.09297 34.3098 8.09297 34.3098L7.9941 34.2625C6.88264 33.7067 6.43212 32.3552 6.98784 31.2438C7.53941 30.1406 8.87495 29.6886 9.98162 30.2253C9.98747 30.2279 10.0011 30.234 10.0226 30.2431C10.0763 30.2659 10.1794 30.3077 10.3351 30.3626C10.6463 30.4725 11.1685 30.6353 11.9259 30.8036C13.4403 31.1401 15.9008 31.5 19.5004 31.5C20.0508 31.5 20.6196 31.4865 21.1992 31.4618C24.7942 31.3085 25.9491 31.215 27.2427 30.5065C28.292 29.9317 29.5237 28.6464 30.0532 27.5735C30.5195 26.6286 30.6759 25.6046 30.7268 23.4553L28.5911 25.591C27.7124 26.4697 26.2878 26.4697 25.4091 25.591C24.5304 24.7123 24.5304 23.2877 25.4091 22.409L31.4091 16.409C31.831 15.9871 32.4033 15.75 33.0001 15.75Z"
+      fill="url(#paint0_linear_7575_13629)"
+    />
+    <defs>
+      <linearGradient
+        id="paint0_linear_7575_13629"
+        x1="41"
+        y1="21"
+        x2="1"
+        y2="21"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stop-color="#CD64DD" />
+        <stop offset="1" stop-color="#2790EF" />
+      </linearGradient>
+    </defs>
+  </svg>
+</template>
+
+<style scoped>
+svg {
+  display: inline-block;
+  vertical-align: baseline;
+}
+</style>

packages/extension/src/ui/action/icons/common/warning-icon.vue

@@ -0,0 +1,23 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke-width="1.5"
+    stroke="currentColor"
+    class="size-6"
+  >
+    <path
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z"
+    />
+  </svg>
+</template>
+
+<style scoped>
+svg {
+  /* display: inline-block;
+  vertical-align: baseline; */
+}
+</style>

packages/extension/src/ui/action/styles/color.less

@@ -2,6 +2,7 @@
 @primary01: rgba(5, 192, 165, 0.1);
 @primaryLight: rgba(104, 76, 255, 0.1);
 @primary007: rgba(104, 76, 255, 0.07);
+@primaryDarker: rgba(96, 60, 240, 1);
 
 @primaryLabel: #202124;
 @secondaryLabel: #5f6368;
@@ -15,6 +16,8 @@
 @grayPrimary: rgba(95, 99, 104, 1);
 @gray01: rgba(95, 99, 104, 0.1);
 @gray02: rgba(95, 99, 104, 0.2);
+@grey08: rgba(0, 0, 0, 0.08);
+@grey16: rgba(242, 244, 247, 1);
 @white07: rgba(255, 255, 255, 0.7);
 @white09: rgba(255, 255, 255, 0.9);
 @error: #f4432c;
@@ -28,6 +31,7 @@
 @buttonBg: #f2f4f7;
 @hoverItemBg: #f9fafb;
 @lightBg: #f9fafb;
+@lightSurfaceBg: rgba(249, 250, 251, 1);
 @tipBg: #fff7b2;
 @overlayBg: rgba(0, 0, 0, 0.3);
 @introHeaderBg: #f9fafb;

packages/extension/src/ui/action/styles/theme.less

@@ -8,3 +8,15 @@
   -ms-user-select: none;
   user-select: none;
 }
+.skeleton {
+  animation: skeleton-loading 1s linear infinite alternate;
+}
+
+@keyframes skeleton-loading {
+  0% {
+    background-color: @gray01;
+  }
+  100% {
+    background-color: @lightSurfaceBg;
+  }
+}

packages/extension/src/ui/action/views/swap/components/swap-address-select/components/address-item.vue

@@ -0,0 +1,83 @@
+<template>
+  <button class="address-item" @click="emit('selected:account', address)">
+    <div class="address-item__row">
+      <img :src="identicon(address)" class="address-item__identicon" />
+
+      <div v-if="account" class="send-address-item__name">
+        <h4>{{ account.name }}</h4>
+        <p>
+          {{ $filters.replaceWithEllipsis(address, 4, 4) }}
+        </p>
+      </div>
+      <DoneIcon
+        v-if="selected === address && account"
+        class="address-item__check"
+      />
+    </div>
+  </button>
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue';
+import { EnkryptAccount } from '@enkryptcom/types';
+import DoneIcon from '@action/icons/common/done_icon.vue';
+
+const emit = defineEmits<{
+  (e: 'selected:account', address: string): void;
+}>();
+const props = defineProps({
+  identicon: {
+    type: Function,
+    default: () => '',
+  },
+  address: {
+    type: String,
+    required: true,
+  },
+  account: {
+    type: Object as PropType<EnkryptAccount>,
+    required: false,
+  },
+  selected: {
+    type: String,
+    required: false,
+  },
+});
+</script>
+
+<style lang="less" scoped>
+@import '@action/styles/theme.less';
+
+.address-item {
+  padding: 0;
+  width: 100%;
+  border-radius: 10px;
+  &:hover,
+  &:focus {
+    background: @black007;
+  }
+  &__row {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    flex-wrap: nowrap;
+    flex-direction: row;
+    padding: 8px 10px;
+    gap: 12px;
+    text-align: left;
+  }
+  &__identicon {
+    flex-basis: auto;
+    background: @grey16;
+    box-shadow: inset 0px 0px 1px rgba(0, 0, 0, 0.16);
+    min-width: 32px;
+    height: 32px;
+    border-radius: 100%;
+    overflow: hidden;
+    object-fit: contain;
+  }
+  &__check {
+    margin-left: auto;
+  }
+}
+</style>