1. Accounts list show spark addresses

2. Fix state init
3. In QR now shows Firo:{address}

Author: narekpetrosyan

packages/extension/src/providers/bitcoin/libs/firo-wallet/base-firo-wallet.ts

@@ -16,11 +16,6 @@ import {
 import { firoElectrum } from '../electrum-client/electrum-client';
 import configs from './configs';
 import { getSparkState } from '@/libs/spark-handler/generateSparkWallet';
-import {
-  LOCAL_STORAGE_KEYS,
-  LOCAL_STORAGE_PREFIXES,
-  LocalStorageHelper,
-} from '@action/db/localStorage';
 import BrowserStorage from '@/libs/common/browser-storage';
 import { InternalStorageNamespace } from '@/types/provider';
 
@@ -63,6 +58,7 @@ export class BaseFiroWallet {
   seed: string = '';
   network = NETWORK;
   balance: number = 0;
+  private addresses2Check: string[] | null = null;
 
   next_free_address_index = 0;
   next_free_change_address_index = 0;
@@ -229,33 +225,34 @@ export class BaseFiroWallet {
     return this._xPub;
   }
 
-  async getSparkAddressAsync(): Promise<string | undefined> {
-    const localStorage = new LocalStorageHelper(LOCAL_STORAGE_PREFIXES.wallet);
-
-    if (!localStorage.exists(LOCAL_STORAGE_KEYS.sparkIndex)) {
-      localStorage.set(LOCAL_STORAGE_KEYS.sparkIndex, 1);
+  private initAddresses2Check = async () => {
+    if (this.addresses2Check?.length) {
+      return this.addresses2Check;
     }
+    const address2Check = await this.getTransactionsAddresses();
+    this.addresses2Check = address2Check;
+    return address2Check;
+  };
 
-    const currentIndex = localStorage.get<number>(
-      LOCAL_STORAGE_KEYS.sparkIndex,
-    );
-
-    const sparkState = await getSparkState(currentIndex);
-    return sparkState?.defaultAddress;
+  async getAddressIndex(address: string) {
+    const address2Check = await this.initAddresses2Check();
+    return address2Check.indexOf(address);
   }
 
-  skipAddress(): void {
-    const localStorage = new LocalStorageHelper(LOCAL_STORAGE_PREFIXES.wallet);
+  async getSparkAddressAsync(
+    currentAddress: string,
+  ): Promise<string | undefined> {
+    const currentIndex = await this.getAddressIndex(currentAddress);
 
-    if (!localStorage.exists(LOCAL_STORAGE_KEYS.sparkIndex)) {
-      localStorage.set(LOCAL_STORAGE_KEYS.sparkIndex, 1);
+    if (currentIndex === -1) {
+      console.error(
+        `🚨 Current address not found in address2Check: ${currentAddress}`,
+      );
+      return undefined;
     }
 
-    const currentIndex = localStorage.get<number>(
-      LOCAL_STORAGE_KEYS.sparkIndex,
-    );
-
-    localStorage.set(LOCAL_STORAGE_KEYS.sparkIndex, currentIndex! + 1);
+    const sparkState = await getSparkState(currentIndex);
+    return sparkState?.defaultAddress;
   }
 
   async _getInternalAddressByIndex(index: number): Promise<string | undefined> {

packages/extension/src/ui/action/App.vue

@@ -150,6 +150,7 @@ import { useRateStore } from './store/rate-store';
 import { isGeoRestricted, isWalletRestricted } from '@/libs/utils/screening';
 import { useUpdateActivityState } from '@action/composables/update-activity-state';
 import { partition } from '@action/utils/array-utils';
+import { getSparkAddress } from '@action/composables/get-spark-address';
 
 const wallet = new BaseFiroWallet();
 const db = new IndexedDBHelper();
@@ -352,7 +353,15 @@ onMounted(async () => {
 
 const getSparkAccountState = async (network: BaseNetwork) => {
   if (network.name === NetworkNames.Firo) {
-    const defaultAddress = await wallet.getSparkAddressAsync();
+    // TODO: check maybe redundand
+    const selectedAccount = accountHeaderData.value.selectedAccount;
+    const currentSelectedAddress = selectedAccount?.address;
+
+    if (!currentSelectedAddress) {
+      return null;
+    }
+    const displayAddress = network.displayAddress(currentSelectedAddress);
+    const defaultAddress = await wallet.getSparkAddressAsync(displayAddress);
     await db.waitInit();
     const availableBalance = await db.readData<string>(
       DB_DATA_KEYS.sparkBalance,
@@ -375,18 +384,40 @@ const setNetwork = async (network: BaseNetwork) => {
     currentSubNetwork.value = '';
   }
 
-  const activeAccounts = await getAccountsByNetworkName(network.name);
-  const inactiveAccounts = await kr.getAccounts(
+  let activeAccounts = await getAccountsByNetworkName(network.name);
+  let inactiveAccounts = await kr.getAccounts(
     getOtherSigners(network.signer),
   );
 
   const sparkAccount = {} as SparkAccount;
 
+  const selectedAddress = await domainState.getSelectedAddress();
+
   if (network.name === NetworkNames.Firo) {
+    /**
+     * Filter Firo accounts by base path
+     */
+    const firoBasePath = "m/44'/136'/0'/0";
+
+    const [activeAccs, inactiveAccs] = partition(
+      activeAccounts,
+      account => account.basePath === firoBasePath,
+    );
+
+    activeAccounts = activeAccs;
+    inactiveAccounts = inactiveAccs;
+
     /**
      * Init spark account info
      */
-    const defaultAddress = await wallet.getSparkAddressAsync();
+
+    let selectedAccount = activeAccounts[0];
+    if (selectedAddress) {
+      const found = activeAccounts.find(acc => acc.address === selectedAddress);
+      if (found) selectedAccount = found;
+    }
+
+    const defaultAddress = await getSparkAddress(network, selectedAccount.address);
 
     await db.waitInit();
     const availableBalance =
@@ -396,23 +427,8 @@ const setNetwork = async (network: BaseNetwork) => {
       sparkAccount['defaultAddress'] = defaultAddress;
     }
     sparkAccount['sparkBalance'] = { availableBalance };
-
-    /**
-     * Filter Firo accounts by base path
-     */
-    // const firoBasePath = "m/44'/136'/0'/0";
-    //
-    // const [activeAccs, inactiveAccs] = partition(
-    //   activeAccounts,
-    //   account => account.basePath === firoBasePath,
-    // );
-    //
-    // activeAccounts = activeAccs;
-    // inactiveAccounts = inactiveAccs;
   }
 
-  const selectedAddress = await domainState.getSelectedAddress();
-
   let selectedAccount = activeAccounts[0];
   if (selectedAddress) {
     const found = activeAccounts.find(acc => acc.address === selectedAddress);
@@ -536,7 +552,17 @@ const onSelectedSubnetworkChange = async (id: string) => {
 };
 
 const onSelectedAddressChanged = async (newAccount: EnkryptAccount) => {
+  const defaultAddress = await getSparkAddress(
+    currentNetwork,
+    newAccount.address,
+  );
+
+  if (defaultAddress && accountHeaderData.value.sparkAccount) {
+    accountHeaderData.value.sparkAccount['defaultAddress'] = defaultAddress;
+  }
+
   accountHeaderData.value.selectedAccount = newAccount;
+
   await checkAddress(newAccount);
   if (!isAddressRestricted.value.isRestricted) {
     const accountStates = {

packages/extension/src/ui/action/composables/get-spark-address.ts

@@ -0,0 +1,26 @@
+import { unref, type MaybeRef } from 'vue';
+import { BaseNetwork } from '@/types/base-network';
+import { BaseFiroWallet } from '@/providers/bitcoin/libs/firo-wallet/base-firo-wallet';
+import { NetworkNames } from '@enkryptcom/types/dist';
+
+const wallet = new BaseFiroWallet();
+
+export async function getSparkAddress(
+  network: MaybeRef<BaseNetwork>,
+  selectedAddress: MaybeRef<string>,
+) {
+  const selectedNetwork = unref(network);
+  const selectedAddressData = unref(selectedAddress);
+
+  if (selectedNetwork?.name !== NetworkNames.Firo) {
+    return null;
+  }
+
+  if (!selectedAddressData) {
+    return null;
+  }
+
+  const displayAddress = selectedNetwork.displayAddress(selectedAddressData);
+
+  return wallet.getSparkAddressAsync(displayAddress);
+}

packages/extension/src/ui/action/db/localStorage.ts

@@ -11,7 +11,13 @@
       </p>
       <p class="accounts-item__info-amount">
         {{ $filters.formatFloatingPointValue(amount).value }} {{ symbol }}
-        <span>{{ $filters.replaceWithEllipsis(address, 6, 4) }}</span>
+        <span>{{
+          $filters.replaceWithEllipsis(
+            network.name === NetworkNames.Firo ? sparkDisplayAddress : address,
+            6,
+            4,
+          )
+        }}</span>
       </p>
     </div>
     <done-icon
@@ -41,13 +47,16 @@ import DoneIcon from '@action/icons/common/done_icon.vue';
 import MoreIcon from '@action/icons/common/more-icon.vue';
 import AccountsListItemMenu from './accounts-list-item-menu.vue';
 import { PropType, ref } from 'vue';
-import { onClickOutside } from '@vueuse/core';
+import { computedAsync, onClickOutside } from '@vueuse/core';
+import { getSparkAddress } from '@action/composables/get-spark-address';
+import { BaseNetwork } from '@/types/base-network';
+import { NetworkNames } from '@enkryptcom/types/dist';
 
 const openEdit = ref(false);
 const dropdown = ref(null);
 const toggle = ref(null);
 
-defineProps({
+const props = defineProps({
   name: {
     type: String,
     default: '',
@@ -71,6 +80,10 @@ defineProps({
       return {};
     },
   },
+  network: {
+    type: Object as PropType<BaseNetwork>,
+    default: () => ({}),
+  },
   identiconElement: {
     type: Function as PropType<(address: string, options?: any) => string>,
     default: () => ({}),
@@ -80,6 +93,11 @@ defineProps({
   deletable: Boolean,
 });
 
+const sparkDisplayAddress = computedAsync(async () => {
+  if (props.network.name !== NetworkNames.Firo) return null;
+  return await getSparkAddress(props.network, props.address);
+});
+
 const toggleEdit = () => {
   openEdit.value = !openEdit.value;
 };

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

@@ -20,6 +20,7 @@
           :is-checked="accountInfo.selectedAccount?.address == account.address"
           :select="selectAccount"
           :active="true"
+          :network="network"
           :identicon-element="network.identicon"
           :show-edit="true"
           :deletable="account.walletType !== WalletType.mnemonic"
@@ -39,6 +40,7 @@
           :is-checked="false"
           :active="false"
           :identicon-element="network.identicon"
+          :network="network"
         />
         <div
           v-if="displayInactive.length === 0 && displayActive.length === 0"

packages/extension/src/ui/action/views/accounts/index.vue

@@ -33,11 +33,9 @@
           <div class="deposit__code">
             <qrcode-vue
               :value="
-                $props.network?.provider == ProviderName.kadena
-                  ? network.displayAddress(account.address)
-                  : network.provider +
-                    ':' +
-                    network.displayAddress(account.address)
+                NetworkNames.Firo +
+                ':' +
+                network.displayAddress(account.address)
               "
               :size="150"
               level="H"
@@ -73,7 +71,7 @@
         <div v-if="activeTab === 'spark' && !!sparkAccount">
           <div class="deposit__code">
             <qrcode-vue
-              :value="network.provider + ':' + sparkAccount?.defaultAddress"
+              :value="NetworkNames.Firo + ':' + sparkAccount?.defaultAddress"
               :size="150"
               level="H"
             />

packages/extension/src/ui/action/views/deposit/index.vue

@@ -26,6 +26,7 @@
           :active="true"
           :identicon-element="network.identicon"
           :show-edit="showEdit"
+          :network="network"
         />
       </custom-scrollbar>
     </div>