From 62d681bcd295376682e82d33ac69ccffb49bc975 Mon Sep 17 00:00:00 2001
From: Mihail Polev <mpolev364@gmail.com>
Date: Fri, 1 Apr 2022 22:26:27 +0700
Subject: [PATCH 1/5] =?UTF-8?q?devop:=20=F0=9F=94=A7=20Send=20Transaction?=
 =?UTF-8?q?=20develop?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/extension/src/ui/action/App.vue      |  16 +-
 .../action/components/network-menu/index.vue  |   8 +-
 .../extension/src/ui/action/router/index.ts   |  16 +-
 .../components/network-activity-action.vue    |  14 +-
 .../action/views/network-activity/index.vue   |   2 +-
 .../ui/action/views/network-assets/index.vue  |   2 +-
 .../ui/action/views/network-dapps/index.vue   |   2 +-
 .../ui/action/views/network-nfts/index.vue    |   2 +-
 .../components/send-address-input.vue         |  83 +++++++++
 .../components/send-address-item.vue          | 115 +++++++++++++
 .../components/send-contacts-list.vue         |  50 ++++++
 .../components/send-token-item.vue            | 159 ++++++++++++++++++
 .../components/send-token-list.vue            |  32 ++++
 .../action/views/send-transaction/index.vue   | 136 +++++++++++++++
 14 files changed, 614 insertions(+), 23 deletions(-)
 create mode 100644 packages/extension/src/ui/action/views/send-transaction/components/send-address-input.vue
 create mode 100644 packages/extension/src/ui/action/views/send-transaction/components/send-address-item.vue
 create mode 100644 packages/extension/src/ui/action/views/send-transaction/components/send-contacts-list.vue
 create mode 100644 packages/extension/src/ui/action/views/send-transaction/components/send-token-item.vue
 create mode 100644 packages/extension/src/ui/action/views/send-transaction/components/send-token-list.vue
 create mode 100644 packages/extension/src/ui/action/views/send-transaction/index.vue

diff --git a/packages/extension/src/ui/action/App.vue b/packages/extension/src/ui/action/App.vue
index b816aa05f..b8cc31607 100644
--- a/packages/extension/src/ui/action/App.vue
+++ b/packages/extension/src/ui/action/App.vue
@@ -1,11 +1,11 @@
 <template>
   <div class="app">
     <div class="app__menu" :class="classObject()">
-      <logo-min :selected="+route.params.id" class="app__menu-logo" />
+      <logo-min :selected="+route.params.networkId" class="app__menu-logo" />
       <base-search :is-border="false" />
       <app-menu
         :networks="networks"
-        :selected="+route.params.id"
+        :selected="+route.params.networkId"
         :set-network="setNetwork"
       />
       <br /><br />
@@ -37,7 +37,7 @@
     <div class="app__content">
       <network-header
         v-show="showNetworkMenu()"
-        :selected="+route.params.id"
+        :selected="+route.params.networkId"
         :account="account"
       />
 
@@ -47,7 +47,7 @@
       <router-view name="modal"></router-view>
       <router-view name="accounts"></router-view>
 
-      <network-menu v-show="showNetworkMenu()" :selected="+route.params.id" />
+      <network-menu v-show="showNetworkMenu()" :selected="+route.params.networkId" />
     </div>
   </div>
 </template>
@@ -72,19 +72,19 @@ const router = useRouter();
 const route = useRoute();
 
 onMounted(() => {
-  router.push({ name: "activity", params: { id: 1 } });
+  router.push({ name: "activity", params: { networkId: 1 } });
 });
 const transitionName = "fade";
 const account: Account = singleAccount;
 const networks: NetworkItem[] = networkList;
 const setNetwork = (network: NetworkItem) => {
-  router.push({ name: "activity", params: { id: network.id } });
+  router.push({ name: "activity", params: { networkId: network.id } });
 };
 const addNetwork = () => {
   router.push({ name: "add-network" });
 };
 const classObject = () => {
-  const selected = +route.params.id;
+  const selected = +route.params.networkId;
 
   if (selected) {
     return {
@@ -98,7 +98,7 @@ const classObject = () => {
   return {};
 };
 const showNetworkMenu = () => {
-  const selected = +route.params.id;
+  const selected = +route.params.networkId;
 
   return (
     !!selected &&
diff --git a/packages/extension/src/ui/action/components/network-menu/index.vue b/packages/extension/src/ui/action/components/network-menu/index.vue
index a9a59871a..e2c33a553 100644
--- a/packages/extension/src/ui/action/components/network-menu/index.vue
+++ b/packages/extension/src/ui/action/components/network-menu/index.vue
@@ -1,25 +1,25 @@
 <template>
   <div class="network-menu">
     <router-link
-      :to="{ name: 'assets', params: { id: !!selected ? selected : null } }"
+      :to="{ name: 'assets', params: { networkId: !!selected ? selected : null } }"
     >
       <Assets /><br />Assets
     </router-link>
     <router-link
       :to="{
         name: 'activity',
-        params: { id: !!selected ? selected : null },
+        params: { networkId: !!selected ? selected : null },
       }"
     >
       <Activity /><br />Activity
     </router-link>
     <router-link
-      :to="{ name: 'nfts', params: { id: !!selected ? selected : null } }"
+      :to="{ name: 'nfts', params: { networkId: !!selected ? selected : null } }"
     >
       <NFTs /><br />NFTs
     </router-link>
     <router-link
-      :to="{ name: 'dapps', params: { id: !!selected ? selected : null } }"
+      :to="{ name: 'dapps', params: { networkId: !!selected ? selected : null } }"
     >
       <DApps /><br />DApps
     </router-link>
diff --git a/packages/extension/src/ui/action/router/index.ts b/packages/extension/src/ui/action/router/index.ts
index b77a86b7a..c06ed17a5 100644
--- a/packages/extension/src/ui/action/router/index.ts
+++ b/packages/extension/src/ui/action/router/index.ts
@@ -5,6 +5,7 @@ import NetworkActivity from "@action/views/network-activity/index.vue";
 import NetworkAssets from "@action/views/network-assets/index.vue";
 import NetworkDApps from "@action/views/network-dapps/index.vue";
 import NetworkNFTs from "@action/views/network-nfts/index.vue";
+import SendTransaction from "@action/views/send-transaction/index.vue";
 
 const routes = [
   {
@@ -15,33 +16,40 @@ const routes = [
     name: "intro",
   },
   {
-    path: "/activity/:id?",
+    path: "/activity/:networkId?",
     components: {
       view: NetworkActivity,
     },
     name: "activity",
   },
   {
-    path: "/assets/:id?",
+    path: "/assets/:networkId?",
     components: {
       view: NetworkAssets,
     },
     name: "assets",
   },
   {
-    path: "/dapps/:id?",
+    path: "/dapps/:networkId?",
     components: {
       view: NetworkDApps,
     },
     name: "dapps",
   },
   {
-    path: "/nfts/:id?",
+    path: "/nfts/:networkId?",
     components: {
       view: NetworkNFTs,
     },
     name: "nfts",
   },
+  {
+    path: "/send/:networkId?",
+    components: {
+      view: SendTransaction,
+    },
+    name: "send-transaction",
+  },
   {
     path: "/add-network",
     components: {
diff --git a/packages/extension/src/ui/action/views/network-activity/components/network-activity-action.vue b/packages/extension/src/ui/action/views/network-activity/components/network-activity-action.vue
index 4a1a56a58..a9f053d93 100644
--- a/packages/extension/src/ui/action/views/network-activity/components/network-activity-action.vue
+++ b/packages/extension/src/ui/action/views/network-activity/components/network-activity-action.vue
@@ -15,12 +15,15 @@
         <Buy /><br />Buy
       </a>
       <div class="network-activity__action-devider"></div>
-      <a
+      <router-link
+        :to="{
+          name: 'send-transaction',
+          params: { networkId: !!selected ? selected : null },
+        }"
         class="network-activity__action-item"
-        @click="(sendAction as (e: MouseEvent)=>void)"
       >
         <Send /><br />Send
-      </a>
+      </router-link>
       <div class="network-activity__action-devider"></div>
       <a
         class="network-activity__action-item"
@@ -44,6 +47,11 @@ import Deposit from "@action/icons/actions/deposit.vue";
 import Buy from "@action/icons/actions/buy.vue";
 import Send from "@action/icons/actions/send.vue";
 import Swap from "@action/icons/actions/swap.vue";
+import { useRoute } from "vue-router";
+
+const route = useRoute();
+
+const selected = +route.params.networkId;
 
 defineProps({
   depositAction: {
diff --git a/packages/extension/src/ui/action/views/network-activity/index.vue b/packages/extension/src/ui/action/views/network-activity/index.vue
index 343e9470a..55529e6ac 100644
--- a/packages/extension/src/ui/action/views/network-activity/index.vue
+++ b/packages/extension/src/ui/action/views/network-activity/index.vue
@@ -54,7 +54,7 @@ import CustomScrollbar from "@action/components/custom-scrollbar/index.vue";
 
 const route = useRoute();
 
-const selected: number = +route.params.id;
+const selected: number = +route.params.networkId;
 const total = {
   cryptoAmount: 63.466,
   amount: 3245.24,
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 12be8648a..451807c2a 100644
--- a/packages/extension/src/ui/action/views/network-assets/index.vue
+++ b/packages/extension/src/ui/action/views/network-assets/index.vue
@@ -49,7 +49,7 @@ const route = useRoute();
 
 defineProps({});
 
-const selected: number = +route.params.id;
+const selected: number = +route.params.networkId;
 const total = {
   cryptoAmount: 63.466,
   amount: 3245.24,
diff --git a/packages/extension/src/ui/action/views/network-dapps/index.vue b/packages/extension/src/ui/action/views/network-dapps/index.vue
index 34cc53044..87c15ff69 100644
--- a/packages/extension/src/ui/action/views/network-dapps/index.vue
+++ b/packages/extension/src/ui/action/views/network-dapps/index.vue
@@ -34,7 +34,7 @@ const route = useRoute();
 
 defineProps({});
 
-const selected: number = +route.params.id;
+const selected: number = +route.params.networkId;
 const settings = {
   suppressScrollY: false,
   suppressScrollX: true,
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 2571accdb..c7a25d923 100644
--- a/packages/extension/src/ui/action/views/network-nfts/index.vue
+++ b/packages/extension/src/ui/action/views/network-nfts/index.vue
@@ -37,7 +37,7 @@ const route = useRoute();
 
 defineProps({});
 
-const selected: number = +route.params.id;
+const selected: number = +route.params.networkId;
 const settings = {
   suppressScrollY: false,
   suppressScrollX: true,
diff --git a/packages/extension/src/ui/action/views/send-transaction/components/send-address-input.vue b/packages/extension/src/ui/action/views/send-transaction/components/send-address-input.vue
new file mode 100644
index 000000000..c677cb2fb
--- /dev/null
+++ b/packages/extension/src/ui/action/views/send-transaction/components/send-address-input.vue
@@ -0,0 +1,83 @@
+<template>
+  <div class="send-address-input">
+    <p>То:</p>
+    <input
+      type="text"
+      placeholder="0x… address or ENS name"
+      @input="changeValue($event.target.value)"
+      @focus="changeFocus"
+      @blur="changeFocus"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  name: "SendAddressInput",
+};
+</script>
+
+<script setup lang="ts">
+import { defineProps, ref } from "vue";
+
+let isFocus = ref(false);
+
+const props = defineProps({
+  input: {
+    type: Function,
+    default: () => {
+      return null;
+    },
+  },
+  changeFocus: {
+    type: Function,
+    default: () => {
+      return null;
+    },
+  },
+});
+
+const changeValue = (text: string) => {
+  props.input(text);
+};
+
+const changeFocus = () => {
+  isFocus.value = !isFocus.value;
+  props.changeFocus(isFocus.value);
+};
+</script>
+
+<style lang="less">
+@import "~@action/styles/theme.less";
+
+.send-address-input {
+  height: 56px;
+  background: #FFFFFF;
+  box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1); 
+  padding: 4px 32px 10px 32px;
+  box-sizing: border-box;
+
+  p {
+    font-style: normal;
+    font-weight: 400;
+    font-size: 12px;
+    line-height: 16px;
+    letter-spacing: 0.5px;
+    color: @secondaryLabel;
+    margin: 0 0 6px 0;
+  }
+
+  input {
+    width: 100%;
+    height: 20px;
+    font-style: normal;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 20px;
+    letter-spacing: 0.25px;
+    color: @primaryLabel;
+    border: 0 none;
+    outline: none;
+  }
+}
+</style>
diff --git a/packages/extension/src/ui/action/views/send-transaction/components/send-address-item.vue b/packages/extension/src/ui/action/views/send-transaction/components/send-address-item.vue
new file mode 100644
index 000000000..6aee2bd6c
--- /dev/null
+++ b/packages/extension/src/ui/action/views/send-transaction/components/send-address-item.vue
@@ -0,0 +1,115 @@
+<template>
+  <div class="send-address-item">
+    <div class="send-address-item__info">
+      <img :src="getImgUrl(account.address)" alt="" />
+
+      <div class="send-address-item__name">
+        <h4>{{ account.name }}</h4>
+        <p>{{ $filters.replaceWithEllipsis(account.address, 6, 4) }}</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  name: "SendAddressItem",
+};
+</script>
+
+<script setup lang="ts">
+import { defineProps, PropType } from "vue";
+import { Account } from "@action/types/account";
+
+const props = defineProps({
+  account: {
+    type: Object as PropType<Account>,
+    default: () => {
+      return {};
+    },
+  },
+});
+
+const getImgUrl = (address: string) => {
+  return "https://mewcard.mewapi.io/?address=" + address;
+};
+</script>
+
+<style lang="less">
+@import "~@action/styles/theme.less";
+
+.send-address-item {
+  text-decoration: none;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-direction: row;
+  width: 100%;
+  height: 56px;
+
+  &__number {
+    font-style: normal;
+    font-weight: 400;
+    font-size: 12px;
+    line-height: 16px;
+    letter-spacing: 0.5px;
+    color: @secondaryLabel;
+    width: 24px;
+  }
+
+  &__info {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    flex-direction: row;
+    height: 56px;
+
+    img {
+      width: 32px;
+      height: 32px;
+      margin-right: 16px;
+      margin-left: 8px;
+      border-radius: 100%;
+    }
+  }
+
+  &__name {
+    h4 {
+      font-style: normal;
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 20px;
+      letter-spacing: 0.25px;
+      color: @primaryLabel;
+      margin: 0;
+    }
+
+    p {
+      font-style: normal;
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 20px;
+      letter-spacing: 0.25px;
+      color: @secondaryLabel;
+      margin: 0 !important;
+
+      span {
+        font-variant: small-caps;
+      }
+    }
+  }
+
+  &__action {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    flex-direction: row;
+
+    a {
+      display: inline-block;
+      font-size: 0;
+      margin-right: 10px;
+    }
+  }
+}
+</style>
diff --git a/packages/extension/src/ui/action/views/send-transaction/components/send-contacts-list.vue b/packages/extension/src/ui/action/views/send-transaction/components/send-contacts-list.vue
new file mode 100644
index 000000000..cd455bae0
--- /dev/null
+++ b/packages/extension/src/ui/action/views/send-transaction/components/send-contacts-list.vue
@@ -0,0 +1,50 @@
+<template>
+  <div class="send-contacts-list">
+    <h3>Recent</h3>
+    <send-address-item
+      v-for="(account, index) in accountsActive"
+      :key="index"
+      :account="account"
+    ></send-address-item>
+    <h3>All Contacts</h3>
+    <send-address-item
+      v-for="(account, index) in accountsInActive"
+      :key="index"
+      :account="account"
+    ></send-address-item>
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  name: "SendContactsList",
+};
+</script>
+
+<script setup lang="ts">
+import { defineProps } from "vue";
+import SendAddressItem from "./send-address-item.vue";
+import { accountsActive, accountsInActive } from "@action/types/mock";
+
+defineProps({});
+</script>
+
+<style lang="less">
+@import "~@action/styles/theme.less";
+
+.send-contacts-list {
+  padding: 0 32px 10px 32px;
+  box-sizing: border-box;
+
+  h3 {
+    font-style: normal;
+    font-weight: 500;
+    font-size: 12px;
+    line-height: 16px;
+    letter-spacing: 2px;
+    text-transform: uppercase;
+    color: @secondaryLabel;
+    margin: 24px 0 0 0;
+  }  
+}
+</style>
diff --git a/packages/extension/src/ui/action/views/send-transaction/components/send-token-item.vue b/packages/extension/src/ui/action/views/send-transaction/components/send-token-item.vue
new file mode 100644
index 000000000..13905fc7a
--- /dev/null
+++ b/packages/extension/src/ui/action/views/send-transaction/components/send-token-item.vue
@@ -0,0 +1,159 @@
+<template>
+  <div class="network-assets__token">
+    <div class="network-assets__token-info">
+      <img :src="token.icon" />
+
+      <div class="network-assets__token-info-name">
+        <h4>{{ token.name }}</h4>
+        <p>
+          {{ token.amount }} <span>{{ token.symbol }}</span>
+        </p>
+      </div>
+    </div>
+
+    <div class="network-assets__token-sparkline">
+      <p><sparkline-up />10.20%</p>
+      <img src="@/ui/action/assets/sparkline.png" />
+    </div>
+
+    <div class="network-assets__token-price">
+      <h4>{{ $filters.currencyFormat(amount, "USD") }}</h4>
+      <p>@{{ $filters.currencyFormat(token.price, "USD") }}</p>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  name: "NetworkAssetsItem",
+};
+</script>
+
+<script setup lang="ts">
+import { defineProps, PropType } from "vue";
+import { Token } from "@action/types/token";
+import SparklineUp from "@action/icons/asset/sparkline-up.vue";
+
+const props = defineProps({
+  token: {
+    type: Object as PropType<Token>,
+    default: () => ({}),
+  },
+});
+
+let amount = 0;
+
+if (props.token) {
+  amount = props.token.price * props.token.amount;
+}
+</script>
+
+<style lang="less">
+@import "~@action/styles/theme.less";
+
+.network-assets {
+  &__token {
+    height: 64px;
+    padding: 0 32px;
+    position: relative;
+    box-sizing: border-box;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-direction: row;
+
+    &-info {
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+      flex-direction: row;
+      width: 190px;
+
+      img {
+        max-width: 32px;
+        margin-right: 16px;
+        border-radius: 100%;
+        box-shadow: inset 0px 0px 1px rgba(0, 0, 0, 0.16);
+      }
+
+      &-name {
+        h4 {
+          font-style: normal;
+          font-weight: 400;
+          font-size: 16px;
+          line-height: 24px;
+          color: @primaryLabel;
+          margin: 0 0 1px 0;
+        }
+
+        p {
+          font-style: normal;
+          font-weight: 400;
+          font-size: 12px;
+          line-height: 16px;
+          letter-spacing: 0.5px;
+          color: @secondaryLabel;
+          margin: 0;
+          display: flex;
+          justify-content: flex-start;
+          align-items: center;
+          flex-direction: row;
+
+          span {
+            font-variant: small-caps;
+            margin-left: 4px;
+          }
+        }
+      }
+    }
+
+    &-sparkline {
+      text-align: center;
+
+      p {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-direction: row;
+        font-style: normal;
+        font-weight: 500;
+        font-size: 10px;
+        line-height: 14px;
+        text-align: right;
+        letter-spacing: 0.5px;
+        color: @primary;
+        margin: 0 0 2px 0;
+
+        svg {
+          margin-right: 2px;
+        }
+      }
+    }
+
+    &-price {
+      text-align: right;
+      width: 160px;
+
+      h4 {
+        font-style: normal;
+        font-weight: 500;
+        font-size: 16px;
+        line-height: 24px;
+        text-align: right;
+        color: @primaryLabel;
+        margin: 0 0 1px 0;
+      }
+
+      p {
+        font-style: normal;
+        font-weight: 400;
+        font-size: 12px;
+        line-height: 16px;
+        letter-spacing: 0.5px;
+        color: @secondaryLabel;
+        margin: 0;
+      }
+    }
+  }
+}
+</style>
diff --git a/packages/extension/src/ui/action/views/send-transaction/components/send-token-list.vue b/packages/extension/src/ui/action/views/send-transaction/components/send-token-list.vue
new file mode 100644
index 000000000..45311f23f
--- /dev/null
+++ b/packages/extension/src/ui/action/views/send-transaction/components/send-token-list.vue
@@ -0,0 +1,32 @@
+<template>
+  <div class="send-token-list">
+    <send-token-item
+      v-for="(token, index) in assets"
+      :key="index"
+      :token="token"
+    ></send-token-item>
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  name: "SendTokenList",
+};
+</script>
+
+<script setup lang="ts">
+import { defineProps } from "vue";
+import SendTokenItem from "./send-token-item.vue";
+import { assets } from "@action/types/mock";
+
+defineProps({});
+</script>
+
+<style lang="less">
+@import "~@action/styles/theme.less";
+
+.send-token-list {
+  padding: 0 0x 10px 0;
+  box-sizing: border-box;
+}
+</style>
diff --git a/packages/extension/src/ui/action/views/send-transaction/index.vue b/packages/extension/src/ui/action/views/send-transaction/index.vue
new file mode 100644
index 000000000..745dd9046
--- /dev/null
+++ b/packages/extension/src/ui/action/views/send-transaction/index.vue
@@ -0,0 +1,136 @@
+<template>
+  <div class="container">
+
+      <div v-if="!!selected" class="send-transaction">
+        <div class="send-transaction__header">
+          <h3>Send</h3>
+          <a class="send-transaction__close" @click="close">
+            <close-icon />
+          </a>
+        </div>
+
+        <send-address-input
+          :input="input"
+          :changeFocus="changeFocus"
+        ></send-address-input>
+
+        <div class="send-transaction__scroll-content">
+          <custom-scrollbar
+            class="send-transaction__scroll-area"
+            :settings="settings"
+            @ps-scroll-y="handleScroll"
+          >    
+            <send-contacts-list v-if="isFocus"></send-contacts-list>
+            <send-token-list v-if="!isFocus && address.length > 0"></send-token-list>
+          </custom-scrollbar>
+        </div>
+      </div>
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  name: "SendTransaction",
+};
+</script>
+
+<script setup lang="ts">
+import { defineProps, ref } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import CustomScrollbar from "@action/components/custom-scrollbar/index.vue";
+import CloseIcon from "@action/icons/common/close-icon.vue";
+import SendAddressInput from "./components/send-address-input.vue";
+import SendContactsList from "./components/send-contacts-list.vue";
+import SendTokenList from "./components/send-token-list.vue";
+
+const route = useRoute();
+const router = useRouter();
+
+let isFocus = ref(false);
+let address = ref("");
+
+const selected: number = +route.params.networkId;
+const settings = {
+  suppressScrollY: false,
+  suppressScrollX: true,
+  wheelPropagation: false,
+};
+
+defineProps({});
+
+const close = () => {
+  router.go(-1);
+};
+
+const input = (text: string) => {
+  address.value = text;
+};
+
+const changeFocus = (focus: boolean) => {
+  isFocus.value = focus;
+};
+</script>
+
+<style lang="less" scoped>
+@import "~@action/styles/theme.less";
+@import "~@action/styles/custom-scroll.less";
+
+.container {
+  width: 100%;
+  height: 600px;
+  background-color: @white;
+  box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.16);
+  margin: 0;
+  box-sizing: border-box;
+}
+
+.send-transaction {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+
+  &__header {
+    position: relative;
+    padding: 24px 72px 12px 32px;
+ 
+    h3 {
+      font-style: normal;
+      font-weight: 700;
+      font-size: 24px;
+      line-height: 32px;
+      color: @primaryLabel;
+      margin: 0;
+    }
+  }
+
+  &__close {
+    position: absolute;
+    top: 20px;
+    right: 24px;
+    border-radius: 8px;
+    cursor: pointer;
+
+    &:hover {
+      background: @black007;
+    }
+  }
+
+  &__scroll-area {
+    position: relative;
+    margin: auto;
+    width: 100%;
+    max-height: 468px;
+    margin: 0 0 8px 0;
+    padding: 0 !important;
+    box-sizing: border-box;
+
+    &.ps--active-y {
+      padding-right: 0;
+    }
+  }
+
+  &__scroll-content {
+    height: 476px;
+  }
+}
+</style>

From 83bf7f7db12d0784e9df5a54157169e26cf8cc9e Mon Sep 17 00:00:00 2001
From: Mihail Polev <mpolev364@gmail.com>
Date: Tue, 12 Apr 2022 10:27:29 +0700
Subject: [PATCH 2/5] =?UTF-8?q?devop:=20=F0=9F=94=A7=20Send=20Transaction?=
 =?UTF-8?q?=20develop?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../action/components/list-search/index.vue   |  75 ++++++++
 .../extension/src/ui/action/types/mock.ts     |   8 +
 .../components/send-address-input.vue         | 132 ++++++++++----
 .../components/send-address-item.vue          |  16 +-
 .../components/send-contacts-list.vue         | 127 ++++++++++++--
 .../components/send-input-amount.vue          |  87 ++++++++++
 .../components/send-token-item.vue            | 161 ++++++++----------
 .../components/send-token-list.vue            | 112 +++++++++++-
 .../components/send-token-select.vue          | 122 +++++++++++++
 .../action/views/send-transaction/index.vue   | 114 ++++++++-----
 10 files changed, 757 insertions(+), 197 deletions(-)
 create mode 100644 packages/extension/src/ui/action/components/list-search/index.vue
 create mode 100644 packages/extension/src/ui/action/views/send-transaction/components/send-input-amount.vue
 create mode 100644 packages/extension/src/ui/action/views/send-transaction/components/send-token-select.vue

diff --git a/packages/extension/src/ui/action/components/list-search/index.vue b/packages/extension/src/ui/action/components/list-search/index.vue
new file mode 100644
index 000000000..2e88422d7
--- /dev/null
+++ b/packages/extension/src/ui/action/components/list-search/index.vue
@@ -0,0 +1,75 @@
+<template>
+  <div class="list-search">
+    <search-icon></search-icon>
+    <input
+      type="text"
+      :placeholder="placeholder"
+      @input="changeValue($event.target.value)"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  name: "ListSearch",
+};
+</script>
+
+<script setup lang="ts">
+import { defineProps } from "vue";
+import SearchIcon from "@action/icons/common/search.vue";
+
+const props = defineProps({
+  input: {
+    type: Function,
+    default: () => {
+      return null;
+    },
+  },
+  placeholder: {
+    type: String,
+    default: () => {
+      return "";
+    },
+  },
+});
+
+const changeValue = (text: string) => {
+  props.input(text);
+};
+</script>
+
+<style lang="less" scoped>
+@import "~@action/styles/theme.less";
+
+.list-search {
+  width: 100%;
+  height: 56px;
+  background: @primaryBg;
+  position: relative;
+  box-sizing: border-box;
+  padding: 17px 20px 17px 56px;
+  border-bottom: 1px solid @gray02;
+  position: absolute;
+  left: 0;
+  top: 0;
+
+  svg {
+    position: absolute;
+    left: 16px;
+    top: 16px;
+  }
+
+  input {
+    width: 100%;
+    font-style: normal;
+    font-weight: normal;
+    font-size: 14px;
+    line-height: 20px;
+    letter-spacing: 0.25px;
+    color: @primaryLabel;
+    border: 0 none;
+    outline: none;
+  }
+}
+</style>
diff --git a/packages/extension/src/ui/action/types/mock.ts b/packages/extension/src/ui/action/types/mock.ts
index bef48ea97..1229d32ab 100644
--- a/packages/extension/src/ui/action/types/mock.ts
+++ b/packages/extension/src/ui/action/types/mock.ts
@@ -554,3 +554,11 @@ export const nfts: NFTAuthor[] = [
     ],
   },
 ];
+
+export const ethereum: Token = {
+  name: "Ethereum",
+  symbol: "eth",
+  icon: "https://mpolev.ru/enkrypt/eth.png",
+  amount: 0.5,
+  price: 2500,
+};
\ No newline at end of file
diff --git a/packages/extension/src/ui/action/views/send-transaction/components/send-address-input.vue b/packages/extension/src/ui/action/views/send-transaction/components/send-address-input.vue
index c677cb2fb..b197a7db0 100644
--- a/packages/extension/src/ui/action/views/send-transaction/components/send-address-input.vue
+++ b/packages/extension/src/ui/action/views/send-transaction/components/send-address-input.vue
@@ -1,13 +1,23 @@
 <template>
-  <div class="send-address-input">
-    <p>То:</p>
-    <input
-      type="text"
-      placeholder="0x… address or ENS name"
-      @input="changeValue($event.target.value)"
-      @focus="changeFocus"
-      @blur="changeFocus"
-    />
+  <div class="send-address-input" :class="{ focus: isFocus }">
+    <div class="send-address-input__avatar">
+      <img v-if="value.length == 42" :src="getImgUrl(value)" alt="" />
+    </div>
+    <div class="send-address-input__address">
+      <p>То:</p>
+      <input
+        type="text"
+        placeholder="0x… address or ENS name"
+        @input="changeValue($event.target.value)"
+        @focus="changeFocus"
+        @blur="changeFocus"
+        :value="isFocus ? value : $filters.replaceWithEllipsis(value, 6, 6)"
+      />
+    </div>
+
+    <a class="send-address-input__arrow" @click="open">
+      <switch-arrow />
+    </a>
   </div>
 </template>
 
@@ -19,8 +29,10 @@ export default {
 
 <script setup lang="ts">
 import { defineProps, ref } from "vue";
+import SwitchArrow from "@action/icons/header/switch_arrow.vue";
 
 let isFocus = ref(false);
+let isOpen = ref(false);
 
 const props = defineProps({
   input: {
@@ -29,12 +41,18 @@ const props = defineProps({
       return null;
     },
   },
-  changeFocus: {
+  toggleSelect: {
     type: Function,
     default: () => {
       return null;
     },
   },
+  value: {
+    type: String,
+    default: () => {
+      return "";
+    },
+  },
 });
 
 const changeValue = (text: string) => {
@@ -43,7 +61,15 @@ const changeValue = (text: string) => {
 
 const changeFocus = () => {
   isFocus.value = !isFocus.value;
-  props.changeFocus(isFocus.value);
+};
+
+const open = () => {
+  isOpen.value = !isOpen.value;
+  props.toggleSelect(isOpen)
+};
+
+const getImgUrl = (address: string) => {
+  return "https://mewcard.mewapi.io/?address=" + address;
 };
 </script>
 
@@ -51,33 +77,73 @@ const changeFocus = () => {
 @import "~@action/styles/theme.less";
 
 .send-address-input {
-  height: 56px;
+  height: 64px;
   background: #FFFFFF;
-  box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1); 
-  padding: 4px 32px 10px 32px;
+  margin: 12px 32px 8px 32px;
   box-sizing: border-box;
+  border: 1px solid @gray02;
+  box-sizing: border-box;
+  border-radius: 10px;
+  width: calc(~"100% - 64px");
+  padding: 16px;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  flex-direction: row;
+  position: relative;
+
+  &.focus {
+    border: 1px solid @primary;
+  }
+
+  &__avatar {
+    background: @buttonBg;
+    box-shadow: inset 0px 0px 1px rgba(0, 0, 0, 0.16);
+    width: 32px;
+    height: 32px;
+    border-radius: 100%;
+    overflow: hidden;
+    margin-right: 12px;
+
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  &__address {
+    p {
+      font-style: normal;
+      font-weight: 400;
+      font-size: 12px;
+      line-height: 16px;
+      letter-spacing: 0.5px;
+      color: @secondaryLabel;
+      margin: 0;
+    }
 
-  p {
-    font-style: normal;
-    font-weight: 400;
-    font-size: 12px;
-    line-height: 16px;
-    letter-spacing: 0.5px;
-    color: @secondaryLabel;
-    margin: 0 0 6px 0;
+    input {
+      width: 290px;
+      height: 24px;
+      font-style: normal;
+      font-weight: 400;
+      font-size: 16px;
+      line-height: 24px;
+      letter-spacing: 0.25px;
+      color: @primaryLabel;
+      border: 0 none;
+      outline: none;
+      padding: 0;
+    }
   }
 
-  input {
-    width: 100%;
-    height: 20px;
-    font-style: normal;
-    font-weight: 400;
-    font-size: 14px;
-    line-height: 20px;
-    letter-spacing: 0.25px;
-    color: @primaryLabel;
-    border: 0 none;
-    outline: none;
+  &__arrow {
+    position: absolute;
+    font-size: 0;
+    cursor: pointer;
+    padding: 4px;
+    right: 8px;
+    top: 16px;
   }
 }
 </style>
diff --git a/packages/extension/src/ui/action/views/send-transaction/components/send-address-item.vue b/packages/extension/src/ui/action/views/send-transaction/components/send-address-item.vue
index 6aee2bd6c..22aef34f4 100644
--- a/packages/extension/src/ui/action/views/send-transaction/components/send-address-item.vue
+++ b/packages/extension/src/ui/action/views/send-transaction/components/send-address-item.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="send-address-item">
+  <a @click="select" class="send-address-item">
     <div class="send-address-item__info">
       <img :src="getImgUrl(account.address)" alt="" />
 
@@ -8,7 +8,7 @@
         <p>{{ $filters.replaceWithEllipsis(account.address, 6, 4) }}</p>
       </div>
     </div>
-  </div>
+  </a>
 </template>
 
 <script lang="ts">
@@ -28,11 +28,21 @@ const props = defineProps({
       return {};
     },
   },
+  selectAccount: {
+    type: Function,
+    default: () => {
+      return null;
+    },
+  },
 });
 
 const getImgUrl = (address: string) => {
   return "https://mewcard.mewapi.io/?address=" + address;
 };
+
+const select = () => {
+  props.selectAccount(props.account)
+}
 </script>
 
 <style lang="less">
@@ -46,6 +56,8 @@ const getImgUrl = (address: string) => {
   flex-direction: row;
   width: 100%;
   height: 56px;
+  cursor: pointer;
+  text-decoration: none;
 
   &__number {
     font-style: normal;
diff --git a/packages/extension/src/ui/action/views/send-transaction/components/send-contacts-list.vue b/packages/extension/src/ui/action/views/send-transaction/components/send-contacts-list.vue
index cd455bae0..9c19ab3dd 100644
--- a/packages/extension/src/ui/action/views/send-transaction/components/send-contacts-list.vue
+++ b/packages/extension/src/ui/action/views/send-transaction/components/send-contacts-list.vue
@@ -1,17 +1,25 @@
 <template>
-  <div class="send-contacts-list">
-    <h3>Recent</h3>
-    <send-address-item
-      v-for="(account, index) in accountsActive"
-      :key="index"
-      :account="account"
-    ></send-address-item>
-    <h3>All Contacts</h3>
-    <send-address-item
-      v-for="(account, index) in accountsInActive"
-      :key="index"
-      :account="account"
-    ></send-address-item>
+  <div class="send-contacts-list" :class="{ show: showAccounts }">
+    <div class="send-contacts-list__overlay" @click="close"></div>
+    <div class="send-contacts-list__wrap" :class="{ show: showAccounts }">
+      <list-search :input="search" placeholder="Search contact" />
+      <custom-scrollbar class="send-contacts-list__scroll-area" :settings="settings">
+        <h3>Recent</h3>
+        <send-address-item
+          v-for="(account, index) in accountsActive"
+          :key="index"
+          :account="account"
+          :selectAccount="selectAccount"
+        ></send-address-item>
+        <h3>All Contacts</h3>
+        <send-address-item
+          v-for="(account, index) in accountsInActive"
+          :key="index"
+          :account="account"
+          :selectAccount="selectAccount"
+        ></send-address-item>
+      </custom-scrollbar>  
+    </div>
   </div>
 </template>
 
@@ -25,16 +33,103 @@ export default {
 import { defineProps } from "vue";
 import SendAddressItem from "./send-address-item.vue";
 import { accountsActive, accountsInActive } from "@action/types/mock";
+import CustomScrollbar from "@action/components/custom-scrollbar/index.vue";
+import ListSearch from "@action/components/list-search/index.vue";
+import { Account } from "@action/types/account";
 
-defineProps({});
+const settings = {
+  suppressScrollY: false,
+  suppressScrollX: true,
+  wheelPropagation: false,
+};
+
+const props = defineProps({
+  showAccounts: Boolean,
+  close: {
+    type: Function,
+    default: () => {
+      return null;
+    },
+  },
+  selectAccount: {
+    type: Function,
+    default: () => {
+      return null;
+    },
+  },
+});
+
+const close = () => {
+  props.close(false);
+};
+
+const search = (text: string) => {
+  console.log(text);
+};
+
+const selectAccount = (account: Account) => {
+  props.selectAccount(account);
+};
 </script>
 
 <style lang="less">
 @import "~@action/styles/theme.less";
 
 .send-contacts-list {
-  padding: 0 32px 10px 32px;
-  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 101;
+  display: none;
+
+  &.show {
+    display: block;
+  }
+
+  &__overlay {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    left: 0;
+    top: 0;
+    z-index: 102;
+  }
+
+  &__wrap {
+    position: absolute;
+    width: 396px;
+    height: auto;
+    max-height: 530px;
+    left: 32px;
+    top: 146px;
+    background: #ffffff;
+    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.039),
+      0px 7px 24px rgba(0, 0, 0, 0.19);
+    border-radius: 12px;
+    z-index: 103;
+    overflow: hidden;
+    padding-top: 56px;
+    padding: 56px 0 0 16px;
+    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;
+    }
+  }
+
+  &__scroll-area {
+    position: relative;
+    margin: auto;
+    width: 100%;
+    max-height: 380px;
+  }
 
   h3 {
     font-style: normal;
diff --git a/packages/extension/src/ui/action/views/send-transaction/components/send-input-amount.vue b/packages/extension/src/ui/action/views/send-transaction/components/send-input-amount.vue
new file mode 100644
index 000000000..b9f333a0b
--- /dev/null
+++ b/packages/extension/src/ui/action/views/send-transaction/components/send-input-amount.vue
@@ -0,0 +1,87 @@
+<template>
+  <div class="send-input-amount" :class="{ focus: isFocus }">
+    <input
+      type="number"
+      placeholder="0"
+      @input="changeValue($event.target.value)"
+      @focus="changeFocus"
+      @blur="changeFocus"
+      :value="value"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  name: "SendInputAmount",
+};
+</script>
+
+<script setup lang="ts">
+import { defineProps, ref } from "vue";
+
+let isFocus = ref(false);
+
+const props = defineProps({
+  input: {
+    type: Function,
+    default: () => {
+      return null;
+    },
+  },
+  value: {
+    type: Number,
+    default: () => {
+      return 0;
+    },
+  },
+});
+
+const changeValue = (text: string) => {
+  props.input(text);
+};
+
+const changeFocus = () => {
+  isFocus.value = !isFocus.value;
+};
+</script>
+
+<style lang="less">
+@import "~@action/styles/theme.less";
+
+.send-input-amount {
+  height: 100px;
+  background: #FFFFFF;
+  margin: 0 32px 8px 32px;
+  box-sizing: border-box;
+  border: 1px solid @gray02;
+  box-sizing: border-box;
+  border-radius: 10px;
+  width: calc(~"100% - 64px");
+  padding: 16px;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  flex-direction: row;
+  position: relative;
+
+  &.focus {
+    border: 1px solid @primary;
+  }
+
+  input {
+    width: 290px;
+    height: 24px;
+    font-style: normal;
+    font-weight: 400;
+    font-size: 34px;
+    line-height: 40px;
+    text-align: center;
+    letter-spacing: 0.25px;
+    color: @primaryLabel;
+    border: 0 none;
+    outline: none;
+    padding: 0;
+  }
+}
+</style>
diff --git a/packages/extension/src/ui/action/views/send-transaction/components/send-token-item.vue b/packages/extension/src/ui/action/views/send-transaction/components/send-token-item.vue
index 13905fc7a..970e78817 100644
--- a/packages/extension/src/ui/action/views/send-transaction/components/send-token-item.vue
+++ b/packages/extension/src/ui/action/views/send-transaction/components/send-token-item.vue
@@ -1,9 +1,9 @@
 <template>
-  <div class="network-assets__token">
-    <div class="network-assets__token-info">
+  <a @click="select" class="send-token-item">
+    <div class="send-token-item__info">
       <img :src="token.icon" />
 
-      <div class="network-assets__token-info-name">
+      <div class="send-token-item__info-name">
         <h4>{{ token.name }}</h4>
         <p>
           {{ token.amount }} <span>{{ token.symbol }}</span>
@@ -11,16 +11,11 @@
       </div>
     </div>
 
-    <div class="network-assets__token-sparkline">
-      <p><sparkline-up />10.20%</p>
-      <img src="@/ui/action/assets/sparkline.png" />
-    </div>
-
-    <div class="network-assets__token-price">
+    <div class="send-token-item__price">
       <h4>{{ $filters.currencyFormat(amount, "USD") }}</h4>
       <p>@{{ $filters.currencyFormat(token.price, "USD") }}</p>
     </div>
-  </div>
+  </a>
 </template>
 
 <script lang="ts">
@@ -32,13 +27,18 @@ export default {
 <script setup lang="ts">
 import { defineProps, PropType } from "vue";
 import { Token } from "@action/types/token";
-import SparklineUp from "@action/icons/asset/sparkline-up.vue";
 
 const props = defineProps({
   token: {
     type: Object as PropType<Token>,
     default: () => ({}),
   },
+  selectToken: {
+    type: Function,
+    default: () => {
+      return null;
+    },
+  },
 });
 
 let amount = 0;
@@ -46,100 +46,47 @@ let amount = 0;
 if (props.token) {
   amount = props.token.price * props.token.amount;
 }
+
+const select = () => {
+  props.selectToken(props.token)
+}
 </script>
 
 <style lang="less">
 @import "~@action/styles/theme.less";
 
-.network-assets {
-  &__token {
-    height: 64px;
-    padding: 0 32px;
-    position: relative;
-    box-sizing: border-box;
+.send-token-item {
+  display: block;
+  text-decoration: none;
+  cursor: pointer;
+  height: 64px;
+  position: relative;
+  box-sizing: border-box;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-direction: row;
+
+  &__info {
     display: flex;
-    justify-content: space-between;
+    justify-content: flex-start;
     align-items: center;
     flex-direction: row;
+    width: 190px;
 
-    &-info {
-      display: flex;
-      justify-content: flex-start;
-      align-items: center;
-      flex-direction: row;
-      width: 190px;
-
-      img {
-        max-width: 32px;
-        margin-right: 16px;
-        border-radius: 100%;
-        box-shadow: inset 0px 0px 1px rgba(0, 0, 0, 0.16);
-      }
-
-      &-name {
-        h4 {
-          font-style: normal;
-          font-weight: 400;
-          font-size: 16px;
-          line-height: 24px;
-          color: @primaryLabel;
-          margin: 0 0 1px 0;
-        }
-
-        p {
-          font-style: normal;
-          font-weight: 400;
-          font-size: 12px;
-          line-height: 16px;
-          letter-spacing: 0.5px;
-          color: @secondaryLabel;
-          margin: 0;
-          display: flex;
-          justify-content: flex-start;
-          align-items: center;
-          flex-direction: row;
-
-          span {
-            font-variant: small-caps;
-            margin-left: 4px;
-          }
-        }
-      }
-    }
-
-    &-sparkline {
-      text-align: center;
-
-      p {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        flex-direction: row;
-        font-style: normal;
-        font-weight: 500;
-        font-size: 10px;
-        line-height: 14px;
-        text-align: right;
-        letter-spacing: 0.5px;
-        color: @primary;
-        margin: 0 0 2px 0;
-
-        svg {
-          margin-right: 2px;
-        }
-      }
+    img {
+      max-width: 32px;
+      margin-right: 16px;
+      border-radius: 100%;
+      box-shadow: inset 0px 0px 1px rgba(0, 0, 0, 0.16);
     }
 
-    &-price {
-      text-align: right;
-      width: 160px;
-
+    &-name {
       h4 {
         font-style: normal;
-        font-weight: 500;
+        font-weight: 400;
         font-size: 16px;
         line-height: 24px;
-        text-align: right;
         color: @primaryLabel;
         margin: 0 0 1px 0;
       }
@@ -152,8 +99,42 @@ if (props.token) {
         letter-spacing: 0.5px;
         color: @secondaryLabel;
         margin: 0;
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        flex-direction: row;
+
+        span {
+          font-variant: small-caps;
+          margin-left: 4px;
+        }
       }
     }
   }
+
+  &__price {
+    text-align: right;
+    width: 160px;
+
+    h4 {
+      font-style: normal;
+      font-weight: 500;
+      font-size: 16px;
+      line-height: 24px;
+      text-align: right;
+      color: @primaryLabel;
+      margin: 0 0 1px 0;
+    }
+
+    p {
+      font-style: normal;
+      font-weight: 400;
+      font-size: 12px;
+      line-height: 16px;
+      letter-spacing: 0.5px;
+      color: @secondaryLabel;
+      margin: 0;
+    }
+  }
 }
 </style>
diff --git a/packages/extension/src/ui/action/views/send-transaction/components/send-token-list.vue b/packages/extension/src/ui/action/views/send-transaction/components/send-token-list.vue
index 45311f23f..5eee223d9 100644
--- a/packages/extension/src/ui/action/views/send-transaction/components/send-token-list.vue
+++ b/packages/extension/src/ui/action/views/send-transaction/components/send-token-list.vue
@@ -1,10 +1,17 @@
 <template>
-  <div class="send-token-list">
-    <send-token-item
-      v-for="(token, index) in assets"
-      :key="index"
-      :token="token"
-    ></send-token-item>
+  <div class="send-token-list" :class="{ show: showTokens }">
+    <div class="send-token-list__overlay" @click="close"></div>
+    <div class="send-token-list__wrap" :class="{ show: showTokens }">
+      <list-search :input="search" placeholder="Search asset" />
+      <custom-scrollbar class="send-token-list__scroll-area" :settings="settings">
+        <send-token-item
+          v-for="(token, index) in assets"
+          :key="index"
+          :token="token"
+          :selectToken="selectToken"
+        ></send-token-item>
+      </custom-scrollbar>
+    </div>    
   </div>
 </template>
 
@@ -17,16 +24,103 @@ export default {
 <script setup lang="ts">
 import { defineProps } from "vue";
 import SendTokenItem from "./send-token-item.vue";
+import CustomScrollbar from "@action/components/custom-scrollbar/index.vue";
+import ListSearch from "@action/components/list-search/index.vue";
 import { assets } from "@action/types/mock";
+import { Token } from "@action/types/token";
 
-defineProps({});
+const settings = {
+  suppressScrollY: false,
+  suppressScrollX: true,
+  wheelPropagation: false,
+};
+
+const props = defineProps({
+  showTokens: Boolean,
+  close: {
+    type: Function,
+    default: () => {
+      return null;
+    },
+  },
+  selectToken: {
+    type: Function,
+    default: () => {
+      return null;
+    },
+  },
+});
+
+const close = () => {
+  props.close(false);
+};
+
+const search = (text: string) => {
+  console.log(text);
+};
+
+const selectToken = (token: Token) => {
+  props.selectToken(token);
+};
 </script>
 
 <style lang="less">
 @import "~@action/styles/theme.less";
 
 .send-token-list {
-  padding: 0 0x 10px 0;
-  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 101;
+  display: none;
+
+  &.show {
+    display: block;
+  }
+
+  &__overlay {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    left: 0;
+    top: 0;
+    z-index: 102;
+  }
+
+  &__wrap {
+    position: absolute;
+    width: 396px;
+    height: auto;
+    max-height: 530px;
+    left: 32px;
+    top: 218px;
+    background: #ffffff;
+    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.039),
+      0px 7px 24px rgba(0, 0, 0, 0.19);
+    border-radius: 12px;
+    z-index: 103;
+    overflow: hidden;
+    padding-top: 56px;
+    padding: 56px 0 0 16px;
+    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;
+    }
+  }
+
+  &__scroll-area {
+    position: relative;
+    margin: auto;
+    width: 100%;
+    max-height: 308px;
+  }
 }
 </style>
diff --git a/packages/extension/src/ui/action/views/send-transaction/components/send-token-select.vue b/packages/extension/src/ui/action/views/send-transaction/components/send-token-select.vue
new file mode 100644
index 000000000..e08932bf8
--- /dev/null
+++ b/packages/extension/src/ui/action/views/send-transaction/components/send-token-select.vue
@@ -0,0 +1,122 @@
+<template>
+  <a @click="open" class="send-token-select">
+    <div class="send-token-select__image">
+      <img :src="token.icon" alt="" />
+    </div>
+    <div class="send-token-select__info">
+      <h5>{{ token.name }}</h5>  
+      <p>{{ token.amount }} <span>{{ token.symbol }}</span></p>
+    </div>
+
+    <div class="send-token-select__arrow">
+      <switch-arrow />
+    </div>
+  </a>
+</template>
+
+<script lang="ts">
+export default {
+  name: "SendTokenSelect",
+};
+</script>
+
+<script setup lang="ts">
+import { defineProps, ref, PropType } from "vue";
+import SwitchArrow from "@action/icons/header/switch_arrow.vue";
+import { Token } from "@action/types/token";
+
+let isOpen = ref(false);
+
+const props = defineProps({
+  toggleSelect: {
+    type: Function,
+    default: () => {
+      return null;
+    },
+  },
+  token: {
+    type: Object as PropType<Token>,
+    default: () => {
+      return {};
+    },
+  },
+});
+
+const open = () => {
+  isOpen.value = !isOpen.value;
+  props.toggleSelect(isOpen)
+};
+</script>
+
+<style lang="less">
+@import "~@action/styles/theme.less";
+
+.send-token-select {
+  height: 64px;
+  background: #FFFFFF;
+  margin: 0 32px 8px 32px;
+  box-sizing: border-box;
+  border: 1px solid @gray02;
+  box-sizing: border-box;
+  border-radius: 10px;
+  width: calc(~"100% - 64px");
+  padding: 16px;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  flex-direction: row;
+  position: relative;
+  cursor: pointer;
+  text-decoration: none;
+
+  &__image {
+    background: @buttonBg;
+    box-shadow: inset 0px 0px 1px rgba(0, 0, 0, 0.16);
+    width: 32px;
+    height: 32px;
+    border-radius: 100%;
+    overflow: hidden;
+    margin-right: 12px;
+
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  &__info {
+    h5 {
+      font-style: normal;
+      font-weight: 400;
+      font-size: 16px;
+      line-height: 24px;
+      color: @primaryLabel;
+      width: 290px;
+      margin: 0 0 1px 0;
+    }  
+
+    p {
+      font-style: normal;
+      font-weight: 400;
+      font-size: 12px;
+      line-height: 16px;
+      letter-spacing: 0.5px;
+      color: @secondaryLabel;
+      margin: 0;
+      width: 290px;
+
+      span {
+        font-variant: small-caps;
+      }
+    }
+  }
+
+  &__arrow {
+    position: absolute;
+    font-size: 0;
+    padding: 4px;
+    right: 8px;
+    top: 16px;
+  }
+}
+</style>
diff --git a/packages/extension/src/ui/action/views/send-transaction/index.vue b/packages/extension/src/ui/action/views/send-transaction/index.vue
index 745dd9046..63c8e52a7 100644
--- a/packages/extension/src/ui/action/views/send-transaction/index.vue
+++ b/packages/extension/src/ui/action/views/send-transaction/index.vue
@@ -1,30 +1,42 @@
 <template>
   <div class="container">
-
-      <div v-if="!!selected" class="send-transaction">
-        <div class="send-transaction__header">
-          <h3>Send</h3>
-          <a class="send-transaction__close" @click="close">
-            <close-icon />
-          </a>
-        </div>
-
-        <send-address-input
-          :input="input"
-          :changeFocus="changeFocus"
-        ></send-address-input>
-
-        <div class="send-transaction__scroll-content">
-          <custom-scrollbar
-            class="send-transaction__scroll-area"
-            :settings="settings"
-            @ps-scroll-y="handleScroll"
-          >    
-            <send-contacts-list v-if="isFocus"></send-contacts-list>
-            <send-token-list v-if="!isFocus && address.length > 0"></send-token-list>
-          </custom-scrollbar>
-        </div>
+    <div v-if="!!selected" class="send-transaction">
+      <div class="send-transaction__header">
+        <h3>Send</h3>
+        <a class="send-transaction__close" @click="close">
+          <close-icon />
+        </a>
       </div>
+
+      <send-address-input
+        :input="inputAddress"
+        :toggleSelect="toggleSelectContact"
+        :value="address"
+      ></send-address-input>
+
+      <send-contacts-list
+        :showAccounts="isOpenSelectContact"
+        :close="toggleSelectContact"
+        :selectAccount="selectAccount"
+      ></send-contacts-list>
+
+      <send-token-select
+        :token="selectedToken"
+        :toggleSelect="toggleSelectToken"
+      ></send-token-select>
+
+      <send-token-list
+        :showTokens="isOpenSelectToken"
+        :close="toggleSelectToken"
+        :selectToken="selectToken"
+      >
+      </send-token-list>
+
+      <send-input-amount
+        :input="inputAmount"
+        :value="amount"
+      ></send-input-amount>
+    </div>
   </div>
 </template>
 
@@ -37,17 +49,24 @@ export default {
 <script setup lang="ts">
 import { defineProps, ref } from "vue";
 import { useRoute, useRouter } from "vue-router";
-import CustomScrollbar from "@action/components/custom-scrollbar/index.vue";
 import CloseIcon from "@action/icons/common/close-icon.vue";
 import SendAddressInput from "./components/send-address-input.vue";
 import SendContactsList from "./components/send-contacts-list.vue";
+import SendTokenSelect from "./components/send-token-select.vue";
 import SendTokenList from "./components/send-token-list.vue";
+import SendInputAmount from "./components/send-input-amount.vue";
+import { Account } from "@action/types/account";
+import { Token } from "@action/types/token";
+import { ethereum } from "@action/types/mock";
 
 const route = useRoute();
 const router = useRouter();
 
-let isFocus = ref(false);
+let isOpenSelectContact = ref(false);
 let address = ref("");
+let isOpenSelectToken = ref(false);
+let selectedToken = ref(ethereum);
+let amount = ref(0);
 
 const selected: number = +route.params.networkId;
 const settings = {
@@ -62,12 +81,30 @@ const close = () => {
   router.go(-1);
 };
 
-const input = (text: string) => {
+const inputAddress = (text: string) => {
   address.value = text;
 };
 
-const changeFocus = (focus: boolean) => {
-  isFocus.value = focus;
+const toggleSelectContact = (open: boolean) => {
+  isOpenSelectContact.value = open;
+};
+
+const toggleSelectToken = (open: boolean) => {
+  isOpenSelectToken.value = open;
+};
+
+const selectAccount = (account: Account) => {
+  address.value = account.address;
+  isOpenSelectContact.value = false;
+};
+
+const selectToken = (token: Token) => {
+  selectedToken.value = token;
+  isOpenSelectToken.value = false;
+};
+
+const inputAmount = (number: number) => {
+  amount.value = number;
 };
 </script>
 
@@ -82,6 +119,7 @@ const changeFocus = (focus: boolean) => {
   box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.16);
   margin: 0;
   box-sizing: border-box;
+  position: relative;
 }
 
 .send-transaction {
@@ -114,23 +152,5 @@ const changeFocus = (focus: boolean) => {
       background: @black007;
     }
   }
-
-  &__scroll-area {
-    position: relative;
-    margin: auto;
-    width: 100%;
-    max-height: 468px;
-    margin: 0 0 8px 0;
-    padding: 0 !important;
-    box-sizing: border-box;
-
-    &.ps--active-y {
-      padding-right: 0;
-    }
-  }
-
-  &__scroll-content {
-    height: 476px;
-  }
 }
 </style>

From aff219c3e64cf89a8b1a96ddbb6c7b5b186675f3 Mon Sep 17 00:00:00 2001
From: Mihail Polev <mpolev364@gmail.com>
Date: Wed, 13 Apr 2022 22:29:36 +0700
Subject: [PATCH 3/5] =?UTF-8?q?devop:=20=F0=9F=94=A7=20Send=20Transaction?=
 =?UTF-8?q?=20develop?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/extension/src/ui/action/App.vue      |  19 +-
 .../app-menu/components/app-menu-item.vue     |   3 +-
 .../ui/action/components/app-menu/index.vue   |  15 +-
 .../action/components/base-button/index.vue   |  13 +-
 .../action/components/network-menu/index.vue  |   8 +-
 .../src/ui/action/icons/fee/economy-icon.vue  |  22 ++
 .../src/ui/action/icons/fee/higher-icon.vue   |  22 ++
 .../src/ui/action/icons/fee/highest-icon.vue  |  22 ++
 .../ui/action/icons/fee/recomended-icon.vue   |  22 ++
 .../src/ui/action/icons/fee/time-icon.vue     |  22 ++
 .../src/ui/action/icons/send/alert-icon.vue   |  23 ++
 .../action/icons/send/switch-arrow-icon.vue   |  23 ++
 .../extension/src/ui/action/router/index.ts   |  18 +-
 .../extension/src/ui/action/styles/color.less |   2 +
 packages/extension/src/ui/action/types/fee.ts |  23 ++
 .../extension/src/ui/action/types/mock.ts     |  61 ++++++
 .../components/network-activity-action.vue    |   4 +-
 .../components/send-alert.vue                 |  57 +++++
 .../components/send-fee-select.vue            | 138 ++++++++++++
 .../components/send-input-amount.vue          |  79 ++++++-
 .../action/views/send-transaction/index.vue   |  91 +++++++-
 .../components/transaction-fee-item.vue       | 127 +++++++++++
 .../ui/action/views/transaction-fee/index.vue | 197 ++++++++++++++++++
 .../components/verify-transaction-network.vue |  73 +++++++
 .../action/views/verify-transaction/index.vue | 159 ++++++++++++++
 25 files changed, 1211 insertions(+), 32 deletions(-)
 create mode 100644 packages/extension/src/ui/action/icons/fee/economy-icon.vue
 create mode 100644 packages/extension/src/ui/action/icons/fee/higher-icon.vue
 create mode 100644 packages/extension/src/ui/action/icons/fee/highest-icon.vue
 create mode 100644 packages/extension/src/ui/action/icons/fee/recomended-icon.vue
 create mode 100644 packages/extension/src/ui/action/icons/fee/time-icon.vue
 create mode 100644 packages/extension/src/ui/action/icons/send/alert-icon.vue
 create mode 100644 packages/extension/src/ui/action/icons/send/switch-arrow-icon.vue
 create mode 100644 packages/extension/src/ui/action/types/fee.ts
 create mode 100644 packages/extension/src/ui/action/views/send-transaction/components/send-alert.vue
 create mode 100644 packages/extension/src/ui/action/views/send-transaction/components/send-fee-select.vue
 create mode 100644 packages/extension/src/ui/action/views/transaction-fee/components/transaction-fee-item.vue
 create mode 100644 packages/extension/src/ui/action/views/transaction-fee/index.vue
 create mode 100644 packages/extension/src/ui/action/views/verify-transaction/components/verify-transaction-network.vue
 create mode 100644 packages/extension/src/ui/action/views/verify-transaction/index.vue

diff --git a/packages/extension/src/ui/action/App.vue b/packages/extension/src/ui/action/App.vue
index e2475b69b..4603ec21b 100644
--- a/packages/extension/src/ui/action/App.vue
+++ b/packages/extension/src/ui/action/App.vue
@@ -8,7 +8,7 @@
         :selected="(route.params.id as string)"
         :set-network="setNetwork"
       />
-      <br /><br />
+      <br />
       <a href="javascript:void(0);" @click="openCreate()">
         to Cretate / Restore
       </a>
@@ -36,6 +36,7 @@
 
     <div class="app__content">
       <network-header
+        v-show="showNetworkMenu()"
         :selected="(route.params.id as string)"
         :account="account"
       />
@@ -48,7 +49,10 @@
       <router-view name="modal"></router-view>
       <router-view name="accounts"></router-view>
 
-      <network-menu :selected="(route.params.id as string)" />
+      <network-menu
+        v-show="showNetworkMenu()"
+        :selected="(route.params.id as string)"
+      />
     </div>
   </div>
 </template>
@@ -111,6 +115,17 @@ const openCreate = () => {
       console.log(error);
     });
 };
+
+const showNetworkMenu = () => {
+  const selected = route.params.id as string;
+  return (
+    !!selected &&
+    (route.name == "activity" ||
+      route.name == "assets" ||
+      route.name == "nfts" ||
+      route.name == "dapps")
+  );
+};
 </script>
 
 <style lang="less">
diff --git a/packages/extension/src/ui/action/components/app-menu/components/app-menu-item.vue b/packages/extension/src/ui/action/components/app-menu/components/app-menu-item.vue
index aeeb287fa..6db00ca10 100644
--- a/packages/extension/src/ui/action/components/app-menu/components/app-menu-item.vue
+++ b/packages/extension/src/ui/action/components/app-menu/components/app-menu-item.vue
@@ -53,7 +53,8 @@ defineProps({
     }
 
     img {
-      max-width: 24px;
+      width: 24px;
+      height: 24px;
       margin: 0 8px;
     }
 
diff --git a/packages/extension/src/ui/action/components/app-menu/index.vue b/packages/extension/src/ui/action/components/app-menu/index.vue
index 7cbfb6eab..e4bc16ef7 100644
--- a/packages/extension/src/ui/action/components/app-menu/index.vue
+++ b/packages/extension/src/ui/action/components/app-menu/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="app-menu">
-    <custom-scrollbar class="scroll-area">
+    <custom-scrollbar class="app-menu__scroll-area">
       <app-menu-item
         v-for="(item, index) in networks"
         :key="index"
@@ -46,11 +46,12 @@ defineProps({
 .app-menu {
   margin: 16px 0;
   overflow-y: auto;
-}
-.scroll-area {
-  position: relative;
-  margin: auto;
-  width: 100%;
-  max-height: 400px;
+
+  &__scroll-area {
+    position: relative;
+    margin: auto;
+    width: 100%;
+    max-height: 400px;
+  }
 }
 </style>
diff --git a/packages/extension/src/ui/action/components/base-button/index.vue b/packages/extension/src/ui/action/components/base-button/index.vue
index e87e6ed2d..319c2ec01 100644
--- a/packages/extension/src/ui/action/components/base-button/index.vue
+++ b/packages/extension/src/ui/action/components/base-button/index.vue
@@ -1,7 +1,7 @@
 <template>
   <a
     class="button"
-    :class="{ alternative: noBackground, disabled: disabled }"
+    :class="{ alternative: noBackground, disabled: disabled, gray: gray }"
     @click="click()"
   >
     {{ title }}
@@ -24,6 +24,10 @@ defineProps({
     type: Boolean,
     default: false,
   },
+  gray: {
+    type: Boolean,
+    default: false,
+  },
   click: {
     type: Function,
     default: () => ({}),
@@ -56,6 +60,7 @@ defineProps({
     pointer-events: none;
     background: rgba(95, 99, 104, 0.1);
     color: rgba(0, 0, 0, 0.2);
+    box-shadow: none;
   }
 
   &.alternative {
@@ -63,5 +68,11 @@ defineProps({
     background: transparent;
     box-shadow: none;
   }
+
+  &.gray {
+    background: @buttonBg;
+    box-shadow: none;
+    color: @primaryLabel;
+  }
 }
 </style>
diff --git a/packages/extension/src/ui/action/components/network-menu/index.vue b/packages/extension/src/ui/action/components/network-menu/index.vue
index 262bcd11b..bda015746 100644
--- a/packages/extension/src/ui/action/components/network-menu/index.vue
+++ b/packages/extension/src/ui/action/components/network-menu/index.vue
@@ -3,7 +3,7 @@
     <router-link
       :to="{
         name: 'assets',
-        params: { networkId: !!selected ? selected : null },
+        params: { id: !!selected ? selected : null },
       }"
     >
       <Assets /><br />Assets
@@ -11,7 +11,7 @@
     <router-link
       :to="{
         name: 'activity',
-        params: { networkId: !!selected ? selected : null },
+        params: { id: !!selected ? selected : null },
       }"
     >
       <Activity /><br />Activity
@@ -19,7 +19,7 @@
     <router-link
       :to="{
         name: 'nfts',
-        params: { networkId: !!selected ? selected : null },
+        params: { id: !!selected ? selected : null },
       }"
     >
       <NFTs /><br />NFTs
@@ -27,7 +27,7 @@
     <router-link
       :to="{
         name: 'dapps',
-        params: { networkId: !!selected ? selected : null },
+        params: { id: !!selected ? selected : null },
       }"
     >
       <DApps /><br />DApps
diff --git a/packages/extension/src/ui/action/icons/fee/economy-icon.vue b/packages/extension/src/ui/action/icons/fee/economy-icon.vue
new file mode 100644
index 000000000..499a0c473
--- /dev/null
+++ b/packages/extension/src/ui/action/icons/fee/economy-icon.vue
@@ -0,0 +1,22 @@
+<template>
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M5 11C5 7.13401 8.13401 4 12 4C15.866 4 19 7.13401 19 11C19 14.866 15.866 18 12 18C8.13401 18 5 14.866 5 11ZM12 2C7.02944 2 3 6.02944 3 11C3 13.3051 3.86656 15.4077 5.29168 17H3C2.44772 17 2 17.4477 2 18C2 18.5523 2.44772 19 3 19H7.8728H12H16.1272H21C21.5523 19 22 18.5523 22 18C22 17.4477 21.5523 17 21 17H18.7083C20.1334 15.4077 21 13.3051 21 11C21 6.02944 16.9706 2 12 2ZM13 6.99994V6H11V6.99995L10 6.99995C8.89543 6.99995 8 7.89538 8 8.99995V9.99999C8 11.1046 8.89543 12 10 12H14V13L9 13C8.44771 13 8 13.4477 8 14C8 14.5523 8.44772 15 9 15L14 15C15.1046 15 16 14.1046 16 13L16 12C16 10.8954 15.1046 9.99999 14 9.99999L10 9.99999L10 8.99995L15 8.99994C15.5523 8.99994 16 8.55223 16 7.99994C16 7.44766 15.5523 6.99994 15 6.99994L13 6.99994ZM11 16V15H13V16H11Z"
+      fill="#202124"
+    />
+  </svg>
+</template>
+<style scoped>
+svg {
+  display: inline-block;
+  vertical-align: baseline;
+}
+</style>
diff --git a/packages/extension/src/ui/action/icons/fee/higher-icon.vue b/packages/extension/src/ui/action/icons/fee/higher-icon.vue
new file mode 100644
index 000000000..00d9baa3f
--- /dev/null
+++ b/packages/extension/src/ui/action/icons/fee/higher-icon.vue
@@ -0,0 +1,22 @@
+<template>
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M7.79289 8.79289C7.40237 9.18342 7.40237 9.81658 7.79289 10.2071C8.18342 10.5976 8.81658 10.5976 9.20711 10.2071L11 8.41421V18C11 18.5523 11.4477 19 12 19C12.5523 19 13 18.5523 13 18V8.41421L14.7929 10.2071C15.1834 10.5976 15.8166 10.5976 16.2071 10.2071C16.5976 9.81658 16.5976 9.18342 16.2071 8.79289L12.7071 5.29289C12.3166 4.90237 11.6834 4.90237 11.2929 5.29289L7.79289 8.79289Z"
+      fill="#202124"
+    />
+  </svg>
+</template>
+<style scoped>
+svg {
+  display: inline-block;
+  vertical-align: baseline;
+}
+</style>
diff --git a/packages/extension/src/ui/action/icons/fee/highest-icon.vue b/packages/extension/src/ui/action/icons/fee/highest-icon.vue
new file mode 100644
index 000000000..bdda493b5
--- /dev/null
+++ b/packages/extension/src/ui/action/icons/fee/highest-icon.vue
@@ -0,0 +1,22 @@
+<template>
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M2.79289 10.2071C2.40237 9.81658 2.40237 9.18342 2.79289 8.79289L6.29289 5.29289C6.68342 4.90237 7.31658 4.90237 7.70711 5.29289L11.2071 8.79289C11.5976 9.18342 11.5976 9.81658 11.2071 10.2071C10.8166 10.5976 10.1834 10.5976 9.79289 10.2071L8 8.41421V18C8 18.5523 7.55228 19 7 19C6.44772 19 6 18.5523 6 18V8.41421L4.20711 10.2071C3.81658 10.5976 3.18342 10.5976 2.79289 10.2071ZM16 8.41421V18C16 18.5523 16.4477 19 17 19C17.5523 19 18 18.5523 18 18V8.41421L19.7929 10.2071C20.1834 10.5976 20.8166 10.5976 21.2071 10.2071C21.5976 9.81658 21.5976 9.18342 21.2071 8.79289L17.7071 5.29289C17.3166 4.90237 16.6834 4.90237 16.2929 5.29289L12.7929 8.79289C12.4024 9.18342 12.4024 9.81658 12.7929 10.2071C13.1834 10.5976 13.8166 10.5976 14.2071 10.2071L16 8.41421Z"
+      fill="#202124"
+    />
+  </svg>
+</template>
+<style scoped>
+svg {
+  display: inline-block;
+  vertical-align: baseline;
+}
+</style>
diff --git a/packages/extension/src/ui/action/icons/fee/recomended-icon.vue b/packages/extension/src/ui/action/icons/fee/recomended-icon.vue
new file mode 100644
index 000000000..23fa319d2
--- /dev/null
+++ b/packages/extension/src/ui/action/icons/fee/recomended-icon.vue
@@ -0,0 +1,22 @@
+<template>
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M18.6643 6.25257C19.0771 6.61948 19.1143 7.25156 18.7474 7.66434L10.7474 16.6643C10.5576 16.8778 10.2856 16.9999 9.99997 16.9999C9.71433 16.9999 9.44233 16.8778 9.25256 16.6643L5.25256 12.1643C4.88564 11.7515 4.92282 11.1195 5.3356 10.7525C5.74839 10.3856 6.38046 10.4228 6.74738 10.8356L9.99997 14.4947L17.2526 6.33561C17.6195 5.92283 18.2516 5.88565 18.6643 6.25257Z"
+      fill="#202124"
+    />
+  </svg>
+</template>
+<style scoped>
+svg {
+  display: inline-block;
+  vertical-align: baseline;
+}
+</style>
diff --git a/packages/extension/src/ui/action/icons/fee/time-icon.vue b/packages/extension/src/ui/action/icons/fee/time-icon.vue
new file mode 100644
index 000000000..03d780c8a
--- /dev/null
+++ b/packages/extension/src/ui/action/icons/fee/time-icon.vue
@@ -0,0 +1,22 @@
+<template>
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M1.33325 8.00001C1.33325 4.32001 4.31325 1.33334 7.99325 1.33334C11.6799 1.33334 14.6666 4.32001 14.6666 8.00001C14.6666 11.68 11.6799 14.6667 7.99325 14.6667C4.31325 14.6667 1.33325 11.68 1.33325 8.00001ZM2.66659 8.00001C2.66659 10.9467 5.05325 13.3333 7.99992 13.3333C10.9466 13.3333 13.3333 10.9467 13.3333 8.00001C13.3333 5.05334 10.9466 2.66668 7.99992 2.66668C5.05325 2.66668 2.66659 5.05334 2.66659 8.00001ZM9.94576 10.2092C10.2454 10.4232 10.6617 10.3538 10.8757 10.0542C11.0897 9.75456 11.0204 9.33819 10.7207 9.12419L8.66659 7.65693V4.66668C8.66659 4.29849 8.36811 4.00001 7.99992 4.00001C7.63173 4.00001 7.33325 4.29849 7.33325 4.66668V8.00001C7.33325 8.21531 7.43723 8.41736 7.61243 8.5425L9.94576 10.2092Z"
+      fill="#202124"
+    />
+  </svg>
+</template>
+<style scoped>
+svg {
+  display: inline-block;
+  vertical-align: baseline;
+}
+</style>
diff --git a/packages/extension/src/ui/action/icons/send/alert-icon.vue b/packages/extension/src/ui/action/icons/send/alert-icon.vue
new file mode 100644
index 000000000..4feda0a58
--- /dev/null
+++ b/packages/extension/src/ui/action/icons/send/alert-icon.vue
@@ -0,0 +1,23 @@
+<template>
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M11.4905 2.95329C10.7036 3.16058 10.1353 4.10773 8.99876 6.00204L3.18042 15.6993C1.98504 17.6916 1.38735 18.6877 1.59518 19.4973C1.68318 19.8401 1.86058 20.1534 2.10926 20.4053C2.69654 21 3.85824 21 6.18165 21H17.8183C20.1417 21 21.3034 21 21.8907 20.4053C22.1394 20.1534 22.3168 19.8401 22.4048 19.4973C22.6126 18.6877 22.0149 17.6916 20.8195 15.6993L15.0012 6.00204L15.0012 6.00203C13.8646 4.10773 13.2963 3.16058 12.5095 2.95329C12.1755 2.8653 11.8244 2.8653 11.4905 2.95329ZM12.9201 9.92013C12.9201 9.41196 12.5082 9 12 9C11.9745 9 11.949 9.00106 11.9236 9.00318C11.4172 9.04538 11.0408 9.49013 11.083 9.99655L11.4585 14.5017C11.4819 14.7834 11.7174 15 12 15C12.2826 15 12.518 14.7834 12.5415 14.5017L12.9169 9.99655C12.9191 9.97113 12.9201 9.94564 12.9201 9.92013ZM13 17C13 17.5523 12.5523 18 12 18C11.4477 18 11 17.5523 11 17C11 16.4477 11.4477 16 12 16C12.5523 16 13 16.4477 13 17Z"
+      fill="#D50000"
+    />
+  </svg>
+</template>
+
+<style scoped>
+svg {
+  display: inline-block;
+  vertical-align: baseline;
+}
+</style>
diff --git a/packages/extension/src/ui/action/icons/send/switch-arrow-icon.vue b/packages/extension/src/ui/action/icons/send/switch-arrow-icon.vue
new file mode 100644
index 000000000..a054d6b09
--- /dev/null
+++ b/packages/extension/src/ui/action/icons/send/switch-arrow-icon.vue
@@ -0,0 +1,23 @@
+<template>
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M10.6667 3.99998C11.0349 3.99998 11.3334 4.29846 11.3334 4.66665L11.3331 10.39L12.0809 9.64296C12.3212 9.40264 12.6994 9.38415 12.9609 9.5875L13.0237 9.64296C13.264 9.88329 13.2825 10.2614 13.0792 10.523L13.0237 10.5858L11.1381 12.4714C11.038 12.5715 10.9139 12.6331 10.7843 12.6563L10.706 12.6655H10.6273C10.4963 12.6578 10.3671 12.6116 10.2581 12.5268L10.1953 12.4714L8.30966 10.5858C8.04931 10.3254 8.04931 9.90331 8.30966 9.64296C8.54999 9.40264 8.92814 9.38415 9.18967 9.5875L9.25247 9.64296L9.99973 10.39L10 4.66665C10 4.29846 10.2985 3.99998 10.6667 3.99998ZM5.37271 3.33447C5.52998 3.34372 5.68459 3.40842 5.80476 3.52858L7.69037 5.4142C7.95072 5.67455 7.95072 6.09666 7.69037 6.35701C7.43003 6.61736 7.00792 6.61736 6.74757 6.35701L5.99973 5.60932L6.00002 11.3333C6.00002 11.7015 5.70154 12 5.33335 12C4.96516 12 4.66668 11.7015 4.66668 11.3333L4.6664 5.60932L3.91914 6.35701C3.65879 6.61736 3.23668 6.61736 2.97633 6.35701C2.71598 6.09666 2.71598 5.67455 2.97633 5.4142L4.86195 3.52858C4.98211 3.40842 5.13673 3.34372 5.294 3.33447H5.37271Z"
+      fill="#202124"
+    />
+  </svg>
+</template>
+
+<style scoped>
+svg {
+  display: inline-block;
+  vertical-align: baseline;
+}
+</style>
diff --git a/packages/extension/src/ui/action/router/index.ts b/packages/extension/src/ui/action/router/index.ts
index c06ed17a5..220c5a70c 100644
--- a/packages/extension/src/ui/action/router/index.ts
+++ b/packages/extension/src/ui/action/router/index.ts
@@ -6,6 +6,7 @@ import NetworkAssets from "@action/views/network-assets/index.vue";
 import NetworkDApps from "@action/views/network-dapps/index.vue";
 import NetworkNFTs from "@action/views/network-nfts/index.vue";
 import SendTransaction from "@action/views/send-transaction/index.vue";
+import VerifyTransaction from "@action/views/verify-transaction/index.vue";
 
 const routes = [
   {
@@ -16,40 +17,47 @@ const routes = [
     name: "intro",
   },
   {
-    path: "/activity/:networkId?",
+    path: "/activity/:id?",
     components: {
       view: NetworkActivity,
     },
     name: "activity",
   },
   {
-    path: "/assets/:networkId?",
+    path: "/assets/:id?",
     components: {
       view: NetworkAssets,
     },
     name: "assets",
   },
   {
-    path: "/dapps/:networkId?",
+    path: "/dapps/:id?",
     components: {
       view: NetworkDApps,
     },
     name: "dapps",
   },
   {
-    path: "/nfts/:networkId?",
+    path: "/nfts/:id?",
     components: {
       view: NetworkNFTs,
     },
     name: "nfts",
   },
   {
-    path: "/send/:networkId?",
+    path: "/send/:id?",
     components: {
       view: SendTransaction,
     },
     name: "send-transaction",
   },
+  {
+    path: "/verify-transaction/:id?",
+    components: {
+      view: VerifyTransaction,
+    },
+    name: "verify-transaction",
+  },
   {
     path: "/add-network",
     components: {
diff --git a/packages/extension/src/ui/action/styles/color.less b/packages/extension/src/ui/action/styles/color.less
index 35c48ec4b..844169995 100644
--- a/packages/extension/src/ui/action/styles/color.less
+++ b/packages/extension/src/ui/action/styles/color.less
@@ -1,4 +1,5 @@
 @primary: #05C0A5;
+@primary01: rgba(5, 192, 165, 0.1);
 
 @primaryLabel: #202124;
 @secondaryLabel: #5F6368;
@@ -10,6 +11,7 @@
 @gray02: rgba(95, 99, 104, 0.2);
 @white07: rgba(255, 255, 255, 0.7);
 @error: #D50000;
+@error01: rgba(213, 0, 0, 0.1);
 @elevation: rgba(0, 0, 0, 0.87);
 
 @darkBg: #DADCE0;
diff --git a/packages/extension/src/ui/action/types/fee.ts b/packages/extension/src/ui/action/types/fee.ts
new file mode 100644
index 000000000..f4998ca31
--- /dev/null
+++ b/packages/extension/src/ui/action/types/fee.ts
@@ -0,0 +1,23 @@
+export interface TransactionFee {
+  limit: number;
+  price: TransactionFeePrice;
+}
+
+export interface TransactionFeePrice {
+  speed: TransactionFeeSpeed;
+  baseFee: number;
+  tip: number;
+  totalFee: number;
+  title: string;
+  description: string;
+}
+
+export enum TransactionFeeSpeed {
+  zero = 0,
+  legacy = 1,
+  opportunistic = 0.9,
+  economy = 1,
+  recommended = 1.25,
+  higherPriority = 1.5,
+  highestPriority = 1.75,
+}
diff --git a/packages/extension/src/ui/action/types/mock.ts b/packages/extension/src/ui/action/types/mock.ts
index abdf348ab..1594e3a18 100644
--- a/packages/extension/src/ui/action/types/mock.ts
+++ b/packages/extension/src/ui/action/types/mock.ts
@@ -7,6 +7,7 @@ import { Account } from "./account";
 import { Token } from "./token";
 import { DAppsItem } from "./dapps";
 import { NFTAuthor } from "./nft";
+import { TransactionFee, TransactionFeeSpeed } from "./fee";
 
 export const transactionsOne: Transaction[] = [
   {
@@ -538,3 +539,63 @@ export const ethereum: Token = {
   amount: 0.5,
   price: 2500,
 };
+
+export const fees: TransactionFee[] = [
+  {
+    limit: 0.0001,
+    price: {
+      speed: TransactionFeeSpeed.economy,
+      baseFee: 0.002,
+      tip: 0.0002,
+      totalFee: 0.0022,
+      title: "Economy",
+      description: "Will likely go trough unless activity increases",
+    },
+  },
+  {
+    limit: 0.001,
+    price: {
+      speed: TransactionFeeSpeed.recommended,
+      baseFee: 0.02,
+      tip: 0.002,
+      totalFee: 0.022,
+      title: "Recommended",
+      description: "Will reliably go through in most scenatios",
+    },
+  },
+  {
+    limit: 0.01,
+    price: {
+      speed: TransactionFeeSpeed.higherPriority,
+      baseFee: 0.2,
+      tip: 0.02,
+      totalFee: 0.22,
+      title: "Higher priority",
+      description:
+        "Will go through even if there is a sudden activity increase",
+    },
+  },
+  {
+    limit: 0.015,
+    price: {
+      speed: TransactionFeeSpeed.highestPriority,
+      baseFee: 0.3,
+      tip: 0.03,
+      totalFee: 0.33,
+      title: "Highest priority",
+      description: "Will go through, fast, in 99.99% of the cases",
+    },
+  },
+];
+
+export const recommendedFee: TransactionFee = {
+  limit: 0.001,
+  price: {
+    speed: TransactionFeeSpeed.recommended,
+    baseFee: 0.02,
+    tip: 0.002,
+    totalFee: 0.022,
+    title: "Recommended",
+    description: "Will reliably go through in most scenatios",
+  },
+};
diff --git a/packages/extension/src/ui/action/views/network-activity/components/network-activity-action.vue b/packages/extension/src/ui/action/views/network-activity/components/network-activity-action.vue
index 6ebaf2d4f..55672cdb8 100644
--- a/packages/extension/src/ui/action/views/network-activity/components/network-activity-action.vue
+++ b/packages/extension/src/ui/action/views/network-activity/components/network-activity-action.vue
@@ -18,7 +18,7 @@
       <router-link
         :to="{
           name: 'send-transaction',
-          params: { networkId: !!selected ? selected : null },
+          params: { id: !!selected ? selected : null },
         }"
         class="network-activity__action-item"
       >
@@ -50,7 +50,7 @@ import { useRoute } from "vue-router";
 
 const route = useRoute();
 
-const selected = +route.params.networkId;
+const selected: string = route.params.id as string;
 
 defineProps({
   depositAction: {
diff --git a/packages/extension/src/ui/action/views/send-transaction/components/send-alert.vue b/packages/extension/src/ui/action/views/send-transaction/components/send-alert.vue
new file mode 100644
index 000000000..26bebb08b
--- /dev/null
+++ b/packages/extension/src/ui/action/views/send-transaction/components/send-alert.vue
@@ -0,0 +1,57 @@
+<template>
+  <div class="send-alert">
+    <alert-icon />
+    <p>
+      After sending this transaction your balance will go below Existential
+      Limit (<a href="#">What is it?</a>), which will drop your remaining
+      balance to 0.
+    </p>
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  name: "SendAlert",
+};
+</script>
+
+<script setup lang="ts">
+import AlertIcon from "@action/icons/send/alert-icon.vue";
+</script>
+
+<style lang="less">
+@import "~@action/styles/theme.less";
+
+.send-alert {
+  margin: 0 32px 8px 32px;
+  background: @error01;
+  border-radius: 10px;
+  padding: 12px 16px 12px 57px;
+  position: relative;
+  box-sizing: border-box;
+
+  svg {
+    position: absolute;
+    left: 16px;
+    top: 50%;
+    margin-top: -12px;
+  }
+
+  p {
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 20px;
+    letter-spacing: 0.25px;
+    color: @error;
+    margin: 0;
+
+    a {
+      color: @error;
+
+      &:hover {
+        text-decoration: none;
+      }
+    }
+  }
+}
+</style>
diff --git a/packages/extension/src/ui/action/views/send-transaction/components/send-fee-select.vue b/packages/extension/src/ui/action/views/send-transaction/components/send-fee-select.vue
new file mode 100644
index 000000000..3636188d4
--- /dev/null
+++ b/packages/extension/src/ui/action/views/send-transaction/components/send-fee-select.vue
@@ -0,0 +1,138 @@
+<template>
+  <a class="send-fee-select" @click="open">
+    <div class="send-fee-select__value">
+      <p class="send-fee-select__value-fiat">
+        Fee: {{ $filters.currencyFormat(7.12, "USD") }}
+      </p>
+      <p class="send-fee-select__value-crypto">0.0000123 <span>eth</span></p>
+    </div>
+
+    <div class="send-fee-select__arrow">
+      <div class="send-fee-select__time">
+        <time-icon />
+        <span>5 min</span>
+      </div>
+      <switch-arrow />
+    </div>
+  </a>
+</template>
+
+<script lang="ts">
+export default {
+  name: "SendFeeSelect",
+};
+</script>
+
+<script setup lang="ts">
+import { defineProps, ref, PropType } from "vue";
+import SwitchArrow from "@action/icons/header/switch_arrow.vue";
+import { TransactionFee } from "@action/types/fee";
+import TimeIcon from "@action/icons/fee/time-icon.vue";
+
+let isOpen = ref(false);
+
+const props = defineProps({
+  toggleSelect: {
+    type: Function,
+    default: () => {
+      return null;
+    },
+  },
+  fee: {
+    type: Object as PropType<TransactionFee>,
+    default: () => {
+      return {};
+    },
+  },
+});
+
+const open = () => {
+  isOpen.value = !isOpen.value;
+  props.toggleSelect(isOpen);
+};
+</script>
+
+<style lang="less">
+@import "~@action/styles/theme.less";
+
+.send-fee-select {
+  height: 40px;
+  background: #ffffff;
+  margin: 0 32px 8px 32px;
+  box-sizing: border-box;
+  border: 1px solid @gray02;
+  box-sizing: border-box;
+  border-radius: 10px;
+  width: calc(~"100% - 64px");
+  padding: 16px 10px;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  flex-direction: row;
+  position: relative;
+  cursor: pointer;
+  text-decoration: none;
+
+  &__value {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    flex-direction: row;
+
+    &-fiat {
+      font-style: normal;
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 20px;
+      letter-spacing: 0.25px;
+      color: @secondaryLabel;
+      margin: 0 8px 0 0;
+    }
+
+    &-crypto {
+      font-style: normal;
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 20px;
+      letter-spacing: 0.25px;
+      color: @tertiaryLabel;
+      margin: 0;
+
+      span {
+        font-variant: small-caps;
+      }
+    }
+  }
+
+  &__arrow {
+    position: absolute;
+    font-size: 0;
+    right: 12px;
+    top: 8px;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    flex-direction: row;
+  }
+
+  &__time {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    flex-direction: row;
+    margin-right: 4px;
+
+    span {
+      font-style: normal;
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 20px;
+      color: @primaryLabel;
+    }
+
+    svg {
+      margin-right: 4px;
+    }
+  }
+}
+</style>
diff --git a/packages/extension/src/ui/action/views/send-transaction/components/send-input-amount.vue b/packages/extension/src/ui/action/views/send-transaction/components/send-input-amount.vue
index 959d0cadb..74866a68b 100644
--- a/packages/extension/src/ui/action/views/send-transaction/components/send-input-amount.vue
+++ b/packages/extension/src/ui/action/views/send-transaction/components/send-input-amount.vue
@@ -1,13 +1,20 @@
 <template>
   <div class="send-input-amount" :class="{ focus: isFocus }">
     <input
-      type="number"
+      type="text"
       placeholder="0"
-      :value="value"
-      @input="changeValue($event.target.value)"
+      :value="value == 0 ? null : value"
+      @input="changeValue"
       @focus="changeFocus"
       @blur="changeFocus"
     />
+
+    <div class="send-input-amount__fiat">
+      <switch-arrow-icon></switch-arrow-icon>
+      <span>{{ $filters.currencyFormat(0, "USD") }}</span>
+    </div>
+
+    <a class="send-input-amount__max" @click="maxAction">Max</a>
   </div>
 </template>
 
@@ -19,6 +26,7 @@ export default {
 
 <script setup lang="ts">
 import { defineProps, ref } from "vue";
+import SwitchArrowIcon from "@action/icons/send/switch-arrow-icon.vue";
 
 let isFocus = ref(false);
 
@@ -37,13 +45,17 @@ const props = defineProps({
   },
 });
 
-const changeValue = (text: string) => {
-  props.input(text);
+const changeValue = (e: any) => {
+  props.input(e.target.value);
 };
 
 const changeFocus = () => {
   isFocus.value = !isFocus.value;
 };
+
+const maxAction = () => {
+  console.log(maxAction);
+};
 </script>
 
 <style lang="less">
@@ -61,7 +73,7 @@ const changeFocus = () => {
   padding: 16px;
   display: flex;
   justify-content: flex-start;
-  align-items: center;
+  align-items: flex-start;
   flex-direction: row;
   position: relative;
 
@@ -71,17 +83,68 @@ const changeFocus = () => {
 
   input {
     width: 290px;
-    height: 24px;
+    height: 40px;
     font-style: normal;
     font-weight: 400;
     font-size: 34px;
     line-height: 40px;
-    text-align: center;
+    text-align: left;
     letter-spacing: 0.25px;
     color: @primaryLabel;
     border: 0 none;
     outline: none;
     padding: 0;
+    caret-color: @primary;
+  }
+
+  &__fiat {
+    position: absolute;
+    left: 16px;
+    bottom: 16px;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    flex-direction: row;
+
+    svg {
+      margin-right: 4px;
+    }
+
+    span {
+      font-style: normal;
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 20px;
+      text-align: center;
+      letter-spacing: 0.25px;
+      color: @tertiaryLabel;
+    }
+  }
+
+  &__max {
+    position: absolute;
+    width: 43px;
+    height: 24px;
+    right: 16px;
+    top: 50%;
+    margin-top: -12px;
+    background: @buttonBg;
+    border-radius: 6px;
+    font-style: normal;
+    font-weight: 500;
+    font-size: 11px;
+    line-height: 24px;
+    letter-spacing: 1.5px;
+    text-transform: uppercase;
+    color: @primaryLabel;
+    text-align: center;
+    text-decoration: none;
+    cursor: pointer;
+    display: block;
+
+    &:active {
+      opacity: 0.7;
+    }
   }
 }
 </style>
diff --git a/packages/extension/src/ui/action/views/send-transaction/index.vue b/packages/extension/src/ui/action/views/send-transaction/index.vue
index 6520bfc68..387a27bff 100644
--- a/packages/extension/src/ui/action/views/send-transaction/index.vue
+++ b/packages/extension/src/ui/action/views/send-transaction/index.vue
@@ -36,6 +36,33 @@
         :input="inputAmount"
         :value="amount"
       ></send-input-amount>
+
+      <send-fee-select
+        :fee="fee"
+        :toggle-select="toggleSelectFee"
+      ></send-fee-select>
+
+      <transaction-fee-view
+        :show-fees="isOpenSelectFee"
+        :close="toggleSelectFee"
+        :select-fee="selectFee"
+        :selected="fee.price.speed"
+      ></transaction-fee-view>
+
+      <send-alert></send-alert>
+
+      <div class="send-transaction__buttons">
+        <div class="send-transaction__buttons-cancel">
+          <base-button title="Cancel" :click="close" :gray="true" />
+        </div>
+        <div class="send-transaction__buttons-send">
+          <base-button
+            :title="sendButtonTitle()"
+            :click="sendAction"
+            :disabled="isDisabled()"
+          />
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -55,9 +82,14 @@ import SendContactsList from "./components/send-contacts-list.vue";
 import SendTokenSelect from "./components/send-token-select.vue";
 import SendTokenList from "./components/send-token-list.vue";
 import SendInputAmount from "./components/send-input-amount.vue";
+import SendFeeSelect from "./components/send-fee-select.vue";
+import TransactionFeeView from "@action/views/transaction-fee/index.vue";
+import SendAlert from "./components/send-alert.vue";
+import BaseButton from "@action/components/base-button/index.vue";
 import { Account } from "@action/types/account";
 import { Token } from "@action/types/token";
-import { ethereum } from "@action/types/mock";
+import { TransactionFee } from "@action/types/fee";
+import { ethereum, recommendedFee } from "@action/types/mock";
 
 const route = useRoute();
 const router = useRouter();
@@ -67,8 +99,10 @@ let address = ref("");
 let isOpenSelectToken = ref(false);
 let selectedToken = ref(ethereum);
 let amount = ref(0);
+let isOpenSelectFee = ref(false);
+let fee = ref(recommendedFee);
 
-const selected: number = +route.params.networkId;
+const selected: string = route.params.id as string;
 
 defineProps({});
 
@@ -101,6 +135,37 @@ const selectToken = (token: Token) => {
 const inputAmount = (number: number) => {
   amount.value = number;
 };
+
+const toggleSelectFee = (open: boolean) => {
+  isOpenSelectFee.value = open;
+};
+
+const selectFee = (option: TransactionFee) => {
+  fee.value = option;
+  isOpenSelectFee.value = false;
+};
+
+const sendButtonTitle = () => {
+  let title = "Send";
+
+  if (amount.value > 0)
+    title =
+      "Send " + amount.value + " " + selectedToken.value.symbol.toUpperCase();
+
+  return title;
+};
+
+const isDisabled = () => {
+  let isDisabled = true;
+
+  if (amount.value > 0) isDisabled = false;
+
+  return isDisabled;
+};
+
+const sendAction = () => {
+  router.push({ name: "verify-transaction", params: { id: selected } });
+};
 </script>
 
 <style lang="less" scoped>
@@ -121,6 +186,7 @@ const inputAmount = (number: number) => {
   width: 100%;
   height: 100%;
   box-sizing: border-box;
+  position: relative;
 
   &__header {
     position: relative;
@@ -147,5 +213,26 @@ const inputAmount = (number: number) => {
       background: @black007;
     }
   }
+
+  &__buttons {
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    padding: 0 32px 32px 32px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-direction: row;
+    width: 100%;
+    box-sizing: border-box;
+
+    &-cancel {
+      width: 170px;
+    }
+
+    &-send {
+      width: 218px;
+    }
+  }
 }
 </style>
diff --git a/packages/extension/src/ui/action/views/transaction-fee/components/transaction-fee-item.vue b/packages/extension/src/ui/action/views/transaction-fee/components/transaction-fee-item.vue
new file mode 100644
index 000000000..e4e746f37
--- /dev/null
+++ b/packages/extension/src/ui/action/views/transaction-fee/components/transaction-fee-item.vue
@@ -0,0 +1,127 @@
+<template>
+  <a class="transaction-fee-item" @click="select">
+    <div
+      class="transaction-fee-item__block"
+      :class="{ active: selected == fee.price.speed }"
+    >
+      <economy-icon v-show="fee.price.speed == TransactionFeeSpeed.economy" />
+      <recomended-icon
+        v-show="fee.price.speed == TransactionFeeSpeed.recommended"
+      />
+      <higher-icon
+        v-show="fee.price.speed == TransactionFeeSpeed.higherPriority"
+      />
+      <highest-icon
+        v-show="fee.price.speed == TransactionFeeSpeed.highestPriority"
+      />
+
+      <div class="transaction-fee-item__block-info">
+        <h4>{{ fee.price.title }}</h4>
+        <p>{{ fee.price.description }}</p>
+      </div>
+
+      <div class="transaction-fee-item__block-amount"></div>
+    </div>
+  </a>
+</template>
+
+<script lang="ts">
+export default {
+  name: "TransactionFeeItem",
+};
+</script>
+
+<script setup lang="ts">
+import { defineProps, PropType } from "vue";
+import { TransactionFee, TransactionFeeSpeed } from "@action/types/fee";
+import EconomyIcon from "@action/icons/fee/economy-icon.vue";
+import RecomendedIcon from "@action/icons/fee/recomended-icon.vue";
+import HigherIcon from "@action/icons/fee/higher-icon.vue";
+import HighestIcon from "@action/icons/fee/highest-icon.vue";
+
+const props = defineProps({
+  fee: {
+    type: Object as PropType<TransactionFee>,
+    default: () => {
+      return {};
+    },
+  },
+  selectFee: {
+    type: Function,
+    default: () => {
+      return null;
+    },
+  },
+  selected: {
+    type: Object as PropType<TransactionFeeSpeed>,
+    default: () => {
+      return {};
+    },
+  },
+});
+
+const select = () => {
+  props.selectFee(props.fee);
+};
+</script>
+
+<style lang="less">
+@import "~@action/styles/theme.less";
+
+.transaction-fee-item {
+  text-decoration: none;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-direction: row;
+  width: 100%;
+  height: 88px;
+  cursor: pointer;
+  text-decoration: none;
+  padding: 4px 8px;
+  box-sizing: border-box;
+
+  &__block {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    flex-direction: row;
+    height: 80px;
+    border-radius: 8px;
+    width: 100%;
+
+    &.active {
+      background-color: @primary01;
+    }
+
+    svg {
+      width: 24px;
+      height: 24px;
+      margin-right: 16px;
+      margin-left: 12px;
+    }
+
+    &-info {
+      width: 197px;
+
+      h4 {
+        font-style: normal;
+        font-weight: 400;
+        font-size: 16px;
+        line-height: 24px;
+        color: @primaryLabel;
+        margin: 0;
+      }
+
+      p {
+        font-style: normal;
+        font-weight: 400;
+        font-size: 12px;
+        line-height: 16px;
+        color: @secondaryLabel;
+        margin: 0;
+      }
+    }
+  }
+}
+</style>
diff --git a/packages/extension/src/ui/action/views/transaction-fee/index.vue b/packages/extension/src/ui/action/views/transaction-fee/index.vue
new file mode 100644
index 000000000..2a8a29dd8
--- /dev/null
+++ b/packages/extension/src/ui/action/views/transaction-fee/index.vue
@@ -0,0 +1,197 @@
+<template>
+  <div class="transaction-fee" :class="{ show: showFees }">
+    <div class="transaction-fee__overlay" @click="close"></div>
+    <div class="transaction-fee__wrap" :class="{ show: showFees }">
+      <div class="transaction-fee__info">
+        <div class="transaction-fee__info-amount">
+          <p class="transaction-fee__info-amount-fiat">
+            {{ $filters.currencyFormat(10.12, "USD") }}
+          </p>
+          <p class="transaction-fee__info-amount-crypto">
+            0.0000123 <span>eth</span>
+          </p>
+        </div>
+
+        <div class="transaction-fee__info-text">
+          This fee is charged by Ethereum network.
+        </div>
+
+        <div class="transaction-fee__info-time">
+          <time-icon />
+          <span>5 min</span>
+        </div>
+      </div>
+      <transaction-fee-item
+        v-for="(item, index) in fees"
+        :key="index"
+        :fee="item"
+        :select-fee="selectFee"
+        :selected="selected"
+      ></transaction-fee-item>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  name: "TransactionFee",
+};
+</script>
+
+<script setup lang="ts">
+import { defineProps, PropType } from "vue";
+import TransactionFeeItem from "./components/transaction-fee-item.vue";
+import { fees } from "@action/types/mock";
+import { TransactionFee, TransactionFeeSpeed } from "@action/types/fee";
+import TimeIcon from "@action/icons/fee/time-icon.vue";
+
+const props = defineProps({
+  showFees: Boolean,
+  close: {
+    type: Function,
+    default: () => {
+      return null;
+    },
+  },
+  selectFee: {
+    type: Function,
+    default: () => {
+      return null;
+    },
+  },
+  selected: {
+    type: Object as PropType<TransactionFeeSpeed>,
+    default: () => {
+      return {};
+    },
+  },
+});
+
+const close = () => {
+  props.close(false);
+};
+
+const selectFee = (fee: TransactionFee) => {
+  props.selectFee(fee);
+};
+</script>
+
+<style lang="less">
+@import "~@action/styles/theme.less";
+
+.transaction-fee {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 101;
+  display: none;
+
+  &.show {
+    display: block;
+  }
+
+  &__overlay {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    left: 0;
+    top: 0;
+    z-index: 102;
+  }
+
+  &__wrap {
+    position: absolute;
+    width: 360px;
+    height: auto;
+    max-height: 440px;
+    left: 50px;
+    bottom: 100px;
+    background: #ffffff;
+    box-shadow: 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;
+    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;
+    }
+  }
+
+  &__info {
+    margin-bottom: 16px;
+    padding: 0 20px;
+    position: relative;
+
+    &-amount {
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+      flex-direction: row;
+
+      &-fiat {
+        font-style: normal;
+        font-weight: 400;
+        font-size: 20px;
+        line-height: 28px;
+        letter-spacing: 0.15px;
+        color: @primaryLabel;
+        margin: 0;
+        margin-right: 8px;
+      }
+
+      &-crypto {
+        font-style: normal;
+        font-weight: 400;
+        font-size: 16px;
+        line-height: 24px;
+        color: @secondaryLabel;
+        margin: 0;
+
+        span {
+          font-variant: small-caps;
+        }
+      }
+    }
+
+    &-text {
+      font-style: normal;
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 20px;
+      color: @secondaryLabel;
+      margin: 0;
+    }
+
+    &-time {
+      position: absolute;
+      right: 20px;
+      top: 4px;
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+      flex-direction: row;
+
+      span {
+        font-style: normal;
+        font-weight: 400;
+        font-size: 16px;
+        line-height: 24px;
+        color: @primaryLabel;
+      }
+
+      svg {
+        margin-right: 4px;
+      }
+    }
+  }
+}
+</style>
diff --git a/packages/extension/src/ui/action/views/verify-transaction/components/verify-transaction-network.vue b/packages/extension/src/ui/action/views/verify-transaction/components/verify-transaction-network.vue
new file mode 100644
index 000000000..bfb5b6e9a
--- /dev/null
+++ b/packages/extension/src/ui/action/views/verify-transaction/components/verify-transaction-network.vue
@@ -0,0 +1,73 @@
+<template>
+  <div class="verify-transaction-network">
+    <img :src="network.icon" alt="" />
+
+    <div class="verify-transaction-network__name">
+      <p>Network</p>
+      <h4>{{ network.name_long }}</h4>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  name: "VerifyTransactionNetwork",
+};
+</script>
+
+<script setup lang="ts">
+import { defineProps, PropType } from "vue";
+import { NodeType } from "@/types/provider";
+
+defineProps({
+  network: {
+    type: Object as PropType<NodeType>,
+    default: () => {
+      return {};
+    },
+  },
+});
+</script>
+
+<style lang="less">
+@import "~@action/styles/theme.less";
+
+.verify-transaction-network {
+  text-decoration: none;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  flex-direction: row;
+  width: 100%;
+  height: 65px;
+  padding: 16px;
+  box-sizing: border-box;
+  border-bottom: 1px solid @gray02;
+
+  img {
+    width: 32px;
+    height: 32px;
+    margin-right: 12px;
+  }
+
+  &__name {
+    h4 {
+      font-style: normal;
+      font-weight: 400;
+      font-size: 16px;
+      line-height: 24px;
+      color: @primaryLabel;
+      margin: 0;
+    }
+
+    p {
+      font-style: normal;
+      font-weight: 400;
+      font-size: 12px;
+      line-height: 16px;
+      color: @secondaryLabel;
+      margin: 0;
+    }
+  }
+}
+</style>
diff --git a/packages/extension/src/ui/action/views/verify-transaction/index.vue b/packages/extension/src/ui/action/views/verify-transaction/index.vue
new file mode 100644
index 000000000..f4ab47181
--- /dev/null
+++ b/packages/extension/src/ui/action/views/verify-transaction/index.vue
@@ -0,0 +1,159 @@
+<template>
+  <div class="container">
+    <div v-if="!!selected" class="verify-transaction">
+      <div class="verify-transaction__header">
+        <h3>Verify Transaction</h3>
+        <a class="verify-transaction__close" @click="close">
+          <close-icon />
+        </a>
+      </div>
+
+      <p class="verify-transaction__description">
+        Double check the information and confirm transaction
+      </p>
+      <div class="verify-transaction__info">
+        <verify-transaction-network
+          v-show="!!selectedNetwork"
+          :network="selectedNetwork"
+        ></verify-transaction-network>
+      </div>
+
+      <div class="verify-transaction__buttons">
+        <div class="verify-transaction__buttons-cancel">
+          <base-button title="Back" :click="close" :gray="true" />
+        </div>
+        <div class="verify-transaction__buttons-send">
+          <base-button title="Confirm and send" :click="sendAction" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  name: "VerifyTransaction",
+};
+</script>
+
+<script setup lang="ts">
+import { defineProps, onMounted, ref, defineExpose } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import CloseIcon from "@action/icons/common/close-icon.vue";
+import BaseButton from "@action/components/base-button/index.vue";
+import VerifyTransactionNetwork from "./components/verify-transaction-network.vue";
+import TabState from "@/libs/tab-state";
+import { NodeType } from "@/types/provider";
+import { getAllNetworks } from "@/libs/utils/networks";
+
+const tabstate = new TabState();
+const route = useRoute();
+const router = useRouter();
+const networks: NodeType[] = getAllNetworks();
+
+const selected: string = route.params.id as string;
+let selectedNetwork = ref(undefined);
+defineExpose({ selectedNetwork });
+
+onMounted(async () => {
+  const curNetwork = await tabstate.getSelectedNetWork();
+  (selectedNetwork.value as unknown as NodeType) = networks.find(
+    (net) => net.name === curNetwork
+  ) as NodeType;
+});
+
+defineProps({});
+
+const close = () => {
+  router.go(-1);
+};
+
+const sendAction = () => {
+  console.log("sendAction");
+};
+</script>
+
+<style lang="less" scoped>
+@import "~@action/styles/theme.less";
+
+.container {
+  width: 100%;
+  height: 600px;
+  background-color: @white;
+  box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.16);
+  margin: 0;
+  box-sizing: border-box;
+  position: relative;
+}
+
+.verify-transaction {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  position: relative;
+
+  &__header {
+    position: relative;
+    padding: 24px 72px 12px 32px;
+
+    h3 {
+      font-style: normal;
+      font-weight: 700;
+      font-size: 24px;
+      line-height: 32px;
+      color: @primaryLabel;
+      margin: 0;
+    }
+  }
+
+  &__close {
+    position: absolute;
+    top: 20px;
+    right: 24px;
+    border-radius: 8px;
+    cursor: pointer;
+
+    &:hover {
+      background: @black007;
+    }
+  }
+
+  &__description {
+    font-style: normal;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 24px;
+    color: @secondaryLabel;
+    padding: 4px 141px 16px 32px;
+    margin: 0;
+  }
+
+  &__info {
+    border: 1px solid @gray02;
+    box-sizing: border-box;
+    border-radius: 10px;
+    margin: 0 32px 0 32px;
+  }
+
+  &__buttons {
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    padding: 0 32px 32px 32px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-direction: row;
+    width: 100%;
+    box-sizing: border-box;
+
+    &-cancel {
+      width: 170px;
+    }
+
+    &-send {
+      width: 218px;
+    }
+  }
+}
+</style>

From 6216fcfdbff5dccbe8f7e70cfe7ef67c4ef1cace Mon Sep 17 00:00:00 2001
From: Mihail Polev <mpolev364@gmail.com>
Date: Thu, 14 Apr 2022 17:16:25 +0700
Subject: [PATCH 4/5] =?UTF-8?q?devop:=20=F0=9F=94=A7=20Send=20Transaction?=
 =?UTF-8?q?=20develop?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../assets/animation/send-checkmark.json      |   1 +
 .../action/assets/animation/send-process.json |   1 +
 .../src/ui/action/icons/send/arrow-down.vue   |  23 ++++
 .../components/send-process-account.vue       | 114 ++++++++++++++++
 .../components/send-process-amount.vue        |  96 ++++++++++++++
 .../ui/action/views/send-process/index.vue    | 125 ++++++++++++++++++
 .../components/transaction-fee-item.vue       |  43 +++++-
 .../components/verify-transaction-account.vue | 123 +++++++++++++++++
 .../components/verify-transaction-amount.vue  |  97 ++++++++++++++
 .../components/verify-transaction-fee.vue     |  72 ++++++++++
 .../components/verify-transaction-network.vue |   3 +-
 .../action/views/verify-transaction/index.vue |  32 ++++-
 12 files changed, 722 insertions(+), 8 deletions(-)
 create mode 100644 packages/extension/src/ui/action/assets/animation/send-checkmark.json
 create mode 100644 packages/extension/src/ui/action/assets/animation/send-process.json
 create mode 100644 packages/extension/src/ui/action/icons/send/arrow-down.vue
 create mode 100644 packages/extension/src/ui/action/views/send-process/components/send-process-account.vue
 create mode 100644 packages/extension/src/ui/action/views/send-process/components/send-process-amount.vue
 create mode 100644 packages/extension/src/ui/action/views/send-process/index.vue
 create mode 100644 packages/extension/src/ui/action/views/verify-transaction/components/verify-transaction-account.vue
 create mode 100644 packages/extension/src/ui/action/views/verify-transaction/components/verify-transaction-amount.vue
 create mode 100644 packages/extension/src/ui/action/views/verify-transaction/components/verify-transaction-fee.vue

diff --git a/packages/extension/src/ui/action/assets/animation/send-checkmark.json b/packages/extension/src/ui/action/assets/animation/send-checkmark.json
new file mode 100644
index 000000000..b0f055a23
--- /dev/null
+++ b/packages/extension/src/ui/action/assets/animation/send-checkmark.json
@@ -0,0 +1 @@
+{"v":"5.0.1","fr":30,"ip":0,"op":115.98,"w":128,"h":128,"assets":[],"layers":[{"ind":3,"nm":"check","ks":{"p":{"a":0,"k":[22,22]},"a":{"a":0,"k":[0,0,0]},"s":{"a":0,"k":[100,100,100]},"r":{"a":0,"k":0},"o":{"a":1,"k":[{"t":99,"s":[0],"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"e":[100]},{"t":100,"s":[100]}]}},"ao":0,"ip":0,"op":115.98,"st":0,"bm":0,"sr":1,"ty":4,"shapes":[{"ty":"gr","it":[{"ty":"sh","d":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0]],"v":[[13.125,42],[32.375,61.25],[70.875,22.75]],"c":false},"hd":false}},{"ty":"st","c":{"a":0,"k":[0.02,0.753,0.647,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":6},"lc":2,"lj":2,"ml":4,"d":[{"n":"d","nm":"dash","v":{"a":1,"k":[{"t":100,"s":[0],"i":{"x":[0.175],"y":[1]},"o":{"x":[0.77],"y":[0]},"e":[82]},{"t":114,"s":[82]}]}},{"n":"g","nm":"gap","v":{"a":1,"k":[{"t":100,"s":[82],"i":{"x":[0.175],"y":[1]},"o":{"x":[0.77],"y":[0]},"e":[82]},{"t":114,"s":[82]}]}},{"n":"o","nm":"offset","v":{"a":0,"k":0}}]},{"ty":"tr","p":{"a":0,"k":[0,0]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0}}],"nm":"Object","hd":false}],"ln":"check"},{"ind":2,"nm":"spin","ks":{"p":{"a":0,"k":[64,64]},"a":{"a":0,"k":[0,0,0]},"s":{"a":0,"k":[100,100,100]},"r":{"a":1,"k":[{"t":0,"s":[0],"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"e":[720]},{"t":45,"s":[720],"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"e":[1080]},{"t":75,"s":[1080],"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"e":[1380]},{"t":100,"s":[1380],"i":{"x":[0.175],"y":[1]},"o":{"x":[0.77],"y":[0]},"e":[1620]},{"t":114,"s":[1620]}]},"o":{"a":1,"k":[{"t":100,"s":[100],"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"e":[100]},{"t":113,"s":[100],"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"e":[0]},{"t":114,"s":[0]}]}},"ao":0,"ip":0,"op":115.98,"st":0,"bm":0,"sr":1,"ty":4,"shapes":[{"ty":"gr","it":[{"ty":"sh","d":1,"ks":{"a":0,"k":{"i":[[0,0],[16.016,0],[0,16.016],[-16.016,0],[0,-16.016]],"o":[[0,16.016],[-16.016,0],[0,-16.016],[16.016,0],[0,0]],"v":[[29,0],[0,29],[-29,0],[0,-29],[29,0]],"c":true},"hd":false}},{"ty":"st","c":{"a":0,"k":[0.02,0.753,0.647,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":6},"lc":2,"lj":2,"ml":4,"d":[{"n":"d","nm":"dash","v":{"a":1,"k":[{"t":0,"s":[130],"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"e":[10]},{"t":45,"s":[10],"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"e":[120]},{"t":100,"s":[120],"i":{"x":[0.175],"y":[1]},"o":{"x":[0.77],"y":[0]},"e":[0]},{"t":114,"s":[0]}]}},{"n":"g","nm":"gap","v":{"a":1,"k":[{"t":0,"s":[100],"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"e":[180]},{"t":45,"s":[180],"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"e":[106.667]},{"t":100,"s":[106.667],"i":{"x":[0.175],"y":[1]},"o":{"x":[0.77],"y":[0]},"e":[182]},{"t":114,"s":[182]}]}},{"n":"o","nm":"offset","v":{"a":1,"k":[{"t":100,"s":[0],"i":{"x":[0.175],"y":[1]},"o":{"x":[0.77],"y":[0]},"e":[0]},{"t":114,"s":[0]}]}}]},{"ty":"tr","p":{"a":0,"k":[0,0]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0}}],"nm":"Object","hd":false}],"ln":"spin"},{"ind":1,"nm":"back","ks":{"p":{"a":0,"k":[64,64]},"a":{"a":0,"k":[0,0,0]},"s":{"a":0,"k":[100,100,100]},"r":{"a":0,"k":0},"o":{"a":1,"k":[{"t":100,"s":[20],"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"e":[0]},{"t":114,"s":[0]}]}},"ao":0,"ip":0,"op":115.98,"st":0,"bm":0,"sr":1,"ty":4,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[58,58]},"p":{"a":0,"k":[0,0]}},{"ty":"st","c":{"a":0,"k":[0.373,0.388,0.408,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":6},"lc":1,"lj":2,"ml":4},{"ty":"tr","p":{"a":0,"k":[0,0]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0}}],"nm":"Object","hd":false}],"ln":"back"}]}
diff --git a/packages/extension/src/ui/action/assets/animation/send-process.json b/packages/extension/src/ui/action/assets/animation/send-process.json
new file mode 100644
index 000000000..517a4c9af
--- /dev/null
+++ b/packages/extension/src/ui/action/assets/animation/send-process.json
@@ -0,0 +1 @@
+{"v":"5.0.1","fr":30,"ip":0,"op":105,"w":128,"h":128,"assets":[],"layers":[{"ind":2,"nm":"spin","ks":{"p":{"a":0,"k":[64,64]},"a":{"a":0,"k":[0,0,0]},"s":{"a":0,"k":[100,100,100]},"r":{"a":1,"k":[{"t":0,"s":[0],"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"e":[720]},{"t":45,"s":[720],"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"e":[1080]},{"t":75,"s":[1080],"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"e":[1440]},{"t":105,"s":[1440]}]},"o":{"a":0,"k":100}},"ao":0,"ip":0,"op":105,"st":0,"bm":0,"sr":1,"ty":4,"shapes":[{"ty":"gr","it":[{"ty":"sh","d":1,"ks":{"a":0,"k":{"i":[[0,0],[16.016,0],[0,16.016],[-16.016,0],[0,-16.016]],"o":[[0,16.016],[-16.016,0],[0,-16.016],[16.016,0],[0,0]],"v":[[29,0],[0,29],[-29,0],[0,-29],[29,0]],"c":true},"hd":false}},{"ty":"st","c":{"a":0,"k":[0.02,0.753,0.647,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":6},"lc":2,"lj":2,"ml":4,"d":[{"n":"d","nm":"dash","v":{"a":1,"k":[{"t":0,"s":[130],"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"e":[10]},{"t":45,"s":[10],"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"e":[130]},{"t":105,"s":[130]}]}},{"n":"g","nm":"gap","v":{"a":1,"k":[{"t":0,"s":[100],"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"e":[180]},{"t":45,"s":[180],"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"e":[100]},{"t":105,"s":[100]}]}},{"n":"o","nm":"offset","v":{"a":0,"k":0}}]},{"ty":"tr","p":{"a":0,"k":[0,0]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0}}],"nm":"Object","hd":false}],"ln":"spin"},{"ind":1,"nm":"back","ks":{"p":{"a":0,"k":[64,64]},"a":{"a":0,"k":[0,0,0]},"s":{"a":0,"k":[100,100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":20}},"ao":0,"ip":0,"op":105,"st":0,"bm":0,"sr":1,"ty":4,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[58,58]},"p":{"a":0,"k":[0,0]}},{"ty":"st","c":{"a":0,"k":[0.373,0.388,0.408,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":6},"lc":1,"lj":2,"ml":4},{"ty":"tr","p":{"a":0,"k":[0,0]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0}}],"nm":"Object","hd":false}],"ln":"back"}]}
diff --git a/packages/extension/src/ui/action/icons/send/arrow-down.vue b/packages/extension/src/ui/action/icons/send/arrow-down.vue
new file mode 100644
index 000000000..20b9333eb
--- /dev/null
+++ b/packages/extension/src/ui/action/icons/send/arrow-down.vue
@@ -0,0 +1,23 @@
+<template>
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M12.9949 5.20876L12.9949 16.3788L17.8749 11.4988C18.2649 11.1088 18.9049 11.1088 19.2949 11.4988C19.4822 11.6856 19.5874 11.9392 19.5874 12.2038C19.5874 12.4683 19.4822 12.7219 19.2949 12.9088L12.7049 19.4988C12.3149 19.8888 11.6849 19.8888 11.2949 19.4988L4.70492 12.9088C4.31492 12.5188 4.31492 11.8888 4.70492 11.4988C5.09492 11.1088 5.72492 11.1088 6.11492 11.4988L10.9949 16.3788L10.9949 5.20876C10.9949 4.65876 11.4449 4.20876 11.9949 4.20876C12.5449 4.20876 12.9949 4.65876 12.9949 5.20876Z"
+      fill="#202124"
+    />
+  </svg>
+</template>
+
+<style scoped>
+svg {
+  display: inline-block;
+  vertical-align: baseline;
+}
+</style>
diff --git a/packages/extension/src/ui/action/views/send-process/components/send-process-account.vue b/packages/extension/src/ui/action/views/send-process/components/send-process-account.vue
new file mode 100644
index 000000000..0681a0c17
--- /dev/null
+++ b/packages/extension/src/ui/action/views/send-process/components/send-process-account.vue
@@ -0,0 +1,114 @@
+<template>
+  <div class="send-process-account">
+    <img
+      v-if="avatar"
+      :src="avatar"
+      class="send-process-account__img avatar"
+      alt=""
+    />
+    <img
+      v-else
+      :src="getImgUrl(address)"
+      class="send-process-account__img avatar"
+      alt=""
+    />
+
+    <div class="send-process-account__name">
+      <p>To</p>
+      <h4>{{ name ? name : address }}</h4>
+      <h6 v-show="!!name">{{ $filters.replaceWithEllipsis(address, 6, 4) }}</h6>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  name: "SendProcessAccount",
+};
+</script>
+
+<script setup lang="ts">
+import { defineProps } from "vue";
+
+defineProps({
+  address: {
+    type: String,
+    default: () => {
+      return "";
+    },
+  },
+  name: {
+    type: String,
+    default: () => {
+      return null;
+    },
+  },
+  avatar: {
+    type: String,
+    default: () => {
+      return null;
+    },
+  },
+});
+
+const getImgUrl = (address: string) => {
+  return "https://mewcard.mewapi.io/?address=" + address;
+};
+</script>
+
+<style lang="less">
+@import "~@action/styles/theme.less";
+
+.send-process-account {
+  text-decoration: none;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  flex-direction: row;
+  width: 100%;
+  padding: 12px 16px;
+  box-sizing: border-box;
+
+  &__img {
+    width: 32px;
+    height: 24px;
+    margin-right: 12px;
+    border-radius: 5px;
+
+    &.avatar {
+      height: 32px;
+      border-radius: 100%;
+    }
+  }
+
+  &__name {
+    h4 {
+      font-style: normal;
+      font-weight: 400;
+      font-size: 16px;
+      line-height: 24px;
+      color: @primaryLabel;
+      margin: 0;
+      word-break: break-all;
+    }
+
+    p {
+      font-style: normal;
+      font-weight: 400;
+      font-size: 12px;
+      line-height: 16px;
+      color: @secondaryLabel;
+      margin: 0;
+    }
+
+    h6 {
+      font-style: normal;
+      font-weight: 400;
+      font-size: 12px;
+      line-height: 16px;
+      color: @secondaryLabel;
+      margin: 0;
+    }
+  }
+}
+</style>
diff --git a/packages/extension/src/ui/action/views/send-process/components/send-process-amount.vue b/packages/extension/src/ui/action/views/send-process/components/send-process-amount.vue
new file mode 100644
index 000000000..c12f79446
--- /dev/null
+++ b/packages/extension/src/ui/action/views/send-process/components/send-process-amount.vue
@@ -0,0 +1,96 @@
+<template>
+  <div class="send-process-amount">
+    <img :src="token.icon" alt="" />
+
+    <div class="send-process-amount__info">
+      <p>Amount</p>
+      <h4>
+        {{ amount }} <span>{{ token.symbol }}</span>
+      </h4>
+      <h6>{{ $filters.currencyFormat(amount * token.price, "USD") }}</h6>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  name: "SendProcessAmount",
+};
+</script>
+
+<script setup lang="ts">
+import { defineProps, PropType } from "vue";
+import { Token } from "@action/types/token";
+
+defineProps({
+  token: {
+    type: Object as PropType<Token>,
+    default: () => {
+      return {};
+    },
+  },
+  amount: {
+    type: Number,
+    default: () => {
+      return 0;
+    },
+  },
+});
+</script>
+
+<style lang="less">
+@import "~@action/styles/theme.less";
+
+.send-process-amount {
+  text-decoration: none;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  flex-direction: row;
+  width: 100%;
+  padding: 12px 16px;
+  box-sizing: border-box;
+
+  img {
+    width: 32px;
+    border-radius: 100%;
+    margin-right: 12px;
+    height: 32px;
+    box-shadow: inset 0px 0px 1px rgba(0, 0, 0, 0.16);
+  }
+
+  &__info {
+    h4 {
+      font-style: normal;
+      font-weight: 400;
+      font-size: 16px;
+      line-height: 24px;
+      color: @primaryLabel;
+      margin: 0;
+      word-break: break-all;
+
+      span {
+        font-variant: small-caps;
+      }
+    }
+
+    p {
+      font-style: normal;
+      font-weight: 400;
+      font-size: 12px;
+      line-height: 16px;
+      color: @secondaryLabel;
+      margin: 0;
+    }
+
+    h6 {
+      font-style: normal;
+      font-weight: 400;
+      font-size: 12px;
+      line-height: 16px;
+      color: @secondaryLabel;
+      margin: 0;
+    }
+  }
+}
+</style>
diff --git a/packages/extension/src/ui/action/views/send-process/index.vue b/packages/extension/src/ui/action/views/send-process/index.vue
new file mode 100644
index 000000000..8748bbaa7
--- /dev/null
+++ b/packages/extension/src/ui/action/views/send-process/index.vue
@@ -0,0 +1,125 @@
+<template>
+  <div class="send-process__container">
+    <div class="send-process">
+      <div class="send-process__wrap">
+        <div class="send-process__animation">
+          <Vue3Lottie
+            v-show="!isDone"
+            class="send-process__loading"
+            :animation-data="LottieSendProcess"
+            :loop="true"
+          />
+          <Vue3Lottie
+            v-show="isDone"
+            class="send-process__done"
+            :animation-data="LottieSendCheckmark"
+            :loop="false"
+          />
+        </div>
+        <div class="send-process__info">
+          <send-process-amount :token="ethereum" :amount="1.5">
+          </send-process-amount>
+          <div class="send-process__info-arrow">
+            <arrow-down />
+          </div>
+          <send-process-account
+            address="0x1FBa2e3B8B2303B2a22AA8A8202Fee3a183B2ED"
+          ></send-process-account>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  name: "SendProcess",
+};
+</script>
+
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import LottieSendProcess from "@action/assets/animation/send-process.json";
+import LottieSendCheckmark from "@action/assets/animation/send-checkmark.json";
+import ArrowDown from "@action/icons/send/arrow-down.vue";
+import SendProcessAccount from "./components/send-process-account.vue";
+import SendProcessAmount from "./components/send-process-amount.vue";
+import { ethereum } from "@action/types/mock";
+
+let isDone = ref(false);
+
+onMounted(() => {
+  setTimeout(() => {
+    isDone.value = true;
+  }, 3000);
+});
+</script>
+
+<style lang="less" scoped>
+@import "~@action/styles/theme.less";
+
+.send-process {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: row;
+
+  &__container {
+    width: 800px;
+    height: 600px;
+    background: rgba(0, 0, 0, 0.32);
+    margin: 0;
+    box-sizing: border-box;
+    position: absolute;
+    left: -340px;
+    z-index: 101;
+    top: 0;
+  }
+
+  &__wrap {
+    position: relative;
+    background: @white;
+    width: 320px;
+    height: 400px;
+    box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.16);
+    border-radius: 12px;
+    z-index: 102;
+    overflow: hidden;
+  }
+
+  &__animation {
+    width: 100%;
+    height: 176px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: row;
+  }
+
+  &__info {
+    width: 100%;
+    height: 224px;
+    background-color: @lightBg;
+    padding: 16px;
+    box-sizing: border-box;
+
+    &-arrow {
+      padding-left: 20px;
+    }
+  }
+
+  &__loading {
+    width: 128px;
+    height: 128px;
+  }
+
+  &__done {
+    width: 128px;
+    height: 128px;
+  }
+}
+</style>
diff --git a/packages/extension/src/ui/action/views/transaction-fee/components/transaction-fee-item.vue b/packages/extension/src/ui/action/views/transaction-fee/components/transaction-fee-item.vue
index e4e746f37..7d50791c9 100644
--- a/packages/extension/src/ui/action/views/transaction-fee/components/transaction-fee-item.vue
+++ b/packages/extension/src/ui/action/views/transaction-fee/components/transaction-fee-item.vue
@@ -20,7 +20,19 @@
         <p>{{ fee.price.description }}</p>
       </div>
 
-      <div class="transaction-fee-item__block-amount"></div>
+      <div
+        v-show="fee.price.speed == TransactionFeeSpeed.economy"
+        class="transaction-fee-item__block-amount down"
+      >
+        -{{ $filters.currencyFormat(2.23, "USD") }}
+      </div>
+
+      <div
+        v-show="fee.price.speed != TransactionFeeSpeed.economy"
+        class="transaction-fee-item__block-amount"
+      >
+        +{{ $filters.currencyFormat(1.23, "USD") }}
+      </div>
     </div>
   </a>
 </template>
@@ -80,6 +92,7 @@ const select = () => {
   text-decoration: none;
   padding: 4px 8px;
   box-sizing: border-box;
+  position: relative;
 
   &__block {
     display: flex;
@@ -90,10 +103,6 @@ const select = () => {
     border-radius: 8px;
     width: 100%;
 
-    &.active {
-      background-color: @primary01;
-    }
-
     svg {
       width: 24px;
       height: 24px;
@@ -122,6 +131,30 @@ const select = () => {
         margin: 0;
       }
     }
+
+    &-amount {
+      font-style: normal;
+      font-weight: 400;
+      font-size: 16px;
+      line-height: 24px;
+      text-align: right;
+      color: @primary;
+      position: absolute;
+      right: 20px;
+      top: 16px;
+
+      &.down {
+        color: @secondaryLabel;
+      }
+    }
+
+    &.active {
+      background-color: @primary01;
+
+      .transaction-fee-item__block-amount {
+        display: none;
+      }
+    }
   }
 }
 </style>
diff --git a/packages/extension/src/ui/action/views/verify-transaction/components/verify-transaction-account.vue b/packages/extension/src/ui/action/views/verify-transaction/components/verify-transaction-account.vue
new file mode 100644
index 000000000..f65de59d1
--- /dev/null
+++ b/packages/extension/src/ui/action/views/verify-transaction/components/verify-transaction-account.vue
@@ -0,0 +1,123 @@
+<template>
+  <div class="verify-transaction-account">
+    <img
+      v-if="avatar"
+      :src="avatar"
+      class="verify-transaction-account__img avatar"
+      alt=""
+    />
+    <img
+      v-else
+      :src="getImgUrl(address)"
+      class="verify-transaction-account__img"
+      :class="{ avatar: !from }"
+      alt=""
+    />
+
+    <div class="verify-transaction-account__name">
+      <p v-if="from">From</p>
+      <p v-else>To</p>
+      <h4>{{ name ? name : address }}</h4>
+      <h6 v-show="!!name">{{ $filters.replaceWithEllipsis(address, 6, 4) }}</h6>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  name: "VerifyTransactionAccount",
+};
+</script>
+
+<script setup lang="ts">
+import { defineProps } from "vue";
+
+defineProps({
+  address: {
+    type: String,
+    default: () => {
+      return "";
+    },
+  },
+  name: {
+    type: String,
+    default: () => {
+      return null;
+    },
+  },
+  avatar: {
+    type: String,
+    default: () => {
+      return null;
+    },
+  },
+  from: {
+    type: Boolean,
+    default: () => {
+      return false;
+    },
+  },
+});
+
+const getImgUrl = (address: string) => {
+  return "https://mewcard.mewapi.io/?address=" + address;
+};
+</script>
+
+<style lang="less">
+@import "~@action/styles/theme.less";
+
+.verify-transaction-account {
+  text-decoration: none;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  flex-direction: row;
+  width: 100%;
+  padding: 12px 16px;
+  box-sizing: border-box;
+  border-bottom: 1px solid @gray02;
+
+  &__img {
+    width: 32px;
+    height: 24px;
+    margin-right: 12px;
+    border-radius: 5px;
+
+    &.avatar {
+      height: 32px;
+      border-radius: 100%;
+    }
+  }
+
+  &__name {
+    h4 {
+      font-style: normal;
+      font-weight: 400;
+      font-size: 16px;
+      line-height: 24px;
+      color: @primaryLabel;
+      margin: 0;
+      word-break: break-all;
+    }
+
+    p {
+      font-style: normal;
+      font-weight: 400;
+      font-size: 12px;
+      line-height: 16px;
+      color: @secondaryLabel;
+      margin: 0;
+    }
+
+    h6 {
+      font-style: normal;
+      font-weight: 400;
+      font-size: 12px;
+      line-height: 16px;
+      color: @secondaryLabel;
+      margin: 0;
+    }
+  }
+}
+</style>
diff --git a/packages/extension/src/ui/action/views/verify-transaction/components/verify-transaction-amount.vue b/packages/extension/src/ui/action/views/verify-transaction/components/verify-transaction-amount.vue
new file mode 100644
index 000000000..33586ddca
--- /dev/null
+++ b/packages/extension/src/ui/action/views/verify-transaction/components/verify-transaction-amount.vue
@@ -0,0 +1,97 @@
+<template>
+  <div class="verify-transaction-amount">
+    <img :src="token.icon" alt="" />
+
+    <div class="verify-transaction-amount__info">
+      <p>Amount</p>
+      <h4>
+        {{ amount }} <span>{{ token.symbol }}</span>
+      </h4>
+      <h6>{{ $filters.currencyFormat(amount * token.price, "USD") }}</h6>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  name: "VerifyTransactionAmount",
+};
+</script>
+
+<script setup lang="ts">
+import { defineProps, PropType } from "vue";
+import { Token } from "@action/types/token";
+
+defineProps({
+  token: {
+    type: Object as PropType<Token>,
+    default: () => {
+      return {};
+    },
+  },
+  amount: {
+    type: Number,
+    default: () => {
+      return 0;
+    },
+  },
+});
+</script>
+
+<style lang="less">
+@import "~@action/styles/theme.less";
+
+.verify-transaction-amount {
+  text-decoration: none;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  flex-direction: row;
+  width: 100%;
+  padding: 12px 16px;
+  box-sizing: border-box;
+  border-bottom: 1px solid @gray02;
+
+  img {
+    width: 32px;
+    border-radius: 100%;
+    margin-right: 12px;
+    height: 32px;
+    box-shadow: inset 0px 0px 1px rgba(0, 0, 0, 0.16);
+  }
+
+  &__info {
+    h4 {
+      font-style: normal;
+      font-weight: 400;
+      font-size: 16px;
+      line-height: 24px;
+      color: @primaryLabel;
+      margin: 0;
+      word-break: break-all;
+
+      span {
+        font-variant: small-caps;
+      }
+    }
+
+    p {
+      font-style: normal;
+      font-weight: 400;
+      font-size: 12px;
+      line-height: 16px;
+      color: @secondaryLabel;
+      margin: 0;
+    }
+
+    h6 {
+      font-style: normal;
+      font-weight: 400;
+      font-size: 12px;
+      line-height: 16px;
+      color: @secondaryLabel;
+      margin: 0;
+    }
+  }
+}
+</style>
diff --git a/packages/extension/src/ui/action/views/verify-transaction/components/verify-transaction-fee.vue b/packages/extension/src/ui/action/views/verify-transaction/components/verify-transaction-fee.vue
new file mode 100644
index 000000000..d5704d222
--- /dev/null
+++ b/packages/extension/src/ui/action/views/verify-transaction/components/verify-transaction-fee.vue
@@ -0,0 +1,72 @@
+<template>
+  <div class="verify-transaction-fee">
+    <p class="verify-transaction-fee__fiat">
+      Network fee: {{ $filters.currencyFormat(7.12, "USD") }}
+    </p>
+    <p class="verify-transaction-fee__crypto">0.0000123 <span>eth</span></p>
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  name: "VerifyTransactionFee",
+};
+</script>
+
+<script setup lang="ts">
+import { defineProps, PropType } from "vue";
+import { TransactionFee } from "@action/types/fee";
+
+defineProps({
+  fee: {
+    type: Object as PropType<TransactionFee>,
+    default: () => {
+      return {};
+    },
+  },
+  amount: {
+    type: Number,
+    default: () => {
+      return 0;
+    },
+  },
+});
+</script>
+
+<style lang="less">
+@import "~@action/styles/theme.less";
+
+.verify-transaction-fee {
+  width: 100%;
+  padding: 10px 16px;
+  box-sizing: border-box;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  flex-direction: row;
+
+  &__fiat {
+    font-style: normal;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 20px;
+    letter-spacing: 0.25px;
+    color: @secondaryLabel;
+    margin: 0 8px 0 0;
+  }
+
+  &__crypto {
+    font-style: normal;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 20px;
+    letter-spacing: 0.25px;
+    color: @tertiaryLabel;
+    margin: 0;
+
+    span {
+      font-variant: small-caps;
+    }
+  }
+}
+</style>
diff --git a/packages/extension/src/ui/action/views/verify-transaction/components/verify-transaction-network.vue b/packages/extension/src/ui/action/views/verify-transaction/components/verify-transaction-network.vue
index bfb5b6e9a..638590ce6 100644
--- a/packages/extension/src/ui/action/views/verify-transaction/components/verify-transaction-network.vue
+++ b/packages/extension/src/ui/action/views/verify-transaction/components/verify-transaction-network.vue
@@ -39,8 +39,7 @@ defineProps({
   align-items: center;
   flex-direction: row;
   width: 100%;
-  height: 65px;
-  padding: 16px;
+  padding: 12px 16px;
   box-sizing: border-box;
   border-bottom: 1px solid @gray02;
 
diff --git a/packages/extension/src/ui/action/views/verify-transaction/index.vue b/packages/extension/src/ui/action/views/verify-transaction/index.vue
index f4ab47181..4bde705ce 100644
--- a/packages/extension/src/ui/action/views/verify-transaction/index.vue
+++ b/packages/extension/src/ui/action/views/verify-transaction/index.vue
@@ -16,6 +16,20 @@
           v-show="!!selectedNetwork"
           :network="selectedNetwork"
         ></verify-transaction-network>
+        <verify-transaction-account
+          name="My personal account"
+          address="0x14502CF6C0A13167Dc2D0E25Dabf5FBDB68C2967"
+          :from="true"
+        ></verify-transaction-account>
+        <verify-transaction-account
+          address="0x1FBa2e3B8B2303B2a22AA8A8202Fee3a183B2ED"
+        ></verify-transaction-account>
+        <verify-transaction-amount :token="ethereum" :amount="1.5">
+        </verify-transaction-amount>
+        <verify-transaction-fee
+          :fee="recommendedFee"
+          :amount="1.5"
+        ></verify-transaction-fee>
       </div>
 
       <div class="verify-transaction__buttons">
@@ -27,6 +41,8 @@
         </div>
       </div>
     </div>
+
+    <send-process v-show="isProcessing"></send-process>
   </div>
 </template>
 
@@ -42,9 +58,14 @@ import { useRoute, useRouter } from "vue-router";
 import CloseIcon from "@action/icons/common/close-icon.vue";
 import BaseButton from "@action/components/base-button/index.vue";
 import VerifyTransactionNetwork from "./components/verify-transaction-network.vue";
+import VerifyTransactionAccount from "./components/verify-transaction-account.vue";
+import VerifyTransactionAmount from "./components/verify-transaction-amount.vue";
+import VerifyTransactionFee from "./components/verify-transaction-fee.vue";
+import SendProcess from "@action/views/send-process/index.vue";
 import TabState from "@/libs/tab-state";
 import { NodeType } from "@/types/provider";
 import { getAllNetworks } from "@/libs/utils/networks";
+import { ethereum, recommendedFee } from "@action/types/mock";
 
 const tabstate = new TabState();
 const route = useRoute();
@@ -53,6 +74,7 @@ const networks: NodeType[] = getAllNetworks();
 
 const selected: string = route.params.id as string;
 let selectedNetwork = ref(undefined);
+let isProcessing = ref(false);
 defineExpose({ selectedNetwork });
 
 onMounted(async () => {
@@ -69,7 +91,15 @@ const close = () => {
 };
 
 const sendAction = () => {
-  console.log("sendAction");
+  isProcessing.value = true;
+
+  setTimeout(() => {
+    isProcessing.value = false;
+  }, 4000);
+
+  setTimeout(() => {
+    router.go(-2);
+  }, 4500);
 };
 </script>
 

From 74dbaf78b8aec85cbc808e6022822395aca16340 Mon Sep 17 00:00:00 2001
From: Mihail Polev <mpolev364@gmail.com>
Date: Mon, 25 Apr 2022 21:44:10 +0700
Subject: [PATCH 5/5] =?UTF-8?q?devop:=20=F0=9F=94=A7=20fix=20and=20update?=
 =?UTF-8?q?=20UI=20to=20actual=20design?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/extension/src/ui/action/App.vue      |  35 +++--
 .../components/header-accounts.vue            |   4 +
 .../app-menu/components/app-menu-item.vue     |  12 +-
 .../ui/action/components/app-menu/index.vue   |   8 +
 .../action/components/base-search/index.vue   |  58 ++++++-
 .../components/base-select-option.vue         |  58 +++++++
 .../action/components/base-select/index.vue   | 142 ++++++++++++++++++
 .../components/phrase-checkbox/index.vue      |   4 +-
 .../src/ui/action/icons/common/clear-icon.vue |  23 +++
 .../src/ui/action/icons/common/info-icon.vue  |   6 +-
 .../ui/action/icons/common/right-arrow.vue    |  20 +++
 .../ui/action/icons/header/external-icon.vue  |  25 +++
 .../extension/src/ui/action/styles/color.less |   1 +
 .../components/accounts-list-item.vue         |  14 +-
 .../accounts/components/add-account-form.vue  |   6 +-
 .../src/ui/action/views/accounts/index.vue    |  22 ++-
 .../components/add-network-header.vue         |  51 +++----
 .../components/add-network-item.vue           |   3 +-
 .../components/add-network-search.vue         |  65 ++++++++
 .../src/ui/action/views/add-network/index.vue | 109 ++++++++++----
 .../src/ui/action/views/deposit/index.vue     |  35 +++--
 .../network-activity-transaction.vue          |   6 +-
 .../settings/components/settings-button.vue   |  99 ++++++++++++
 .../settings/components/settings-header.vue   |  62 ++++++++
 .../src/ui/action/views/settings/index.vue    | 107 +++++++++++++
 25 files changed, 859 insertions(+), 116 deletions(-)
 create mode 100644 packages/extension/src/ui/action/components/base-select/components/base-select-option.vue
 create mode 100644 packages/extension/src/ui/action/components/base-select/index.vue
 create mode 100644 packages/extension/src/ui/action/icons/common/clear-icon.vue
 create mode 100644 packages/extension/src/ui/action/icons/common/right-arrow.vue
 create mode 100644 packages/extension/src/ui/action/icons/header/external-icon.vue
 create mode 100644 packages/extension/src/ui/action/views/add-network/components/add-network-search.vue
 create mode 100644 packages/extension/src/ui/action/views/settings/components/settings-button.vue
 create mode 100644 packages/extension/src/ui/action/views/settings/components/settings-header.vue
 create mode 100644 packages/extension/src/ui/action/views/settings/index.vue

diff --git a/packages/extension/src/ui/action/App.vue b/packages/extension/src/ui/action/App.vue
index 8fc9ee6ef..15dc35e8b 100644
--- a/packages/extension/src/ui/action/App.vue
+++ b/packages/extension/src/ui/action/App.vue
@@ -2,7 +2,7 @@
   <div class="app">
     <div ref="appMenuRef" class="app__menu">
       <logo-min :color="networkGradient" class="app__menu-logo" />
-      <base-search :is-border="false" />
+      <base-search :input="searchInput" :is-border="false" />
       <app-menu
         :networks="networks"
         :selected="(route.params.id as string)"
@@ -13,11 +13,7 @@
         to Cretate / Restore
       </a>
       <div class="app__menu-footer">
-        <a
-          class="app__menu-add"
-          :class="{ active: $route.name == 'add-network' }"
-          @click="addNetwork()"
-        >
+        <a class="app__menu-add" @click="addNetworkToggle()">
           <add-icon />
           Add a network
         </a>
@@ -27,7 +23,7 @@
             <hold-icon />
           </a>
 
-          <a class="app__menu-link">
+          <a class="app__menu-link" @click="settingsToggle()">
             <settings-icon />
           </a>
         </div>
@@ -51,14 +47,18 @@
         </transition>
       </router-view>
 
-      <!-- <router-view name="modal"></router-view>
-      <router-view name="accounts"></router-view> -->
-
       <network-menu
         :selected="(route.params.id as string)"
         :network="currentNetwork"
       />
     </div>
+
+    <add-network
+      v-show="addNetworkShow"
+      :close="addNetworkToggle"
+    ></add-network>
+
+    <settings v-show="settingsShow" :close="settingsToggle"></settings>
   </div>
 </template>
 
@@ -72,6 +72,8 @@ import LogoMin from "./icons/common/logo-min.vue";
 import AddIcon from "./icons/common/add-icon.vue";
 import SettingsIcon from "./icons/common/settings-icon.vue";
 import HoldIcon from "./icons/common/hold-icon.vue";
+import AddNetwork from "./views/add-network/index.vue";
+import Settings from "./views/settings/index.vue";
 import { useRouter, useRoute } from "vue-router";
 import { WindowPromise } from "@/libs/window-promise";
 import { NodeType } from "@/types/provider";
@@ -104,6 +106,8 @@ const defaultNetwork = networks.find(
 ) as NodeType;
 const currentNetwork = ref<NodeType>(defaultNetwork);
 const kr = new PublicKeyRing();
+const addNetworkShow = ref(false);
+const settingsShow = ref(false);
 
 onMounted(async () => {
   const curNetwork = await tabstate.getSelectedNetWork();
@@ -165,8 +169,11 @@ const setNetwork = async (network: NodeType) => {
     }
   }
 };
-const addNetwork = () => {
-  router.push({ name: "add-network" });
+const addNetworkToggle = () => {
+  addNetworkShow.value = !addNetworkShow.value;
+};
+const settingsToggle = () => {
+  settingsShow.value = !settingsShow.value;
 };
 const onSelectedAddressChanged = async (newAccount: KeyRecord) => {
   accountHeaderData.value.selectedAccount = newAccount;
@@ -199,6 +206,10 @@ const showNetworkMenu = () => {
       route.name == "dapps")
   );
 };
+
+const searchInput = (text: string) => {
+  console.log(text);
+};
 </script>
 
 <style lang="less">
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 7fd196551..271fd28a6 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
@@ -9,6 +9,9 @@
       <switch-arrow />
     </a>
     <div class="account__actions">
+      <a class="account__actions--copy" href="#">
+        <icon-external />
+      </a>
       <a class="account__actions--copy" @click="copy(address)">
         <icon-copy />
       </a>
@@ -29,6 +32,7 @@ export default {
 import SwitchArrow from "@action/icons/header/switch_arrow.vue";
 import IconQr from "@action/icons/header/qr_icon.vue";
 import IconCopy from "@action/icons/header/copy_icon.vue";
+import IconExternal from "@action/icons/header/external-icon.vue";
 import { PropType } from "vue";
 import { NodeType } from "@/types/provider";
 
diff --git a/packages/extension/src/ui/action/components/app-menu/components/app-menu-item.vue b/packages/extension/src/ui/action/components/app-menu/components/app-menu-item.vue
index 6db00ca10..28b1db338 100644
--- a/packages/extension/src/ui/action/components/app-menu/components/app-menu-item.vue
+++ b/packages/extension/src/ui/action/components/app-menu/components/app-menu-item.vue
@@ -46,9 +46,8 @@ defineProps({
     margin-bottom: 4px;
     cursor: pointer;
 
-    &.active,
     &:hover {
-      background: @black007;
+      background: @black004;
       border-radius: 10px;
     }
 
@@ -66,6 +65,15 @@ defineProps({
       letter-spacing: 0.25px;
       color: @primaryLabel;
     }
+
+    &.active {
+      background: @black007;
+      border-radius: 10px;
+
+      span {
+        font-weight: 500;
+      }
+    }
   }
 }
 </style>
diff --git a/packages/extension/src/ui/action/components/app-menu/index.vue b/packages/extension/src/ui/action/components/app-menu/index.vue
index e4bc16ef7..e07e16464 100644
--- a/packages/extension/src/ui/action/components/app-menu/index.vue
+++ b/packages/extension/src/ui/action/components/app-menu/index.vue
@@ -52,6 +52,14 @@ defineProps({
     margin: auto;
     width: 100%;
     max-height: 400px;
+
+    &.ps--active-y {
+      padding-right: 0 !important;
+    }
+
+    .ps__rail-y {
+      right: 4px !important;
+    }
   }
 }
 </style>
diff --git a/packages/extension/src/ui/action/components/base-search/index.vue b/packages/extension/src/ui/action/components/base-search/index.vue
index 359e32e20..3c84bfca2 100644
--- a/packages/extension/src/ui/action/components/base-search/index.vue
+++ b/packages/extension/src/ui/action/components/base-search/index.vue
@@ -1,13 +1,19 @@
 <template>
-  <div class="app-search" :class="{ border: isBorder }">
+  <div class="app-search" :class="{ border: isBorder, focus: isFocus }">
     <search-icon class="app-search__icon" />
     <input
+      v-model="searchText"
       type="text"
-      value=""
       placeholder="Search networks"
       class="app-search__input"
       :class="{ border: isBorder }"
+      @focus="changeFocus"
+      @blur="changeFocus"
+      @input="changeValue"
     />
+    <a v-if="searchText.length > 0" class="app-search__clear" @click="clear">
+      <clear-icon />
+    </a>
   </div>
 </template>
 
@@ -18,36 +24,68 @@ export default {
 </script>
 
 <script setup lang="ts">
+import { ref } from "vue";
 import SearchIcon from "@action/icons/common/search.vue";
+import ClearIcon from "@action/icons/common/clear-icon.vue";
 
-defineProps({
+let isFocus = ref(false);
+let searchText = ref("");
+
+const props = defineProps({
   isBorder: {
     type: Boolean,
     default: () => {
       return {};
     },
   },
+  input: {
+    type: Function,
+    default: () => {
+      return null;
+    },
+  },
 });
+
+const changeFocus = () => {
+  isFocus.value = !isFocus.value;
+};
+
+const changeValue = (e: any) => {
+  searchText.value = e.target.value;
+  props.input(e.target.value);
+};
+
+const clear = () => {
+  searchText.value = "";
+  props.input("");
+};
 </script>
 
 <style lang="less">
 @import "~@action/styles/theme.less";
 
 .app-search {
-  background: @white;
-  box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.05), 0px 0px 1px rgba(0, 0, 0, 0.25);
+  background: @gray01;
   border-radius: 10px;
   margin: 17px 0 8px 0;
   height: 40px;
   width: 100%;
   position: relative;
   padding-left: 40px;
+  padding-right: 40px;
   box-sizing: border-box;
 
   &.border {
     border: 1px solid rgba(0, 0, 0, 0.1);
-    box-shadow: none;
+    box-shadow: none !important;
     margin: 0;
+    background: @white;
+  }
+
+  &.focus {
+    background: @white;
+    box-shadow: 0px 0.25px 1px rgba(0, 0, 0, 0.039),
+      0px 0.85px 3px rgba(0, 0, 0, 0.19);
   }
 
   &__icon {
@@ -66,10 +104,18 @@ defineProps({
     letter-spacing: 0.25px;
     background: none;
     color: @primaryLabel;
+    width: 100%;
 
     &.border {
       line-height: 38px;
     }
   }
+
+  &__clear {
+    position: absolute;
+    right: 12px;
+    top: 12px;
+    cursor: pointer;
+  }
 }
 </style>
diff --git a/packages/extension/src/ui/action/components/base-select/components/base-select-option.vue b/packages/extension/src/ui/action/components/base-select/components/base-select-option.vue
new file mode 100644
index 000000000..78f809958
--- /dev/null
+++ b/packages/extension/src/ui/action/components/base-select/components/base-select-option.vue
@@ -0,0 +1,58 @@
+<template>
+  <a class="base-select__option" @click="select()">
+    <h5>{{ title }}</h5>
+  </a>
+</template>
+
+<script lang="ts">
+export default {
+  name: "BaseSelectOption",
+};
+</script>
+
+<script setup lang="ts">
+const props = defineProps({
+  select: {
+    type: Function,
+    default: () => {
+      return null;
+    },
+  },
+  title: {
+    type: String,
+    default: () => {
+      return "";
+    },
+  },
+});
+
+const select = () => {
+  props.select(props.title);
+};
+</script>
+
+<style lang="less">
+@import "~@action/styles/theme.less";
+
+.base-select {
+  &__option {
+    width: 100%;
+    text-decoration: none;
+    cursor: pointer;
+    height: 44px;
+    padding-left: 12px;
+    box-sizing: border-box;
+    display: block;
+
+    h5 {
+      font-style: normal;
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 44px;
+      letter-spacing: 0.25px;
+      color: @primaryLabel;
+      margin: 0;
+    }
+  }
+}
+</style>
diff --git a/packages/extension/src/ui/action/components/base-select/index.vue b/packages/extension/src/ui/action/components/base-select/index.vue
new file mode 100644
index 000000000..a2edc9a59
--- /dev/null
+++ b/packages/extension/src/ui/action/components/base-select/index.vue
@@ -0,0 +1,142 @@
+<template>
+  <div class="base-select__container">
+    <a class="base-select" @click="open">
+      <p>{{ title }}</p>
+      <h5>{{ value }}</h5>
+
+      <div class="base-select__arrow">
+        <switch-arrow />
+      </div>
+    </a>
+    <div v-show="isOpen" class="base-select__dropdown">
+      <base-select-option
+        v-for="(item, index) in list"
+        :key="index"
+        :title="(item as string)"
+        :select="selectLanguage"
+      ></base-select-option>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  name: "BaseSelect",
+};
+</script>
+
+<script setup lang="ts">
+import { defineProps, ref } from "vue";
+import SwitchArrow from "@action/icons/header/switch_arrow.vue";
+import BaseSelectOption from "./components/base-select-option.vue";
+
+let isOpen = ref(false);
+
+const props = defineProps({
+  select: {
+    type: Function,
+    default: () => {
+      return null;
+    },
+  },
+  title: {
+    type: String,
+    default: () => {
+      return "";
+    },
+  },
+  value: {
+    type: String,
+    default: () => {
+      return "";
+    },
+  },
+  list: {
+    type: Array,
+    default: () => {
+      return [];
+    },
+  },
+});
+
+const open = () => {
+  isOpen.value = !isOpen.value;
+};
+
+const selectLanguage = (value: string) => {
+  props.select(value);
+  isOpen.value = !isOpen.value;
+};
+</script>
+
+<style lang="less">
+@import "~@action/styles/theme.less";
+
+.base-select {
+  height: 56px;
+  background: #ffffff;
+  box-sizing: border-box;
+  border: 1px solid @gray02;
+  box-sizing: border-box;
+  border-radius: 10px;
+  width: 100%;
+  padding: 8px 16px;
+  display: block;
+  position: relative;
+  cursor: pointer;
+  text-decoration: none;
+
+  h5 {
+    font-style: normal;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 24px;
+    color: @primaryLabel;
+    width: 290px;
+    margin: 0;
+  }
+
+  p {
+    font-style: normal;
+    font-weight: 400;
+    font-size: 12px;
+    line-height: 16px;
+    letter-spacing: 0.5px;
+    color: @secondaryLabel;
+    margin: 0;
+    width: 290px;
+
+    span {
+      font-variant: small-caps;
+    }
+  }
+
+  &__arrow {
+    position: absolute;
+    font-size: 0;
+    padding: 4px;
+    right: 8px;
+    top: 50%;
+    margin-top: -16px;
+  }
+
+  &__container {
+    position: relative;
+    margin: 0 32px 16px 32px;
+    z-index: 109;
+  }
+
+  &__dropdown {
+    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;
+    padding: 4px;
+    position: absolute;
+    width: 100%;
+    left: 0;
+    top: 58px;
+    box-sizing: border-box;
+  }
+}
+</style>
diff --git a/packages/extension/src/ui/action/components/phrase-checkbox/index.vue b/packages/extension/src/ui/action/components/phrase-checkbox/index.vue
index 96753807f..4f0ebe025 100644
--- a/packages/extension/src/ui/action/components/phrase-checkbox/index.vue
+++ b/packages/extension/src/ui/action/components/phrase-checkbox/index.vue
@@ -1,7 +1,7 @@
 <template>
   <label class="phrase-checkbox">
     <input type="checkbox" :checked="isChecked" @change="checkLocal($event)" />
-    <div class="base-checkbox__wrap">
+    <div class="phrase-checkbox__wrap">
       <span>{{ title }}</span>
     </div>
   </label>
@@ -67,7 +67,7 @@ const checkLocal = (e: any) => {
     display: none;
 
     &:checked {
-      & + .base-checkbox__wrap {
+      & + .phrase-checkbox__wrap {
         background: @primary;
         border: 0 none;
 
diff --git a/packages/extension/src/ui/action/icons/common/clear-icon.vue b/packages/extension/src/ui/action/icons/common/clear-icon.vue
new file mode 100644
index 000000000..ff2ab179d
--- /dev/null
+++ b/packages/extension/src/ui/action/icons/common/clear-icon.vue
@@ -0,0 +1,23 @@
+<template>
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M8 2C11.312 2 14 4.688 14 8C14 11.312 11.312 14 8 14C4.688 14 2 11.312 2 8C2 4.688 4.688 2 8 2ZM5.66667 5.66667C5.40667 5.92667 5.40667 6.34667 5.66667 6.60667L7.06167 8.00167L5.66667 9.39333C5.40667 9.65333 5.40667 10.0733 5.66667 10.3333C5.92667 10.5933 6.34667 10.5933 6.60667 10.3333L8.00167 8.94167L9.39333 10.3333C9.65333 10.5933 10.0733 10.5933 10.3333 10.3333C10.5933 10.0733 10.5933 9.65333 10.3333 9.39333L8.94167 8.00167L10.3333 6.6C10.5867 6.34667 10.5867 5.92 10.3333 5.66667C10.0733 5.40667 9.65333 5.40667 9.39333 5.66667L8.00167 7.06167L6.60667 5.66667C6.34667 5.40667 5.92667 5.40667 5.66667 5.66667Z"
+      fill="black"
+      fill-opacity="0.38"
+    />
+  </svg>
+</template>
+<style scoped>
+svg {
+  display: inline-block;
+  vertical-align: baseline;
+}
+</style>
diff --git a/packages/extension/src/ui/action/icons/common/info-icon.vue b/packages/extension/src/ui/action/icons/common/info-icon.vue
index 624e66288..1868c5095 100644
--- a/packages/extension/src/ui/action/icons/common/info-icon.vue
+++ b/packages/extension/src/ui/action/icons/common/info-icon.vue
@@ -6,10 +6,14 @@
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
   >
+    <path
+      d="M14.5 8C14.5 11.5899 11.5899 14.5 8 14.5C4.41015 14.5 1.5 11.5899 1.5 8C1.5 4.41015 4.41015 1.5 8 1.5C11.5899 1.5 14.5 4.41015 14.5 8Z"
+      stroke="#5F6368"
+    />
     <path
       fill-rule="evenodd"
       clip-rule="evenodd"
-      d="M8.00016 1.33334C4.32016 1.33334 1.3335 4.32001 1.3335 8.00001C1.3335 11.68 4.32016 14.6667 8.00016 14.6667C11.6802 14.6667 14.6668 11.68 14.6668 8.00001C14.6668 4.32001 11.6802 1.33334 8.00016 1.33334ZM8.00016 11.3333C7.6335 11.3333 7.3335 11.0333 7.3335 10.6667V8.00001C7.3335 7.63334 7.6335 7.33334 8.00016 7.33334C8.36683 7.33334 8.66683 7.63334 8.66683 8.00001V10.6667C8.66683 11.0333 8.36683 11.3333 8.00016 11.3333ZM8.66683 5.33334C8.66683 5.70153 8.36835 6.00001 8.00016 6.00001C7.63197 6.00001 7.3335 5.70153 7.3335 5.33334C7.3335 4.96515 7.63197 4.66668 8.00016 4.66668C8.36835 4.66668 8.66683 4.96515 8.66683 5.33334Z"
+      d="M7.93805 5.5568C8.43903 5.5568 8.8302 5.15876 8.8302 4.66464C8.8302 4.16366 8.43903 3.76562 7.93805 3.76562C7.44393 3.76562 7.04589 4.16366 7.04589 4.66464C7.04589 5.15876 7.44393 5.5568 7.93805 5.5568ZM9.59197 11.7744C9.87334 11.7744 10.0929 11.5754 10.0929 11.2941C10.0929 11.0264 9.87334 10.8137 9.59197 10.8137H8.74099V7.32053C8.74099 6.94994 8.55569 6.70288 8.20569 6.70288H6.9155C6.63413 6.70288 6.41452 6.91562 6.41452 7.18327C6.41452 7.46464 6.63413 7.66366 6.9155 7.66366H7.64981V10.8137H6.79883C6.51746 10.8137 6.29785 11.0264 6.29785 11.2941C6.29785 11.5754 6.51746 11.7744 6.79883 11.7744H9.59197Z"
       fill="#5F6368"
     />
   </svg>
diff --git a/packages/extension/src/ui/action/icons/common/right-arrow.vue b/packages/extension/src/ui/action/icons/common/right-arrow.vue
new file mode 100644
index 000000000..865f2caa7
--- /dev/null
+++ b/packages/extension/src/ui/action/icons/common/right-arrow.vue
@@ -0,0 +1,20 @@
+<template>
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M9.00002 6.71075C8.61002 7.10075 8.61002 7.73075 9.00002 8.12075L12.88 12.0008L9.00002 15.8808C8.61002 16.2708 8.61002 16.9008 9.00002 17.2908C9.39002 17.6808 10.02 17.6808 10.41 17.2908L15 12.7008C15.39 12.3108 15.39 11.6808 15 11.2908L10.41 6.70075C10.03 6.32075 9.39002 6.32075 9.00002 6.71075Z"
+      fill="#5F6368"
+    />
+  </svg>
+</template>
+<style scoped>
+svg {
+  display: inline-block;
+  vertical-align: baseline;
+}
+</style>
diff --git a/packages/extension/src/ui/action/icons/header/external-icon.vue b/packages/extension/src/ui/action/icons/header/external-icon.vue
new file mode 100644
index 000000000..14246ee1a
--- /dev/null
+++ b/packages/extension/src/ui/action/icons/header/external-icon.vue
@@ -0,0 +1,25 @@
+<template>
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M8.16146 4H9C9.55229 4 10 4.44772 10 5C10 5.55229 9.55229 6 9 6H8.2C7.62345 6 7.25118 6.00078 6.96784 6.02393C6.69618 6.04613 6.59546 6.0838 6.54601 6.109C6.35785 6.20487 6.20487 6.35785 6.109 6.54601C6.0838 6.59546 6.04613 6.69618 6.02393 6.96784C6.00078 7.25118 6 7.62345 6 8.2V15.8C6 16.3766 6.00078 16.7488 6.02393 17.0322C6.04613 17.3038 6.0838 17.4045 6.109 17.454C6.20487 17.6422 6.35785 17.7951 6.54601 17.891C6.59546 17.9162 6.69618 17.9539 6.96784 17.9761C7.25118 17.9992 7.62345 18 8.2 18H15.8C16.3766 18 16.7488 17.9992 17.0322 17.9761C17.3038 17.9539 17.4045 17.9162 17.454 17.891C17.6422 17.7951 17.7951 17.6422 17.891 17.454C17.9162 17.4045 17.9539 17.3038 17.9761 17.0322C17.9992 16.7488 18 16.3766 18 15.8V15C18 14.4477 18.4477 14 19 14C19.5523 14 20 14.4477 20 15V15.8385C20 16.3656 20 16.8205 19.9694 17.195C19.9371 17.5904 19.8658 17.9836 19.673 18.362C19.3854 18.9265 18.9265 19.3854 18.362 19.673C17.9836 19.8658 17.5904 19.9371 17.195 19.9694C16.8205 20 16.3658 20 15.8387 20H8.16148C7.63438 20 7.17952 20 6.80497 19.9694C6.40963 19.9371 6.01641 19.8658 5.63803 19.673C5.07354 19.3854 4.6146 18.9265 4.32698 18.362C4.13419 17.9836 4.06287 17.5904 4.03057 17.195C3.99997 16.8205 3.99998 16.3657 4 15.8386V8.16146C3.99998 7.63433 3.99997 7.17954 4.03057 6.80497C4.06287 6.40963 4.13419 6.01641 4.32698 5.63803C4.6146 5.07354 5.07354 4.6146 5.63803 4.32698C6.01641 4.13419 6.40963 4.06287 6.80497 4.03057C7.17954 3.99997 7.63433 3.99998 8.16146 4Z"
+      fill="#202124"
+    />
+    <path
+      d="M11.2929 12.7071C10.9024 12.3166 10.9024 11.6834 11.2929 11.2929L16.5858 6H13C12.4477 6 12 5.55229 12 5C12 4.44772 12.4477 4 13 4H20V11C20 11.5523 19.5523 12 19 12C18.4477 12 18 11.5523 18 11L18 7.41421L12.7071 12.7071C12.3166 13.0976 11.6834 13.0976 11.2929 12.7071Z"
+      fill="#202124"
+    />
+  </svg>
+</template>
+
+<style scoped>
+svg {
+  display: inline-block;
+  vertical-align: baseline;
+}
+</style>
diff --git a/packages/extension/src/ui/action/styles/color.less b/packages/extension/src/ui/action/styles/color.less
index 27fbb1bef..27f11448a 100644
--- a/packages/extension/src/ui/action/styles/color.less
+++ b/packages/extension/src/ui/action/styles/color.less
@@ -7,6 +7,7 @@
 @black: #000000;
 @black07: rgba(0, 0, 0, 0.7);
 @black007: rgba(0, 0, 0, 0.07);
+@black004: rgba(0, 0, 0, 0.04);
 @white: #FFFFFF;
 @gray01: rgba(95, 99, 104, 0.1);
 @gray02: rgba(95, 99, 104, 0.2);
diff --git a/packages/extension/src/ui/action/views/accounts/components/accounts-list-item.vue b/packages/extension/src/ui/action/views/accounts/components/accounts-list-item.vue
index 0346d8327..f555e87ee 100644
--- a/packages/extension/src/ui/action/views/accounts/components/accounts-list-item.vue
+++ b/packages/extension/src/ui/action/views/accounts/components/accounts-list-item.vue
@@ -62,7 +62,7 @@ defineProps({
 @import "~@action/styles/theme.less";
 
 .accounts-item {
-  width: 100%;
+  width: calc(~"100% - 16px");
   height: 56px;
   text-decoration: none;
   display: flex;
@@ -71,8 +71,18 @@ defineProps({
   position: relative;
   flex-direction: row;
   box-sizing: border-box;
-  padding: 0 12px 0 12px;
+  padding: 0 8px 0 8px;
   cursor: pointer;
+  margin-left: 8px;
+
+  &:first-child {
+    margin-top: 9px;
+  }
+
+  &:hover {
+    background: @black004;
+    border-radius: 10px;
+  }
 
   &.disabled {
     opacity: 0.16;
diff --git a/packages/extension/src/ui/action/views/accounts/components/add-account-form.vue b/packages/extension/src/ui/action/views/accounts/components/add-account-form.vue
index d6db35c3b..35e19ca21 100644
--- a/packages/extension/src/ui/action/views/accounts/components/add-account-form.vue
+++ b/packages/extension/src/ui/action/views/accounts/components/add-account-form.vue
@@ -82,7 +82,7 @@ const sendAction = () => {
   box-sizing: border-box;
   width: 344px;
   height: auto;
-  z-index: 103;
+  z-index: 107;
   position: relative;
 
   &__container {
@@ -91,7 +91,7 @@ const sendAction = () => {
     left: 0px;
     top: 0px;
     position: fixed;
-    z-index: 101;
+    z-index: 105;
     display: flex;
     box-sizing: border-box;
     justify-content: center;
@@ -106,7 +106,7 @@ const sendAction = () => {
     left: 0px;
     top: 0px;
     position: absolute;
-    z-index: 102;
+    z-index: 106;
   }
 
   h3 {
diff --git a/packages/extension/src/ui/action/views/accounts/index.vue b/packages/extension/src/ui/action/views/accounts/index.vue
index 19fe77483..500d84966 100644
--- a/packages/extension/src/ui/action/views/accounts/index.vue
+++ b/packages/extension/src/ui/action/views/accounts/index.vue
@@ -90,9 +90,7 @@ const props = defineProps({
 });
 
 const close = () => {
-  setTimeout(() => {
-    props.toggle();
-  }, 150);
+  props.toggle();
 };
 const selectAccount = (address: string) => {
   for (const acc of props.accountInfo.activeAccounts) {
@@ -103,14 +101,14 @@ const selectAccount = (address: string) => {
   }
   setTimeout(() => {
     props.toggle();
-  }, 150);
+  }, 100);
 };
 const addAccount = () => {
   props.toggle();
 
   setTimeout(() => {
     isAddAccount.value = true;
-  }, 150);
+  }, 100);
 };
 const closeAddAccount = () => {
   isAddAccount.value = false;
@@ -122,12 +120,12 @@ const closeAddAccount = () => {
 @import "~@action/styles/custom-scroll.less";
 
 .accounts {
-  width: 100%;
-  height: 100%;
+  width: 800px;
+  height: 600px;
   position: absolute;
-  left: 0;
+  left: -340px;
   top: 0;
-  z-index: 101;
+  z-index: 105;
   display: none;
 
   &.show {
@@ -140,7 +138,7 @@ const closeAddAccount = () => {
     position: absolute;
     left: 0;
     top: 0;
-    z-index: 102;
+    z-index: 106;
   }
 
   &__wrap {
@@ -148,13 +146,13 @@ const closeAddAccount = () => {
     width: 344px;
     height: auto;
     max-height: 530px;
-    left: 8px;
+    left: 348px;
     top: 50px;
     background: #ffffff;
     box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.039),
       0px 7px 24px rgba(0, 0, 0, 0.19);
     border-radius: 12px;
-    z-index: 103;
+    z-index: 107;
     overflow: hidden;
     padding-top: 56px;
     box-sizing: border-box;
diff --git a/packages/extension/src/ui/action/views/add-network/components/add-network-header.vue b/packages/extension/src/ui/action/views/add-network/components/add-network-header.vue
index 8e83d5b00..b9b2c5d55 100644
--- a/packages/extension/src/ui/action/views/add-network/components/add-network-header.vue
+++ b/packages/extension/src/ui/action/views/add-network/components/add-network-header.vue
@@ -1,14 +1,10 @@
 <template>
   <div class="add-network__header">
     <h2>Add network</h2>
-  </div>
-  <div class="add-network__search">
-    <div class="add-network__search-input">
-      <base-search :is-border="true" />
-    </div>
-    <div class="add-network__search-add">
-      <base-button title="Custom network" :click="action" />
-    </div>
+
+    <a class="add-network__close" @click="close()">
+      <close-icon />
+    </a>
   </div>
 </template>
 
@@ -19,12 +15,14 @@ export default {
 </script>
 
 <script setup lang="ts">
-import BaseSearch from "@action/components/base-search/index.vue";
-import BaseButton from "@action/components/base-button/index.vue";
-
-const action = () => {
-  console.log("Custom network action");
-};
+import CloseIcon from "@action/icons/common/close-icon.vue";
+
+defineProps({
+  close: {
+    type: Function,
+    default: () => ({}),
+  },
+});
 </script>
 
 <style lang="less" scoped>
@@ -48,24 +46,15 @@ const action = () => {
     }
   }
 
-  &__search {
-    width: 100%;
-    height: 56px;
-    background: @white;
-    box-sizing: border-box;
-    padding: 8px 32px 8px 32px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    flex-direction: row;
-
-    &-input {
-      width: 238px;
-      margin-right: 16px;
-    }
+  &__close {
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    border-radius: 8px;
+    cursor: pointer;
 
-    &-add {
-      width: 142px;
+    &:hover {
+      background: @black007;
     }
   }
 }
diff --git a/packages/extension/src/ui/action/views/add-network/components/add-network-item.vue b/packages/extension/src/ui/action/views/add-network/components/add-network-item.vue
index a5f73d906..dcca55b3a 100644
--- a/packages/extension/src/ui/action/views/add-network/components/add-network-item.vue
+++ b/packages/extension/src/ui/action/views/add-network/components/add-network-item.vue
@@ -62,7 +62,8 @@ const check = (isChecked: boolean) => {
     flex-direction: row;
 
     img {
-      max-width: 16px;
+      width: 16px;
+      height: 16px;
       margin-right: 8px;
     }
 
diff --git a/packages/extension/src/ui/action/views/add-network/components/add-network-search.vue b/packages/extension/src/ui/action/views/add-network/components/add-network-search.vue
new file mode 100644
index 000000000..e8976b65b
--- /dev/null
+++ b/packages/extension/src/ui/action/views/add-network/components/add-network-search.vue
@@ -0,0 +1,65 @@
+<template>
+  <div class="add-network__search">
+    <div class="add-network__search-input">
+      <base-search :input="searchInput" :is-border="true" />
+    </div>
+    <div class="add-network__search-add">
+      <base-button title="Custom network" :click="action" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  name: "AddNetworkSearch",
+};
+</script>
+
+<script setup lang="ts">
+import BaseSearch from "@action/components/base-search/index.vue";
+import BaseButton from "@action/components/base-button/index.vue";
+
+const props = defineProps({
+  input: {
+    type: Function,
+    default: () => {
+      return null;
+    },
+  },
+});
+
+const searchInput = (text: string) => {
+  props.input(text);
+};
+
+const action = () => {
+  console.log("Custom network action");
+};
+</script>
+
+<style lang="less" scoped>
+@import "~@action/styles/theme.less";
+
+.add-network {
+  &__search {
+    width: 100%;
+    height: 56px;
+    background: @white;
+    box-sizing: border-box;
+    padding: 8px 0 8px 0;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-direction: row;
+
+    &-input {
+      width: 238px;
+      margin-right: 16px;
+    }
+
+    &-add {
+      width: 142px;
+    }
+  }
+}
+</style>
diff --git a/packages/extension/src/ui/action/views/add-network/index.vue b/packages/extension/src/ui/action/views/add-network/index.vue
index efa7ed8dd..7109e5c24 100644
--- a/packages/extension/src/ui/action/views/add-network/index.vue
+++ b/packages/extension/src/ui/action/views/add-network/index.vue
@@ -1,25 +1,30 @@
 <template>
-  <div class="container">
-    <add-network-header />
-    <custom-scrollbar class="add-network__scroll-area" :settings="settings">
-      <h3 class="add-network__list-header">Popular</h3>
-
-      <add-network-item
-        v-for="(item, index) in popular"
-        :key="index"
-        :network="item"
-        :is-active="true"
-      ></add-network-item>
-
-      <h3 class="add-network__list-header">All networks</h3>
-
-      <add-network-item
-        v-for="(item, index) in all"
-        :key="index"
-        :network="item"
-        :is-active="true"
-      ></add-network-item>
-    </custom-scrollbar>
+  <div class="add-network__container">
+    <div class="add-network__overlay" @click="close()"></div>
+    <div class="add-network__wrap">
+      <add-network-header :close="close" />
+      <custom-scrollbar class="add-network__scroll-area" :settings="settings">
+        <add-network-search :input="search" />
+
+        <h3 class="add-network__list-header">Popular</h3>
+
+        <add-network-item
+          v-for="(item, index) in popular"
+          :key="index"
+          :network="item"
+          :is-active="true"
+        ></add-network-item>
+
+        <h3 class="add-network__list-header">All networks</h3>
+
+        <add-network-item
+          v-for="(item, index) in all"
+          :key="index"
+          :network="item"
+          :is-active="true"
+        ></add-network-item>
+      </custom-scrollbar>
+    </div>
   </div>
 </template>
 
@@ -31,6 +36,7 @@ export default {
 
 <script setup lang="ts">
 import AddNetworkHeader from "./components/add-network-header.vue";
+import AddNetworkSearch from "./components/add-network-search.vue";
 import AddNetworkItem from "./components/add-network-item.vue";
 import CustomScrollbar from "@action/components/custom-scrollbar/index.vue";
 import { getAllNetworks } from "@/libs/utils/networks";
@@ -44,25 +50,66 @@ const popular = getAllNetworks().filter((net) =>
   popularNames.includes(net.name)
 );
 const all = getAllNetworks();
+
+defineProps({
+  close: {
+    type: Function,
+    default: () => ({}),
+  },
+});
+
+const search = (value: string) => {
+  console.log(value);
+};
 </script>
 
 <style lang="less" scoped>
 @import "~@action/styles/theme.less";
 @import "~@action/styles/custom-scroll.less";
 
-.container {
-  width: 100%;
-  height: 600px;
-  overflow-x: hidden;
-  overflow-y: scroll;
-  background-color: @white;
-  box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.16);
-}
 .add-network {
   width: 100%;
   height: auto;
   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: 460px;
+    height: auto;
+    z-index: 107;
+    position: relative;
+    max-height: 568px;
+    overflow-x: hidden;
+  }
+
+  &__container {
+    width: 800px;
+    height: 600px;
+    left: 0px;
+    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;
+  }
+
   &__list {
     &-header {
       font-style: normal;
@@ -78,8 +125,8 @@ const all = getAllNetworks();
     position: relative;
     margin: auto;
     width: 100%;
-    max-height: 460px;
-    margin: 8px 0 8px 0;
+    max-height: 500px;
+    margin: 0;
     padding: 0 32px !important;
     box-sizing: border-box;
 
diff --git a/packages/extension/src/ui/action/views/deposit/index.vue b/packages/extension/src/ui/action/views/deposit/index.vue
index 2ab02717d..e64b8f22e 100644
--- a/packages/extension/src/ui/action/views/deposit/index.vue
+++ b/packages/extension/src/ui/action/views/deposit/index.vue
@@ -1,5 +1,6 @@
 <template>
   <div class="deposit" :class="{ show: showDeposit }">
+    <div class="deposit__overlay" @click="(toggle as ()=>void)"></div>
     <div class="deposit__wrap" :class="{ show: showDeposit }">
       <a class="deposit__close" @click="(toggle as ()=>void)">
         <close-icon />
@@ -88,16 +89,30 @@ const copy = (address: string) => {
 @import "~@action/styles/theme.less";
 
 .deposit {
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  left: 0;
-  top: 0;
-  z-index: 101;
+  width: 800px;
+  height: 600px;
+  left: 0px;
+  top: 0px;
+  position: fixed;
+  z-index: 105;
   display: none;
+  box-sizing: border-box;
+  justify-content: center;
+  align-items: center;
+  flex-direction: row;
 
   &.show {
-    display: block;
+    display: flex;
+  }
+
+  &__overlay {
+    background: rgba(0, 0, 0, 0.32);
+    width: 100%;
+    height: 100%;
+    left: 0px;
+    top: 0px;
+    position: absolute;
+    z-index: 106;
   }
 
   &__wrap {
@@ -107,10 +122,8 @@ const copy = (address: string) => {
     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;
-    right: 8px;
-    top: 50px;
-    position: absolute;
-    z-index: 103;
+    position: relative;
+    z-index: 107;
     overflow: hidden;
     padding: 20px;
     box-sizing: border-box;
diff --git a/packages/extension/src/ui/action/views/network-activity/components/network-activity-transaction.vue b/packages/extension/src/ui/action/views/network-activity/components/network-activity-transaction.vue
index fdf3679db..c4d4cb671 100644
--- a/packages/extension/src/ui/action/views/network-activity/components/network-activity-transaction.vue
+++ b/packages/extension/src/ui/action/views/network-activity/components/network-activity-transaction.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="network-activity__transaction">
+  <a href="#" class="network-activity__transaction">
     <div class="network-activity__transaction-info">
       <img src="@action/icons/raw/account.png" />
 
@@ -29,7 +29,7 @@
       </h4>
       <p>{{ $filters.formatFiatValue(transaction.amount).value }}</p>
     </div>
-  </div>
+  </a>
 </template>
 
 <script lang="ts">
@@ -105,6 +105,8 @@ if (props.transaction) {
     justify-content: space-between;
     align-items: center;
     flex-direction: row;
+    text-decoration: none;
+    cursor: pointer;
 
     &-info {
       display: flex;
diff --git a/packages/extension/src/ui/action/views/settings/components/settings-button.vue b/packages/extension/src/ui/action/views/settings/components/settings-button.vue
new file mode 100644
index 000000000..a7b8979be
--- /dev/null
+++ b/packages/extension/src/ui/action/views/settings/components/settings-button.vue
@@ -0,0 +1,99 @@
+<template>
+  <a
+    class="settings-button"
+    :class="{ red: isRed }"
+    @click="(action as (e: MouseEvent)=>void)"
+  >
+    <h5>{{ title }}</h5>
+    <div class="settings-button__arrow">
+      <right-arrow />
+    </div>
+  </a>
+</template>
+
+<script lang="ts">
+export default {
+  name: "BaseSelect",
+};
+</script>
+
+<script setup lang="ts">
+import RightArrow from "@action/icons/common/right-arrow.vue";
+
+defineProps({
+  action: {
+    type: Function,
+    default: () => {
+      return null;
+    },
+  },
+  title: {
+    type: String,
+    default: () => {
+      return "";
+    },
+  },
+  isRed: {
+    type: Boolean,
+    default: () => {
+      return false;
+    },
+  },
+});
+</script>
+
+<style lang="less">
+@import "~@action/styles/theme.less";
+
+.settings-button {
+  height: 56px;
+  background: #ffffff;
+  margin: 0 32px 16px 32px;
+  box-sizing: border-box;
+  border: 1px solid @gray02;
+  box-sizing: border-box;
+  border-radius: 10px;
+  width: calc(~"100% - 64px");
+  padding: 8px 16px;
+  display: block;
+  position: relative;
+  cursor: pointer;
+  text-decoration: none;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  flex-direction: row;
+
+  h5 {
+    font-style: normal;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 24px;
+    color: @primaryLabel;
+    width: 290px;
+    margin: 0;
+  }
+
+  &__arrow {
+    position: absolute;
+    font-size: 0;
+    padding: 4px;
+    right: 8px;
+    top: 50%;
+    margin-top: -16px;
+  }
+
+  &.red {
+    background: @error01;
+    border: 1px solid @error01;
+
+    h5 {
+      color: @error;
+    }
+
+    .settings-button__arrow {
+      display: none;
+    }
+  }
+}
+</style>
diff --git a/packages/extension/src/ui/action/views/settings/components/settings-header.vue b/packages/extension/src/ui/action/views/settings/components/settings-header.vue
new file mode 100644
index 000000000..a967d8992
--- /dev/null
+++ b/packages/extension/src/ui/action/views/settings/components/settings-header.vue
@@ -0,0 +1,62 @@
+<template>
+  <div class="settings__header">
+    <h2>Settings</h2>
+
+    <a class="settings__close" @click="close()">
+      <close-icon />
+    </a>
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  name: "SettingsHeader",
+};
+</script>
+
+<script setup lang="ts">
+import CloseIcon from "@action/icons/common/close-icon.vue";
+
+defineProps({
+  close: {
+    type: Function,
+    default: () => ({}),
+  },
+});
+</script>
+
+<style lang="less" scoped>
+@import "~@action/styles/theme.less";
+
+.settings {
+  &__header {
+    width: 100%;
+    height: 68px;
+    background: @white;
+    box-sizing: border-box;
+    padding: 24px 72px 12px 32px;
+    margin-bottom: 8px;
+
+    h2 {
+      font-style: normal;
+      font-weight: bold;
+      font-size: 24px;
+      line-height: 32px;
+      margin: 0;
+      color: @primaryLabel;
+    }
+  }
+
+  &__close {
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    border-radius: 8px;
+    cursor: pointer;
+
+    &:hover {
+      background: @black007;
+    }
+  }
+}
+</style>
diff --git a/packages/extension/src/ui/action/views/settings/index.vue b/packages/extension/src/ui/action/views/settings/index.vue
new file mode 100644
index 000000000..3129144f6
--- /dev/null
+++ b/packages/extension/src/ui/action/views/settings/index.vue
@@ -0,0 +1,107 @@
+<template>
+  <div class="settings__container">
+    <div class="settings__overlay" @click="close()"></div>
+    <div class="settings__wrap">
+      <settings-header :close="close"></settings-header>
+      <base-select
+        :select="selecLanguage"
+        title="Language"
+        :value="language"
+        :list="languageList"
+      ></base-select>
+      <settings-button
+        title="View my recovery phrase"
+        :action="recoveryPhraseAction"
+      ></settings-button>
+      <settings-button
+        title="Reset wallet"
+        :action="resetAction"
+        :is-red="true"
+      ></settings-button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  name: "Settings",
+};
+</script>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import SettingsHeader from "./components/settings-header.vue";
+import BaseSelect from "@action/components/base-select/index.vue";
+import SettingsButton from "./components/settings-button.vue";
+
+const languageList = ["English", "Russian"];
+let language = ref("English");
+
+defineProps({
+  close: {
+    type: Function,
+    default: () => ({}),
+  },
+});
+
+const selecLanguage = (value: string) => {
+  language.value = value;
+};
+
+const recoveryPhraseAction = () => {
+  console.log("recoveryPhraseAction");
+};
+
+const resetAction = () => {
+  console.log("resetAction");
+};
+</script>
+
+<style lang="less" scoped>
+@import "~@action/styles/theme.less";
+
+.settings {
+  width: 100%;
+  height: auto;
+  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: 460px;
+    height: auto;
+    z-index: 107;
+    position: relative;
+    max-height: 568px;
+    overflow-x: hidden;
+    padding-bottom: 16px;
+  }
+
+  &__container {
+    width: 800px;
+    height: 600px;
+    left: 0px;
+    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;
+  }
+}
+</style>