improve wallet accounts

src/layouts/components/NavBarWallet.vue

@@ -37,7 +37,7 @@ const tipMsg = computed(() => {
   <div class="dropdown dropdown-hover dropdown-end">
     <label
       tabindex="0"
-      class="btn btn-sm m-1 lowercase hidden truncate md:!inline-flex text-xs md:!text-sm"
+      class="btn btn-sm btn-primary m-1 lowercase hidden truncate md:!inline-flex text-xs md:!text-sm"
     >
       <Icon icon="mdi:wallet" />
       <span class="ml-1 hidden md:block">
@@ -51,7 +51,7 @@ const tipMsg = computed(() => {
       <label
         v-if="!walletStore?.currentAddress"
         for="PingConnectWallet"
-        class="btn btn-sm"
+        class="btn btn-sm btn-primary"
         ><Icon icon="mdi:wallet" /><span class="ml-1 hidden md:block"
           >Connect Wallet</span
         ></label

src/modules/wallet/accounts.vue

@@ -11,7 +11,6 @@ import { scanLocalKeys, type AccountEntry, scanCompatibleAccounts, type LocalKey
 const dashboard = useDashboard()
 const format = useFormatter()
 const editable = ref(false) // to edit addresses
-const source = ref('wallet'); // values: wallet, imported, address
 const sourceAddress = ref('') //
 const selectedSource = ref({} as LocalKey) // 
 function toggleEdit() {
@@ -22,44 +21,21 @@ const conf = ref(JSON.parse(localStorage.getItem("imported-addresses") || "{}")
 const balances = ref({} as Record<string, Coin[]>)
 const delegations = ref({} as Record<string, Delegation[]>)
 
-// auto import current connected wallet.
-scanLocalKeys().forEach(wallet => {
-  const { data } = fromBech32(wallet.cosmosAddress)
-  const walletKey = toBase64(data)
-  let imported = conf.value[walletKey]
-  console.log('imported:', imported)
-  // save the default address to local storage
-  if (!imported) {
-    imported = []
-    dashboard.favorite.forEach(x => {
-      const chain = dashboard.chains[x]
-      if (chain && wallet.hdPath.indexOf(chain.coinType) === 6) {
-        imported.push({
-          chainName: chain.chainName,
-          logo: chain.logo,
-          address: toBech32(chain.bech32Prefix, data),
-          coinType: chain.coinType,
-          endpoint: chain.endpoints.rest?.at(0)?.address
-        })
+// load balances
+Object.values(conf.value).forEach(imported => {
+  let promise = Promise.resolve()
+  for(let i = 0;i < imported.length; i++) {
+    promise = promise.then(() => new Promise((resolve) => {
+      // continue only if the page is living
+      if(imported[i].endpoint) {
+        loadBalances(imported[i].endpoint || "", imported[i].address).finally(()=> resolve())
+      } else {
+        resolve()
       }
-    })
-    conf.value[walletKey] = imported;
-    localStorage.setItem("imported-addresses", JSON.stringify(conf.value))
+    }))
   }
-  // load balance & delegations
-  imported.forEach(x => {
-    if (x.endpoint) {
-      const client = CosmosRestClient.newDefault(x.endpoint)
-      client.getBankBalances(x.address).then(res => {
-        balances.value[x.address] = res.balances.filter(x => x.denom.length < 10)
-      })
-      client.getStakingDelegations(x.address).then(res => {
-        delegations.value[x.address] = res.delegation_responses
-      })
-    }
-  })
-})
 
+})
 
 const accounts = computed(() => {
   let a = [] as AccountEntry[]
@@ -74,6 +50,8 @@ const accounts = computed(() => {
           denom = b.balance.denom
         })
         entry.delegation = { amount: String(amount), denom }
+      }else{
+        entry.delegation = undefined
       }
       entry.balances = balances.value[entry.address]
     })
@@ -138,7 +116,6 @@ function removeAddress(addr: string) {
 }
 
 async function addAddress(acc: AccountEntry) {
-  console.log('add', acc)
   const { data } = fromBech32(acc.address)
   const key = toBase64(data)
 
@@ -162,18 +139,22 @@ async function addAddress(acc: AccountEntry) {
   }
 
   if (acc.endpoint) {
-    const client = CosmosRestClient.newDefault(acc.endpoint)
-    client.getBankBalances(acc.address).then(res => {
-      balances.value[acc.address] = res.balances.filter(x => x.denom.length < 10)
-    })
-    client.getStakingDelegations(acc.address).then(res => {
-      delegations.value[acc.address] = res.delegation_responses
-    })
+    loadBalances(acc.endpoint, acc.address)
   }
 
   localStorage.setItem("imported-addresses", JSON.stringify(conf.value))
 }
 
+async function loadBalances(endpoint:string, address: string) {
+  const client = CosmosRestClient.newDefault(endpoint)
+  await client.getBankBalances(address).then(res => {
+      balances.value[address] = res.balances.filter(x => x.denom.length < 10)
+    })
+  await client.getStakingDelegations(address).then(res => {
+      delegations.value[address] = res.delegation_responses
+    })
+}
+
 </script>
 <template>
   <div>

src/modules/wallet/utils.ts

@@ -31,11 +31,9 @@ export function scanLocalKeys() {
   return connected
 }
 
-
 export function scanCompatibleAccounts(keys: LocalKey[]) {
   const dashboard = useDashboard()
   const available = [] as AccountEntry[]
-  console.log("from keys:", keys)
   keys.forEach(wallet => {
     Object.values(dashboard.chains).forEach(chain => {
       const { data } = fromBech32(wallet.cosmosAddress)
@@ -49,6 +47,5 @@ export function scanCompatibleAccounts(keys: LocalKey[]) {
       })
     })
   })
-  console.log(available)
   return available
 }