From 1e1dac4f8f9940ec1d3349f61b646ca3d50f2e8e Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Fri, 5 Apr 2019 15:39:32 +0200
Subject: [PATCH] refactor popover

---
 .../molecules/AccountStatus/Popover.tsx       | 67 +++++++++----------
 1 file changed, 30 insertions(+), 37 deletions(-)

diff --git a/client/src/components/molecules/AccountStatus/Popover.tsx b/client/src/components/molecules/AccountStatus/Popover.tsx
index e8c3541..c0af1bf 100644
--- a/client/src/components/molecules/AccountStatus/Popover.tsx
+++ b/client/src/components/molecules/AccountStatus/Popover.tsx
@@ -1,59 +1,52 @@
-import React from 'react'
+import React, { PureComponent } from 'react'
 import { User } from '../../../context/User'
 import styles from './Popover.module.scss'
 
-const Popover = ({
-    forwardedRef,
-    style
-}: {
+export default class Popover extends PureComponent<{
     forwardedRef: (ref: HTMLElement | null) => void
     style: React.CSSProperties
-}) => (
-    <div className={styles.popover} ref={forwardedRef} style={style}>
-        <User.Consumer>
-            {states =>
-                states.account &&
-                states.balance && (
+}> {
+    public render() {
+        const { account, balance, network } = this.context
+        return (
+            <div
+                className={styles.popover}
+                ref={this.props.forwardedRef}
+                style={this.props.style}
+            >
+                {account && balance && (
                     <div className={styles.popoverInfoline}>
                         <span
                             className={styles.balance}
-                            title={(states.balance.eth / 1e18).toFixed(10)}
+                            title={(balance.eth / 1e18).toFixed(10)}
                         >
                             <strong>
-                                {(states.balance.eth / 1e18)
-                                    .toFixed(3)
-                                    .slice(0, -1)}
+                                {(balance.eth / 1e18).toFixed(3).slice(0, -1)}
                             </strong>{' '}
                             ETH
                         </span>
                         <span className={styles.balance}>
-                            <strong>{states.balance.ocn}</strong> OCEAN
+                            <strong>{balance.ocn}</strong> OCEAN
                         </span>
                     </div>
-                )
-            }
-        </User.Consumer>
+                )}
 
-        <div className={styles.popoverInfoline}>
-            <User.Consumer>
-                {states =>
-                    states.account ? (
-                        <span className={styles.address} title={states.account}>
-                            {states.account}
+                <div className={styles.popoverInfoline}>
+                    {account ? (
+                        <span className={styles.address} title={account}>
+                            {account}
                         </span>
                     ) : (
                         <em>No account selected</em>
-                    )
-                }
-            </User.Consumer>
-        </div>
+                    )}
+                </div>
 
-        <div className={styles.popoverInfoline}>
-            <User.Consumer>
-                {states => states.network && states.network}
-            </User.Consumer>
-        </div>
-    </div>
-)
+                <div className={styles.popoverInfoline}>
+                    {network && network}
+                </div>
+            </div>
+        )
+    }
+}
 
-export default Popover
+Popover.contextType = User