mirror of
https://github.com/oceanprotocol/commons.git
synced 2023-03-15 18:03:00 +01:00
Ocean network detection, remove isOceanNetwork
This commit is contained in:
parent
4f051deefa
commit
e488b9f001
@ -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,
|
||||
|
@ -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>
|
||||
)
|
||||
|
@ -38,7 +38,6 @@ describe('Popover', () => {
|
||||
<User.Provider
|
||||
value={{
|
||||
...userMockConnected,
|
||||
isOceanNetwork: false,
|
||||
network: '1'
|
||||
}}
|
||||
>
|
||||
|
@ -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
|
||||
|
@ -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 && (
|
||||
|
@ -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>
|
||||
)
|
||||
|
@ -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>
|
||||
|
@ -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
|
||||
|
@ -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>
|
||||
|
@ -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}>
|
||||
|
@ -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() {
|
||||
|
@ -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
|
||||
})
|
||||
|
@ -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."
|
||||
}
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
Loading…
Reference in New Issue
Block a user