From 1e1dac4f8f9940ec1d3349f61b646ca3d50f2e8e Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Fri, 5 Apr 2019 15:39:32 +0200 Subject: [PATCH 1/5] refactor popover --- .../molecules/AccountStatus/Popover.tsx | 67 +++++++++---------- 1 file changed, 30 insertions(+), 37 deletions(-) diff --git a/client/src/components/molecules/AccountStatus/Popover.tsx b/client/src/components/molecules/AccountStatus/Popover.tsx index e8c3541..c0af1bf 100644 --- a/client/src/components/molecules/AccountStatus/Popover.tsx +++ b/client/src/components/molecules/AccountStatus/Popover.tsx @@ -1,59 +1,52 @@ -import React from 'react' +import React, { PureComponent } from 'react' import { User } from '../../../context/User' import styles from './Popover.module.scss' -const Popover = ({ - forwardedRef, - style -}: { +export default class Popover extends PureComponent<{ forwardedRef: (ref: HTMLElement | null) => void style: React.CSSProperties -}) => ( -
- - {states => - states.account && - states.balance && ( +}> { + public render() { + const { account, balance, network } = this.context + return ( +
+ {account && balance && (
- {(states.balance.eth / 1e18) - .toFixed(3) - .slice(0, -1)} + {(balance.eth / 1e18).toFixed(3).slice(0, -1)} {' '} ETH - {states.balance.ocn} OCEAN + {balance.ocn} OCEAN
- ) - } - + )} -
- - {states => - states.account ? ( - - {states.account} +
+ {account ? ( + + {account} ) : ( No account selected - ) - } - -
+ )} +
-
- - {states => states.network && states.network} - -
-
-) +
+ {network && network} +
+
+ ) + } +} -export default Popover +Popover.contextType = User From ec91010604b11b026df3a234cd47f72b034f632a Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Fri, 5 Apr 2019 15:45:44 +0200 Subject: [PATCH 2/5] show message to non-Web3 users --- .../molecules/AccountStatus/Popover.tsx | 27 ++++++++++++------- 1 file changed, 17 insertions(+), 10 deletions(-) diff --git a/client/src/components/molecules/AccountStatus/Popover.tsx b/client/src/components/molecules/AccountStatus/Popover.tsx index c0af1bf..4dbfeee 100644 --- a/client/src/components/molecules/AccountStatus/Popover.tsx +++ b/client/src/components/molecules/AccountStatus/Popover.tsx @@ -7,7 +7,7 @@ export default class Popover extends PureComponent<{ style: React.CSSProperties }> { public render() { - const { account, balance, network } = this.context + const { account, balance, network, isWeb3 } = this.context return (
)} -
- {account ? ( - - {account} - - ) : ( - No account selected - )} -
+ {!isWeb3 ? ( +
+ No Web3 detected. Use a browser with MetaMask installed + to publish assets. +
+ ) : ( +
+ {account ? ( + + {account} + + ) : ( + No account selected + )} +
+ )}
{network && network} From 50cafa5c721d368b6e15570194edd9f551a42540 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Fri, 5 Apr 2019 15:46:46 +0200 Subject: [PATCH 3/5] style tweaks --- .../src/components/molecules/AccountStatus/Indicator.module.scss | 1 + .../src/components/molecules/AccountStatus/Popover.module.scss | 1 + 2 files changed, 2 insertions(+) diff --git a/client/src/components/molecules/AccountStatus/Indicator.module.scss b/client/src/components/molecules/AccountStatus/Indicator.module.scss index 7d82117..09a2b63 100644 --- a/client/src/components/molecules/AccountStatus/Indicator.module.scss +++ b/client/src/components/molecules/AccountStatus/Indicator.module.scss @@ -4,6 +4,7 @@ display: inline-block; position: relative; cursor: help; + padding: .5rem; } // default: red square diff --git a/client/src/components/molecules/AccountStatus/Popover.module.scss b/client/src/components/molecules/AccountStatus/Popover.module.scss index 0860ed9..80ca282 100644 --- a/client/src/components/molecules/AccountStatus/Popover.module.scss +++ b/client/src/components/molecules/AccountStatus/Popover.module.scss @@ -49,6 +49,7 @@ $popoverWidth: 18rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; + font-family: $font-family-monospace; } .balance { From 09281aa8e32747bc03d565a38fde0ac903d31943 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Fri, 5 Apr 2019 16:07:46 +0200 Subject: [PATCH 4/5] add isNile check --- client/src/App.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/client/src/App.tsx b/client/src/App.tsx index a6c0be0..f567646 100644 --- a/client/src/App.tsx +++ b/client/src/App.tsx @@ -31,6 +31,7 @@ interface AppState { isLogged: boolean isLoading: boolean isWeb3: boolean + isNile: boolean account: string balance: { eth: number @@ -82,6 +83,7 @@ class App extends Component<{}, AppState> { isLogged: false, isLoading: true, isWeb3: false, + isNile: false, balance: { eth: 0, ocn: 0 @@ -167,7 +169,8 @@ class App extends Component<{}, AppState> { const accounts = await ocean.accounts.list() const balance = await accounts[0].getBalance() const network = await ocean.keeper.getNetworkName() - this.setState({ balance, network }) + const isNile = network === 'Nile' + this.setState({ balance, network, isNile }) } catch (e) { Logger.log('ocean/balance error', e) this.setState({ From 9ba5f7c12f20bcca679cea6aacb0beb588158636 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Fri, 5 Apr 2019 16:27:04 +0200 Subject: [PATCH 5/5] handle wrong network use case --- .../molecules/AccountStatus/Indicator.tsx | 2 +- .../molecules/AccountStatus/Popover.tsx | 34 +++++++++++-------- .../src/components/organisms/AssetsUser.tsx | 1 + .../organisms/Web3message.module.scss | 1 + .../src/components/organisms/Web3message.tsx | 13 +++++++ client/src/context/User.ts | 1 + 6 files changed, 37 insertions(+), 15 deletions(-) diff --git a/client/src/components/molecules/AccountStatus/Indicator.tsx b/client/src/components/molecules/AccountStatus/Indicator.tsx index 8deeacb..5bfa917 100644 --- a/client/src/components/molecules/AccountStatus/Indicator.tsx +++ b/client/src/components/molecules/AccountStatus/Indicator.tsx @@ -22,7 +22,7 @@ const Indicator = ({ {states => !states.isWeb3 ? ( - ) : !states.isLogged ? ( + ) : !states.isLogged || !states.isNile ? ( ) : states.isLogged ? ( diff --git a/client/src/components/molecules/AccountStatus/Popover.tsx b/client/src/components/molecules/AccountStatus/Popover.tsx index 4dbfeee..435e073 100644 --- a/client/src/components/molecules/AccountStatus/Popover.tsx +++ b/client/src/components/molecules/AccountStatus/Popover.tsx @@ -7,7 +7,7 @@ export default class Popover extends PureComponent<{ style: React.CSSProperties }> { public render() { - const { account, balance, network, isWeb3 } = this.context + const { account, balance, network, isWeb3, isNile } = this.context return (
) : ( -
- {account ? ( - - {account} - - ) : ( - No account selected - )} -
+ <> +
+ {account ? ( + + {account} + + ) : ( + No account selected + )} +
+
+ {network && !isNile + ? 'Please connect to Custom RPC\n https://nile.dev-ocean.com' + : network && `Connected to ${network} network`} +
+ )} - -
- {network && network} -
) } diff --git a/client/src/components/organisms/AssetsUser.tsx b/client/src/components/organisms/AssetsUser.tsx index 4089868..cc81ee7 100644 --- a/client/src/components/organisms/AssetsUser.tsx +++ b/client/src/components/organisms/AssetsUser.tsx @@ -48,6 +48,7 @@ export default class AssetsUser extends PureComponent< public render() { return ( + this.context.isNile && this.context.account && (
{this.props.recent && ( diff --git a/client/src/components/organisms/Web3message.module.scss b/client/src/components/organisms/Web3message.module.scss index 5ff7574..a9df96a 100644 --- a/client/src/components/organisms/Web3message.module.scss +++ b/client/src/components/organisms/Web3message.module.scss @@ -20,4 +20,5 @@ .status { margin-left: -($spacer); margin-right: $spacer / 3; + padding: 0; } diff --git a/client/src/components/organisms/Web3message.tsx b/client/src/components/organisms/Web3message.tsx index 0aa29fd..34b8bec 100644 --- a/client/src/components/organisms/Web3message.tsx +++ b/client/src/components/organisms/Web3message.tsx @@ -11,6 +11,8 @@ export default class Web3message extends PureComponent { {states => !states.isWeb3 ? this.noWeb3() + : !states.isNile + ? this.wrongNetwork(states.network) : !states.isLogged ? this.unlockAccount(states) : states.isLogged @@ -57,4 +59,15 @@ export default class Web3message extends PureComponent {
) } + + public wrongNetwork(network: string) { + return ( +
+ Not connected to + Nile network, but to {network}.
+ Please connect in MetaMask with Custom RPC{' '} + {`https://nile.dev-ocean.com`} +
+ ) + } } diff --git a/client/src/context/User.ts b/client/src/context/User.ts index 6a36c98..ac79134 100644 --- a/client/src/context/User.ts +++ b/client/src/context/User.ts @@ -4,6 +4,7 @@ export const User = React.createContext({ isLogged: false, isLoading: false, isWeb3: false, + isNile: false, account: '', web3: {}, ocean: {},