balance display tweaks

src/App.tsx

@@ -32,8 +32,10 @@ interface AppState {
     isLoading: boolean
     isWeb3: boolean
     account: string
-    balanceEth: number
-    balanceOcn: number
+    balance: {
+        eth: number
+        ocn: number
+    }
     network: string
     web3: Web3
     ocean: {}
@@ -77,8 +79,10 @@ class App extends Component<{}, AppState> {
         isLogged: false,
         isLoading: true,
         isWeb3: false,
-        balanceEth: 0,
-        balanceOcn: 0,
+        balance: {
+            eth: 0,
+            ocn: 0
+        },
         network: '',
         web3: new Web3(
             new Web3.providers.HttpProvider(
@@ -159,10 +163,7 @@ class App extends Component<{}, AppState> {
             // TODO: squid-js balance retrieval fix
             const accounts = await ocean.getAccounts()
             const balance = await accounts[0].getBalance()
-            this.setState({
-                balanceEth: balance.eth,
-                balanceOcn: balance.ocn
-            })
+            this.setState({ balance })
             // TODO: squid-js expose keeper for getNetworkName
         } catch (e) {
             Logger.log('ocean/balance error', e)

src/components/molecules/AccountStatus/Popover.tsx

@@ -10,43 +10,29 @@ const Popover = ({
     style: React.CSSProperties
 }) => (
     <div className={styles.popover} ref={forwardedRef} style={style}>
-        {/*
-            TODO: uncomment to show real balances,
-            and remove next infoline block with fake data
-        */}
-        {/*
         <User.Consumer>
             {states =>
-                (states.balanceEth || states.balanceOcn) && (
+                states.account &&
+                states.balance && (
                     <div className={styles.popoverInfoline}>
                         <span
                             className={styles.balance}
-                            title={(states.balanceEth / 1e18).toFixed(10)}
+                            title={(states.balance.eth / 1e18).toFixed(10)}
                         >
                             <strong>
-                                {(states.balanceEth / 1e18)
+                                {(states.balance.eth / 1e18)
                                     .toFixed(3)
                                     .slice(0, -1)}
                             </strong>{' '}
                             ETH
                         </span>
                         <span className={styles.balance}>
-                            <strong>{states.balanceOcn}</strong> OCEAN
+                            <strong>{states.balance.ocn}</strong> OCEAN
                         </span>
                     </div>
                 )
             }
         </User.Consumer>
-        */}
-
-        <div className={styles.popoverInfoline}>
-            <span className={styles.balance} title="Fake data">
-                <strong>30</strong> ETH
-            </span>
-            <span className={styles.balance}>
-                <strong>2474290</strong> OCEAN
-            </span>
-        </div>
 
         <div className={styles.popoverInfoline}>
             <User.Consumer>
@@ -63,15 +49,9 @@ const Popover = ({
         </div>
 
         <div className={styles.popoverInfoline}>
-            Fake Network Name
-            {/*
-                TODO: uncomment to show real network name
-            */}
-            {/*
             <User.Consumer>
                 {states => states.network && states.network}
             </User.Consumer>
-            */}
         </div>
     </div>
 )

src/context/User.ts

@@ -7,8 +7,10 @@ export const User = React.createContext({
     account: '',
     web3: {},
     ocean: {},
-    balanceEth: 0,
-    balanceOcn: 0,
+    balance: {
+        eth: 0,
+        ocn: 0
+    },
     network: '',
     startLogin: () => {
         /* empty */