add network icon components

src/components/atoms/Network.module.css

@@ -0,0 +1,14 @@
+.network {
+  text-transform: capitalize;
+  display: inline-flex;
+  align-items: center;
+  color: var(--color-secondary);
+}
+
+.icon {
+  display: inline-block;
+  width: 1.2em;
+  height: 1.2em;
+  fill: var(--color-secondary);
+  margin-right: calc(var(--spacer) / 12);
+}

src/components/atoms/Network.tsx

@@ -0,0 +1,55 @@
+import { graphql, useStaticQuery } from 'gatsby'
+import React, { FunctionComponent, ReactElement } from 'react'
+import { ReactComponent as EthIcon } from '../../images/eth.svg'
+import { ReactComponent as PolygonIcon } from '../../images/polygon.svg'
+import {
+  EthereumListsChain,
+  getNetworkData,
+  getNetworkDisplayName
+} from '../../utils/web3'
+import styles from './Network.module.css'
+
+const networksQuery = graphql`
+  query {
+    allNetworksMetadataJson {
+      edges {
+        node {
+          chain
+          network
+          networkId
+          chainId
+        }
+      }
+    }
+  }
+`
+
+const icons: {
+  [key: string]: FunctionComponent<React.SVGProps<SVGSVGElement>>
+} = { ETH: EthIcon, Matic: PolygonIcon }
+
+export function NetworkIcon({ name }: { name: string }): ReactElement {
+  const IconMapped = name.includes('ETH') ? icons.ETH : icons[name.trim()]
+
+  return IconMapped ? <IconMapped className={styles.icon} /> : null
+}
+
+export default function Network({
+  networkId,
+  className
+}: {
+  networkId: number
+  className?: string
+}): ReactElement {
+  const data = useStaticQuery(networksQuery)
+  const networksList: { node: EthereumListsChain }[] =
+    data.allNetworksMetadataJson.edges
+  const networkData = getNetworkData(networksList, networkId)
+  const networkName = getNetworkDisplayName(networkData, networkId)
+
+  return (
+    <span className={`${styles.network} ${className || ''}`}>
+      <NetworkIcon name={networkName} /> {networkName}
+    </span>
+  )
+}

src/components/molecules/AssetTeaser.module.css

@@ -57,11 +57,6 @@
   display: block;
 }
 
-.date {
-  font-size: var(--font-size-mini);
-  margin-top: calc(var(--spacer) / 2);
-}
-
 .typeDetails {
   position: absolute;
   top: calc(var(--spacer) / 3);
@@ -69,3 +64,11 @@
   width: auto;
   font-size: var(--font-size-mini);
 }
+
+.network {
+  font-size: var(--font-size-mini);
+  position: absolute;
+  right: calc(var(--spacer) / 3);
+  bottom: calc(var(--spacer) / 3);
+  text-transform: uppercase !important;
+}

src/components/molecules/AssetTeaser.tsx

@@ -6,8 +6,9 @@ import styles from './AssetTeaser.module.css'
 import { DDO, BestPrice } from '@oceanprotocol/lib'
 import removeMarkdown from 'remove-markdown'
 import Publisher from '../atoms/Publisher'
-import Time from '../atoms/Time'
 import AssetType from '../atoms/AssetType'
+import Network from '../atoms/Network'
+import { useOcean } from '../../providers/Ocean'
 
 declare type AssetTeaserProps = {
   ddo: DDO
@@ -18,6 +19,7 @@ const AssetTeaser: React.FC<AssetTeaserProps> = ({
   ddo,
   price
 }: AssetTeaserProps) => {
+  const { config } = useOcean()
   const { attributes } = ddo.findServiceByType('metadata')
   const { name, type } = attributes.main
   const { dataTokenInfo } = ddo
@@ -52,9 +54,10 @@ const AssetTeaser: React.FC<AssetTeaserProps> = ({
 
         <footer className={styles.foot}>
           <Price price={price} small />
-          <p className={styles.date}>
-            <Time date={ddo?.created} relative />
-          </p>
+          {/* TODO: networkId needs to come from the multinetwork DDO for each asset */}
+          {config?.networkId && (
+            <Network networkId={config.networkId} className={styles.network} />
+          )}
         </footer>
       </Link>
     </article>

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

@@ -12,8 +12,6 @@
 
 .name {
   font-size: var(--font-size-small);
-  display: inline-block;
-  text-transform: capitalize;
 }
 
 .badge {

src/components/molecules/Wallet/Network.tsx

@@ -2,13 +2,14 @@ import React, { useState, useEffect, ReactElement } from 'react'
 import { useOcean } from '../../../providers/Ocean'
 import Status from '../../atoms/Status'
 import { ConfigHelper, ConfigHelperConfig } from '@oceanprotocol/lib'
-import styles from './Network.module.css'
 import Badge from '../../atoms/Badge'
 import Tooltip from '../../atoms/Tooltip'
 import { useWeb3 } from '../../../providers/Web3'
+import NetworkName from '../../atoms/Network'
+import styles from './Network.module.css'
 
 export default function Network(): ReactElement {
-  const { networkId, networkDisplayName, isTestnet } = useWeb3()
+  const { networkId, isTestnet } = useWeb3()
   const { config } = useOcean()
   const networkIdConfig = (config as ConfigHelperConfig).networkId
 
@@ -28,14 +29,14 @@ export default function Network(): ReactElement {
     setIsSupportedNetwork(isSupportedNetwork)
   }, [networkId, networkIdConfig])
 
-  return !isEthMainnet && networkDisplayName ? (
+  return !isEthMainnet && networkId ? (
     <div className={styles.network}>
       {!isSupportedNetwork && (
         <Tooltip content="No Ocean Protocol contracts are deployed to this network.">
           <Status state="error" className={styles.warning} />
         </Tooltip>
       )}
-      <span className={styles.name}>{networkDisplayName}</span>
+      <NetworkName className={styles.name} networkId={networkId} />
       {isTestnet && <Badge label="Test" className={styles.badge} />}
     </div>
   ) : null

src/images/eth.svg

@@ -0,0 +1,8 @@
+<svg width="13" height="22" viewBox="0 0 13 22" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.89184 5.43594e-05L12.8197 9.94919L6.91187 7.38561L6.89184 5.43594e-05Z"/>
+<path d="M0 9.94919L5.91188 5.43594e-05L5.93191 7.38561L0 9.94919Z" />
+<path d="M5.91189 14.7089L1.43051e-05 11.0385L5.93192 8.47489L5.91189 14.7089Z" />
+<path d="M12.8198 11.0385L6.91188 8.47489L6.89185 14.7089L12.8198 11.0385Z" />
+<path d="M6.91188 16.2936L12.8398 12.725L6.91188 21.2092V16.2936Z" />
+<path d="M5.91188 16.2936L0 12.725L5.91188 21.2092V16.2936Z" />
+</svg>

src/images/polygon.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="17" viewBox="0 0 20 17" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.0923 5.19344C14.7233 4.97781 14.2435 4.97781 13.8376 5.19344L10.9594 6.84672L9.00368 7.92496L6.12545 9.57824C5.75645 9.79387 5.27674 9.79387 4.87084 9.57824L2.58303 8.28436C2.21402 8.0687 1.95572 7.67337 1.95572 7.24208V4.69029C1.95572 4.25899 2.17712 3.86363 2.58303 3.648L4.83394 2.39006C5.20297 2.17442 5.68264 2.17442 6.08855 2.39006L8.33948 3.648C8.70848 3.86363 8.96677 4.25899 8.96677 4.69029V6.34356L10.9225 5.22938V3.57611C10.9225 3.14482 10.7011 2.74947 10.2952 2.53383L6.12545 0.161733C5.75645 -0.0539112 5.27674 -0.0539112 4.87084 0.161733L0.627306 2.53383C0.221402 2.74947 0 3.14482 0 3.57611V8.35622C0 8.78752 0.221402 9.18288 0.627306 9.39851L4.87084 11.7706C5.23984 11.9863 5.71955 11.9863 6.12545 11.7706L9.00368 10.1533L10.9594 9.03911L13.8376 7.42177C14.2066 7.20614 14.6864 7.20614 15.0923 7.42177L17.3432 8.67972C17.7122 8.89535 17.9705 9.29071 17.9705 9.722V12.2738C17.9705 12.7051 17.7491 13.1004 17.3432 13.3161L15.0923 14.6099C14.7233 14.8256 14.2435 14.8256 13.8376 14.6099L11.5867 13.352C11.2177 13.1364 10.9594 12.741 10.9594 12.3097V10.6565L9.00368 11.7706V13.4239C9.00368 13.8552 9.2251 14.2505 9.631 14.4662L13.8745 16.8383C14.2435 17.0539 14.7233 17.0539 15.1292 16.8383L19.3727 14.4662C19.7417 14.2505 20 13.8552 20 13.4239V8.64375C20 8.21246 19.7786 7.81713 19.3727 7.60147L15.0923 5.19344Z" />
+</svg>