diff --git a/.env.example b/.env.example index 05b433818..a91d4aca9 100644 --- a/.env.example +++ b/.env.example @@ -1,7 +1,3 @@ -# Default network, possible values: -# "development", "ropsten", "rinkeby", "mainnet", "polygon", "moonbeamalpha", -# "gaiaxtestnet", "mumbai", "bsc" -GATSBY_NETWORK="rinkeby" #GATSBY_INFURA_PROJECT_ID="xxx" #GATSBY_MARKET_FEE_ADDRESS="0xxx" diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml index ca5b94331..bf7e5ff79 100644 --- a/.github/workflows/deploy.yml +++ b/.github/workflows/deploy.yml @@ -16,7 +16,6 @@ jobs: - run: npm run build env: - GATSBY_NETWORK: ${{ secrets.GATSBY_NETWORK }} GATSBY_INFURA_PROJECT_ID: ${{ secrets.GATSBY_INFURA_PROJECT_ID }} GATSBY_PORTIS_ID: ${{ secrets.GATSBY_PORTIS_ID }} diff --git a/README.md b/README.md index 3ac3cb273..e9b648710 100644 --- a/README.md +++ b/README.md @@ -31,7 +31,7 @@ ## 🏄 Get Started -The app is a React app built with [Gatsby.js](https://www.gatsbyjs.org) + TypeScript + CSS modules and will connect to Ocean components in Rinkeby by default. +The app is a React app built with [Gatsby.js](https://www.gatsbyjs.org) + TypeScript + CSS modules and will connect to Ocean remote components by default. To start local development: @@ -73,7 +73,7 @@ Barge will deploy contracts to the local Ganache node which will take some time. Finally, set environment variables to use this local connection in `.env` in the app: ```bash -# modify env variables, setting GATSBY_NETWORK="development" +# modify env variables cp .env.example .env npm start @@ -111,7 +111,7 @@ All this data then comes from multiple sources: ### Aquarius -All initial data sets and their metadata (DDO) is retrieved client-side on run-time from the [Aquarius](https://github.com/oceanprotocol/aquarius) instance for each network. All app calls to Aquarius are done with 2 internal methods which mimic the same methods in ocean.js, but allow us: +All initial data sets and their metadata (DDO) is retrieved client-side on run-time from the [Aquarius](https://github.com/oceanprotocol/aquarius) instance, defined in `app.config.js`. All app calls to Aquarius are done with 2 internal methods which mimic the same methods in ocean.js, but allow us: - to cancel requests when components get unmounted in combination with [axios](https://github.com/axios/axios) - hit Aquarius as early as possible without relying on any ocean.js initialization @@ -263,10 +263,14 @@ Within components this metadata can be queried for under `allNetworksMetadataJso ```tsx export default function NetworkName(): ReactElement { - const { networkDisplayName, isTestnet } = useWeb3() + const { networkId, isTestnet } = useWeb3() + const { networksList } = useNetworkMetadata() + const networkData = getNetworkDataById(networksList, networkId) + const networkName = getNetworkDisplayName(networkData, networkId) + return ( <> - {networkDisplayName} {isTestnet && `(Test)`} + {networkName} {isTestnet && `(Test)`} ) } diff --git a/app.config.js b/app.config.js index d38ed464b..a657752e1 100644 --- a/app.config.js +++ b/app.config.js @@ -1,4 +1,10 @@ module.exports = { + // URI of single metadata cache instance for all networks. + // While ocean.js includes this value for each network as part of its ConfigHelper, + // it is assumed to be the same for all networks. + // In components can be accessed with the useSiteMetadata hook: + // const { appConfig } = useSiteMetadata() + // return appConfig.metadataCacheUri metadataCacheUri: process.env.METADATACACHE_URI || 'https://aquarius.oceanprotocol.com',