chainId switching mechanism

app.config.js

@@ -3,9 +3,12 @@ module.exports = {
     process.env.METADATACACHE_URI ||
     'https://aquarius.mainnet.oceanprotocol.com',
 
-  // List of supported chainIds which metadata cache queries
-  // will return by default
-  chainIds: [1, 3, 4, 137, 1287],
+  // List of chainIds which metadata cache queries will return by default.
+  // This preselects the Chains user preferences.
+  chainIds: [1, 137],
+
+  // List of all supported chainIds. Used to populate the Chains user preferences list.
+  chainIdsSupported: [1, 3, 4, 137, 1287],
 
   infuraProjectId: process.env.GATSBY_INFURA_PROJECT_ID || 'xxx',
 

src/components/atoms/NetworkName.module.css

@@ -9,6 +9,6 @@
   display: inline-block;
   width: 1.2em;
   height: 1.2em;
-  fill: var(--color-secondary);
-  margin-right: calc(var(--spacer) / 12);
+  fill: currentColor;
+  margin-right: calc(var(--spacer) / 8);
 }

src/components/molecules/UserPreferences/Chain.module.css

@@ -1,30 +1,37 @@
-.buttons {
-  composes: buttons from './Appearance.module.css';
+.chains {
+  composes: box from '../../atoms/Box.module.css';
+  box-shadow: none;
+  padding: 0;
 }
 
-.button {
-  composes: button from './Appearance.module.css';
+.radioWrap {
+  composes: radioWrap from '../../atoms/Input/InputElement.module.css';
+  padding: calc(var(--spacer) / 6) calc(var(--spacer) / 3);
+  border-bottom: 1px solid var(--border-color);
 }
 
-.button span {
-  display: block;
-  font-size: var(--font-size-small);
-  font-family: var(--font-family-base);
+.radioWrap:last-child {
+  border-bottom: none;
+}
+
+.input {
+  composes: checkbox from '../../atoms/Input/InputElement.module.css';
+  vertical-align: baseline;
+  margin-right: calc(var(--spacer) / 3);
+  margin-top: 0;
+}
+
+.radioLabel {
+  composes: radioLabel from '../../atoms/Input/InputElement.module.css';
   font-weight: var(--font-weight-base);
-  margin-top: calc(var(--spacer) / 10);
+  display: flex;
+  align-items: center;
+  margin: 0;
+  padding: 0;
+  width: 100%;
 }
 
-.selected {
-  composes: selected from './Appearance.module.css';
-}
-
-.chains div[class*='boxSelectionsWrapper'] {
-  display: grid;
-  gap: calc(var(--spacer) / 4);
-  grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr));
-  padding-bottom: calc(var(--spacer) / 8);
-}
-
-.chains label[class*='boxSelection'] {
-  padding: calc(var(--spacer) / 3) calc(var(--spacer) / 4) !important;
+.input:checked + span {
+  color: var(--font-color-text);
+  font-weight: var(--font-weight-bold);
 }

src/components/molecules/UserPreferences/Chain.tsx

@@ -1,59 +1,50 @@
-import { ConfigHelperConfig } from '@oceanprotocol/lib'
-import React, { ReactElement, ChangeEvent } from 'react'
-import { useOcean } from '../../../providers/Ocean'
-import { getOceanConfig } from '../../../utils/ocean'
-import FormHelp from '../../atoms/Input/Help'
+import React, { ChangeEvent, ReactElement } from 'react'
 import Label from '../../atoms/Input/Label'
-import BoxSelection, { BoxSelectionOption } from '../FormFields/BoxSelection'
-import { ReactComponent as EthIcon } from '../../../images/eth.svg'
-import { ReactComponent as PolygonIcon } from '../../../images/polygon.svg'
-import { ReactComponent as MoonbeamIcon } from '../../../images/moonbeam.svg'
+import { useUserPreferences } from '../../../providers/UserPreferences'
+import { useSiteMetadata } from '../../../hooks/useSiteMetadata'
+import NetworkName from '../../atoms/NetworkName'
+import { removeItemFromArray } from '../../../utils'
+import FormHelp from '../../atoms/Input/Help'
 import styles from './Chain.module.css'
 
 export default function Chain(): ReactElement {
-  const { config, connect } = useOcean()
+  const { appConfig } = useSiteMetadata()
+  const { chainIds, setChainIds } = useUserPreferences()
 
-  async function connectOcean(event: ChangeEvent<HTMLInputElement>) {
-    const config = getOceanConfig(event.target.value)
-    await connect(config)
-  }
+  function handleChainChanged(e: ChangeEvent<HTMLInputElement>) {
+    const { value } = e.target
 
-  function isNetworkSelected(oceanConfig: string) {
-    return (config as ConfigHelperConfig).network === oceanConfig
-  }
+    // storing all chainId everywhere as a number so convert from here
+    const valueAsNumber = Number(value)
 
-  const options: BoxSelectionOption[] = [
-    {
-      name: 'mainnet',
-      checked: isNetworkSelected('mainnet'),
-      title: 'ETH',
-      text: 'Mainnet',
-      icon: <EthIcon />
-    },
-    {
-      name: 'polygon',
-      checked: isNetworkSelected('polygon'),
-      title: 'Polygon',
-      text: 'Mainnet',
-      icon: <PolygonIcon />
-    },
-    {
-      name: 'moonbeamalpha',
-      checked: isNetworkSelected('moonbeamalpha'),
-      title: 'Moonbase Alpha',
-      text: 'Testnet',
-      icon: <MoonbeamIcon />
+    const newChainIds = chainIds.includes(valueAsNumber)
+      ? [...removeItemFromArray(chainIds, valueAsNumber)]
+      : [...chainIds, valueAsNumber]
+    setChainIds(newChainIds)
   }
-  ]
 
   return (
-    <li className={styles.chains}>
-      <Label htmlFor="">Chain</Label>
-      <BoxSelection
-        options={options}
-        name="chain"
-        handleChange={connectOcean}
+    <li>
+      <Label htmlFor="chains">Chains</Label>
+      <div className={styles.chains}>
+        {appConfig.chainIdsSupported.map((chainId) => (
+          <div className={styles.radioWrap} key={chainId}>
+            <label className={styles.radioLabel} htmlFor={`opt-${chainId}`}>
+              <input
+                className={styles.input}
+                id={`opt-${chainId}`}
+                type="checkbox"
+                name="chainIds"
+                value={chainId}
+                onChange={handleChainChanged}
+                defaultChecked={chainIds.includes(chainId)}
               />
+              <NetworkName key={chainId} networkId={chainId} />
+            </label>
+          </div>
+        ))}
+      </div>
+
       <FormHelp>Switch the data source for the interface.</FormHelp>
     </li>
   )

src/components/molecules/UserPreferences/Debug.tsx

@@ -1,23 +1,21 @@
 import React, { ReactElement } from 'react'
 import { useUserPreferences } from '../../../providers/UserPreferences'
-import FormHelp from '../../atoms/Input/Help'
-import InputElement from '../../atoms/Input/InputElement'
+import Input from '../../atoms/Input'
 
 export default function Debug(): ReactElement {
   const { debug, setDebug } = useUserPreferences()
 
   return (
     <li>
-      <InputElement
+      <Input
+        label="Debug"
+        help="Show geeky information in some places, and in your console."
         name="debug"
         type="checkbox"
-        options={['Debug Mode']}
+        options={['Activate Debug Mode']}
         defaultChecked={debug === true}
         onChange={() => setDebug(!debug)}
       />
-      <FormHelp>
-        Show geeky information in some places, and in your console.
-      </FormHelp>
     </li>
   )
 }

src/components/molecules/UserPreferences/index.module.css

@@ -40,16 +40,16 @@
   max-width: 20rem;
 }
 
-.preferencesDetails li > div,
-.preferencesDetails li p {
-  margin: 0;
+.preferencesDetails > li > div,
+.preferencesDetails p:last-child {
+  margin-bottom: 0;
 }
 
 .preferencesDetails li p {
   margin-top: calc(var(--spacer) / 8);
 }
 
-.preferencesDetails li {
+.preferencesDetails > li {
   padding-top: calc(var(--spacer) / 3);
   padding-bottom: calc(var(--spacer) / 3);
 }

src/components/molecules/UserPreferences/index.tsx

@@ -11,16 +11,16 @@ import { darkModeConfig } from '../../../../app.config'
 import Chain from './Chain'
 
 export default function UserPreferences(): ReactElement {
-  // Calling this here because <Theme /> is not mounted on first load
+  // Calling this here because <Style /> is not mounted on first load
   const darkMode = useDarkMode(false, darkModeConfig)
 
   return (
     <Tooltip
       content={
         <ul className={styles.preferencesDetails}>
+          <Chain />
           <Currency />
           <Appearance darkMode={darkMode} />
-          {/* <Chain /> */}
           <Debug />
         </ul>
       }

src/components/pages/History/PublishedList.tsx

@@ -5,19 +5,18 @@ import AssetList from '../../organisms/AssetList'
 import axios from 'axios'
 import { queryMetadata } from '../../../utils/aquarius'
 import { useWeb3 } from '../../../providers/Web3'
-import { useOcean } from '../../../providers/Ocean'
 import { useSiteMetadata } from '../../../hooks/useSiteMetadata'
+import { useUserPreferences } from '../../../providers/UserPreferences'
 
 export default function PublishedList(): ReactElement {
   const { accountId } = useWeb3()
   const { appConfig } = useSiteMetadata()
+  const { chainIds } = useUserPreferences()
 
   const [queryResult, setQueryResult] = useState<QueryResult>()
   const [isLoading, setIsLoading] = useState(false)
   const [page, setPage] = useState<number>(1)
 
-  const source = axios.CancelToken.source()
-
   useEffect(() => {
     async function getPublished() {
       if (!accountId) return
@@ -34,6 +33,8 @@ export default function PublishedList(): ReactElement {
         sort: { created: -1 }
       }
       try {
+        const source = axios.CancelToken.source()
+
         queryResult || setIsLoading(true)
         const result = await queryMetadata(
           queryPublishedAssets,
@@ -48,7 +49,7 @@ export default function PublishedList(): ReactElement {
       }
     }
     getPublished()
-  }, [accountId, page, appConfig.metadataCacheUri])
+  }, [accountId, page, appConfig.metadataCacheUri, chainIds])
 
   return accountId ? (
     <AssetList

src/components/pages/Home.tsx

@@ -14,6 +14,7 @@ import { queryMetadata } from '../../utils/aquarius'
 import { getHighestLiquidityDIDs } from '../../utils/subgraph'
 import { DDO, Logger } from '@oceanprotocol/lib'
 import { useSiteMetadata } from '../../hooks/useSiteMetadata'
+import { useUserPreferences } from '../../providers/UserPreferences'
 
 async function getQueryHighest(
   chainIds: number[]
@@ -122,14 +123,13 @@ function SectionQueryResult({
 
 export default function HomePage(): ReactElement {
   const [queryAndDids, setQueryAndDids] = useState<[SearchQuery, string]>()
-  // TODO: appConfig.chainIds needs to come from UserPreferences instead
-  const { appConfig } = useSiteMetadata()
+  const { chainIds } = useUserPreferences()
 
   useEffect(() => {
-    getQueryHighest(appConfig.chainIds).then((results) => {
+    getQueryHighest(chainIds).then((results) => {
       setQueryAndDids(results)
     })
-  }, [appConfig.chainIds])
+  }, [chainIds])
 
   return (
     <>
@@ -152,7 +152,7 @@ export default function HomePage(): ReactElement {
 
       <SectionQueryResult
         title="Recently Published"
-        query={getQueryLatest(appConfig.chainIds)}
+        query={getQueryLatest(chainIds)}
         action={
           <Button style="text" to="/search?sort=created&sortOrder=desc">
             All data sets and algorithms →

src/hooks/useSiteMetadata.ts

@@ -23,6 +23,7 @@ interface UseSiteMetadata {
     metadataCacheUri: string
     infuraProjectId: string
     chainIds: number[]
+    chainIdsSupported: number[]
     marketFeeAddress: string
     currencies: string[]
     portisId: string
@@ -56,6 +57,7 @@ const query = graphql`
           metadataCacheUri
           infuraProjectId
           chainIds
+          chainIdsSupported
           marketFeeAddress
           currencies
           portisId

src/providers/UserPreferences.tsx

@@ -18,8 +18,7 @@ interface UserPreferencesValue {
   bookmarks: {
     [network: string]: string[]
   }
-  addChainId: (chain: number) => void
-  removeChainId: (chain: number) => void
+  setChainIds: (chainIds: number[]) => void
   setDebug: (value: boolean) => void
   setCurrency: (value: string) => void
   addBookmark: (did: string) => void
@@ -57,8 +56,10 @@ function UserPreferencesProvider({
     localStorage?.currency || 'EUR'
   )
   const [locale, setLocale] = useState<string>()
-  const [chainIds, setChainIds] = useState(appConfig.chainIds)
   const [bookmarks, setBookmarks] = useState(localStorage?.bookmarks || {})
+  const [chainIds, setChainIds] = useState(
+    localStorage?.chainIds || appConfig.chainIds
+  )
 
   // Write values to localStorage on change
   useEffect(() => {
@@ -78,16 +79,6 @@ function UserPreferencesProvider({
     setLocale(window.navigator.language)
   }, [])
 
-  function addChainId(chain: number): void {
-    const newChainIds = [...chainIds, chain]
-    setChainIds(newChainIds)
-  }
-
-  function removeChainId(chain: number): void {
-    const newChainIds = chainIds.filter((chainId) => chainId !== chain)
-    setChainIds(newChainIds)
-  }
-
   // function addBookmark(didToAdd: string): void {
   //   const newPinned = {
   //     ...bookmarks,
@@ -122,8 +113,7 @@ function UserPreferencesProvider({
           locale,
           chainIds,
           bookmarks,
-          addChainId,
-          removeChainId,
+          setChainIds,
           setDebug,
           setCurrency
           // addBookmark,

src/utils/index.ts

@@ -59,3 +59,11 @@ export function sleep(ms: number): Promise<void> {
     setTimeout(resolve, ms)
   })
 }
+
+export function removeItemFromArray<T>(arr: Array<T>, value: T): Array<T> {
+  const index = arr.indexOf(value)
+  if (index > -1) {
+    arr.splice(index, 1)
+  }
+  return arr
+}