From 57439b4090ccd234c6fc1052ea31d76655b67dac Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rodrigo=20Santana=20Gon=C3=A7alves?= Date: Tue, 6 Feb 2024 00:49:17 -0300 Subject: [PATCH 01/10] sort tokens by symbol and define default tokens --- src/components/token/utils.ts | 66 +++++++++++++++++++++++++ src/screens/home/PortfolioComponent.tsx | 58 ++++++++++++---------- 2 files changed, 97 insertions(+), 27 deletions(-) create mode 100644 src/components/token/utils.ts diff --git a/src/components/token/utils.ts b/src/components/token/utils.ts new file mode 100644 index 000000000..fa43dc7eb --- /dev/null +++ b/src/components/token/utils.ts @@ -0,0 +1,66 @@ +import { BitcoinNetwork } from '@rsksmart/rif-wallet-bitcoin' + +import { ITokenWithoutLogo } from 'src/redux/slices/balancesSlice/types' +import { TokenSymbol } from 'src/screens/home/TokenImage' + +// default order should be RIF, USDRIF, RBTC, BTC and RDOC +// other tokens should be sorted alphabetically by symbol +export const sortTokensBySymbol = ( + a: ITokenWithoutLogo | BitcoinNetwork, + b: ITokenWithoutLogo | BitcoinNetwork, +) => { + const aSymbol = a.symbol.toUpperCase() + const bSymbol = b.symbol.toUpperCase() + if ( + aSymbol === TokenSymbol.RIF || + aSymbol === TokenSymbol.TRIF.toUpperCase() + ) { + return -1 + } + if ( + bSymbol === TokenSymbol.RIF || + bSymbol === TokenSymbol.TRIF.toUpperCase() + ) { + return 1 + } + if (aSymbol === TokenSymbol.USDRIF) { + return -1 + } + if (bSymbol === TokenSymbol.USDRIF) { + return 1 + } + if (aSymbol === TokenSymbol.RBTC || aSymbol === TokenSymbol.TRBTC) { + return -1 + } + if (bSymbol === TokenSymbol.RBTC || bSymbol === TokenSymbol.TRBTC) { + return 1 + } + if (aSymbol === TokenSymbol.BTC || aSymbol === TokenSymbol.BTCT) { + return -1 + } + if (bSymbol === TokenSymbol.BTC || bSymbol === TokenSymbol.BTCT) { + return 1 + } + if (aSymbol === TokenSymbol.RDOC.toUpperCase()) { + return -1 + } + if (bSymbol === TokenSymbol.RDOC.toUpperCase()) { + return 1 + } + if (aSymbol < bSymbol) { + return -1 + } + if (aSymbol > bSymbol) { + return 1 + } + return 0 +} + +// note that RDOC is not a default token +// which means it can be hidden if balance is 0 +export const isDefaultToken = (symbol: string) => + symbol === TokenSymbol.RIF || + symbol === TokenSymbol.TRIF || + symbol === TokenSymbol.USDRIF || + symbol === TokenSymbol.RBTC || + symbol === TokenSymbol.BTC diff --git a/src/screens/home/PortfolioComponent.tsx b/src/screens/home/PortfolioComponent.tsx index 7bff65b7d..642cb84ab 100644 --- a/src/screens/home/PortfolioComponent.tsx +++ b/src/screens/home/PortfolioComponent.tsx @@ -7,6 +7,7 @@ import { PortfolioCard } from 'components/Porfolio/PortfolioCard' import { getTokenColor } from 'screens/home/tokenColor' import { sharedColors } from 'shared/constants' import { ITokenWithoutLogo } from 'store/slices/balancesSlice/types' +import { sortTokensBySymbol, isDefaultToken } from 'src/components/token/utils' interface Props { setSelectedAddress: (token: string | undefined) => void @@ -59,33 +60,36 @@ export const PortfolioComponent = ({ isSelected={isTotalCardSelected} /> )} - {balances.map( - ( - { - contractAddress, - symbol, - balance, - }: ITokenWithoutLogo | BitcoinNetwork, - i: number, - ) => { - const isSelected = - selectedAddress === contractAddress && !isTotalCardSelected - const color = isSelected - ? getTokenColor(symbol) - : sharedColors.inputInactive - return ( - handleSelectedAddress(contractAddress)} - color={color} - primaryText={symbol} - secondaryText={balance.toString()} - isSelected={isSelected} - icon={symbol} - /> - ) - }, - )} + {balances + .sort(sortTokensBySymbol) + .filter(token => isDefaultToken(token.symbol) || +token.balance > 0) + .map( + ( + { + contractAddress, + symbol, + balance, + }: ITokenWithoutLogo | BitcoinNetwork, + i: number, + ) => { + const isSelected = + selectedAddress === contractAddress && !isTotalCardSelected + const color = isSelected + ? getTokenColor(symbol) + : sharedColors.inputInactive + return ( + handleSelectedAddress(contractAddress)} + color={color} + primaryText={symbol} + secondaryText={balance.toString()} + isSelected={isSelected} + icon={symbol} + /> + ) + }, + )} ) From b8b7826ebbfffb9e18a1eaff2c5f3b322b337931 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rodrigo=20Santana=20Gon=C3=A7alves?= Date: Tue, 6 Feb 2024 00:50:20 -0300 Subject: [PATCH 02/10] define a new type TokenOrBitcoinNetwork --- src/components/token/utils.ts | 8 +++++--- src/screens/home/PortfolioComponent.tsx | 16 +++++++--------- 2 files changed, 12 insertions(+), 12 deletions(-) diff --git a/src/components/token/utils.ts b/src/components/token/utils.ts index fa43dc7eb..74ca09e25 100644 --- a/src/components/token/utils.ts +++ b/src/components/token/utils.ts @@ -3,11 +3,13 @@ import { BitcoinNetwork } from '@rsksmart/rif-wallet-bitcoin' import { ITokenWithoutLogo } from 'src/redux/slices/balancesSlice/types' import { TokenSymbol } from 'src/screens/home/TokenImage' +export type TokenOrBitcoinNetwork = ITokenWithoutLogo | BitcoinNetwork + // default order should be RIF, USDRIF, RBTC, BTC and RDOC // other tokens should be sorted alphabetically by symbol export const sortTokensBySymbol = ( - a: ITokenWithoutLogo | BitcoinNetwork, - b: ITokenWithoutLogo | BitcoinNetwork, + a: TokenOrBitcoinNetwork, + b: TokenOrBitcoinNetwork, ) => { const aSymbol = a.symbol.toUpperCase() const bSymbol = b.symbol.toUpperCase() @@ -57,7 +59,7 @@ export const sortTokensBySymbol = ( } // note that RDOC is not a default token -// which means it can be hidden if balance is 0 +// which means it can be hidden if its balance is 0 export const isDefaultToken = (symbol: string) => symbol === TokenSymbol.RIF || symbol === TokenSymbol.TRIF || diff --git a/src/screens/home/PortfolioComponent.tsx b/src/screens/home/PortfolioComponent.tsx index 642cb84ab..c6c128664 100644 --- a/src/screens/home/PortfolioComponent.tsx +++ b/src/screens/home/PortfolioComponent.tsx @@ -1,4 +1,3 @@ -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' @@ -6,12 +5,15 @@ import { ScrollView, StyleProp, View, ViewStyle } from 'react-native' import { PortfolioCard } from 'components/Porfolio/PortfolioCard' import { getTokenColor } from 'screens/home/tokenColor' import { sharedColors } from 'shared/constants' -import { ITokenWithoutLogo } from 'store/slices/balancesSlice/types' -import { sortTokensBySymbol, isDefaultToken } from 'src/components/token/utils' +import { + TokenOrBitcoinNetwork, + isDefaultToken, + sortTokensBySymbol, +} from 'src/components/token/utils' interface Props { setSelectedAddress: (token: string | undefined) => void - balances: Array + balances: Array totalUsdBalance: string selectedAddress?: string showTotalCard?: boolean @@ -65,11 +67,7 @@ export const PortfolioComponent = ({ .filter(token => isDefaultToken(token.symbol) || +token.balance > 0) .map( ( - { - contractAddress, - symbol, - balance, - }: ITokenWithoutLogo | BitcoinNetwork, + { contractAddress, symbol, balance }: TokenOrBitcoinNetwork, i: number, ) => { const isSelected = From 5b864b4cb4a19dffaef253353f7f4ac9fdeddf68 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rodrigo=20Santana=20Gon=C3=A7alves?= Date: Tue, 6 Feb 2024 00:55:13 -0300 Subject: [PATCH 03/10] wrap with Number instead --- src/screens/home/PortfolioComponent.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/screens/home/PortfolioComponent.tsx b/src/screens/home/PortfolioComponent.tsx index c6c128664..8784eee69 100644 --- a/src/screens/home/PortfolioComponent.tsx +++ b/src/screens/home/PortfolioComponent.tsx @@ -64,7 +64,9 @@ export const PortfolioComponent = ({ )} {balances .sort(sortTokensBySymbol) - .filter(token => isDefaultToken(token.symbol) || +token.balance > 0) + .filter( + token => isDefaultToken(token.symbol) || Number(token.balance) > 0, + ) .map( ( { contractAddress, symbol, balance }: TokenOrBitcoinNetwork, From e68ee0720c60dbea646d43c428ff2ba65722cfa2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rodrigo=20Santana=20Gon=C3=A7alves?= Date: Tue, 6 Feb 2024 10:51:54 -0300 Subject: [PATCH 04/10] fix imports --- src/components/token/utils.ts | 10 +++------- src/screens/home/PortfolioComponent.tsx | 7 ++----- src/shared/types/index.ts | 8 +++++++- 3 files changed, 12 insertions(+), 13 deletions(-) diff --git a/src/components/token/utils.ts b/src/components/token/utils.ts index 74ca09e25..46db31fee 100644 --- a/src/components/token/utils.ts +++ b/src/components/token/utils.ts @@ -1,9 +1,5 @@ -import { BitcoinNetwork } from '@rsksmart/rif-wallet-bitcoin' - -import { ITokenWithoutLogo } from 'src/redux/slices/balancesSlice/types' -import { TokenSymbol } from 'src/screens/home/TokenImage' - -export type TokenOrBitcoinNetwork = ITokenWithoutLogo | BitcoinNetwork +import { TokenSymbol } from 'screens/home/TokenImage' +import { TokenOrBitcoinNetwork } from 'src/shared/types' // default order should be RIF, USDRIF, RBTC, BTC and RDOC // other tokens should be sorted alphabetically by symbol @@ -60,7 +56,7 @@ export const sortTokensBySymbol = ( // note that RDOC is not a default token // which means it can be hidden if its balance is 0 -export const isDefaultToken = (symbol: string) => +export const isDefaultToken = (symbol: TokenSymbol) => symbol === TokenSymbol.RIF || symbol === TokenSymbol.TRIF || symbol === TokenSymbol.USDRIF || diff --git a/src/screens/home/PortfolioComponent.tsx b/src/screens/home/PortfolioComponent.tsx index 8784eee69..8ea735c04 100644 --- a/src/screens/home/PortfolioComponent.tsx +++ b/src/screens/home/PortfolioComponent.tsx @@ -3,13 +3,10 @@ import { useTranslation } from 'react-i18next' import { ScrollView, StyleProp, View, ViewStyle } from 'react-native' import { PortfolioCard } from 'components/Porfolio/PortfolioCard' +import { isDefaultToken, sortTokensBySymbol } from 'components/token/utils' import { getTokenColor } from 'screens/home/tokenColor' import { sharedColors } from 'shared/constants' -import { - TokenOrBitcoinNetwork, - isDefaultToken, - sortTokensBySymbol, -} from 'src/components/token/utils' +import { TokenOrBitcoinNetwork } from 'shared/types' interface Props { setSelectedAddress: (token: string | undefined) => void diff --git a/src/shared/types/index.ts b/src/shared/types/index.ts index 0f5206273..b6194ea9f 100644 --- a/src/shared/types/index.ts +++ b/src/shared/types/index.ts @@ -1,4 +1,7 @@ -import { SendBitcoinRequest } from '@rsksmart/rif-wallet-bitcoin' +import { + BitcoinNetwork, + SendBitcoinRequest, +} from '@rsksmart/rif-wallet-bitcoin' import { Request } from 'lib/eoaWallet' @@ -6,6 +9,7 @@ import { rootTabsRouteNames, RootTabsScreenProps, } from 'navigation/rootNavigator' +import { ITokenWithoutLogo } from 'src/redux/slices/balancesSlice/types' export interface ErrorWithMessage { message: string @@ -28,3 +32,5 @@ export type ContactWithAddressRequired = Partial> & { export type ActivityMainScreenProps = RootTabsScreenProps + +export type TokenOrBitcoinNetwork = ITokenWithoutLogo | BitcoinNetwork From 3a21f4a73027b3ea458af485cd27654b7fcf4c91 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rodrigo=20Santana=20Gon=C3=A7alves?= Date: Thu, 8 Feb 2024 20:10:08 -0300 Subject: [PATCH 05/10] fix import --- src/shared/types/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/shared/types/index.ts b/src/shared/types/index.ts index b6194ea9f..dd45ece59 100644 --- a/src/shared/types/index.ts +++ b/src/shared/types/index.ts @@ -9,7 +9,7 @@ import { rootTabsRouteNames, RootTabsScreenProps, } from 'navigation/rootNavigator' -import { ITokenWithoutLogo } from 'src/redux/slices/balancesSlice/types' +import { ITokenWithoutLogo } from 'store/slices/balancesSlice/types' export interface ErrorWithMessage { message: string From 25b944e4b17e7fa0d51abf8158e5e563c51c9769 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rodrigo=20Santana=20Gon=C3=A7alves?= Date: Thu, 8 Feb 2024 20:17:41 -0300 Subject: [PATCH 06/10] get back symbol as string --- src/components/token/utils.ts | 2 +- src/screens/send/SendScreen.tsx | 4 +--- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/src/components/token/utils.ts b/src/components/token/utils.ts index 46db31fee..2629cb3ed 100644 --- a/src/components/token/utils.ts +++ b/src/components/token/utils.ts @@ -56,7 +56,7 @@ export const sortTokensBySymbol = ( // note that RDOC is not a default token // which means it can be hidden if its balance is 0 -export const isDefaultToken = (symbol: TokenSymbol) => +export const isDefaultToken = (symbol: string) => symbol === TokenSymbol.RIF || symbol === TokenSymbol.TRIF || symbol === TokenSymbol.USDRIF || diff --git a/src/screens/send/SendScreen.tsx b/src/screens/send/SendScreen.tsx index 8b3831cf9..891518bac 100644 --- a/src/screens/send/SendScreen.tsx +++ b/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] From 7a4a3aa3b2af952d33f3d1bbeea581b1c2a3612b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rodrigo=20Santana=20Gon=C3=A7alves?= Date: Fri, 9 Feb 2024 10:57:50 -0300 Subject: [PATCH 07/10] remove token filtering --- src/components/token/utils.ts | 11 +---------- src/screens/home/PortfolioComponent.tsx | 5 +---- 2 files changed, 2 insertions(+), 14 deletions(-) diff --git a/src/components/token/utils.ts b/src/components/token/utils.ts index 2629cb3ed..89ce5bf5a 100644 --- a/src/components/token/utils.ts +++ b/src/components/token/utils.ts @@ -1,5 +1,5 @@ import { TokenSymbol } from 'screens/home/TokenImage' -import { TokenOrBitcoinNetwork } from 'src/shared/types' +import { TokenOrBitcoinNetwork } from 'shared/types' // default order should be RIF, USDRIF, RBTC, BTC and RDOC // other tokens should be sorted alphabetically by symbol @@ -53,12 +53,3 @@ export const sortTokensBySymbol = ( } return 0 } - -// note that RDOC is not a default token -// which means it can be hidden if its balance is 0 -export const isDefaultToken = (symbol: string) => - symbol === TokenSymbol.RIF || - symbol === TokenSymbol.TRIF || - symbol === TokenSymbol.USDRIF || - symbol === TokenSymbol.RBTC || - symbol === TokenSymbol.BTC diff --git a/src/screens/home/PortfolioComponent.tsx b/src/screens/home/PortfolioComponent.tsx index 8ea735c04..c7ec7e1e5 100644 --- a/src/screens/home/PortfolioComponent.tsx +++ b/src/screens/home/PortfolioComponent.tsx @@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next' import { ScrollView, StyleProp, View, ViewStyle } from 'react-native' import { PortfolioCard } from 'components/Porfolio/PortfolioCard' -import { isDefaultToken, sortTokensBySymbol } from 'components/token/utils' +import { sortTokensBySymbol } from 'components/token/utils' import { getTokenColor } from 'screens/home/tokenColor' import { sharedColors } from 'shared/constants' import { TokenOrBitcoinNetwork } from 'shared/types' @@ -61,9 +61,6 @@ export const PortfolioComponent = ({ )} {balances .sort(sortTokensBySymbol) - .filter( - token => isDefaultToken(token.symbol) || Number(token.balance) > 0, - ) .map( ( { contractAddress, symbol, balance }: TokenOrBitcoinNetwork, From f4807cfecc6d50f42deb58979013a81699b258c5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rodrigo=20Santana=20Gon=C3=A7alves?= Date: Mon, 19 Feb 2024 22:34:21 -0300 Subject: [PATCH 08/10] change sorting balances approach --- src/components/token/utils.test.ts | 0 src/components/token/utils.ts | 97 ++++++++++++------------- src/screens/home/PortfolioComponent.tsx | 58 ++++++++------- src/screens/home/TokenImage.tsx | 23 ++++++ 4 files changed, 100 insertions(+), 78 deletions(-) create mode 100644 src/components/token/utils.test.ts diff --git a/src/components/token/utils.test.ts b/src/components/token/utils.test.ts new file mode 100644 index 000000000..e69de29bb diff --git a/src/components/token/utils.ts b/src/components/token/utils.ts index 89ce5bf5a..3b0bc26ae 100644 --- a/src/components/token/utils.ts +++ b/src/components/token/utils.ts @@ -1,55 +1,48 @@ -import { TokenSymbol } from 'screens/home/TokenImage' +import { ChainID } from 'lib/eoaWallet' + +import { TokenSymbol, getTokenByChainId } from 'screens/home/TokenImage' import { TokenOrBitcoinNetwork } from 'shared/types' -// default order should be RIF, USDRIF, RBTC, BTC and RDOC -// other tokens should be sorted alphabetically by symbol -export const sortTokensBySymbol = ( - a: TokenOrBitcoinNetwork, - b: TokenOrBitcoinNetwork, -) => { - const aSymbol = a.symbol.toUpperCase() - const bSymbol = b.symbol.toUpperCase() - if ( - aSymbol === TokenSymbol.RIF || - aSymbol === TokenSymbol.TRIF.toUpperCase() - ) { - return -1 - } - if ( - bSymbol === TokenSymbol.RIF || - bSymbol === TokenSymbol.TRIF.toUpperCase() - ) { - return 1 - } - if (aSymbol === TokenSymbol.USDRIF) { - return -1 - } - if (bSymbol === TokenSymbol.USDRIF) { - return 1 - } - if (aSymbol === TokenSymbol.RBTC || aSymbol === TokenSymbol.TRBTC) { - return -1 - } - if (bSymbol === TokenSymbol.RBTC || bSymbol === TokenSymbol.TRBTC) { - return 1 - } - if (aSymbol === TokenSymbol.BTC || aSymbol === TokenSymbol.BTCT) { - return -1 - } - if (bSymbol === TokenSymbol.BTC || bSymbol === TokenSymbol.BTCT) { - return 1 - } - if (aSymbol === TokenSymbol.RDOC.toUpperCase()) { - return -1 - } - if (bSymbol === TokenSymbol.RDOC.toUpperCase()) { - return 1 - } - if (aSymbol < bSymbol) { - return -1 - } - if (aSymbol > bSymbol) { - return 1 - } - return 0 +/** + * 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, + chainId: ChainID, +): Array => { + 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 + }) } diff --git a/src/screens/home/PortfolioComponent.tsx b/src/screens/home/PortfolioComponent.tsx index c7ec7e1e5..8ca40ec86 100644 --- a/src/screens/home/PortfolioComponent.tsx +++ b/src/screens/home/PortfolioComponent.tsx @@ -3,10 +3,15 @@ import { useTranslation } from 'react-i18next' import { ScrollView, StyleProp, View, ViewStyle } from 'react-native' import { PortfolioCard } from 'components/Porfolio/PortfolioCard' -import { sortTokensBySymbol } from 'components/token/utils' +import { + sortBalancesBySymbol, + sortTokensBySymbol, +} from 'components/token/utils' import { getTokenColor } from 'screens/home/tokenColor' import { sharedColors } from 'shared/constants' 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 @@ -24,11 +29,14 @@ export const PortfolioComponent = ({ showTotalCard = true, style, }: Props) => { + const chainId = useAppSelector(selectChainId) const { t } = useTranslation() const [isTotalCardSelected, setIsTotalCardSelected] = useState( showTotalCard && !selectedAddress, ) + const usersTokens = sortBalancesBySymbol(balances, chainId) + const handleSelectedAddress = useCallback( (contractAddress: string) => { setIsTotalCardSelected(false) @@ -59,31 +67,29 @@ export const PortfolioComponent = ({ isSelected={isTotalCardSelected} /> )} - {balances - .sort(sortTokensBySymbol) - .map( - ( - { contractAddress, symbol, balance }: TokenOrBitcoinNetwork, - i: number, - ) => { - const isSelected = - selectedAddress === contractAddress && !isTotalCardSelected - const color = isSelected - ? getTokenColor(symbol) - : sharedColors.inputInactive - return ( - handleSelectedAddress(contractAddress)} - color={color} - primaryText={symbol} - secondaryText={balance.toString()} - isSelected={isSelected} - icon={symbol} - /> - ) - }, - )} + {usersTokens.map( + ( + { contractAddress, symbol, balance }: TokenOrBitcoinNetwork, + i: number, + ) => { + const isSelected = + selectedAddress === contractAddress && !isTotalCardSelected + const color = isSelected + ? getTokenColor(symbol) + : sharedColors.inputInactive + return ( + handleSelectedAddress(contractAddress)} + color={color} + primaryText={symbol} + secondaryText={balance.toString()} + isSelected={isSelected} + icon={symbol} + /> + ) + }, + )} ) diff --git a/src/screens/home/TokenImage.tsx b/src/screens/home/TokenImage.tsx index 935332930..a97c61b2f 100644 --- a/src/screens/home/TokenImage.tsx +++ b/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 + } +} From 329363c0b9d6b21fa16ad2b0aae986b9bfd44da0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rodrigo=20Santana=20Gon=C3=A7alves?= Date: Tue, 20 Feb 2024 12:06:08 -0300 Subject: [PATCH 09/10] delete unused file --- src/components/token/utils.test.ts | 0 1 file changed, 0 insertions(+), 0 deletions(-) delete mode 100644 src/components/token/utils.test.ts diff --git a/src/components/token/utils.test.ts b/src/components/token/utils.test.ts deleted file mode 100644 index e69de29bb..000000000 From 18c83bb978a97ba8d5d6d6d300065dab4763d1bd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rodrigo=20Santana=20Gon=C3=A7alves?= Date: Wed, 21 Feb 2024 11:32:00 -0300 Subject: [PATCH 10/10] some adjustments --- src/components/token/utils.ts | 16 ++++++++-------- src/screens/home/PortfolioComponent.tsx | 10 +++------- src/screens/home/TokenImage.tsx | 2 +- 3 files changed, 12 insertions(+), 16 deletions(-) diff --git a/src/components/token/utils.ts b/src/components/token/utils.ts index 3b0bc26ae..23f89e44e 100644 --- a/src/components/token/utils.ts +++ b/src/components/token/utils.ts @@ -1,6 +1,6 @@ import { ChainID } from 'lib/eoaWallet' -import { TokenSymbol, getTokenByChainId } from 'screens/home/TokenImage' +import { TokenSymbol, getTokenSymbolByChainId } from 'screens/home/TokenImage' import { TokenOrBitcoinNetwork } from 'shared/types' /** @@ -14,17 +14,17 @@ export const sortBalancesBySymbol = ( balances: Array, chainId: ChainID, ): Array => { - 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 rif = getTokenSymbolByChainId(TokenSymbol.RIF, chainId) + const usdrif = getTokenSymbolByChainId(TokenSymbol.USDRIF, chainId) + const rbtc = getTokenSymbolByChainId(TokenSymbol.RBTC, chainId) + const btc = getTokenSymbolByChainId(TokenSymbol.BTC, chainId) + const rdoc = getTokenSymbolByChainId(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 symbolA = getTokenSymbolByChainId(a.symbol, chainId) + const symbolB = getTokenSymbolByChainId(b.symbol, chainId) const indexA = defaultOrder.indexOf(symbolA) const indexB = defaultOrder.indexOf(symbolB) diff --git a/src/screens/home/PortfolioComponent.tsx b/src/screens/home/PortfolioComponent.tsx index 8ca40ec86..d5a50d9e9 100644 --- a/src/screens/home/PortfolioComponent.tsx +++ b/src/screens/home/PortfolioComponent.tsx @@ -3,15 +3,11 @@ 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 { sortBalancesBySymbol } from 'components/token/utils' import { getTokenColor } from 'screens/home/tokenColor' import { sharedColors } from 'shared/constants' import { TokenOrBitcoinNetwork } from 'shared/types' -import { useAppSelector } from 'src/redux/storeUtils' -import { selectChainId } from 'src/redux/slices/settingsSlice' +import { getCurrentChainId } from 'storage/ChainStorage' interface Props { setSelectedAddress: (token: string | undefined) => void @@ -29,7 +25,7 @@ export const PortfolioComponent = ({ showTotalCard = true, style, }: Props) => { - const chainId = useAppSelector(selectChainId) + const chainId = getCurrentChainId() const { t } = useTranslation() const [isTotalCardSelected, setIsTotalCardSelected] = useState( showTotalCard && !selectedAddress, diff --git a/src/screens/home/TokenImage.tsx b/src/screens/home/TokenImage.tsx index a97c61b2f..5e5b3a3b3 100644 --- a/src/screens/home/TokenImage.tsx +++ b/src/screens/home/TokenImage.tsx @@ -280,7 +280,7 @@ export const getIconSource = ( } } -export const getTokenByChainId = ( +export const getTokenSymbolByChainId = ( symbol: string | TokenSymbol, chainId: ChainID, ) => {