[Wallet] Update local currency styles and layout (#1325)

* Show the local currency amount as primary amount and then Celo dollars * Use local currencies in more screens, including drilldown and exchange
celo-org · Oct 23, 2019 · 2504bc9 · 2504bc9
1 parent b07c091
commit 2504bc9
Show file tree

Hide file tree

Showing 18 changed files with 475 additions and 822 deletions.
diff --git a/packages/mobile/src/components/CurrencyDisplay.tsx b/packages/mobile/src/components/CurrencyDisplay.tsx
@@ -4,12 +4,14 @@ import BigNumber from 'bignumber.js'
 import * as React from 'react'
 import { StyleSheet, Text, View } from 'react-native'
 import { CURRENCIES, CURRENCY_ENUM } from 'src/geth/consts'
+import { LocalCurrencySymbol } from 'src/localCurrency/consts'
 import { getMoneyDisplayValue } from 'src/utils/formatting'
 
 interface Props {
   amount: BigNumber
   size: number
   type: CURRENCY_ENUM
+  currencySymbol?: LocalCurrencySymbol | null
 }
 
 const symbolRatio = 0.6
@@ -31,10 +33,10 @@ export default class CurrencyDisplay extends React.PureComponent<Props> {
   }
 
   render() {
-    const { size, type, amount } = this.props
+    const { size, type, amount, currencySymbol: symbol } = this.props
     const fontSize = size
     const dollarStyle = { fontSize, lineHeight: Math.round(fontSize * 1.3), color: this.color() }
-    const currencySymbol = CURRENCIES[type].symbol
+    const currencySymbol = type === CURRENCY_ENUM.GOLD ? CURRENCIES[type].symbol : symbol
     return (
       <View style={styles.container}>
         <Text numberOfLines={1} style={[fontStyles.regular, this.symbolStyle(fontSize)]}>

diff --git a/packages/mobile/src/components/__snapshots__/AccountOverview.test.tsx.snap b/packages/mobile/src/components/__snapshots__/AccountOverview.test.tsx.snap
@@ -96,9 +96,7 @@ exports[`renders correctly when Dollar education NUX flow hasn't been completed
                   },
                 ]
               }
-            >
-              $
-            </Text>
+            />
             <Text
               numberOfLines={1}
               style={
@@ -334,9 +332,7 @@ exports[`renders correctly when Gold education NUX flow hasn't been completed 1`
                   },
                 ]
               }
-            >
-              $
-            </Text>
+            />
             <Text
               numberOfLines={1}
               style={
@@ -573,9 +569,7 @@ exports[`renders correctly when not ready 1`] = `
                   },
                 ]
               }
-            >
-              $
-            </Text>
+            />
             <Text
               numberOfLines={1}
               style={
@@ -811,9 +805,7 @@ exports[`renders correctly when ready 1`] = `
                   },
                 ]
               }
-            >
-              $
-            </Text>
+            />
             <Text
               numberOfLines={1}
               style={
@@ -1049,9 +1041,7 @@ exports[`renders correctly when transaction pending 1`] = `
                   },
                 ]
               }
-            >
-              $
-            </Text>
+            />
             <Text
               numberOfLines={1}
               style={

diff --git a/packages/mobile/src/exchange/ExchangeConfirmationCard.test.tsx b/packages/mobile/src/exchange/ExchangeConfirmationCard.test.tsx
@@ -2,8 +2,10 @@ import { CURRENCY_ENUM } from '@celo/utils/src/currencies'
 import BigNumber from 'bignumber.js'
 import * as React from 'react'
 import 'react-native'
+import { Provider } from 'react-redux'
 import * as renderer from 'react-test-renderer'
 import ExchangeConfirmationCard from 'src/exchange/ExchangeConfirmationCard'
+import { createMockStore } from 'test/utils'
 
 const newDollarBalance = new BigNumber('189.9')
 const newGoldBalance = new BigNumber('207.81')
@@ -12,32 +14,38 @@ const takerAmount = new BigNumber('1.99')
 const exchangeRate = new BigNumber('2')
 const fee = '0.01'
 
+const store = createMockStore({})
+
 it('renders correctly with no exchange rate', () => {
   const tree = renderer.create(
-    <ExchangeConfirmationCard
-      makerToken={CURRENCY_ENUM.GOLD}
-      newDollarBalance={newDollarBalance}
-      newGoldBalance={newGoldBalance}
-      makerAmount={makerAmount}
-      takerAmount={takerAmount}
-      exchangeRate={exchangeRate}
-      fee={fee}
-    />
+    <Provider store={store}>
+      <ExchangeConfirmationCard
+        makerToken={CURRENCY_ENUM.GOLD}
+        newDollarBalance={newDollarBalance}
+        newGoldBalance={newGoldBalance}
+        makerAmount={makerAmount}
+        takerAmount={takerAmount}
+        exchangeRate={exchangeRate}
+        fee={fee}
+      />
+    </Provider>
   )
   expect(tree).toMatchSnapshot()
 })
 
 it('renders correctly with giant numbers', () => {
   const tree = renderer.create(
-    <ExchangeConfirmationCard
-      makerToken={CURRENCY_ENUM.DOLLAR}
-      newDollarBalance={new BigNumber('10000000')}
-      newGoldBalance={new BigNumber('10030000')}
-      makerAmount={new BigNumber('24000000.00')}
-      takerAmount={new BigNumber('18000000000')}
-      exchangeRate={new BigNumber('0.13123123123123123')}
-      fee={fee}
-    />
+    <Provider store={store}>
+      <ExchangeConfirmationCard
+        makerToken={CURRENCY_ENUM.DOLLAR}
+        newDollarBalance={new BigNumber('10000000')}
+        newGoldBalance={new BigNumber('10030000')}
+        makerAmount={new BigNumber('24000000.00')}
+        takerAmount={new BigNumber('18000000000')}
+        exchangeRate={new BigNumber('0.13123123123123123')}
+        fee={fee}
+      />
+    </Provider>
   )
   expect(tree).toMatchSnapshot()
 })
diff --git a/packages/mobile/src/exchange/ExchangeConfirmationCard.tsx b/packages/mobile/src/exchange/ExchangeConfirmationCard.tsx
@@ -10,6 +10,7 @@ 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 FeeIcon from 'src/send/FeeIcon'
 import RoundedArrow from 'src/shared/RoundedArrow'
 import { getMoneyDisplayValue } from 'src/utils/formatting'
@@ -26,97 +27,109 @@ export interface ExchangeConfirmationCardProps {
 
 type Props = ExchangeConfirmationCardProps & WithNamespaces
 
-class ExchangeConfirmationCard extends React.PureComponent<Props> {
-  getTakerToken() {
-    return this.props.makerToken === CURRENCY_ENUM.DOLLAR
-      ? CURRENCY_ENUM.GOLD
-      : CURRENCY_ENUM.DOLLAR
-  }
-
-  getExchangeRate() {
-    const { makerAmount, takerAmount, exchangeRate } = this.props
+const getTakerToken = (props: Props) => {
+  return props.makerToken === CURRENCY_ENUM.DOLLAR ? CURRENCY_ENUM.GOLD : CURRENCY_ENUM.DOLLAR
+}
 
-    if (exchangeRate) {
-      return exchangeRate
-    }
+const getExchangeRate = (props: Props) => {
+  const { makerAmount, takerAmount, exchangeRate } = props
 
-    // For feed drilldown, the exchange rate has not been provided
-    return makerAmount.dividedBy(takerAmount)
+  if (exchangeRate) {
+    return exchangeRate
   }
 
-  renderNewBalances = (newDollarBalance: BigNumber, newGoldBalance: BigNumber) => {
-    const { t } = this.props
+  // For feed drilldown, the exchange rate has not been provided
+  return makerAmount.dividedBy(takerAmount)
+}
 
-    return (
-      <View style={styles.newBalanceContainer}>
-        <View style={styles.line} />
+const renderNewBalances = (
+  props: Props,
+  newDollarBalance: BigNumber,
+  newGoldBalance: BigNumber
+) => {
+  const { t } = props
 
-        <View style={styles.titleContainer}>
-          <Text style={[fontStyles.pCurrency, styles.title]}>{t('newBalance')}</Text>
-        </View>
-        <View style={styles.tabular}>
-          <Text style={fontStyles.bodySecondary}>{t('global:celoDollars')}</Text>
-          <Text numberOfLines={1} style={[fontStyles.body, styles.dollar]}>
-            {getMoneyDisplayValue(newDollarBalance, CURRENCY_ENUM.DOLLAR, true)}
-          </Text>
-        </View>
+  return (
+    <View style={styles.newBalanceContainer}>
+      <View style={styles.line} />
 
-        <View style={styles.tabular}>
-          <Text style={fontStyles.bodySecondary}>{t('global:celoGold')}</Text>
-          <Text numberOfLines={1} style={[fontStyles.body, styles.gold]}>
-            {getMoneyDisplayValue(newGoldBalance, CURRENCY_ENUM.GOLD, true)}
-          </Text>
-        </View>
+      <View style={styles.titleContainer}>
+        <Text style={[fontStyles.pCurrency, styles.title]}>{t('newBalance')}</Text>
+      </View>
+      <View style={styles.tabular}>
+        <Text style={fontStyles.bodySecondary}>{t('global:celoDollars')}</Text>
+        <Text numberOfLines={1} style={[fontStyles.body, styles.dollar]}>
+          {getMoneyDisplayValue(newDollarBalance, CURRENCY_ENUM.DOLLAR, true)}
+        </Text>
       </View>
-    )
-  }
 
-  render() {
-    const {
-      t,
-      newDollarBalance,
-      newGoldBalance,
-      makerAmount,
-      takerAmount,
-      makerToken: token,
-      fee,
-    } = this.props
-
-    return (
-      <View style={styles.container}>
-        <View style={styles.exchange}>
-          <CurrencyDisplay amount={makerAmount} size={36} type={this.props.makerToken} />
-          <View style={styles.arrow}>
-            <RoundedArrow />
-          </View>
-          <CurrencyDisplay amount={takerAmount} size={36} type={this.getTakerToken()} />
-        </View>
+      <View style={styles.tabular}>
+        <Text style={fontStyles.bodySecondary}>{t('global:celoGold')}</Text>
+        <Text numberOfLines={1} style={[fontStyles.body, styles.gold]}>
+          {getMoneyDisplayValue(newGoldBalance, CURRENCY_ENUM.GOLD, true)}
+        </Text>
+      </View>
+    </View>
+  )
+}
 
-        <View style={styles.title}>
-          <ExchangeRate rate={this.getExchangeRate()} makerToken={token} />
+export function ExchangeConfirmationCard(props: Props) {
+  const {
+    t,
+    newDollarBalance,
+    newGoldBalance,
+    makerAmount,
+    takerAmount,
+    makerToken: token,
+    fee,
+  } = props
+
+  const localCurrencySymbol = useLocalCurrencySymbol()
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.exchange}>
+        <CurrencyDisplay
+          amount={makerAmount}
+          size={36}
+          type={props.makerToken}
+          currencySymbol={localCurrencySymbol}
+        />
+        <View style={styles.arrow}>
+          <RoundedArrow />
         </View>
+        <CurrencyDisplay
+          amount={takerAmount}
+          size={36}
+          type={getTakerToken(props)}
+          currencySymbol={localCurrencySymbol}
+        />
+      </View>
 
-        <View style={styles.feeContainer}>
-          <LineItemRow
-            currencySymbol={this.getTakerToken()}
-            amount={fee}
-            title={t('securityFee')}
-            titleIcon={<FeeIcon />}
-          />
-          <LineItemRow
-            currencySymbol={this.getTakerToken()}
-            amount={'0.01'}
-            title={t('exchangeFee')}
-            titleIcon={<FeeExchangeIcon />}
-          />
-        </View>
+      <View style={styles.title}>
+        <ExchangeRate rate={getExchangeRate(props)} makerToken={token} />
+      </View>
 
-        {newDollarBalance &&
-          newGoldBalance &&
-          this.renderNewBalances(newDollarBalance, newGoldBalance)}
+      <View style={styles.feeContainer}>
+        <LineItemRow
+          currencySymbol={getTakerToken(props)}
+          amount={fee}
+          title={t('securityFee')}
+          titleIcon={<FeeIcon />}
+        />
+        <LineItemRow
+          currencySymbol={getTakerToken(props)}
+          amount={'0.01'}
+          title={t('exchangeFee')}
+          titleIcon={<FeeExchangeIcon />}
+        />
       </View>
-    )
-  }
+
+      {newDollarBalance &&
+        newGoldBalance &&
+        renderNewBalances(props, newDollarBalance, newGoldBalance)}
+    </View>
+  )
 }
 
 const styles = StyleSheet.create({