(Feature) Balances enhancements

src/components/Table/sorting.ts

@@ -2,7 +2,7 @@ import { List } from 'immutable'
 
 export const FIXED = 'fixed'
 
-export const buildOrderFieldFrom = (attr) => `${attr}Order`
+export const buildOrderFieldFrom = (attr: string): string => `${attr}Order`
 
 const desc = (a, b, orderBy, orderProp) => {
   const order = orderProp ? buildOrderFieldFrom(orderBy) : orderBy
@@ -38,5 +38,10 @@ export const stableSort = (dataArray, cmp, fixed) => {
   return fixedElems.concat(sortedElems)
 }
 
-export const getSorting = (order, orderBy, orderProp) =>
-  order === 'desc' ? (a, b) => desc(a, b, orderBy, orderProp) : (a, b) => -desc(a, b, orderBy, orderProp)
+export const getSorting = (
+  order: string,
+  orderBy?: string,
+  orderProp?: boolean,
+): ((a: unknown, b: unknown) => number) => {
+  return order === 'desc' ? (a, b) => desc(a, b, orderBy, orderProp) : (a, b) => -desc(a, b, orderBy, orderProp)
+}

src/config/index.ts

@@ -87,6 +87,8 @@ export const getIntercomId = () =>
 
 export const getExchangeRatesUrl = () => 'https://api.exchangeratesapi.io/latest'
 
+export const getExchangeRatesUrlFallback = () => 'https://api.coinbase.com/v2/exchange-rates'
+
 export const getSafeLastVersion = () => process.env.REACT_APP_LATEST_SAFE_VERSION  || '1.1.1'
 
 export const buildSafeCreationTxUrl = (safeAddress) => {

src/logic/currencyValues/api/fetchCurrenciesRates.ts

@@ -2,20 +2,38 @@ import axios from 'axios'
 
 import { getExchangeRatesUrl } from 'src/config'
 import { AVAILABLE_CURRENCIES } from '../store/model/currencyValues'
+import fetchTokenCurrenciesBalances from './fetchTokenCurrenciesBalances'
+import BigNumber from 'bignumber.js'
 
 const fetchCurrenciesRates = async (
   baseCurrency: AVAILABLE_CURRENCIES,
   targetCurrencyValue: AVAILABLE_CURRENCIES,
+  safeAddress: string,
 ): Promise<number> => {
   let rate = 0
-  const url = `${getExchangeRatesUrl()}?base=${baseCurrency}&symbols=${targetCurrencyValue}`
 
-  const result = await axios.get(url)
-  if (result && result.data) {
-    const { rates } = result.data
-    rate = rates[targetCurrencyValue] ? rates[targetCurrencyValue] : 0
+  if (targetCurrencyValue === AVAILABLE_CURRENCIES.ETH) {
+    try {
+      const result = await fetchTokenCurrenciesBalances(safeAddress)
+      if (result?.data?.length) {
+        rate = new BigNumber(1).div(result.data[0].usdConversion).toNumber()
+      }
+    } catch (error) {
+      console.error('Fetching ETH data from the relayer errored', error)
+    }
+    return rate
   }
 
+  try {
+    const url = `${getExchangeRatesUrl()}?base=${baseCurrency}&symbols=${targetCurrencyValue}`
+    const result = await axios.get(url)
+    if (result?.data) {
+      const { rates } = result.data
+      rate = rates[targetCurrencyValue] ? rates[targetCurrencyValue] : 0
+    }
+  } catch (error) {
+    console.error('Fetching data from getExchangeRatesUrl errored', error)
+  }
   return rate
 }
 

src/logic/currencyValues/api/fetchTokenCurrenciesBalances.ts

@@ -1,8 +1,17 @@
-import axios from 'axios'
+import axios, { AxiosResponse } from 'axios'
 
 import { getTxServiceHost } from 'src/config'
+import { TokenProps } from '../../tokens/store/model/token'
 
-const fetchTokenCurrenciesBalances = (safeAddress) => {
+type BalanceEndpoint = {
+  balance: string
+  balanceUsd: string
+  tokenAddress?: string
+  token?: TokenProps
+  usdConversion: string
+}
+
+const fetchTokenCurrenciesBalances = (safeAddress?: string): Promise<AxiosResponse<BalanceEndpoint[]>> => {
   if (!safeAddress) {
     return null
   }

src/logic/currencyValues/store/actions/fetchCurrencyRate.ts

@@ -1,15 +1,19 @@
 import fetchCurrenciesRates from 'src/logic/currencyValues/api/fetchCurrenciesRates'
 import { setCurrencyRate } from 'src/logic/currencyValues/store/actions/setCurrencyRate'
 import { AVAILABLE_CURRENCIES } from 'src/logic/currencyValues/store/model/currencyValues'
+import { Dispatch } from 'redux'
 
-const fetchCurrencyRate = (safeAddress: string, selectedCurrency: AVAILABLE_CURRENCIES) => async (dispatch) => {
+const fetchCurrencyRate = (safeAddress: string, selectedCurrency: AVAILABLE_CURRENCIES) => async (
+  dispatch: Dispatch<typeof setCurrencyRate>,
+): Promise<void> => {
   if (AVAILABLE_CURRENCIES.USD === selectedCurrency) {
     return dispatch(setCurrencyRate(safeAddress, 1))
   }
 
   const selectedCurrencyRateInBaseCurrency: number = await fetchCurrenciesRates(
     AVAILABLE_CURRENCIES.USD,
     selectedCurrency,
+    safeAddress,
   )
 
   dispatch(setCurrencyRate(safeAddress, selectedCurrencyRateInBaseCurrency))

src/logic/currencyValues/store/actions/fetchCurrencyValues.ts

@@ -6,10 +6,13 @@ import { setCurrencyRate } from 'src/logic/currencyValues/store/actions/setCurre
 import { setSelectedCurrency } from 'src/logic/currencyValues/store/actions/setSelectedCurrency'
 import { AVAILABLE_CURRENCIES, CurrencyRateValue } from 'src/logic/currencyValues/store/model/currencyValues'
 import { loadCurrencyValues } from 'src/logic/currencyValues/store/utils/currencyValuesStorage'
+import { Dispatch } from 'redux'
 
-export const fetchCurrencyValues = (safeAddress: string) => async (dispatch) => {
+export const fetchCurrencyValues = (safeAddress: string) => async (
+  dispatch: Dispatch<typeof setCurrencyBalances | typeof setSelectedCurrency | typeof setCurrencyRate>,
+): Promise<void> => {
   try {
-    const storedCurrencies: Map<string, CurrencyRateValue> | any = await loadCurrencyValues()
+    const storedCurrencies: Map<string, CurrencyRateValue> | unknown = await loadCurrencyValues()
     const storedCurrency = storedCurrencies[safeAddress]
     if (!storedCurrency) {
       return batch(() => {

src/logic/currencyValues/store/model/currencyValues.ts

@@ -1,42 +1,43 @@
-import { Record } from 'immutable'
+import { List, Record, RecordOf } from 'immutable'
 
 export enum AVAILABLE_CURRENCIES {
+  ETH = 'ETH',
   USD = 'USD',
   EUR = 'EUR',
+  AUD = 'AUD',
+  BGN = 'BGN',
+  BRL = 'BRL',
   CAD = 'CAD',
-  HKD = 'HKD',
-  ISK = 'ISK',
-  PHP = 'PHP',
+  CHF = 'CHF',
+  CNY = 'CNY',
+  CZK = 'CZK',
   DKK = 'DKK',
+  GBP = 'GBP',
+  HKD = 'HKD',
+  HRK = 'HRK',
   HUF = 'HUF',
-  CZK = 'CZK',
-  AUD = 'AUD',
-  RON = 'RON',
-  SEK = 'SEK',
   IDR = 'IDR',
+  ILS = 'ILS',
   INR = 'INR',
-  BRL = 'BRL',
-  RUB = 'RUB',
-  HRK = 'HRK',
+  ISK = 'ISK',
   JPY = 'JPY',
-  THB = 'THB',
-  CHF = 'CHF',
-  SGD = 'SGD',
-  PLN = 'PLN',
-  BGN = 'BGN',
-  TRY = 'TRY',
-  CNY = 'CNY',
+  KRW = 'KRW',
+  MXN = 'MXN',
+  MYR = 'MYR',
   NOK = 'NOK',
   NZD = 'NZD',
+  PHP = 'PHP',
+  PLN = 'PLN',
+  RON = 'RON',
+  RUB = 'RUB',
+  SEK = 'SEK',
+  SGD = 'SGD',
+  THB = 'THB',
+  TRY = 'TRY',
   ZAR = 'ZAR',
-  MXN = 'MXN',
-  ILS = 'ILS',
-  GBP = 'GBP',
-  KRW = 'KRW',
-  MYR = 'MYR',
 }
 
-type BalanceCurrencyRecord = {
+export type BalanceCurrencyRecord = {
   currencyName?: string
   tokenAddress?: string
   balanceInBaseCurrency: string
@@ -46,9 +47,11 @@ type BalanceCurrencyRecord = {
 export type CurrencyRateValue = {
   currencyRate?: number
   selectedCurrency?: AVAILABLE_CURRENCIES
-  currencyBalances?: BalanceCurrencyRecord[]
+  currencyBalances?: List<BalanceCurrencyRecord>
 }
 
+export type CurrencyRateValueRecord = RecordOf<CurrencyRateValue>
+
 export const makeBalanceCurrency = Record({
   currencyName: '',
   tokenAddress: '',

src/logic/currencyValues/store/selectors/index.ts

@@ -1,29 +1,58 @@
-import { List } from 'immutable'
+import { List, Map, RecordOf } from 'immutable'
 import { createSelector } from 'reselect'
 
 import { CURRENCY_VALUES_KEY } from 'src/logic/currencyValues/store/reducer/currencyValues'
 import { safeParamAddressFromStateSelector } from 'src/routes/safe/store/selectors'
+import { AppReduxState } from 'src/store/index'
+import {
+  AVAILABLE_CURRENCIES,
+  BalanceCurrencyRecord,
+  CurrencyRateValue,
+  CurrencyRateValueRecord,
+} from 'src/logic/currencyValues/store/model/currencyValues'
+import { BigNumber } from 'bignumber.js'
 
-export const currencyValuesSelector = (state) => state[CURRENCY_VALUES_KEY]
+export const currencyValuesSelector = (state: AppReduxState): Map<string, RecordOf<CurrencyRateValue>> =>
+  state[CURRENCY_VALUES_KEY]
 
 export const safeFiatBalancesSelector = createSelector(
   currencyValuesSelector,
   safeParamAddressFromStateSelector,
-  (currencyValues, safeAddress) => {
+  (currencyValues, safeAddress): CurrencyRateValueRecord => {
     if (!currencyValues) return
     return currencyValues.get(safeAddress)
   },
 )
 
-export const safeFiatBalancesListSelector = createSelector(safeFiatBalancesSelector, (currencyValuesMap) => {
-  if (!currencyValuesMap) return
-  return currencyValuesMap.get('currencyBalances') ? currencyValuesMap.get('currencyBalances') : List([])
-})
+export const safeFiatBalancesListSelector = createSelector(
+  safeFiatBalancesSelector,
+  (currencyValuesMap): List<BalanceCurrencyRecord> => {
+    if (!currencyValuesMap) return
+    return currencyValuesMap.get('currencyBalances') ? currencyValuesMap.get('currencyBalances') : List([])
+  },
+)
 
-export const currentCurrencySelector = createSelector(safeFiatBalancesSelector, (currencyValuesMap) =>
-  currencyValuesMap ? currencyValuesMap.get('selectedCurrency') : null,
+export const currentCurrencySelector = createSelector(
+  safeFiatBalancesSelector,
+  (currencyValuesMap): AVAILABLE_CURRENCIES | null =>
+    currencyValuesMap ? currencyValuesMap.get('selectedCurrency') : null,
 )
 
-export const currencyRateSelector = createSelector(safeFiatBalancesSelector, (currencyValuesMap) =>
+export const currencyRateSelector = createSelector(safeFiatBalancesSelector, (currencyValuesMap): number | null =>
   currencyValuesMap ? currencyValuesMap.get('currencyRate') : null,
 )
+
+export const safeFiatBalancesTotalSelector = createSelector(
+  safeFiatBalancesListSelector,
+  currencyRateSelector,
+  (currencyBalances, currencyRate): string | null => {
+    if (!currencyBalances) return '0'
+    if (!currencyRate) return null
+
+    const totalInBaseCurrency = currencyBalances.reduce((total, balanceCurrencyRecord) => {
+      return total.plus(balanceCurrencyRecord.balanceInBaseCurrency)
+    }, new BigNumber(0))
+
+    return totalInBaseCurrency.times(currencyRate).toFixed(2)
+  },
+)

src/logic/currencyValues/store/utils/currencyValuesStorage.ts

@@ -3,14 +3,14 @@ import { CurrencyRateValue } from '../model/currencyValues'
 import { Map } from 'immutable'
 
 const CURRENCY_VALUES_STORAGE_KEY = 'CURRENCY_VALUES_STORAGE_KEY'
-export const saveCurrencyValues = async (currencyValues: Map<string, CurrencyRateValue>) => {
+export const saveCurrencyValues = async (currencyValues: Map<string, CurrencyRateValue>): Promise<void> => {
   try {
     await saveToStorage(CURRENCY_VALUES_STORAGE_KEY, currencyValues)
   } catch (err) {
     console.error('Error storing currency values info in localstorage', err)
   }
 }
 
-export const loadCurrencyValues = async (): Promise<Map<string, CurrencyRateValue> | any> => {
+export const loadCurrencyValues = async (): Promise<Map<string, CurrencyRateValue> | unknown> => {
   return (await loadFromStorage(CURRENCY_VALUES_STORAGE_KEY)) || {}
 }

src/logic/tokens/utils/formatAmount.ts

@@ -12,8 +12,8 @@ const lt100mFormatter = new Intl.NumberFormat([], { maximumFractionDigits: 0 })
 // same format for billions and trillions
 const lt1000tFormatter = new Intl.NumberFormat([], { maximumFractionDigits: 3, notation: 'compact' } as any)
 
-export const formatAmount = (number) => {
-  let numberFloat: any = parseFloat(number)
+export const formatAmount = (number: string): string => {
+  let numberFloat: number | string = parseFloat(number)
 
   if (numberFloat === 0) {
     numberFloat = '0'
@@ -39,3 +39,11 @@ export const formatAmount = (number) => {
 
   return numberFloat
 }
+
+const options = { style: 'currency', currency: 'USD', minimumFractionDigits: 2, maximumFractionDigits: 8 }
+const usNumberFormatter = new Intl.NumberFormat('en-US', options)
+
+export const formatAmountInUsFormat = (amount: string): string => {
+  const numberFloat: number = parseFloat(amount)
+  return usNumberFormatter.format(numberFloat).replace('$', '')
+}

src/routes/safe/components/Balances/Coins/index.tsx

@@ -2,9 +2,6 @@ import TableCell from '@material-ui/core/TableCell'
 import TableContainer from '@material-ui/core/TableContainer'
 import TableRow from '@material-ui/core/TableRow'
 import { makeStyles } from '@material-ui/core/styles'
-//import CallMade from '@material-ui/icons/CallMade'
-//import CallReceived from '@material-ui/icons/CallReceived'
-//import classNames from 'classnames/bind'
 import { List } from 'immutable'
 import React from 'react'
 import { useSelector } from 'react-redux'
@@ -30,10 +27,29 @@ import {
   getBalanceData,
 } from 'src/routes/safe/components/Balances/dataFetcher'
 import { extendedSafeTokensSelector, grantedSelector } from 'src/routes/safe/container/selector'
+import { Skeleton } from '@material-ui/lab'
 
 const useStyles = makeStyles(styles as any)
 
-const Coins = (props) => {
+type Props = {
+  showReceiveFunds: () => void
+  showSendFunds: (tokenAddress: string) => void
+}
+
+export type BalanceDataRow = List<{
+  asset: {
+    name: string
+    address: string
+    logoUri: string
+  }
+  assetOrder: string
+  balance: string
+  balanceOrder: number
+  fixed: boolean
+  value: string
+}>
+
+const Coins = (props: Props): React.ReactElement => {
   const { showReceiveFunds, showSendFunds } = props
   const classes = useStyles()
   const columns = generateColumns()
@@ -43,7 +59,7 @@ const Coins = (props) => {
   const activeTokens = useSelector(extendedSafeTokensSelector)
   const currencyValues = useSelector(safeFiatBalancesListSelector)
   const granted = useSelector(grantedSelector)
-  const [filteredData, setFilteredData] = React.useState(List())
+  const [filteredData, setFilteredData] = React.useState<BalanceDataRow>(List())
 
   React.useMemo(() => {
     setFilteredData(getBalanceData(activeTokens, selectedCurrency, currencyValues, currencyRate))
@@ -64,7 +80,7 @@ const Coins = (props) => {
           sortedData.map((row, index) => (
             <TableRow className={classes.hide} data-testid={BALANCE_ROW_TEST_ID} key={index} tabIndex={-1}>
               {autoColumns.map((column) => {
-                const { align, id, width }: any = column
+                const { align, id, width } = column
                 let cellItem
                 switch (id) {
                   case BALANCE_TABLE_ASSET_ID: {
@@ -76,7 +92,16 @@ const Coins = (props) => {
                     break
                   }
                   case BALANCE_TABLE_VALUE_ID: {
-                    cellItem = <div className={classes.currencyValueRow}>{row[id]}</div>
+                    // If there are no values for that row but we have balances, we display as '0.00 {CurrencySelected}'
+                    // In case we don't have balances, we display a skeleton
+                    const showCurrencyValueRow = row[id] || row[BALANCE_TABLE_BALANCE_ID]
+
+                    cellItem =
+                      showCurrencyValueRow && selectedCurrency ? (
+                        <div className={classes.currencyValueRow}>{row[id] ? row[id] : `0.00 ${selectedCurrency}`}</div>
+                      ) : (
+                        <Skeleton animation="wave" />
+                      )
                     break
                   }
                   default: {