From e74ec7405c3bcbf1b6565bac729ae84bfcbfae9e Mon Sep 17 00:00:00 2001
From: olgakup <16910687+olgakup@users.noreply.github.com>
Date: Wed, 26 Mar 2025 15:05:28 -0700
Subject: [PATCH 01/13] feat: app dialog

---
 .../components/header-accounts.vue            |   2 +-
 .../ui/action/components/app-dialog/index.vue | 168 ++++++++++++++++++
 .../ui/action/components/tooltip/index.vue    |  19 ++
 .../src/ui/action/views/deposit/index.vue     | 135 +++++---------
 4 files changed, 231 insertions(+), 93 deletions(-)
 create mode 100644 packages/extension/src/ui/action/components/app-dialog/index.vue

diff --git a/packages/extension/src/ui/action/components/accounts-header/components/header-accounts.vue b/packages/extension/src/ui/action/components/accounts-header/components/header-accounts.vue
index 6ab5b29cd..54811f5a4 100644
--- a/packages/extension/src/ui/action/components/accounts-header/components/header-accounts.vue
+++ b/packages/extension/src/ui/action/components/accounts-header/components/header-accounts.vue
@@ -65,7 +65,7 @@
         </a>
       </tooltip>
 
-      <tooltip text="Account's QR code">
+      <tooltip text="Account's QR code" is-bottom-left>
         <a
           showDeposit
           class="account__actions--copy"
diff --git a/packages/extension/src/ui/action/components/app-dialog/index.vue b/packages/extension/src/ui/action/components/app-dialog/index.vue
new file mode 100644
index 000000000..0f561a560
--- /dev/null
+++ b/packages/extension/src/ui/action/components/app-dialog/index.vue
@@ -0,0 +1,168 @@
+<template>
+  <teleport to="#app">
+    <div v-if="model" :class="[defaultClass, { show: model }]">
+      <div class="app-dialog__overlay" @click="closeDialog" />
+      <div
+        class="app-dialog__wrap"
+        :class="[{ show: model }]"
+        :style="dialogStyle"
+      >
+        <a class="app-dialog__close" @click="closeDialog">
+          <close-icon />
+        </a>
+
+        <slot />
+      </div>
+    </div>
+  </teleport>
+</template>
+
+<script setup lang="ts">
+import CloseIcon from '@action/icons/common/close-icon.vue';
+import { useMenuStore } from '@action/store/menu-store';
+import { storeToRefs } from 'pinia';
+import { computed } from 'vue';
+
+const props = defineProps({
+  width: {
+    type: String,
+    default: '428px',
+  },
+  isCentered: {
+    type: Boolean,
+    default: false,
+  },
+});
+/** -------------------
+ * Open Close State
+ -------------------*/
+const emit = defineEmits<{
+  (e: 'close:dialog'): void;
+}>();
+
+const model = defineModel<boolean>();
+
+const closeDialog = () => {
+  model.value = false;
+  emit('close:dialog');
+};
+
+/** -------------------
+ * Styling
+ -------------------*/
+const menuStore = useMenuStore();
+const { isExpanded } = storeToRefs(menuStore);
+const defaultClass = computed(() => {
+  const widthClass = isExpanded.value ? 'expanded' : 'collapsed';
+  const justifyClass = props.isCentered ? 'is-centered' : 'is-not-centered';
+  return `app-dialog app-dialog__${widthClass} app-dialog__${justifyClass}`;
+});
+
+const dialogStyle = computed(() => {
+  return {
+    width: props.width,
+  };
+});
+</script>
+
+<style lang="less" scoped>
+@import '@action/styles/theme.less';
+
+.app-dialog {
+  height: 600px;
+  top: 0px;
+  position: fixed;
+  z-index: 105;
+  display: none;
+  box-sizing: border-box;
+  align-items: center;
+  flex-direction: row;
+  padding: 16px;
+
+  &__expanded {
+    width: 800px;
+  }
+  &__collapsed {
+    width: 516px;
+  }
+  &__is-centered {
+    justify-content: center;
+  }
+  &__is-not-centered {
+    justify-content: end;
+  }
+
+  &.show {
+    display: flex;
+  }
+
+  &__overlay {
+    background: rgba(0, 0, 0, 0.32);
+    width: 100%;
+    height: 100%;
+    left: 0px;
+    top: 0px;
+    position: absolute;
+    z-index: 106;
+  }
+
+  &__wrap {
+    background: @white;
+    box-shadow:
+      0px 0.5px 5px rgba(0, 0, 0, 0.039),
+      0px 3.75px 11px rgba(0, 0, 0, 0.19);
+    border-radius: 12px;
+    position: relative;
+    z-index: 107;
+    overflow-y: scroll;
+    max-height: 100%;
+    padding: 20px;
+    box-sizing: border-box;
+    opacity: 0;
+    visibility: hidden;
+    transition:
+      opacity 0.3s,
+      visibility 0s ease-in-out 0.3s;
+
+    &.show {
+      opacity: 1;
+      visibility: visible;
+      transition-delay: 0s;
+    }
+
+    h2 {
+      font-style: normal;
+      font-weight: 700;
+      font-size: 20px;
+      line-height: 28px;
+      letter-spacing: 0.15px;
+      color: @primaryLabel;
+      margin: 0;
+    }
+
+    p {
+      font-style: normal;
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 20px;
+      letter-spacing: 0.25px;
+      color: @primaryLabel;
+      margin: 0 0 24px 0;
+    }
+  }
+
+  &__close {
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    border-radius: 8px;
+    cursor: pointer;
+    font-size: 0;
+    transition: background 300ms ease-in-out;
+
+    &:hover {
+      background: @black007;
+    }
+  }
+}
+</style>
diff --git a/packages/extension/src/ui/action/components/tooltip/index.vue b/packages/extension/src/ui/action/components/tooltip/index.vue
index 92f1457bc..222d4b60e 100644
--- a/packages/extension/src/ui/action/components/tooltip/index.vue
+++ b/packages/extension/src/ui/action/components/tooltip/index.vue
@@ -41,6 +41,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  isBottomLeft: {
+    type: Boolean,
+    default: false,
+  },
   teleportToApp: {
     type: Boolean,
     default: false,
@@ -86,6 +90,13 @@ const onHover = (e: any) => {
             tooltipRef.value.style.top = `${topPosition}px`;
             tooltipRef.value.style.transform =
               'translateX(0) translateY(-100%)';
+          } else if (props.isBottomLeft) {
+            const left =
+              e.target.getBoundingClientRect().x -
+              e.target.getBoundingClientRect().width +
+              10;
+            tooltipRef.value.style.left = `${left}px`;
+            tooltipRef.value.style.top = `${bottom}px`;
           } else {
             const tooltipMiddle =
               tooltipRef.value.getBoundingClientRect().width / 2;
@@ -138,6 +149,9 @@ const classObject = () => {
   if (props.isTopLeft) {
     return { 'left-top': true, visible: visible.value };
   }
+  if (props.isBottomRight) {
+    return { 'left-bottom': true, visible: visible.value };
+  }
   const x = positionX.value;
   const y = positionY.value;
   switch (true) {
@@ -195,6 +209,11 @@ const classObject = () => {
       right: 0;
       transform: translateX(0) translateY(0px);
     }
+    &.left-bottom {
+      top: calc(~'100% + 3px');
+      left: 0;
+      transform: translateX(0) translateY(0px);
+    }
     &.right-top {
       top: calc(~'-100% + 2px');
       right: 0;
diff --git a/packages/extension/src/ui/action/views/deposit/index.vue b/packages/extension/src/ui/action/views/deposit/index.vue
index 2f4eca623..6cc7e776b 100644
--- a/packages/extension/src/ui/action/views/deposit/index.vue
+++ b/packages/extension/src/ui/action/views/deposit/index.vue
@@ -1,11 +1,11 @@
 <template>
-  <div class="deposit" :class="{ show: showDeposit }">
-    <div class="deposit__overlay" @click="$emit('toggle:deposit')" />
-    <div class="deposit__wrap" :class="{ show: showDeposit }">
-      <a class="deposit__close" @click="$emit('toggle:deposit')">
-        <close-icon />
-      </a>
-
+  <app-dialog
+    v-model="openDialog"
+    width="360px"
+    is-centered
+    @close:dialog="toggleDialog"
+  >
+    <div class="deposit">
       <img class="deposit__logo" :src="network.icon" />
 
       <h2>Your {{ network.name_long }} address</h2>
@@ -50,12 +50,11 @@
         />
       </div>
     </div>
-  </div>
+  </app-dialog>
 </template>
 
 <script setup lang="ts">
-import { PropType, ref, onMounted, computed } from 'vue';
-import CloseIcon from '@action/icons/common/close-icon.vue';
+import { PropType, ref, onMounted, computed, watch } from 'vue';
 import CopyIcon from '@action/icons/header/copy_icon.vue';
 import QrcodeVue from 'qrcode.vue';
 import { EnkryptAccount } from '@enkryptcom/types';
@@ -63,6 +62,8 @@ import Notification from '@action/components/notification/index.vue';
 import { ProviderName } from '@/types/provider';
 import { BaseNetwork, SubNetworkOptions } from '@/types/base-network';
 import DomainState from '@/libs/domain-state';
+import AppDialog from '@action/components/app-dialog/index.vue';
+
 const isCopied = ref(false);
 const subNetwork = ref<SubNetworkOptions | null>(null);
 const props = defineProps({
@@ -81,7 +82,7 @@ const props = defineProps({
     default: () => false,
   },
 });
-defineEmits<{
+const emit = defineEmits<{
   (e: 'toggle:deposit'): void;
 }>();
 const copy = (address: string) => {
@@ -109,98 +110,48 @@ const depositCopy = computed(() => {
   else
     return `You can send ${props.network.currencyNameLong} to this address using ${props.network.name_long} network.`;
 });
+
+/** -------------------
+ * Open Close Dialog
+ -------------------*/
+const openDialog = ref(false);
+const toggleDialog = () => {
+  emit('toggle:deposit');
+};
+watch(
+  () => props.showDeposit,
+  () => {
+    openDialog.value = props.showDeposit;
+  },
+);
 </script>
 
 <style lang="less" scoped>
 @import '@action/styles/theme.less';
 
 .deposit {
-  width: 800px;
-  height: 600px;
-  left: -340px;
-  top: 0px;
-  position: fixed;
-  z-index: 105;
-  display: none;
-  box-sizing: border-box;
-  justify-content: center;
-  align-items: center;
-  flex-direction: row;
-
-  &.show {
-    display: flex;
-  }
-
-  &__overlay {
-    background: rgba(0, 0, 0, 0.32);
-    width: 100%;
-    height: 100%;
-    left: 0px;
-    top: 0px;
-    position: absolute;
-    z-index: 106;
-  }
-
-  &__wrap {
-    width: 360px;
-    background: @white;
-    box-shadow:
-      0px 0.5px 5px rgba(0, 0, 0, 0.039),
-      0px 3.75px 11px rgba(0, 0, 0, 0.19);
-    border-radius: 12px;
-    position: relative;
-    z-index: 107;
-    overflow: hidden;
-    padding: 20px;
-    box-sizing: border-box;
-    opacity: 0;
-    visibility: hidden;
-    transition:
-      opacity 0.3s,
-      visibility 0s ease-in-out 0.3s;
-
-    &.show {
-      opacity: 1;
-      visibility: visible;
-      transition-delay: 0s;
-    }
-
-    h2 {
-      font-style: normal;
-      font-weight: 700;
-      font-size: 20px;
-      line-height: 28px;
-      letter-spacing: 0.15px;
-      color: @primaryLabel;
-      margin: 0;
-    }
-
-    p {
-      font-style: normal;
-      font-weight: 400;
-      font-size: 14px;
-      line-height: 20px;
-      letter-spacing: 0.25px;
-      color: @primaryLabel;
-      margin: 0 0 24px 0;
-    }
+  h2 {
+    font-style: normal;
+    font-weight: 700;
+    font-size: 20px;
+    line-height: 28px;
+    letter-spacing: 0.15px;
+    color: @primaryLabel;
+    margin: 0;
   }
 
-  &__close {
-    position: absolute;
-    top: 8px;
-    right: 8px;
-    border-radius: 8px;
-    cursor: pointer;
-    font-size: 0;
-    transition: background 300ms ease-in-out;
-
-    &:hover {
-      background: @black007;
-    }
+  p {
+    font-style: normal;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 20px;
+    letter-spacing: 0.25px;
+    color: @primaryLabel;
+    margin: 0 0 24px 0;
   }
 
   &__logo {
+    object-fit: contain;
     display: block;
     height: 32px;
     width: 32px;

From 4f6846fdb0b95cc5db41f38342238116d7761f6d Mon Sep 17 00:00:00 2001
From: olgakup <16910687+olgakup@users.noreply.github.com>
Date: Wed, 26 Mar 2025 15:46:28 -0700
Subject: [PATCH 02/13] devop: select assets use dialog

---
 .../components/send-token-select.vue          |   1 +
 .../ethereum/ui/send-transaction/index.vue    |   3 +-
 .../kadena/ui/send-transaction/index.vue      |   3 +-
 .../polkadot/ui/send-transaction/index.vue    |   3 +-
 .../solana/ui/send-transaction/index.vue      |   3 +-
 .../ui/action/components/app-dialog/index.vue |   3 +-
 .../components/assets-select-list-item.vue    |   1 +
 .../action/views/assets-select-list/index.vue | 109 +++++++++---------
 .../network-select-list.vue                   |  10 +-
 .../src/ui/action/views/swap/index.vue        |   6 +-
 10 files changed, 67 insertions(+), 75 deletions(-)

diff --git a/packages/extension/src/providers/ethereum/ui/send-transaction/components/send-token-select.vue b/packages/extension/src/providers/ethereum/ui/send-transaction/components/send-token-select.vue
index 341f889a7..0605d1207 100644
--- a/packages/extension/src/providers/ethereum/ui/send-transaction/components/send-token-select.vue
+++ b/packages/extension/src/providers/ethereum/ui/send-transaction/components/send-token-select.vue
@@ -75,6 +75,7 @@ const balance = computed(() =>
     img {
       width: 100%;
       height: 100%;
+      object-fit: contain;
     }
   }
 
diff --git a/packages/extension/src/providers/ethereum/ui/send-transaction/index.vue b/packages/extension/src/providers/ethereum/ui/send-transaction/index.vue
index 145cc20e7..2cce130a2 100644
--- a/packages/extension/src/providers/ethereum/ui/send-transaction/index.vue
+++ b/packages/extension/src/providers/ethereum/ui/send-transaction/index.vue
@@ -58,11 +58,10 @@
       />
 
       <assets-select-list
-        v-show="isOpenSelectToken"
+        v-model="isOpenSelectToken"
         :is-send="true"
         :assets="accountAssets"
         :is-loading="isLoadingAssets"
-        @close="toggleSelectToken"
         @update:select-asset="selectToken"
       />
 
diff --git a/packages/extension/src/providers/kadena/ui/send-transaction/index.vue b/packages/extension/src/providers/kadena/ui/send-transaction/index.vue
index cc6bc55d1..dd4d3d5b2 100644
--- a/packages/extension/src/providers/kadena/ui/send-transaction/index.vue
+++ b/packages/extension/src/providers/kadena/ui/send-transaction/index.vue
@@ -54,11 +54,10 @@
       />
 
       <assets-select-list
-        v-show="isOpenSelectToken"
+        v-model="isOpenSelectToken"
         :is-send="true"
         :assets="accountAssets"
         :is-loading="isLoadingAssets"
-        @close="toggleSelectToken"
         @update:select-asset="selectToken"
       />
 
diff --git a/packages/extension/src/providers/polkadot/ui/send-transaction/index.vue b/packages/extension/src/providers/polkadot/ui/send-transaction/index.vue
index 38e6b6320..2b1ec61fc 100644
--- a/packages/extension/src/providers/polkadot/ui/send-transaction/index.vue
+++ b/packages/extension/src/providers/polkadot/ui/send-transaction/index.vue
@@ -52,11 +52,10 @@
       />
 
       <assets-select-list
-        v-show="isOpenSelectToken"
+        v-model="isOpenSelectToken"
         :is-send="true"
         :assets="accountAssets"
         :is-loading="isLoadingAssets"
-        @close="toggleSelectToken"
         @update:select-asset="selectToken"
       />
 
diff --git a/packages/extension/src/providers/solana/ui/send-transaction/index.vue b/packages/extension/src/providers/solana/ui/send-transaction/index.vue
index 6e581975e..79087ec9d 100644
--- a/packages/extension/src/providers/solana/ui/send-transaction/index.vue
+++ b/packages/extension/src/providers/solana/ui/send-transaction/index.vue
@@ -53,11 +53,10 @@
       />
 
       <assets-select-list
-        v-show="isOpenSelectToken"
+        v-model="isOpenSelectToken"
         :is-send="true"
         :assets="accountAssets"
         :is-loading="isLoadingAssets"
-        @close="toggleSelectToken"
         @update:select-asset="selectToken"
       />
 
diff --git a/packages/extension/src/ui/action/components/app-dialog/index.vue b/packages/extension/src/ui/action/components/app-dialog/index.vue
index 0f561a560..666081f78 100644
--- a/packages/extension/src/ui/action/components/app-dialog/index.vue
+++ b/packages/extension/src/ui/action/components/app-dialog/index.vue
@@ -116,7 +116,6 @@ const dialogStyle = computed(() => {
     z-index: 107;
     overflow-y: scroll;
     max-height: 100%;
-    padding: 20px;
     box-sizing: border-box;
     opacity: 0;
     visibility: hidden;
@@ -159,7 +158,7 @@ const dialogStyle = computed(() => {
     cursor: pointer;
     font-size: 0;
     transition: background 300ms ease-in-out;
-
+    z-index: 108;
     &:hover {
       background: @black007;
     }
diff --git a/packages/extension/src/ui/action/views/assets-select-list/components/assets-select-list-item.vue b/packages/extension/src/ui/action/views/assets-select-list/components/assets-select-list-item.vue
index af3692c3c..e7281d414 100644
--- a/packages/extension/src/ui/action/views/assets-select-list/components/assets-select-list-item.vue
+++ b/packages/extension/src/ui/action/views/assets-select-list/components/assets-select-list-item.vue
@@ -95,6 +95,7 @@ const select = () => {
         img {
           width: 100%;
           height: 100%;
+          object-fit: contain;
         }
       }
 
diff --git a/packages/extension/src/ui/action/views/assets-select-list/index.vue b/packages/extension/src/ui/action/views/assets-select-list/index.vue
index 51f46f949..b75c27fb8 100644
--- a/packages/extension/src/ui/action/views/assets-select-list/index.vue
+++ b/packages/extension/src/ui/action/views/assets-select-list/index.vue
@@ -1,42 +1,43 @@
 <template>
-  <div class="assets-select-list">
-    <div class="assets-select-list__header">
-      <h3 v-if="!isSelectToToken && !isSend">Select token to swap</h3>
-      <h3 v-if="isSelectToToken">Select token to receive</h3>
-      <h3 v-if="isSend">Select asset to send</h3>
-      <a class="assets-select-list__close" @click="close">
-        <close-icon />
-      </a>
-    </div>
-
-    <assets-select-list-search @update:token-search-input="updateSearchInput" />
-
-    <custom-scrollbar
-      class="assets-select-list__scroll-area"
-      :settings="scrollSettings({ suppressScrollX: true })"
-      @ps-y-reach-end="yEnd"
-    >
-      <div v-show="isSelectToToken" class="assets-select-list__fast-tokens">
-        <swap-token-fast-list v-bind="$attrs" />
+  <app-dialog v-model="model" @close:dialog="close">
+    <div class="assets-select-list">
+      <div class="assets-select-list__header">
+        <h3 v-if="!isSelectToToken && !isSend">Select token to swap</h3>
+        <h3 v-if="isSelectToToken">Select token to receive</h3>
+        <h3 v-if="isSend">Select asset to send</h3>
       </div>
-      <assets-select-list-item
-        v-for="(item, index) in listedAssets"
-        :key="index"
-        :token="item"
-        v-bind="$attrs"
-      />
 
-      <assets-select-loading
-        v-if="assets.length === 0"
-        :is-empty="assets.length === 0"
-        :is-loading="isLoading"
+      <assets-select-list-search
+        @update:token-search-input="updateSearchInput"
       />
-    </custom-scrollbar>
-  </div>
+
+      <custom-scrollbar
+        class="assets-select-list__scroll-area"
+        :settings="scrollSettings({ suppressScrollX: true })"
+        @ps-y-reach-end="yEnd"
+      >
+        <div v-show="isSelectToToken" class="assets-select-list__fast-tokens">
+          <swap-token-fast-list v-bind="$attrs" />
+        </div>
+        <assets-select-list-item
+          v-for="(item, index) in listedAssets"
+          :key="index"
+          :token="item"
+          v-bind="$attrs"
+        />
+
+        <assets-select-loading
+          v-if="assets.length === 0"
+          :is-empty="assets.length === 0"
+          :is-loading="isLoading"
+        />
+      </custom-scrollbar>
+    </div>
+  </app-dialog>
 </template>
 
 <script setup lang="ts">
-import CloseIcon from '@action/icons/common/close-icon.vue';
+// import CloseIcon from '@action/icons/common/close-icon.vue';
 import AssetsSelectListItem from './components/assets-select-list-item.vue';
 import CustomScrollbar from '@action/components/custom-scrollbar/index.vue';
 import AssetsSelectListSearch from './components/assets-select-list-search.vue';
@@ -46,6 +47,7 @@ import { computed, PropType, ref } from 'vue';
 import AssetsSelectLoading from './components/assets-select-loading.vue';
 import { BaseToken } from '@/types/base-token';
 import { throttle } from 'lodash';
+import AppDialog from '@action/components/app-dialog/index.vue';
 
 const emit = defineEmits<{
   (e: 'close', close: boolean): void;
@@ -123,6 +125,11 @@ const updateSearchInput = (newSearchQuery: string) => {
 const close = () => {
   emit('close', false);
 };
+
+/** -------------------
+ * Dialog
+ * ------------------- */
+const model = defineModel<boolean>();
 </script>
 
 <style lang="less">
@@ -131,17 +138,7 @@ const close = () => {
 
 .assets-select-list {
   width: 100%;
-  background: #ffffff;
-  position: fixed;
-  box-shadow:
-    0px 3px 6px rgba(0, 0, 0, 0.039),
-    0px 7px 24px rgba(0, 0, 0, 0.19);
-  border-radius: 12px;
-  width: 428px;
-  height: 568px;
-  left: 356px;
-  top: 16px;
-  z-index: 12;
+  // height: 568px;
 
   &__header {
     position: relative;
@@ -157,19 +154,19 @@ const close = () => {
     }
   }
 
-  &__close {
-    position: absolute;
-    top: 8px;
-    right: 8px;
-    border-radius: 8px;
-    cursor: pointer;
-    font-size: 0;
-    transition: background 300ms ease-in-out;
-
-    &:hover {
-      background: @black007;
-    }
-  }
+  // &__close {
+  //   position: absolute;
+  //   top: 8px;
+  //   right: 8px;
+  //   border-radius: 8px;
+  //   cursor: pointer;
+  //   font-size: 0;
+  //   transition: background 300ms ease-in-out;
+
+  //   &:hover {
+  //     background: @black007;
+  //   }
+  // }
 
   &__scroll-area {
     position: relative;
diff --git a/packages/extension/src/ui/action/views/swap/components/swap-network-select/network-select-list.vue b/packages/extension/src/ui/action/views/swap/components/swap-network-select/network-select-list.vue
index c50fb40dc..f27772efa 100644
--- a/packages/extension/src/ui/action/views/swap/components/swap-network-select/network-select-list.vue
+++ b/packages/extension/src/ui/action/views/swap/components/swap-network-select/network-select-list.vue
@@ -1,14 +1,14 @@
 <template>
-  <div class="assets-select-list">
-    <div class="assets-select-list__header">
+  <div class="network-select-list">
+    <div class="network-select-list__header">
       <h3>Select to Network</h3>
-      <a class="assets-select-list__close" @click="close">
+      <a class="network-select-list__close" @click="close">
         <close-icon />
       </a>
     </div>
 
     <custom-scrollbar
-      class="assets-select-list__scroll-area"
+      class="network-select-list__scroll-area"
       :settings="scrollSettings({ suppressScrollX: true })"
     >
       <network-select-list-item
@@ -49,7 +49,7 @@ const close = () => {
 @import '@action/styles/theme.less';
 @import '@action/styles/custom-scroll.less';
 
-.assets-select-list {
+.network-select-list {
   width: 100%;
   background: #ffffff;
   position: fixed;
diff --git a/packages/extension/src/ui/action/views/swap/index.vue b/packages/extension/src/ui/action/views/swap/index.vue
index ea0b71530..c85f5aecb 100644
--- a/packages/extension/src/ui/action/views/swap/index.vue
+++ b/packages/extension/src/ui/action/views/swap/index.vue
@@ -90,18 +90,16 @@
     />
 
     <assets-select-list
-      v-if="fromSelectOpened"
+      v-model="fromSelectOpened"
       :assets="fromTokens"
-      @close="toggleFromToken"
       @update:select-asset="selectTokenFrom"
     />
 
     <assets-select-list
-      v-show="toSelectOpened"
+      v-model="toSelectOpened"
       :is-select-to-token="true"
       :assets="toTokens"
       :is-loading="fetchingTokens"
-      @close="toggleToToken"
       @update:select-asset="selectTokenTo"
     />
 

From d53ae8eca18bad770851446804aade26262f2416 Mon Sep 17 00:00:00 2001
From: olgakup <16910687+olgakup@users.noreply.github.com>
Date: Wed, 26 Mar 2025 17:15:03 -0700
Subject: [PATCH 03/13] devop: update select fee to use app dialog

---
 .../bitcoin/ui/send-transaction/index.vue     |  3 +-
 .../ethereum/ui/eth-verify-transaction.vue    |  5 +-
 .../ethereum/ui/send-transaction/index.vue    |  3 +-
 .../swap/views/swap-best-offer/index.vue      |  3 +-
 .../ui/action/views/transaction-fee/index.vue | 78 +++++++++++--------
 5 files changed, 49 insertions(+), 43 deletions(-)

diff --git a/packages/extension/src/providers/bitcoin/ui/send-transaction/index.vue b/packages/extension/src/providers/bitcoin/ui/send-transaction/index.vue
index bb8003b1c..d56809034 100644
--- a/packages/extension/src/providers/bitcoin/ui/send-transaction/index.vue
+++ b/packages/extension/src/providers/bitcoin/ui/send-transaction/index.vue
@@ -80,11 +80,10 @@
       />
 
       <transaction-fee-view
+        v-model="isOpenSelectFee"
         :fees="gasCostValues"
-        :show-fees="isOpenSelectFee"
         :selected="selectedFee"
         :is-header="true"
-        @close-popup="toggleSelectFee"
         @gas-type-changed="selectFee"
       />
 
diff --git a/packages/extension/src/providers/ethereum/ui/eth-verify-transaction.vue b/packages/extension/src/providers/ethereum/ui/eth-verify-transaction.vue
index b11af3001..6ae31cb65 100644
--- a/packages/extension/src/providers/ethereum/ui/eth-verify-transaction.vue
+++ b/packages/extension/src/providers/ethereum/ui/eth-verify-transaction.vue
@@ -101,12 +101,11 @@
         {{ errorMsg }}
       </p>
       <transaction-fee-view
+        v-model="isOpenSelectFee"
         :fees="gasCostValues"
-        :show-fees="isOpenSelectFee"
         :selected="selectedFee"
         :is-header="true"
-        :is-popup="true"
-        @close-popup="toggleSelectFee"
+        is-popup
         @gas-type-changed="selectFee"
       />
     </template>
diff --git a/packages/extension/src/providers/ethereum/ui/send-transaction/index.vue b/packages/extension/src/providers/ethereum/ui/send-transaction/index.vue
index 2cce130a2..b37fb397f 100644
--- a/packages/extension/src/providers/ethereum/ui/send-transaction/index.vue
+++ b/packages/extension/src/providers/ethereum/ui/send-transaction/index.vue
@@ -99,11 +99,10 @@
       />
 
       <transaction-fee-view
+        v-model="isOpenSelectFee"
         :fees="gasCostValues"
-        :show-fees="isOpenSelectFee"
         :selected="selectedFee"
         :is-header="true"
-        @close-popup="toggleSelectFee"
         @gas-type-changed="selectFee"
       />
 
diff --git a/packages/extension/src/ui/action/views/swap/views/swap-best-offer/index.vue b/packages/extension/src/ui/action/views/swap/views/swap-best-offer/index.vue
index 8f1e8e271..58f613925 100644
--- a/packages/extension/src/ui/action/views/swap/views/swap-best-offer/index.vue
+++ b/packages/extension/src/ui/action/views/swap/views/swap-best-offer/index.vue
@@ -60,11 +60,10 @@
         </custom-scrollbar>
 
         <transaction-fee-view
+          v-model="isOpenSelectFee"
           :fees="gasCostValues"
-          :show-fees="isOpenSelectFee"
           :selected="selectedFee"
           :is-header="true"
-          @close-popup="toggleSelectFee"
           @gas-type-changed="selectFee"
         />
       </div>
diff --git a/packages/extension/src/ui/action/views/transaction-fee/index.vue b/packages/extension/src/ui/action/views/transaction-fee/index.vue
index 51603a541..d238eabc2 100644
--- a/packages/extension/src/ui/action/views/transaction-fee/index.vue
+++ b/packages/extension/src/ui/action/views/transaction-fee/index.vue
@@ -1,17 +1,25 @@
 <template>
-  <div class="transaction-fee" :class="{ show: showFees, popup: isPopup }">
-    <div class="transaction-fee__overlay" @click="closepopup" />
+  <component
+    :is="isPopup ? 'div' : AppDialog"
+    v-model="model"
+    @close:dialog="closepopup"
+    :is-centered="isPopup"
+    :class="[{ popup: isPopup }, { show: isPopup && model }]"
+  >
     <div
       class="transaction-fee__wrap"
-      :class="{ show: showFees, header: isHeader }"
+      :class="[
+        { header: isHeader, 'transaction-fee__as-popup': isPopup },
+        { show: isPopup && model },
+      ]"
     >
       <div v-if="isHeader" class="transaction-fee__header">
         <h3>Choose transaction fee</h3>
-
-        <a class="transaction-fee__close" @click="closepopup">
+        <a v-if="isPopup" class="transaction-fee__close" @click="closepopup">
           <close-icon />
         </a>
       </div>
+
       <div class="transaction-fee__info">
         <div class="transaction-fee__info-amount">
           <p class="transaction-fee__info-amount-fiat">
@@ -44,7 +52,7 @@
         v-bind="$attrs"
       />
     </div>
-  </div>
+  </component>
 </template>
 
 <script setup lang="ts">
@@ -52,15 +60,14 @@ import { PropType } from 'vue';
 import TransactionFeeItem from './components/transaction-fee-item.vue';
 import TimeIcon from '@action/icons/fee/time-icon.vue';
 import CloseIcon from '@action/icons/common/close-icon.vue';
-
+import AppDialog from '@action/components/app-dialog/index.vue';
 import { GasFeeType, GasPriceTypes } from '@/providers/common/types';
 import { FeeDescriptions } from '@/providers/ethereum/libs/transaction/gas-utils';
 const emit = defineEmits<{
   (e: 'closePopup'): void;
 }>();
 
-defineProps({
-  showFees: Boolean,
+const props = defineProps({
   fees: {
     type: Object as PropType<GasFeeType>,
     default: () => ({}),
@@ -94,43 +101,40 @@ defineProps({
     default: GasPriceTypes.ECONOMY,
   },
 });
+const model = defineModel<boolean>();
 
 const closepopup = () => {
   emit('closePopup');
+  if (props.isPopup) {
+    model.value = false;
+  }
 };
 </script>
 
 <style lang="less">
 @import '@action/styles/theme.less';
-
-.transaction-fee {
-  width: 100%;
+.popup {
+  width: 10%;
   height: 100%;
-  position: absolute;
+  position: fixed;
   left: 0;
   top: 0;
   z-index: 101;
   display: none;
+  align-items: center;
+  flex-direction: row;
+  padding: 16px;
 
   &.show {
     display: block;
   }
+}
 
-  &.popup {
-    position: fixed;
-  }
-
-  &__overlay {
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    left: 0;
-    top: 0;
-    z-index: 102;
-  }
+.transaction-fee {
+  width: 100%;
+  height: 100%;
 
-  &__wrap {
-    position: absolute;
+  &__as-popup {
     width: 428px;
     height: auto;
     max-height: 440px;
@@ -141,21 +145,26 @@ const closepopup = () => {
       0px 3px 6px rgba(0, 0, 0, 0.039),
       0px 7px 24px rgba(0, 0, 0, 0.19);
     border-radius: 12px;
-    z-index: 103;
-    padding: 16px 0 0 0;
+    z-index: 109;
     box-sizing: border-box;
     opacity: 0;
     visibility: hidden;
     transition:
       opacity 0.3s,
       visibility 0s ease-in-out 0.3s;
-    overflow: hidden;
 
     &.show {
       opacity: 1;
       visibility: visible;
       transition-delay: 0s;
     }
+  }
+
+  &__wrap {
+    max-height: 440px;
+    padding: 16px 0 0 0;
+    box-sizing: border-box;
+    overflow: hidden;
 
     &.header {
       padding: 0;
@@ -236,10 +245,13 @@ const closepopup = () => {
     width: 100%;
     background: @white;
     box-sizing: border-box;
-    padding: 14px 84px 14px 16px;
+    padding: 14px 16px;
     position: relative;
     z-index: 4;
     margin-bottom: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
 
     h3 {
       font-style: normal;
@@ -252,13 +264,11 @@ const closepopup = () => {
   }
 
   &__close {
-    position: absolute;
-    top: 8px;
-    right: 8px;
     border-radius: 8px;
     cursor: pointer;
     font-size: 0;
     transition: background 300ms ease-in-out;
+    z-index: 106;
 
     &:hover {
       background: @black007;

From a1e90075ffa5988fb745ecb225dde6af0362a594 Mon Sep 17 00:00:00 2001
From: olgakup <16910687+olgakup@users.noreply.github.com>
Date: Wed, 26 Mar 2025 17:24:08 -0700
Subject: [PATCH 04/13] devop: update network select to use dialog

---
 .../network-select-list.vue                   | 68 ++++++-------------
 .../src/ui/action/views/swap/index.vue        |  3 +-
 2 files changed, 22 insertions(+), 49 deletions(-)

diff --git a/packages/extension/src/ui/action/views/swap/components/swap-network-select/network-select-list.vue b/packages/extension/src/ui/action/views/swap/components/swap-network-select/network-select-list.vue
index f27772efa..6aa2c41d5 100644
--- a/packages/extension/src/ui/action/views/swap/components/swap-network-select/network-select-list.vue
+++ b/packages/extension/src/ui/action/views/swap/components/swap-network-select/network-select-list.vue
@@ -1,33 +1,32 @@
 <template>
-  <div class="network-select-list">
-    <div class="network-select-list__header">
-      <h3>Select to Network</h3>
-      <a class="network-select-list__close" @click="close">
-        <close-icon />
-      </a>
-    </div>
+  <app-dialog v-model="model" @close:dialog="close">
+    <div class="network-select-list">
+      <div class="network-select-list__header">
+        <h3>Select to Network</h3>
+      </div>
 
-    <custom-scrollbar
-      class="network-select-list__scroll-area"
-      :settings="scrollSettings({ suppressScrollX: true })"
-    >
-      <network-select-list-item
-        v-for="(item, index) in assets"
-        :key="index"
-        :token="item"
-        v-bind="$attrs"
-      />
-    </custom-scrollbar>
-  </div>
+      <custom-scrollbar
+        class="network-select-list__scroll-area"
+        :settings="scrollSettings({ suppressScrollX: true })"
+      >
+        <network-select-list-item
+          v-for="(item, index) in assets"
+          :key="index"
+          :token="item"
+          v-bind="$attrs"
+        />
+      </custom-scrollbar>
+    </div>
+  </app-dialog>
 </template>
 
 <script setup lang="ts">
-import CloseIcon from '@action/icons/common/close-icon.vue';
 import NetworkSelectListItem from './network-select-list-item.vue';
 import CustomScrollbar from '@action/components/custom-scrollbar/index.vue';
 import scrollSettings from '@/libs/utils/scroll-settings';
 import { PropType } from 'vue';
 import { NetworkInfo } from '@enkryptcom/swap';
+import AppDialog from '@action/components/app-dialog/index.vue';
 
 const emit = defineEmits<{
   (e: 'close', close: boolean): void;
@@ -43,6 +42,8 @@ defineProps({
 const close = () => {
   emit('close', false);
 };
+
+const model = defineModel<boolean>();
 </script>
 
 <style lang="less">
@@ -50,19 +51,6 @@ const close = () => {
 @import '@action/styles/custom-scroll.less';
 
 .network-select-list {
-  width: 100%;
-  background: #ffffff;
-  position: fixed;
-  box-shadow:
-    0px 3px 6px rgba(0, 0, 0, 0.039),
-    0px 7px 24px rgba(0, 0, 0, 0.19);
-  border-radius: 12px;
-  width: 428px;
-  height: 568px;
-  left: 356px;
-  top: 16px;
-  z-index: 12;
-
   &__header {
     position: relative;
     padding: 14px 56px 14px 16px;
@@ -77,20 +65,6 @@ const close = () => {
     }
   }
 
-  &__close {
-    position: absolute;
-    top: 8px;
-    right: 8px;
-    border-radius: 8px;
-    cursor: pointer;
-    font-size: 0;
-    transition: background 300ms ease-in-out;
-
-    &:hover {
-      background: @black007;
-    }
-  }
-
   &__scroll-area {
     position: relative;
     margin: auto;
diff --git a/packages/extension/src/ui/action/views/swap/index.vue b/packages/extension/src/ui/action/views/swap/index.vue
index c85f5aecb..dab60e4da 100644
--- a/packages/extension/src/ui/action/views/swap/index.vue
+++ b/packages/extension/src/ui/action/views/swap/index.vue
@@ -83,9 +83,8 @@
     </div>
 
     <network-select-list
-      v-if="toNetworkOpen"
+      v-model="toNetworkOpen"
       :assets="toNetworks"
-      @close="toggleToNetwork"
       @update:select-asset="selectToNetwork"
     />
 

From 321191750b63e8fe398d05dc6aba48105f152c04 Mon Sep 17 00:00:00 2001
From: olgakup <16910687+olgakup@users.noreply.github.com>
Date: Wed, 26 Mar 2025 17:25:30 -0700
Subject: [PATCH 05/13] devop: fix padding in deposit screen

---
 packages/extension/src/ui/action/views/deposit/index.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/extension/src/ui/action/views/deposit/index.vue b/packages/extension/src/ui/action/views/deposit/index.vue
index 6cc7e776b..cd1f67ea2 100644
--- a/packages/extension/src/ui/action/views/deposit/index.vue
+++ b/packages/extension/src/ui/action/views/deposit/index.vue
@@ -130,6 +130,7 @@ watch(
 @import '@action/styles/theme.less';
 
 .deposit {
+  padding: 20px;
   h2 {
     font-style: normal;
     font-weight: 700;

From 17e7045e5780b3b821a5c611ab79b34c4db6ff63 Mon Sep 17 00:00:00 2001
From: olgakup <16910687+olgakup@users.noreply.github.com>
Date: Wed, 26 Mar 2025 17:36:16 -0700
Subject: [PATCH 06/13] devop: fix padding in nft detail screen

---
 .../components/network-nfts-item.vue          |  3 +-
 .../ui/action/views/network-nfts/index.vue    |  5 +++
 .../ui/action/views/nft-detail-view/index.vue | 35 +++++++++----------
 3 files changed, 22 insertions(+), 21 deletions(-)

diff --git a/packages/extension/src/ui/action/views/network-nfts/components/network-nfts-item.vue b/packages/extension/src/ui/action/views/network-nfts/components/network-nfts-item.vue
index 61f8b0e62..99aef5f4d 100644
--- a/packages/extension/src/ui/action/views/network-nfts/components/network-nfts-item.vue
+++ b/packages/extension/src/ui/action/views/network-nfts/components/network-nfts-item.vue
@@ -24,12 +24,11 @@
     />
 
     <nft-detail-view
-      v-if="isDetail"
+      v-model="isDetail"
       :item="item"
       :is-favorite="isFavorite"
       :link-action="openLink"
       v-bind="$attrs"
-      @close:popup="toggleDetail"
     />
   </div>
 </template>
diff --git a/packages/extension/src/ui/action/views/network-nfts/index.vue b/packages/extension/src/ui/action/views/network-nfts/index.vue
index a5a2b67f2..04acf7e3a 100644
--- a/packages/extension/src/ui/action/views/network-nfts/index.vue
+++ b/packages/extension/src/ui/action/views/network-nfts/index.vue
@@ -38,6 +38,7 @@
 
     <nft-detail-view
       v-if="!!detailNFT"
+      v-model="showDetail"
       :item="detailNFT"
       :is-favorite="isFavorite"
       v-bind="$attrs"
@@ -155,8 +156,12 @@ const hideClicked = async (isHidden: boolean, item: NFTItem) => {
   }
   localUpdate();
 };
+const showDetail = ref<boolean>(false);
 const toggleDetail = (item: NFTItem | null) => {
   detailNFT.value = item;
+  if (item) {
+    showDetail.value = true;
+  }
 };
 const isFavorite = computed(() => {
   if (detailNFT.value && favoriteNFTs.value.length) {
diff --git a/packages/extension/src/ui/action/views/nft-detail-view/index.vue b/packages/extension/src/ui/action/views/nft-detail-view/index.vue
index 586a5e558..19c8f5c02 100644
--- a/packages/extension/src/ui/action/views/nft-detail-view/index.vue
+++ b/packages/extension/src/ui/action/views/nft-detail-view/index.vue
@@ -1,11 +1,6 @@
 <template>
-  <div class="nft-detail-view__container">
-    <div class="nft-detail-view__overlay" @click="close()" />
+  <app-dialog v-model="model" width="360px" is-centered @close:dialog="close">
     <div class="nft-detail-view__wrap">
-      <a class="nft-detail-view__close" @click="close()">
-        <close-icon />
-      </a>
-
       <a
         class="nft-detail-view__favorite"
         @click="favClicked(!localIsFavorite)"
@@ -40,12 +35,11 @@
         <action-menu :link="item.url" :item="item" />
       </div>
     </div>
-  </div>
+  </app-dialog>
 </template>
 
 <script setup lang="ts">
 import { onMounted, PropType, ref, computed } from 'vue';
-import CloseIcon from '@action/icons/common/close-icon.vue';
 import ActionMenu from '@action/components/action-menu/index.vue';
 import NftMoreAddToFavorite from '@action/icons/nft/nft-more-add-to-favorite.vue';
 import NftMoreDeleteFromFavorite from '@action/icons/nft/nft-more-delete-from-favorite.vue';
@@ -53,6 +47,7 @@ import { NFTItem } from '@/types/nft';
 import Notification from '@action/components/notification/index.vue';
 import { imageLoadError } from '@action/utils/misc';
 import Tooltip from '@/ui/action/components/tooltip/index.vue';
+import AppDialog from '@action/components/app-dialog/index.vue';
 
 const isFavoriteAction = ref(false);
 const localIsFavorite = ref(false);
@@ -106,6 +101,8 @@ const favClicked = (isFav: boolean) => {
 const toggleNotification = () => {
   isFavoriteAction.value = !isFavoriteAction.value;
 };
+
+const model = defineModel<boolean>();
 </script>
 
 <style lang="less">
@@ -117,17 +114,17 @@ const toggleNotification = () => {
   box-sizing: border-box;
 
   &__wrap {
-    background: @white;
-    box-shadow:
-      0px 3px 6px rgba(0, 0, 0, 0.039),
-      0px 7px 24px rgba(0, 0, 0, 0.19);
-    border-radius: 12px;
-    box-sizing: border-box;
-    width: 360px;
-    height: auto;
-    z-index: 107;
-    position: relative;
-    height: auto;
+    // background: @white;
+    // box-shadow:
+    //   0px 3px 6px rgba(0, 0, 0, 0.039),
+    //   0px 7px 24px rgba(0, 0, 0, 0.19);
+    // border-radius: 12px;
+    // box-sizing: border-box;
+    // width: 360px;
+    // height: auto;
+    // z-index: 107;
+    // position: relative;
+    // height: auto;
     overflow-x: hidden;
     padding: 24px 32px 32px 32px;
 

From 05e3ea35d4122325ef205db54fff692480af9986 Mon Sep 17 00:00:00 2001
From: olgakup <16910687+olgakup@users.noreply.github.com>
Date: Wed, 26 Mar 2025 17:43:46 -0700
Subject: [PATCH 07/13] devop: update network assets to use dialog

---
 .../action/views/asset-detail-view/index.vue  | 63 ++-----------------
 .../components/network-assets-item.vue        |  3 +-
 2 files changed, 7 insertions(+), 59 deletions(-)

diff --git a/packages/extension/src/ui/action/views/asset-detail-view/index.vue b/packages/extension/src/ui/action/views/asset-detail-view/index.vue
index 20353f0f7..1f9ecc23d 100644
--- a/packages/extension/src/ui/action/views/asset-detail-view/index.vue
+++ b/packages/extension/src/ui/action/views/asset-detail-view/index.vue
@@ -1,11 +1,6 @@
 <template>
-  <div class="asset-detail-view__container">
-    <div class="asset-detail-view__overlay" @click="close()" />
+  <app-dialog v-model="model" width="360px" is-centered @close:dialog="close">
     <div class="asset-detail-view__wrap">
-      <a class="asset-detail-view__close" @click="close()">
-        <close-icon />
-      </a>
-
       <div class="asset-detail-view__token-info">
         <img :src="token.icon" />
 
@@ -65,7 +60,7 @@
         >
       </div>
     </div>
-  </div>
+  </app-dialog>
 </template>
 
 <script setup lang="ts">
@@ -81,6 +76,8 @@ import { SVGRenderer } from 'echarts/renderers';
 import { LineChart } from 'echarts/charts';
 import { TooltipComponent, GridComponent } from 'echarts/components';
 import VChart from 'vue-echarts';
+import AppDialog from '@action/components/app-dialog/index.vue';
+
 const props = defineProps({
   token: {
     type: Object as PropType<AssetsType>,
@@ -144,6 +141,7 @@ const emit = defineEmits<{
 const close = () => {
   emit('close:popup');
 };
+const model = defineModel<boolean>();
 </script>
 
 <style lang="less">
@@ -166,59 +164,9 @@ const close = () => {
   }
 
   &__wrap {
-    background: @white;
-    box-shadow:
-      0px 3px 6px rgba(0, 0, 0, 0.039),
-      0px 7px 24px rgba(0, 0, 0, 0.19);
-    border-radius: 12px;
-    box-sizing: border-box;
-    width: 360px;
-    height: auto;
-    z-index: 107;
-    position: relative;
-    height: auto;
-    overflow-x: hidden;
     padding: 24px;
   }
 
-  &__container {
-    width: 800px;
-    height: 600px;
-    left: 0;
-    top: 0px;
-    position: fixed;
-    z-index: 105;
-    display: flex;
-    box-sizing: border-box;
-    justify-content: center;
-    align-items: center;
-    flex-direction: row;
-  }
-
-  &__overlay {
-    background: rgba(0, 0, 0, 0.32);
-    width: 100%;
-    height: 100%;
-    left: 0px;
-    top: 0px;
-    position: absolute;
-    z-index: 106;
-  }
-
-  &__close {
-    position: absolute;
-    top: 8px;
-    right: 8px;
-    border-radius: 8px;
-    cursor: pointer;
-    transition: background 300ms ease-in-out;
-    font-size: 0;
-
-    &:hover {
-      background: @black007;
-    }
-  }
-
   &__token {
     &-info {
       display: flex;
@@ -233,6 +181,7 @@ const close = () => {
         box-shadow: inset 0px 0px 1px rgba(0, 0, 0, 0.16);
         border-radius: 100%;
         margin-right: 16px;
+        object-fit: contain;
       }
 
       &-name {
diff --git a/packages/extension/src/ui/action/views/network-assets/components/network-assets-item.vue b/packages/extension/src/ui/action/views/network-assets/components/network-assets-item.vue
index 0158cb4d8..12c4b03cd 100644
--- a/packages/extension/src/ui/action/views/network-assets/components/network-assets-item.vue
+++ b/packages/extension/src/ui/action/views/network-assets/components/network-assets-item.vue
@@ -49,12 +49,11 @@
   </a>
 
   <asset-detail-view
-    v-if="isDetail"
+    v-model="isDetail"
     :token="token"
     :network="network"
     :is-custom-token="isCustomToken"
     :remove-token="removeToken"
-    @close:popup="toggleDetail"
   />
 </template>
 

From 0c4744d2d044fceff3298bd8486b77a10aece0a7 Mon Sep 17 00:00:00 2001
From: olgakup <16910687+olgakup@users.noreply.github.com>
Date: Wed, 26 Mar 2025 17:48:36 -0700
Subject: [PATCH 08/13] fix: icons squeeshing

---
 .../components/accounts-header/components/header-accounts.vue    | 1 +
 .../action/views/network-assets/components/custom-evm-token.vue  | 1 +
 .../views/network-assets/components/network-assets-item.vue      | 1 +
 3 files changed, 3 insertions(+)

diff --git a/packages/extension/src/ui/action/components/accounts-header/components/header-accounts.vue b/packages/extension/src/ui/action/components/accounts-header/components/header-accounts.vue
index 54811f5a4..ddba46d78 100644
--- a/packages/extension/src/ui/action/components/accounts-header/components/header-accounts.vue
+++ b/packages/extension/src/ui/action/components/accounts-header/components/header-accounts.vue
@@ -249,6 +249,7 @@ const disconnectFromDapp = async () => {
         box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.16);
         padding: 1px;
         border-radius: 50%;
+        object-fit: contain;
       }
     }
 
diff --git a/packages/extension/src/ui/action/views/network-assets/components/custom-evm-token.vue b/packages/extension/src/ui/action/views/network-assets/components/custom-evm-token.vue
index f1e8453cb..dd58cf3ad 100644
--- a/packages/extension/src/ui/action/views/network-assets/components/custom-evm-token.vue
+++ b/packages/extension/src/ui/action/views/network-assets/components/custom-evm-token.vue
@@ -407,6 +407,7 @@ const addToken = async () => {
       img {
         width: 100%;
         height: 100%;
+        object-fit: contain;
       }
     }
 
diff --git a/packages/extension/src/ui/action/views/network-assets/components/network-assets-item.vue b/packages/extension/src/ui/action/views/network-assets/components/network-assets-item.vue
index 12c4b03cd..5cc4c8461 100644
--- a/packages/extension/src/ui/action/views/network-assets/components/network-assets-item.vue
+++ b/packages/extension/src/ui/action/views/network-assets/components/network-assets-item.vue
@@ -227,6 +227,7 @@ const toggleDetail = () => {
         margin-right: 16px;
         border-radius: 100%;
         box-shadow: inset 0px 0px 1px rgba(0, 0, 0, 0.16);
+        object-fit: contain;
       }
 
       &-name {

From cd40ec11ebbc0a9f424a3d14c4122bd719360432 Mon Sep 17 00:00:00 2001
From: olgakup <16910687+olgakup@users.noreply.github.com>
Date: Wed, 26 Mar 2025 17:54:43 -0700
Subject: [PATCH 09/13] chore: add comments

---
 .../ui/action/components/app-dialog/index.vue | 22 +++++++++++++++++++
 1 file changed, 22 insertions(+)

diff --git a/packages/extension/src/ui/action/components/app-dialog/index.vue b/packages/extension/src/ui/action/components/app-dialog/index.vue
index 666081f78..7d114cb80 100644
--- a/packages/extension/src/ui/action/components/app-dialog/index.vue
+++ b/packages/extension/src/ui/action/components/app-dialog/index.vue
@@ -23,6 +23,28 @@ import { useMenuStore } from '@action/store/menu-store';
 import { storeToRefs } from 'pinia';
 import { computed } from 'vue';
 
+/**
+ * This component is a dialog that can be used to display content in a modal.
+ * It has a close button and a backdrop that can be clicked to close the dialog.
+ * The dialog can be centered or not centered.
+ * By default, it aligned to cover the right side of the screen and be the max width of the content that does not cover menu.
+ *
+ * !!! Do not use it if pinia store is not defined, as it depends on the menu store.
+ *
+ * @emits close:dialog - Emits when the dialog is closed.
+ * @model - Controls the visibility of the dialog.
+ *
+ * @example Basic Dialog
+ * <app-dialog v-model="dialogModel">
+ *    <div> hello world </div>
+ * </app-dialog>
+ * @example Centered Dialog with custom width
+ *
+ * <app-dialog v-model="dialogModel" width="500px" isCentered>
+ *    <div> hello world </div>
+ * </app-dialog>
+ *
+ */
 const props = defineProps({
   width: {
     type: String,

From 8cb681a2610d2c1e167fc9489770fe0d55169a4c Mon Sep 17 00:00:00 2001
From: olgakup <16910687+olgakup@users.noreply.github.com>
Date: Thu, 27 Mar 2025 11:54:19 -0700
Subject: [PATCH 10/13] fix: warning

---
 .../ui/action/components/app-dialog/index.vue | 46 ++++++++++++-------
 .../action/views/asset-detail-view/index.vue  |  1 -
 .../action/views/assets-select-list/index.vue |  1 -
 .../ui/action/views/network-assets/index.vue  |  2 +-
 4 files changed, 31 insertions(+), 19 deletions(-)

diff --git a/packages/extension/src/ui/action/components/app-dialog/index.vue b/packages/extension/src/ui/action/components/app-dialog/index.vue
index 7d114cb80..ea854a471 100644
--- a/packages/extension/src/ui/action/components/app-dialog/index.vue
+++ b/packages/extension/src/ui/action/components/app-dialog/index.vue
@@ -1,19 +1,21 @@
 <template>
   <teleport to="#app">
-    <div v-if="model" :class="[defaultClass, { show: model }]">
-      <div class="app-dialog__overlay" @click="closeDialog" />
-      <div
-        class="app-dialog__wrap"
-        :class="[{ show: model }]"
-        :style="dialogStyle"
-      >
-        <a class="app-dialog__close" @click="closeDialog">
-          <close-icon />
-        </a>
-
-        <slot />
+    <Transition name="modaltransition">
+      <div v-if="model" :class="[defaultClass, { show: model }]">
+        <div class="app-dialog__overlay" @click="closeDialog" />
+        <div
+          class="app-dialog__wrap"
+          :class="[{ show: model }]"
+          :style="dialogStyle"
+        >
+          <a class="app-dialog__close" @click="closeDialog">
+            <close-icon />
+          </a>
+
+          <slot />
+        </div>
       </div>
-    </div>
+    </Transition>
   </teleport>
 </template>
 
@@ -100,6 +102,7 @@ const dialogStyle = computed(() => {
   align-items: center;
   flex-direction: row;
   padding: 16px;
+  transition: opacity 0.3s ease;
 
   &__expanded {
     width: 800px;
@@ -141,9 +144,7 @@ const dialogStyle = computed(() => {
     box-sizing: border-box;
     opacity: 0;
     visibility: hidden;
-    transition:
-      opacity 0.3s,
-      visibility 0s ease-in-out 0.3s;
+    transition: all 0.3s ease;
 
     &.show {
       opacity: 1;
@@ -186,4 +187,17 @@ const dialogStyle = computed(() => {
     }
   }
 }
+.modaltransition-enter-from {
+  opacity: 0;
+}
+
+.modaltransition-leave-to {
+  opacity: 0;
+}
+
+.modaltransition-enter-from .app-dialog__wrap,
+.modaltransition-leave-to .app-dialog__wrap {
+  -webkit-transform: scale(1.1);
+  transform: scale(1.1);
+}
 </style>
diff --git a/packages/extension/src/ui/action/views/asset-detail-view/index.vue b/packages/extension/src/ui/action/views/asset-detail-view/index.vue
index 1f9ecc23d..cf5a2f8d4 100644
--- a/packages/extension/src/ui/action/views/asset-detail-view/index.vue
+++ b/packages/extension/src/ui/action/views/asset-detail-view/index.vue
@@ -66,7 +66,6 @@
 <script setup lang="ts">
 import { PropType, ref } from 'vue';
 import BaseButton from '@action/components/base-button/index.vue';
-import CloseIcon from '@action/icons/common/close-icon.vue';
 import SparklineUp from '@action/icons/asset/sparkline-up.vue';
 import SparklineDown from '@action/icons/asset/sparkline-down.vue';
 import { AssetsType } from '@/types/provider';
diff --git a/packages/extension/src/ui/action/views/assets-select-list/index.vue b/packages/extension/src/ui/action/views/assets-select-list/index.vue
index b75c27fb8..ea554d4c3 100644
--- a/packages/extension/src/ui/action/views/assets-select-list/index.vue
+++ b/packages/extension/src/ui/action/views/assets-select-list/index.vue
@@ -37,7 +37,6 @@
 </template>
 
 <script setup lang="ts">
-// import CloseIcon from '@action/icons/common/close-icon.vue';
 import AssetsSelectListItem from './components/assets-select-list-item.vue';
 import CustomScrollbar from '@action/components/custom-scrollbar/index.vue';
 import AssetsSelectListSearch from './components/assets-select-list-search.vue';
diff --git a/packages/extension/src/ui/action/views/network-assets/index.vue b/packages/extension/src/ui/action/views/network-assets/index.vue
index 9b8a87dd7..69a6dd694 100644
--- a/packages/extension/src/ui/action/views/network-assets/index.vue
+++ b/packages/extension/src/ui/action/views/network-assets/index.vue
@@ -48,7 +48,7 @@
         :account="props.accountInfo.selectedAccount"
         :show-deposit="showDeposit"
         :network="network"
-        :toggle="toggleDeposit"
+        @toggle:deposit="toggleDeposit"
       />
     </div>
     <!-- prettier-ignore -->

From 1e9d84d8e9c2b4e5e60f4a00fc69f7d799bd2a6b Mon Sep 17 00:00:00 2001
From: olgakup <16910687+olgakup@users.noreply.github.com>
Date: Thu, 27 Mar 2025 11:58:55 -0700
Subject: [PATCH 11/13] chore: remove comments

---
 .../ui/action/views/assets-select-list/index.vue   | 14 --------------
 .../src/ui/action/views/nft-detail-view/index.vue  | 11 -----------
 2 files changed, 25 deletions(-)

diff --git a/packages/extension/src/ui/action/views/assets-select-list/index.vue b/packages/extension/src/ui/action/views/assets-select-list/index.vue
index ea554d4c3..aed52cc1a 100644
--- a/packages/extension/src/ui/action/views/assets-select-list/index.vue
+++ b/packages/extension/src/ui/action/views/assets-select-list/index.vue
@@ -153,20 +153,6 @@ const model = defineModel<boolean>();
     }
   }
 
-  // &__close {
-  //   position: absolute;
-  //   top: 8px;
-  //   right: 8px;
-  //   border-radius: 8px;
-  //   cursor: pointer;
-  //   font-size: 0;
-  //   transition: background 300ms ease-in-out;
-
-  //   &:hover {
-  //     background: @black007;
-  //   }
-  // }
-
   &__scroll-area {
     position: relative;
     margin: auto;
diff --git a/packages/extension/src/ui/action/views/nft-detail-view/index.vue b/packages/extension/src/ui/action/views/nft-detail-view/index.vue
index 19c8f5c02..244e14857 100644
--- a/packages/extension/src/ui/action/views/nft-detail-view/index.vue
+++ b/packages/extension/src/ui/action/views/nft-detail-view/index.vue
@@ -114,17 +114,6 @@ const model = defineModel<boolean>();
   box-sizing: border-box;
 
   &__wrap {
-    // background: @white;
-    // box-shadow:
-    //   0px 3px 6px rgba(0, 0, 0, 0.039),
-    //   0px 7px 24px rgba(0, 0, 0, 0.19);
-    // border-radius: 12px;
-    // box-sizing: border-box;
-    // width: 360px;
-    // height: auto;
-    // z-index: 107;
-    // position: relative;
-    // height: auto;
     overflow-x: hidden;
     padding: 24px 32px 32px 32px;
 

From 3f3f9081857b457cd444fcf4ccdf8098049d3236 Mon Sep 17 00:00:00 2001
From: olgakup <16910687+olgakup@users.noreply.github.com>
Date: Thu, 27 Mar 2025 12:23:55 -0700
Subject: [PATCH 12/13] devop: fix store

---
 packages/extension/src/ui/action/App.vue             | 1 +
 packages/extension/src/ui/action/main.ts             | 3 ---
 packages/extension/src/ui/action/store/menu-store.ts | 5 ++---
 3 files changed, 3 insertions(+), 6 deletions(-)

diff --git a/packages/extension/src/ui/action/App.vue b/packages/extension/src/ui/action/App.vue
index b14320b03..f569f0e4b 100644
--- a/packages/extension/src/ui/action/App.vue
+++ b/packages/extension/src/ui/action/App.vue
@@ -272,6 +272,7 @@ onMounted(async () => {
       }, 2000);
     }
     updatesStore.init();
+    menuStore.init();
   } else {
     openOnboard();
   }
diff --git a/packages/extension/src/ui/action/main.ts b/packages/extension/src/ui/action/main.ts
index ecbc21e5d..d690b24d9 100644
--- a/packages/extension/src/ui/action/main.ts
+++ b/packages/extension/src/ui/action/main.ts
@@ -18,7 +18,4 @@ const pinia = createPinia();
 app.use(router).use(Vue3Lottie, { name: 'vue3lottie' }).use(pinia);
 
 app.config.globalProperties.$filters = filters;
-const menuStore = useMenuStore();
-// Get isExpanded value from MenuState and set it to the store
-await menuStore.init();
 app.mount('#app');
diff --git a/packages/extension/src/ui/action/store/menu-store.ts b/packages/extension/src/ui/action/store/menu-store.ts
index 2acaa4777..057cad6bb 100644
--- a/packages/extension/src/ui/action/store/menu-store.ts
+++ b/packages/extension/src/ui/action/store/menu-store.ts
@@ -1,12 +1,11 @@
-import { init } from '@amplitude/analytics-browser';
 import { defineStore } from 'pinia'
-import { ref, onMounted } from 'vue';
+import { ref, } from 'vue';
 import MenuState from '@/libs/menu-state';
 
 export const useMenuStore = defineStore('useMenuStore', () => {
 
   const menuState = new MenuState();
-  const isExpanded = ref(true);
+  const isExpanded = ref(false);
 
   const setIsExpanded = async (value: boolean) => {
     isExpanded.value = value;

From 8d588c83a8cb80ffa2a77ec1f02d45dcaacdd4b1 Mon Sep 17 00:00:00 2001
From: kvhnuke <10602065+kvhnuke@users.noreply.github.com>
Date: Thu, 27 Mar 2025 12:50:30 -0700
Subject: [PATCH 13/13] fix: warnings

---
 .../components/network-assets-item.vue        | 107 +++++++++---------
 1 file changed, 55 insertions(+), 52 deletions(-)

diff --git a/packages/extension/src/ui/action/views/network-assets/components/network-assets-item.vue b/packages/extension/src/ui/action/views/network-assets/components/network-assets-item.vue
index 5cc4c8461..a6e8c7838 100644
--- a/packages/extension/src/ui/action/views/network-assets/components/network-assets-item.vue
+++ b/packages/extension/src/ui/action/views/network-assets/components/network-assets-item.vue
@@ -1,65 +1,68 @@
 <template>
-  <a class="network-assets__token" @click="toggleDetail()">
-    <div
-      class="network-assets__token-info"
-      :class="{ max: token.priceChangePercentage == 0 }"
-    >
-      <img :src="token.icon" width="32px" height="32px" />
-      <div class="network-assets__token-info-name">
-        <h4 v-if="token.name.length <= 16">{{ token.name }}</h4>
-        <tooltip v-else :text="token.name"
-          ><h4>{{ `${token.name.slice(0, 12)}...` }}</h4></tooltip
-        >
-        <p>
-          {{ token.balancef }}
-          <span v-if="token.symbol.length <= 6">
-            {{ token.symbol.toLowerCase() }}
-          </span>
-          <tooltip
-            v-else
-            :style="{ fontSize: '12px !important' }"
-            :text="token.symbol"
+  <div>
+    <a class="network-assets__token" @click="toggleDetail()">
+      <div
+        class="network-assets__token-info"
+        :class="{ max: token.priceChangePercentage == 0 }"
+      >
+        <img :src="token.icon" width="32px" height="32px" />
+        <div class="network-assets__token-info-name">
+          <h4 v-if="token.name.length <= 16">{{ token.name }}</h4>
+          <tooltip v-else :text="token.name"
+            ><h4>{{ `${token.name.slice(0, 12)}...` }}</h4></tooltip
           >
-            <span>{{ `${token.symbol.toLowerCase().slice(0, 7)}` }}</span>
-          </tooltip>
-        </p>
+          <p>
+            {{ token.balancef }}
+            <span v-if="token.symbol.length <= 6">
+              {{ token.symbol.toLowerCase() }}
+            </span>
+            <tooltip
+              v-else
+              :style="{ fontSize: '12px !important' }"
+              :text="token.symbol"
+            >
+              <span>{{ `${token.symbol.toLowerCase().slice(0, 7)}` }}</span>
+            </tooltip>
+          </p>
+        </div>
       </div>
-    </div>
 
-    <div
-      v-if="token.priceChangePercentage !== 0"
-      class="network-assets__token-sparkline"
-      :class="{
-        down: token.priceChangePercentage < 0,
-        up: token.priceChangePercentage >= 0,
-      }"
-    >
-      <p>
-        <sparkline-up v-if="token.priceChangePercentage >= 0" /><sparkline-down
-          v-if="token.priceChangePercentage < 0"
-        />{{ token.priceChangePercentage.toFixed(2) }}%
-      </p>
-      <v-chart class="chart" :option="option" />
-    </div>
+      <div
+        v-if="token.priceChangePercentage !== 0"
+        class="network-assets__token-sparkline"
+        :class="{
+          down: token.priceChangePercentage < 0,
+          up: token.priceChangePercentage >= 0,
+        }"
+      >
+        <p>
+          <sparkline-up
+            v-if="token.priceChangePercentage >= 0"
+          /><sparkline-down v-if="token.priceChangePercentage < 0" />{{
+            token.priceChangePercentage.toFixed(2)
+          }}%
+        </p>
+        <v-chart class="chart" :option="option" />
+      </div>
 
-    <div class="network-assets__token-price">
-      <h4>${{ token.balanceUSDf }}</h4>
-      <p>@{{ token.valuef }}</p>
-    </div>
-  </a>
+      <div class="network-assets__token-price">
+        <h4>${{ token.balanceUSDf }}</h4>
+        <p>@{{ token.valuef }}</p>
+      </div>
+    </a>
 
-  <asset-detail-view
-    v-model="isDetail"
-    :token="token"
-    :network="network"
-    :is-custom-token="isCustomToken"
-    :remove-token="removeToken"
-  />
+    <asset-detail-view
+      v-model="isDetail"
+      :token="token"
+      :is-custom-token="isCustomToken"
+      :remove-token="removeToken"
+    />
+  </div>
 </template>
 
 <script setup lang="ts">
 import { PropType, ref, computed, onMounted } from 'vue';
-import { CustomErc20Token } from '@/libs/tokens-state/types.ts';
+import { CustomErc20Token } from '@/libs/tokens-state/types';
 import { BaseNetwork } from '@/types/base-network';
 import SparklineUp from '@action/icons/asset/sparkline-up.vue';
 import SparklineDown from '@action/icons/asset/sparkline-down.vue';