diff --git a/README.md b/README.md index 71b2a8e..21a6300 100644 --- a/README.md +++ b/README.md @@ -25,6 +25,7 @@ If you're a developer and want to contribute to, or want to utilize this marketp - [🏄 Get Started](#-get-started) - [🏖 Remote Ocean: Nile](#-remote-ocean-nile) - [🐳 Use with Barge](#-use-with-barge) + - [⛵️ Environment Variables](#️-environment-variables) - [👩‍🔬 Testing](#-testing) - [✨ Code Style](#-code-style) - [🛳 Production](#-production) @@ -70,7 +71,22 @@ cd barge ./start_ocean.sh --latest --no-pleuston --local-spree-node ``` -Modify `./client/src/config.ts` to use those local connections. +Modify `./client/src/config.ts` or set environment variables to use those local connections. + +### ⛵️ Environment Variables + +The `./client/src/config.ts` file is setup to prioritize environment variables for setting each Ocean component endpoint. + +By setting environment variables, you can easily switch between Ocean networks the commons client connects to, without directly modifying `./client/src/config.ts`. This is helpful e.g. for local development so you don't accidentially commit changes to the config file. + +For local development, you can use a `.env.local` file. There's an example file with the most common network configurations preconfigured: + +```bash +cp client/.env.local.example client/.env.local + +# uncomment the config you need +vi client/.env.local +``` ## 👩‍🔬 Testing diff --git a/client/.dockerignore b/client/.dockerignore index 3c3629e..469ce43 100644 --- a/client/.dockerignore +++ b/client/.dockerignore @@ -1 +1,2 @@ node_modules +.env.local diff --git a/client/.env.local.example b/client/.env.local.example new file mode 100644 index 0000000..68b2bcd --- /dev/null +++ b/client/.env.local.example @@ -0,0 +1,44 @@ +# +# When none of the following variables are set, +# Commons will default connecting to Nile +# + +# +# Connect to Nile +# +REACT_APP_NODE_URI="https://nile.dev-ocean.com" +REACT_APP_AQUARIUS_URI="https://nginx-aquarius.dev-ocean.com" +REACT_APP_BRIZO_URI="https://nginx-brizo.dev-ocean.com" +REACT_APP_SECRET_STORE_URI="https://secret-store.dev-ocean.com" +REACT_APP_FAUCET_URI="https://faucet.nile.dev-ocean.com" +REACT_APP_BRIZO_ADDRESS="0x4aaab179035dc57b35e2ce066919048686f82972" + +# +# Connect to Duero +# +# REACT_APP_NODE_URI="https://duero.dev-ocean.com" +# REACT_APP_AQUARIUS_URI="https://aquarius.duero.dev-ocean.com" +# REACT_APP_BRIZO_URI="https://brizo.duero.dev-ocean.com" +# REACT_APP_SECRET_STORE_URI="https://secret-store.duero.dev-ocean.com" +# REACT_APP_FAUCET_URI="https://faucet.duero.dev-ocean.com" +# REACT_APP_BRIZO_ADDRESS="0x9d4ed58293f71122ad6a733c1603927a150735d0" + +# +# Connect to Nile Commons instances +# +# REACT_APP_NODE_URI="https://nile.dev-ocean.com" +# REACT_APP_AQUARIUS_URI="https://aquarius.marketplace.dev-ocean.com" +# REACT_APP_BRIZO_URI="https://brizo.marketplace.dev-ocean.com" +# REACT_APP_SECRET_STORE_URI="https://secret-store.marketplace.dev-ocean.com" +# REACT_APP_FAUCET_URI="https://faucet.nile.dev-ocean.com" +# REACT_APP_BRIZO_ADDRESS="0x4aaab179035dc57b35e2ce066919048686f82972" + +# +# Connect to Spree (local with Barge) +# +# REACT_APP_NODE_URI="htts://localhost:8545" +# REACT_APP_AQUARIUS_URI="http://aquarius:5000" +# REACT_APP_BRIZO_URI="http://localhost:8030" +# REACT_APP_SECRET_STORE_URI="http://localhost:12001" +# REACT_APP_FAUCET_URI="http://localhost:3001" +# REACT_APP_BRIZO_ADDRESS="0x00bd138abd70e2f00903268f3db08f2d25677c9e" diff --git a/client/src/components/atoms/VersionNumbers/index.test.tsx b/client/src/components/atoms/VersionNumbers/index.test.tsx index 94ec2c7..6cb97dd 100644 --- a/client/src/components/atoms/VersionNumbers/index.test.tsx +++ b/client/src/components/atoms/VersionNumbers/index.test.tsx @@ -118,11 +118,4 @@ describe('VersionNumbers', () => { 'Could not get version' ) }) - - it('minimal component versions in link title, prefixed with `v`', async () => { - const { getByTitle } = render() - mockAxios.mockResponse(mockResponse) - expect(mockAxios.get).toHaveBeenCalled() - await waitForElement(() => getByTitle(/v6.6.6/)) - }) }) diff --git a/client/src/components/atoms/VersionNumbers/index.tsx b/client/src/components/atoms/VersionNumbers/index.tsx index e7edbfc..fb34a23 100644 --- a/client/src/components/atoms/VersionNumbers/index.tsx +++ b/client/src/components/atoms/VersionNumbers/index.tsx @@ -5,17 +5,7 @@ import { version } from '../../../../package.json' import { version as versionSquid } from '@oceanprotocol/squid/package.json' import styles from './index.module.scss' -import { - aquariusHost, - aquariusPort, - aquariusScheme, - brizoHost, - brizoPort, - brizoScheme, - faucetHost, - faucetPort, - faucetScheme -} from '../../../config' +import { aquariusUri, brizoUri, faucetUri } from '../../../config' import VersionTable from './VersionTable' import { isJsonString } from './utils' @@ -116,18 +106,14 @@ export default class VersionNumbers extends PureComponent< } private async setAquarius() { - const aquarius = await this.getData( - aquariusScheme, - aquariusHost, - aquariusPort - ) + const aquarius = await this.getData(aquariusUri) aquarius && aquarius.version !== undefined && this.setState({ aquarius: { isLoading: false, ...aquarius } }) } private async setBrizoAndKeeper() { - const brizo = await this.getData(brizoScheme, brizoHost, brizoPort) + const brizo = await this.getData(brizoUri) const keeperVersion = brizo['keeper-version'] && brizo['keeper-version'].replace('v', '') @@ -153,7 +139,7 @@ export default class VersionNumbers extends PureComponent< } private async setFaucet() { - const faucet = await this.getData(faucetScheme, faucetHost, faucetPort) + const faucet = await this.getData(faucetUri) // backwards compatibility isJsonString(faucet) === false && @@ -167,9 +153,9 @@ export default class VersionNumbers extends PureComponent< this.setState({ faucet: { isLoading: false, ...faucet } }) } - private async getData(scheme: string, host: string, port: number | string) { + private async getData(uri: string) { try { - const response = await axios.get(`${scheme}://${host}:${port}`, { + const response = await axios.get(uri, { headers: { Accept: 'application/json' }, cancelToken: this.signal.token }) diff --git a/client/src/config.ts b/client/src/config.ts index b213032..d8f029c 100644 --- a/client/src/config.ts +++ b/client/src/config.ts @@ -1,79 +1,29 @@ // // commons-server connection // -export const serviceScheme = process.env.REACT_APP_SERVICE_SCHEME || 'http' -export const serviceHost = process.env.REACT_APP_SERVICE_HOST || 'localhost' -export const servicePort = process.env.REACT_APP_SERVICE_PORT || 4000 +export const serviceUri = + process.env.REACT_APP_SERVICE_URI || 'http://localhost:4000' // // OCEAN REMOTE CONNECTIONS // -export const nodeScheme = process.env.REACT_APP_NODE_SCHEME || 'https' -export const nodeHost = process.env.REACT_APP_NODE_HOST || 'nile.dev-ocean.com' -export const nodePort = process.env.REACT_APP_NODE_PORT || 443 - -export const aquariusScheme = process.env.REACT_APP_AQUARIUS_SCHEME || 'https' -export const aquariusHost = - process.env.REACT_APP_AQUARIUS_HOST || 'nginx-aquarius.dev-ocean.com' -export const aquariusPort = process.env.REACT_APP_AQUARIUS_PORT || 443 - -export const brizoScheme = process.env.REACT_APP_BRIZO_SCHEME || 'https' -export const brizoHost = - process.env.REACT_APP_BRIZO_HOST || 'nginx-brizo.dev-ocean.com' -export const brizoPort = process.env.REACT_APP_BRIZO_PORT || 443 +export const nodeUri = + process.env.REACT_APP_NODE_URI || 'https://nile.dev-ocean.com' +export const aquariusUri = + process.env.REACT_APP_AQUARIUS_URI || 'https://nginx-aquarius.dev-ocean.com' +export const brizoUri = + process.env.REACT_APP_BRIZO_URI || 'https://nginx-brizo.dev-ocean.com' export const brizoAddress = process.env.REACT_APP_BRIZO_ADDRESS || '0x4aaab179035dc57b35e2ce066919048686f82972' - -export const parityScheme = process.env.REACT_APP_PARITY_SCHEME || 'https' -export const parityHost = - process.env.REACT_APP_PARITY_HOST || 'nile.dev-ocean.com' -export const parityPort = process.env.REACT_APP_PARITY_PORT || 443 - -export const secretStoreScheme = - process.env.REACT_APP_SECRET_STORE_SCHEME || 'https' -export const secretStoreHost = - process.env.REACT_APP_SECRET_STORE_HOST || 'secret-store.dev-ocean.com' -export const secretStorePort = process.env.REACT_APP_SECRET_STORE_PORT || 443 - -export const faucetScheme = process.env.REACT_APP_FAUCET_SCHEME || 'https' -export const faucetHost = - process.env.REACT_APP_FAUCET_HOST || 'faucet.nile.dev-ocean.com' -export const faucetPort = process.env.REACT_APP_FAUCET_PORT || 443 - -// -// OCEAN LOCAL CONNECTIONS -// e.g. when running with barge -// -/* -export const nodeScheme = 'http' -export const nodeHost = 'localhost' -export const nodePort = 8545 - -export const aquariusScheme = 'http' -export const aquariusHost = 'aquarius' -export const aquariusPort = 5000 - -export const brizoScheme = 'http' -export const brizoHost = 'localhost' -export const brizoPort = 8030 -export const brizoAddress = '0x00bd138abd70e2f00903268f3db08f2d25677c9e' - -export const parityScheme = 'http' -export const parityHost = 'localhost' -export const parityPort = 8545 - -export const secretStoreScheme = 'http' -export const secretStoreHost = 'localhost' -export const secretStorePort = 12001 - -export const faucetScheme = 'http' -export const faucetHost = 'localhost' -export const faucetPort = 3001 -*/ -export const verbose = true +export const secretStoreUri = + process.env.REACT_APP_SECRET_STORE_URI || + 'https://secret-store.dev-ocean.com' +export const faucetUri = + process.env.REACT_APP_FAUCET_URI || 'https://faucet.nile.dev-ocean.com' // // APP CONFIG // +export const verbose = true export const analyticsId = 'UA-60614729-11' diff --git a/client/src/context/UserProvider.tsx b/client/src/context/UserProvider.tsx index fed7138..8f37933 100644 --- a/client/src/context/UserProvider.tsx +++ b/client/src/context/UserProvider.tsx @@ -3,7 +3,7 @@ import Web3 from 'web3' import { Logger, Ocean, Account } from '@oceanprotocol/squid' import { User } from '.' import { provideOcean, requestFromFaucet, FaucetResponse } from '../ocean' -import { nodeHost, nodePort, nodeScheme } from '../config' +import { nodeUri } from '../config' import MarketProvider from './MarketProvider' const POLL_ACCOUNTS = 1000 // every 1s @@ -81,11 +81,7 @@ export default class UserProvider extends PureComponent<{}, UserProviderState> { ocn: 0 }, network: '', - web3: new Web3( - new Web3.providers.HttpProvider( - `${nodeScheme}://${nodeHost}:${nodePort}` - ) - ), + web3: new Web3(new Web3.providers.HttpProvider(nodeUri)), account: '', ocean: {} as any, requestFromFaucet: () => requestFromFaucet(''), diff --git a/client/src/ocean.ts b/client/src/ocean.ts index 8ce2ed8..9c02691 100644 --- a/client/src/ocean.ts +++ b/client/src/ocean.ts @@ -2,42 +2,22 @@ import { Ocean, Logger } from '@oceanprotocol/squid' import Web3 from 'web3' import { - aquariusHost, - aquariusPort, - aquariusScheme, - brizoHost, - brizoPort, - brizoScheme, + aquariusUri, + brizoUri, brizoAddress, - faucetHost, - faucetPort, - faucetScheme, - nodeHost, - nodePort, - nodeScheme, - parityHost, - parityPort, - parityScheme, - secretStoreHost, - secretStorePort, - secretStoreScheme, + faucetUri, + nodeUri, + secretStoreUri, verbose } from './config' export async function provideOcean(web3provider: Web3) { - const nodeUri = `${nodeScheme}://${nodeHost}:${nodePort}` - const aquariusUri = `${aquariusScheme}://${aquariusHost}:${aquariusPort}` - const brizoUri = `${brizoScheme}://${brizoHost}:${brizoPort}` - const parityUri = `${parityScheme}://${parityHost}:${parityPort}` - const secretStoreUri = `${secretStoreScheme}://${secretStoreHost}:${secretStorePort}` - const config = { web3provider, nodeUri, aquariusUri, brizoUri, brizoAddress, - parityUri, secretStoreUri, verbose } @@ -58,7 +38,7 @@ export interface FaucetResponse { export async function requestFromFaucet(account: string) { try { - const url = `${faucetScheme}://${faucetHost}:${faucetPort}/faucet` + const url = `${faucetUri}/faucet` const response = await fetch(url, { method: 'POST', headers: { diff --git a/client/src/routes/Publish/Files/index.tsx b/client/src/routes/Publish/Files/index.tsx index 5a029e3..4fe22c6 100644 --- a/client/src/routes/Publish/Files/index.tsx +++ b/client/src/routes/Publish/Files/index.tsx @@ -6,7 +6,7 @@ import ItemForm from './ItemForm' import Item from './Item' import styles from './index.module.scss' -import { serviceHost, servicePort, serviceScheme } from '../../../config' +import { serviceUri } from '../../../config' import cleanupContentType from '../../../utils/cleanupContentType' interface File { @@ -68,16 +68,13 @@ export default class Files extends PureComponent { } try { - const response = await fetch( - `${serviceScheme}://${serviceHost}:${servicePort}/api/v1/urlcheck`, - { - method: 'POST', - body: JSON.stringify({ url: value }), - headers: { - 'Content-Type': 'application/json' - } + const response = await fetch(`${serviceUri}/api/v1/urlcheck`, { + method: 'POST', + body: JSON.stringify({ url: value }), + headers: { + 'Content-Type': 'application/json' } - ) + }) res = await response.json() file.contentLength = res.result.contentLength file.contentType = res.result.contentType