diff --git a/src/routes/safe/components/Balances/dataFetcher.ts b/src/routes/safe/components/Balances/dataFetcher.ts index d2d9b7d82d..c7a3f2d49d 100644 --- a/src/routes/safe/components/Balances/dataFetcher.ts +++ b/src/routes/safe/components/Balances/dataFetcher.ts @@ -13,15 +13,7 @@ export const BALANCE_TABLE_VALUE_ID = 'value' const { nativeCoin } = getNetworkInfo() -const getTokenPriceInCurrency = ( - token: Token, - currencySelected?: string, - currencyValues?: BalanceCurrencyList, - currencyRate?: number, -): string => { - if (!currencySelected) { - return '' - } +const getTokenValue = (token: Token, currencyValues?: BalanceCurrencyList, currencyRate?: number): string => { const currencyValue = currencyValues?.find(({ tokenAddress }) => { if (token.address === nativeCoin.address && !tokenAddress) { return true @@ -35,9 +27,16 @@ const getTokenPriceInCurrency = ( } const { balanceInBaseCurrency } = currencyValue - const balance = new BigNumber(balanceInBaseCurrency).times(currencyRate).toFixed(2) + const balance = new BigNumber(balanceInBaseCurrency).times(currencyRate).toString() - return `${formatAmountInUsFormat(balance)} ${currencySelected}` + return balance +} + +const getTokenPriceInCurrency = (balance: string, currencySelected?: string): string => { + if (!currencySelected) { + return Number('').toFixed(2) + } + return `${formatAmountInUsFormat(Number(balance).toFixed(2))} ${currencySelected}` } export interface BalanceData { @@ -47,6 +46,7 @@ export interface BalanceData { balanceOrder: number fixed: boolean value: string + valueOrder: number } export const getBalanceData = ( @@ -56,19 +56,23 @@ export const getBalanceData = ( currencyRate?: number, ): List => { const { nativeCoin } = getNetworkInfo() - return activeTokens.map((token) => ({ - [BALANCE_TABLE_ASSET_ID]: { - name: token.name, - logoUri: token.logoUri, - address: token.address, - symbol: token.symbol, - }, - assetOrder: token.name, - [BALANCE_TABLE_BALANCE_ID]: `${formatAmountInUsFormat(token.balance?.toString() || '0')} ${token.symbol}`, - balanceOrder: Number(token.balance), - [FIXED]: token.symbol === nativeCoin.symbol, - [BALANCE_TABLE_VALUE_ID]: getTokenPriceInCurrency(token, currencySelected, currencyValues, currencyRate), - })) + return activeTokens.map((token) => { + const balance = getTokenValue(token, currencyValues, currencyRate) + return { + [BALANCE_TABLE_ASSET_ID]: { + name: token.name, + logoUri: token.logoUri, + address: token.address, + symbol: token.symbol, + }, + assetOrder: token.name, + [BALANCE_TABLE_BALANCE_ID]: `${formatAmountInUsFormat(token.balance?.toString() || '0')} ${token.symbol}`, + balanceOrder: Number(token.balance), + [FIXED]: token.symbol === nativeCoin.symbol, + [BALANCE_TABLE_VALUE_ID]: getTokenPriceInCurrency(balance, currencySelected), + valueOrder: Number(balance), + } + }) } export const generateColumns = (): List => { @@ -101,21 +105,10 @@ export const generateColumns = (): List => { const value: TableColumn = { id: BALANCE_TABLE_VALUE_ID, - order: false, + order: true, label: 'Value', custom: false, - static: true, disablePadding: false, - style: { - fontSize: '11px', - color: '#5d6d74', - borderBottomWidth: '2px', - width: '125px', - fontFamily: 'Averta', - fontWeight: 'normal', - fontStyle: 'normal', - textAlign: 'right', - }, } return List([assetColumn, balanceColumn, value, actions])