diff --git a/src/routes/safe/components/Balances/dataFetcher.ts b/src/routes/safe/components/Balances/dataFetcher.ts index d2d9b7d8..05b38ff8 100644 --- a/src/routes/safe/components/Balances/dataFetcher.ts +++ b/src/routes/safe/components/Balances/dataFetcher.ts @@ -13,6 +13,25 @@ export const BALANCE_TABLE_VALUE_ID = 'value' const { nativeCoin } = getNetworkInfo() +const getTokenPriceValue = (token: Token, currencyValues?: BalanceCurrencyList, currencyRate?: number): string => { + const currencyValue = currencyValues?.find(({ tokenAddress }) => { + if (token.address === nativeCoin.address && !tokenAddress) { + return true + } + + return token.address === tokenAddress + }) + + if (!currencyValue || !currencyRate) { + return '' + } + + const { balanceInBaseCurrency } = currencyValue + const balance = new BigNumber(balanceInBaseCurrency).times(currencyRate).toFixed(2) + + return formatAmountInUsFormat(balance) +} + const getTokenPriceInCurrency = ( token: Token, currencySelected?: string, @@ -47,6 +66,7 @@ export interface BalanceData { balanceOrder: number fixed: boolean value: string + valueOrder: number } export const getBalanceData = ( @@ -56,19 +76,22 @@ 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) => { + 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(token, currencySelected, currencyValues, currencyRate), + valueOrder: Number(getTokenPriceValue(token, currencyValues, currencyRate)), + } + }) } export const generateColumns = (): List => { @@ -101,21 +124,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])