feat: ✨create Verify Transaction screens

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) => {

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>

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[] => {

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>

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>