From e36e2d385bf29e6b25a70768fcc99b4e5a48f90b Mon Sep 17 00:00:00 2001
From: narekpetrosyan <narek.petrosyan988@gmail.com>
Date: Mon, 16 Dec 2024 14:35:02 +0400
Subject: [PATCH] feature: add transparent -> spark address fund sending
 functionality

---
 .../src/libs/spark-handler/callRPC.ts         |   4 +-
 .../extension/src/libs/spark-handler/index.ts |   8 +
 .../src/providers/bitcoin/libs/utils.ts       |   8 +
 .../tabs/transparent-send-tab.vue             | 687 ++++++++++++++++++
 packages/extension/src/ui/action/App.vue      |  15 +-
 .../extension/src/ui/action/router/index.ts   |   8 +
 .../src/ui/action/views/deposit/index.vue     |   4 +-
 .../index.vue                                 | 345 +++++++++
 8 files changed, 1074 insertions(+), 5 deletions(-)
 create mode 100644 packages/extension/src/providers/bitcoin/ui/send-transaction/tabs/transparent-send-tab.vue
 create mode 100644 packages/extension/src/ui/action/views/verify-send-to-spark-transaction/index.vue

diff --git a/packages/extension/src/libs/spark-handler/callRPC.ts b/packages/extension/src/libs/spark-handler/callRPC.ts
index 9dce2af48..f369aa27f 100644
--- a/packages/extension/src/libs/spark-handler/callRPC.ts
+++ b/packages/extension/src/libs/spark-handler/callRPC.ts
@@ -4,7 +4,7 @@ const rpcURL = "https://firo-rpc.publicnode.com/";
 
 export async function callRPC<T = any>(
   method: string,
-  params = []
+  params?: object
 ): Promise<T> {
   try {
     const response = await axios.post(
@@ -13,7 +13,7 @@ export async function callRPC<T = any>(
         jsonrpc: "1.0",
         id: "js-client",
         method: method,
-        params: params,
+        params: params ?? [],
       },
       {
         headers: {
diff --git a/packages/extension/src/libs/spark-handler/index.ts b/packages/extension/src/libs/spark-handler/index.ts
index e2c52a5c1..b6eda8da6 100644
--- a/packages/extension/src/libs/spark-handler/index.ts
+++ b/packages/extension/src/libs/spark-handler/index.ts
@@ -18,3 +18,11 @@ export async function generateSparkAddress(): Promise<string> {
   const newSparkAddress = await callRPC<string[]>("getnewsparkaddress");
   return newSparkAddress[0];
 }
+
+export async function sendToSparkAddress(to: string, amount: string) {
+  return await callRPC<string[]>("mintspark", [
+    {
+      [to]: { amount: Number(amount) },
+    },
+  ]);
+}
diff --git a/packages/extension/src/providers/bitcoin/libs/utils.ts b/packages/extension/src/providers/bitcoin/libs/utils.ts
index 6da7331ca..9c5251da1 100644
--- a/packages/extension/src/providers/bitcoin/libs/utils.ts
+++ b/packages/extension/src/providers/bitcoin/libs/utils.ts
@@ -6,6 +6,14 @@ import BigNumber from 'bignumber.js';
 import { BitcoinNetwork } from '../types/bitcoin-network';
 import { BTCTxInfo } from '../ui/types';
 
+export const isSparkAddress = (address = "") => {
+  if (address.length === 144 && address.startsWith("sm1")) {
+    // TODO: hack, change in future
+    return true;
+  }
+  return false;
+};
+
 const isAddress = (address: string, network: BitcoinNetworkInfo): boolean => {
   try {
     BTCAddress.toOutputScript(address, network);
diff --git a/packages/extension/src/providers/bitcoin/ui/send-transaction/tabs/transparent-send-tab.vue b/packages/extension/src/providers/bitcoin/ui/send-transaction/tabs/transparent-send-tab.vue
new file mode 100644
index 000000000..41cef2344
--- /dev/null
+++ b/packages/extension/src/providers/bitcoin/ui/send-transaction/tabs/transparent-send-tab.vue
@@ -0,0 +1,687 @@
+<template>
+  <div class="form__container">
+    <send-address-input
+      ref="addressInputFrom"
+      class="no-margin"
+      :from="true"
+      :value="addressFrom"
+      :network="(network as BitcoinNetwork)"
+      :disable-direct-input="true"
+      @click="toggleSelectContactFrom(true)"
+      @update:input-address="inputAddressFrom"
+      @toggle:show-contacts="toggleSelectContactFrom"
+    />
+
+    <send-from-contacts-list
+      class="no-margin"
+      :show-accounts="isOpenSelectContactFrom"
+      :account-info="accountInfo"
+      :address="addressFrom"
+      :network="network"
+      @selected:account="selectAccountFrom"
+      @close="toggleSelectContactFrom"
+    />
+
+    <div class="form__container-send-input">
+      <div class="form__container-send-input-toggle">
+        <button
+          :class="!isSendSpark && 'form__container-send-input-toggle-active'"
+          @click="toggleIsSendSpark(false)"
+        >
+          To address
+        </button>
+        <button
+          :class="isSendSpark && 'form__container-send-input-toggle-active'"
+          @click="toggleIsSendSpark(true)"
+        >
+          To Spark address
+        </button>
+      </div>
+
+      <send-address-input
+        v-if="!isSendSpark"
+        ref="addressInputTo"
+        class="no-margin"
+        :value="addressTo"
+        :network="(network as BitcoinNetwork)"
+        @update:input-address="inputAddressTo"
+        @toggle:show-contacts="toggleSelectContactTo"
+      />
+
+      <send-contacts-list
+        v-if="!isSendSpark"
+        class="no-margin"
+        :show-accounts="isOpenSelectContactTo"
+        :account-info="accountInfo"
+        :address="addressTo"
+        :network="network"
+        @selected:account="selectAccountTo"
+        @update:paste-from-clipboard="addressInputTo.pasteFromClipboard()"
+        @close="toggleSelectContactTo"
+      />
+
+      <send-spark-address-input
+        v-if="isSendSpark"
+        ref="sparkAddressInputTo"
+        class="no-margin"
+        :value="sparkAddressInput"
+        :network="(network as BitcoinNetwork)"
+        @update:input-address="inputSparkAddressTo"
+      />
+    </div>
+
+    <send-token-select
+      v-if="isSendToken"
+      class="no-margin"
+      :token="selectedAsset"
+    />
+
+    <send-nft-select
+      v-if="!isSendToken && !isSendSpark"
+      class="no-margin"
+      :item="selectedNft"
+      :is-sending-disabled="false"
+      @toggle-select="toggleSelectNft"
+    />
+
+    <nft-select-list
+      v-show="isOpenSelectNft"
+      class="no-margin"
+      :address="addressFrom"
+      :network="network"
+      :selected-nft="paramNFTData"
+      @close="toggleSelectNft"
+      @select-nft="selectNFT"
+    />
+
+    <send-input-amount
+      v-if="isSendToken"
+      class="no-margin"
+      :amount="amount"
+      :fiat-value="selectedAsset.price"
+      :has-enough-balance="!nativeBalanceAfterTransaction.isNeg()"
+      @update:input-amount="inputAmount"
+      @update:input-set-max="setMaxValue"
+    />
+    <send-fee-select
+      class="no-margin"
+      :in-swap="false"
+      :selected="selectedFee"
+      :fee="gasCostValues[selectedFee]"
+      @open-popup="toggleSelectFee"
+    />
+
+    <transaction-fee-view
+      :fees="gasCostValues"
+      :show-fees="isOpenSelectFee"
+      :selected="selectedFee"
+      :is-header="true"
+      @close-popup="toggleSelectFee"
+      @gas-type-changed="selectFee"
+    />
+
+    <send-alert
+      v-show="nativeBalanceAfterTransaction.isNeg() || (Number(sendAmount) < (props.network as BitcoinNetwork).dust && Number(sendAmount)>0)"
+      :native-symbol="network.name"
+      :price="selectedAsset.price || '0'"
+      :native-value="
+        fromBase(
+          nativeBalanceAfterTransaction.abs().toString(),
+          network.decimals
+        )
+      "
+      :decimals="network.decimals"
+      :below-dust="Number(sendAmount) < (props.network as BitcoinNetwork).dust"
+      :dust="(props.network as BitcoinNetwork).dust.toString()"
+      :not-enough="nativeBalanceAfterTransaction.isNeg()"
+    />
+  </div>
+
+  <div class="send-transaction__buttons">
+    <div class="send-transaction__buttons-cancel">
+      <base-button title="Cancel" :click="close" :no-background="true" />
+    </div>
+    <div class="send-transaction__buttons-send">
+      <base-button
+        :title="sendButtonTitle"
+        :click="isSendSpark ? sendSparkAction : sendAction"
+        :disabled="!isInputsValid"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import SendAddressInput from "../components/send-address-input.vue";
+import SendFromContactsList from "@/providers/common/ui/send-transaction/send-from-contacts-list.vue";
+import SendContactsList from "@/providers/common/ui/send-transaction/send-contacts-list.vue";
+import SendTokenSelect from "../components/send-token-select.vue";
+import SendAlert from "@/providers/bitcoin/ui/send-transaction/components/send-alert.vue";
+import SendInputAmount from "@/providers/common/ui/send-transaction/send-input-amount.vue";
+import SendFeeSelect from "@/providers/common/ui/send-transaction/send-fee-select.vue";
+import SendSparkAddressInput from "../components/send-spark-address-input.vue";
+import TransactionFeeView from "@action/views/transaction-fee/index.vue";
+import BaseButton from "@action/components/base-button/index.vue";
+import SendNftSelect from "@/providers/common/ui/send-transaction/send-nft-select.vue";
+import NftSelectList from "@/providers/common/ui/send-transaction/nft-select-list/index.vue";
+import { computed, onMounted, PropType, ref, watch } from "vue";
+import { NFTItem, NFTItemWithCollectionName, NFTType } from "@/types/nft";
+import { useRoute, useRouter } from "vue-router";
+import BigNumber from "bignumber.js";
+import { BitcoinNetwork } from "@/providers/bitcoin/types/bitcoin-network";
+import { BTCToken } from "@/providers/bitcoin/types/btc-token";
+import { HaskoinUnspentType } from "@/providers/bitcoin/types";
+import { GasPriceTypes, GasFeeType } from "@/providers/common/types";
+import { AccountsHeaderData } from "@/ui/action/types/account";
+import { defaultGasCostVals } from "@/providers/common/libs/default-vals";
+import { trackSendEvents } from "@/libs/metrics";
+import { SendEventType } from "@/libs/metrics/types";
+import { fromBase, isValidDecimals, toBase } from "@enkryptcom/utils";
+import { toBN } from "web3-utils";
+import {
+  getGasCostValues,
+  isAddress,
+  isSparkAddress,
+} from "@/providers/bitcoin/libs/utils";
+import BitcoinAPI from "@/providers/bitcoin/libs/api";
+import { calculateSizeBasedOnType } from "../../libs/tx-size";
+import { formatFloatingPointValue } from "@/libs/utils/number-formatter";
+import { getTxInfo as getBTCTxInfo } from "@/providers/bitcoin/libs/utils";
+import PublicKeyRing from "@/libs/keyring/public-keyring";
+import { VerifyTransactionParams } from "../../types";
+import { routes as RouterNames } from "@/ui/action/router";
+import Browser from "webextension-polyfill";
+import getUiPath from "@/libs/utils/get-ui-path";
+import { ProviderName } from "@/types/provider";
+
+const route = useRoute();
+const router = useRouter();
+
+const props = defineProps({
+  network: {
+    type: Object as PropType<BitcoinNetwork>,
+    default: () => ({}),
+  },
+  accountInfo: {
+    type: Object as PropType<AccountsHeaderData>,
+    default: () => ({}),
+  },
+  isSendToken: {
+    type: Boolean,
+    default: () => false,
+  },
+});
+const loadingAsset = new BTCToken({
+  icon: props.network.icon,
+  symbol: "Loading",
+  balance: "0",
+  price: "0",
+  name: "loading",
+  decimals: props.network.decimals,
+});
+
+const addressInputTo = ref();
+const sparkAddressInput = ref();
+const isSendSpark = ref(false);
+const selected: string = route.params.id as string;
+const paramNFTData: NFTItem = JSON.parse(
+  route.params.tokenData ? (route.params.tokenData as string) : "{}"
+) as NFTItem;
+const selectedAsset = ref<BTCToken>(loadingAsset);
+const amount = ref<string>("");
+const accountUTXOs = ref<HaskoinUnspentType[]>([]);
+const isOpenSelectNft = ref(false);
+
+const sendAmount = computed(() => {
+  if (amount.value && amount.value !== "") return amount.value;
+  return "0";
+});
+
+const isMaxSelected = ref<boolean>(false);
+const selectedFee = ref<GasPriceTypes>(GasPriceTypes.REGULAR);
+const gasCostValues = ref<GasFeeType>(defaultGasCostVals);
+const addressFrom = ref<string>(
+  props.accountInfo.selectedAccount?.address ?? ""
+);
+const addressTo = ref<string>("");
+const isLoadingAssets = ref(true);
+
+onMounted(async () => {
+  trackSendEvents(SendEventType.SendOpen, { network: props.network.name });
+  fetchAssets().then(setBaseCosts);
+});
+
+const nativeBalanceAfterTransaction = computed(() => {
+  if (
+    selectedAsset.value &&
+    isValidDecimals(sendAmount.value, selectedAsset.value.decimals!)
+  ) {
+    return UTXOBalance.value.sub(
+      toBN(toBase(sendAmount.value ?? "0", selectedAsset.value.decimals!)).add(
+        toBN(
+          toBase(
+            gasCostValues.value[selectedFee.value].nativeValue,
+            selectedAsset.value.decimals!
+          )
+        )
+      )
+    );
+  }
+  return toBN(0);
+});
+
+const setTransactionFees = (byteSize: number) => {
+  const nativeVal = selectedAsset.value.price || "0";
+  getGasCostValues(
+    props.network as BitcoinNetwork,
+    byteSize,
+    nativeVal,
+    props.network.decimals,
+    props.network.currencyName
+  ).then((val) => (gasCostValues.value = val));
+};
+
+const setBaseCosts = () => {
+  updateUTXOs().then(() => {
+    if (isMaxSelected.value) setMaxValue();
+  });
+};
+
+const updateUTXOs = async () => {
+  const api = (await props.network.api()) as BitcoinAPI;
+  return api.getUTXOs(addressFrom.value).then((utxos) => {
+    accountUTXOs.value = utxos;
+    const txSize = calculateSizeBasedOnType(
+      accountUTXOs.value.length + (props.isSendToken ? 0 : 1),
+      2,
+      (props.network as BitcoinNetwork).networkInfo.paymentType
+    );
+    setTransactionFees(Math.ceil(txSize));
+  });
+};
+
+const fetchAssets = () => {
+  selectedAsset.value = loadingAsset;
+  isLoadingAssets.value = true;
+  return props.network.getAllTokens(addressFrom.value).then((allAssets) => {
+    selectedAsset.value = allAssets[0] as BTCToken;
+    isLoadingAssets.value = false;
+  });
+};
+
+const sendButtonTitle = computed(() => {
+  let title = "Send";
+  if (parseInt(sendAmount.value) > 0)
+    title =
+      "Send " +
+      formatFloatingPointValue(sendAmount.value).value +
+      " " +
+      selectedAsset.value?.symbol!.toUpperCase();
+  return title;
+});
+
+const isInputsValid = computed<boolean>(() => {
+  if (isSendSpark.value) {
+    if (!isSparkAddress(sparkAddressInput.value)) {
+      return false;
+    }
+  } else {
+    if (
+      !isAddress(addressTo.value, (props.network as BitcoinNetwork).networkInfo)
+    )
+      return false;
+  }
+
+  if (
+    props.isSendToken &&
+    !isValidDecimals(sendAmount.value, selectedAsset.value.decimals!)
+  ) {
+    return false;
+  }
+  if (!props.isSendToken && !selectedNft.value.id) {
+    return false;
+  }
+  if (
+    Number(sendAmount.value) < (props.network as BitcoinNetwork).dust &&
+    props.isSendToken
+  )
+    return false;
+  if (new BigNumber(sendAmount.value).gt(assetMaxValue.value)) return false;
+  return true;
+});
+
+watch([addressFrom], () => {
+  if (addressFrom.value) {
+    fetchAssets().then(setBaseCosts);
+  }
+});
+
+const isOpenSelectContactFrom = ref<boolean>(false);
+const isOpenSelectContactTo = ref<boolean>(false);
+
+const isOpenSelectFee = ref<boolean>(false);
+
+const selectedNft = ref<NFTItemWithCollectionName>({
+  id: "",
+  contract: "",
+  image: "",
+  name: "Loading",
+  url: "",
+  collectionName: "",
+  type: NFTType.Ordinals,
+});
+
+const close = () => {
+  trackSendEvents(SendEventType.SendDecline, {
+    network: props.network.name,
+  });
+  router.go(-1);
+};
+
+const UTXOBalance = computed(() => {
+  return toBN(accountUTXOs.value.reduce((a, c) => a + c.value, 0));
+});
+
+const assetMaxValue = computed(() => {
+  return fromBase(
+    UTXOBalance.value
+      .sub(
+        toBN(
+          toBase(
+            gasCostValues.value[selectedFee.value].nativeValue,
+            selectedAsset.value.decimals!
+          )
+        )
+      )
+      .toString(),
+    selectedAsset.value.decimals!
+  );
+});
+
+const setMaxValue = () => {
+  isMaxSelected.value = true;
+  amount.value =
+    parseFloat(assetMaxValue.value) < 0 ? "0" : assetMaxValue.value;
+};
+const inputAddressFrom = (text: string) => {
+  addressFrom.value = text;
+};
+
+const inputAddressTo = (text: string) => {
+  addressTo.value = text;
+};
+
+const inputSparkAddressTo = (address: string) => {
+  sparkAddressInput.value = address;
+};
+
+const toggleSelectContactFrom = (open: boolean) => {
+  isOpenSelectContactFrom.value = open;
+};
+
+const toggleSelectContactTo = (open: boolean) => {
+  isOpenSelectContactTo.value = open;
+};
+
+const selectAccountFrom = (account: string) => {
+  addressFrom.value = account;
+  isOpenSelectContactFrom.value = false;
+  fetchAssets();
+};
+
+const selectAccountTo = (account: string) => {
+  addressTo.value = props.network.displayAddress(account);
+  isOpenSelectContactTo.value = false;
+};
+
+const inputAmount = (inputAmount: string) => {
+  if (inputAmount === "") {
+    inputAmount = "0";
+  }
+  const inputAmountBn = new BigNumber(inputAmount);
+  isMaxSelected.value = false;
+  amount.value = inputAmountBn.lt(0) ? "0" : inputAmount;
+};
+
+const toggleSelectFee = () => {
+  isOpenSelectFee.value = !isOpenSelectFee.value;
+};
+
+const toggleIsSendSpark = (value: boolean) => {
+  isSendSpark.value = value;
+};
+
+const selectFee = (type: GasPriceTypes) => {
+  selectedFee.value = type;
+  isOpenSelectFee.value = false;
+  if (isMaxSelected.value) setMaxValue();
+};
+
+const toggleSelectNft = (open: boolean) => {
+  isOpenSelectNft.value = open;
+};
+
+const selectNFT = (item: NFTItemWithCollectionName) => {
+  selectedNft.value = item;
+  isOpenSelectNft.value = false;
+};
+
+const sendSparkAction = async () => {
+  const keyring = new PublicKeyRing();
+  const fromAccountInfo = await keyring.getAccount(addressFrom.value);
+
+  const toAmount = toBN(toBase(sendAmount.value, selectedAsset.value.decimals));
+  router.push({
+    name: RouterNames.verifySendToSpark.name,
+    query: {
+      id: selected,
+      txData: Buffer.from(
+        JSON.stringify({
+          toToken: {
+            amount: toAmount.toString(),
+            decimals: selectedAsset.value.decimals!,
+            icon: selectedAsset.value.icon as string,
+            symbol: selectedAsset.value.symbol,
+            valueUSD: new BigNumber(selectedAsset.value.price || "0")
+              .times(sendAmount.value)
+              .toString(),
+            name: selectedAsset.value.name,
+            price: selectedAsset.value.price || "0",
+          },
+          fromAddress: fromAccountInfo.address,
+          fromAddressName: fromAccountInfo.name,
+          gasFee: gasCostValues.value[selectedFee.value],
+          gasPriceType: selectedFee.value,
+          toAddress: sparkAddressInput.value,
+        }),
+        "utf8"
+      ).toString("base64"),
+    },
+  });
+};
+
+const sendAction = async () => {
+  const keyring = new PublicKeyRing();
+  const fromAccountInfo = await keyring.getAccount(addressFrom.value);
+  const currentFee = toBN(
+    toBase(
+      gasCostValues.value[selectedFee.value].nativeValue,
+      selectedAsset.value.decimals
+    )
+  );
+  let txInfo = getBTCTxInfo(accountUTXOs.value);
+  let toAmount = toBN(toBase(sendAmount.value, selectedAsset.value.decimals));
+
+  if (props.isSendToken) {
+    txInfo.outputs.push({
+      address: isSendSpark.value ? sparkAddressInput.value : addressTo.value,
+      value: toAmount.toNumber(),
+    });
+  } else {
+    const api = (await props.network.api()) as BitcoinAPI;
+    const [txid, index] = selectedNft.value.id.split(":");
+    const ordinalTx = await api.getTransactionStatus(txid);
+    const ordinalOutput = ordinalTx!.outputs[parseInt(index)];
+    txInfo = getBTCTxInfo(accountUTXOs.value, {
+      address: ordinalOutput.address,
+      block: {
+        height: ordinalTx!.blockNumber,
+        position: -1, // not needed
+      },
+      index: parseInt(index),
+      pkscript: ordinalOutput.pkscript,
+      txid,
+      value: ordinalOutput.value,
+    });
+    toAmount = toBN(ordinalOutput.value);
+    txInfo.outputs.push({
+      address: addressTo.value,
+      value: ordinalOutput.value,
+    });
+  }
+  const remainder = UTXOBalance.value.sub(toAmount).sub(currentFee);
+  if (remainder.gtn(0)) {
+    txInfo.outputs.push({
+      address: props.network.displayAddress(addressFrom.value),
+      value: remainder.toNumber(),
+    });
+  }
+
+  const txVerifyInfo: VerifyTransactionParams = {
+    TxInfo: JSON.stringify(txInfo),
+    isNFT: !props.isSendToken,
+    NFTData: !props.isSendToken ? selectedNft.value : undefined,
+    toToken: {
+      amount: toAmount.toString(),
+      decimals: selectedAsset.value.decimals!,
+      icon: selectedAsset.value.icon as string,
+      symbol: selectedAsset.value.symbol,
+      valueUSD: new BigNumber(selectedAsset.value.price || "0")
+        .times(sendAmount.value)
+        .toString(),
+      name: selectedAsset.value.name,
+      price: selectedAsset.value.price || "0",
+    },
+    fromAddress: fromAccountInfo.address,
+    fromAddressName: fromAccountInfo.name,
+    gasFee: gasCostValues.value[selectedFee.value],
+    gasPriceType: selectedFee.value,
+    toAddress: addressTo.value,
+  };
+
+  const routedRoute = router.resolve({
+    name: RouterNames.verify.name,
+    query: {
+      id: selected,
+      txData: Buffer.from(JSON.stringify(txVerifyInfo), "utf8").toString(
+        "base64"
+      ),
+    },
+  });
+
+  if (fromAccountInfo.isHardware) {
+    await Browser.windows.create({
+      url: Browser.runtime.getURL(
+        getUiPath(
+          `btc-hw-verify?id=${routedRoute.query.id}&txData=${routedRoute.query.txData}`,
+          ProviderName.bitcoin
+        )
+      ),
+      type: "popup",
+      focused: true,
+      height: 600,
+      width: 460,
+    });
+    window.close();
+  } else {
+    router.push(routedRoute);
+  }
+};
+</script>
+
+<style lang="less" scoped>
+@import "~@action/styles/theme.less";
+@import "~@action/styles/custom-scroll.less";
+
+.form__container {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+
+  .no-margin {
+    margin: 0 auto !important;
+  }
+
+  &-send-input {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+
+    &-toggle {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      margin: 0 auto;
+
+      button {
+        outline: none;
+        border: 1px solid @primaryLabel;
+        padding: 4px 8px;
+        box-sizing: border-box;
+        display: block;
+        background: @white07;
+        border-radius: 6px;
+        text-decoration: none;
+        font-style: normal;
+        font-weight: 500;
+        font-size: 11px;
+        line-height: 16px;
+        letter-spacing: 1.5px;
+        text-transform: uppercase;
+        color: @primaryLabel;
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        flex-direction: row;
+        cursor: pointer;
+        transition: opacity 300ms ease-in-out;
+      }
+
+      &-active {
+        border: 1px solid @white07 !important;
+        background-color: @black !important;
+        color: @white07 !important;
+      }
+    }
+  }
+}
+
+.send-transaction {
+  &__buttons {
+    padding: 0 32px 32px 32px;
+    margin-top: 20px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-direction: row;
+    width: 100%;
+    box-sizing: border-box;
+
+    &-cancel {
+      width: 170px;
+    }
+
+    &-send {
+      width: 218px;
+    }
+  }
+}
+p {
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 20px;
+  letter-spacing: 0.25px;
+  color: @error;
+  margin: 0;
+}
+</style>
diff --git a/packages/extension/src/ui/action/App.vue b/packages/extension/src/ui/action/App.vue
index 3101b1eb0..7bda88cc6 100644
--- a/packages/extension/src/ui/action/App.vue
+++ b/packages/extension/src/ui/action/App.vue
@@ -63,6 +63,7 @@
             @toggle:deposit="toggleDepositWindow"
             @action:generate-new-spark="generateNewSparkAddress"
             @open:buy-action="openBuyPage"
+            @update:spark-state-changed="getSparkAccountState"
           />
         </transition>
       </router-view>
@@ -293,6 +294,15 @@ const generateNewSparkAddress = async () => {
     );
   }
 };
+const getSparkAccountState = async (network: BaseNetwork) => {
+  if (
+    network.name === NetworkNames.Firo ||
+    network.name === NetworkNames.FiroTest
+  ) {
+    const sparkAccountResponse = await getSparkState();
+    accountHeaderData.value.sparkAccount = { ...sparkAccountResponse };
+  }
+};
 const setNetwork = async (network: BaseNetwork) => {
   trackNetworkSelected(NetworkChangeEvents.NetworkChangePopup, {
     provider: network.provider,
@@ -315,7 +325,10 @@ const setNetwork = async (network: BaseNetwork) => {
 
   let sparkAccount: SparkAccount | null = null;
 
-  if (network.name === NetworkNames.Firo) {
+  if (
+    network.name === NetworkNames.Firo ||
+    network.name === NetworkNames.FiroTest
+  ) {
     const sparkAccountResponse = await getSparkState();
     sparkAccount = { ...sparkAccountResponse };
   }
diff --git a/packages/extension/src/ui/action/router/index.ts b/packages/extension/src/ui/action/router/index.ts
index b68e90e00..5c552122a 100644
--- a/packages/extension/src/ui/action/router/index.ts
+++ b/packages/extension/src/ui/action/router/index.ts
@@ -9,6 +9,7 @@ import Intro from '@action/views/intro/index.vue';
 import Swap from '@action/views/swap/index.vue';
 import SwapBestOffer from '@action/views/swap/views/swap-best-offer/index.vue';
 import VerifyTransaction from '@action/views/verify-transaction/index.vue';
+import VerifySendToSparkTransaction from "@action/views/verify-send-to-spark-transaction/index.vue";
 import SendTransaction from '@action/views/send-transaction/index.vue';
 
 const routes = {
@@ -68,6 +69,13 @@ const routes = {
     },
     name: 'verify-transaction',
   },
+  verifySendToSpark: {
+    path: "/verify-send-to-spark-transaction/:id?",
+    components: {
+      view: VerifySendToSparkTransaction,
+    },
+    name: "verify-send-to-spark",
+  },
   swap: {
     path: '/swap/:id?',
     components: {
diff --git a/packages/extension/src/ui/action/views/deposit/index.vue b/packages/extension/src/ui/action/views/deposit/index.vue
index c37c8416b..565fb1db8 100644
--- a/packages/extension/src/ui/action/views/deposit/index.vue
+++ b/packages/extension/src/ui/action/views/deposit/index.vue
@@ -28,7 +28,7 @@
         </button>
       </div>
 
-      <div v-show="activeTab === 'transparent'">
+      <div v-if="activeTab === 'transparent'">
         <div class="deposit__code">
           <qrcode-vue
             :value="
@@ -69,7 +69,7 @@
         </div>
       </div>
 
-      <div v-show="activeTab === 'spark' && !!sparkAccount">
+      <div v-if="activeTab === 'spark' && !!sparkAccount">
         <div class="deposit__code">
           <qrcode-vue
             :value="network.provider + ':' + sparkAccount?.defaultAddress"
diff --git a/packages/extension/src/ui/action/views/verify-send-to-spark-transaction/index.vue b/packages/extension/src/ui/action/views/verify-send-to-spark-transaction/index.vue
new file mode 100644
index 000000000..b6a308333
--- /dev/null
+++ b/packages/extension/src/ui/action/views/verify-send-to-spark-transaction/index.vue
@@ -0,0 +1,345 @@
+<template>
+  <div class="container" :class="{ popup: isPopup }">
+    <div v-if="!!selectedNetwork" class="verify-transaction">
+      <custom-scrollbar
+        ref="verifyScrollRef"
+        class="verify-transaction__scroll-area"
+      >
+        <div class="verify-transaction__header" :class="{ popup: isPopup }">
+          <h3>Verify Transaction</h3>
+          <a v-if="!isPopup" class="verify-transaction__close" @click="close">
+            <close-icon />
+          </a>
+        </div>
+        <hardware-wallet-msg :wallet-type="account?.walletType" />
+        <p class="verify-transaction__description" :class="{ popup: isPopup }">
+          Double check the information and confirm transaction
+        </p>
+        <div
+          class="verify-transaction__info"
+          :class="{ popup: isPopup, border: isHasScroll() }"
+        >
+          <verify-transaction-network :network="network" />
+          <verify-transaction-account
+            :name="txData.fromAddressName"
+            :address="network.displayAddress(txData.fromAddress)"
+            :from="true"
+            :network="network"
+          />
+          <verify-transaction-account
+            :address="txData.toAddress"
+            :network="network"
+          />
+          <verify-transaction-amount :token="txData.toToken" />
+          <verify-transaction-fee :fee="txData.gasFee" />
+          {{ errorMsg }}
+        </div>
+      </custom-scrollbar>
+
+      <div
+        class="verify-transaction__buttons"
+        :class="{ popup: isPopup, border: isHasScroll() }"
+      >
+        <div class="verify-transaction__buttons-cancel">
+          <base-button
+            title="Back"
+            :click="close"
+            :gray="true"
+            :disabled="isProcessing"
+          />
+        </div>
+        <div class="verify-transaction__buttons-send">
+          <base-button
+            title="Confirm and send"
+            :click="sendAction"
+            :disabled="isProcessing"
+          />
+        </div>
+      </div>
+    </div>
+
+    <send-process
+      v-if="isProcessing"
+      :to-address="txData.toAddress"
+      :network="network"
+      :token="txData.toToken"
+      :is-done="isSendDone"
+      :is-window-popup="isWindowPopup"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onBeforeMount, ref, ComponentPublicInstance } 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 "@/providers/common/ui/verify-transaction/verify-transaction-network.vue";
+import VerifyTransactionAccount from "@/providers/common/ui/verify-transaction/verify-transaction-account.vue";
+import VerifyTransactionAmount from "@/providers/common/ui/verify-transaction/verify-transaction-amount.vue";
+import VerifyTransactionFee from "@/providers/common/ui/verify-transaction/verify-transaction-fee.vue";
+import HardwareWalletMsg from "@/providers/common/ui/verify-transaction/hardware-wallet-msg.vue";
+import SendProcess from "@action/views/send-process/index.vue";
+import PublicKeyRing from "@/libs/keyring/public-keyring";
+import { getCurrentContext } from "@/libs/messenger/extension";
+import { DEFAULT_BTC_NETWORK, getNetworkByName } from "@/libs/utils/networks";
+import { ActivityStatus, Activity, ActivityType } from "@/types/activity";
+import ActivityState from "@/libs/activity-state";
+import { EnkryptAccount } from "@enkryptcom/types";
+import CustomScrollbar from "@action/components/custom-scrollbar/index.vue";
+import { BitcoinNetwork } from "@/providers/bitcoin/types/bitcoin-network";
+import { trackSendEvents } from "@/libs/metrics";
+import { SendEventType } from "@/libs/metrics/types";
+import { VerifyTransactionParams } from "@/providers/bitcoin/ui/types";
+import { sendToSparkAddress } from "@/libs/spark-handler";
+import { isAxiosError } from "axios";
+import { fromBase } from "@enkryptcom/utils";
+import { BaseNetwork } from "@/types/base-network";
+
+const emits = defineEmits<{
+  (e: "update:spark-state-changed", network: BaseNetwork): void;
+}>();
+
+const KeyRing = new PublicKeyRing();
+const route = useRoute();
+const router = useRouter();
+const selectedNetwork: string = route.query.id as string;
+const txData: VerifyTransactionParams = JSON.parse(
+  Buffer.from(route.query.txData as string, "base64").toString("utf8")
+);
+
+const isProcessing = ref(false);
+const network = ref<BitcoinNetwork>(DEFAULT_BTC_NETWORK);
+const isSendDone = ref(false);
+const account = ref<EnkryptAccount>();
+const isPopup: boolean = getCurrentContext() === "new-window";
+const verifyScrollRef = ref<ComponentPublicInstance<HTMLElement>>();
+const isWindowPopup = ref(false);
+const errorMsg = ref("");
+
+defineExpose({ verifyScrollRef });
+
+onBeforeMount(async () => {
+  network.value = (await getNetworkByName(selectedNetwork)!) as BitcoinNetwork;
+  trackSendEvents(SendEventType.SendVerify, { network: network.value.name });
+  account.value = await KeyRing.getAccount(txData.fromAddress);
+  isWindowPopup.value = account.value.isHardware;
+});
+const close = () => {
+  if (getCurrentContext() === "popup") {
+    router.go(-1);
+  } else {
+    window.close();
+  }
+};
+
+const sendAction = async () => {
+  isProcessing.value = true;
+  trackSendEvents(SendEventType.SendApprove, {
+    network: network.value.name,
+  });
+  const txActivity: Activity = {
+    from: network.value.displayAddress(txData.fromAddress),
+    to: txData.toAddress,
+    isIncoming: txData.fromAddress === txData.toAddress,
+    network: network.value.name,
+    status: ActivityStatus.pending,
+    timestamp: new Date().getTime(),
+    token: {
+      decimals: txData.toToken.decimals,
+      icon: txData.toToken.icon,
+      name: txData.toToken.name,
+      symbol: txData.toToken.symbol,
+      price: txData.toToken.price,
+    },
+    type: ActivityType.transaction,
+    value: txData.toToken.amount,
+    transactionHash: "",
+  };
+
+  const activityState = new ActivityState();
+
+  await sendToSparkAddress(
+    txData.toAddress,
+    fromBase(txData.toToken.amount, txData.toToken.decimals).toString()
+  )
+    .then(() => {
+      trackSendEvents(SendEventType.SendComplete, {
+        network: network.value.name,
+      });
+      isSendDone.value = true;
+      if (getCurrentContext() === "popup") {
+        setTimeout(() => {
+          isProcessing.value = false;
+          router.go(-2);
+        }, 4500);
+      } else {
+        setTimeout(() => {
+          isProcessing.value = false;
+          window.close();
+        }, 1500);
+      }
+      emits("update:spark-state-changed", network.value);
+    })
+    .catch((error) => {
+      isProcessing.value = false;
+
+      if (isAxiosError(error)) {
+        errorMsg.value = JSON.stringify(error.response?.data.error.message);
+      } else {
+        errorMsg.value = JSON.stringify(error);
+      }
+
+      trackSendEvents(SendEventType.SendFailed, {
+        network: network.value.name,
+        error: error.message,
+      });
+      txActivity.status = ActivityStatus.failed;
+      activityState.addActivities([txActivity], {
+        address: txData.fromAddress,
+        network: network.value.name,
+      });
+      console.error("ERROR", error);
+    });
+};
+const isHasScroll = () => {
+  if (verifyScrollRef.value) {
+    return verifyScrollRef.value.$el.classList.contains("ps--active-y");
+  }
+
+  return false;
+};
+</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;
+  position: relative;
+
+  &.popup {
+    box-shadow: none;
+  }
+}
+
+.verify-transaction {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  position: relative;
+
+  &__header {
+    position: relative;
+    padding: 24px 72px 12px 32px;
+
+    &.popup {
+      padding: 24px 0 12px 0;
+    }
+
+    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;
+    transition: background 300ms ease-in-out;
+
+    &: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;
+
+    &.popup {
+      padding: 4px 0 16px 0;
+    }
+  }
+
+  &__info {
+    border: 1px solid @gray02;
+    box-sizing: border-box;
+    border-radius: 10px;
+    margin: 0 32px 0 32px;
+
+    &.popup {
+      margin: 0;
+      margin-bottom: 56px;
+    }
+  }
+
+  &__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;
+
+    &.popup {
+      padding: 24px;
+      background: @white;
+    }
+
+    &.border {
+      box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.05),
+        0px 0px 1px rgba(0, 0, 0, 0.25);
+    }
+
+    &-cancel {
+      width: 170px;
+    }
+
+    &-send {
+      width: 218px;
+    }
+  }
+
+  &__scroll-area {
+    position: relative;
+    margin: auto;
+    width: calc(~"100% + 53px");
+    height: calc(~"100% - 88px");
+    margin: 0;
+    padding: 0 53px 0 0 !important;
+    margin-right: -53px;
+    box-sizing: border-box;
+
+    &.ps--active-y {
+      padding-bottom: 0 !important;
+    }
+
+    & > .ps__rail-y {
+      right: 0 !important;
+    }
+  }
+}
+</style>