prepare balances, use fake data for now

src/components/molecules/AccountStatus/Popover.module.scss

@@ -72,3 +72,14 @@ $popoverWidth: 18rem;
     overflow: hidden;
     text-overflow: ellipsis;
 }
+
+.balance {
+    font-size: $font-size-small;
+    color: $brand-grey-light;
+    margin-left: $spacer / 2;
+    white-space: nowrap;
+
+    &:first-child {
+        margin-left: 0;
+    }
+}

src/components/molecules/AccountStatus/Popover.tsx

@@ -19,7 +19,23 @@ const Popover = () => (
             </User.Consumer>
         </div>
         <div className={styles.popoverInfoline}>
-            Network: &nbsp;<strong>{''}</strong>
+            Network: <strong>&nbsp; Fake Network Name</strong>
+            {/* Network:
+            <User.Consumer>
+                {states => states.network && <strong>{states.network}</strong>}
+            </User.Consumer> */}
+        </div>
+        <div className={styles.popoverInfoline}>
+            <span className={styles.balance} title="Fake data">
+                <strong>30</strong> ETH
+            </span>
+            {/* <span className={styles.balance} title={(eth / 1e18).toFixed(10)}>
+                    <strong>{(eth / 1e18).toFixed(3).slice(0, -1)}</strong> ETH
+                </span> */}
+            <span className={styles.balance}>
+                {/* <strong>{ocn}</strong> OCEAN */}
+                <strong>2474290</strong> OCEAN
+            </span>
         </div>
         <div className={styles.popoverInfoline}>
             <Faucet />