Allow sort for value column

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,7 +76,8 @@ export const getBalanceData = (
   currencyRate?: number,
 ): List<BalanceData> => {
   const { nativeCoin } = getNetworkInfo()
-  return activeTokens.map((token) => ({
+  return activeTokens.map((token) => {
+    return {
       [BALANCE_TABLE_ASSET_ID]: {
         name: token.name,
         logoUri: token.logoUri,
@@ -68,7 +89,9 @@ export const getBalanceData = (
       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<TableColumn> => {
@@ -101,21 +124,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])