From f0c69581544703784e45b35aabc525c7841b222d Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Thu, 22 Oct 2020 19:11:08 +0200 Subject: [PATCH 1/5] make network switching work --- .env.example | 1 - app.config.js | 1 - src/helpers/NetworkMonitor.tsx | 67 +++++++++++++++++++-------------- src/helpers/wrapRootElement.tsx | 13 +++---- 4 files changed, 44 insertions(+), 38 deletions(-) diff --git a/.env.example b/.env.example index 9c9a62cb3..5dbecc20e 100644 --- a/.env.example +++ b/.env.example @@ -2,5 +2,4 @@ GATSBY_NETWORK="rinkeby" #GATSBY_INFURA_PROJECT_ID="xxx" -#GATSBY_METADATA_CACHE_URI="xxx" #GATSBY_MARKET_FEE_ADDRESS="0xxx" diff --git a/app.config.js b/app.config.js index f2340a49f..359f6018e 100644 --- a/app.config.js +++ b/app.config.js @@ -1,7 +1,6 @@ module.exports = { network: process.env.GATSBY_NETWORK || 'rinkeby', infuraProjectId: process.env.GATSBY_INFURA_PROJECT_ID || 'xxx', - metadataCacheUri: process.env.GATSBY_METADATA_CACHE_URI, // The ETH address the marketplace fee will be sent to. marketFeeAddress: process.env.GATSBY_MARKET_FEE_ADDRESS || diff --git a/src/helpers/NetworkMonitor.tsx b/src/helpers/NetworkMonitor.tsx index 9ba5c7d49..606c36012 100644 --- a/src/helpers/NetworkMonitor.tsx +++ b/src/helpers/NetworkMonitor.tsx @@ -1,47 +1,58 @@ import React, { ReactElement, useEffect } from 'react' import { useOcean } from '@oceanprotocol/react' import { getOceanConfig } from './wrapRootElement' -import appConfig from '../../app.config' import { Logger } from '@oceanprotocol/lib' export function NetworkMonitor(): ReactElement { - const { metadataCacheUri } = appConfig const { connect, web3Provider } = useOcean() + async function handleNetworkChanged(chainId: string) { + const initialNewConfig = getOceanConfig(Number(chainId.replace('0x', ''))) + + const newConfig = { + ...initialNewConfig, + + // add local dev values + ...(chainId === '8996' && { + factoryAddress: '0x312213d6f6b5FCF9F56B7B8946A6C727Bf4Bc21f', + poolFactoryAddress: '0xF9E633CBeEB2A474D3Fe22261046C99e805beeC4', + fixedRateExchangeAddress: '0xefdcb16b16C7842ec27c6fdCf56adc316B9B29B8', + metadataContractAddress: '0xEBe77E16736359Bf0F9013F6017242a5971cAE76' + }) + } + + try { + await connect(newConfig) + } catch (error) { + Logger.error(error.message) + } + } + + // Re-connect on mount when network is different from user network + // useEffect(() => { + // if (!web3 || !networkId) return + + // async function init() { + // if ( + // (await web3.eth.getChainId()) === + // (config as ConfigHelperConfig).networkId + // ) + // return + // await handleNetworkChanged(networkId) + // } + // init() + // }, [web3, networkId]) + + // Handle network change events useEffect(() => { if (!web3Provider) return - async function handleNetworkChanged(chainId: string) { - const initialConfig = getOceanConfig(Number(chainId.replace('0x', ''))) - - const newConfig = { - ...initialConfig, - // add metadataCacheUri only when defined - ...(metadataCacheUri && { metadataCacheUri }) - } - if (chainId === '8996') { - newConfig.factoryAddress = '0x312213d6f6b5FCF9F56B7B8946A6C727Bf4Bc21f' - newConfig.poolFactoryAddress = - '0xF9E633CBeEB2A474D3Fe22261046C99e805beeC4' - newConfig.fixedRateExchangeAddress = - '0xefdcb16b16C7842ec27c6fdCf56adc316B9B29B8' - newConfig.metadataContractAddress = - '0xEBe77E16736359Bf0F9013F6017242a5971cAE76' - } - - try { - await connect(newConfig) - } catch (error) { - Logger.error(error.message) - } - } - web3Provider.on('chainChanged', handleNetworkChanged) return () => { web3Provider.removeListener('chainChanged', handleNetworkChanged) } - }, [web3Provider, connect, metadataCacheUri]) + }, [web3Provider]) return <> } diff --git a/src/helpers/wrapRootElement.tsx b/src/helpers/wrapRootElement.tsx index f8fcfcaba..e00ebe1c0 100644 --- a/src/helpers/wrapRootElement.tsx +++ b/src/helpers/wrapRootElement.tsx @@ -24,17 +24,14 @@ export default function wrapRootElement({ }: { element: ReactElement }): ReactElement { - const { metadataCacheUri, network } = appConfig + const { network } = appConfig const oceanInitialConfig = getOceanConfig(network) - const initialConfig = { - ...oceanInitialConfig, - // add metadataCacheUri only when defined - ...(metadataCacheUri && { metadataCacheUri }) - } - return ( - + {element} From 6e589949b4314baa7c29c95b4c1f4ecb5c0a88cf Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Fri, 23 Oct 2020 13:01:29 +0200 Subject: [PATCH 2/5] refactor network messaging --- app.config.js | 4 ++++ src/components/molecules/Wallet/Account.tsx | 4 ++-- .../molecules/Wallet/Details.module.css | 1 + src/components/molecules/Wallet/Details.tsx | 9 ++----- src/components/molecules/Wallet/Feedback.tsx | 24 +++++++------------ .../organisms/AssetActions/Consume.module.css | 4 ++++ .../Pricing/FormPricing/Dynamic.module.css | 4 +--- .../Pricing/FormPricing/Dynamic.tsx | 11 +-------- src/utils/wallet.ts | 2 +- 9 files changed, 25 insertions(+), 38 deletions(-) diff --git a/app.config.js b/app.config.js index 359f6018e..de7b87f30 100644 --- a/app.config.js +++ b/app.config.js @@ -1,4 +1,8 @@ module.exports = { + // The default network and its associated config the app should connect to + // on start. App will automatically switch network configs when user switches + // networks in their wallet. + // Ocean Protocol contracts are deployed for: 'mainnet', 'rinkeby', 'development' network: process.env.GATSBY_NETWORK || 'rinkeby', infuraProjectId: process.env.GATSBY_INFURA_PROJECT_ID || 'xxx', // The ETH address the marketplace fee will be sent to. diff --git a/src/components/molecules/Wallet/Account.tsx b/src/components/molecules/Wallet/Account.tsx index fa66a4c38..4231b5a25 100644 --- a/src/components/molecules/Wallet/Account.tsx +++ b/src/components/molecules/Wallet/Account.tsx @@ -2,7 +2,7 @@ import { useOcean } from '@oceanprotocol/react' import { toDataUrl } from 'ethereum-blockies' import React, { FormEvent } from 'react' import { ReactComponent as Caret } from '../../../images/caret.svg' -import { accountTruncate, isCorrectNetwork } from '../../../utils/wallet' +import { accountTruncate } from '../../../utils/wallet' import Status from '../../atoms/Status' import styles from './Account.module.css' @@ -24,7 +24,7 @@ const Blockies = ({ account }: { account: string | undefined }) => { // eslint-disable-next-line const Account = React.forwardRef((props, ref: any) => { const { accountId, status, connect, networkId } = useOcean() - const hasSuccess = status === 1 && isCorrectNetwork(networkId) + const hasSuccess = status === 1 && networkId === 1 async function handleActivation(e: FormEvent) { // prevent accidentially submitting a form the button might be in diff --git a/src/components/molecules/Wallet/Details.module.css b/src/components/molecules/Wallet/Details.module.css index bd413da08..a80d30bfe 100644 --- a/src/components/molecules/Wallet/Details.module.css +++ b/src/components/molecules/Wallet/Details.module.css @@ -1,5 +1,6 @@ .details { padding: calc(var(--spacer) / 4); + min-width: 17rem; } .details > section[class*='feedback'] { diff --git a/src/components/molecules/Wallet/Details.tsx b/src/components/molecules/Wallet/Details.tsx index 3c42d01c2..a84a9dca9 100644 --- a/src/components/molecules/Wallet/Details.tsx +++ b/src/components/molecules/Wallet/Details.tsx @@ -3,14 +3,13 @@ import Button from '../../atoms/Button' import styles from './Details.module.css' import { useOcean } from '@oceanprotocol/react' import Web3Feedback from './Feedback' -import { getNetworkName } from '../../../utils/wallet' import { getInjectedProviderName } from 'web3modal' import Conversion from '../../atoms/Price/Conversion' import { formatCurrency } from '@coingecko/cryptoformat' import { useUserPreferences } from '../../../providers/UserPreferences' export default function Details(): ReactElement { - const { balance, connect, logout, networkId } = useOcean() + const { balance, connect, logout } = useOcean() const { locale } = useUserPreferences() return ( @@ -27,11 +26,7 @@ export default function Details(): ReactElement { ))}
  • - - {getInjectedProviderName()} -
    - {getNetworkName(networkId)} -     + {getInjectedProviderName()}