show balance in local currency

src/views/Wallet/views/Account/Summary/components/Balance/index.js

@@ -15,6 +15,7 @@ type Props = {
     network: Network,
     balance: string,
     fiat: $ElementType<ReducersState, 'fiat'>,
+    localCurrency: string,
 };
 
 type State = {
@@ -59,6 +60,7 @@ const FiatValue = styled.div`
     min-height: 25px;
     color: ${colors.TEXT_PRIMARY};
     align-items: center;
+    text-transform: uppercase;
 `;
 
 const FiatValueRate = styled.div`
@@ -69,6 +71,7 @@ const FiatValueRate = styled.div`
     display: flex;
     align-items: center;
     color: ${colors.TEXT_PRIMARY};
+    text-transform: uppercase;
 `;
 
 const BalanceWrapper = styled.div`
@@ -116,14 +119,14 @@ class AccountBalance extends PureComponent<Props, State> {
     }
 
     render() {
-        const { network } = this.props;
+        const { network, localCurrency } = this.props;
         const fiatRate = this.props.fiat.find(f => f.network === network.shortcut);
         let accountBalance = '';
         let fiatRateValue = '';
         let fiat = '';
         if (fiatRate) {
             accountBalance = new BigNumber(this.props.balance);
-            fiatRateValue = new BigNumber(fiatRate.value).toFixed(2);
+            fiatRateValue = new BigNumber(fiatRate.rates[localCurrency]).toFixed(2);
             fiat = accountBalance.times(fiatRateValue).toFixed(2);
         }
 
@@ -155,7 +158,9 @@ class AccountBalance extends PureComponent<Props, State> {
                                 <FormattedMessage {...l10nMessages.TR_BALANCE} />
                             </Label>
                             <TooltipWrapper>
-                                <FiatValue>{fiatRate ? `$ ${fiat}` : 'N/A'}</FiatValue>
+                                <FiatValue>
+                                    {fiatRate ? `${fiat} ${localCurrency}` : 'N/A'}
+                                </FiatValue>
                                 {!fiatRate && NoRatesTooltip}
                             </TooltipWrapper>
                             <CoinBalance>
@@ -168,7 +173,7 @@ class AccountBalance extends PureComponent<Props, State> {
                             </Label>
                             <TooltipWrapper>
                                 <FiatValueRate>
-                                    {fiatRate ? `$ ${fiatRateValue}` : 'N/A'}
+                                    {fiatRate ? `${fiatRateValue} ${localCurrency}` : 'N/A'}
                                 </FiatValueRate>
                                 {!fiatRate && NoRatesTooltip}
                             </TooltipWrapper>

src/views/Wallet/views/Account/Summary/ethereum/index.js

@@ -100,7 +100,12 @@ const AccountSummary = (props: Props) => {
                         />
                     </Link>
                 </AccountHeading>
-                <AccountBalance network={network} balance={balance} fiat={props.fiat} />
+                <AccountBalance
+                    network={network}
+                    balance={balance}
+                    fiat={props.fiat}
+                    localCurrency={props.wallet.localCurrency}
+                />
                 <H2Wrapper>
                     <H2>
                         <FormattedMessage {...l10nSummaryMessages.TR_TOKENS} />

src/views/Wallet/views/Account/Summary/ripple/components/Balance/index.js

@@ -14,6 +14,7 @@ type Props = {
     balance: string,
     reserve: string,
     fiat: $ElementType<ReducersState, 'fiat'>,
+    localCurrency: string,
 };
 
 type State = {
@@ -58,6 +59,7 @@ const FiatValue = styled.div`
     min-height: 25px;
     color: ${colors.TEXT_PRIMARY};
     align-items: center;
+    text-transform: uppercase;
 `;
 
 const FiatValueRate = styled.div`
@@ -68,6 +70,7 @@ const FiatValueRate = styled.div`
     display: flex;
     color: ${colors.TEXT_PRIMARY};
     align-items: center;
+    text-transform: uppercase;
 `;
 
 const BalanceWrapper = styled.div`
@@ -115,14 +118,14 @@ class AccountBalance extends PureComponent<Props, State> {
     }
 
     render() {
-        const { network } = this.props;
+        const { network, localCurrency } = this.props;
         const fiatRate = this.props.fiat.find(f => f.network === network.shortcut);
         let accountBalance = '';
         let fiatRateValue = '';
         let fiat = '';
         if (fiatRate) {
             accountBalance = new BigNumber(this.props.balance);
-            fiatRateValue = new BigNumber(fiatRate.value).toFixed(2);
+            fiatRateValue = new BigNumber(fiatRate.rates[localCurrency]).toFixed(2);
             fiat = accountBalance.times(fiatRateValue).toFixed(2);
         }
 
@@ -152,7 +155,9 @@ class AccountBalance extends PureComponent<Props, State> {
                         <BalanceWrapper>
                             <Label>Balance</Label>
                             <TooltipWrapper>
-                                <FiatValue>{fiatRate ? `$ ${fiat}` : 'N/A'}</FiatValue>
+                                <FiatValue>
+                                    {fiatRate ? `${fiat} ${localCurrency}` : 'N/A'}
+                                </FiatValue>
                                 {!fiatRate && NoRatesTooltip}
                             </TooltipWrapper>
                             <CoinBalance>
@@ -172,7 +177,7 @@ class AccountBalance extends PureComponent<Props, State> {
                             <Label>Rate</Label>
                             <TooltipWrapper>
                                 <FiatValueRate>
-                                    {fiatRate ? `$ ${fiatRateValue}` : 'N/A'}
+                                    {fiatRate ? `${fiatRateValue} ${localCurrency}` : 'N/A'}
                                 </FiatValueRate>
                                 {!fiatRate && NoRatesTooltip}
                             </TooltipWrapper>

src/views/Wallet/views/Account/Summary/ripple/index.js

@@ -85,6 +85,7 @@ const AccountSummary = (props: Props) => {
                     balance={balance}
                     reserve={reserve}
                     fiat={props.fiat}
+                    localCurrency={props.wallet.localCurrency}
                 />
                 {TMP_SHOW_HISTORY && (
                     <H2Wrapper>