mirror of
https://github.com/oceanprotocol/commons.git
synced 2023-03-15 18:03:00 +01:00
output seed prase for burner wallet account, messaging tweaks
This commit is contained in:
parent
87c54d2cb8
commit
0befc3a597
GPG Key ID:
606EEEF3C479A91F
@ -13,7 +13,7 @@
|
||||
text-overflow: ellipsis;
|
||||
font-family: $font-family-monospace;
|
||||
font-size: $font-size-small;
|
||||
font-weight: $font-weight-bold;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
@ -21,9 +21,55 @@
|
||||
width: 100%;
|
||||
margin-left: calc(1.5rem + #{$spacer / 3});
|
||||
font-size: $font-size-small;
|
||||
font-weight: $font-weight-bold;
|
||||
color: $brand-grey-light;
|
||||
}
|
||||
|
||||
.toggle {
|
||||
background: none;
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
font-weight: inherit;
|
||||
color: inherit;
|
||||
border: none;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
|
||||
svg {
|
||||
display: inline-block;
|
||||
fill: currentColor;
|
||||
margin-right: $spacer / 8;
|
||||
transition: .2s ease-out;
|
||||
}
|
||||
}
|
||||
|
||||
.open {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.seedphrase {
|
||||
margin-top: $spacer / 2;
|
||||
margin-left: calc(1.5rem + #{$spacer / 4});
|
||||
margin-right: calc(1.5rem + #{$spacer / 4});
|
||||
|
||||
code {
|
||||
display: block;
|
||||
text-align: center;
|
||||
padding: $spacer / 2 $spacer;
|
||||
border-radius: $border-radius;
|
||||
background: $body-background;
|
||||
border: 1px solid $brand-grey-lighter;
|
||||
margin-bottom: $spacer / 4;
|
||||
word-break: normal;
|
||||
}
|
||||
}
|
||||
|
||||
.seedphraseHelp {
|
||||
color: $brand-grey-light;
|
||||
font-size: $font-size-small;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.blockies {
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
|
||||
@ -1,30 +1,71 @@
|
||||
import React from 'react'
|
||||
import React, { PureComponent } from 'react'
|
||||
import Dotdotdot from 'react-dotdotdot'
|
||||
import { toDataUrl } from 'ethereum-blockies'
|
||||
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'
|
||||
|
||||
const Account = ({
|
||||
account,
|
||||
isBurner
|
||||
}: {
|
||||
account: string
|
||||
isBurner: boolean
|
||||
}) => {
|
||||
const blockies = account && toDataUrl(account)
|
||||
export default class Account extends PureComponent<
|
||||
{
|
||||
account: string
|
||||
isBurner: boolean
|
||||
extended?: boolean
|
||||
},
|
||||
{ isAccountOpen: boolean }
|
||||
> {
|
||||
public state = {
|
||||
isAccountOpen: false
|
||||
}
|
||||
|
||||
return account && blockies ? (
|
||||
<div className={styles.account}>
|
||||
<img className={styles.blockies} src={blockies} alt="Blockies" />
|
||||
<Dotdotdot clamp={2}>{account}</Dotdotdot>
|
||||
<div className={styles.accountType}>
|
||||
{isBurner ? 'Burner Wallet' : 'MetaMask'}
|
||||
<WalletSelector />
|
||||
private toggleAccountInfo() {
|
||||
this.setState({ isAccountOpen: !this.state.isAccountOpen })
|
||||
}
|
||||
|
||||
public render() {
|
||||
const { account, isBurner, extended } = this.props
|
||||
const seedphrase = localStorage.getItem('seedphrase') as string
|
||||
|
||||
const blockies = account && toDataUrl(account)
|
||||
return account && blockies ? (
|
||||
<div className={styles.account}>
|
||||
<img
|
||||
className={styles.blockies}
|
||||
src={blockies}
|
||||
alt="Blockies"
|
||||
/>
|
||||
<Dotdotdot clamp={2}>{account}</Dotdotdot>
|
||||
<div className={styles.accountType}>
|
||||
{isBurner ? (
|
||||
<button
|
||||
className={styles.toggle}
|
||||
onClick={() => this.toggleAccountInfo()}
|
||||
title="Show More Account Info"
|
||||
>
|
||||
<Caret
|
||||
className={
|
||||
this.state.isAccountOpen ? styles.open : ''
|
||||
}
|
||||
/>{' '}
|
||||
Burner Wallet
|
||||
</button>
|
||||
) : (
|
||||
'MetaMask'
|
||||
)}
|
||||
<WalletSelector />
|
||||
</div>
|
||||
|
||||
{isBurner && this.state.isAccountOpen && (
|
||||
<div className={styles.seedphrase}>
|
||||
<code>{seedphrase}</code>
|
||||
<p className={styles.seedphraseHelp}>
|
||||
{content.seedphrase}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<em>No account selected</em>
|
||||
)
|
||||
) : (
|
||||
<em>No account selected</em>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default Account
|
||||
|
||||
@ -11,5 +11,13 @@
|
||||
margin-top: -.1rem;
|
||||
padding-right: .5rem;
|
||||
cursor: pointer;
|
||||
color: $brand-grey-light;
|
||||
|
||||
svg {
|
||||
fill: $brand-grey-light;
|
||||
transition: .2s ease-out;
|
||||
}
|
||||
}
|
||||
|
||||
.open {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
@ -4,6 +4,7 @@ import slugify from '@sindresorhus/slugify'
|
||||
import styles from './VersionTableRow.module.scss'
|
||||
import { VersionTableContracts, VersionTableCommons } from './VersionTable'
|
||||
import VersionNumber from './VersionNumber'
|
||||
import { ReactComponent as Caret } from '../../../img/caret.svg'
|
||||
|
||||
const VersionTableRow = ({ value }: { value: any }) => {
|
||||
const collapseStyles = {
|
||||
@ -26,11 +27,7 @@ const VersionTableRow = ({ value }: { value: any }) => {
|
||||
<td>
|
||||
{(value.name === 'Commons' || value.contracts) && (
|
||||
<button className={styles.handle} {...getToggleProps()}>
|
||||
{isOpen ? (
|
||||
<span>▼</span>
|
||||
) : (
|
||||
<span>►</span>
|
||||
)}
|
||||
<Caret className={isOpen ? styles.open : ''} />
|
||||
</button>
|
||||
)}
|
||||
<a
|
||||
|
||||
@ -1,9 +1,8 @@
|
||||
@import '../../styles/variables';
|
||||
|
||||
.openLink {
|
||||
margin: 0;
|
||||
font-size: $font-size-small !important; // stylelint-disable-line
|
||||
margin-left: $spacer / 4;
|
||||
margin-left: $spacer / 2;
|
||||
}
|
||||
|
||||
.info {
|
||||
|
||||
@ -23,16 +23,19 @@ export default class Web3message extends PureComponent<{ extended?: boolean }> {
|
||||
}
|
||||
|
||||
public render() {
|
||||
const { network } = this.context
|
||||
|
||||
return (
|
||||
<div className={styles.message}>
|
||||
<div className={styles.account}>
|
||||
<Account
|
||||
account={this.context.account}
|
||||
isBurner={this.context.isBurner}
|
||||
extended={this.props.extended}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{this.props.extended && (
|
||||
{(network !== 'Pacific' || this.props.extended) && (
|
||||
<div className={styles.text}>
|
||||
<AccountStatus className={styles.status} />
|
||||
<em
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
{
|
||||
"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/'>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>",
|
||||
"wrongNetworkDuero": "Not connected to Duero network.<br />Please connect in MetaMask with Custom RPC <code>https://duero.dev-ocean.com</code>"
|
||||
"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.",
|
||||
"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>",
|
||||
"seedphrase": "You can use this seed phrase to import this burner wallet account into other wallets, e.g. MetaMask."
|
||||
}
|
||||
|
||||
3
client/src/img/caret.svg
Normal file
3
client/src/img/caret.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="9" height="10" viewBox="0 0 9 10">
|
||||
<polygon points="9 5 0 10 0 0"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 124 B |
@ -326,11 +326,6 @@ export default class Publish extends Component<{}, PublishState> {
|
||||
description={`Publish a new data set into the Ocean Protocol ${market.network} Network.`}
|
||||
>
|
||||
<Content>
|
||||
{(!this.context.isLogged ||
|
||||
!this.context.isOceanNetwork) && (
|
||||
<Web3message />
|
||||
)}
|
||||
|
||||
<Progress
|
||||
steps={steps}
|
||||
currentStep={this.state.currentStep}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user