Merge pull request #814 from Adamant-im/feat/handle-wallets

Fix: remove question sign logic and don't show ... while loading balances

Author: S-FrontendDev

src/components/WalletTab.vue

@@ -2,13 +2,10 @@
   <crypto-icon :class="classes.cryptoIcon" :crypto="wallet.cryptoCurrency" size="medium" />
 
   <div>
-    <div v-if="formattedBalance">{{ isBalanceValid ? formattedBalance : '...' }}</div>
-    <div v-else-if="isBalanceLoading" :class="classes.balanceLoading">
+    <div v-if="isBalanceValid && !isRefreshing">{{ formattedBalance }}</div>
+    <div v-else :class="classes.balanceLoading">
       <v-icon :icon="mdiDotsHorizontal" size="18" />
     </div>
-    <div v-else :class="classes.balanceError">
-      <v-icon :icon="mdiHelpCircleOutline" size="18" />
-    </div>
 
     <div>
       {{ wallet.cryptoCurrency }}
@@ -27,10 +24,9 @@
 import { computed, watch } from 'vue'
 import { useStore } from 'vuex'
 
-import { Cryptos, FetchStatus } from '@/lib/constants'
 import CryptoIcon from '@/components/icons/CryptoIcon.vue'
 import numberFormat from '@/filters/numberFormat'
-import { mdiDotsHorizontal, mdiHelpCircleOutline } from '@mdi/js'
+import { mdiDotsHorizontal } from '@mdi/js'
 import { vibrate } from '@/lib/vibrate'
 
 const className = 'wallet-tab'
@@ -57,6 +53,7 @@ type Props = {
   wallet: Wallet
   fiatCurrency: string
   isBalanceValid: boolean
+  isRefreshing: boolean
 }
 
 const props = defineProps<Props>()
@@ -66,29 +63,8 @@ const store = useStore()
 const currentBalance = computed(() => props.wallet.balance)
 
 const isRateLoaded = computed(() => store.state.rate.isLoaded && props.wallet.rate)
-const balanceStatus = computed(() => {
-  const { cryptoCurrency } = props.wallet
-  const cryptoModuleName = cryptoCurrency.toLowerCase()
-
-  if (cryptoCurrency === Cryptos.ADM) {
-    return store.state.balanceStatus
-  }
-
-  return store.state[cryptoModuleName].balanceStatus
-})
 
-const isBalanceLoading = computed(() => balanceStatus.value === FetchStatus.Loading)
-const fetchBalanceSucceeded = computed(() => balanceStatus.value === FetchStatus.Success)
-
-const formattedBalance = computed(() => {
-  const formatted = numberFormat(props.wallet.balance, 4)
-
-  if (props.wallet.balance || fetchBalanceSucceeded.value) {
-    return formatted
-  }
-
-  return null
-})
+const formattedBalance = computed(() => numberFormat(props.wallet.balance, 4))
 
 watch(currentBalance, (newBalance, oldBalance) => {
   if (oldBalance < newBalance) {

src/hooks/useBalanceCheck.ts

@@ -31,6 +31,7 @@ export function useBalanceCheck() {
   )
 
   const updateBalance = async () => {
+    await store.dispatch('requestBalanceUpdate')
     await store.dispatch('updateBalance', {
       requestedByUser: true
     })

src/store/modules/btc-base/btc-base-actions.js

@@ -106,6 +106,14 @@ function createActions(options) {
       }
     },
 
+    /** Wrapper to manually request balance update if needed */
+    requestBalanceUpdate: {
+      root: true,
+      handler({ dispatch }) {
+        dispatch('updateBalance')
+      }
+    },
+
     initBalanceUpdate: {
       root: true,
       handler({ dispatch }) {

src/store/modules/erc20/erc20-actions.js

@@ -67,6 +67,14 @@ const createSpecificActions = (api) => ({
     }
   },
 
+  /** Wrapper to manually request balance update if needed */
+  requestBalanceUpdate: {
+    root: true,
+    handler({ dispatch }) {
+      dispatch('updateBalance')
+    }
+  },
+
   initBalanceUpdate: {
     root: true,
     handler({ dispatch }) {

src/store/modules/eth/actions.js

@@ -68,6 +68,14 @@ const createSpecificActions = (api) => ({
     }
   },
 
+  /** Wrapper to manually request balance update if needed */
+  requestBalanceUpdate: {
+    root: true,
+    handler({ dispatch }) {
+      dispatch('updateBalance')
+    }
+  },
+
   initBalanceUpdate: {
     root: true,
     handler({ dispatch }) {

src/store/modules/kly/kly-actions.js

@@ -33,6 +33,14 @@ const customActions = (getAccount) => ({
     }
   },
 
+  /** Wrapper to manually request balance update if needed */
+  requestBalanceUpdate: {
+    root: true,
+    handler({ dispatch }) {
+      dispatch('updateBalance')
+    }
+  },
+
   initBalanceUpdate: {
     root: true,
     handler({ dispatch }) {

src/views/Home.vue

@@ -24,6 +24,7 @@
                   :wallet="wallet"
                   :fiat-currency="currentCurrency"
                   :is-balance-valid="balances[index]"
+                  :is-refreshing="isRefreshing"
                 />
               </v-tab>
             </v-tabs>
@@ -79,7 +80,7 @@ import { PullDown } from '@/components/common/PullDown'
 import { Cryptos, CryptosInfo, CryptoSymbol, isErc20 } from '@/lib/constants'
 import { vibrate } from '@/lib/vibrate'
 import { useStore } from 'vuex'
-import { computed, watch } from 'vue'
+import { computed, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { CoinSymbol } from '@/store/modules/wallets/types'
 import { useI18n } from 'vue-i18n'
@@ -95,6 +96,8 @@ const balances = useBalanceCheck()
 
 const className = 'account-view'
 
+const isRefreshing = ref(false)
+
 const orderedVisibleWalletSymbols = computed(() => {
   return store.getters['wallets/getVisibleOrderedWalletSymbols']
 })
@@ -155,9 +158,15 @@ const updateBalances = () => {
     })
   }
 
-  store.dispatch('updateBalance', {
-    requestedByUser: true
-  })
+  isRefreshing.value = true
+
+  store
+    .dispatch('updateBalance', {
+      requestedByUser: true
+    })
+    .finally(() => {
+      isRefreshing.value = false
+    })
 
   vibrate.veryShort()
 }