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:
parent
8bb8111aca
commit
4ee5f19a9a
GPG Key ID:
606EEEF3C479A91F
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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 = ({
|
|||
<div className={styles.account}>
|
||||
<img className={styles.blockies} src={blockies} alt="Blockies" />
|
||||
<Dotdotdot clamp={2}>{account}</Dotdotdot>
|
||||
{isBurner && (
|
||||
<span className={styles.accountType}>Burner Wallet</span>
|
||||
)}
|
||||
<div className={styles.accountType}>
|
||||
{isBurner ? 'Burner Wallet' : 'MetaMask'}
|
||||
<WalletSelector />
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<em>No account selected</em>
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@ $popoverWidth: 18rem;
|
|||
}
|
||||
|
||||
button {
|
||||
font-size: $font-size-small;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@ export default class WalletSelector extends PureComponent<
|
|||
</Button>
|
||||
<Modal
|
||||
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}
|
||||
toggleModal={this.toggleModal}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<div className={styles.message}>
|
||||
{this.context.account && (
|
||||
<div className={styles.account}>
|
||||
<Account
|
||||
account={this.context.account}
|
||||
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>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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, <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.",
|
||||
"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>",
|
||||
|
|
|
|||
|
|
@ -45,7 +45,7 @@ class About extends Component {
|
|||
<h2 className={stylesVersionNumbers.versionsTitle}>
|
||||
Your Web3 Account Status
|
||||
</h2>
|
||||
<Web3message />
|
||||
<Web3message extended />
|
||||
<VersionNumbers />
|
||||
</Content>
|
||||
</Route>
|
||||
|
|
|
|||
|
|
@ -24,3 +24,7 @@
|
|||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.account {
|
||||
margin-top: $spacer * $line-height;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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<StepProps, {}> {
|
|||
</Button>
|
||||
)}
|
||||
</div>
|
||||
<div className={styles.account}>
|
||||
<Web3message />
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user