ref(transfer token switch): Refactor for token switching at transfer

components/transfer/Transfer.vue

@@ -243,7 +243,6 @@ import {
 } from '@/utils/format/balance'
 import { getNumberSumOfObjectField } from '@/utils/math'
 import { useFiatStore } from '@/stores/fiat'
-import { useIdentityStore } from '@/stores/identity'
 import Avatar from '@/components/shared/Avatar.vue'
 import Identity from '@/components/identity/IdentityIndex.vue'
 import { getMovedItemToFront } from '@/utils/objects'
@@ -260,6 +259,7 @@ import {
 } from '@kodadot1/brick'
 import TransferTokenTabs, { TransferTokenTab } from './TransferTokenTabs.vue'
 import { TokenDetails } from '@/composables/useToken'
+import { ApiPromise } from '@polkadot/api'
 const Money = defineAsyncComponent(
   () => import('@/components/shared/format/Money.vue')
 )
@@ -269,9 +269,9 @@ const router = useRouter()
 const { $consola, $i18n } = useNuxtApp()
 const { unit, decimals } = useChain()
 const { apiInstance } = useApi()
-const { urlPrefix, setUrlPrefix } = usePrefix()
+const { urlPrefix } = usePrefix()
 const { isLogIn, accountId } = useAuth()
-const identityStore = useIdentityStore()
+const { getBalance } = useBalance()
 const { fetchFiatPrice, getCurrentTokenValue } = useFiatStore()
 const { initTransactionLoader, isLoading, resolveStatus, status } =
   useTransactionStatus()
@@ -284,12 +284,14 @@ export type TargetAddress = {
   token?: number | string
 }
 const isMobile = computed(() => useWindowSize().width.value <= 1024)
+const balance = computed(() => getBalance(unit.value) || 0)
 
 const transactionValue = ref('')
 const sendSameAmount = ref(false)
 const displayUnit = ref<'token' | 'usd'>('token')
 const { getTokenIconBySymbol } = useIcon()
-const { tokens, getPrefixByToken, availableTokens } = useToken()
+
+const { tokens } = useToken()
 
 const selectedTabFirst = ref(true)
 const tokenIcon = computed(() => getTokenIconBySymbol(unit.value))
@@ -308,8 +310,6 @@ const displayTotalValue = computed(() =>
     : [`${totalTokenAmount.value} ${unit.value}`, `$${totalUsdValue.value}`]
 )
 
-const balance = computed(() => identityStore.getAuthBalance)
-
 const disabled = computed(
   () =>
     !isLogIn.value ||
@@ -319,20 +319,16 @@ const disabled = computed(
 
 const handleTokenSelect = (newToken: string) => {
   selectedTabFirst.value = false
-  const token = tokens.value.find((t) => t.symbol === newToken)
-
-  if (token) {
-    const chain = getPrefixByToken(token.symbol)
 
-    if (!chain) {
-      $consola.error(
-        `[ERR: INVALID TOKEN] Chain for token ${token.symbol} is not valid`
-      )
-      return
-    }
+  const token = tokens.value.find((t) => t.symbol === newToken)
 
-    setUrlPrefix(chain)
+  if (!token) {
+    return
   }
+
+  routerReplace({
+    params: { prefix: token.defaultChain },
+  })
 }
 
 const generateTokenTabs = (
@@ -478,11 +474,7 @@ const unifyAddressAmount = (target: TargetAddress) => {
 
 const updateTargetAdressesOnTokenSwitch = () => {
   targetAddresses.value.forEach((targetAddress) => {
-    if (displayUnit.value === 'usd') {
-      onUsdFieldChange(targetAddress)
-    } else {
-      onAmountFieldChange(targetAddress)
-    }
+    onUsdFieldChange(targetAddress)
   })
 }
 
@@ -503,6 +495,46 @@ const handleOpenConfirmModal = () => {
   }
 }
 
+const getAmountToTransfer = (amount: number, decimals: number) =>
+  String(calculateBalance(Number(amount), decimals))
+
+interface TransferParams {
+  api: ApiPromise
+  decimals: number
+}
+
+const getMultipleAddressesTransferParams = ({
+  api,
+  decimals,
+}: TransferParams) => {
+  const arg = [
+    targetAddresses.value.map((target) => {
+      const amountToTransfer = getAmountToTransfer(
+        target.token as number,
+        decimals
+      )
+
+      return api.tx.balances.transfer(
+        target.address as string,
+        amountToTransfer
+      )
+    }),
+  ]
+
+  return [api.tx.utility.batch, arg]
+}
+
+const getSingleAddressTransferParams = ({ api, decimals }: TransferParams) => {
+  const target = targetAddresses.value[0]
+
+  const amountToTransfer = getAmountToTransfer(target.token as number, decimals)
+
+  return [
+    api.tx.balances.transfer,
+    [target.address as string, amountToTransfer],
+  ]
+}
+
 const submit = async (
   event: any,
   usedNodeUrls: string[] = []
@@ -514,28 +546,21 @@ const submit = async (
     const api = await apiInstance.value
 
     const numOfTargetAddresses = targetAddresses.value.length
-    const cb =
-      numOfTargetAddresses > 1 ? api.tx.utility.batch : api.tx.balances.transfer
-    const arg =
-      numOfTargetAddresses > 1
-        ? [
-            targetAddresses.value.map((target) => {
-              const amountToTransfer = String(
-                calculateBalance(Number(target.token), decimals.value)
-              )
-              return api.tx.balances.transfer(
-                target.address as string,
-                amountToTransfer
-              )
-            }),
-          ]
-        : [
-            targetAddresses.value[0].address as string,
-            calculateBalance(
-              Number(targetAddresses.value[0].token),
-              decimals.value
-            ),
-          ]
+    const multipleAddresses = numOfTargetAddresses > 1
+
+    let cb, arg
+
+    if (multipleAddresses) {
+      ;[cb, arg] = getMultipleAddressesTransferParams({
+        api,
+        decimals: decimals.value as number,
+      })
+    } else {
+      ;[cb, arg] = getSingleAddressTransferParams({
+        api,
+        decimals: decimals.value as number,
+      })
+    }
 
     const tx = await exec(
       accountId.value,
@@ -625,48 +650,26 @@ const addAddress = () => {
   })
 }
 
-const syncQueryToken = () => {
-  const { query } = route
-
-  const token = query.token?.toString()
-
-  if (!token || !availableTokens.includes(token)) {
-    return
-  }
-
-  const chain = getPrefixByToken(token)
-
-  if (!chain) {
-    return
-  }
-
-  setUrlPrefix(chain)
-}
-
-watch(
-  route,
-  () => {
-    syncQueryToken()
-  },
-  { immediate: true, deep: true }
-)
-
 onMounted(() => {
   fetchFiatPrice().then(checkQueryParams)
 })
 
+const routerReplace = ({ params = {}, query = {} }) => {
+  router
+    .replace({
+      params: params,
+      query: {
+        ...route.query,
+        ...query,
+      },
+    })
+    .catch(() => null) // null to further not throw navigation errors
+}
+
 watchDebounced(
   () => targetAddresses.value[0].usd,
   (usdamount) => {
-    router
-      .replace({
-        query: {
-          ...route.query,
-          usdamount: (usdamount || 0).toString(),
-          token: unit.value,
-        },
-      })
-      .catch(() => null) // null to further not throw navigation errors
+    routerReplace({ query: { usdamount: (usdamount || 0).toString() } })
   },
   { debounce: 300 }
 )

composables/useBalance.ts

@@ -4,26 +4,33 @@ import { getKusamaAssetId } from '@/utils/api/bsx/query'
 export default function () {
   const { urlPrefix } = usePrefix()
   const identityStore = useIdentityStore()
-  const balance = computed(() => {
+
+  const getBalance = (token: string) => {
+    token = token.toLocaleLowerCase()
     switch (urlPrefix.value) {
       case 'rmrk':
       case 'ksm':
       case 'ahk':
       case 'ahp':
+      case 'dot':
         return identityStore.getAuthBalance
       case 'bsx':
-        return identityStore.multiBalances.chains.basilisk?.ksm?.nativeBalance
+        return identityStore.multiBalances.chains.basilisk?.[token]
+          ?.nativeBalance
       case 'snek':
-        return identityStore.multiBalances.chains['basilisk-testnet']?.ksm
+        return identityStore.multiBalances.chains['basilisk-testnet']?.[token]
           ?.nativeBalance
       default:
         return identityStore.getTokenBalanceOf(
           getKusamaAssetId(urlPrefix.value)
         )
     }
-  })
+  }
+
+  const balance = computed(() => getBalance('KSM'))
 
   return {
     balance,
+    getBalance,
   }
 }

composables/useToken.ts

@@ -1,74 +1,40 @@
 import { useFiatStore } from '@/stores/fiat'
-import { type ChainProperties, type Prefix } from '@kodadot1/static'
-import { chainPropListOf } from '@/utils/config/chain.config'
-import { groupByNestedProperty } from '@/utils/objects'
-import { availablePrefixes } from '@/utils/chain'
+import { type Prefix } from '@kodadot1/static'
+import { useIdentityStore } from '@/stores/identity'
+import { defultTokenChain } from '@/utils/config/chain.config'
 
 export interface TokenDetails {
   symbol: string
   value: number | string | null
   icon: string
-  chains: Prefix[]
+  defaultChain: Prefix
 }
 
+const getAssetToken = (asset) => asset?.token || 'KSM'
+const getUniqueArrayItems = (items: string[]) => [...new Set(items)]
+
 export default function useToken() {
   const { getCurrentTokenValue } = useFiatStore()
   const { getTokenIconBySymbol } = useIcon()
+  const { multiBalanceAssets } = useIdentityStore()
 
-  const availableChains = availablePrefixes().map(
-    (item) => item.value as Prefix
-  )
-
-  const availableTokens = ['BSX', 'DOT', 'KSM']
-
-  const chainsProperties = computed(() => {
-    return availableChains.reduce(
-      (reducer, chain: Prefix) => ({
-        ...reducer,
-        [chain]: chainPropListOf(chain),
-      }),
-      {}
-    ) as { [k in Prefix]: ChainProperties }[]
-  })
-
-  const groupedTokensByChains = computed(() =>
-    groupByNestedProperty(chainsProperties.value, 'tokenSymbol')
+  const availableAssets = computed(() => multiBalanceAssets)
+  const availableTokensAcrossAllChains = computed(() =>
+    getUniqueArrayItems(Object.values(availableAssets.value).map(getAssetToken))
   )
 
-  const getTokenChain = (token: string): Prefix[] =>
-    groupedTokensByChains.value[token] || []
-
   const tokens = computed<TokenDetails[]>(() => {
-    const filteredTokens = Object.keys(groupedTokensByChains.value).filter(
-      (token) => availableTokens.includes(token)
-    )
-
-    return filteredTokens.map((tokenSymbol) => {
+    return availableTokensAcrossAllChains.value.map((tokenSymbol) => {
       return {
         symbol: tokenSymbol as string,
         value: getCurrentTokenValue(tokenSymbol),
         icon: getTokenIconBySymbol(tokenSymbol),
-        chains: getTokenChain(tokenSymbol),
+        defaultChain: defultTokenChain[tokenSymbol],
       }
     })
   })
 
-  const getPrefixByToken = (token: string): Prefix | null => {
-    switch (token.toLowerCase()) {
-      case 'bsx':
-        return 'bsx'
-      case 'dot':
-        return 'dot'
-      case 'ksm':
-        return 'ksm'
-      default:
-        return null
-    }
-  }
-
   return {
     tokens,
-    availableTokens,
-    getPrefixByToken,
   }
 }

stores/identity.ts

@@ -37,6 +37,7 @@ type ChainType =
   | 'basilisk-testnet'
   | 'statemine'
   | 'statemint'
+
 type ChainDetail = {
   balance: string
   nativeBalance: string

utils/config/chain.config.ts

@@ -28,3 +28,11 @@ export const chainAssetOf = (prefix: Prefix): AssetItem => {
     decimals,
   }
 }
+
+export const defultTokenChain: Record<string, Prefix> = {
+  KSM: 'ksm',
+  DOT: 'dot',
+  BSX: 'bsx',
+  GLMR: 'glmr',
+  MOVR: 'movr',
+}