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:
parent
0befc3a597
commit
57db99049f
GPG Key ID:
606EEEF3C479A91F
@ -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;
|
||||
}
|
||||
|
||||
@ -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}>
|
||||
<img
|
||||
className={styles.blockies}
|
||||
src={blockies}
|
||||
alt="Blockies"
|
||||
/>
|
||||
<Dotdotdot clamp={2}>{account}</Dotdotdot>
|
||||
{account ? (
|
||||
<>
|
||||
<img
|
||||
className={styles.blockies}
|
||||
src={blockies}
|
||||
alt="Blockies"
|
||||
/>
|
||||
<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>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
@ -41,7 +41,10 @@ $popoverWidth: 18rem;
|
||||
}
|
||||
|
||||
button {
|
||||
display: none;
|
||||
svg,
|
||||
&:last-child {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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 && (
|
||||
|
||||
@ -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) && (
|
||||
|
||||
@ -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>",
|
||||
|
||||
@ -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'
|
||||
|
||||
Loading…
Reference in New Issue
Block a user