From 0befc3a5971f920ff3db7d500e5577b2f2c85e3a Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Wed, 10 Jul 2019 18:46:28 +0200 Subject: [PATCH] output seed prase for burner wallet account, messaging tweaks --- .../src/components/atoms/Account.module.scss | 48 ++++++++++- client/src/components/atoms/Account.tsx | 85 ++++++++++++++----- .../VersionTableRow.module.scss | 10 ++- .../VersionNumbers/VersionTableRow.tsx | 7 +- .../organisms/WalletSelector.module.scss | 3 +- .../src/components/organisms/Web3message.tsx | 5 +- client/src/data/web3message.json | 11 +-- client/src/img/caret.svg | 3 + client/src/routes/Publish/index.tsx | 5 -- 9 files changed, 135 insertions(+), 42 deletions(-) create mode 100644 client/src/img/caret.svg diff --git a/client/src/components/atoms/Account.module.scss b/client/src/components/atoms/Account.module.scss index 48ab5d8..3cbfb22 100644 --- a/client/src/components/atoms/Account.module.scss +++ b/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; diff --git a/client/src/components/atoms/Account.tsx b/client/src/components/atoms/Account.tsx index 3e632f1..47ec9b3 100644 --- a/client/src/components/atoms/Account.tsx +++ b/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 = ({ - account, - isBurner -}: { - account: string - isBurner: boolean -}) => { - const blockies = account && toDataUrl(account) +export default class Account extends PureComponent< + { + account: string + isBurner: boolean + extended?: boolean + }, + { isAccountOpen: boolean } +> { + public state = { + isAccountOpen: false + } - return account && blockies ? ( -
- Blockies - {account} -
- {isBurner ? 'Burner Wallet' : 'MetaMask'} - + 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 ? ( +
+ Blockies + {account} +
+ {isBurner ? ( + + ) : ( + 'MetaMask' + )} + +
+ + {isBurner && this.state.isAccountOpen && ( +
+ {seedphrase} +

+ {content.seedphrase} +

+
+ )}
-
- ) : ( - No account selected - ) + ) : ( + No account selected + ) + } } - -export default Account diff --git a/client/src/components/molecules/VersionNumbers/VersionTableRow.module.scss b/client/src/components/molecules/VersionNumbers/VersionTableRow.module.scss index 53de934..fd7ace9 100644 --- a/client/src/components/molecules/VersionNumbers/VersionTableRow.module.scss +++ b/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); } diff --git a/client/src/components/molecules/VersionNumbers/VersionTableRow.tsx b/client/src/components/molecules/VersionNumbers/VersionTableRow.tsx index 3656a7c..c52a36a 100644 --- a/client/src/components/molecules/VersionNumbers/VersionTableRow.tsx +++ b/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 }) => { {(value.name === 'Commons' || value.contracts) && ( )} { } public render() { + const { network } = this.context + return (
- {this.props.extended && ( + {(network !== 'Pacific' || this.props.extended) && (
migrate to MetaMask.", - "hasMetaMaskWallet": "Connected with MetaMask.", - "wrongNetworkPacific": "Not connected to Pacific network.
Please connect in MetaMask with Custom RPC https://pacific.oceanprotocol.com", - "wrongNetworkNile": "Not connected to Nile network.
Please connect in MetaMask with Custom RPC https://nile.dev-ocean.com", - "wrongNetworkDuero": "Not connected to Duero network.
Please connect in MetaMask with Custom RPC https://duero.dev-ocean.com" + "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. Never use this burner wallet to send or receive any tokens. To personalize your experience and improve your security, migrate to MetaMask.", + "hasMetaMaskWallet": "Connected with MetaMask. You're a Pro.", + "wrongNetworkPacific": "Not connected to Pacific network. Please connect in MetaMask with Custom RPC https://pacific.oceanprotocol.com", + "wrongNetworkNile": "Not connected to Nile network. Please connect in MetaMask with Custom RPC https://nile.dev-ocean.com", + "wrongNetworkDuero": "Not connected to Duero network. Please connect in MetaMask with Custom RPC https://duero.dev-ocean.com", + "seedphrase": "You can use this seed phrase to import this burner wallet account into other wallets, e.g. MetaMask." } diff --git a/client/src/img/caret.svg b/client/src/img/caret.svg new file mode 100644 index 0000000..220b1bb --- /dev/null +++ b/client/src/img/caret.svg @@ -0,0 +1,3 @@ + + + diff --git a/client/src/routes/Publish/index.tsx b/client/src/routes/Publish/index.tsx index bc61a03..6fac626 100644 --- a/client/src/routes/Publish/index.tsx +++ b/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.`} > - {(!this.context.isLogged || - !this.context.isOceanNetwork) && ( - - )} -