Merge pull request #988 from gnosis/982-fiatbalances-dont-show

(Fix) - #982 fiat balances dont show

package.json

@@ -236,7 +236,7 @@
     "prettier": "2.0.5",
     "react-app-rewired": "^2.1.6",
     "truffle": "5.1.23",
-    "typescript": "~3.7.2",
+    "typescript": "^3.9.5",
     "wait-on": "5.0.0",
     "web3-utils": "^1.2.8"
   }

src/logic/currencyValues/api/fetchCurrenciesRates.ts

@@ -3,9 +3,10 @@ import axios from 'axios'
 import { getExchangeRatesUrl } from 'src/config'
 import { AVAILABLE_CURRENCIES } from '../store/model/currencyValues'
 
-type Currency = keyof typeof AVAILABLE_CURRENCIES
+const fetchCurrenciesRates = async (
-
+  baseCurrency: AVAILABLE_CURRENCIES,
-const fetchCurrenciesRates = async (baseCurrency: Currency, targetCurrencyValue: Currency): Promise<number> => {
+  targetCurrencyValue: AVAILABLE_CURRENCIES,
+): Promise<number> => {
   let rate = 0
   const url = `${getExchangeRatesUrl()}?base=${baseCurrency}&symbols=${targetCurrencyValue}`
 

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

@@ -2,16 +2,16 @@ import fetchCurrenciesRates from 'src/logic/currencyValues/api/fetchCurrenciesRa
 import { setCurrencyRate } from 'src/logic/currencyValues/store/actions/setCurrencyRate'
 import { AVAILABLE_CURRENCIES } from 'src/logic/currencyValues/store/model/currencyValues'
 
-// eslint-disable-next-line max-len
+const fetchCurrencyRate = (safeAddress: string, selectedCurrency: AVAILABLE_CURRENCIES) => async (dispatch) => {
-const fetchCurrencyRate = (safeAddress, selectedCurrency) => async (dispatch) => {
   if (AVAILABLE_CURRENCIES.USD === selectedCurrency) {
     return dispatch(setCurrencyRate(safeAddress, 1))
   }
 
-  const selectedCurrencyRateInBaseCurrency = await fetchCurrenciesRates(
+  const selectedCurrencyRateInBaseCurrency: number = await fetchCurrenciesRates(
-    AVAILABLE_CURRENCIES.USD as any,
+    AVAILABLE_CURRENCIES.USD,
-    selectedCurrency as any,
+    selectedCurrency,
   )
+
   dispatch(setCurrencyRate(safeAddress, selectedCurrencyRateInBaseCurrency))
 }
 

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

@@ -4,12 +4,12 @@ import { batch } from 'react-redux'
 import { setCurrencyBalances } from 'src/logic/currencyValues/store/actions/setCurrencyBalances'
 import { setCurrencyRate } from 'src/logic/currencyValues/store/actions/setCurrencyRate'
 import { setSelectedCurrency } from 'src/logic/currencyValues/store/actions/setSelectedCurrency'
-import { AVAILABLE_CURRENCIES } from 'src/logic/currencyValues/store/model/currencyValues'
+import { AVAILABLE_CURRENCIES, CurrencyRateValue } from 'src/logic/currencyValues/store/model/currencyValues'
 import { loadCurrencyValues } from 'src/logic/currencyValues/store/utils/currencyValuesStorage'
 
-export const fetchCurrencyValues = (safeAddress) => async (dispatch) => {
+export const fetchCurrencyValues = (safeAddress: string) => async (dispatch) => {
   try {
-    const storedCurrencies = await loadCurrencyValues()
+    const storedCurrencies: Map<string, CurrencyRateValue> | {} = await loadCurrencyValues()
     const storedCurrency = storedCurrencies[safeAddress]
     if (!storedCurrency) {
       return batch(() => {
@@ -23,10 +23,17 @@ export const fetchCurrencyValues = (safeAddress) => async (dispatch) => {
       const safeAddr = kv[0]
       const value = kv[1]
 
-      const { currencyRate, selectedCurrency }: any = value
+      let { currencyRate, selectedCurrency }: CurrencyRateValue = value
+
+      // Fallback for users that got an undefined saved on localStorage
+      if (!selectedCurrency || selectedCurrency === AVAILABLE_CURRENCIES.USD) {
+        currencyRate = 1
+        selectedCurrency = AVAILABLE_CURRENCIES.USD
+      }
+
       batch(() => {
-        dispatch(setSelectedCurrency(safeAddr, selectedCurrency || AVAILABLE_CURRENCIES.USD))
+        dispatch(setSelectedCurrency(safeAddr, selectedCurrency))
-        dispatch(setCurrencyRate(safeAddr, currencyRate || 1))
+        dispatch(setCurrencyRate(safeAddr, currencyRate))
       })
     })
   } catch (err) {

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

@@ -3,7 +3,7 @@ import { createAction } from 'redux-actions'
 export const SET_CURRENCY_RATE = 'SET_CURRENCY_RATE'
 
 // eslint-disable-next-line max-len
-export const setCurrencyRate = createAction(SET_CURRENCY_RATE, (safeAddress, currencyRate) => ({
+export const setCurrencyRate = createAction(SET_CURRENCY_RATE, (safeAddress: string, currencyRate: number) => ({
   safeAddress,
   currencyRate,
 }))

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

@@ -1,9 +1,12 @@
 import { createAction } from 'redux-actions'
+import { AVAILABLE_CURRENCIES } from '../model/currencyValues'
 
 export const SET_CURRENT_CURRENCY = 'SET_CURRENT_CURRENCY'
 
-// eslint-disable-next-line max-len
+export const setSelectedCurrency = createAction(
-export const setSelectedCurrency = createAction(SET_CURRENT_CURRENCY, (safeAddress, selectedCurrency) => ({
+  SET_CURRENT_CURRENCY,
-  safeAddress,
+  (safeAddress: string, selectedCurrency: AVAILABLE_CURRENCIES) => ({
-  selectedCurrency,
+    safeAddress,
-}))
+    selectedCurrency,
+  }),
+)

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

@@ -4,6 +4,8 @@ import { SET_CURRENCY_RATE } from 'src/logic/currencyValues/store/actions/setCur
 import { SET_CURRENT_CURRENCY } from 'src/logic/currencyValues/store/actions/setSelectedCurrency'
 import { currencyValuesSelector } from 'src/logic/currencyValues/store/selectors'
 import { saveCurrencyValues } from 'src/logic/currencyValues/store/utils/currencyValuesStorage'
+import { AVAILABLE_CURRENCIES, CurrencyRateValue } from '../model/currencyValues'
+import { Map } from 'immutable'
 
 const watchedActions = [SET_CURRENT_CURRENCY, SET_CURRENCY_RATE, SET_CURRENCY_BALANCES]
 
@@ -21,14 +23,16 @@ const currencyValuesStorageMiddleware = (store) => (next) => async (action) => {
       case SET_CURRENCY_RATE:
       case SET_CURRENCY_BALANCES: {
         const currencyValues = currencyValuesSelector(state)
-        const currencyValuesWithoutBalances = currencyValues.map((currencyValue) => {
+
-          const currencyRate = currencyValue.get('currencyRate')
+        const currencyValuesWithoutBalances: Map<string, CurrencyRateValue> = currencyValues.map((currencyValue) => {
-          const selectedCurrency = currencyValue.get('selectedCurrency')
+          const currencyRate: number = currencyValue.get('currencyRate')
+          const selectedCurrency: AVAILABLE_CURRENCIES = currencyValue.get('selectedCurrency')
           return {
             currencyRate,
             selectedCurrency,
           }
         })
+
         await saveCurrencyValues(currencyValuesWithoutBalances)
         break
       }

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

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

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

@@ -1,7 +1,9 @@
 import { loadFromStorage, saveToStorage } from 'src/utils/storage'
+import { CurrencyRateValue } from '../model/currencyValues'
+import { Map } from 'immutable'
 
 const CURRENCY_VALUES_STORAGE_KEY = 'CURRENCY_VALUES_STORAGE_KEY'
-export const saveCurrencyValues = async (currencyValues) => {
+export const saveCurrencyValues = async (currencyValues: Map<string, CurrencyRateValue>) => {
   try {
     await saveToStorage(CURRENCY_VALUES_STORAGE_KEY, currencyValues)
   } catch (err) {
@@ -9,6 +11,6 @@ export const saveCurrencyValues = async (currencyValues) => {
   }
 }
 
-export const loadCurrencyValues = async () => {
+export const loadCurrencyValues = async (): Promise<Map<string, CurrencyRateValue> | {}> => {
   return (await loadFromStorage(CURRENCY_VALUES_STORAGE_KEY)) || {}
 }

yarn.lock

@@ -16115,10 +16115,10 @@ typedarray@^0.0.6:
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
   integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=
 
-typescript@~3.7.2:
+typescript@^3.9.5:
-  version "3.7.5"
+  version "3.9.5"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.7.5.tgz#0692e21f65fd4108b9330238aac11dd2e177a1ae"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.9.5.tgz#586f0dba300cde8be52dd1ac4f7e1009c1b13f36"
-  integrity sha512-/P5lkRXkWHNAbcJIiHPfRoKqyd7bsyCma1hZNUGfn20qm64T6ZBlrzprymeu918H+mB/0rIg2gGK/BXkhhYgBw==
+  integrity sha512-hSAifV3k+i6lEoCJ2k6R2Z/rp/H3+8sdmcn5NrS3/3kE7+RyZXm9aqvxWqjEXHAd8b0pShatpcdMTvEdvAJltQ==
 
 u2f-api@0.2.7:
   version "0.2.7"
@@ -17272,6 +17272,7 @@ websocket-extensions@>=0.1.1:
   dependencies:
     debug "^2.2.0"
     es5-ext "^0.10.50"
+    gulp "^4.0.2"
     nan "^2.14.0"
     typedarray-to-buffer "^3.1.5"
     yaeti "^0.0.6"