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

address locked MetaMask account use case

This commit is contained in:
Matthias Kretschmann 2019-07-10 20:27:06 +02:00
parent 0befc3a597
commit 57db99049f
Signed by: m
GPG Key ID: 606EEEF3C479A91F
7 changed files with 66 additions and 47 deletions

View File

@ -8,13 +8,21 @@
> div:first-of-type {
flex: 0 0 80%;
}
}
.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 {
@ -77,4 +85,5 @@
display: inline-block;
margin-right: $spacer / 3;
margin-left: 0;
border: 1px solid $brand-grey-lighter;
}

View File

@ -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 (
<div className={styles.account}>
{account ? (
<>
<img
className={styles.blockies}
src={blockies}
alt="Blockies"
/>
<Dotdotdot clamp={2}>{account}</Dotdotdot>
<Dotdotdot className={styles.accountId} clamp={2}>
{account}
</Dotdotdot>
</>
) : (
<>
<span className={styles.blockies} />
<em className={styles.noAccount}>
No account selected
</em>
<Button
link
className={styles.unlock}
onClick={() => loginMetamask()}
>
Unlock Account
</Button>
</>
)}
<div className={styles.accountType}>
{isBurner ? (
<button
@ -43,9 +65,7 @@ export default class Account extends PureComponent<
title="Show More Account Info"
>
<Caret
className={
this.state.isAccountOpen ? styles.open : ''
}
className={isAccountInfoOpen ? styles.open : ''}
/>{' '}
Burner Wallet
</button>
@ -55,7 +75,7 @@ export default class Account extends PureComponent<
<WalletSelector />
</div>
{isBurner && this.state.isAccountOpen && (
{isBurner && isAccountInfoOpen && (
<div className={styles.seedphrase}>
<code>{seedphrase}</code>
<p className={styles.seedphraseHelp}>
@ -64,8 +84,6 @@ export default class Account extends PureComponent<
</div>
)}
</div>
) : (
<em>No account selected</em>
)
}
}

View File

@ -41,8 +41,11 @@ $popoverWidth: 18rem;
}
button {
svg,
&:last-child {
display: none;
}
}
}
.balance {

View File

@ -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 (
<div
@ -25,7 +19,7 @@ export default class Popover extends PureComponent<{
{
<>
<div className={styles.popoverInfoline}>
<Account account={account} isBurner={isBurner} />
<Account />
</div>
{account && balance && (

View File

@ -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 (
<div className={styles.message}>
<div className={styles.account}>
<Account
account={this.context.account}
isBurner={this.context.isBurner}
extended={this.props.extended}
/>
<Account />
</div>
{(network !== 'Pacific' || this.props.extended) && (

View File

@ -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. <strong>Never use this burner wallet to send or receive any tokens.</strong> 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. 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 <code>https://pacific.oceanprotocol.com</code>",
"wrongNetworkNile": "Not connected to Nile network. Please connect in MetaMask with Custom RPC <code>https://nile.dev-ocean.com</code>",
"wrongNetworkDuero": "Not connected to Duero network. Please connect in MetaMask with Custom RPC <code>https://duero.dev-ocean.com</code>",

View File

@ -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'