Merge pull request austintgriffith#218 from MaxStalker/feature/210-di…

…splay-tokens

Display amount of tokens in advanced mode

src/App.js

@@ -972,6 +972,7 @@ export default class App extends Component {
                           icon={eth}
                           text={"ETH"}
                           amount={parseFloat(this.state.ethBalance) * parseFloat(this.state.ethprice)}
+                          tokenAmount={this.state.ethBalance}
                           address={account}
                           currencyDisplay={this.currencyDisplay}/>
                         </>) : (
@@ -1026,6 +1027,7 @@ export default class App extends Component {
                               icon={eth}
                               text={"ETH"}
                               amount={parseFloat(this.state.ethBalance) * parseFloat(this.state.ethprice)}
+                              tokenAmount={this.state.ethBalance}
                               currencyDisplay={this.currencyDisplay}
                               address={account} />
                           </div>

src/components/Balance.js

@@ -1,39 +1,69 @@
 import React from 'react';
 import { Flex, Text, Image } from "rimble-ui";
+import styled from 'styled-components'
 
-export  default ({icon, text, amount, currencyDisplay}) => {
-  const expertMode = localStorage.getItem("expertMode") === "true"
-    // Right now "expertMode" is enabled by default. To disable it by default, remove the following line.
-    || localStorage.getItem("expertMode") === null;
+const Fiat = styled(Text).attrs(()=>({
+  fontSize: 4,
+  fontWeight: 4
+}))``;
 
-  let opacity = 1
+const Token = styled(Text).attrs(()=>({
+  fontSize: 1,
+}))`
+  color: var(--secondary-btn-text-color)
+`;
+
+const Amount = styled(Flex)`
+  flex-direction: column;
+  align-items: flex-end;
+`;
+
+const tokenDisplay = (amount, symbol = "", maximumFractionDigits = 2) => {
+  const locale = localStorage.getItem('i18nextLng')
+  const formatter = new Intl.NumberFormat(locale, {
+    minimumFractionDigits: 2,
+    maximumFractionDigits: maximumFractionDigits,
+  });
+  return `${formatter.format(amount)} ${symbol}`
+};
+
+const valuableTokens = ["ETH"]
+
+export  default ({icon, text, amount, tokenAmount, currencyDisplay}) => {
+  let opacity;
+  let fiatValue;
+  let tokenValue;
+  const floatNumbers = valuableTokens.includes(text) ? 5 : 2
 
   if(isNaN(amount)){
-    opacity = 0.25
+    opacity = 0.25;
+
+    /* NOTE: Sometimes the exchangeRate to fiat wasn't loaded yet and hence
+    * amount can become NaN. In this case, we simply pass 0 to currencyDisplay
+    */
+
+    fiatValue = currencyDisplay(0);
+    tokenValue = tokenDisplay(0);
+  }else{
+    opacity = 1;
+    fiatValue = currencyDisplay(amount);
+    tokenValue = tokenDisplay(tokenAmount || amount, text, floatNumbers);
   }
 
   return (
     <Flex opacity={opacity} justifyContent={"space-between"} alignItems={"center"} borderBottom={1} borderColor={"#DFDFDF"} mb={3} pb={3}>
-      {expertMode ? (
       <Flex alignItems={"center"}>
         <Image src={icon} height={"50px"} width={"50px"} mr={3} bg="transparent" />
         <Text>
           {text}
         </Text>
       </Flex>
-      ) : (
-        <Text>
-          Your balance
-        </Text>
-      )}
 
-      <Text fontSize={4}>
+      <Amount>
+        <Fiat>{fiatValue}</Fiat>
+        <Token>{tokenValue}</Token>
+      </Amount>
 
-      {/* NOTE: Sometimes the exchangeRate to fiat wasn't loaded yet and hence
-        * amount can become NaN. In this case, we simply pass 0 to
-        *  currencyDisplay.*/}
-        {isNaN(amount) ? currencyDisplay(0) : currencyDisplay(amount)}
-      </Text>
     </Flex>
   )
 };