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

adapt messaging for wallet types, output wallet type

Browse Source
This commit is contained in:
Matthias Kretschmann 2019-07-10 01:31:51 +02:00
parent ad454b9f8a
commit 8d23868a9d
Signed by: m
GPG Key ID: 606EEEF3C479A91F
16 changed files with 103 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
client/src/components/atoms/Account.module.scss
View File

@ -2,10 +2,12 @@
.account {
display: flex;
flex-wrap: wrap;
align-items: center;
text-align: left;
> div {
flex: 0 0 80%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@ -14,6 +16,12 @@
}
}
.accountType {
width: 100%;
margin-left: calc(1.5rem + #{$spacer / 3});
font-size: $font-size-mini;
}
.blockies {
width: 1.5rem;
height: 1.5rem;

11
client/src/components/atoms/Account.tsx
View File

@ -3,13 +3,22 @@ import Dotdotdot from 'react-dotdotdot'
import { toDataUrl } from 'ethereum-blockies'
import styles from './Account.module.scss'
const Account = ({ account }: { account: string }) => {
const Account = ({
account,
isBurner
}: {
account: string
isBurner: boolean
}) => {
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>
{isBurner && (
<span className={styles.accountType}>Burner Wallet</span>
)}
</div>
) : (
<em>No account selected</em>

4
client/src/components/molecules/AccountStatus/Popover.module.scss
View File

@ -50,6 +50,10 @@ $popoverWidth: 18rem;
margin-left: $spacer / 2;
white-space: nowrap;
strong {
color: $brand-grey-lighter;
}
&:first-child {
margin-left: 0;
}

14
client/src/components/molecules/AccountStatus/Popover.tsx
View File

@ -4,11 +4,17 @@ import { User } from '../../../context'
import styles from './Popover.module.scss'
export default class Popover extends PureComponent<{
forwardedRef: (ref: HTMLElement | null) => void
style: React.CSSProperties
forwardedRef?: (ref: HTMLElement | null) => void
style?: React.CSSProperties
}> {
public render() {
const { account, balance, network, isOceanNetwork } = this.context
const {
account,
balance,
network,
isOceanNetwork,
isBurner
} = this.context
return (
<div
@ -19,7 +25,7 @@ export default class Popover extends PureComponent<{
{
<>
<div className={styles.popoverInfoline}>
<Account account={account} />
<Account account={account} isBurner={isBurner} />
</div>
{account && balance && (

5
client/src/components/molecules/VersionNumbers/index.module.scss
View File

@ -1,12 +1,9 @@
@import '../../../styles/variables';
.versions {
margin-top: $spacer * 2;
}
.versionsTitle {
font-size: $font-size-large;
margin-bottom: $spacer / 2;
margin-top: $spacer * 2;
}
.versionsMinimal {

6
client/src/components/molecules/VersionNumbers/index.tsx
View File

@ -149,13 +149,13 @@ export default class VersionNumbers extends PureComponent<
return minimal ? (
<this.MinimalOutput />
) : (
<div className={styles.versions} id="#oceanversions">
<h2 className={styles.versionsTitle}>
<>
<h2 className={styles.versionsTitle} id="#oceanversions">
Ocean Components Status
</h2>
<VersionStatus status={this.state.status} />
<VersionTable data={this.state} />
</div>
</>
)
}
}

2
client/src/components/organisms/Header.tsx
View File

@ -2,7 +2,6 @@ import React, { PureComponent } from 'react'
import { NavLink } from 'react-router-dom'
import { ReactComponent as Logo } from '@oceanprotocol/art/logo/logo.svg'
import AccountStatus from '../molecules/AccountStatus'
import WalletSelector from './WalletSelector'
import styles from './Header.module.scss'
import menu from '../../data/menu.json'
@ -33,7 +32,6 @@ export default class Header extends PureComponent {
{menu.map(item => (
<MenuItem key={item.title} item={item} />
))}
<WalletSelector />
<AccountStatus className={styles.accountStatus} />
</nav>
</div>

8
client/src/components/organisms/WalletSelector.module.scss
View File

@ -1,13 +1,9 @@
@import '../../styles/variables';
.actions {
text-align: right;
margin-top: $spacer;
}
.openLink {
margin: 0;
font-size: $font-size-small;
margin-top: $spacer / 2;
margin-left: $spacer;
}
.info {

13
client/src/components/organisms/WalletSelector.tsx
View File

@ -6,10 +6,10 @@ import Button from '../atoms/Button'
export default class WalletSelector extends PureComponent<
{},
{
isModalOpen: boolean
}
{ isModalOpen: boolean }
> {
public static contextType = User
public state = {
isModalOpen: false
}
@ -25,12 +25,13 @@ export default class WalletSelector extends PureComponent<
private loginMetamask = () => {
this.context.loginMetamask()
this.context.logoutBurnerWallet()
this.toggleModal()
}
public render() {
return (
<div className={styles.actions}>
<>
<Button
link
className={styles.openLink}
@ -53,9 +54,7 @@ export default class WalletSelector extends PureComponent<
</button>
</div>
</Modal>
</div>
</>
)
}
}
WalletSelector.contextType = User

10
client/src/components/organisms/Web3message.module.scss
View File

@ -11,12 +11,14 @@
text-align: left;
}
.warnings {
padding-left: $spacer;
.text {
margin-left: $spacer;
display: inline-block;
}
.status {
margin-left: -($spacer);
margin-right: $spacer / 2;
position: absolute;
left: 0;
top: $spacer / 1.5;
padding: 0;
}

58
client/src/components/organisms/Web3message.tsx
View File

@ -7,33 +7,39 @@ import WalletSelector from './WalletSelector'
import content from '../../data/web3message.json'
export default class Web3message extends PureComponent {
private message = (message: string, account?: string) => (
<div className={styles.message}>
{account ? (
<Account account={account} />
) : (
<div className={styles.warnings}>
<AccountStatus className={styles.status} />
<span dangerouslySetInnerHTML={{ __html: message }} />{' '}
<WalletSelector />
</div>
)}
</div>
)
public static contextType = User
private message = () => {
const { isOceanNetwork, isLogged, isBurner } = this.context
return !isOceanNetwork && !isBurner
? content.wrongNetwork
: !isLogged
? content.noAccount
: isBurner
? content.hasBurnerWallet
: isLogged
? content.hasMetaMaskWallet
: ''
}
public render() {
const { isOceanNetwork, isLogged, isBurner, account } = this.context
return !isOceanNetwork
? this.message(content.wrongNetwork)
: !isLogged
? this.message(content.noAccount)
: isBurner
? this.message(content.burnerWallet)
: isLogged
? this.message(content.hasAccount, account)
: null
return (
<div className={styles.message}>
{this.context.account ? (
<Account
account={this.context.account}
isBurner={this.context.isBurner}
/>
) : (
<AccountStatus className={styles.status} />
)}
<em
className={styles.text}
dangerouslySetInnerHTML={{ __html: this.message() }}
/>{' '}
<WalletSelector />
</div>
)
}
}
Web3message.contextType = User

2
client/src/context/BurnerWalletProvider.ts
View File

@ -1,7 +1,7 @@
import Web3 from 'web3'
import { nodeUri } from '../config'
import bip39 from 'bip39'
import HDWalletProvider from 'truffle-hdwallet-provider'
const bip39 = require('bip39') // eslint-disable-line @typescript-eslint/no-var-requires
export class BurnerWalletProvider {
private web3: Web3

7
client/src/context/UserProvider.tsx
View File

@ -62,6 +62,7 @@ interface UserProviderState {
requestFromFaucet(account: string): Promise<FaucetResponse>
loginMetamask(): Promise<any>
loginBurnerWallet(): Promise<any>
logoutBurnerWallet(): Promise<any>
message: string
}
@ -98,6 +99,11 @@ export default class UserProvider extends PureComponent<{}, UserProviderState> {
)
}
private logoutBurnerWallet = async () => {
const burnerwalletProvider = new BurnerWalletProvider()
await burnerwalletProvider.logout()
}
public state = {
isLogged: false,
isBurner: false,
@ -114,6 +120,7 @@ export default class UserProvider extends PureComponent<{}, UserProviderState> {
requestFromFaucet: () => requestFromFaucet(''),
loginMetamask: () => this.loginMetamask(),
loginBurnerWallet: () => this.loginBurnerWallet(),
logoutBurnerWallet: () => this.logoutBurnerWallet(),
message: 'Connecting to Ocean...'
}

4
client/src/data/web3message.json
View File

@ -1,6 +1,6 @@
{
"noAccount": "No wallet selected. For publishing and downloading an asset you need to use one.",
"burnerWallet": "You are using temporary burner wallet. Improve your security by migrating to Metamask",
"hasAccount": "",
"hasBurnerWallet": "<p>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.</p>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.",
"wrongNetwork": "Not connected to Pacific network.<br />Please connect in MetaMask with Custom RPC <code>https://pacific.oceanprotocol.com</code>"
}

6
client/src/routes/About.tsx
View File

@ -2,6 +2,8 @@ import React, { Component } from 'react'
import Route from '../components/templates/Route'
import Content from '../components/atoms/Content'
import VersionNumbers from '../components/molecules/VersionNumbers'
import Web3message from '../components/organisms/Web3message'
import stylesVersionNumbers from '../components/molecules/VersionNumbers/index.module.scss'
class About extends Component {
public render() {
@ -37,6 +39,10 @@ class About extends Component {
</Content>
<Content>
<h2 className={stylesVersionNumbers.versionsTitle}>
Your Web3 Account Status
</h2>
<Web3message />
<VersionNumbers />
</Content>
</Route>

5
client/src/styles/global.scss
View File

@ -140,6 +140,11 @@ em,
font-style: italic;
}
small {
font-size: $font-size-small;
display: inline-block;
}
abbr[title],
dfn {
text-transform: none;