Merge pull request #6230 from Jarsen136/issue-6222

components/balance/MultipleBalances.vue

@@ -1,37 +1,54 @@
 <template>
  <div class="mb-2">
- <div class="balance">
+ <div
+ v-if="isEmptyBalanceOnAllChains && !isBalanceLoading"
+ class="has-text-grey">
+ {{ $t('asset.emptyAsset') }}
+ </div>
+ <div v-else class="balance">
  <div class="balance-row has-text-grey is-size-7">
- <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 class="is-flex-grow-2">{{ $t('general.chain') }}</div>
+ <div class="has-text-right is-flex-grow-1">
+ {{ $t('general.token') }}
+ </div>
+ <div class="has-text-right is-flex-grow-2">
+ {{ $t('general.balance') }}
+ </div>
+ <div class="has-text-right is-flex-grow-2">{{ $t('general.usd') }}</div>
  </div>
 
  <div
  v-for="(chain, key) in multiBalances.chains"
  :key="key"
- class="is-size-7">
- <div v-for="(detail, token) in chain" :key="token" class="balance-row">
- <div class="is-capitalized">{{ key }}</div>
- <div class="has-text-right">
- {{ detail?.balance }}
+ class="is-size-6">
+ <div
+ v-for="token in filterEmptyBalanceChains(chain)"
+ :key="token.name"
+ class="balance-row">
+ <div class="is-capitalized is-flex-grow-2">{{ key }}</div>
+ <div class="has-text-right is-flex-grow-1">
+ {{ token.name.toUpperCase() }}
+ </div>
+
+ <div class="has-text-right is-flex-grow-2">
+ {{ token.details?.balance }}
+ </div>
+ <div class="has-text-right is-flex-grow-2">
+ ${{ delimiter(token.details?.usd || '0') }}
  </div>
- <div class="has-text-right">{{ token.toUpperCase() }}</div>
- <div class="has-text-right">${{ delimiter(detail?.usd || '0') }}</div>
  </div>
  </div>
 
  <NeoSkeleton
- v-if="identityStore.getStatusMultiBalances === 'loading'"
+ v-if="isBalanceLoading"
  data-cy="skeleton-multiple-balances"
  animated />
  </div>
 
  <hr class="my-2" />
  <p class="is-flex is-justify-content-space-between is-align-items-flex-end">
  <span class="is-size-7"> {{ $i18n.t('spotlight.total') }}: </span>
- <span>${{ delimiter(identityStore.getTotalUsd) }}</span>
+ <span class="is-size-6">${{ delimiter(identityStore.getTotalUsd) }}</span>
  </p>
  </div>
 </template>
@@ -50,7 +67,7 @@ import { calculateExactUsdFromToken } from '@/utils/calculation'
 import { getAssetIdByAccount } from '@/utils/api/bsx/query'
 import { toDefaultAddress } from '@/utils/account'
 
-import { useIdentityStore } from '@/stores/identity'
+import { ChainToken, useIdentityStore } from '@/stores/identity'
 
 import type { PalletBalancesAccountData } from '@polkadot/types/lookup'
 
@@ -73,6 +90,26 @@ const networkToPrefix = {
  'basilisk-testnet': 'snek',
 }
 
+const isBalanceLoading = computed(
+ () => identityStore.getStatusMultiBalances === 'loading'
+)
+const filterEmptyBalanceChains = (chain: ChainToken = {}) => {
+ const tokens = Object.keys(chain)
+ return tokens
+ .filter((token) => chain[token].balance !== '0')
+ .map((token) => ({
+ name: token,
+ details: chain[token],
+ }))
+}
+
+const isEmptyBalanceOnAllChains = computed(() => {
+ const chains = Object.keys(multiBalances.value.chains)
+ return !chains.some(
+ (chain) =>
+ filterEmptyBalanceChains(multiBalances.value.chains[chain]).length !== 0
+ )
+})
 const currentNetwork = computed(() =>
  isTestnet.value ? 'test-network' : 'main-network'
 )

locales/en.json

@@ -947,7 +947,8 @@
  "table": {
  "balance": "Balance",
  "empty": "There are currently no assets for this user."
- }
+ },
+ "emptyAsset": "You've got zero balance on this address across chains we are monitoring. If you want to buy small amount of crypto, click on Add funds through our verified on-ramp partner."
  },
  "ramp": {
  "selectAccount": "Select your account and click on buy.",

stores/identity.ts

@@ -43,7 +43,7 @@ type ChainDetail = {
  selected: boolean
  address: string
 }
-type ChainToken = Partial<Record<'dot' | 'ksm' | 'bsx', ChainDetail>>
+export type ChainToken = Partial<Record<'dot' | 'ksm' | 'bsx', ChainDetail>>
 
 interface MultiBalances {
  address: string