diff --git a/client/src/components/atoms/Account.module.scss b/client/src/components/atoms/Account.module.scss index 3cbfb22..22e5eac 100644 --- a/client/src/components/atoms/Account.module.scss +++ b/client/src/components/atoms/Account.module.scss @@ -8,15 +8,23 @@ > div:first-of-type { flex: 0 0 80%; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - font-family: $font-family-monospace; - font-size: $font-size-small; - font-weight: 700; } } +.accountId { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + font-family: $font-family-monospace; + font-size: $font-size-small; + font-weight: 700; +} + +.unlock { + font-size: $font-size-small !important; // stylelint-disable-line + margin-left: $spacer / 2; +} + .accountType { width: 100%; margin-left: calc(1.5rem + #{$spacer / 3}); @@ -77,4 +85,5 @@ display: inline-block; margin-right: $spacer / 3; margin-left: 0; + border: 1px solid $brand-grey-lighter; } diff --git a/client/src/components/atoms/Account.tsx b/client/src/components/atoms/Account.tsx index 47ec9b3..2e9ed9d 100644 --- a/client/src/components/atoms/Account.tsx +++ b/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 - isBurner: boolean - extended?: boolean - }, - { isAccountOpen: boolean } + {}, + { isAccountInfoOpen: 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 (
- Blockies - {account} + {account ? ( + <> + Blockies + + {account} + + + ) : ( + <> + + + No account selected + + + + )} +
{isBurner ? ( @@ -55,7 +75,7 @@ export default class Account extends PureComponent<
- {isBurner && this.state.isAccountOpen && ( + {isBurner && isAccountInfoOpen && (
{seedphrase}

@@ -64,8 +84,6 @@ export default class Account extends PureComponent<

)}
- ) : ( - No account selected ) } } diff --git a/client/src/components/molecules/AccountStatus/Popover.module.scss b/client/src/components/molecules/AccountStatus/Popover.module.scss index 5df8fc4..37a9ce1 100644 --- a/client/src/components/molecules/AccountStatus/Popover.module.scss +++ b/client/src/components/molecules/AccountStatus/Popover.module.scss @@ -41,7 +41,10 @@ $popoverWidth: 18rem; } button { - display: none; + svg, + &:last-child { + display: none; + } } } diff --git a/client/src/components/molecules/AccountStatus/Popover.tsx b/client/src/components/molecules/AccountStatus/Popover.tsx index d5590f0..51b990f 100644 --- a/client/src/components/molecules/AccountStatus/Popover.tsx +++ b/client/src/components/molecules/AccountStatus/Popover.tsx @@ -8,13 +8,7 @@ export default class Popover extends PureComponent<{ style?: React.CSSProperties }> { public render() { - const { - account, - balance, - network, - isOceanNetwork, - isBurner - } = this.context + const { account, balance, network, isOceanNetwork } = this.context return (
- +
{account && balance && ( diff --git a/client/src/components/organisms/Web3message.tsx b/client/src/components/organisms/Web3message.tsx index 4f039a7..bda7158 100644 --- a/client/src/components/organisms/Web3message.tsx +++ b/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 (
- +
{(network !== 'Pacific' || this.props.extended) && ( diff --git a/client/src/data/web3message.json b/client/src/data/web3message.json index ca79acc..4c35e04 100644 --- a/client/src/data/web3message.json +++ b/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. 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.", + "hasMetaMaskWallet": "Connected with MetaMask to NETWORK. 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", diff --git a/client/src/routes/Publish/index.tsx b/client/src/routes/Publish/index.tsx index 6fac626..1583b45 100644 --- a/client/src/routes/Publish/index.tsx +++ b/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'