Feature/add firo network

packages/extension/src/providers/bitcoin/ui/send-transaction/index.vue

@@ -1,61 +1,66 @@
 <template>
   <div class="container">
-    <div v-if="isLoadingAssets" class="send-transaction__loading">
-      <div class="send-transaction__loading-content">
-        <div class="send-transaction__loading-spinner"></div>
-        <p class="send-transaction__loading-text">Loading...</p>
+    <div v-if="!!selected" class="send-transaction-wrapper">
+      <div v-if="isLoadingAssets" class="send-transaction__loading">
+        <div class="send-transaction__loading-content">
+          <div class="send-transaction__loading-spinner"></div>
+          <p class="send-transaction__loading-text">Loading...</p>
+        </div>
       </div>
-    </div>
 
-    <div v-if="!!selected && !isLoadingAssets" class="send-transaction">
-      <send-header
-        :is-send-token="isSendToken"
-        :is-nft-available="!!network.NFTHandler"
-        @close="close"
-        @toggle-type="toggleSelector"
-      />
-
-      <div
-        v-if="!!accountInfo.sparkAccount && network.name === NetworkNames.Firo"
-        class="send-transaction__tabs"
-      >
-        <button
-          :class="
-            selectedSendTab === 'transparent' && 'send-transaction__tabs-active'
-          "
-          @click="setSelectedSendTab('transparent')"
-        >
-          Transparent address
-        </button>
-        <button
-          :class="
-            selectedSendTab === 'spark' && 'send-transaction__tabs-active'
+      <div v-show="!isLoadingAssets" class="send-transaction">
+        <send-header
+          :is-send-token="isSendToken"
+          :is-nft-available="!!network.NFTHandler"
+          @close="close"
+          @toggle-type="toggleSelector"
+        />
+
+        <div
+          v-if="
+            !!accountInfo.sparkAccount && network.name === NetworkNames.Firo
           "
-          @click="setSelectedSendTab('spark')"
+          class="send-transaction__tabs"
         >
-          Spark address
-        </button>
+          <button
+            :class="
+              selectedSendTab === 'transparent' &&
+              'send-transaction__tabs-active'
+            "
+            @click="setSelectedSendTab('transparent')"
+          >
+            Transparent address
+          </button>
+          <button
+            :class="
+              selectedSendTab === 'spark' && 'send-transaction__tabs-active'
+            "
+            @click="setSelectedSendTab('spark')"
+          >
+            Spark address
+          </button>
+        </div>
+
+        <transparent-send-tab
+          v-show="selectedSendTab === 'transparent'"
+          :network="network"
+          :account-info="accountInfo"
+          :is-send-token="isSendToken"
+          v-model:isLoadingAssets="isLoadingAssets"
+          :updateIsLoadingAssets="updateIsLoadingAssets"
+        />
+
+        <spark-send-tab
+          v-show="selectedSendTab === 'spark'"
+          v-if="!!accountInfo.sparkAccount"
+          :network="network"
+          :account-info="accountInfo"
+          :spark-account="accountInfo?.sparkAccount ?? null"
+          :is-send-token="isSendToken"
+          v-model:isLoadingAssets="isLoadingAssets"
+          :updateIsLoadingAssets="updateIsLoadingAssets"
+        />
       </div>
-
-      <transparent-send-tab
-        v-show="selectedSendTab === 'transparent'"
-        :network="network"
-        :account-info="accountInfo"
-        :is-send-token="isSendToken"
-        v-model:isLoadingAssets="isLoadingAssets"
-        :updateIsLoadingAssets="updateIsLoadingAssets"
-      />
-
-      <spark-send-tab
-        v-show="selectedSendTab === 'spark'"
-        v-if="!!accountInfo.sparkAccount"
-        :network="network"
-        :account-info="accountInfo"
-        :spark-account="accountInfo?.sparkAccount ?? null"
-        :is-send-token="isSendToken"
-        v-model:isLoadingAssets="isLoadingAssets"
-        :updateIsLoadingAssets="updateIsLoadingAssets"
-      />
     </div>
   </div>
 </template>
@@ -136,6 +141,12 @@ const toggleSelector = (isTokenSend: boolean) => {
   }
 }
 
+.send-transaction-wrapper {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+
 .send-transaction {
   width: 100%;
   height: 100%;

packages/extension/src/providers/bitcoin/ui/send-transaction/tabs/spark-send-tab.vue

@@ -52,7 +52,9 @@
         <base-button
           title="Send"
           :click="sendAction"
-          :disabled="!isInputsValid"
+          :disabled="
+            !isInputsValid || isAddress(addressTo, network.networkInfo)
+          "
         />
       </div>
     </div>
@@ -73,7 +75,7 @@ import { AccountsHeaderData, SparkAccount } from '@/ui/action/types/account';
 import BaseButton from '@action/components/base-button/index.vue';
 import { fromBase, isValidDecimals, toBase } from '@enkryptcom/utils';
 import BigNumber from 'bignumber.js';
-import { computed, onMounted, PropType, ref } from 'vue';
+import { computed, onMounted, PropType, ref, watch } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { toBN } from 'web3-utils';
 import SendSparkAddressInput from '../components/send-spark-address-input.vue';
@@ -125,40 +127,24 @@ const addressTo = ref<string>('');
 const availableAsset = ref<BTCToken>(loadingAvailableAsset);
 const amount = ref<string>('');
 const isMaxSelected = ref<boolean>(false);
+const isValidAddress = ref<boolean>(false);
+
+watch(addressTo, async newAddress => {
+  if (!newAddress) {
+    isValidAddress.value = false;
+    return;
+  }
+  const sparkValid = await isSparkAddress(newAddress);
+  isValidAddress.value =
+    sparkValid || isAddress(newAddress, props.network.networkInfo);
+});
 
 onMounted(async () => {
   trackSendEvents(SendEventType.SendOpen, { network: props.network.name });
   emit('update:isLoadingAssets', false);
   setAsset();
 });
 
-const isInputsValid = computed<boolean>(() => {
-  if (
-    !isSparkAddress(addressTo.value) &&
-    !isAddress(addressTo.value, props.network.networkInfo)
-  )
-    return false;
-
-  if (
-    props.isSendToken &&
-    !isValidDecimals(sendAmount.value, props.network.decimals!)
-  ) {
-    return false;
-  }
-  // if (
-  //   Number(sendAmount.value) < (props.network as BitcoinNetwork).dust &&
-  //   props.isSendToken
-  // )
-  //   return false;
-  // if (
-  //   new BigNumber(sendAmount.value).gt(
-  //     new BigNumber(props.sparkAccount.sparkBalance.availableBalance),
-  //   )
-  // )
-  //   return false;
-  return true;
-});
-
 const sendAmount = computed(() => {
   if (amount.value && amount.value !== '') return amount.value;
   return '0';
@@ -180,6 +166,41 @@ const { value: assetMaxValue } = useAsyncComputed(async () => {
   return fromBase(sparkBalance, props.network.decimals);
 }, '');
 
+const isInputsValid = computed<boolean>(() => {
+  if (!isValidAddress.value) return false;
+
+  if (
+    props.isSendToken &&
+    !isValidDecimals(sendAmount.value, props.network.decimals!)
+  ) {
+    return false;
+  }
+  if (
+    props.isSendToken &&
+    new BigNumber(sendAmount.value).lt(props.network.dust)
+  ) {
+    return false;
+  }
+
+  if (
+    props.sparkAccount?.sparkBalance?.availableBalance &&
+    new BigNumber(sendAmount.value).gt(
+      new BigNumber(
+        fromBase(
+          props.sparkAccount.sparkBalance.availableBalance,
+          props.network.decimals,
+        ),
+      ),
+    )
+  )
+    return false;
+  const sendAmountBigNumber = new BigNumber(sendAmount.value);
+  if (sendAmountBigNumber.isNaN()) return false;
+  if (sendAmountBigNumber.lte(0)) return false;
+  if (nativeBalanceAfterTransaction.value.isNeg()) return false;
+  return true;
+});
+
 const inputAmount = (inputAmount: string) => {
   if (inputAmount === '') {
     inputAmount = '0';

packages/extension/src/providers/bitcoin/ui/send-transaction/tabs/transparent-send-tab.vue

@@ -317,14 +317,24 @@ const updateUTXOs = async () => {
   });
 };
 
+const fetchAssetsRequestId = ref(0);
+
 const fetchAssets = () => {
+  const requestId = ++fetchAssetsRequestId.value;
   selectedAsset.value = loadingAsset;
   emit('update:isLoadingAssets', true);
-  return props.network.getAllTokens(addressFrom.value).then(allAssets => {
-    accountAssets.value = allAssets as BTCToken[];
-    selectedAsset.value = allAssets[0] as BTCToken;
-    emit('update:isLoadingAssets', false);
-  });
+  return props.network
+    .getAllTokens(addressFrom.value)
+    .then(allAssets => {
+      if (requestId !== fetchAssetsRequestId.value) return;
+      accountAssets.value = allAssets as BTCToken[];
+      selectedAsset.value = allAssets[0] as BTCToken;
+    })
+    .finally(() => {
+      if (requestId === fetchAssetsRequestId.value) {
+        emit('update:isLoadingAssets', false);
+      }
+    });
 };
 
 const toggleSelectToken = () => {
@@ -446,7 +456,6 @@ const toggleSelectContactTo = (open: boolean) => {
 const selectAccountFrom = (account: string) => {
   addressFrom.value = account;
   isOpenSelectContactFrom.value = false;
-  fetchAssets();
 };
 
 const selectAccountTo = (account: string) => {

packages/extension/src/ui/action/composables/update-activity-state.ts

@@ -38,7 +38,9 @@ export const useUpdateActivityState = (
           [
             {
               network: network.name,
-              from: 'Hidden',
+              from:
+                accountHeaderData.value.sparkAccount?.defaultAddress ??
+                'Hidden',
               to: 'Hidden',
               isIncoming: false,
               status: ActivityStatus.success,

packages/extension/src/ui/action/views/accounts/components/accounts-list-item.vue

@@ -4,7 +4,15 @@
     :class="{ disabled: !active }"
     @click="select(address)"
   >
-    <img :src="identiconElement(address)" />
+    <img
+      :src="
+        identiconElement(
+          network.name === NetworkNames.Firo && active && sparkDisplayAddress
+            ? sparkDisplayAddress
+            : address,
+        )
+      "
+    />
     <div class="accounts-item__info">
       <p class="accounts-item__info-name">
         {{ name }}

packages/extension/src/ui/action/views/network-activity/components/network-activity-total.vue

@@ -40,10 +40,8 @@ packages/extension/src/ui/action/views/network-activity/components/network-activ
           <span>Private {{ symbol }}</span>
         </h6>
 
-        <p v-if="network.name !== NetworkNames.Firo">
-          <span v-if="subnetwork !== ''">Chain {{ subnetwork }} &middot;</span>
-          {{ $filters.parseCurrency(fiatAmount) }}
-        </p>
+        <span v-if="subnetwork !== ''">Chain {{ subnetwork }} &middot;</span>
+        {{ $filters.parseCurrency(totalFiatAmount) }}
       </div>
 
       <div v-if="tokenPrice !== '0.00'" class="network-activity__total-market">
@@ -101,6 +99,7 @@ import { GridComponent } from 'echarts/components';
 import VChart from 'vue-echarts';
 use([SVGRenderer, LineChart, GridComponent]);
 import { fromBase } from '@enkryptcom/utils';
+import BigNumber from 'bignumber.js';
 import { computed, onBeforeMount, PropType, ref, watchEffect } from 'vue';
 import { AccountsHeaderData, SparkAccount } from '@action/types/account';
 import { NetworkNames } from '@enkryptcom/types';
@@ -232,9 +231,21 @@ const {
 } = useAsyncComputed(async () => {
   const balance = await calculateCurrentSparkBalance();
   if (balance === '0') return '0';
-  return fromBase(balance, props.network.decimals ?? 8);
+  const decimalValue = fromBase(balance, props.network.decimals ?? 8);
+  return new BigNumber(decimalValue).toFormat(5);
 }, '-');
 
+const totalFiatAmount = computed(() => {
+  const transparentFiat = parseFloat(props.fiatAmount) || 0;
+  if (props.network.name === NetworkNames.Firo) {
+    const sparkVal = parseFloat(sparkBalanceFormatted.value) || 0;
+    const price = parseFloat(props.tokenPrice) || 0;
+    const sparkFiat = sparkVal * price;
+    return transparentFiat + sparkFiat;
+  }
+  return transparentFiat;
+});
+
 const openAnonymizeFundsModal = () => {
   synchronizeState.value = true;
 };
@@ -294,6 +305,8 @@ const openAnonymizeFundsModal = () => {
 
 .network-activity {
   &__total-error {
+    width: 100%;
+    box-sizing: border-box;
     padding: 16px 24px;
     background: rgba(239, 68, 68, 0.08);
     border: 1.5px solid rgba(239, 68, 68, 0.2);
@@ -314,6 +327,8 @@ const openAnonymizeFundsModal = () => {
   }
 
   &__total {
+    width: 100%;
+    box-sizing: border-box;
     padding: 20px;
     background: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%);
     border-radius: 16px;