Menu refactor (#672)

* layout flow and space saving tinkering

* different tactic

* different minimal network name

* next layout flow iteration

* move chains preference into its own action

* mobile view tweaks

* more network icons

* fix and clean up ocean token metadata

* refactor and clean up Chains component

* naming cleanup

src/components/atoms/Logo.module.css

@@ -1,6 +1,6 @@
 .logo {
-  width: 4rem;
-  height: 4rem;
+  width: 2.5rem;
+  height: 2.5rem;
   margin: 0;
 }
 

src/components/atoms/NetworkName.module.css

@@ -12,3 +12,17 @@
   fill: currentColor;
   margin-right: calc(var(--spacer) / 8);
 }
+
+.minimal {
+  position: relative;
+}
+
+.minimal .name {
+  opacity: 0;
+  width: 0;
+}
+
+.minimal:hover .name {
+  width: auto;
+  opacity: 1;
+}

src/components/atoms/NetworkName.tsx

@@ -1,8 +1,9 @@
 import { graphql, useStaticQuery } from 'gatsby'
-import React, { FunctionComponent, ReactElement } from 'react'
+import React, { ReactElement } from 'react'
 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 { ReactComponent as BscIcon } from '../../images/bsc.svg'
 import {
   EthereumListsChain,
   getNetworkDataById,
@@ -25,18 +26,16 @@ const networksQuery = graphql`
   }
 `
 
-const icons: {
-  [key: string]: FunctionComponent<React.SVGProps<SVGSVGElement>>
-} = { ETH: EthIcon, Polygon: PolygonIcon, Moonbeam: MoonbeamIcon }
-
 export function NetworkIcon({ name }: { name: string }): ReactElement {
   const IconMapped = name.includes('ETH')
-    ? icons.ETH
+    ? EthIcon
     : name.includes('Polygon')
-    ? icons.Polygon
+    ? PolygonIcon
     : name.includes('Moon')
-    ? icons.Moonbeam
-    : icons[name.trim()]
+    ? MoonbeamIcon
+    : name.includes('BSC')
+    ? BscIcon
+    : EthIcon // ETH icon as fallback
 
   return IconMapped ? <IconMapped className={styles.icon} /> : null
 }
@@ -58,10 +57,13 @@ export default function NetworkName({
 
   return (
     <span
-      className={`${styles.network} ${className || ''}`}
-      title={minimal ? networkName : null}
+      className={`${styles.network} ${minimal ? styles.minimal : null} ${
+        className || ''
+      }`}
+      title={networkName}
     >
-      <NetworkIcon name={networkName} /> {!minimal && networkName}
+      <NetworkIcon name={networkName} />{' '}
+      <span className={styles.name}>{networkName}</span>
     </span>
   )
 }

src/components/molecules/Menu.module.css

@@ -1,28 +1,59 @@
 .menu {
   width: 100%;
+  padding: calc(var(--spacer) / 2);
   display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: calc(var(--spacer) / 2) var(--spacer);
-}
-
-.logoUnit {
-  display: flex;
+  flex-wrap: wrap;
   align-items: center;
 }
 
-.logoUnit svg {
-  margin-left: -0.5rem;
-  margin-right: 0.5rem;
+.logo {
+  white-space: nowrap;
+  display: flex;
+  align-items: center;
+  order: 1;
+}
+
+.navigation {
+  order: 3;
+  width: 100%;
+  margin-top: calc(var(--spacer) / 2);
+  text-align: center;
+  border-top: 1px solid var(--border-color);
+  border-bottom: 1px solid var(--border-color);
+  margin-left: -1rem;
+  margin-right: -1rem;
+  width: calc(100% + 2rem);
+}
+
+.actions {
+  display: flex;
+  align-self: flex-start;
+  margin-left: auto;
+  order: 2;
 }
 
 .title {
   display: none;
 }
 
-@media screen and (min-width: 40rem) {
+@media screen and (min-width: 42rem) {
+  .navigation {
+    order: 2;
+    width: auto;
+    margin: 0;
+    text-align: left;
+    border: none;
+  }
+}
+
+@media screen and (min-width: 55rem) {
+  .menu {
+    padding: var(--spacer);
+  }
+
   .title {
     margin: 0;
+    margin-right: var(--spacer);
     display: block;
     color: var(--color-secondary);
     font-size: var(--font-size-h4);
@@ -34,6 +65,7 @@
   overflow-y: hidden;
   overflow-x: auto;
   -webkit-overflow-scrolling: touch;
+  -ms-overflow-style: none;
 }
 
 .navigation::-webkit-scrollbar,
@@ -44,19 +76,13 @@
 .navigation li {
   display: inline-block;
   vertical-align: middle;
-  margin-left: var(--spacer);
+  margin-right: calc(var(--spacer) / 3);
+  margin-left: calc(var(--spacer) / 3);
 }
 
-@media screen and (min-width: 60rem) {
-  .navigation li {
-    margin-left: calc(var(--spacer) * 2);
-  }
-}
-
-.navigation button,
 .link {
   display: block;
-  padding: calc(var(--spacer) / 2);
+  padding: calc(var(--spacer) / 4) calc(var(--spacer) / 2);
   text-transform: uppercase;
   color: var(--color-secondary);
   font-weight: var(--font-weight-bold);
@@ -65,12 +91,7 @@
   z-index: 1;
 }
 
-.navigation button {
-  text-transform: none;
-  padding-top: calc(var(--spacer) / 4);
-  padding-bottom: calc(var(--spacer) / 4);
-}
-
+.actions,
 .link:hover,
 .link:focus,
 .link:active {
@@ -86,3 +107,11 @@
 .link:last-child {
   padding-right: 0;
 }
+
+.logo svg {
+  margin-right: calc(var(--spacer) / 3);
+}
+
+.actions button {
+  text-transform: none;
+}

src/components/molecules/Menu.tsx

@@ -7,6 +7,7 @@ import { useSiteMetadata } from '../../hooks/useSiteMetadata'
 import UserPreferences from './UserPreferences'
 import Badge from '../atoms/Badge'
 import Logo from '../atoms/Logo'
+import Networks from './UserPreferences/Networks'
 
 const Wallet = loadable(() => import('./Wallet'))
 
@@ -35,8 +36,8 @@ export default function Menu(): ReactElement {
 
   return (
     <nav className={styles.menu}>
-      <Link to="/" className={styles.logoUnit}>
-        <Logo />
+      <Link to="/" className={styles.logo}>
+        <Logo noWordmark />
         <h1 className={styles.title}>
           {siteTitle} <Badge label="beta" />
         </h1>
@@ -48,13 +49,13 @@ export default function Menu(): ReactElement {
             <MenuLink item={item} />
           </li>
         ))}
-        <li>
-          <Wallet />
-        </li>
-        <li>
-          <UserPreferences />
-        </li>
       </ul>
+
+      <div className={styles.actions}>
+        <Networks />
+        <Wallet />
+        <UserPreferences />
+      </div>
     </nav>
   )
 }

src/components/molecules/UserPreferences/Chain.tsx

@@ -1,114 +0,0 @@
-import React, { ChangeEvent, ReactElement } from 'react'
-import Label from '../../atoms/Input/Label'
-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'
-import { useStaticQuery, graphql } from 'gatsby'
-import { EthereumListsChain, getNetworkDataById } from '../../../utils/web3'
-
-const networksQuery = graphql`
-  query {
-    allNetworksMetadataJson {
-      edges {
-        node {
-          chain
-          network
-          networkId
-          chainId
-        }
-      }
-    }
-  }
-`
-
-function ChainItem({
-  isDefaultChecked,
-  chainId,
-  handleChainChanged
-}: {
-  isDefaultChecked: boolean
-  chainId: number
-  handleChainChanged: (e: ChangeEvent<HTMLInputElement>) => void
-}) {
-  return (
-    <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={isDefaultChecked}
-        />
-        <NetworkName key={chainId} networkId={chainId} />
-      </label>
-    </div>
-  )
-}
-
-export default function Chain(): ReactElement {
-  const data = useStaticQuery(networksQuery)
-  const networksList: { node: EthereumListsChain }[] =
-    data.allNetworksMetadataJson.edges
-
-  const { appConfig } = useSiteMetadata()
-  const { chainIds, setChainIds } = useUserPreferences()
-
-  function handleChainChanged(e: ChangeEvent<HTMLInputElement>) {
-    const { value } = e.target
-
-    // storing all chainId everywhere as a number so convert from here
-    const valueAsNumber = Number(value)
-
-    const newChainIds = chainIds.includes(valueAsNumber)
-      ? [...removeItemFromArray(chainIds, valueAsNumber)]
-      : [...chainIds, valueAsNumber]
-    setChainIds(newChainIds)
-  }
-
-  const chainsMain = appConfig.chainIdsSupported
-    .filter((chainId: number) => {
-      const networkData = getNetworkDataById(networksList, chainId)
-      return networkData.network === 'mainnet'
-    })
-    .map((chainId) => (
-      <ChainItem
-        key={chainId}
-        chainId={chainId}
-        isDefaultChecked={chainIds.includes(chainId)}
-        handleChainChanged={handleChainChanged}
-      />
-    ))
-
-  const chainsTest = appConfig.chainIdsSupported
-    .filter((chainId: number) => {
-      const networkData = getNetworkDataById(networksList, chainId)
-      return networkData.network !== 'mainnet'
-    })
-    .map((chainId) => (
-      <ChainItem
-        key={chainId}
-        chainId={chainId}
-        isDefaultChecked={chainIds.includes(chainId)}
-        handleChainChanged={handleChainChanged}
-      />
-    ))
-
-  return (
-    <li>
-      <Label htmlFor="chains">Chains</Label>
-
-      <h4 className={styles.titleGroup}>Main</h4>
-      <div className={styles.chains}>{chainsMain}</div>
-      <h4 className={styles.titleGroup}>Test</h4>
-      <div className={styles.chains}>{chainsTest}</div>
-
-      <FormHelp>Switch the data source for the interface.</FormHelp>
-    </li>
-  )
-}

src/components/molecules/UserPreferences/Networks/NetworkItem.module.css

@@ -1,18 +1,5 @@
-.titleGroup {
-  font-size: var(--font-size-small);
-  margin-bottom: calc(var(--spacer) / 6);
-  margin-top: calc(var(--spacer) / 2);
-  color: var(--color-secondary);
-}
-
-.chains {
-  composes: box from '../../atoms/Box.module.css';
-  box-shadow: none;
-  padding: 0;
-}
-
 .radioWrap {
-  composes: radioWrap from '../../atoms/Input/InputElement.module.css';
+  composes: radioWrap from '../../../atoms/Input/InputElement.module.css';
   padding: calc(var(--spacer) / 6) calc(var(--spacer) / 3);
   border-bottom: 1px solid var(--border-color);
 }
@@ -22,14 +9,14 @@
 }
 
 .input {
-  composes: checkbox from '../../atoms/Input/InputElement.module.css';
+  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';
+  composes: radioLabel from '../../../atoms/Input/InputElement.module.css';
   font-weight: var(--font-weight-base);
   display: flex;
   align-items: center;

src/components/molecules/UserPreferences/Networks/NetworkItem.tsx

@@ -0,0 +1,42 @@
+import React, { ChangeEvent, ReactElement } from 'react'
+import { useUserPreferences } from '../../../../providers/UserPreferences'
+import { removeItemFromArray } from '../../../../utils'
+import NetworkName from '../../../atoms/NetworkName'
+import styles from './NetworkItem.module.css'
+
+export default function NetworkItem({
+  chainId
+}: {
+  chainId: number
+}): ReactElement {
+  const { chainIds, setChainIds } = useUserPreferences()
+
+  function handleNetworkChanged(e: ChangeEvent<HTMLInputElement>) {
+    const { value } = e.target
+
+    // storing all chainId everywhere as a number so convert from here
+    const valueAsNumber = Number(value)
+
+    const newChainIds = chainIds.includes(valueAsNumber)
+      ? [...removeItemFromArray(chainIds, valueAsNumber)]
+      : [...chainIds, valueAsNumber]
+    setChainIds(newChainIds)
+  }
+
+  return (
+    <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={handleNetworkChanged}
+          defaultChecked={chainIds.includes(chainId)}
+        />
+        <NetworkName key={chainId} networkId={chainId} />
+      </label>
+    </div>
+  )
+}

src/components/molecules/UserPreferences/Networks/NetworksList.module.css

@@ -0,0 +1,12 @@
+.titleGroup {
+  font-size: var(--font-size-small);
+  margin-bottom: calc(var(--spacer) / 6);
+  margin-top: calc(var(--spacer) / 2);
+  color: var(--color-secondary);
+}
+
+.networks {
+  composes: box from '../../../atoms/Box.module.css';
+  box-shadow: none;
+  padding: 0;
+}

src/components/molecules/UserPreferences/Networks/NetworksList.tsx

@@ -0,0 +1,22 @@
+import React, { ReactElement } from 'react'
+import NetworkItem from './NetworkItem'
+import styles from './NetworksList.module.css'
+
+export default function NetworksList({
+  title,
+  networks
+}: {
+  title: string
+  networks: number[]
+}): ReactElement {
+  const content = networks.map((chainId) => (
+    <NetworkItem key={chainId} chainId={chainId} />
+  ))
+
+  return (
+    <>
+      <h4 className={styles.titleGroup}>{title}</h4>
+      <div className={styles.networks}>{content}</div>
+    </>
+  )
+}

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

@@ -0,0 +1,3 @@
+.network {
+  margin-right: calc(var(--spacer) / 3);
+}

src/components/molecules/UserPreferences/Networks/index.tsx

@@ -0,0 +1,86 @@
+import React, { ReactElement } from 'react'
+import Label from '../../../atoms/Input/Label'
+import { useSiteMetadata } from '../../../../hooks/useSiteMetadata'
+import FormHelp from '../../../atoms/Input/Help'
+import { useStaticQuery, graphql } from 'gatsby'
+import { EthereumListsChain, getNetworkDataById } from '../../../../utils/web3'
+import Tooltip from '../../../atoms/Tooltip'
+import { ReactComponent as Caret } from '../../../../images/caret.svg'
+import { ReactComponent as Network } from '../../../../images/network.svg'
+import NetworksList from './NetworksList'
+import stylesIndex from '../index.module.css'
+import styles from './index.module.css'
+
+const networksQuery = graphql`
+  query {
+    allNetworksMetadataJson {
+      edges {
+        node {
+          chain
+          network
+          networkId
+          chainId
+        }
+      }
+    }
+  }
+`
+
+function filterNetworksByType(
+  type: 'mainnet' | 'testnet',
+  chainIds: number[],
+  networksList: { node: EthereumListsChain }[]
+) {
+  const finalNetworks = chainIds.filter((chainId: number) => {
+    const networkData = getNetworkDataById(networksList, chainId)
+
+    // HEADS UP! Only networkData.network === 'mainnet' is consistent
+    // while not every test network in the network data has 'testnet'
+    // in its place. So for the 'testnet' case filter for all non-'mainnet'.
+    return type === 'mainnet'
+      ? networkData.network === type
+      : networkData.network !== 'mainnet'
+  })
+  return finalNetworks
+}
+
+export default function Networks(): ReactElement {
+  const data = useStaticQuery(networksQuery)
+  const networksList: { node: EthereumListsChain }[] =
+    data.allNetworksMetadataJson.edges
+
+  const { appConfig } = useSiteMetadata()
+
+  const networksMain = filterNetworksByType(
+    'mainnet',
+    appConfig.chainIdsSupported,
+    networksList
+  )
+
+  const networksTest = filterNetworksByType(
+    'testnet',
+    appConfig.chainIdsSupported,
+    networksList
+  )
+
+  return (
+    <Tooltip
+      content={
+        <ul className={stylesIndex.preferencesDetails}>
+          <li>
+            <Label htmlFor="chains">Networks</Label>
+            <FormHelp>Switch the data source for the interface.</FormHelp>
+
+            <NetworksList title="Main" networks={networksMain} />
+            <NetworksList title="Test" networks={networksTest} />
+          </li>
+        </ul>
+      }
+      trigger="click focus"
+      className={`${stylesIndex.preferences} ${styles.network}`}
+    >
+      <Network aria-label="Networks" className={stylesIndex.icon} />
+      <Caret aria-hidden="true" />
+    </Tooltip>
+  )
+}

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

@@ -1,7 +1,11 @@
 .preferences {
-  padding: calc(var(--spacer) / 5) calc(var(--spacer) / 4)
-    calc(var(--spacer) / 5) 0;
+  padding: calc(var(--spacer) / 6) calc(var(--spacer) / 3);
   cursor: pointer;
+  border: 1px solid var(--border-color);
+  border-radius: var(--border-radius);
+  margin-left: calc(var(--spacer) / 3);
+  background-color: var(--background-content);
+  white-space: nowrap;
 }
 
 .preferences svg {
@@ -14,8 +18,8 @@
 }
 
 .preferences svg:last-child {
-  width: 1em;
-  height: 1em;
+  width: var(--font-size-small);
+  height: var(--font-size-small);
   fill: var(--border-color);
   margin-left: calc(var(--spacer) / 4);
   transition: transform 0.2s ease-out;
@@ -24,8 +28,8 @@
 .icon {
   fill: var(--brand-grey-light);
   transition: 0.2s ease-out;
-  width: 1.2em;
-  height: 1.2em;
+  width: 1em;
+  height: 1em;
 }
 
 .preferences:hover .icon,

src/components/molecules/UserPreferences/index.tsx

@@ -8,7 +8,6 @@ import { ReactComponent as Caret } from '../../../images/caret.svg'
 import useDarkMode from 'use-dark-mode'
 import Appearance from './Appearance'
 import { darkModeConfig } from '../../../../app.config'
-import Chain from './Chain'
 
 export default function UserPreferences(): ReactElement {
   // Calling this here because <Style /> is not mounted on first load
@@ -18,7 +17,6 @@ export default function UserPreferences(): ReactElement {
     <Tooltip
       content={
         <ul className={styles.preferencesDetails}>
-          <Chain />
           <Currency />
           <Appearance darkMode={darkMode} />
           <Debug />

src/components/molecules/Wallet/Account.module.css

@@ -5,14 +5,15 @@
   text-transform: uppercase;
   border: 1px solid var(--border-color);
   border-radius: var(--border-radius);
-  padding: calc(var(--spacer) / 4);
+  padding: calc(var(--spacer) / 6) calc(var(--spacer) / 3);
   white-space: nowrap;
   background: var(--background-content);
   margin: 0;
   transition: border 0.2s ease-out;
   cursor: pointer;
-  min-width: 190px;
   height: 100%;
+  display: flex;
+  align-items: center;
 }
 
 .button,
@@ -37,15 +38,25 @@
   overflow: hidden;
   display: inline-block;
   vertical-align: middle;
-  margin-right: calc(var(--spacer) / 6);
 }
 
 .address {
+  display: none;
   text-transform: none;
   border-right: 1px solid var(--border-color);
   padding-right: calc(var(--spacer) / 3);
 }
 
+@media screen and (min-width: 60rem) {
+  .address {
+    display: inline-block;
+  }
+
+  .blockies {
+    margin-right: calc(var(--spacer) / 6);
+  }
+}
+
 .button svg {
   width: 1em;
   height: 1em;

src/components/molecules/Wallet/Details.tsx

@@ -1,6 +1,5 @@
 import React, { ReactElement, useEffect, useState } from 'react'
 import { formatCurrency } from '@coingecko/cryptoformat'
-import { useOcean } from '../../../providers/Ocean'
 import { useUserPreferences } from '../../../providers/UserPreferences'
 import Button from '../../atoms/Button'
 import AddToken from '../../atoms/AddToken'
@@ -9,7 +8,7 @@ import { useWeb3 } from '../../../providers/Web3'
 
 import Web3Feedback from '../Web3Feedback'
 import styles from './Details.module.css'
-import { getOceanTokenData } from '../../../utils/ocean'
+import { getOceanConfig } from '../../../utils/ocean'
 
 export default function Details(): ReactElement {
   const {
@@ -21,7 +20,6 @@ export default function Details(): ReactElement {
     networkId,
     balance
   } = useWeb3()
-  const { oceanConfigs } = useOcean()
   const { locale } = useUserPreferences()
 
   const [mainCurrency, setMainCurrency] = useState<string>()
@@ -37,9 +35,14 @@ export default function Details(): ReactElement {
 
     setMainCurrency(networkData.nativeCurrency.symbol)
 
-    oceanConfigs &&
-      setOceanTokenMetadata(getOceanTokenData(networkId || 1, oceanConfigs))
-  }, [networkData, networkId, oceanConfigs])
+    const oceanConfig = getOceanConfig(networkId)
+
+    oceanConfig &&
+      setOceanTokenMetadata({
+        address: oceanConfig.oceanTokenAddress,
+        symbol: oceanConfig.oceanTokenSymbol
+      })
+  }, [networkData, networkId])
 
   // Handle network change for Portis
   // async function handlePortisNetworkChange(e: ChangeEvent<HTMLSelectElement>) {

src/components/molecules/Wallet/Network.module.css

@@ -3,7 +3,7 @@
   border-right: none;
   border-top-left-radius: var(--border-radius);
   border-bottom-left-radius: var(--border-radius);
-  padding: calc(var(--spacer) / 4) calc(var(--spacer) / 2);
+  padding: calc(var(--spacer) / 6) calc(var(--spacer) / 3);
   white-space: nowrap;
   margin-right: -3px;
   display: inline-flex;

src/components/molecules/Wallet/Network.tsx

@@ -1,11 +1,11 @@
 import React, { useState, useEffect, ReactElement } from 'react'
 import Status from '../../atoms/Status'
-import { ConfigHelper } from '@oceanprotocol/lib'
 import Badge from '../../atoms/Badge'
 import Tooltip from '../../atoms/Tooltip'
 import { useWeb3 } from '../../../providers/Web3'
 import NetworkName from '../../atoms/NetworkName'
 import styles from './Network.module.css'
+import { getOceanConfig } from '../../../utils/ocean'
 
 export default function Network(): ReactElement {
   const { networkId, isTestnet } = useWeb3()
@@ -19,9 +19,7 @@ export default function Network(): ReactElement {
 
     // Check networkId against ocean.js ConfigHelper configs
     // to figure out if network is supported.
-    const isSupportedOceanNetwork = Boolean(
-      new ConfigHelper().getConfig(network)
-    )
+    const isSupportedOceanNetwork = Boolean(getOceanConfig(network))
     setIsSupportedOceanNetwork(isSupportedOceanNetwork)
   }, [networkId])
 
@@ -32,7 +30,7 @@ export default function Network(): ReactElement {
           <Status state="error" className={styles.warning} />
         </Tooltip>
       )}
-      <NetworkName className={styles.name} networkId={networkId} />
+      <NetworkName className={styles.name} networkId={networkId} minimal />
       {isTestnet && <Badge label="Test" className={styles.badge} />}
     </div>
   ) : null

src/images/bsc.svg

@@ -0,0 +1,7 @@
+<svg width="17" height="17" viewBox="0 0 17 17" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.19853 7.14354L8.4999 3.84226L11.803 7.14529L13.724 5.22429L8.4999 0L3.27757 5.22255L5.19853 7.14354Z" />
+<path d="M3.84196 8.49969L1.92103 6.57873L0 8.49979L1.92093 10.4207L3.84196 8.49969Z" />
+<path d="M5.19854 9.85646L8.49991 13.1577L11.8029 9.85485L13.7249 11.7748L13.724 11.7758L8.49991 17L3.27475 11.7749L5.19854 9.85646Z" />
+<path d="M15.079 10.4217L17 8.50061L15.0791 6.57965L13.158 8.50071L15.079 10.4217Z" />
+<path d="M10.4484 8.499H10.4492L8.4999 6.54967L6.54967 8.49994L6.55235 8.50276L8.4999 10.4503L10.4492 8.50101L10.4501 8.49994L10.4484 8.499Z" />
+</svg>

src/images/network.svg

@@ -0,0 +1,3 @@
+<svg width="19" height="19" viewBox="0 0 19 19" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.474 6.115C4.674 6.115 4.868 6.144 5.05 6.201C5.74 5.428 6.505 4.724 7.333 4.101C7.298 3.955 7.279 3.802 7.279 3.646C7.279 3.429 7.315 3.22 7.381 3.025C6.452 2.361 5.444 1.802 4.37 1.371C3.365 1.992 2.488 2.802 1.788 3.752C2.307 4.672 2.924 5.529 3.626 6.309C3.882 6.185 4.169 6.115 4.474 6.115ZM2.516 8.072C2.516 7.797 2.574 7.535 2.675 7.299C2.047 6.607 1.478 5.863 0.98 5.07C0.355 6.312 0 7.715 0 9.201C0 10.92 0.474 12.529 1.295 13.906C1.589 12.252 2.146 10.687 2.915 9.254C2.665 8.926 2.516 8.515 2.516 8.072ZM9.236 1.689C9.753 1.689 10.221 1.89 10.572 2.218C11.593 1.779 12.668 1.441 13.787 1.226C12.436 0.447 10.87 0 9.2 0C8.061 0 6.971 0.209 5.964 0.588C6.763 0.983 7.525 1.443 8.241 1.963C8.533 1.789 8.872 1.689 9.236 1.689ZM12.162 10.908C12.284 10.654 12.457 10.429 12.671 10.252C12.093 8.475 11.178 6.848 9.999 5.449C9.765 5.549 9.507 5.603 9.235 5.603C8.81 5.603 8.419 5.466 8.098 5.238C7.388 5.777 6.731 6.381 6.134 7.041C6.322 7.34 6.431 7.693 6.431 8.072C6.431 8.275 6.4 8.472 6.341 8.658C8.058 9.804 10.035 10.592 12.162 10.908ZM14.701 13.551C14.727 13.922 14.742 14.295 14.742 14.672C14.742 15.336 14.7 15.99 14.62 16.633C16.18 15.494 17.368 13.875 17.967 11.994C17.257 12.166 16.529 12.289 15.786 12.359C15.613 12.896 15.214 13.328 14.701 13.551ZM11.704 12.224C9.432 11.847 7.327 10.98 5.494 9.74C5.196 9.922 4.847 10.029 4.473 10.029C4.334 10.029 4.201 10.015 4.071 9.988C3.194 11.65 2.633 13.505 2.472 15.472C3.348 16.412 4.416 17.169 5.617 17.677C7.109 15.384 9.193 13.488 11.704 12.224ZM15.376 2.381C13.901 2.524 12.493 2.895 11.183 3.449C11.189 3.515 11.193 3.58 11.193 3.646C11.193 3.955 11.119 4.246 10.992 4.505C12.303 6.044 13.319 7.835 13.961 9.796C14.758 9.812 15.438 10.298 15.731 10.991C16.617 10.901 17.479 10.731 18.309 10.487C18.369 10.067 18.401 9.637 18.401 9.2C18.4 6.496 17.234 4.064 15.376 2.381ZM12.689 13.269C10.345 14.367 8.385 16.058 6.966 18.125C7.681 18.304 8.429 18.4 9.2 18.4C10.587 18.4 11.902 18.091 13.082 17.541C13.272 16.613 13.372 15.654 13.372 14.672C13.372 14.317 13.356 13.965 13.329 13.617C13.093 13.541 12.876 13.424 12.689 13.269Z" />
+</svg>

src/utils/ocean.ts

@@ -78,13 +78,3 @@ export async function getOceanBalance(
     Logger.error(`ERROR: Failed to get the balance: ${e.message}`)
   }
 }
-
-export function getOceanTokenData(
-  networkId: number,
-  configs: ConfigHelperConfig[]
-): { address: string; symbol: string } {
-  const { oceanTokenSymbol, oceanTokenAddress } = configs.filter(
-    (config) => config.networkId === networkId
-  )[0]
-  return { address: oceanTokenAddress, symbol: oceanTokenSymbol }
-}