put channels behind feature switch

README.md

@@ -30,6 +30,7 @@ If you're a developer and want to contribute to, or want to utilize this marketp
   - [⛵️ Environment Variables](#️-environment-variables)
     - [Client](#client)
     - [Server](#server)
+    - [Feature Switches](#feature-switches)
 - [👩‍🔬 Testing](#-testing)
   - [Unit Tests](#unit-tests)
   - [End-to-End Integration Tests](#end-to-end-integration-tests)
@@ -133,6 +134,16 @@ cp server/.env.example server/.env
 vi server/.env
 ```
 
+#### Feature Switches
+
+Beside configuring the network endpopints, the client allows to activate some features with environment variables in `client/.env.local`:
+
+| Env Variable                           | Feature Description                                                                                                                                                      |
+| -------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `REACT_APP_SHOW_CHANNELS`              | Show the channels feature which shows assets based on a certain tag in a prominent view. This is deeactivated by default and only activated in live Commons deployments. |
+| `REACT_APP_SHOW_REQUEST_TOKENS_BUTTON` | Shows a second button on the `/faucet` route to request Ocean Tokens in addition to Ether. Will only work in Ocean testnets.                                             |
+| `REACT_APP_ALLOW_PRICING`              | Activate pricing feature. Will show a price input during publish flow, and output prices for each data asset.                                                            |
+
 ## 👩‍🔬 Testing
 
 Test suite is setup with [Jest](https://jestjs.io) and [react-testing-library](https://github.com/kentcdodds/react-testing-library) for unit testing, and [Cypress](https://www.cypress.io) for integration testing.

client/.env.local.example

@@ -52,6 +52,10 @@ REACT_APP_BRIZO_ADDRESS="0x0474ed05ba757dde575dfaaaa267d9e7f3643abc"
 # REACT_APP_FAUCET_URI="http://localhost:3001"
 # REACT_APP_BRIZO_ADDRESS="0x068ed00cf0441e4829d9784fcbe7b9e26d4bd8d0"
 
+#
+# 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

client/src/Routes.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import { Route, Switch } from 'react-router-dom'
+import { showChannels } from './config'
 
 import About from './routes/About'
 import Home from './routes/Home'
@@ -24,8 +25,12 @@ const Routes = () => (
         <Route component={Asset} path="/asset/:did" />
         <Route component={Faucet} path="/faucet" />
         <Route component={History} path="/history" />
-        <Route component={Channels} exact path="/channels" />
-        <Route component={Channel} path="/channels/:channel" />
+        {showChannels && (
+            <>
+                <Route component={Channels} exact path="/channels" />
+                <Route component={Channel} path="/channels/:channel" />
+            </>
+        )}
         <Route component={NotFound} />
     </Switch>
 )

client/src/components/organisms/Header.tsx

@@ -4,7 +4,7 @@ import { ReactComponent as Logo } from '@oceanprotocol/art/logo/logo.svg'
 import AccountStatus from '../molecules/AccountStatus'
 import styles from './Header.module.scss'
 
-import menu from '../../data/menu.json'
+import menu from '../../data/menu'
 import meta from '../../data/meta.json'
 
 const MenuItem = ({ item }: { item: any }) => (

client/src/components/templates/Asset/AssetDetails.tsx

@@ -7,7 +7,6 @@ import CategoryLink from '../../atoms/CategoryLink'
 import styles from './AssetDetails.module.scss'
 import AssetFilesDetails from './AssetFilesDetails'
 import Report from './Report'
-import { allowPricing } from '../../../config'
 import Web3 from 'web3'
 
 interface AssetDetailsProps {

client/src/config.ts

@@ -28,6 +28,7 @@ export const faucetUri =
 //
 export const verbose = true
 export const analyticsId = 'UA-60614729-11'
+export const showChannels = process.env.REACT_APP_SHOW_CHANNELS || false
 export const allowPricing = process.env.REACT_APP_ALLOW_PRICING || false
 export const showRequestTokens =
     process.env.REACT_APP_SHOW_REQUEST_TOKENS_BUTTON || false

client/src/data/menu.js

@@ -0,0 +1,28 @@
+import { showChannels } from '../config'
+
+const menu = [
+    {
+        title: 'Publish',
+        link: '/publish'
+    },
+    {
+        title: 'History',
+        link: '/history'
+    },
+    {
+        title: 'Faucet',
+        link: '/faucet'
+    },
+    {
+        title: 'About',
+        link: '/about'
+    }
+]
+
+showChannels &&
+    menu.unshift({
+        title: 'Channels',
+        link: '/channels'
+    })
+
+export default menu

client/src/data/menu.json

@@ -1,22 +0,0 @@
-[
-  {
-    "title": "Channels",
-    "link": "/channels"
-  },
-  {
-    "title": "Publish",
-    "link": "/publish"
-  },
-  {
-    "title": "History",
-    "link": "/history"
-  },
-  {
-    "title": "Faucet",
-    "link": "/faucet"
-  },
-  {
-    "title": "About",
-    "link": "/about"
-  }
-]

client/src/routes/Home/index.tsx

@@ -12,6 +12,7 @@ import AssetsLatest from '../../components/organisms/AssetsLatest'
 import ChannelTeaser from '../../components/organisms/ChannelTeaser'
 import Search from './Search'
 import withTracker from '../../hoc/withTracker'
+import { showChannels } from '../../config'
 
 interface HomeProps {
     history: History
@@ -44,8 +45,12 @@ class Home extends PureComponent<HomeProps, HomeState> {
                 </Content>
 
                 <Content wide>
-                    <h2 className={styles.title}>Featured Channel</h2>
-                    <ChannelTeaser channel="ai-for-good" />
+                    {showChannels && (
+                        <>
+                            <h2 className={styles.title}>Featured Channel</h2>
+                            <ChannelTeaser channel="ai-for-good" />
+                        </>
+                    )}
                     <AssetsLatest />
                 </Content>