From 43654833cba6de3be7555b50d353aba858f7deeb Mon Sep 17 00:00:00 2001
From: Mihail Polev <mpolev364@gmail.com>
Date: Tue, 17 May 2022 17:25:30 +0700
Subject: [PATCH] =?UTF-8?q?feat:=20=E2=9C=A8create=20Verify=20Transaction?=
 =?UTF-8?q?=20screens?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ethereum/ui/eth-verify-transaction.vue    | 530 ++++++++++++++++++
 .../src/providers/ethereum/ui/routes.ts       |   7 +
 .../polkadot/ui/dot-verify-transaction.vue    | 200 +++++++
 .../src/providers/polkadot/ui/routes.ts       |   6 +
 .../ui/action/icons/common/right-chevron.vue  |  20 +
 .../src/ui/action/icons/raw/eth-green.png     | Bin 0 -> 1066 bytes
 .../ui/action/views/modal-forgot/index.vue    |  84 +++
 .../ui/action/views/modal-preload/index.vue   |  75 +++
 .../src/ui/action/views/modal-sign/index.vue  | 156 ++++++
 .../components/best-offer-error.vue           |  14 +-
 .../ui/action/views/transaction-fee/index.vue |  58 +-
 .../extension/src/ui/provider-pages/main.ts   |   3 +-
 12 files changed, 1150 insertions(+), 3 deletions(-)
 create mode 100644 packages/extension/src/providers/ethereum/ui/eth-verify-transaction.vue
 create mode 100644 packages/extension/src/providers/polkadot/ui/dot-verify-transaction.vue
 create mode 100644 packages/extension/src/ui/action/icons/common/right-chevron.vue
 create mode 100644 packages/extension/src/ui/action/icons/raw/eth-green.png
 create mode 100644 packages/extension/src/ui/action/views/modal-forgot/index.vue
 create mode 100644 packages/extension/src/ui/action/views/modal-preload/index.vue
 create mode 100644 packages/extension/src/ui/action/views/modal-sign/index.vue

diff --git a/packages/extension/src/providers/ethereum/ui/eth-verify-transaction.vue b/packages/extension/src/providers/ethereum/ui/eth-verify-transaction.vue
new file mode 100644
index 000000000..499a9bdf7
--- /dev/null
+++ b/packages/extension/src/providers/ethereum/ui/eth-verify-transaction.vue
@@ -0,0 +1,530 @@
+<template>
+  <div class="provider-verify-transaction">
+    <sign-logo
+      color="#05C0A5"
+      class="provider-verify-transaction__logo"
+    ></sign-logo>
+    <div class="provider-verify-transaction__network">
+      <img src="@/ui/action/icons/raw/eth-green.png" />
+      <p>Ethereum</p>
+    </div>
+    <h2>Verify transaction</h2>
+
+    <custom-scrollbar
+      ref="providerVerifyTransactionScrollRef"
+      class="provider-verify-transaction__scroll-area"
+      :settings="settings"
+    >
+      <div class="provider-verify-transaction__block">
+        <div class="provider-verify-transaction__account">
+          <img src="@/ui/action/icons/raw/account.png" />
+          <div class="provider-verify-transaction__account-info">
+            <h4>My account nickname</h4>
+            <div>
+              <p>12.34 <span>dot</span></p>
+              <p>
+                {{
+                  $filters.replaceWithEllipsis(
+                    "0x14502CF6C0A13167Dc340E25Dabf5FBDB68R5967",
+                    6,
+                    4
+                  )
+                }}
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="provider-verify-transaction__block">
+        <div class="provider-verify-transaction__info">
+          <img src="@/ui/action/icons/raw/matchchain.png" />
+          <div class="provider-verify-transaction__info-info">
+            <h4>Mathchain</h4>
+            <p>https://explorer-galois.mathchain.org/#/</p>
+          </div>
+        </div>
+
+        <div class="provider-verify-transaction__amount">
+          <img src="@/ui/action/icons/raw/eth-logo.png" />
+
+          <div class="provider-verify-transaction__amount-info">
+            <h4>1.56 <span>eth</span></h4>
+            <p>$4520.54</p>
+          </div>
+        </div>
+
+        <div class="provider-verify-transaction__error">
+          <alert-icon />
+          <p>
+            Warning: you will allow this DApp to spend any amount of ETH at any
+            time in the future. Please proceed only if you are trust this DApp.
+          </p>
+        </div>
+      </div>
+
+      <send-fee-select
+        :fee="fee"
+        :toggle-select="toggleSelectFee"
+        :in-swap="true"
+      ></send-fee-select>
+
+      <best-offer-error :not-enought-verify="true"></best-offer-error>
+
+      <div class="provider-verify-transaction__data">
+        <a
+          class="provider-verify-transaction__data-link"
+          :class="{ open: isOpenData }"
+          @click="toggleData"
+          ><span>Show data</span> <right-chevron
+        /></a>
+
+        <div v-show="isOpenData" class="provider-verify-transaction__data-text">
+          <p>Function type: Register Proxy 0xddd81f82</p>
+          <p>Parameters: []</p>
+          <p>HEX data: 4 BYTES</p>
+          <p>0xddd81f82</p>
+          <p>Verified contract on <a href="#">Etherscan</a></p>
+          <p>Decoded by Truffle</p>
+        </div>
+      </div>
+    </custom-scrollbar>
+
+    <transaction-fee-view
+      :show-fees="isOpenSelectFee"
+      :close="toggleSelectFee"
+      :select-fee="selectFee"
+      :selected="fee.price.speed"
+      :is-header="true"
+    ></transaction-fee-view>
+
+    <div
+      class="provider-verify-transaction__buttons"
+      :class="{ border: isHasScroll() }"
+    >
+      <div class="provider-verify-transaction__buttons-cancel">
+        <base-button
+          title="Decline"
+          :click="cancelAction"
+          :no-background="true"
+        />
+      </div>
+      <div class="provider-verify-transaction__buttons-send">
+        <base-button title="Sign" :click="signAction" />
+      </div>
+    </div>
+
+    <modal-sign
+      v-if="isOpenSign"
+      :close="toggleSign"
+      :forgot="toggleForgot"
+      :unlock="unlockAction"
+    ></modal-sign>
+
+    <modal-forgot
+      v-if="isForgot"
+      :is-forgot="isForgot"
+      :toggle-forgot="toggleForgot"
+      :reset-action="resetAction"
+    ></modal-forgot>
+
+    <modal-preload v-show="isProcessing"></modal-preload>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineExpose, ref } from "vue";
+import SignLogo from "@action/icons/common/sign-logo.vue";
+import RightChevron from "@action/icons/common/right-chevron.vue";
+import BaseButton from "@action/components/base-button/index.vue";
+import SendFeeSelect from "@action/views/send-transaction/components/send-fee-select.vue";
+import TransactionFeeView from "@action/views/transaction-fee/index.vue";
+import { TransactionFee } from "@action/types/fee";
+import { recommendedFee } from "@action/types/mock";
+import CustomScrollbar from "@action/components/custom-scrollbar/index.vue";
+import BestOfferError from "@action/views/swap-best-offer/components/swap-best-offer-block/components/best-offer-error.vue";
+import AlertIcon from "@action/icons/send/alert-icon.vue";
+import ModalSign from "@action/views/modal-sign/index.vue";
+import ModalForgot from "@action/views/modal-forgot/index.vue";
+import ModalPreload from "@action/views/modal-preload/index.vue";
+
+let isOpenSelectFee = ref(false);
+let fee = ref(recommendedFee);
+const providerVerifyTransactionScrollRef = ref(null);
+let isOpenData = ref(false);
+let isOpenSign = ref(false);
+let isForgot = ref(false);
+let isProcessing = ref(false);
+
+defineExpose({ providerVerifyTransactionScrollRef });
+
+const cancelAction = () => {
+  console.log("cancelAction");
+};
+const signAction = () => {
+  toggleSign();
+};
+const toggleSelectFee = (open: boolean) => {
+  isOpenSelectFee.value = open;
+};
+const selectFee = (option: TransactionFee) => {
+  fee.value = option;
+  isOpenSelectFee.value = false;
+};
+const isHasScroll = () => {
+  if (providerVerifyTransactionScrollRef.value) {
+    return (
+      providerVerifyTransactionScrollRef.value as HTMLElement
+    ).$el.classList.contains("ps--active-y");
+  }
+
+  return false;
+};
+const toggleData = () => {
+  isOpenData.value = !isOpenData.value;
+};
+const toggleSign = () => {
+  isOpenSign.value = !isOpenSign.value;
+};
+const toggleForgot = () => {
+  isOpenSign.value = false;
+  isForgot.value = !isForgot.value;
+};
+const resetAction = () => {
+  console.log("resetAction");
+};
+const unlockAction = () => {
+  isProcessing.value = !isProcessing.value;
+};
+</script>
+
+<style lang="less">
+@import "~@action/styles/theme.less";
+.provider-verify-transaction {
+  width: 100%;
+  height: 100%;
+  padding-top: 44px;
+  padding-bottom: 76px;
+  box-sizing: border-box;
+  &__logo {
+    margin-bottom: 8px;
+  }
+  &__network {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    flex-direction: row;
+    position: absolute;
+    right: 56px;
+    top: 54px;
+
+    img {
+      width: 16px;
+      height: 16px;
+      margin-right: 8px;
+    }
+
+    p {
+      font-style: normal;
+      font-weight: 500;
+      font-size: 12px;
+      line-height: 16px;
+      text-align: right;
+      letter-spacing: 0.5px;
+      color: @primaryLabel;
+      margin: 0;
+    }
+  }
+  h2 {
+    font-style: normal;
+    font-weight: 700;
+    font-size: 34px;
+    line-height: 40px;
+    letter-spacing: 0.25px;
+    color: @primaryLabel;
+    margin: 0 0 16px 0;
+  }
+  &__block {
+    background: @lightBg;
+    border: 1px solid @gray01;
+    box-sizing: border-box;
+    border-radius: 12px;
+    padding: 10px 16px;
+    width: 100%;
+    margin: 0 0 16px 0;
+  }
+  &__amount {
+    display: flex;
+    justify-content: flex-start;
+    align-items: flex-start;
+    flex-direction: row;
+
+    img {
+      box-shadow: inset 0px 0px 1px rgba(0, 0, 0, 0.16);
+      width: 32px;
+      height: 32px;
+      margin-right: 12px;
+      border-radius: 100%;
+    }
+
+    &-info {
+      h4 {
+        font-style: normal;
+        font-weight: 700;
+        font-size: 24px;
+        line-height: 32px;
+        color: @primaryLabel;
+        margin: 0;
+
+        span {
+          font-variant: small-caps;
+        }
+      }
+
+      p {
+        font-style: normal;
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 20px;
+        letter-spacing: 0.25px;
+        color: @secondaryLabel;
+        margin: 0;
+      }
+    }
+  }
+  &__account {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    flex-direction: row;
+    img {
+      width: 32px;
+      height: 32px;
+      margin-right: 12px;
+      border-radius: 100%;
+    }
+    &-info {
+      h4 {
+        font-style: normal;
+        font-weight: 500;
+        font-size: 14px;
+        line-height: 20px;
+        letter-spacing: 0.25px;
+        color: @primaryLabel;
+        margin: 0;
+      }
+
+      div {
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        flex-direction: row;
+
+        p {
+          &:first-child {
+            font-style: normal;
+            font-weight: 400;
+            font-size: 12px;
+            line-height: 16px;
+            letter-spacing: 0.5px;
+            color: @secondaryLabel;
+            margin: 0 8px 0 0;
+
+            span {
+              font-variant: small-caps;
+            }
+          }
+
+          &:last-child {
+            font-style: normal;
+            font-weight: 400;
+            font-size: 12px;
+            line-height: 16px;
+            letter-spacing: 0.5px;
+            color: @tertiaryLabel;
+            margin: 0;
+            word-break: break-all;
+          }
+        }
+      }
+    }
+  }
+  &__error {
+    margin: 12px 0 0 0;
+    border-radius: 10px;
+    padding: 0 0 0 44px;
+    position: relative;
+    box-sizing: border-box;
+    svg {
+      position: absolute;
+      left: 0;
+      top: 0;
+    }
+    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;
+        }
+      }
+    }
+  }
+  &__info {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    flex-direction: row;
+    padding: 6px 0;
+    margin-bottom: 6px;
+    img {
+      width: 32px;
+      height: 32px;
+      margin-right: 12px;
+    }
+    &-info {
+      h4 {
+        font-style: normal;
+        font-weight: 500;
+        font-size: 14px;
+        line-height: 20px;
+        letter-spacing: 0.25px;
+        color: @primaryLabel;
+        margin: 0;
+      }
+
+      p {
+        font-style: normal;
+        font-weight: 400;
+        font-size: 12px;
+        line-height: 16px;
+        letter-spacing: 0.5px;
+        color: @tertiaryLabel;
+        margin: 0;
+        word-break: break-all;
+      }
+    }
+  }
+  &__data {
+    text-align: center;
+    padding-top: 4px;
+    padding-bottom: 20px;
+    &-link {
+      border-radius: 6px;
+      transition: background 300ms ease-in-out;
+      display: inline-block;
+      cursor: pointer;
+      text-decoration: none;
+      padding: 4px 24px 4px 8px;
+      position: relative;
+      font-style: normal;
+      font-weight: 500;
+      font-size: 12px;
+      line-height: 16px;
+      letter-spacing: 0.8px;
+      color: @primaryLabel;
+
+      &:hover {
+        background: rgba(0, 0, 0, 0.04);
+      }
+
+      svg {
+        position: absolute;
+        right: 4px;
+        top: 4px;
+        -moz-transform: rotate(0deg);
+        -webkit-transform: rotate(0deg);
+        -o-transform: rotate(0deg);
+        -ms-transform: rotate(0deg);
+        transform: rotate(0deg);
+        -webkit-transition: all 0.3s ease-in-out;
+        -moz-transition: all 0.3s ease-in-out;
+        -ms-transition: all 0.3s ease-in-out;
+        -o-transition: all 0.3s ease-in-out;
+        transition: all 0.3s ease-in-out;
+      }
+
+      &.open {
+        svg {
+          position: absolute;
+          right: 4px;
+          top: 4px;
+          -moz-transform: rotate(180deg);
+          -webkit-transform: rotate(180deg);
+          -o-transform: rotate(180deg);
+          -ms-transform: rotate(180deg);
+          transform: rotate(180deg);
+        }
+      }
+    }
+
+    &-text {
+      padding-top: 12px;
+      text-align: left;
+
+      p {
+        font-style: normal;
+        font-weight: 400;
+        font-size: 12px;
+        line-height: 16px;
+        letter-spacing: 0.5px;
+        color: @secondaryLabel;
+        margin: 0;
+
+        a {
+          color: @secondaryLabel;
+        }
+      }
+    }
+  }
+  &__buttons {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-direction: row;
+    width: 100%;
+    box-sizing: border-box;
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    font-size: 0;
+    padding: 24px;
+    box-sizing: border-box;
+    background-color: @white;
+    &-cancel {
+      width: 172px;
+    }
+    &-send {
+      width: 232px;
+    }
+
+    &.border {
+      box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.05),
+        0px 0px 1px rgba(0, 0, 0, 0.25);
+    }
+  }
+
+  &__scroll-area {
+    position: relative;
+    margin: auto;
+    width: calc(~"100% + 16px");
+    max-height: 372px;
+    margin: 0;
+    padding: 0 16px 0 0 !important;
+    margin-right: -16px;
+    box-sizing: border-box;
+
+    &.ps--active-y {
+      padding-bottom: 0 !important;
+    }
+
+    & > .ps__rail-y {
+      right: 0 !important;
+    }
+  }
+}
+</style>
diff --git a/packages/extension/src/providers/ethereum/ui/routes.ts b/packages/extension/src/providers/ethereum/ui/routes.ts
index fd93d4cc4..ee6d006a5 100644
--- a/packages/extension/src/providers/ethereum/ui/routes.ts
+++ b/packages/extension/src/providers/ethereum/ui/routes.ts
@@ -1,6 +1,8 @@
 import ethAccounts from "./eth-accounts.vue";
 import ethSign from "./eth-sign.vue";
 import ethSignMessage from "./eth-sign-message.vue";
+import ethVerifyTransaction from "./eth-verify-transaction.vue";
+
 import { RouteRecordRaw } from "vue-router";
 export const routes = {
   ethAccounts: {
@@ -18,6 +20,11 @@ export const routes = {
     component: ethSignMessage,
     name: "ethSignMessage",
   },
+  ethVerifyTransaction: {
+    path: "eth-verify-transaction",
+    component: ethVerifyTransaction,
+    name: "ethVerifyTransaction",
+  },
 };
 export default (namespace: string): RouteRecordRaw[] => {
   return Object.values(routes).map((route) => {
diff --git a/packages/extension/src/providers/polkadot/ui/dot-verify-transaction.vue b/packages/extension/src/providers/polkadot/ui/dot-verify-transaction.vue
new file mode 100644
index 000000000..d81df5465
--- /dev/null
+++ b/packages/extension/src/providers/polkadot/ui/dot-verify-transaction.vue
@@ -0,0 +1,200 @@
+<template>
+  <div class="provider-verify-transaction">
+    <sign-logo
+      color="#E6007A"
+      class="provider-verify-transaction__logo"
+    ></sign-logo>
+    <div class="provider-verify-transaction__network">
+      <img src="@/ui/action/icons/raw/polkadot.png" />
+      <p>Polkadot</p>
+    </div>
+    <h2>Verify transaction</h2>
+
+    <custom-scrollbar
+      ref="providerVerifyTransactionScrollRef"
+      class="provider-verify-transaction__scroll-area"
+      :settings="settings"
+    >
+      <div class="provider-verify-transaction__block">
+        <div class="provider-verify-transaction__account">
+          <img src="@/ui/action/icons/raw/account.png" />
+          <div class="provider-verify-transaction__account-info">
+            <h4>My account nickname</h4>
+            <div>
+              <p>12.34 <span>dot</span></p>
+              <p>
+                {{
+                  $filters.replaceWithEllipsis(
+                    "0x14502CF6C0A13167Dc340E25Dabf5FBDB68R5967",
+                    6,
+                    4
+                  )
+                }}
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="provider-verify-transaction__block">
+        <div class="provider-verify-transaction__info">
+          <img src="@/ui/action/icons/raw/matchchain.png" />
+          <div class="provider-verify-transaction__info-info">
+            <h4>Polkadot</h4>
+            <p>
+              https://polkadot.js.org/apps/?rpc=wss%3A%2F%2Frpc.polkadot.io#/explorer
+            </p>
+          </div>
+        </div>
+
+        <div class="provider-verify-transaction__amount">
+          <img src="@/ui/action/icons/raw/polkadot.png" />
+
+          <div class="provider-verify-transaction__amount-info">
+            <h4>1.56 <span>dot</span></h4>
+            <p>$4520.54</p>
+          </div>
+        </div>
+
+        <div class="provider-verify-transaction__error">
+          <alert-icon />
+          <p>
+            Warning: you will allow this DApp to spend any amount of ETH at any
+            time in the future. Please proceed only if you are trust this DApp.
+          </p>
+        </div>
+      </div>
+
+      <send-fee-select
+        :fee="fee"
+        :toggle-select="toggleSelectFee"
+        :in-swap="true"
+      ></send-fee-select>
+
+      <best-offer-error :not-enought-verify="true"></best-offer-error>
+
+      <div class="provider-verify-transaction__data">
+        <a
+          class="provider-verify-transaction__data-link"
+          :class="{ open: isOpenData }"
+          @click="toggleData"
+          ><span>Show data</span> <right-chevron
+        /></a>
+
+        <div v-show="isOpenData" class="provider-verify-transaction__data-text">
+          <p>Function type: Register Proxy 0xddd81f82</p>
+          <p>Parameters: []</p>
+          <p>HEX data: 4 BYTES</p>
+          <p>0xddd81f82</p>
+          <p>Verified contract on <a href="#">Etherscan</a></p>
+          <p>Decoded by Truffle</p>
+        </div>
+      </div>
+    </custom-scrollbar>
+
+    <transaction-fee-view
+      :show-fees="isOpenSelectFee"
+      :close="toggleSelectFee"
+      :select-fee="selectFee"
+      :selected="fee.price.speed"
+      :is-header="true"
+    ></transaction-fee-view>
+
+    <div
+      class="provider-verify-transaction__buttons"
+      :class="{ border: isHasScroll() }"
+    >
+      <div class="provider-verify-transaction__buttons-cancel">
+        <base-button
+          title="Decline"
+          :click="cancelAction"
+          :no-background="true"
+        />
+      </div>
+      <div class="provider-verify-transaction__buttons-send">
+        <base-button title="Sign" :click="signAction" />
+      </div>
+    </div>
+
+    <modal-sign
+      v-if="isOpenSign"
+      :close="toggleSign"
+      :forgot="toggleForgot"
+      :unlock="unlockAction"
+    ></modal-sign>
+
+    <modal-forgot
+      v-if="isForgot"
+      :is-forgot="isForgot"
+      :toggle-forgot="toggleForgot"
+      :reset-action="resetAction"
+    ></modal-forgot>
+
+    <modal-preload v-show="isProcessing"></modal-preload>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineExpose, ref } from "vue";
+import SignLogo from "@action/icons/common/sign-logo.vue";
+import RightChevron from "@action/icons/common/right-chevron.vue";
+import BaseButton from "@action/components/base-button/index.vue";
+import SendFeeSelect from "@action/views/send-transaction/components/send-fee-select.vue";
+import TransactionFeeView from "@action/views/transaction-fee/index.vue";
+import { TransactionFee } from "@action/types/fee";
+import { recommendedFee } from "@action/types/mock";
+import CustomScrollbar from "@action/components/custom-scrollbar/index.vue";
+import BestOfferError from "@action/views/swap-best-offer/components/swap-best-offer-block/components/best-offer-error.vue";
+import AlertIcon from "@action/icons/send/alert-icon.vue";
+import ModalSign from "@action/views/modal-sign/index.vue";
+import ModalForgot from "@action/views/modal-forgot/index.vue";
+import ModalPreload from "@action/views/modal-preload/index.vue";
+
+let isOpenSelectFee = ref(false);
+let fee = ref(recommendedFee);
+const providerVerifyTransactionScrollRef = ref(null);
+let isOpenData = ref(false);
+let isOpenSign = ref(false);
+let isForgot = ref(false);
+let isProcessing = ref(false);
+
+defineExpose({ providerVerifyTransactionScrollRef });
+
+const cancelAction = () => {
+  console.log("cancelAction");
+};
+const signAction = () => {
+  toggleSign();
+};
+const toggleSelectFee = (open: boolean) => {
+  isOpenSelectFee.value = open;
+};
+const selectFee = (option: TransactionFee) => {
+  fee.value = option;
+  isOpenSelectFee.value = false;
+};
+const isHasScroll = () => {
+  if (providerVerifyTransactionScrollRef.value) {
+    return (
+      providerVerifyTransactionScrollRef.value as HTMLElement
+    ).$el.classList.contains("ps--active-y");
+  }
+
+  return false;
+};
+const toggleData = () => {
+  isOpenData.value = !isOpenData.value;
+};
+const toggleSign = () => {
+  isOpenSign.value = !isOpenSign.value;
+};
+const toggleForgot = () => {
+  isOpenSign.value = false;
+  isForgot.value = !isForgot.value;
+};
+const resetAction = () => {
+  console.log("resetAction");
+};
+const unlockAction = () => {
+  isProcessing.value = !isProcessing.value;
+};
+</script>
diff --git a/packages/extension/src/providers/polkadot/ui/routes.ts b/packages/extension/src/providers/polkadot/ui/routes.ts
index fa9ee4a36..1e305b422 100644
--- a/packages/extension/src/providers/polkadot/ui/routes.ts
+++ b/packages/extension/src/providers/polkadot/ui/routes.ts
@@ -3,6 +3,7 @@ import dotTxApprove from "./dot-approvetx.vue";
 import dotApproveSign from "./dot-approvesign.vue";
 import dotSignMessage from "./dot-sign-message.vue";
 import dotUpdateMetadata from "./dot-update-metadata.vue";
+import dotVerifyTransaction from "./dot-verify-transaction.vue";
 import { RouteRecordRaw } from "vue-router";
 export const routes = {
   dotAccounts: {
@@ -30,6 +31,11 @@ export const routes = {
     component: dotUpdateMetadata,
     name: "dotUpdateMetadata",
   },
+  dotVerifyTransaction: {
+    path: "dot-verify-transaction",
+    component: dotVerifyTransaction,
+    name: "dotVerifyTransaction",
+  },
 };
 
 export default (namespace: string): RouteRecordRaw[] => {
diff --git a/packages/extension/src/ui/action/icons/common/right-chevron.vue b/packages/extension/src/ui/action/icons/common/right-chevron.vue
new file mode 100644
index 000000000..9ba96c462
--- /dev/null
+++ b/packages/extension/src/ui/action/icons/common/right-chevron.vue
@@ -0,0 +1,20 @@
+<template>
+  <svg
+    width="17"
+    height="16"
+    viewBox="0 0 17 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M11.0833 5.99992L8.49665 8.58659L5.90998 5.99992C5.78543 5.87509 5.61633 5.80493 5.43998 5.80493C5.26364 5.80493 5.09454 5.87509 4.96998 5.99992C4.70998 6.25992 4.70998 6.67992 4.96998 6.93992L8.02998 9.99992C8.28998 10.2599 8.70998 10.2599 8.96998 9.99992L12.03 6.93992C12.29 6.67992 12.29 6.25992 12.03 5.99992C11.77 5.74659 11.3433 5.73992 11.0833 5.99992Z"
+      fill="#202124"
+    />
+  </svg>
+</template>
+<style scoped>
+svg {
+  display: inline-block;
+  vertical-align: baseline;
+}
+</style>
diff --git a/packages/extension/src/ui/action/icons/raw/eth-green.png b/packages/extension/src/ui/action/icons/raw/eth-green.png
new file mode 100644
index 0000000000000000000000000000000000000000..ddaebdc6628ac9d8eb042926bc13dfe765bd62c3
GIT binary patch
literal 1066
zcmV+_1l9YAP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800009a7bBm000&x
z000&x0ZCFM@Bjb+0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH1HVZ`K~#7Ftyf)0
z6j2oZX7<NwHC7_aerSZq{;2KeC5UQ!sh6mzi0Hw>m!OxThn_-(o<koaM17E`gn}OO
zZIQ_IB^1QSlpQmFGJjTUUESH8>73CSR@ZIsEk79M-kE#nJLk-I&plUxC?X9(5B!%r
z3Qk)<h%QY5g8YiwF>347?4nMaf#e&6Z^uMFs|XNlKKSoh3Mw2zK{OgxvW5)N@lOVj
z$3C^73YK*b{{uy-HOz&YToF-nkZV50AEB0pwSi922(K0mHEU?3Ikd*)4BH_eeS77L
z<q?qde52O~lN9(nZ9ouNkx(<pgR-7imX_m6$!<ts(Lv(MGQbv`1o@7F0PgQRh+C!m
zvDF`d1hgft3<D_ivTA>}_oUl?xa%0Cz+BAf7~q4iT4Fk`m6YK?pxEt)iZ<iird^N$
z=N7&zOaFdabRviT#lf@KS+E%Pf%!!NvJh|dyps`Rj09Pxk|mcQfy!;=E_o&jJw8;B
z9wcC=cKQX@8POT+eP!vMobRvFirBqgJX@=@uc(wN4~tI76dtet=~NnH3kD3!a-ZMb
zaR?F!u?RJhk&f`@iFw>eBTB?mDHF44Y9|(4Ls*a!xj|zC^2Urqe`osvj3iSSrt4SQ
z%o>wv$n`CIZA}OusEUj-X_IfCnL@&}@{VOgI%g)ZK@~CpUb=Xj{A(0=X+0h8#)sH2
zDz@#*nfWG-1YZ8=#aMEd1eU+lU~Z0po^RA_%CI%CFHl5ly%kNPpO?L#GY!0*_=?(Z
z9XMQ6jPsO~#*%ReKvyX(c8iRxAN@khtPJhPE+C#x*h!~#au9uUlXx6`kD>W#)Rmti
zat$rx{SZW#;)yihqV?DyGWx{E5<3erTE?SzGSq_<DgU8%9HGL^_H&Mqp!Zx%-gZ)P
z6oU00C!(sdqi(-DKIbZ)e@)|PFGNA9xLD;{&9clU(Mk2AefT&t?)Dw>{zOcQoY2VJ
z_A>OsTPrj3L4T($Ob27hIXoKZfDAmATElnSfcfwZouW`DI{EuT95vBTZog@ySNy*-
zEYvY4H@(iY6jIf+GhT#XYJT-Iiv5M0npLz;4MGBX0Lf~nMqidK)<vFcX~mQ(N;jx}
z8Sixpec16n%K(O5IxBdMwJpnSati%rBYd+f^Wm!bQZ^DI<SRXQu<B;S18I#Okr8H2
zkl+IJt<}gGd3Ovu8c0`D;ZgxX*r#O+O&+MVxrl`ga1f-78Mo_4>x{KnMJ+p?(@m#-
k7wy<>MRYum2_Db?01{A_quYw%K>z>%07*qoM6N<$f^g;PX8-^I

literal 0
HcmV?d00001

diff --git a/packages/extension/src/ui/action/views/modal-forgot/index.vue b/packages/extension/src/ui/action/views/modal-forgot/index.vue
new file mode 100644
index 000000000..c09b97142
--- /dev/null
+++ b/packages/extension/src/ui/action/views/modal-forgot/index.vue
@@ -0,0 +1,84 @@
+<template>
+  <div class="modal-forgot__container">
+    <div class="modal-forgot__overlay" @click="close()"></div>
+    <div class="modal-forgot__wrap">
+      <lock-screen-forgot
+        v-show="isForgot"
+        :close="toggleForgot"
+        :reset="resetAction"
+      />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  name: "ModalForgot",
+};
+</script>
+
+<script setup lang="ts">
+import LockScreenForgot from "@action/views/lock-screen/components/lock-screen-forgot.vue";
+defineProps({
+  isForgot: {
+    type: Boolean,
+    default: false,
+  },
+  toggleForgot: {
+    type: Function,
+    default: () => ({}),
+  },
+  resetAction: {
+    type: Function,
+    default: () => ({}),
+  },
+});
+</script>
+
+<style lang="less" scoped>
+@import "~@action/styles/theme.less";
+
+.modal-forgot {
+  width: 100%;
+  height: auto;
+  box-sizing: border-box;
+
+  &__container {
+    width: 100vw;
+    height: 100vh;
+    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;
+  }
+
+  &__wrap {
+    background: @white;
+    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.039),
+      0px 7px 24px rgba(0, 0, 0, 0.19);
+    border-radius: 12px;
+    box-sizing: border-box;
+    width: 360px;
+    height: auto;
+    z-index: 107;
+    position: relative;
+    max-height: 568px;
+    overflow-x: hidden;
+  }
+}
+</style>
diff --git a/packages/extension/src/ui/action/views/modal-preload/index.vue b/packages/extension/src/ui/action/views/modal-preload/index.vue
new file mode 100644
index 000000000..3b1296603
--- /dev/null
+++ b/packages/extension/src/ui/action/views/modal-preload/index.vue
@@ -0,0 +1,75 @@
+<template>
+  <div class="modal-preload__container">
+    <div class="modal-preload__overlay"></div>
+    <div class="modal-preload__wrap">
+      <Vue3Lottie
+        class="modal-preload__loading"
+        :animation-data="LottieSendProcess"
+        :loop="true"
+      />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  name: "ModalPreload",
+};
+</script>
+
+<script setup lang="ts">
+import LottieSendProcess from "@action/assets/animation/send-process.json";
+</script>
+
+<style lang="less" scoped>
+@import "~@action/styles/theme.less";
+
+.modal-preload {
+  width: 100%;
+  height: auto;
+  box-sizing: border-box;
+
+  &__wrap {
+    width: auto;
+    height: auto;
+    z-index: 107;
+    position: relative;
+  }
+
+  &__container {
+    width: 100vw;
+    height: 100vh;
+    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: radial-gradient(
+        100% 50% at 100% 50%,
+        rgba(250, 250, 250, 0.92) 0%,
+        rgba(250, 250, 250, 0.98) 100%
+      )
+      @primary;
+    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.039),
+      0px 7px 24px rgba(0, 0, 0, 0.19);
+    width: 100%;
+    height: 100%;
+    left: 0px;
+    top: 0px;
+    position: absolute;
+    z-index: 106;
+  }
+
+  &__loading {
+    width: 128px;
+    height: 128px;
+  }
+}
+</style>
diff --git a/packages/extension/src/ui/action/views/modal-sign/index.vue b/packages/extension/src/ui/action/views/modal-sign/index.vue
new file mode 100644
index 000000000..2bc6bbebf
--- /dev/null
+++ b/packages/extension/src/ui/action/views/modal-sign/index.vue
@@ -0,0 +1,156 @@
+<template>
+  <div class="modal-sign__container">
+    <div class="modal-sign__overlay" @click="close()"></div>
+    <div class="modal-sign__wrap">
+      <div class="modal-sign__header">
+        <h3>Confirm with password</h3>
+
+        <a class="modal-sign__close" @click="close()">
+          <close-icon />
+        </a>
+      </div>
+      <div class="modal-sign__content">
+        <lock-screen-password-input
+          :is-error="isError"
+          :value="password"
+          @update:value="passwordChanged"
+          @keyup.enter="unlock"
+        />
+        <base-button title="Confirm" :click="unlock" :disabled="isDisabled" />
+
+        <base-button
+          title="I forgot my password"
+          :click="forgot"
+          :no-background="true"
+          class="modal-sign__forgot"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  name: "ModalSign",
+};
+</script>
+
+<script setup lang="ts">
+import { ref, computed } from "vue";
+import CloseIcon from "@action/icons/common/close-icon.vue";
+import BaseButton from "@action/components/base-button/index.vue";
+import LockScreenPasswordInput from "@action/views/lock-screen/components/lock-screen-password-input.vue";
+
+const password = ref("test pass");
+const isDisabled = computed(() => {
+  return password.value.length < 5;
+});
+const isError = ref(false);
+
+defineProps({
+  close: {
+    type: Function,
+    default: () => ({}),
+  },
+  forgot: {
+    type: Function,
+    default: () => ({}),
+  },
+  unlock: {
+    type: Function,
+    default: () => ({}),
+  },
+});
+
+const passwordChanged = (text: string) => {
+  password.value = text;
+  isError.value = false;
+};
+</script>
+
+<style lang="less" scoped>
+@import "~@action/styles/theme.less";
+
+.modal-sign {
+  width: 100%;
+  height: auto;
+  box-sizing: border-box;
+
+  &__header {
+    width: 100%;
+    background: @white;
+    box-sizing: border-box;
+    padding: 24px 64px 12px 32px;
+    position: relative;
+    z-index: 4;
+
+    h3 {
+      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;
+    font-size: 0;
+
+    &:hover {
+      background: @black007;
+    }
+  }
+
+  &__wrap {
+    background: @white;
+    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.039),
+      0px 7px 24px rgba(0, 0, 0, 0.19);
+    border-radius: 12px;
+    box-sizing: border-box;
+    width: 360px;
+    height: auto;
+    z-index: 107;
+    position: relative;
+    max-height: 568px;
+    overflow-x: hidden;
+  }
+
+  &__container {
+    width: 100vw;
+    height: 100vh;
+    left: 0px;
+    top: 0px;
+    position: fixed;
+    z-index: 105;
+    display: flex;
+    box-sizing: border-box;
+    justify-content: center;
+    align-items: center;
+    flex-direction: row;
+  }
+
+  &__content {
+    padding: 16px 32px;
+  }
+
+  &__overlay {
+    background: rgba(0, 0, 0, 0.32);
+    width: 100%;
+    height: 100%;
+    left: 0px;
+    top: 0px;
+    position: absolute;
+    z-index: 106;
+  }
+
+  &__forgot {
+    margin-top: 16px;
+  }
+}
+</style>
diff --git a/packages/extension/src/ui/action/views/swap-best-offer/components/swap-best-offer-block/components/best-offer-error.vue b/packages/extension/src/ui/action/views/swap-best-offer/components/swap-best-offer-block/components/best-offer-error.vue
index cc05a3bb7..42b8fa248 100644
--- a/packages/extension/src/ui/action/views/swap-best-offer/components/swap-best-offer-block/components/best-offer-error.vue
+++ b/packages/extension/src/ui/action/views/swap-best-offer/components/swap-best-offer-block/components/best-offer-error.vue
@@ -11,7 +11,15 @@
       short.
     </p>
 
-    <a v-if="notEnoughtETH" href="#" class="best-offer-error__buy-eth">
+    <p v-if="notEnoughtVerify">
+      Not enough funds. You are<br />~0.041 ETH ($70) short.
+    </p>
+
+    <a
+      v-if="notEnoughtETH || notEnoughtVerify"
+      href="#"
+      class="best-offer-error__buy-eth"
+    >
       Buy ETH
     </a>
   </div>
@@ -34,6 +42,10 @@ defineProps({
     type: Boolean,
     default: false,
   },
+  notEnoughtVerify: {
+    type: Boolean,
+    default: false,
+  },
 });
 </script>
 
diff --git a/packages/extension/src/ui/action/views/transaction-fee/index.vue b/packages/extension/src/ui/action/views/transaction-fee/index.vue
index cd6b8ad67..96c964ea2 100644
--- a/packages/extension/src/ui/action/views/transaction-fee/index.vue
+++ b/packages/extension/src/ui/action/views/transaction-fee/index.vue
@@ -1,7 +1,17 @@
 <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__wrap"
+      :class="{ show: showFees, header: isHeader }"
+    >
+      <div v-if="isHeader" class="transaction-fee__header">
+        <h3>Choose transaction fee</h3>
+
+        <a class="transaction-fee__close" @click="close()">
+          <close-icon />
+        </a>
+      </div>
       <div class="transaction-fee__info">
         <div class="transaction-fee__info-amount">
           <p class="transaction-fee__info-amount-fiat">
@@ -44,9 +54,16 @@ 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";
+import CloseIcon from "@action/icons/common/close-icon.vue";
 
 const props = defineProps({
   showFees: Boolean,
+  isHeader: {
+    type: Boolean,
+    default: () => {
+      return false;
+    },
+  },
   close: {
     type: Function,
     default: () => {
@@ -118,12 +135,19 @@ const selectFee = (fee: TransactionFee) => {
     opacity: 0;
     visibility: hidden;
     transition: opacity 0.3s, visibility 0s ease-in-out 0.3s;
+    overflow: hidden;
 
     &.show {
       opacity: 1;
       visibility: visible;
       transition-delay: 0s;
     }
+
+    &.header {
+      padding: 0;
+      max-height: 512px;
+      bottom: 52px;
+    }
   }
 
   &__info {
@@ -193,5 +217,37 @@ const selectFee = (fee: TransactionFee) => {
       }
     }
   }
+
+  &__header {
+    width: 100%;
+    background: @white;
+    box-sizing: border-box;
+    padding: 14px 84px 14px 16px;
+    position: relative;
+    z-index: 4;
+    margin-bottom: 16px;
+
+    h3 {
+      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;
+    font-size: 0;
+
+    &:hover {
+      background: @black007;
+    }
+  }
 }
 </style>
diff --git a/packages/extension/src/ui/provider-pages/main.ts b/packages/extension/src/ui/provider-pages/main.ts
index eff7bce42..cefd3f70e 100644
--- a/packages/extension/src/ui/provider-pages/main.ts
+++ b/packages/extension/src/ui/provider-pages/main.ts
@@ -3,6 +3,7 @@ import App from "./App.vue";
 import { createRouter, createWebHashHistory } from "vue-router";
 import routes from "./routes";
 import * as filters from "@action/utils/filters";
+import Vue3Lottie from "vue3-lottie";
 
 const router = createRouter({
   history: createWebHashHistory(),
@@ -11,7 +12,7 @@ const router = createRouter({
 
 const app = createApp(App);
 
-app.use(router);
+app.use(router).use(Vue3Lottie);
 app.config.globalProperties.$filters = filters;
 
 app.mount("#app");