[Wallet] Hotfix local currency (#1481)

* Add react hooks lint rule to prevent incorrect usage of hooks
* Fix local currency regressions from #1325 
* Fix crash when changing local currency from the settings due to hooks incorrectly used
* Fix dollar exchange rate value shown in local currency in the exchange confirmation card
* Fix received gold amounts shown in the local currency
* Fix gold received transaction showing up as local currency in the full screen card details

packages/mobile/src/exchange/ExchangeConfirmationCard.tsx

@@ -10,7 +10,11 @@ import ExchangeRate from 'src/exchange/ExchangeRate'
 import FeeExchangeIcon from 'src/exchange/FeeExchangeIcon'
 import { CURRENCY_ENUM } from 'src/geth/consts'
 import { Namespaces } from 'src/i18n'
-import { useLocalCurrencySymbol } from 'src/localCurrency/hooks'
+import {
+  useDollarsToLocalAmount,
+  useLocalCurrencyCode,
+  useLocalCurrencySymbol,
+} from 'src/localCurrency/hooks'
 import FeeIcon from 'src/send/FeeIcon'
 import RoundedArrow from 'src/shared/RoundedArrow'
 import { getMoneyDisplayValue } from 'src/utils/formatting'
@@ -84,13 +88,22 @@ export function ExchangeConfirmationCard(props: Props) {
     fee,
   } = props
 
+  const localCurrencyCode = useLocalCurrencyCode()
   const localCurrencySymbol = useLocalCurrencySymbol()
+  const localMakerAmount = useDollarsToLocalAmount(props.makerAmount)
+  const localTakerAmount = useDollarsToLocalAmount(props.takerAmount)
+
+  const takerToken = getTakerToken(props)
 
   return (
     <View style={styles.container}>
       <View style={styles.exchange}>
         <CurrencyDisplay
-          amount={makerAmount}
+          amount={
+            props.makerToken === CURRENCY_ENUM.DOLLAR && localCurrencyCode
+              ? new BigNumber(localMakerAmount || 0)
+              : makerAmount
+          }
           size={36}
           type={props.makerToken}
           currencySymbol={localCurrencySymbol}
@@ -99,9 +112,13 @@ export function ExchangeConfirmationCard(props: Props) {
           <RoundedArrow />
         </View>
         <CurrencyDisplay
-          amount={takerAmount}
+          amount={
+            takerToken === CURRENCY_ENUM.DOLLAR && localCurrencyCode
+              ? new BigNumber(localTakerAmount || 0)
+              : takerAmount
+          }
           size={36}
-          type={getTakerToken(props)}
+          type={takerToken}
           currencySymbol={localCurrencySymbol}
         />
       </View>
@@ -112,13 +129,13 @@ export function ExchangeConfirmationCard(props: Props) {
 
       <View style={styles.feeContainer}>
         <LineItemRow
-          currencySymbol={getTakerToken(props)}
+          currencySymbol={takerToken}
           amount={fee}
           title={t('securityFee')}
           titleIcon={<FeeIcon />}
         />
         <LineItemRow
-          currencySymbol={getTakerToken(props)}
+          currencySymbol={takerToken}
           amount={'0.01'}
           title={t('exchangeFee')}
           titleIcon={<FeeExchangeIcon />}

packages/mobile/src/exchange/__snapshots__/ExchangeConfirmationCard.test.tsx.snap

@@ -71,7 +71,7 @@ exports[`renders correctly with giant numbers 1`] = `
           ]
         }
       >
-        24,000,000.00
+        31,920,000.00
       </Text>
     </View>
     <View
@@ -665,7 +665,7 @@ exports[`renders correctly with no exchange rate 1`] = `
           ]
         }
       >
-        1.99
+        2.64
       </Text>
     </View>
   </View>

packages/mobile/src/localCurrency/SelectLocalCurrency.tsx

@@ -14,6 +14,7 @@ const DEFAULT_CURRENCY_CODE = LocalCurrencyCode.USD
 const keyExtractor = (item: LocalCurrencyCode) => item
 
 function SelectLocalCurrency() {
+  // tslint:disable-next-line: react-hooks-nesting
   const selectedCurrencyCode = useLocalCurrencyCode() || DEFAULT_CURRENCY_CODE
   const dispatch = useDispatch()
 

packages/mobile/src/send/TransferConfirmationCard.tsx

@@ -67,10 +67,13 @@ const renderTopSection = (props: Props) => {
 const renderAmountSection = (props: Props) => {
   const { currency, type, value } = props
 
+  // tslint:disable react-hooks-nesting
   const localCurrencyCode = useLocalCurrencyCode()
   const localCurrencySymbol = useLocalCurrencySymbol()
+  const localValue = useDollarsToLocalAmount(value) || 0
+  // tslint:enable react-hooks-nesting
   const transactionValue = getMoneyDisplayValue(
-    localCurrencyCode ? useDollarsToLocalAmount(value) || 0 : value
+    currency === CURRENCY_ENUM.DOLLAR && localCurrencyCode ? localValue : value
   )
 
   switch (type) {
@@ -87,7 +90,10 @@ const renderAmountSection = (props: Props) => {
     default:
       return (
         <MoneyAmount
-          symbol={localCurrencySymbol || CURRENCIES[currency].symbol}
+          symbol={
+            (currency === CURRENCY_ENUM.DOLLAR && localCurrencySymbol) ||
+            CURRENCIES[currency].symbol
+          }
           amount={transactionValue}
         />
       )

packages/mobile/src/transactions/ExchangeFeedItem.tsx

@@ -10,8 +10,10 @@ import { Image, StyleSheet, Text, View } from 'react-native'
 import { HomeExchangeFragment } from 'src/apollo/types'
 import { CURRENCY_ENUM, resolveCurrency } from 'src/geth/consts'
 import { Namespaces } from 'src/i18n'
+import { LocalCurrencyCode, LocalCurrencySymbol } from 'src/localCurrency/consts'
+import { convertDollarsToLocalAmount } from 'src/localCurrency/convert'
 import {
-  useDollarsToLocalAmount,
+  useExchangeRate,
   useLocalCurrencyCode,
   useLocalCurrencySymbol,
 } from 'src/localCurrency/hooks'
@@ -26,83 +28,131 @@ type Props = (HomeExchangeFragment | ExchangeStandby) &
     showGoldAmount: boolean
   }
 
-type ExchangeProps = ReturnType<typeof getDollarExchangeProps>
+type ExchangeInputProps = Props & {
+  localCurrencyCode: LocalCurrencyCode | null
+  localCurrencySymbol: LocalCurrencySymbol | null
+  localExchangeRate: number | null | undefined
+}
+type ExchangeProps =
+  | ReturnType<typeof getDollarExchangeProps>
+  | ReturnType<typeof getGoldExchangeProps>
+
+function getLocalAmount(
+  dollarAmount: BigNumber.Value,
+  localExchangeRate: number | null | undefined
+) {
+  const localAmount = convertDollarsToLocalAmount(dollarAmount, localExchangeRate)
+  if (!localAmount) {
+    return null
+  }
 
-function getDollarExchangeProps({ inValue, outValue }: Props) {
+  return localAmount.toString()
+}
+
+function getDollarExchangeProps({
+  inValue: dollarAmount,
+  outValue: goldAmount,
+  localCurrencyCode,
+  localCurrencySymbol,
+  localExchangeRate,
+}: ExchangeInputProps) {
+  const localAmount = getLocalAmount(dollarAmount, localExchangeRate)
   return {
     icon: require('src/transactions/ExchangeGreenGold.png'),
-    dollarAmount: inValue,
+    dollarAmount,
     dollarDirection: '-',
-    goldAmount: outValue,
+    localCurrencyCode,
+    localCurrencySymbol,
+    localAmount,
+    goldAmount,
     goldDirection: '',
+    inValue: localCurrencyCode ? localAmount : dollarAmount,
     inColor: colors.celoGreen,
+    outValue: goldAmount,
     outColor: colors.celoGold,
   }
 }
 
-function getGoldExchangeProps({ inValue, outValue }: Props) {
+function getGoldExchangeProps({
+  inValue: goldAmount,
+  outValue: dollarAmount,
+  localCurrencyCode,
+  localCurrencySymbol,
+  localExchangeRate,
+}: ExchangeInputProps) {
+  const localAmount = getLocalAmount(dollarAmount, localExchangeRate)
   return {
     icon: require('src/transactions/ExchangeGoldGreen.png'),
-    dollarAmount: outValue,
+    dollarAmount,
     dollarDirection: '',
-    goldAmount: inValue,
+    localCurrencyCode,
+    localCurrencySymbol,
+    localAmount,
+    goldAmount,
     goldDirection: '-',
+    inValue: goldAmount,
     inColor: colors.celoGold,
+    outValue: localCurrencyCode ? localAmount : dollarAmount,
     outColor: colors.celoGreen,
   }
 }
 
-function getGoldAmountProps({ goldAmount, goldDirection }: ExchangeProps) {
+function getGoldAmountProps({ goldAmount: amount, goldDirection: amountDirection }: ExchangeProps) {
   return {
-    amount: goldAmount,
-    amountDirection: goldDirection,
+    amount,
+    amountDirection,
     amountColor: colors.celoGold,
+    displayAmount: `${amountDirection}${getMoneyDisplayValue(amount)}`,
   }
 }
 
-function getDollarAmountProps({ dollarAmount, dollarDirection }: ExchangeProps) {
+function getDollarAmountProps({
+  dollarAmount,
+  dollarDirection: amountDirection,
+  localCurrencyCode,
+  localCurrencySymbol,
+  localAmount,
+}: ExchangeProps) {
+  const amount = localCurrencyCode ? localAmount : dollarAmount
   return {
-    amount: dollarAmount,
-    amountDirection: dollarDirection,
+    amount,
+    amountDirection,
     amountColor: colors.celoGreen,
+    displayAmount: amount
+      ? `${amountDirection}${localCurrencySymbol +
+          getMoneyDisplayValue(amount) +
+          (localCurrencyCode || '')}`
+      : '-',
   }
 }
 
 export function ExchangeFeedItem(props: Props) {
   const { showGoldAmount, inSymbol, status, timestamp, t, i18n } = props
-  let { inValue, outValue } = props
+
+  const localCurrencyCode = useLocalCurrencyCode()
+  const localCurrencySymbol = useLocalCurrencySymbol()
+  const localExchangeRate = useExchangeRate()
 
   const onPress = () => {
     navigateToExchangeReview(timestamp, {
       makerToken: resolveCurrency(inSymbol),
-      makerAmount: new BigNumber(inValue),
-      takerAmount: new BigNumber(outValue),
+      makerAmount: new BigNumber(props.inValue),
+      takerAmount: new BigNumber(props.outValue),
     })
   }
 
   const inCurrency = resolveCurrency(inSymbol)
+  const exchangeInputProps = { ...props, localCurrencyCode, localCurrencySymbol, localExchangeRate }
   const exchangeProps =
     inCurrency === CURRENCY_ENUM.DOLLAR
-      ? getDollarExchangeProps(props)
-      : getGoldExchangeProps(props)
+      ? getDollarExchangeProps(exchangeInputProps)
+      : getGoldExchangeProps(exchangeInputProps)
   const amountProps = showGoldAmount
     ? getGoldAmountProps(exchangeProps)
     : getDollarAmountProps(exchangeProps)
 
-  const { amountDirection, amountColor } = amountProps
-  let { amount } = amountProps
-
-  const localCurrencyCode = useLocalCurrencyCode()
-  const localCurrencySymbol = useLocalCurrencySymbol()
-
-  if (!showGoldAmount) {
-    amount = !localCurrencyCode ? amount : useDollarsToLocalAmount(amount) || 0
-  }
-  if (inCurrency === CURRENCY_ENUM.DOLLAR) {
-    inValue = !localCurrencyCode ? inValue : useDollarsToLocalAmount(inValue) || 0
-  } else {
-    outValue = !localCurrencyCode ? outValue : useDollarsToLocalAmount(outValue) || 0
-  }
+  const { inValue, outValue } = exchangeProps
+  const { displayAmount, amountDirection, amountColor } = amountProps
 
   const timeFormatted = formatFeedTime(timestamp, i18n)
   const dateTimeFormatted = getDatetimeDisplayString(timestamp, t, i18n)
@@ -132,21 +182,18 @@ export function ExchangeFeedItem(props: Props) {
                 styles.amount,
               ]}
             >
-              {amountDirection}
-              {showGoldAmount
-                ? getMoneyDisplayValue(amount)
-                : localCurrencySymbol + getMoneyDisplayValue(amount) + (localCurrencyCode || '')}
+              {displayAmount}
             </Text>
           </View>
           <View style={styles.exchangeContainer}>
             <Text style={[fontStyles.activityCurrency, inStyle]}>
-              {getMoneyDisplayValue(inValue)}
+              {inValue ? getMoneyDisplayValue(inValue) : '-'}
             </Text>
             <View style={styles.arrow}>
               <ExchangeArrow />
             </View>
             <Text style={[fontStyles.activityCurrency, outStyle]}>
-              {getMoneyDisplayValue(outValue)}
+              {outValue ? getMoneyDisplayValue(outValue) : '-'}
             </Text>
           </View>
           <View style={styles.statusContainer}>

packages/mobile/src/transactions/TransferFeedItem.tsx

@@ -140,6 +140,7 @@ export function TransferFeedItem(props: Props) {
     invitees,
     addressToE164Number,
     recipientCache,
+    showLocalCurrency,
   } = props
 
   const localCurrencyCode = useLocalCurrencyCode()
@@ -153,7 +154,7 @@ export function TransferFeedItem(props: Props) {
   const transactionValue =
     type === TransactionTypes.NETWORK_FEE
       ? getNetworkFeeDisplayValue(props.value)
-      : localCurrencyCode
+      : showLocalCurrency && localCurrencyCode
         ? getMoneyDisplayValue(localValue || 0)
         : getMoneyDisplayValue(props.value)
 
@@ -189,9 +190,9 @@ export function TransferFeedItem(props: Props) {
               ]}
             >
               {currencyStyle.direction}
-              {localCurrencySymbol}
+              {showLocalCurrency && localCurrencySymbol}
               {transactionValue}
-              {localCurrencyCode}
+              {showLocalCurrency && localCurrencyCode}
             </Text>
           </View>
           {!!info && <Text style={styles.info}>{info}</Text>}

packages/mobile/src/transactions/__snapshots__/ExchangeFeedItem.test.tsx.snap

@@ -96,7 +96,6 @@ exports[`ExchangeFeedItem renders correctly 1`] = `
             ]
           }
         >
-          
           10.00
         </Text>
       </View>