address locked MetaMask account use case

client/src/components/atoms/Account.module.scss

@@ -8,6 +8,10 @@
 
     > div:first-of-type {
         flex: 0 0 80%;
+    }
+}
+
+.accountId {
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -15,6 +19,10 @@
     font-size: $font-size-small;
     font-weight: 700;
 }
+
+.unlock {
+    font-size: $font-size-small !important; // stylelint-disable-line
+    margin-left: $spacer / 2;
 }
 
 .accountType {
@@ -77,4 +85,5 @@
     display: inline-block;
     margin-right: $spacer / 3;
     margin-left: 0;
+    border: 1px solid $brand-grey-lighter;
 }

client/src/components/atoms/Account.tsx

@@ -5,36 +5,58 @@ import styles from './Account.module.scss'
 import WalletSelector from '../organisms/WalletSelector'
 import content from '../../data/web3message.json'
 import { ReactComponent as Caret } from '../../img/caret.svg'
+import { User } from '../../context'
+import Button from './Button'
 
 export default class Account extends PureComponent<
-    {
+    {},
-        account: string
+    { isAccountInfoOpen: boolean }
-        isBurner: boolean
-        extended?: boolean
-    },
-    { isAccountOpen: boolean }
 > {
+    public static contextType = User
+
     public state = {
-        isAccountOpen: false
+        isAccountInfoOpen: false
     }
 
     private toggleAccountInfo() {
-        this.setState({ isAccountOpen: !this.state.isAccountOpen })
+        this.setState({ isAccountInfoOpen: !this.state.isAccountInfoOpen })
     }
 
     public render() {
-        const { account, isBurner, extended } = this.props
+        const { account, isBurner, loginMetamask } = this.context
+        const { isAccountInfoOpen } = this.state
         const seedphrase = localStorage.getItem('seedphrase') as string
-
         const blockies = account && toDataUrl(account)
-        return account && blockies ? (
+
+        return (
             <div className={styles.account}>
+                {account ? (
+                    <>
                         <img
                             className={styles.blockies}
                             src={blockies}
                             alt="Blockies"
                         />
-                <Dotdotdot clamp={2}>{account}</Dotdotdot>
+                        <Dotdotdot className={styles.accountId} clamp={2}>
+                            {account}
+                        </Dotdotdot>
+                    </>
+                ) : (
+                    <>
+                        <span className={styles.blockies} />
+                        <em className={styles.noAccount}>
+                            No account selected
+                        </em>
+                        <Button
+                            link
+                            className={styles.unlock}
+                            onClick={() => loginMetamask()}
+                        >
+                            Unlock Account
+                        </Button>
+                    </>
+                )}
+
                 <div className={styles.accountType}>
                     {isBurner ? (
                         <button
@@ -43,9 +65,7 @@ export default class Account extends PureComponent<
                             title="Show More Account Info"
                         >
                             <Caret
-                                className={
+                                className={isAccountInfoOpen ? styles.open : ''}
-                                    this.state.isAccountOpen ? styles.open : ''
-                                }
                             />{' '}
                             Burner Wallet
                         </button>
@@ -55,7 +75,7 @@ export default class Account extends PureComponent<
                     <WalletSelector />
                 </div>
 
-                {isBurner && this.state.isAccountOpen && (
+                {isBurner && isAccountInfoOpen && (
                     <div className={styles.seedphrase}>
                         <code>{seedphrase}</code>
                         <p className={styles.seedphraseHelp}>
@@ -64,8 +84,6 @@ export default class Account extends PureComponent<
                     </div>
                 )}
             </div>
-        ) : (
-            <em>No account selected</em>
         )
     }
 }

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

@@ -41,9 +41,12 @@ $popoverWidth: 18rem;
     }
 
     button {
+        svg,
+        &:last-child {
             display: none;
         }
     }
+}
 
 .balance {
     font-size: $font-size-small;

client/src/components/molecules/AccountStatus/Popover.tsx

@@ -8,13 +8,7 @@ export default class Popover extends PureComponent<{
     style?: React.CSSProperties
 }> {
     public render() {
-        const {
+        const { account, balance, network, isOceanNetwork } = this.context
-            account,
-            balance,
-            network,
-            isOceanNetwork,
-            isBurner
-        } = this.context
 
         return (
             <div
@@ -25,7 +19,7 @@ export default class Popover extends PureComponent<{
                 {
                     <>
                         <div className={styles.popoverInfoline}>
-                            <Account account={account} isBurner={isBurner} />
+                            <Account />
                         </div>
 
                         {account && balance && (

client/src/components/organisms/Web3message.tsx

@@ -9,7 +9,7 @@ export default class Web3message extends PureComponent<{ extended?: boolean }> {
     public static contextType = User
 
     private message = () => {
-        const { isOceanNetwork, isLogged, isBurner } = this.context
+        const { isOceanNetwork, isLogged, isBurner, network } = this.context
 
         return !isOceanNetwork && !isBurner
             ? content.wrongNetworkPacific
@@ -18,7 +18,7 @@ export default class Web3message extends PureComponent<{ extended?: boolean }> {
             : isBurner
             ? content.hasBurnerWallet
             : isLogged
-            ? content.hasMetaMaskWallet
+            ? content.hasMetaMaskWallet.replace('NETWORK', network)
             : ''
     }
 
@@ -28,11 +28,7 @@ export default class Web3message extends PureComponent<{ extended?: boolean }> {
         return (
             <div className={styles.message}>
                 <div className={styles.account}>
-                    <Account
+                    <Account />
-                        account={this.context.account}
-                        isBurner={this.context.isBurner}
-                        extended={this.props.extended}
-                    />
                 </div>
 
                 {(network !== 'Pacific' || this.props.extended) && (

client/src/data/web3message.json

@@ -1,7 +1,7 @@
 {
   "noAccount": "No wallet selected. For publishing and downloading an asset you need to use one.",
   "hasBurnerWallet": "We created a temporary burner wallet for you, allowing you to use all Commons functionality without any setup on your side, and without a Web3-capable browser. This wallet will persist in your browser across sessions, but not across different browsers or devices. <strong>Never use this burner wallet to send or receive any tokens.</strong> To personalize your experience and improve your security, <a href='https://docs.oceanprotocol.com/tutorials/metamask-setup/'>migrate to MetaMask</a>.",
-  "hasMetaMaskWallet": "Connected with MetaMask. You're a Pro.",
+  "hasMetaMaskWallet": "Connected with MetaMask to NETWORK. You're a Pro.",
   "wrongNetworkPacific": "Not connected to Pacific network. Please connect in MetaMask with Custom RPC <code>https://pacific.oceanprotocol.com</code>",
   "wrongNetworkNile": "Not connected to Nile network. Please connect in MetaMask with Custom RPC <code>https://nile.dev-ocean.com</code>",
   "wrongNetworkDuero": "Not connected to Duero network. Please connect in MetaMask with Custom RPC <code>https://duero.dev-ocean.com</code>",

client/src/routes/Publish/index.tsx

@@ -4,7 +4,6 @@ import Route from '../../components/templates/Route'
 import Form from '../../components/atoms/Form/Form'
 import AssetModel from '../../models/AssetModel'
 import { User, Market } from '../../context'
-import Web3message from '../../components/organisms/Web3message'
 import Step from './Step'
 import Progress from './Progress'
 import ReactGA from 'react-ga'