From 2d11f2571c8a3788b9d6b8f1b2b4b0542ba32196 Mon Sep 17 00:00:00 2001
From: slowbackspace <slowbackspace@gmail.com>
Date: Fri, 15 Mar 2019 10:07:11 +0100
Subject: [PATCH] add missing formatter for xrp

---
 .../components/Balance/index.messages.js      |  5 +++
 .../ripple/components/Balance/index.js        | 34 ++++++++++++++++---
 2 files changed, 35 insertions(+), 4 deletions(-)

diff --git a/src/views/Wallet/views/Account/Summary/components/Balance/index.messages.js b/src/views/Wallet/views/Account/Summary/components/Balance/index.messages.js
index 54eb131d..9fba67f5 100644
--- a/src/views/Wallet/views/Account/Summary/components/Balance/index.messages.js
+++ b/src/views/Wallet/views/Account/Summary/components/Balance/index.messages.js
@@ -11,6 +11,11 @@ const definedMessages: Messages = defineMessages({
         id: 'TR_RATE',
         defaultMessage: 'Rate',
     },
+    TR_RESERVE: {
+        id: 'TR_RESERVE',
+        defaultMessage: 'Reserve',
+        description: 'Label for minimal XRP account reserve',
+    },
 });
 
 export default definedMessages;
diff --git a/src/views/Wallet/views/Account/Summary/ripple/components/Balance/index.js b/src/views/Wallet/views/Account/Summary/ripple/components/Balance/index.js
index 967b9f83..df8e6385 100644
--- a/src/views/Wallet/views/Account/Summary/ripple/components/Balance/index.js
+++ b/src/views/Wallet/views/Account/Summary/ripple/components/Balance/index.js
@@ -5,9 +5,11 @@ import styled from 'styled-components';
 import Icon from 'components/Icon';
 import colors from 'config/colors';
 import ICONS from 'config/icons';
+import { FormattedMessage, FormattedNumber } from 'react-intl';
 import { FONT_SIZE, FONT_WEIGHT } from 'config/variables';
 import Tooltip from 'components/Tooltip';
 import type { Network, State as ReducersState } from 'flowtype';
+import l10nMessages from '../../../components/Balance/index.messages';
 
 type Props = {
     network: Network,
@@ -154,7 +156,17 @@ class AccountBalance extends PureComponent<Props, State> {
                             <Label>Balance</Label>
                             <TooltipWrapper>
                                 <FiatValue>
-                                    {fiatRates ? `${fiat} ${localCurrency}` : 'N/A'}
+                                    {fiatRates ? (
+                                        <FormattedNumber
+                                            currency={localCurrency}
+                                            value={fiat}
+                                            minimumFractionDigits={2}
+                                            // eslint-disable-next-line react/style-prop-object
+                                            style="currency"
+                                        />
+                                    ) : (
+                                        'N/A'
+                                    )}
                                 </FiatValue>
                                 {!fiatRates && NoRatesTooltip}
                             </TooltipWrapper>
@@ -164,7 +176,9 @@ class AccountBalance extends PureComponent<Props, State> {
                         </BalanceWrapper>
                         {this.props.reserve !== '0' && (
                             <BalanceWrapper>
-                                <Label>Reserve</Label>
+                                <Label>
+                                    <FormattedMessage {...l10nMessages.TR_RESERVE} />
+                                </Label>
                                 <FiatValueRate>
                                     {this.props.reserve} {network.symbol}
                                 </FiatValueRate>
@@ -172,10 +186,22 @@ class AccountBalance extends PureComponent<Props, State> {
                         )}
 
                         <BalanceRateWrapper>
-                            <Label>Rate</Label>
+                            <Label>
+                                <FormattedMessage {...l10nMessages.TR_RATE} />
+                            </Label>
                             <TooltipWrapper>
                                 <FiatValueRate>
-                                    {fiatRates ? `${fiatRateValue} ${localCurrency}` : 'N/A'}
+                                    {fiatRates ? (
+                                        <FormattedNumber
+                                            currency={localCurrency}
+                                            value={fiatRateValue}
+                                            minimumFractionDigits={2}
+                                            // eslint-disable-next-line react/style-prop-object
+                                            style="currency"
+                                        />
+                                    ) : (
+                                        'N/A'
+                                    )}
                                 </FiatValueRate>
                                 {!fiatRates && NoRatesTooltip}
                             </TooltipWrapper>