US-2128: Change the order of tokens list to match the following sequence: RIF, USDRIF, RBTC, BTC, RDOC & others

src/components/token/utils.ts

@@ -0,0 +1,48 @@
+import { ChainID } from 'lib/eoaWallet'
+
+import { TokenSymbol, getTokenByChainId } from 'screens/home/TokenImage'
+import { TokenOrBitcoinNetwork } from 'shared/types'
+
+/**
+ * Sorts balances by symbol in the following order:
+ * RIF, USDRIF, RBTC, BTC, RDOC and then alphabetically by symbol
+ * @param balances - array of balances
+ * @param chainId - chain id (30 or 31)
+ * @returns sorted array of balances
+ */
+export const sortBalancesBySymbol = (
+  balances: Array<TokenOrBitcoinNetwork>,
+  chainId: ChainID,
+): Array<TokenOrBitcoinNetwork> => {
+  const rif = getTokenByChainId(TokenSymbol.RIF, chainId)
+  const usdrif = getTokenByChainId(TokenSymbol.USDRIF, chainId)
+  const rbtc = getTokenByChainId(TokenSymbol.RBTC, chainId)
+  const btc = getTokenByChainId(TokenSymbol.BTC, chainId)
+  const rdoc = getTokenByChainId(TokenSymbol.RDOC, chainId)
+
+  const defaultOrder = [rif, usdrif, rbtc, btc, rdoc]
+
+  return balances.sort((a, b) => {
+    const symbolA = getTokenByChainId(a.symbol, chainId)
+    const symbolB = getTokenByChainId(b.symbol, chainId)
+    const indexA = defaultOrder.indexOf(symbolA)
+    const indexB = defaultOrder.indexOf(symbolB)
+
+    if (indexA !== -1 && indexB !== -1) {
+      return indexA - indexB
+    }
+    if (indexA !== -1) {
+      return -1
+    }
+    if (indexB !== -1) {
+      return 1
+    }
+    if (symbolA < symbolB) {
+      return -1
+    }
+    if (symbolA > symbolB) {
+      return 1
+    }
+    return 0
+  })
+}

src/screens/home/PortfolioComponent.tsx

@@ -1,16 +1,21 @@
-import { BitcoinNetwork } from '@rsksmart/rif-wallet-bitcoin'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { ScrollView, StyleProp, View, ViewStyle } from 'react-native'
 
 import { PortfolioCard } from 'components/Porfolio/PortfolioCard'
+import {
+  sortBalancesBySymbol,
+  sortTokensBySymbol,
+} from 'components/token/utils'
 import { getTokenColor } from 'screens/home/tokenColor'
 import { sharedColors } from 'shared/constants'
-import { ITokenWithoutLogo } from 'store/slices/balancesSlice/types'
+import { TokenOrBitcoinNetwork } from 'shared/types'
+import { useAppSelector } from 'src/redux/storeUtils'
+import { selectChainId } from 'src/redux/slices/settingsSlice'
 
 interface Props {
   setSelectedAddress: (token: string | undefined) => void
-  balances: Array<ITokenWithoutLogo | BitcoinNetwork>
+  balances: Array<TokenOrBitcoinNetwork>
   totalUsdBalance: string
   selectedAddress?: string
   showTotalCard?: boolean
@@ -24,11 +29,14 @@
   showTotalCard = true,
   style,
 }: Props) => {
+  const chainId = useAppSelector(selectChainId)
   const { t } = useTranslation()
   const [isTotalCardSelected, setIsTotalCardSelected] = useState<boolean>(
     showTotalCard && !selectedAddress,
   )
 
+  const usersTokens = sortBalancesBySymbol(balances, chainId)
+
   const handleSelectedAddress = useCallback(
     (contractAddress: string) => {
       setIsTotalCardSelected(false)
@@ -59,13 +67,9 @@
             isSelected={isTotalCardSelected}
           />
         )}
-        {balances.map(
+        {usersTokens.map(
           (
-            {
-              contractAddress,
-              symbol,
-              balance,
-            }: ITokenWithoutLogo | BitcoinNetwork,
+            { contractAddress, symbol, balance }: TokenOrBitcoinNetwork,
             i: number,
           ) => {
             const isSelected =

src/screens/home/TokenImage.tsx

@@ -8,6 +8,8 @@ import {
   ViewStyle,
 } from 'react-native'
 
+import { ChainID } from 'lib/eoaWallet'
+
 import { FrownFaceIcon } from 'components/icons'
 import { sharedColors } from 'shared/constants'
 interface Props {
@@ -277,3 +279,24 @@ export const getIconSource = (
       return undefined
   }
 }
+
+export const getTokenByChainId = (
+  symbol: string | TokenSymbol,
+  chainId: ChainID,
+) => {
+  const upperSymbol = symbol.toUpperCase()
+  const isMainnet = chainId === 30
+  switch (upperSymbol) {
+    case 'RIF':
+    case 'TRIF':
+      return isMainnet ? TokenSymbol.RIF : TokenSymbol.TRIF
+    case 'RBTC':
+    case 'TRBTC':
+      return isMainnet ? TokenSymbol.RBTC : TokenSymbol.TRBTC
+    case 'BTC':
+    case 'BTCT':
+      return isMainnet ? TokenSymbol.BTC : TokenSymbol.BTCT
+    default:
+      return TokenSymbol[upperSymbol as keyof typeof TokenSymbol] || upperSymbol
+  }
+}

src/screens/send/SendScreen.tsx

@@ -59,9 +59,7 @@ export const SendScreen = ({
 
   const balances = Object.values(useAppSelector(selectBalances))
   const assets = contact
-    ? balances.filter(b =>
-        isContactBitcoin ? isAssetBitcoin(b) : !isAssetBitcoin(b),
-      )
+    ? balances.filter(b => isContactBitcoin !== isAssetBitcoin(b))
     : balances
 
   const contractAddress = route.params?.contractAddress || assets[0]

src/shared/types/index.ts

@@ -1,11 +1,15 @@
-import { SendBitcoinRequest } from '@rsksmart/rif-wallet-bitcoin'
+import {
+  BitcoinNetwork,
+  SendBitcoinRequest,
+} from '@rsksmart/rif-wallet-bitcoin'
 
 import { Request } from 'lib/eoaWallet'
 
 import {
   rootTabsRouteNames,
   RootTabsScreenProps,
 } from 'navigation/rootNavigator'
+import { ITokenWithoutLogo } from 'store/slices/balancesSlice/types'
 
 export interface ErrorWithMessage {
   message: string
@@ -28,3 +32,5 @@ export type ContactWithAddressRequired = Partial<Omit<Contact, 'address'>> & {
 
 export type ActivityMainScreenProps =
   RootTabsScreenProps<rootTabsRouteNames.Activity>
+
+export type TokenOrBitcoinNetwork = ITokenWithoutLogo | BitcoinNetwork