Merge pull request austintgriffith#209 from vrde/master

Simplify balance view and "advanced features"

src/App.js

@@ -18,6 +18,7 @@ import Receive from './components/Receive'
 import Share from './components/Share'
 import ShareLink from './components/ShareLink'
 import Balance from "./components/Balance";
+import SimpleBalance from "./components/SimpleBalance";
 import Receipt from "./components/Receipt";
 import MainCard from './components/MainCard';
 import History from './components/History';
@@ -158,18 +159,19 @@ export default class App extends Component {
 
   // NOTE: This function is for _displaying_ a currency value to a user. It
   // adds a currency unit to the beginning or end of the number!
-  currencyDisplay = amount => {
+  currencyDisplay = (amount, toParts) => {
     // NOTE: For some reason, this function seems to take very long.
-    const { exchangeRate } = this.state
-    const locale = localStorage.getItem('i18nextLng') 
+    const { exchangeRate } = this.state;
+    const locale = localStorage.getItem('i18nextLng');
     const symbol = localStorage.getItem('currency') || Object.keys(exchangeRate)[0];
     const convertedAmount = this.fromDollars(amount);
 
-    return new Intl.NumberFormat(locale, {
+    const formatter = new Intl.NumberFormat(locale, {
       style: 'currency',
       currency: symbol,
-      maximumFractionDigits: 2 
-    }).format(convertedAmount)
+      maximumFractionDigits: 2
+    });
+    return toParts ? formatter.formatToParts(convertedAmount) : formatter.format(convertedAmount);
   }
 
   // `fromDollars` and `toDollars` is used to convert floats from one currency
@@ -249,7 +251,6 @@ export default class App extends Component {
     })
   }
   componentDidMount(){
-
     document.body.style.backgroundColor = mainStyle.backgroundColor
 
     this.detectContext()
@@ -333,7 +334,7 @@ export default class App extends Component {
     }
     this.setState({mainnetweb3,daiContract,bridgeContract})
   }
-  
+
   componentWillUnmount() {
     clearInterval(interval)
     clearInterval(intervalLong)
@@ -720,6 +721,10 @@ export default class App extends Component {
     }
   }
   render() {
+    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;
+
     let {
       web3, account, gwei, block, avgBlockTime, etherscan, balance, metaAccount, burnMetaAccount, view, alert, send
     } = this.state;
@@ -825,6 +830,7 @@ export default class App extends Component {
                     buttonStyle={buttonStyle}
                     changeView={this.changeView}
                     isVendor={this.state.isVendor&&this.state.isVendor.isAllowed}
+                    expertMode={expertMode}
                   />
                 )
 
@@ -847,7 +853,7 @@ export default class App extends Component {
                   return (
                     <div>
                       <Card>
-                        <NavCard 
+                        <NavCard
                           title={i18n.t('history_chat')}
                           goBack={this.goBack.bind(this)}/>
                         {defaultBalanceDisplay}
@@ -889,10 +895,10 @@ export default class App extends Component {
                         <NavCard
                           title={i18n.t('offramp.history.title')}
                           goBack={this.goBack.bind(this)}/>
-                        <BityHistory 
+                        <BityHistory
                           changeAlert={this.changeAlert}
                           address={this.state.account}
-                          orderId={orderId} 
+                          orderId={orderId}
                         />
                       </Card>
                       <Bottom
@@ -943,9 +949,10 @@ export default class App extends Component {
                       <Card>
                         {extraTokens}
 
+                        {expertMode ? (<>
                         <Balance
                           icon={pdai}
-                          text={"PDAI"} 
+                          text={"PDAI"}
                           amount={this.state.xdaiBalance}
                           address={account}
                           currencyDisplay={this.currencyDisplay}/>
@@ -963,6 +970,12 @@ export default class App extends Component {
                           amount={parseFloat(this.state.ethBalance) * parseFloat(this.state.ethprice)}
                           address={account}
                           currencyDisplay={this.currencyDisplay}/>
+                        </>) : (
+                          <SimpleBalance
+                            mainAmount={this.state.xdaiBalance}
+                            otherAmounts={{DAI: this.state.daiBalance, ETH: parseFloat(this.state.ethBalance) * parseFloat(this.state.ethprice)}}
+                            currencyDisplay={this.currencyDisplay} />
+                        )}
 
                         {/* eslint-disable-next-line jsx-a11y/accessible-emoji */}
                         <Warning>💀 This product is currently in early alpha. Use at your own risk! 💀</Warning>

src/components/Advanced.js

@@ -8,6 +8,8 @@ import {
   Text,
   Select,
   Flex,
+  Box,
+  Checkbox
 } from 'rimble-ui'
 import { PrimaryButton, BorderButton } from '../components/Buttons'
 import getConfig from '../config'
@@ -21,13 +23,17 @@ export default class Advanced extends React.Component {
       privateKeyQr:false,
       seedPhraseHidden:true,
       privateKeyHidden:true,
-      currency: ''
+      currency: '',
+      expertMode:false
     }
   }
 
   componentDidMount() {
     let currency = localStorage.getItem('currency')
-    this.setState({ currency })
+    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;
+    this.setState({ currency, expertMode })
   }
 
   updateCurrency = e => {
@@ -36,9 +42,15 @@ export default class Advanced extends React.Component {
     localStorage.setItem('currency', value)
   }
 
+  updateAdvancedBalance= e => {
+    let { checked } = e.target
+    this.setState({ expertMode: checked })
+    localStorage.setItem('expertMode', checked)
+  }
+
   render(){
     let {isVendor, balance, privateKey, changeAlert, changeView, setPossibleNewPrivateKey} = this.props
-    let { currency } = this.state
+    let { currency, expertMode } = this.state
 
     let url = window.location.protocol+"//"+window.location.hostname
     if(window.location.port&&window.location.port!==80&&window.location.port!==443){
@@ -146,34 +158,36 @@ export default class Advanced extends React.Component {
 
     return (
       <div style={{marginTop:20}}>
-      <Flex alignItems='center' justifyContent='space-between' width={1}>
-        <Text>{i18n.t('currency.label')}</Text>
-        <Select items={CURRENCY.CURRENCY_LIST} onChange={this.updateCurrency} value={currency}/>
-      </Flex>
-      <hr style={{paddingTop:20}}/>
-      <div>
-        <div style={{width:"100%",textAlign:"center"}}><h5>Learn More</h5></div>
-        <div className="content ops row settings-row" style={{marginBottom:10}}>
-          <a href="https://github.com/leapdao/burner-wallet" style={{color:"#FFFFFF"}} target="_blank" rel="noopener noreferrer">
-            <BorderButton width={1}>
-              <Scaler config={{startZoomAt:400,origin:"50% 50%"}}>
-                <i className="fas fa-code"/> {i18n.t('code')}
-              </Scaler>
-            </BorderButton>
-          </a>
-          <a href="https://leapdao.org/" style={{color:"#FFFFFF"}} target="_blank" rel="noopener noreferrer">
-            <BorderButton width={1}>
-              <Scaler config={{startZoomAt:400,origin:"50% 50%"}}>
-                <i className="fas fa-info"/> {i18n.t('about')}
-              </Scaler>
-            </BorderButton>
-          </a>
+        <Flex py={3} alignItems='center' justifyContent='space-between'>
+          <Text>{i18n.t('currency.label')}</Text>
+          <Select items={CURRENCY.CURRENCY_LIST} onChange={this.updateCurrency} value={currency}/>
+        </Flex>
+        <Flex py={3} alignItems='center' justifyContent='space-between'>
+          <Text>Enable advanced features</Text>
+          <Checkbox onChange={this.updateAdvancedBalance} checked={expertMode} />
+        </Flex>
+        <hr style={{paddingTop:20}}/>
+        <div>
+          <div style={{width:"100%",textAlign:"center"}}><h5>Learn More</h5></div>
+          <div className="content ops row settings-row" style={{marginBottom:10}}>
+            <a href="https://github.com/leapdao/burner-wallet" style={{color:"#FFFFFF"}} target="_blank" rel="noopener noreferrer">
+              <BorderButton width={1}>
+                <Scaler config={{startZoomAt:400,origin:"50% 50%"}}>
+                  <i className="fas fa-code"/> {i18n.t('code')}
+                </Scaler>
+              </BorderButton>
+            </a>
+            <a href="https://leapdao.org/" style={{color:"#FFFFFF"}} target="_blank" rel="noopener noreferrer">
+              <BorderButton width={1}>
+                <Scaler config={{startZoomAt:400,origin:"50% 50%"}}>
+                  <i className="fas fa-info"/> {i18n.t('about')}
+                </Scaler>
+              </BorderButton>
+            </a>
+          </div>
         </div>
-      </div>
-
-      <hr style={{paddingTop:20}}/>
-
 
+        <hr style={{paddingTop:20}}/>
 
         {privateKey && !isVendor &&
         <div>

src/components/Balance.js

@@ -2,6 +2,9 @@ import React from 'react';
 import { Flex, Text, Image } from "rimble-ui";
 
 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;
 
   let opacity = 1
 
@@ -11,15 +14,21 @@ export  default ({icon, text, amount, currencyDisplay}) => {
 
   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}>
-        
+
       {/* 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.*/}

src/components/MoreButtons.js

@@ -6,6 +6,7 @@ import { BorderButton } from "./Buttons";
 export default ({
   isVendor,
   changeView,
+  expertMode
 }) => {
   let exchangeButton;
 
@@ -41,7 +42,7 @@ export default ({
 
   return (
     <Flex mx={-2}>
-      <Box width={[1, 1/2, 1/2]} m={2}>
+      <Box flex={1} m={2}>
         <BorderButton
           fullWidth
           onClick={() => {
@@ -54,7 +55,7 @@ export default ({
           </Flex>
         </BorderButton>
       </Box>
-      <Box width={[1, 1/2, 1/2]} m={2}>{exchangeButton}</Box>
+      {isVendor || expertMode ? <Box flex={1} m={2}>{exchangeButton}</Box> : null}
     </Flex>
   );
 };

src/components/SimpleBalance.js

@@ -0,0 +1,69 @@
+import React from "react";
+import styled from "styled-components";
+import { Text } from "rimble-ui";
+
+// Here are all the classes that can be used to style the balance.
+// Some of them are not in use now, but are listed for clarity.
+
+const StyledBalance = styled.div`
+  text-align: center;
+  padding: 20px 0;
+
+  color: var(--primary);
+
+  .otherAssets {
+    color: var(--dark-text);
+  }
+
+  span {
+    font-size: 200%;
+  }
+
+  .integer {
+    font-size: 400%;
+  }
+
+  .group {
+  }
+
+  .decimal {
+  }
+
+  .fraction {
+  }
+
+  .literal {
+  }
+
+  .currency {
+    font-size: 100%;
+  }
+`;
+
+export default ({ mainAmount, otherAmounts, currencyDisplay }) => {
+  if (isNaN(mainAmount) || typeof mainAmount === "undefined") {
+    mainAmount = 0.0;
+  }
+
+  const otherAssetsTotal = Object.values(otherAmounts).reduce(
+    (acc, curr) => acc + parseInt(curr, 10),
+    0
+  );
+  const parts = currencyDisplay(mainAmount, true);
+
+  return (
+    <>
+      <StyledBalance>
+        {parts.map(({ type, value }) => (
+          <Text.span className={type}>{value}</Text.span>
+        ))}
+        {otherAssetsTotal > 0 && (
+          <Text className="otherAssets" italic fontSize={1} textAlign="center">
+            +{currencyDisplay(otherAssetsTotal)} in other assets
+          </Text>
+        )}
+      </StyledBalance>
+      <hr />
+    </>
+  );
+};