handling spree local network

client/.env.example

@@ -9,7 +9,7 @@
 # This env var is a shortcut for a set of Ocean network component endpoints.
 #
 # Possible values: pacific, nile, duero, spree
-REACT_APP_OCEAN_NETWORK=pacific
+REACT_APP_OCEAN_NETWORK=spree
 
 #
 # APP CONFIG

client/.ev.local

@@ -0,0 +1,78 @@
+#
+# When none of the following variables are set,
+# Commons will default connecting to Pacific
+#
+
+#
+# AUTO NETWORK CONNECTIONS
+# ------------------------
+# This env var is a shortcut for a set of Ocean network component endpoints.
+#
+# Possible values: pacific, nile, duero, spree
+REACT_APP_OCEAN_NETWORK=spree
+
+#
+# APP CONFIG
+#
+REACT_APP_REPORT_EMAIL="test@example.com"
+# REACT_APP_SHOW_CHANNELS=true
+# REACT_APP_ALLOW_PRICING=true
+# REACT_APP_SHOW_REQUEST_TOKENS_BUTTON=true
+REACT_APP_IPFS_GATEWAY_URI="https://ipfs.oceanprotocol.com"
+REACT_APP_IPFS_NODE_URI="https://ipfs.oceanprotocol.com:443"
+
+
+#
+# MANUAL CONNECTIONS
+# ------------------
+# Use any of the following env variables to overwrite 
+# individudal endpoints.
+
+#
+# Connect to Pacific
+#
+# REACT_APP_NODE_URI="https://pacific.oceanprotocol.com"
+# REACT_APP_SECRET_STORE_URI="https://secret-store.oceanprotocol.com"
+# REACT_APP_FAUCET_URI="https://faucet.oceanprotocol.com"
+# Pacific Test instances
+# REACT_APP_AQUARIUS_URI="https://aquarius.test.oceanprotocol.com"
+# REACT_APP_BRIZO_URI="https://brizo.test.oceanprotocol.com"
+# REACT_APP_BRIZO_ADDRESS="0x0474ed05ba757dde575dfaaaa267d9e7f3643abc"
+# Pacific Commons instances
+# REACT_APP_AQUARIUS_URI="https://aquarius.commons.oceanprotocol.com"
+# REACT_APP_BRIZO_URI="https://brizo.commons.oceanprotocol.com"
+# REACT_APP_BRIZO_ADDRESS="0x008c25ed3594e094db4592f4115d5fa74c4f41ea"
+
+#
+# Connect to Nile
+#
+# REACT_APP_NODE_URI="https://nile.dev-ocean.com"
+# REACT_APP_SECRET_STORE_URI="https://secret-store.nile.dev-ocean.com"
+# REACT_APP_FAUCET_URI="https://faucet.nile.dev-ocean.com"
+# REACT_APP_BRIZO_ADDRESS="0x4aaab179035dc57b35e2ce066919048686f82972"
+# Nile Test instances
+# REACT_APP_AQUARIUS_URI="https://aquarius.nile.dev-ocean.com"
+# REACT_APP_BRIZO_URI="https://brizo.nile.dev-ocean.com"
+# Nile Commons instances
+# REACT_APP_AQUARIUS_URI="https://aquarius.marketplace.dev-ocean.com"
+# REACT_APP_BRIZO_URI="https://brizo.marketplace.dev-ocean.com"
+
+#
+# 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 Spree (local with Barge)
+#
+# REACT_APP_NODE_URI="http://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="0x068ed00cf0441e4829d9784fcbe7b9e26d4bd8d0"

client/src/components/molecules/NetworkSwitcher.module.scss

@@ -1,6 +1,6 @@
 @import '../../styles/variables';
 
-$localSpacer: $spacer / 8;
+$localSpacer: $spacer / 7;
 
 .networkListWrapper {
     position: relative;

client/src/components/molecules/NetworkSwitcher.tsx

@@ -7,17 +7,14 @@ import styles from './NetworkSwitcher.module.scss'
 const networkUrlParam = urlq.get('network') || ''
 
 const getNetworkConfig = (network: string) => {
-    const index = Object.keys(CONNECTIONS).indexOf(network)
     // TypeScript doesn't let access CONNECTIONS[networkName] directly
-    return index !== -1
+    const idx = Object.keys(CONNECTIONS).indexOf(network)
-        ? Object.values(CONNECTIONS)[index]
+    return idx !== -1 ? Object.values(CONNECTIONS)[idx] : CONNECTIONS.pacific // Use default config in case of mispelled URL params
-        : CONNECTIONS.pacific // Use default config in case of mispelled URL params or
 }
 
-export const oceanConfig =
+export const oceanConfig = getNetworkConfig(
-    networkUrlParam !== ''
+    networkUrlParam !== '' ? networkUrlParam : 'pacific'
-        ? getNetworkConfig(networkUrlParam)
+)
-        : getNetworkConfig('pacific')
 
 /* NETWORK SWITCHER */
 export function NetworkSwitcher() {
@@ -25,6 +22,7 @@ export function NetworkSwitcher() {
     const [isToggled, setIsToggled] = useState(false)
 
     const handleToggle = (e: any) => {
+        // avoid click event firing twice
         if (e.which === 1) {
             const isClickedInside = node.current.contains(e.target)
             setIsToggled(isClickedInside)
@@ -43,8 +41,6 @@ export function NetworkSwitcher() {
 
     const { network, isBurner } = useContext(User)
 
-    console.log(isBurner)
-
     const switchNetwork = (networkName: string): any => {
         // Force page to get refreshed
         window.location.href = `${window.location.origin}?network=${networkName}`
@@ -65,7 +61,7 @@ export function NetworkSwitcher() {
                 onClick={e => handleToggle(e)}
             >
                 <span>{network ? network : 'fetching ...'}</span>
-                <i />
+                <i aria-hidden="true" />
             </button>
             <ul className={styles.networkList}>
                 {Object.keys(CONNECTIONS)

client/src/components/molecules/VersionNumbers/VersionTable.tsx

@@ -57,22 +57,22 @@ export const VersionTableContracts = ({
     </table>
 )
 
-export const VersionTableCommons = () => (
+export const VersionTableCommons = () => {
-    <table>
+    return (
-        <tbody>
+        <table>
-            {Object.entries(oceanConfig).map(([key, value]) => (
+            <tbody>
-                <tr key={key}>
+                {Object.entries(oceanConfig).map(([key, val]) => (
-                    <td>
+                    <tr key={key}>
-                        <code className={styles.label}>{key}</code>
+                        <td>
-                    </td>
+                            <code className={styles.label}>{key}</code>
-                    <td>
+                        </td>
-                        <code>{value}</code>
+                        <td>{val}</td>
-                    </td>
+                    </tr>
-                </tr>
+                ))}
-            ))}
+            </tbody>
-        </tbody>
+        </table>
-    </table>
+    )
-)
+}
 
 const VersionTable = ({ data }: { data: VersionNumbersState }) => {
     return (

client/src/config.ts

@@ -25,6 +25,34 @@ export const ipfsNodeUri =
 //
 // OCEAN REMOTE CONNECTIONS
 //
+
+console.log(process.env.REACT_APP_OCEAN_NETWORK)
+
+const altNetwork =
+    process.env.REACT_APP_OCEAN_NETWORK === 'spree'
+        ? {
+              spree: {
+                  nodeUri:
+                      process.env.REACT_APP_NODE_URI ||
+                      'https://pacific.oceanprotocol.com',
+                  aquariusUri:
+                      process.env.REACT_APP_AQUARIUS_URI ||
+                      'https://aquarius.commons.oceanprotocol.com',
+                  brizoUri:
+                      process.env.REACT_APP_BRIZO_URI ||
+                      'https://brizo.commons.oceanprotocol.com',
+                  brizoAddress:
+                      process.env.REACT_APP_BRIZO_ADDRESS ||
+                      '0x008c25ed3594e094db4592f4115d5fa74c4f41ea',
+                  secretStoreUri:
+                      process.env.REACT_APP_SECRET_STORE_URI ||
+                      'https://secret-store.oceanprotocol.com',
+                  faucetUri:
+                      process.env.REACT_APP_FAUCET_URI ||
+                      'https://faucet.oceanprotocol.com'
+              }
+          }
+        : null
 export const CONNECTIONS = {
     pacific: {
         nodeUri:
@@ -82,5 +110,6 @@ export const CONNECTIONS = {
         faucetUri:
             process.env.REACT_APP_FAUCET_URI ||
             'https://faucet.duero.dev-ocean.com'
-    }
+    },
+    ...altNetwork
 }