enkryptcom · kvhnuke · Apr 13, 2026 · Feb 25, 2026 · Feb 26, 2026 · Feb 26, 2026
diff --git a/package.json b/package.json
@@ -32,13 +32,13 @@
     "prepare": "husky"
   },
   "devDependencies": {
-    "@commitlint/cli": "^20.4.1",
-    "@commitlint/config-conventional": "^20.4.1",
-    "@swc/core": "^1.15.11",
+    "@commitlint/cli": "^20.4.2",
+    "@commitlint/config-conventional": "^20.4.2",
+    "@swc/core": "^1.15.13",
     "concurrently": "^9.2.1",
     "husky": "^9.1.7",
     "node-notifier": "^10.0.1",
-    "nodemon": "^3.1.11",
+    "nodemon": "^3.1.14",
     "ultra-runner": "^3.10.5",
     "vite-plugin-node-polyfills": "0.25.0"
   },

diff --git a/packages/extension-bridge/package.json b/packages/extension-bridge/package.json
@@ -44,12 +44,12 @@
     "webextension-polyfill": "^0.12.0"
   },
   "devDependencies": {
-    "@types/node": "^22.19.11",
-    "@types/webextension-polyfill": "^0.12.4",
-    "@typescript-eslint/eslint-plugin": "^8.56.0",
-    "@typescript-eslint/parser": "^8.56.0",
+    "@types/node": "^22.19.13",
+    "@types/webextension-polyfill": "^0.12.5",
+    "@typescript-eslint/eslint-plugin": "^8.56.1",
+    "@typescript-eslint/parser": "^8.56.1",
     "bumpp": "^10.4.1",
-    "eslint": "^9.39.2",
+    "eslint": "^9.39.3",
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-import-resolver-alias": "^1.1.2",
@@ -61,6 +61,6 @@
     "tsup": "^8.5.1",
     "type-fest": "^5.4.4",
     "typescript": "^5.9.3",
-    "typescript-eslint": "8.56.0"
+    "typescript-eslint": "8.56.1"
   }
 }
diff --git a/packages/extension/package.json b/packages/extension/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@enkryptcom/extension",
-  "version": "2.16.0",
+  "version": "2.17.0",
   "private": true,
   "type": "module",
   "scripts": {
@@ -23,7 +23,7 @@
     "watch:firefox": "yarn prebuild && cross-env BROWSER='firefox' vite"
   },
   "dependencies": {
-    "@amplitude/analytics-browser": "^2.35.0",
+    "@amplitude/analytics-browser": "^2.35.3",
     "@enkryptcom/extension-bridge": "workspace:^",
     "@enkryptcom/hw-wallets": "workspace:^",
     "@enkryptcom/keyring": "workspace:^",
@@ -79,7 +79,7 @@
     "switch-ts": "^2.0.0",
     "url-parse": "^1.5.10",
     "uuid": "^13.0.0",
-    "vue": "^3.5.28",
+    "vue": "^3.5.29",
     "vue-echarts": "8.0.1",
     "vue-router": "^4.6.4",
     "vue3-lottie": "^3.3.1",
@@ -100,13 +100,13 @@
     "@rollup/plugin-typescript": "^12.3.0",
     "@tsconfig/node20": "^20.1.9",
     "@types/bs58": "^5.0.0",
-    "@types/chrome": "^0.1.36",
+    "@types/chrome": "^0.1.37",
     "@types/ethereumjs-abi": "^0.6.5",
     "@types/events": "^3.0.3",
     "@types/fs-extra": "^11.0.4",
     "@types/less": "^3.0.8",
-    "@types/lodash": "^4.17.23",
-    "@types/node": "^22.19.11",
+    "@types/lodash": "^4.17.24",
+    "@types/node": "^22.19.13",
     "@types/semver": "^7.7.1",
     "@types/url-parse": "^1.4.11",
     "@types/utf-8-validate": "^5.0.2",
@@ -119,7 +119,7 @@
     "@vue/tsconfig": "^0.8.1",
     "@vueuse/core": "^14.2.1",
     "cross-env": "^10.1.0",
-    "eslint": "^9.39.2",
+    "eslint": "^9.39.3",
     "eslint-plugin-vue": "^10.8.0",
     "fs-extra": "^11.3.3",
     "jsdom": "^27.4.0",
@@ -128,7 +128,7 @@
     "npm-run-all2": "^8.0.4",
     "prettier": "^3.8.1",
     "rimraf": "^6.1.3",
-    "rollup": "^4.57.1",
+    "rollup": "^4.59.0",
     "rollup-plugin-visualizer": "^6.0.5",
     "semver": "^7.7.4",
     "systeminformation": "^5.31.1",
@@ -139,7 +139,7 @@
     "vite-plugin-node-polyfills": "0.25.0",
     "vite-tsconfig-paths": "^6.1.1",
     "vitest": "^4.0.18",
-    "vue-tsc": "^3.2.4",
+    "vue-tsc": "^3.2.5",
     "webextension-polyfill": "^0.12.0"
   },
   "installConfig": {

diff --git a/packages/extension/src/ui/action/views/network-assets/components/network-assets-header.vue b/packages/extension/src/ui/action/views/network-assets/components/network-assets-header.vue
@@ -3,7 +3,7 @@
     <div class="network-assets__header__token">
       <p>Token</p>
     </div>
-    <div>
+    <div class="network-assets__header__last24h">
       <p>Last 24h</p>
     </div>
     <div class="network-assets__header__price">
@@ -18,10 +18,10 @@
 @import '@action/styles/theme.less';
 .network-assets {
   &__header {
-    padding: 10px 20px 2px 20px;
+    padding: 10px 24px 2px 24px;
     position: relative;
     display: flex;
-    justify-content: space-between;
+    justify-content: flex-start;
     align-items: end;
     flex-direction: row;
     p {
@@ -34,14 +34,24 @@
       margin: 0;
     }
     &__token {
-      width: 196px;
+      flex: 1;
+      min-width: 0;
       p {
-        padding-left: 48px;
+        padding-left: 52px;
+      }
+    }
+
+    &__last24h {
+      width: 80px;
+      flex-shrink: 0;
+      p {
+        text-align: center;
       }
     }
 
     &__price {
-      width: 162px;
+      width: 90px;
+      flex-shrink: 0;
       p {
         text-align: end;
       }

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
@@ -289,8 +289,8 @@ const toggleDetail = () => {
     flex-direction: column;
     align-items: center;
     gap: 4px;
-    margin: 0 8px;
-    min-width: 64px;
+    width: 80px;
+    flex-shrink: 0;
   }
 
   &__change-badge {
@@ -304,7 +304,6 @@ const toggleDetail = () => {
     letter-spacing: 0.02em;
 
     &.is-positive {
-      background: rgba(34, 197, 94, 0.1);
       color: #16a34a;
 
       svg {
@@ -314,7 +313,6 @@ const toggleDetail = () => {
     }
 
     &.is-negative {
-      background: rgba(239, 68, 68, 0.1);
       color: #dc2626;
 
       svg {
@@ -332,7 +330,7 @@ const toggleDetail = () => {
   // Value Section
   &__value {
     text-align: right;
-    min-width: 90px;
+    width: 90px;
     flex-shrink: 0;
   }
 

diff --git a/packages/extension/src/ui/action/views/swap/components/send-address-input.vue b/packages/extension/src/ui/action/views/swap/components/send-address-input.vue
@@ -100,23 +100,28 @@ const changeFocus = (val: FocusEvent) => {
 .send-address-input {
   height: 64px;
   background: #ffffff;
-  margin: 12px 32px 8px 32px;
   box-sizing: border-box;
   border: 1px solid @gray02;
-  box-sizing: border-box;
   border-radius: 10px;
-  width: calc(~'100% - 64px');
+  width: 100%;
   padding: 16px;
   display: flex;
   justify-content: flex-start;
   align-items: center;
   flex-direction: row;
   position: relative;
+  transition: all 200ms ease-in-out;
+  box-shadow: 0 2px 8px rgba(98, 126, 234, 0.06);
+
+  &:hover {
+    border-color: rgba(98, 126, 234, 0.25);
+    box-shadow: 0 2px 8px rgba(98, 126, 234, 0.08);
+  }
 
   &.focus {
     border: 2px solid @primary;
-    width: calc(~'100% - 62px');
-    margin: 12px 31px 8px 31px;
+    padding: 15px;
+    box-shadow: 0 0 0 3px rgba(98, 126, 234, 0.12);
   }
 
   &__avatar {
@@ -166,7 +171,14 @@ const changeFocus = (val: FocusEvent) => {
     cursor: pointer;
     padding: 4px;
     right: 8px;
-    top: 16px;
+    top: 50%;
+    transform: translateY(-50%);
+    border-radius: 6px;
+    transition: background 150ms ease-in-out;
+
+    &:hover {
+      background: rgba(0, 0, 0, 0.04);
+    }
   }
 }
 </style>
diff --git a/packages/extension/src/ui/action/views/swap/components/swap-network-select/index.vue b/packages/extension/src/ui/action/views/swap/components/swap-network-select/index.vue
@@ -51,10 +51,14 @@ defineProps({
   position: relative;
   cursor: pointer;
   text-decoration: none;
-  transition: background 300ms ease-in-out;
+  transition: all 200ms ease-in-out;
 
   &:hover {
-    background: @black007;
+    background: rgba(98, 126, 234, 0.04);
+  }
+
+  &:active {
+    transform: scale(0.995);
   }
 
   &__image {
@@ -108,7 +112,24 @@ defineProps({
     font-size: 0;
     padding: 4px;
     right: 8px;
-    top: 16px;
+    top: 50%;
+    transform: translateY(-50%);
+    border-radius: 6px;
+    transition: all 200ms ease-in-out;
+    background: rgba(0, 0, 0, 0.04);
+
+    svg {
+      opacity: 0.6;
+      transition: opacity 150ms ease-in-out;
+    }
+  }
+
+  &:hover &__arrow {
+    background: rgba(98, 126, 234, 0.1);
+
+    svg {
+      opacity: 1;
+    }
   }
 }
 </style>
diff --git a/packages/extension/src/ui/action/views/swap/components/swap-token-amount-input/index.vue b/packages/extension/src/ui/action/views/swap/components/swap-token-amount-input/index.vue
@@ -74,9 +74,17 @@ const changeFocus = (newVal: boolean) => {
   box-sizing: border-box;
   border-radius: 10px;
   position: relative;
+  transition: all 200ms ease-in-out;
+  box-shadow: 0 2px 8px rgba(98, 126, 234, 0.06);
+
+  &:hover {
+    border-color: rgba(98, 126, 234, 0.25);
+    box-shadow: 0 2px 8px rgba(98, 126, 234, 0.08);
+  }
 
   &.focus {
     border: 1px solid @primary;
+    box-shadow: 0 0 0 3px rgba(98, 126, 234, 0.12);
   }
 
   &__max {
@@ -87,7 +95,7 @@ const changeFocus = (newVal: boolean) => {
     height: 24px;
     right: 18px;
     bottom: 30px;
-    background: rgba(0, 0, 0, 0.02);
+    background: linear-gradient(135deg, #627eea 0%, #8a64dc 100%);
     border-radius: 6px;
     cursor: pointer;
     font-style: normal;
@@ -96,7 +104,19 @@ const changeFocus = (newVal: boolean) => {
     line-height: 16px;
     letter-spacing: 0.8px;
     box-sizing: border-box;
-    color: @primaryLabel;
+    color: @white;
+    transition: all 200ms ease-in-out;
+    box-shadow: 0 2px 6px rgba(98, 126, 234, 0.3);
+
+    &:hover {
+      transform: translateY(-1px);
+      box-shadow: 0 4px 12px rgba(98, 126, 234, 0.4);
+    }
+
+    &:active {
+      transform: translateY(0);
+      box-shadow: 0 1px 4px rgba(98, 126, 234, 0.3);
+    }
   }
 
   &__fiat {

diff --git a/packages/extension/src/ui/action/views/swap/components/swap-token-select/index.vue b/packages/extension/src/ui/action/views/swap/components/swap-token-select/index.vue
@@ -82,10 +82,14 @@ const open = () => {
   position: relative;
   cursor: pointer;
   text-decoration: none;
-  transition: background 300ms ease-in-out;
+  transition: all 200ms ease-in-out;
 
   &:hover {
-    background: @black007;
+    background: rgba(98, 126, 234, 0.04);
+  }
+
+  &:active {
+    transform: scale(0.995);
   }
 
   &__image {
@@ -140,6 +144,22 @@ const open = () => {
     padding: 4px;
     right: 8px;
     top: 16px;
+    border-radius: 6px;
+    transition: all 200ms ease-in-out;
+    background: rgba(0, 0, 0, 0.04);
+
+    svg {
+      opacity: 0.6;
+      transition: opacity 150ms ease-in-out;
+    }
+  }
+
+  &:hover &__arrow {
+    background: rgba(98, 126, 234, 0.1);
+
+    svg {
+      opacity: 1;
+    }
   }
 }
 </style>
diff --git a/packages/extension/src/ui/action/views/swap/components/swap-token-to-amount/index.vue b/packages/extension/src/ui/action/views/swap/components/swap-token-to-amount/index.vue
@@ -82,9 +82,17 @@ const tokenPrice = computed(() => {
   box-sizing: border-box;
   border-radius: 10px;
   position: relative;
+  transition: all 200ms ease-in-out;
+  box-shadow: 0 2px 8px rgba(98, 126, 234, 0.06);
+
+  &:hover {
+    border-color: rgba(98, 126, 234, 0.25);
+    box-shadow: 0 2px 8px rgba(98, 126, 234, 0.08);
+  }
 
   &.focus {
     border: 1px solid @primary;
+    box-shadow: 0 0 0 3px rgba(98, 126, 234, 0.12);
   }
 
   &__max {