1
0
mirror of https://github.com/oceanprotocol/commons.git synced 2023-03-15 18:03:00 +01:00

simplify Web3message UI, show during Publish flow

This commit is contained in:
Matthias Kretschmann 2019-07-10 16:34:16 +02:00
parent 8bb8111aca
commit 4ee5f19a9a
Signed by: m
GPG Key ID: 606EEEF3C479A91F
11 changed files with 44 additions and 30 deletions

View File

@ -6,22 +6,22 @@
align-items: center; align-items: center;
text-align: left; text-align: left;
> div { > div:first-of-type {
flex: 0 0 80%; flex: 0 0 80%;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
font-family: $font-family-monospace; font-family: $font-family-monospace;
font-size: $font-size-small; font-size: $font-size-small;
font-weight: $font-weight-bold;
} }
} }
.accountType { .accountType {
width: 100%; width: 100%;
margin-left: calc(1.5rem + #{$spacer / 3}); margin-left: calc(1.5rem + #{$spacer / 3});
font-size: $font-size-mini; font-size: $font-size-small;
font-weight: $font-weight-bold; color: $brand-grey-light;
opacity: .7;
} }
.blockies { .blockies {

View File

@ -2,6 +2,7 @@ import React from 'react'
import Dotdotdot from 'react-dotdotdot' import Dotdotdot from 'react-dotdotdot'
import { toDataUrl } from 'ethereum-blockies' import { toDataUrl } from 'ethereum-blockies'
import styles from './Account.module.scss' import styles from './Account.module.scss'
import WalletSelector from '../organisms/WalletSelector'
const Account = ({ const Account = ({
account, account,
@ -16,9 +17,10 @@ const Account = ({
<div className={styles.account}> <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> <Dotdotdot clamp={2}>{account}</Dotdotdot>
{isBurner && ( <div className={styles.accountType}>
<span className={styles.accountType}>Burner Wallet</span> {isBurner ? 'Burner Wallet' : 'MetaMask'}
)} <WalletSelector />
</div>
</div> </div>
) : ( ) : (
<em>No account selected</em> <em>No account selected</em>

View File

@ -41,7 +41,7 @@ $popoverWidth: 18rem;
} }
button { button {
font-size: $font-size-small; display: none;
} }
} }

View File

@ -2,9 +2,8 @@
.openLink { .openLink {
margin: 0; margin: 0;
margin-left: $spacer * 1.5;
font-size: $font-size-small !important; // stylelint-disable-line font-size: $font-size-small !important; // stylelint-disable-line
text-transform: uppercase; margin-left: $spacer / 4;
} }
.info { .info {
@ -45,10 +44,11 @@
.buttonTitle { .buttonTitle {
font-size: $font-size-base; font-size: $font-size-base;
margin-bottom: $spacer / 8; margin-bottom: $spacer / 2;
font-weight: $font-weight-bold; font-weight: $font-weight-bold;
} }
.buttonDescription { .buttonDescription {
font-size: $font-size-small; font-size: $font-size-small;
color: $brand-grey;
} }

View File

@ -41,7 +41,7 @@ export default class WalletSelector extends PureComponent<
</Button> </Button>
<Modal <Modal
title="Select wallet" title="Select wallet"
description="Select the wallet you want to use in the Commons Marketplace." description="Select the wallet you want to use in the Commons Marketplace. By default, we create a burner wallet in your browser."
isOpen={this.state.isModalOpen} isOpen={this.state.isModalOpen}
toggleModal={this.toggleModal} toggleModal={this.toggleModal}
> >

View File

@ -5,17 +5,16 @@
color: $brand-grey; color: $brand-grey;
position: relative; position: relative;
padding-top: $spacer / 2; padding-top: $spacer / 2;
padding-bottom: $spacer / 2;
text-align: left; text-align: left;
font-size: $font-size-small; font-size: $font-size-small;
}
> div:first-child { .account {
margin-bottom: $spacer / 2; margin-bottom: $spacer / 2;
background: $brand-white; background: $brand-white;
border-radius: $border-radius; border-radius: $border-radius;
border: 1px solid $brand-grey-lighter; border: 1px solid $brand-grey-lighter;
padding: $spacer / 2; padding: $spacer / 2;
}
} }
.text { .text {

View File

@ -3,10 +3,9 @@ import Account from '../atoms/Account'
import AccountStatus from '../molecules/AccountStatus' import AccountStatus from '../molecules/AccountStatus'
import styles from './Web3message.module.scss' import styles from './Web3message.module.scss'
import { User } from '../../context' import { User } from '../../context'
import WalletSelector from './WalletSelector'
import content from '../../data/web3message.json' import content from '../../data/web3message.json'
export default class Web3message extends PureComponent { export default class Web3message extends PureComponent<{ extended?: boolean }> {
public static contextType = User public static contextType = User
private message = () => { private message = () => {
@ -26,17 +25,23 @@ export default class Web3message extends PureComponent {
public render() { public render() {
return ( return (
<div className={styles.message}> <div className={styles.message}>
{this.context.account && ( <div className={styles.account}>
<Account <Account
account={this.context.account} account={this.context.account}
isBurner={this.context.isBurner} isBurner={this.context.isBurner}
/> />
</div>
{this.props.extended && (
<p className={styles.text}>
<AccountStatus className={styles.status} />
<em
dangerouslySetInnerHTML={{
__html: this.message()
}}
/>
</p>
)} )}
<p className={styles.text}>
<AccountStatus className={styles.status} />
<em dangerouslySetInnerHTML={{ __html: this.message() }} />
</p>
<WalletSelector />
</div> </div>
) )
} }

View File

@ -1,6 +1,6 @@
{ {
"noAccount": "No wallet selected. For publishing and downloading an asset you need to use one.", "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/'>learn how to 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. 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>.",
"hasMetaMaskWallet": "Connected with MetaMask.", "hasMetaMaskWallet": "Connected with MetaMask.",
"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.<br />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.<br />Please connect in MetaMask with Custom RPC <code>https://nile.dev-ocean.com</code>",

View File

@ -45,7 +45,7 @@ class About extends Component {
<h2 className={stylesVersionNumbers.versionsTitle}> <h2 className={stylesVersionNumbers.versionsTitle}>
Your Web3 Account Status Your Web3 Account Status
</h2> </h2>
<Web3message /> <Web3message extended />
<VersionNumbers /> <VersionNumbers />
</Content> </Content>
</Route> </Route>

View File

@ -24,3 +24,7 @@
margin-left: auto; margin-left: auto;
} }
} }
.account {
margin-top: $spacer * $line-height;
}

View File

@ -7,6 +7,7 @@ import { User } from '../../context'
import Files from './Files/' import Files from './Files/'
import StepRegisterContent from './StepRegisterContent' import StepRegisterContent from './StepRegisterContent'
import styles from './Step.module.scss' import styles from './Step.module.scss'
import Web3message from '../../components/organisms/Web3message'
interface Fields { interface Fields {
label: string label: string
@ -162,6 +163,9 @@ export default class Step extends PureComponent<StepProps, {}> {
</Button> </Button>
)} )}
</div> </div>
<div className={styles.account}>
<Web3message />
</div>
</> </>
) )
} }