From 4ee5f19a9a6e55b98097ca2542206df3c5db3ae0 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Wed, 10 Jul 2019 16:34:16 +0200 Subject: [PATCH] simplify Web3message UI, show during Publish flow --- .../src/components/atoms/Account.module.scss | 8 +++---- client/src/components/atoms/Account.tsx | 8 ++++--- .../AccountStatus/Popover.module.scss | 2 +- .../organisms/WalletSelector.module.scss | 6 +++--- .../components/organisms/WalletSelector.tsx | 2 +- .../organisms/Web3message.module.scss | 15 +++++++------ .../src/components/organisms/Web3message.tsx | 21 ++++++++++++------- client/src/data/web3message.json | 2 +- client/src/routes/About.tsx | 2 +- client/src/routes/Publish/Step.module.scss | 4 ++++ client/src/routes/Publish/Step.tsx | 4 ++++ 11 files changed, 44 insertions(+), 30 deletions(-) diff --git a/client/src/components/atoms/Account.module.scss b/client/src/components/atoms/Account.module.scss index 8f6a92e..48ab5d8 100644 --- a/client/src/components/atoms/Account.module.scss +++ b/client/src/components/atoms/Account.module.scss @@ -6,22 +6,22 @@ align-items: center; text-align: left; - > div { + > 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: $font-weight-bold; } } .accountType { width: 100%; margin-left: calc(1.5rem + #{$spacer / 3}); - font-size: $font-size-mini; - font-weight: $font-weight-bold; - opacity: .7; + font-size: $font-size-small; + color: $brand-grey-light; } .blockies { diff --git a/client/src/components/atoms/Account.tsx b/client/src/components/atoms/Account.tsx index e83414f..3e632f1 100644 --- a/client/src/components/atoms/Account.tsx +++ b/client/src/components/atoms/Account.tsx @@ -2,6 +2,7 @@ import React from 'react' import Dotdotdot from 'react-dotdotdot' import { toDataUrl } from 'ethereum-blockies' import styles from './Account.module.scss' +import WalletSelector from '../organisms/WalletSelector' const Account = ({ account, @@ -16,9 +17,10 @@ const Account = ({
Blockies {account} - {isBurner && ( - Burner Wallet - )} +
+ {isBurner ? 'Burner Wallet' : 'MetaMask'} + +
) : ( No account selected diff --git a/client/src/components/molecules/AccountStatus/Popover.module.scss b/client/src/components/molecules/AccountStatus/Popover.module.scss index 7abcdce..5df8fc4 100644 --- a/client/src/components/molecules/AccountStatus/Popover.module.scss +++ b/client/src/components/molecules/AccountStatus/Popover.module.scss @@ -41,7 +41,7 @@ $popoverWidth: 18rem; } button { - font-size: $font-size-small; + display: none; } } diff --git a/client/src/components/organisms/WalletSelector.module.scss b/client/src/components/organisms/WalletSelector.module.scss index 74e3851..f6a9693 100644 --- a/client/src/components/organisms/WalletSelector.module.scss +++ b/client/src/components/organisms/WalletSelector.module.scss @@ -2,9 +2,8 @@ .openLink { margin: 0; - margin-left: $spacer * 1.5; font-size: $font-size-small !important; // stylelint-disable-line - text-transform: uppercase; + margin-left: $spacer / 4; } .info { @@ -45,10 +44,11 @@ .buttonTitle { font-size: $font-size-base; - margin-bottom: $spacer / 8; + margin-bottom: $spacer / 2; font-weight: $font-weight-bold; } .buttonDescription { font-size: $font-size-small; + color: $brand-grey; } diff --git a/client/src/components/organisms/WalletSelector.tsx b/client/src/components/organisms/WalletSelector.tsx index a3e9528..93243e0 100644 --- a/client/src/components/organisms/WalletSelector.tsx +++ b/client/src/components/organisms/WalletSelector.tsx @@ -41,7 +41,7 @@ export default class WalletSelector extends PureComponent< diff --git a/client/src/components/organisms/Web3message.module.scss b/client/src/components/organisms/Web3message.module.scss index 8913012..157e1bb 100644 --- a/client/src/components/organisms/Web3message.module.scss +++ b/client/src/components/organisms/Web3message.module.scss @@ -5,17 +5,16 @@ color: $brand-grey; position: relative; padding-top: $spacer / 2; - padding-bottom: $spacer / 2; text-align: left; font-size: $font-size-small; +} - > div:first-child { - margin-bottom: $spacer / 2; - background: $brand-white; - border-radius: $border-radius; - border: 1px solid $brand-grey-lighter; - padding: $spacer / 2; - } +.account { + margin-bottom: $spacer / 2; + background: $brand-white; + border-radius: $border-radius; + border: 1px solid $brand-grey-lighter; + padding: $spacer / 2; } .text { diff --git a/client/src/components/organisms/Web3message.tsx b/client/src/components/organisms/Web3message.tsx index 6e382ba..7339e96 100644 --- a/client/src/components/organisms/Web3message.tsx +++ b/client/src/components/organisms/Web3message.tsx @@ -3,10 +3,9 @@ import Account from '../atoms/Account' import AccountStatus from '../molecules/AccountStatus' import styles from './Web3message.module.scss' import { User } from '../../context' -import WalletSelector from './WalletSelector' import content from '../../data/web3message.json' -export default class Web3message extends PureComponent { +export default class Web3message extends PureComponent<{ extended?: boolean }> { public static contextType = User private message = () => { @@ -26,17 +25,23 @@ export default class Web3message extends PureComponent { public render() { return (
- {this.context.account && ( +
+
+ + {this.props.extended && ( +

+ + +

)} -

- - -

-
) } diff --git a/client/src/data/web3message.json b/client/src/data/web3message.json index 0378668..805566a 100644 --- a/client/src/data/web3message.json +++ b/client/src/data/web3message.json @@ -1,6 +1,6 @@ { "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, learn how to migrate to MetaMask.", + "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, 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", diff --git a/client/src/routes/About.tsx b/client/src/routes/About.tsx index 901387b..5e40aad 100644 --- a/client/src/routes/About.tsx +++ b/client/src/routes/About.tsx @@ -45,7 +45,7 @@ class About extends Component {

Your Web3 Account Status

- + diff --git a/client/src/routes/Publish/Step.module.scss b/client/src/routes/Publish/Step.module.scss index 692e8d4..b186855 100644 --- a/client/src/routes/Publish/Step.module.scss +++ b/client/src/routes/Publish/Step.module.scss @@ -24,3 +24,7 @@ margin-left: auto; } } + +.account { + margin-top: $spacer * $line-height; +} diff --git a/client/src/routes/Publish/Step.tsx b/client/src/routes/Publish/Step.tsx index 57b84d8..9dae46a 100644 --- a/client/src/routes/Publish/Step.tsx +++ b/client/src/routes/Publish/Step.tsx @@ -7,6 +7,7 @@ import { User } from '../../context' import Files from './Files/' import StepRegisterContent from './StepRegisterContent' import styles from './Step.module.scss' +import Web3message from '../../components/organisms/Web3message' interface Fields { label: string @@ -162,6 +163,9 @@ export default class Step extends PureComponent { )} +
+ +
) }