oceanprotocol
/
commons
mirror of https://github.com/oceanprotocol/commons.git
1
0
Fork 0
Code Releases Activity

Ocean network detection, remove isOceanNetwork

This commit is contained in:
Matthias Kretschmann 2019-07-11 15:45:49 +02:00
parent 4f051deefa
commit e488b9f001
Signed by: m
GPG Key ID: 606EEEF3C479A91F
15 changed files with 108 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/__mocks__/user-mock.ts
View File

@ -4,7 +4,6 @@ const userMock = {
isLogged: false,
isLoading: false,
isBurner: false,
isOceanNetwork: false,
account: '',
web3: {},
...oceanMock,
@ -20,7 +19,6 @@ const userMockConnected = {
isLogged: true,
isLoading: false,
isBurner: false,
isOceanNetwork: true,
account: '0xxxxxx',
web3: {},
...oceanMock,

22
client/src/components/molecules/AccountStatus/Indicator.tsx
View File

@ -1,6 +1,6 @@
import React from 'react'
import cx from 'classnames'
import { User } from '../../../context'
import { User, Market } from '../../../context'
import styles from './Indicator.module.scss'
const Indicator = ({
@ -19,13 +19,19 @@ const Indicator = ({
ref={forwardedRef}
>
<User.Consumer>
{states =>
!states.isLogged || !states.isOceanNetwork ? (
<span className={styles.statusIndicatorCloseEnough} />
) : states.isLogged ? (
<span className={styles.statusIndicatorActive} />
) : null
}
{user => (
<Market.Consumer>
{market =>
!user.isLogged || !market.networkMatch ? (
<span
className={styles.statusIndicatorCloseEnough}
/>
) : user.isLogged ? (
<span className={styles.statusIndicatorActive} />
) : null
}
</Market.Consumer>
)}
</User.Consumer>
</div>
)

1
client/src/components/molecules/AccountStatus/Popover.test.tsx
View File

@ -38,7 +38,6 @@ describe('Popover', () => {
<User.Provider
value={{
...userMockConnected,
isOceanNetwork: false,
network: '1'
}}
>

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

@ -1,14 +1,16 @@
import React, { PureComponent } from 'react'
import Account from '../../atoms/Account'
import { User } from '../../../context'
import { User, Market } from '../../../context'
import styles from './Popover.module.scss'
export default class Popover extends PureComponent<{
forwardedRef?: (ref: HTMLElement | null) => void
style?: React.CSSProperties
}> {
public static contextType = User
public render() {
const { account, balance, network, isOceanNetwork } = this.context
const { account, balance, network } = this.context
return (
<div
@ -41,16 +43,28 @@ export default class Popover extends PureComponent<{
</div>
)}
<div className={styles.popoverInfoline}>
{network && !isOceanNetwork
? 'Please connect to Custom RPC\n https://pacific.oceanprotocol.com'
: network && `Connected to ${network} network`}
</div>
<Market.Consumer>
{market => (
<div className={styles.popoverInfoline}>
{network && !market.networkMatch
? `Please connect to Custom RPC
${
market.network === 'Pacific'
? 'https://pacific.oceanprotocol.com'
: market.network === 'Nile'
? 'https://nile.dev-ocean.com'
: market.network === 'Duero'
? 'https://duero.dev-ocean.com'
: 'http://localhost:8545'
}`
: network &&
`Connected to ${network} network`}
</div>
)}
</Market.Consumer>
</>
}
</div>
)
}
}
Popover.contextType = User

3
client/src/components/organisms/AssetsUser.tsx
View File

@ -57,10 +57,9 @@ export default class AssetsUser extends PureComponent<
}
public render() {
const { account, isOceanNetwork } = this.context
const { account } = this.context
return (
isOceanNetwork &&
account && (
<div className={styles.assetsUser}>
{this.props.recent && (

6
client/src/components/organisms/Web3message.test.tsx
View File

@ -16,9 +16,7 @@ describe('Web3message', () => {
it('renders with wrongNetwork message', () => {
const { container } = render(
<User.Provider
value={{ ...userMockConnected, isOceanNetwork: false }}
>
<User.Provider value={{ ...userMockConnected }}>
<Web3message extended />
</User.Provider>
)
@ -29,7 +27,7 @@ describe('Web3message', () => {
it('renders with noAccount message', () => {
const { container } = render(
<User.Provider value={{ ...userMock, isOceanNetwork: true }}>
<User.Provider value={{ ...userMock }}>
<Web3message extended />
</User.Provider>
)

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

@ -2,28 +2,51 @@ import React, { PureComponent } from 'react'
import Account from '../atoms/Account'
import AccountStatus from '../molecules/AccountStatus'
import styles from './Web3message.module.scss'
import { User } from '../../context'
import { User, Market } from '../../context'
import content from '../../data/web3message.json'
export default class Web3message extends PureComponent<{ extended?: boolean }> {
public static contextType = User
public static contextType = Market
private message = () => {
const { isOceanNetwork, isLogged, isBurner, network } = this.context
return !isOceanNetwork && !isBurner
private messageOceanNetwork = () =>
this.context.network === 'Pacific'
? content.wrongNetworkPacific
: !isLogged
? content.noAccount
: isBurner
? content.hasBurnerWallet
: isLogged
? content.hasMetaMaskWallet.replace('NETWORK', network)
: ''
: this.context.network === 'Nile'
? content.wrongNetworkNile
: this.context.network === 'Duero'
? content.wrongNetworkDuero
: content.wrongNetworkSpree
private Message = () => {
const { networkMatch, network } = this.context
return (
<User.Consumer>
{user => (
<em
dangerouslySetInnerHTML={{
__html:
!networkMatch && !user.isBurner
? this.messageOceanNetwork()
: !user.isLogged
? content.noAccount
: user.isBurner
? content.hasBurnerWallet
: user.isLogged
? content.hasMetaMaskWallet.replace(
'NETWORK',
network
)
: ''
}}
/>
)}
</User.Consumer>
)
}
public render() {
const { network } = this.context
const { networkMatch } = this.context
return (
<div className={styles.message}>
@ -31,14 +54,10 @@ export default class Web3message extends PureComponent<{ extended?: boolean }> {
<Account />
</div>
{(network !== 'Pacific' || this.props.extended) && (
{(!networkMatch || this.props.extended) && (
<div className={styles.text}>
<AccountStatus className={styles.status} />
<em
dangerouslySetInnerHTML={{
__html: this.message()
}}
/>
<this.Message />
</div>
)}
</div>

4
client/src/components/templates/Asset/AssetFile.tsx
View File

@ -109,7 +109,7 @@ export default class AssetFile extends PureComponent<
public render() {
const { ddo, file } = this.props
const { isLoading, error, step } = this.state
const { isLogged, isOceanNetwork } = this.context
const { isLogged } = this.context
const { index, contentType, contentLength } = file
return (
@ -145,7 +145,7 @@ export default class AssetFile extends PureComponent<
className={styles.buttonMain}
// weird 0 hack so TypeScript is happy
onClick={() => this.purchaseAsset(ddo, index || 0)}
disabled={!isLogged || !isOceanNetwork}
disabled={!isLogged}
name="Download"
>
Get file

4
client/src/components/templates/Asset/AssetFilesDetails.tsx
View File

@ -19,9 +19,7 @@ export default class AssetFilesDetails extends PureComponent<{
<AssetFile key={file.index} ddo={ddo} file={file} />
))}
</div>
{(!this.context.isOceanNetwork || !this.context.isLogged) && (
<Web3message />
)}
<Web3message />
</>
) : (
<div>No files attached.</div>

21
client/src/context/MarketProvider.tsx
View File

@ -1,6 +1,6 @@
import React, { PureComponent } from 'react'
import { Logger, Ocean } from '@oceanprotocol/squid'
import { Market } from '.'
import { Market, User } from '.'
import formPublish from '../data/form-publish.json'
const categories =
@ -17,19 +17,25 @@ interface MarketProviderState {
totalAssets: number
categories: string[]
network: string
networkMatch: boolean
}
export default class MarketProvider extends PureComponent<
MarketProviderProps,
MarketProviderState
> {
public static contextType = User
public state = {
totalAssets: 0,
categories,
network: 'Pacific'
network: 'Pacific',
networkMatch: false
}
public async componentDidMount() {}
public async componentDidMount() {
await this.checkCorrectUserNetwork()
}
public async componentDidUpdate(prevProps: any) {
// Using ocean prop instead of getting it from context to be able to compare.
@ -37,6 +43,7 @@ export default class MarketProvider extends PureComponent<
if (prevProps.ocean !== this.props.ocean) {
await this.getTotalAssets()
await this.getMarketNetwork()
await this.checkCorrectUserNetwork()
}
}
@ -72,6 +79,14 @@ export default class MarketProvider extends PureComponent<
}
}
private async checkCorrectUserNetwork() {
if (this.context.network === this.state.network) {
this.setState({ networkMatch: true })
} else {
this.setState({ networkMatch: false })
}
}
public render() {
return (
<Market.Provider value={this.state}>

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

@ -51,7 +51,6 @@ interface UserProviderState {
isBurner: boolean
isWeb3Capable: boolean
isLoading: boolean
isOceanNetwork: boolean
account: string
balance: {
eth: number
@ -110,7 +109,6 @@ export default class UserProvider extends PureComponent<{}, UserProviderState> {
isBurner: false,
isWeb3Capable: Boolean(window.web3 || window.ethereum),
isLoading: true,
isOceanNetwork: false,
balance: {
eth: 0,
ocn: 0
@ -205,13 +203,13 @@ export default class UserProvider extends PureComponent<{}, UserProviderState> {
}
private fetchAccounts = async () => {
const { ocean, isLogged, isOceanNetwork } = this.state
const { ocean, isLogged } = this.state
if (isLogged) {
let accounts
// Modern dapp browsers
if (window.ethereum && !isLogged && isOceanNetwork) {
if (window.ethereum && !isLogged) {
// simply set to empty, and have user click a button somewhere
// to initiate account unlocking
accounts = []
@ -250,16 +248,8 @@ export default class UserProvider extends PureComponent<{}, UserProviderState> {
private fetchNetwork = async () => {
const { ocean } = this.state
const network = await ocean.keeper.getNetworkName()
const isPacific = network === 'Pacific'
const isNile = network === 'Nile'
const isDuero = network === 'Duero'
const isSpree = network === 'Spree'
const isOceanNetwork = isPacific || isNile || isDuero || isSpree
network !== this.state.network &&
this.setState({ isOceanNetwork, network })
network !== this.state.network && this.setState({ network })
}
public render() {

4
client/src/context/index.tsx
View File

@ -5,7 +5,6 @@ export const User = React.createContext({
isBurner: false,
isWeb3Capable: false,
isLoading: false,
isOceanNetwork: false,
account: '',
web3: {},
ocean: {},
@ -29,5 +28,6 @@ export const User = React.createContext({
export const Market = React.createContext({
totalAssets: 0,
categories: [''],
network: ''
network: '',
networkMatch: false
})

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

@ -5,5 +5,6 @@
"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>",
"wrongNetworkSpree": "Not connected to Spree network. Please connect in MetaMask with Custom RPC <code>http://localhost:8545</code>",
"seedphrase": "You can use this seed phrase to import this burner wallet account into other wallets, e.g. MetaMask."
}

4
client/src/routes/Faucet.tsx
View File

@ -99,9 +99,7 @@ export default class Faucet extends PureComponent<{}, FaucetState> {
<Button
primary
onClick={() => this.getTokens(this.context.requestFromFaucet)}
disabled={
!this.context.isLogged || !this.context.isOceanNetwork
}
disabled={!this.context.isLogged}
>
Request Ether
</Button>

4
client/src/routes/History.tsx
View File

@ -10,9 +10,7 @@ export default class History extends Component {
return (
<Route title="History">
<Content>
{(!this.context.isLogged ||
!this.context.isOceanNetwork) && <Web3message />}
{!this.context.isLogged && <Web3message />}
<AssetsUser list />
</Content>
</Route>