From 0b7e602606ebf62d159c801d5191d06038251192 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Tue, 12 Feb 2019 16:23:45 +0100
Subject: [PATCH] add active account to user context, output in Web3 message

---
 src/App.tsx                            |  5 +++++
 src/components/Web3message.module.scss |  2 +-
 src/components/Web3message.tsx         | 13 +++++--------
 src/context/User.ts                    |  1 +
 4 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index a1e3303..ef1bb18 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -22,6 +22,7 @@ interface AppState {
     isLogged: boolean
     isLoading: boolean
     isWeb3: boolean
+    account: string
     web3: Web3
     ocean: {}
     startLogin: () => void
@@ -44,6 +45,7 @@ class App extends Component<{}, AppState> {
                 `${nodeScheme}://${nodeHost}:${nodePort}`
             )
         ),
+        account: '',
         ocean: {},
         startLogin: this.startLogin
     }
@@ -61,6 +63,7 @@ class App extends Component<{}, AppState> {
                     this.setState({
                         isLogged: true,
                         isWeb3: true,
+                        account: accounts[0],
                         web3
                     })
                 } else {
@@ -69,6 +72,7 @@ class App extends Component<{}, AppState> {
                         this.setState({
                             isLogged: true,
                             isWeb3: true,
+                            account: accounts[0],
                             web3
                         })
                     }
@@ -90,6 +94,7 @@ class App extends Component<{}, AppState> {
                 if (accounts.length > 0) {
                     this.setState({
                         isLogged: true,
+                        account: accounts[0],
                         web3
                     })
                 }
diff --git a/src/components/Web3message.module.scss b/src/components/Web3message.module.scss
index 69c87fc..759ebb8 100644
--- a/src/components/Web3message.module.scss
+++ b/src/components/Web3message.module.scss
@@ -42,7 +42,7 @@
 }
 
 .account {
-    font-family: $font-family-monospace;
     display: inline-block;
     margin-left: $spacer / 8;
+    background: none;
 }
diff --git a/src/components/Web3message.tsx b/src/components/Web3message.tsx
index 287e0a2..a8f9a7d 100644
--- a/src/components/Web3message.tsx
+++ b/src/components/Web3message.tsx
@@ -14,7 +14,7 @@ export default class Web3message extends PureComponent {
                             : !states.isLogged
                             ? this.unlockAccount(states)
                             : states.isLogged
-                            ? this.haveAccount()
+                            ? this.haveAccount(states.account)
                             : null
                     }
                 </User.Consumer>
@@ -48,17 +48,14 @@ export default class Web3message extends PureComponent {
         )
     }
 
-    public haveAccount() {
+    public haveAccount(account: string) {
         return (
             <div className={styles.message}>
                 <span className={styles.indicatorActive} /> Connected with
                 account
-                <span
-                    className={styles.account}
-                    title="0xfehz2u89nfewhji432ntio43huof42huifewhnuefwo"
-                >
-                    0xfehz2u89n...
-                </span>
+                <code className={styles.account} title={account}>
+                    {`${account.substring(0, 20)}...`}
+                </code>
             </div>
         )
     }
diff --git a/src/context/User.ts b/src/context/User.ts
index 2ab2816..3b64219 100644
--- a/src/context/User.ts
+++ b/src/context/User.ts
@@ -4,6 +4,7 @@ export const User = React.createContext({
     isLogged: false,
     isLoading: false,
     isWeb3: false,
+    account: '',
     web3: {},
     ocean: {},
     startLogin: () => {