From 18988f466d467b5ac44a4608688801be1fbd0c29 Mon Sep 17 00:00:00 2001
From: Preschian Febryantara <preschian@users.noreply.github.com>
Date: Wed, 17 May 2023 16:55:35 +0700
Subject: [PATCH 1/8] feat: multi chain balances

---
 components/balance/MultipleBalances.vue       | 165 ++++++++++++++++++
 .../common/ConnectWallet/WalletAsset.vue      |  27 ++-
 2 files changed, 178 insertions(+), 14 deletions(-)
 create mode 100644 components/balance/MultipleBalances.vue

diff --git a/components/balance/MultipleBalances.vue b/components/balance/MultipleBalances.vue
new file mode 100644
index 0000000000..7b6ad0c757
--- /dev/null
+++ b/components/balance/MultipleBalances.vue
@@ -0,0 +1,165 @@
+<template>
+  <div>
+    <div class="balance">
+      <div class="balance-row">
+        <div>Chain</div>
+        <div class="has-text-right">Balance</div>
+        <div class="has-text-right">Token</div>
+        <div class="has-text-right">USD</div>
+      </div>
+
+      <div v-for="(chain, key) in availableChains" :key="key" class="is-size-7">
+        <div v-for="token in chain" :key="token.token" class="balance-row">
+          <div>{{ key }}</div>
+          <div class="has-text-right">
+            {{ token.balance }}
+          </div>
+          <div class="has-text-right">{{ token.token }}</div>
+          <div class="has-text-right">${{ delimiter(token.usd) }}</div>
+        </div>
+      </div>
+
+      <NeoSkeleton v-if="status === 'loading'" animated />
+    </div>
+
+    <hr class="my-2" />
+    <p
+      class="is-flex is-justify-content-space-between is-align-items-center my-1">
+      <span class="is-size-7"> {{ $i18n.t('spotlight.total') }}: </span>
+      <span>${{ delimiter(sumUsd) }}</span>
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ApiPromise, WsProvider } from '@polkadot/api'
+import { decodeAddress, encodeAddress } from '@polkadot/util-crypto'
+import { CHAINS, ENDPOINT_MAP } from '@kodadot1/static'
+import { NeoSkeleton } from '@kodadot1/brick'
+
+import format from '@/utils/format/balance'
+import { useFiatStore } from '@/stores/fiat'
+
+import type { PalletBalancesAccountData } from '@polkadot/types/lookup'
+import { calculateExactUsdFromToken } from '@/utils/calculation'
+
+interface Token {
+  token: string
+  balance: string
+  usd: number
+}
+
+interface Chain {
+  [key: string]: Token[]
+}
+
+const { accountId } = useAuth()
+
+const status = ref('loading')
+const availableChains = reactive<Chain>({
+  Kusama: [],
+  Statemine: [],
+  Basilisk: [],
+})
+
+const mapToPrefix = {
+  Kusama: 'ksm',
+  Basilisk: 'bsx',
+  Statemine: 'stmn',
+}
+
+function delimiter(amount: string | number) {
+  const formatAmount = typeof amount === 'number' ? amount.toString() : amount
+  const number = parseFloat(formatAmount.replace(/,/g, ''))
+
+  return number.toLocaleString('en-US', {
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2,
+  })
+}
+
+const fiatStore = useFiatStore()
+const totalUsd = ref([0])
+const sumUsd = computed(() => totalUsd.value.reduce((a, b) => a + b, 0))
+function calculateUsd(amount: string, token = 'KSM') {
+  if (!amount) {
+    return 0
+  }
+
+  const amountToNumber = Number(amount.replace(/\,/g, ''))
+
+  if (token === 'KSM') {
+    return calculateExactUsdFromToken(
+      amountToNumber,
+      Number(fiatStore.getCurrentKSMValue)
+    )
+  }
+
+  return calculateExactUsdFromToken(
+    amountToNumber,
+    Number(fiatStore.getCurrentBSXValue)
+  )
+}
+
+async function getBalance(chainName, token = 'KSM', tokenId = 0) {
+  const currentAddress = accountId.value
+  const prefix = mapToPrefix[chainName]
+  const chain = CHAINS[prefix]
+
+  const publicKey = decodeAddress(currentAddress)
+  const prefixAddress = encodeAddress(publicKey, chain.ss58Format)
+  const wsProvider = new WsProvider(ENDPOINT_MAP[prefix])
+
+  const api = await ApiPromise.create({
+    provider: wsProvider,
+  })
+
+  let currentBalance
+
+  if (tokenId) {
+    const balance = await api.query.tokens.accounts(prefixAddress, tokenId)
+    currentBalance = format(
+      (balance as PalletBalancesAccountData).free,
+      chain.tokenDecimals,
+      false
+    )
+  } else {
+    const { data: balance } = await api.query.system.account(prefixAddress)
+    currentBalance = format(balance.free, chain.tokenDecimals, false)
+  }
+
+  const balance = delimiter(currentBalance)
+  const usd = calculateUsd(balance, token)
+
+  availableChains[chainName].push({
+    token,
+    balance,
+    usd,
+  })
+  totalUsd.value.push(usd)
+
+  await wsProvider.disconnect()
+}
+
+onMounted(async () => {
+  await fiatStore.fetchFiatPrice()
+  await getBalance('Kusama')
+  await getBalance('Statemine')
+  await getBalance('Basilisk', 'BSX')
+  await getBalance('Basilisk', 'KSM', 1)
+  status.value = 'done'
+})
+</script>
+
+<style scoped lang="scss">
+.balance {
+  &-row {
+    display: flex;
+    justify-content: space-between;
+
+    & > * {
+      flex: 1;
+    }
+  }
+}
+</style>
diff --git a/components/common/ConnectWallet/WalletAsset.vue b/components/common/ConnectWallet/WalletAsset.vue
index eac44a2fe5..a17c3b7ebc 100644
--- a/components/common/ConnectWallet/WalletAsset.vue
+++ b/components/common/ConnectWallet/WalletAsset.vue
@@ -14,17 +14,18 @@
     <hr class="my-2" />
 
     <div>
-      <ProfileAssetsList v-if="isSnekOrBsx" @totalValueChange="setTotalValue" />
-      <AccountBalance v-else class="is-size-7" />
+      <ProfileAssetsList v-if="isSnek" @totalValueChange="setTotalValue" />
+      <MultipleBalances v-else />
     </div>
 
-    <hr class="my-2" />
-
-    <div
-      v-if="totalValue"
-      class="is-flex is-justify-content-space-between is-align-items-center my-1">
-      <span class="is-size-7"> {{ $i18n.t('spotlight.total') }}: </span>
-      <span> ${{ totalValue.toFixed(2) }} </span>
+    <div v-if="isSnek">
+      <hr class="my-2" />
+      <div
+        v-if="totalValue"
+        class="is-flex is-justify-content-space-between is-align-items-center my-1">
+        <span class="is-size-7"> {{ $i18n.t('spotlight.total') }}: </span>
+        <span> ${{ totalValue.toFixed(2) }} </span>
+      </div>
     </div>
     <div
       class="buttons is-justify-content-space-between is-flex-wrap-nowrap my-2">
@@ -52,8 +53,8 @@ import useIdentity from '@/components/identity/utils/useIdentity'
 const Identity = defineAsyncComponent(
   () => import('@/components/identity/module/IdentityLink.vue')
 )
-const AccountBalance = defineAsyncComponent(
-  () => import('@/components/shared/AccountBalance.vue')
+const MultipleBalances = defineAsyncComponent(
+  () => import('@/components/balance/MultipleBalances.vue')
 )
 const ProfileAssetsList = defineAsyncComponent(
   () => import('@/components/rmrk/Profile/ProfileAssetsList.vue')
@@ -69,9 +70,7 @@ const emit = defineEmits(['back'])
 
 const account = computed(() => identityStore.getAuthAddress)
 const walletName = computed(() => walletStore.wallet.name)
-const isSnekOrBsx = computed(
-  () => urlPrefix.value === 'snek' || urlPrefix.value === 'bsx'
-)
+const isSnek = computed(() => urlPrefix.value === 'snek')
 
 const { shortenedAddress } = useIdentity({
   address: account,

From 6d8b92f70b4987c3e7cb280637e538264c341eaf Mon Sep 17 00:00:00 2001
From: Preschian Febryantara <preschian@users.noreply.github.com>
Date: Wed, 17 May 2023 17:38:45 +0700
Subject: [PATCH 2/8] fix: available balance only

---
 components/balance/MultipleBalances.vue | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/components/balance/MultipleBalances.vue b/components/balance/MultipleBalances.vue
index 7b6ad0c757..460535f075 100644
--- a/components/balance/MultipleBalances.vue
+++ b/components/balance/MultipleBalances.vue
@@ -36,6 +36,7 @@ import { ApiPromise, WsProvider } from '@polkadot/api'
 import { decodeAddress, encodeAddress } from '@polkadot/util-crypto'
 import { CHAINS, ENDPOINT_MAP } from '@kodadot1/static'
 import { NeoSkeleton } from '@kodadot1/brick'
+import { balanceOf } from '@kodadot1/sub-api'
 
 import format from '@/utils/format/balance'
 import { useFiatStore } from '@/stores/fiat'
@@ -124,8 +125,8 @@ async function getBalance(chainName, token = 'KSM', tokenId = 0) {
       false
     )
   } else {
-    const { data: balance } = await api.query.system.account(prefixAddress)
-    currentBalance = format(balance.free, chain.tokenDecimals, false)
+    const balance = await balanceOf(api, prefixAddress)
+    currentBalance = format(balance, chain.tokenDecimals, false)
   }
 
   const balance = delimiter(currentBalance)

From e5f092a7569cdfa3eb491629cf257aedffc5a2e8 Mon Sep 17 00:00:00 2001
From: Preschian Febryantara <preschian@users.noreply.github.com>
Date: Wed, 17 May 2023 18:15:00 +0700
Subject: [PATCH 3/8] fix: add await to fetchBalance

---
 components/common/ConnectWallet/WalletAsset.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/components/common/ConnectWallet/WalletAsset.vue b/components/common/ConnectWallet/WalletAsset.vue
index a17c3b7ebc..826fb64dcd 100644
--- a/components/common/ConnectWallet/WalletAsset.vue
+++ b/components/common/ConnectWallet/WalletAsset.vue
@@ -90,15 +90,15 @@ const setTotalValue = (value: number) => {
   totalValue.value = value
 }
 
-onMounted(() => {
+onMounted(async () => {
   if (identityStore.getAuthAddress) {
     $consola.log('fetching balance...')
     $consola.log(urlPrefix.value)
-    identityStore.fetchBalance({
+    await identityStore.fetchBalance({
       address: identityStore.getAuthAddress,
     })
     $consola.log(identityStore.auth.balance)
-    $consola.log(identityStore.auth.balance[urlPrefix.value])
+    $consola.log(identityStore.auth.balance?.[urlPrefix.value])
   }
 })
 

From 920ca7f511471d54b85f1e70fdc8ea1194b9ae66 Mon Sep 17 00:00:00 2001
From: Preschian Febryantara <preschian@users.noreply.github.com>
Date: Wed, 17 May 2023 18:34:26 +0700
Subject: [PATCH 4/8] fix: style and parallel requests

---
 components/balance/MultipleBalances.vue | 26 ++++++++++++++++++-------
 1 file changed, 19 insertions(+), 7 deletions(-)

diff --git a/components/balance/MultipleBalances.vue b/components/balance/MultipleBalances.vue
index 460535f075..9bc1049922 100644
--- a/components/balance/MultipleBalances.vue
+++ b/components/balance/MultipleBalances.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <div class="balance">
-      <div class="balance-row">
+      <div class="balance-row balance-title is-size-7">
         <div>Chain</div>
         <div class="has-text-right">Balance</div>
         <div class="has-text-right">Token</div>
@@ -103,7 +103,7 @@ function calculateUsd(amount: string, token = 'KSM') {
 }
 
 async function getBalance(chainName, token = 'KSM', tokenId = 0) {
-  const currentAddress = accountId.value
+  const currentAddress = 'CuHWHNcBt3ASMVSJmcJyiBWGxxiWLyjYoYbGjfhL4ovoeSd'
   const prefix = mapToPrefix[chainName]
   const chain = CHAINS[prefix]
 
@@ -144,15 +144,21 @@ async function getBalance(chainName, token = 'KSM', tokenId = 0) {
 
 onMounted(async () => {
   await fiatStore.fetchFiatPrice()
-  await getBalance('Kusama')
-  await getBalance('Statemine')
-  await getBalance('Basilisk', 'BSX')
-  await getBalance('Basilisk', 'KSM', 1)
-  status.value = 'done'
+
+  Promise.all([
+    getBalance('Kusama'),
+    getBalance('Statemine'),
+    getBalance('Basilisk', 'BSX'),
+    getBalance('Basilisk', 'KSM', 1),
+  ]).then(() => {
+    status.value = 'done'
+  })
 })
 </script>
 
 <style scoped lang="scss">
+@import '@/styles/abstracts/variables';
+
 .balance {
   &-row {
     display: flex;
@@ -162,5 +168,11 @@ onMounted(async () => {
       flex: 1;
     }
   }
+
+  &-title {
+    @include ktheme() {
+      color: theme('k-grey');
+    }
+  }
 }
 </style>

From 400314840a9b24f0d34bc4a16b9209d4b39004b9 Mon Sep 17 00:00:00 2001
From: Preschian Febryantara <preschian@users.noreply.github.com>
Date: Wed, 17 May 2023 18:35:52 +0700
Subject: [PATCH 5/8] fix: use currentAddress

---
 components/balance/MultipleBalances.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/balance/MultipleBalances.vue b/components/balance/MultipleBalances.vue
index 9bc1049922..b68b955610 100644
--- a/components/balance/MultipleBalances.vue
+++ b/components/balance/MultipleBalances.vue
@@ -103,7 +103,7 @@ function calculateUsd(amount: string, token = 'KSM') {
 }
 
 async function getBalance(chainName, token = 'KSM', tokenId = 0) {
-  const currentAddress = 'CuHWHNcBt3ASMVSJmcJyiBWGxxiWLyjYoYbGjfhL4ovoeSd'
+  const currentAddress = accountId.value
   const prefix = mapToPrefix[chainName]
   const chain = CHAINS[prefix]
 

From d4548ece2aabbcea19cf46fb9354ce4146962bb1 Mon Sep 17 00:00:00 2001
From: Preschian Febryantara <preschian@users.noreply.github.com>
Date: Wed, 17 May 2023 18:49:09 +0700
Subject: [PATCH 6/8] fix: use has-text-grey instead

---
 components/balance/MultipleBalances.vue | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/components/balance/MultipleBalances.vue b/components/balance/MultipleBalances.vue
index b68b955610..8d2e6c296a 100644
--- a/components/balance/MultipleBalances.vue
+++ b/components/balance/MultipleBalances.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <div class="balance">
-      <div class="balance-row balance-title is-size-7">
+      <div class="balance-row has-text-grey is-size-7">
         <div>Chain</div>
         <div class="has-text-right">Balance</div>
         <div class="has-text-right">Token</div>
@@ -168,11 +168,5 @@ onMounted(async () => {
       flex: 1;
     }
   }
-
-  &-title {
-    @include ktheme() {
-      color: theme('k-grey');
-    }
-  }
 }
 </style>

From 79e725e297224df84ea3a98b9b92b6d20183a552 Mon Sep 17 00:00:00 2001
From: Preschian Febryantara <preschian@users.noreply.github.com>
Date: Wed, 17 May 2023 19:56:48 +0700
Subject: [PATCH 7/8] fix: translation, map ksm token id, unused import,
 selected chain bold

---
 components/balance/MultipleBalances.vue | 28 +++++++++++++++++--------
 locales/en.json                         |  3 +++
 2 files changed, 22 insertions(+), 9 deletions(-)

diff --git a/components/balance/MultipleBalances.vue b/components/balance/MultipleBalances.vue
index 8d2e6c296a..1e306b4f55 100644
--- a/components/balance/MultipleBalances.vue
+++ b/components/balance/MultipleBalances.vue
@@ -2,14 +2,18 @@
   <div>
     <div class="balance">
       <div class="balance-row has-text-grey is-size-7">
-        <div>Chain</div>
-        <div class="has-text-right">Balance</div>
-        <div class="has-text-right">Token</div>
-        <div class="has-text-right">USD</div>
+        <div>{{ $t('general.chain') }}</div>
+        <div class="has-text-right">{{ $t('general.balance') }}</div>
+        <div class="has-text-right">{{ $t('general.token') }}</div>
+        <div class="has-text-right">{{ $t('general.usd') }}</div>
       </div>
 
       <div v-for="(chain, key) in availableChains" :key="key" class="is-size-7">
-        <div v-for="token in chain" :key="token.token" class="balance-row">
+        <div
+          v-for="token in chain"
+          :key="token.token"
+          class="balance-row"
+          :class="{ 'has-text-weight-bold': token.selected }">
           <div>{{ key }}</div>
           <div class="has-text-right">
             {{ token.balance }}
@@ -40,14 +44,16 @@ import { balanceOf } from '@kodadot1/sub-api'
 
 import format from '@/utils/format/balance'
 import { useFiatStore } from '@/stores/fiat'
+import { calculateExactUsdFromToken } from '@/utils/calculation'
+import { getAssetIdByAccount, getKusamaAssetId } from '@/utils/api/bsx/query'
 
 import type { PalletBalancesAccountData } from '@polkadot/types/lookup'
-import { calculateExactUsdFromToken } from '@/utils/calculation'
 
 interface Token {
   token: string
   balance: string
   usd: number
+  selected: boolean
 }
 
 interface Chain {
@@ -129,6 +135,11 @@ async function getBalance(chainName, token = 'KSM', tokenId = 0) {
     currentBalance = format(balance, chain.tokenDecimals, false)
   }
 
+  let selectedTokenId = String(tokenId)
+  if (chainName === 'Basilisk') {
+    selectedTokenId = await getAssetIdByAccount(api, prefixAddress)
+  }
+
   const balance = delimiter(currentBalance)
   const usd = calculateUsd(balance, token)
 
@@ -136,6 +147,7 @@ async function getBalance(chainName, token = 'KSM', tokenId = 0) {
     token,
     balance,
     usd,
+    selected: selectedTokenId === String(tokenId),
   })
   totalUsd.value.push(usd)
 
@@ -149,7 +161,7 @@ onMounted(async () => {
     getBalance('Kusama'),
     getBalance('Statemine'),
     getBalance('Basilisk', 'BSX'),
-    getBalance('Basilisk', 'KSM', 1),
+    getBalance('Basilisk', 'KSM', Number(getKusamaAssetId('bsx'))),
   ]).then(() => {
     status.value = 'done'
   })
@@ -157,8 +169,6 @@ onMounted(async () => {
 </script>
 
 <style scoped lang="scss">
-@import '@/styles/abstracts/variables';
-
 .balance {
   &-row {
     display: flex;
diff --git a/locales/en.json b/locales/en.json
index 484c4c583d..e7e6724528 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -755,6 +755,9 @@
     "asset": "Asset",
     "using": "using",
     "balance": "Balance",
+    "chain": "Chain",
+    "token": "Token",
+    "usd": "USD",
     "connect": "Connect",
     "connect_wallet": "Connect your wallet",
     "change_account": "Change account",

From 322ae7158119e881cc088b5b6069220343787e47 Mon Sep 17 00:00:00 2001
From: Preschian Febryantara <preschian@users.noreply.github.com>
Date: Wed, 17 May 2023 20:13:54 +0700
Subject: [PATCH 8/8] fix: remove highlight for now

---
 components/balance/MultipleBalances.vue | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/components/balance/MultipleBalances.vue b/components/balance/MultipleBalances.vue
index 1e306b4f55..d0245dadf8 100644
--- a/components/balance/MultipleBalances.vue
+++ b/components/balance/MultipleBalances.vue
@@ -9,11 +9,7 @@
       </div>
 
       <div v-for="(chain, key) in availableChains" :key="key" class="is-size-7">
-        <div
-          v-for="token in chain"
-          :key="token.token"
-          class="balance-row"
-          :class="{ 'has-text-weight-bold': token.selected }">
+        <div v-for="token in chain" :key="token.token" class="balance-row">
           <div>{{ key }}</div>
           <div class="has-text-right">
             {{ token.balance }}