output seed prase for burner wallet account, messaging tweaks

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

@@ -13,7 +13,7 @@
         text-overflow: ellipsis;
         font-family: $font-family-monospace;
         font-size: $font-size-small;
-        font-weight: $font-weight-bold;
+        font-weight: 700;
     }
 }
 
@@ -21,9 +21,55 @@
     width: 100%;
     margin-left: calc(1.5rem + #{$spacer / 3});
     font-size: $font-size-small;
+    font-weight: $font-weight-bold;
     color: $brand-grey-light;
 }
 
+.toggle {
+    background: none;
+    font-family: inherit;
+    font-size: inherit;
+    font-weight: inherit;
+    color: inherit;
+    border: none;
+    padding: 0;
+    cursor: pointer;
+
+    svg {
+        display: inline-block;
+        fill: currentColor;
+        margin-right: $spacer / 8;
+        transition: .2s ease-out;
+    }
+}
+
+.open {
+    transform: rotate(90deg);
+}
+
+.seedphrase {
+    margin-top: $spacer / 2;
+    margin-left: calc(1.5rem + #{$spacer / 4});
+    margin-right: calc(1.5rem + #{$spacer / 4});
+
+    code {
+        display: block;
+        text-align: center;
+        padding: $spacer / 2 $spacer;
+        border-radius: $border-radius;
+        background: $body-background;
+        border: 1px solid $brand-grey-lighter;
+        margin-bottom: $spacer / 4;
+        word-break: normal;
+    }
+}
+
+.seedphraseHelp {
+    color: $brand-grey-light;
+    font-size: $font-size-small;
+    margin: 0;
+}
+
 .blockies {
     width: 1.5rem;
     height: 1.5rem;

client/src/components/atoms/Account.tsx

@@ -1,30 +1,71 @@
-import React from 'react'
+import React, { PureComponent } from 'react'
 import Dotdotdot from 'react-dotdotdot'
 import { toDataUrl } from 'ethereum-blockies'
 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'
 
-const Account = ({
+export default class Account extends PureComponent<
-    account,
+    {
-    isBurner
-}: {
         account: string
         isBurner: boolean
-}) => {
+        extended?: boolean
-    const blockies = account && toDataUrl(account)
+    },
+    { isAccountOpen: boolean }
+> {
+    public state = {
+        isAccountOpen: false
+    }
 
+    private toggleAccountInfo() {
+        this.setState({ isAccountOpen: !this.state.isAccountOpen })
+    }
+
+    public render() {
+        const { account, isBurner, extended } = this.props
+        const seedphrase = localStorage.getItem('seedphrase') as string
+
+        const blockies = account && toDataUrl(account)
         return account && blockies ? (
             <div className={styles.account}>
-            <img className={styles.blockies} src={blockies} alt="Blockies" />
+                <img
+                    className={styles.blockies}
+                    src={blockies}
+                    alt="Blockies"
+                />
                 <Dotdotdot clamp={2}>{account}</Dotdotdot>
                 <div className={styles.accountType}>
-                {isBurner ? 'Burner Wallet' : 'MetaMask'}
+                    {isBurner ? (
+                        <button
+                            className={styles.toggle}
+                            onClick={() => this.toggleAccountInfo()}
+                            title="Show More Account Info"
+                        >
+                            <Caret
+                                className={
+                                    this.state.isAccountOpen ? styles.open : ''
+                                }
+                            />{' '}
+                            Burner Wallet
+                        </button>
+                    ) : (
+                        'MetaMask'
+                    )}
                     <WalletSelector />
                 </div>
+
+                {isBurner && this.state.isAccountOpen && (
+                    <div className={styles.seedphrase}>
+                        <code>{seedphrase}</code>
+                        <p className={styles.seedphraseHelp}>
+                            {content.seedphrase}
+                        </p>
+                    </div>
+                )}
             </div>
         ) : (
             <em>No account selected</em>
         )
+    }
 }
-
-export default Account

client/src/components/molecules/VersionNumbers/VersionTableRow.module.scss

@@ -11,5 +11,13 @@
     margin-top: -.1rem;
     padding-right: .5rem;
     cursor: pointer;
-    color: $brand-grey-light;
+
+    svg {
+        fill: $brand-grey-light;
+        transition: .2s ease-out;
+    }
+}
+
+.open {
+    transform: rotate(90deg);
 }

client/src/components/molecules/VersionNumbers/VersionTableRow.tsx

@@ -4,6 +4,7 @@ import slugify from '@sindresorhus/slugify'
 import styles from './VersionTableRow.module.scss'
 import { VersionTableContracts, VersionTableCommons } from './VersionTable'
 import VersionNumber from './VersionNumber'
+import { ReactComponent as Caret } from '../../../img/caret.svg'
 
 const VersionTableRow = ({ value }: { value: any }) => {
     const collapseStyles = {
@@ -26,11 +27,7 @@ const VersionTableRow = ({ value }: { value: any }) => {
                 <td>
                     {(value.name === 'Commons' || value.contracts) && (
                         <button className={styles.handle} {...getToggleProps()}>
-                            {isOpen ? (
+                            <Caret className={isOpen ? styles.open : ''} />
-                                <span>&#9660;</span>
-                            ) : (
-                                <span>&#9658;</span>
-                            )}
                         </button>
                     )}
                     <a

client/src/components/organisms/WalletSelector.module.scss

@@ -1,9 +1,8 @@
 @import '../../styles/variables';
 
 .openLink {
-    margin: 0;
     font-size: $font-size-small !important; // stylelint-disable-line
-    margin-left: $spacer / 4;
+    margin-left: $spacer / 2;
 }
 
 .info {

client/src/components/organisms/Web3message.tsx

@@ -23,16 +23,19 @@ export default class Web3message extends PureComponent<{ extended?: boolean }> {
     }
 
     public render() {
+        const { network } = this.context
+
         return (
             <div className={styles.message}>
                 <div className={styles.account}>
                     <Account
                         account={this.context.account}
                         isBurner={this.context.isBurner}
+                        extended={this.props.extended}
                     />
                 </div>
 
-                {this.props.extended && (
+                {(network !== 'Pacific' || this.props.extended) && (
                     <div className={styles.text}>
                         <AccountStatus className={styles.status} />
                         <em

client/src/data/web3message.json

@@ -1,8 +1,9 @@
 {
   "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. This wallet will persist in your browser across sessions, but not across different browsers or devices. To personalize your experience and improve your security, <a href='https://docs.oceanprotocol.com/tutorials/metamask-setup/'>migrate to MetaMask</a>.",
+  "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.",
+  "hasMetaMaskWallet": "Connected with MetaMask. You're a Pro.",
-  "wrongNetworkPacific": "Not connected to Pacific network.<br />Please connect in MetaMask with Custom RPC <code>https://pacific.oceanprotocol.com</code>",
+  "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.<br />Please connect in MetaMask with Custom RPC <code>https://nile.dev-ocean.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.<br />Please connect in MetaMask with Custom RPC <code>https://duero.dev-ocean.com</code>"
+  "wrongNetworkDuero": "Not connected to Duero network. Please connect in MetaMask with Custom RPC <code>https://duero.dev-ocean.com</code>",
+  "seedphrase": "You can use this seed phrase to import this burner wallet account into other wallets, e.g. MetaMask."
 }

client/src/img/caret.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="9" height="10" viewBox="0 0 9 10">
+  <polygon points="9 5 0 10 0 0"/>
+</svg>

client/src/routes/Publish/index.tsx

@@ -326,11 +326,6 @@ export default class Publish extends Component<{}, PublishState> {
                         description={`Publish a new data set into the Ocean Protocol ${market.network} Network.`}
                     >
                         <Content>
-                            {(!this.context.isLogged ||
-                                !this.context.isOceanNetwork) && (
-                                <Web3message />
-                            )}
-
                             <Progress
                                 steps={steps}
                                 currentStep={this.state.currentStep}