add active account to user context, output in Web3 message

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
                     })
                 }

src/components/Web3message.module.scss

@@ -42,7 +42,7 @@
 }
 
 .account {
-    font-family: $font-family-monospace;
     display: inline-block;
     margin-left: $spacer / 8;
+    background: none;
 }

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
+                <code className={styles.account} title={account}>
-                    className={styles.account}
+                    {`${account.substring(0, 20)}...`}
-                    title="0xfehz2u89nfewhji432ntio43huof42huifewhnuefwo"
+                </code>
-                >
-                    0xfehz2u89n...
-                </span>
             </div>
         )
     }

src/context/User.ts

@@ -4,6 +4,7 @@ export const User = React.createContext({
     isLogged: false,
     isLoading: false,
     isWeb3: false,
+    account: '',
     web3: {},
     ocean: {},
     startLogin: () => {