Fix - Value column not sortable in Assets list

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<BalanceData> => {
   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<TableColumn> => {
@@ -101,21 +105,10 @@ export const generateColumns = (): List<TableColumn> => {
 
   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])