Merge branch 'main' into feature/compute

.gitignore

@@ -12,4 +12,5 @@ public/storybook
 .artifacts
 .vercel
 repo-metadata.json
+networks-metadata.json
 src/@types/apollo

app.config.js

@@ -4,11 +4,14 @@ module.exports = {
   // networks in their wallet.
   // Ocean Protocol contracts are deployed for: 'mainnet', 'rinkeby', 'development'
   network: process.env.GATSBY_NETWORK || 'mainnet',
+
   infuraProjectId: process.env.GATSBY_INFURA_PROJECT_ID || 'xxx',
+
   // The ETH address the marketplace fee will be sent to.
   marketFeeAddress:
     process.env.GATSBY_MARKET_FEE_ADDRESS ||
     '0x903322C7E45A60d7c8C3EA236c5beA9Af86310c7',
+
   // Used for conversion display, can be whatever coingecko API supports
   // see: https://api.coingecko.com/api/v3/simple/supported_vs_currencies
   currencies: [

gatsby-node.js

@@ -11,6 +11,14 @@ execSync(`node ./scripts/write-repo-metadata > repo-metadata.json`, {
 // Generate Apollo typings
 execSync(`npm run apollo:codegen`, { stdio: 'inherit' })
 
+// Fetch EVM networks metadata
+execSync(
+  `node ./scripts/write-networks-metadata > content/networks-metadata.json`,
+  {
+    stdio: 'inherit'
+  }
+)
+
 exports.onCreateNode = ({ node, actions, getNode }) => {
   createFields(node, actions, getNode)
 }

scripts/write-networks-metadata.js

@@ -0,0 +1,11 @@
+#!/usr/bin/env node
+'use strict'
+
+const axios = require('axios')
+
+// https://github.com/ethereum-lists/chains
+const chainDataUrl = 'https://chainid.network/chains.json'
+
+axios(chainDataUrl).then((response) => {
+  process.stdout.write(JSON.stringify(response.data, null, '  '))
+})

src/components/atoms/EtherscanLink.tsx

@@ -1,8 +1,23 @@
-import React, { ReactElement, ReactNode } from 'react'
-import { getNetworkName } from '../../utils/wallet'
+import React, { ReactElement, ReactNode, useEffect, useState } from 'react'
+import { EthereumListsChain, getNetworkData } from '../../utils/wallet'
 import { ReactComponent as External } from '../../images/external.svg'
 import styles from './EtherscanLink.module.css'
 import { useSiteMetadata } from '../../hooks/useSiteMetadata'
+import { graphql, useStaticQuery } from 'gatsby'
+
+const networksQuery = graphql`
+  query {
+    allNetworksMetadataJson {
+      edges {
+        node {
+          chain
+          network
+          networkId
+        }
+      }
+    }
+  }
+`
 
 export default function EtherscanLink({
   networkId,
@@ -13,16 +28,27 @@ export default function EtherscanLink({
   path: string
   children: ReactNode
 }): ReactElement {
+  const data = useStaticQuery(networksQuery)
+  const networksList: { node: EthereumListsChain }[] =
+    data.allNetworksMetadataJson.edges
+
   const { appConfig } = useSiteMetadata()
+  const [url, setUrl] = useState<string>()
+
+  useEffect(() => {
+    const networkData = networkId
+      ? getNetworkData(networksList, networkId)
+      : null
     const url =
       (!networkId && appConfig.network === 'mainnet') || networkId === 1
         ? `https://etherscan.io`
         : `https://${
-          networkId
-            ? getNetworkName(networkId).toLowerCase()
-            : appConfig.network
+            networkData ? networkData.network : appConfig.network
           }.etherscan.io`
 
+    setUrl(url)
+  }, [networkId, networksList, appConfig.network])
+
   return (
     <a
       href={`${url}/${path}`}

src/components/molecules/AssetListTitle.tsx

@@ -40,7 +40,6 @@ export default function AssetListTitle({
     !ddo && did && getAssetName()
 
     return () => {
-      console.log('canceled?')
       source.cancel()
     }
   }, [assetTitle, config?.metadataCacheUri, ddo, did, title])

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

@@ -12,6 +12,7 @@
   transition: border 0.2s ease-out;
   cursor: pointer;
   min-width: 190px;
+  height: 100%;
 }
 
 .button,
@@ -42,7 +43,7 @@
 .address {
   text-transform: none;
   border-right: 1px solid var(--border-color);
-  padding-right: calc(var(--spacer) / 4);
+  padding-right: calc(var(--spacer) / 3);
 }
 
 .button svg {
@@ -51,7 +52,7 @@
   fill: var(--border-color);
   display: inline-block;
   vertical-align: middle;
-  margin-left: calc(var(--spacer) / 4);
+  margin-left: calc(var(--spacer) / 3);
   transition: transform 0.2s ease-out;
 }
 

src/components/molecules/Wallet/Account.tsx

@@ -24,8 +24,8 @@ const Blockies = ({ account }: { account: string | undefined }) => {
 // Forward ref for Tippy.js
 // eslint-disable-next-line
 const Account = React.forwardRef((props, ref: any) => {
-  const { accountId, status, connect, networkId, web3Modal } = useOcean()
-  const hasSuccess = status === 1 && networkId === 1
+  const { accountId, status, connect, web3Modal } = useOcean()
+  const hasSuccess = status === 1
 
   async function handleActivation(e: FormEvent<HTMLButtonElement>) {
     // prevent accidentially submitting a form the button might be in

src/components/molecules/Wallet/Feedback.tsx

@@ -2,7 +2,6 @@ import React, { ReactElement } from 'react'
 import Status from '../../atoms/Status'
 import styles from './Feedback.module.css'
 import { useOcean } from '@oceanprotocol/react'
-import { getNetworkName } from '../../../utils/wallet'
 
 export declare type Web3Error = {
   status: 'error' | 'warning' | 'success'
@@ -15,19 +14,13 @@ export default function Web3Feedback({
 }: {
   isBalanceSufficient?: boolean
 }): ReactElement {
-  const { account, status, networkId } = useOcean()
+  const { account, status } = useOcean()
   const isOceanConnectionError = status === -1
-  const isMainnet = networkId === 1
   const showFeedback =
-    !account ||
-    isOceanConnectionError ||
-    !isMainnet ||
-    isBalanceSufficient === false
+    !account || isOceanConnectionError || isBalanceSufficient === false
 
   const state = !account
     ? 'error'
-    : !isMainnet
-    ? 'warning'
     : account && isBalanceSufficient
     ? 'success'
     : 'warning'
@@ -36,8 +29,6 @@ export default function Web3Feedback({
     ? 'No account connected'
     : isOceanConnectionError
     ? 'Error connecting to Ocean'
-    : !isMainnet
-    ? getNetworkName(networkId)
     : account
     ? isBalanceSufficient === false
       ? 'Insufficient balance'
@@ -48,8 +39,6 @@ export default function Web3Feedback({
     ? 'Please connect your Web3 wallet.'
     : isOceanConnectionError
     ? 'Please try again.'
-    : !isMainnet
-    ? undefined
     : isBalanceSufficient === false
     ? 'You do not have enough OCEAN in your wallet to purchase this asset.'
     : 'Something went wrong.'

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

@@ -0,0 +1,27 @@
+.network {
+  border: 1px solid var(--border-color);
+  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);
+  white-space: nowrap;
+  margin-right: -3px;
+  display: inline-flex;
+  align-items: center;
+}
+
+.name {
+  font-size: var(--font-size-small);
+  display: inline-block;
+  text-transform: capitalize;
+}
+
+.badge {
+  margin-left: calc(var(--spacer) / 8);
+  background-color: var(--border-color);
+  color: var(--font-color-text);
+}
+
+.warning {
+  margin-right: calc(var(--spacer) / 4);
+}

src/components/molecules/Wallet/Network.tsx

@@ -0,0 +1,74 @@
+import React, { useState, useEffect, ReactElement } from 'react'
+import { useOcean } from '@oceanprotocol/react'
+import Status from '../../atoms/Status'
+import {
+  EthereumListsChain,
+  getNetworkData,
+  getNetworkDisplayName
+} from '../../../utils/wallet'
+import { ConfigHelper } from '@oceanprotocol/lib'
+import { ConfigHelperConfig } from '@oceanprotocol/lib/dist/node/utils/ConfigHelper'
+import styles from './Network.module.css'
+import Badge from '../../atoms/Badge'
+import Tooltip from '../../atoms/Tooltip'
+import { graphql, useStaticQuery } from 'gatsby'
+
+const networksQuery = graphql`
+  query NetworksQuery {
+    allNetworksMetadataJson {
+      edges {
+        node {
+          chain
+          network
+          networkId
+        }
+      }
+    }
+  }
+`
+
+export default function Network(): ReactElement {
+  const data = useStaticQuery(networksQuery)
+  const networksList: { node: EthereumListsChain }[] =
+    data.allNetworksMetadataJson.edges
+
+  const { config, networkId } = useOcean()
+  const networkIdConfig = (config as ConfigHelperConfig).networkId
+
+  const [isEthMainnet, setIsEthMainnet] = useState<boolean>()
+  const [networkName, setNetworkName] = useState<string>()
+  const [isTestnet, setIsTestnet] = useState<boolean>()
+  const [isSupportedNetwork, setIsSupportedNetwork] = useState<boolean>()
+
+  useEffect(() => {
+    // take network from user when present,
+    // otherwise use the default configured one of app
+    const network = networkId || networkIdConfig
+    const isEthMainnet = network === 1
+    setIsEthMainnet(isEthMainnet)
+
+    // Check networkId against ocean.js ConfigHelper configs
+    // to figure out if network is supported.
+    const isSupportedNetwork = Boolean(new ConfigHelper().getConfig(network))
+    setIsSupportedNetwork(isSupportedNetwork)
+
+    // Figure out if we're on a chain's testnet, or not
+    const networkData = getNetworkData(networksList, network)
+    setIsTestnet(networkData.network !== 'mainnet')
+
+    const networkName = getNetworkDisplayName(networkData, network)
+    setNetworkName(networkName)
+  }, [networkId, networkIdConfig, networksList])
+
+  return !isEthMainnet && networkName ? (
+    <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}>{networkName}</span>
+      {isTestnet && <Badge label="Test" className={styles.badge} />}
+    </div>
+  ) : null
+}

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

@@ -0,0 +1,3 @@
+.wallet {
+  display: flex;
+}

src/components/molecules/Wallet/index.tsx

@@ -2,14 +2,23 @@ import React, { ReactElement } from 'react'
 import Account from './Account'
 import Details from './Details'
 import Tooltip from '../../atoms/Tooltip'
+import Network from './Network'
 import { useOcean } from '@oceanprotocol/react'
+import styles from './index.module.css'
 
 export default function Wallet(): ReactElement {
   const { accountId } = useOcean()
 
   return (
-    <Tooltip content={<Details />} trigger="click focus" disabled={!accountId}>
+    <div className={styles.wallet}>
+      <Network />
+      <Tooltip
+        content={<Details />}
+        trigger="click focus"
+        disabled={!accountId}
+      >
         <Account />
       </Tooltip>
+    </div>
   )
 }

src/components/organisms/AssetActions/Consume.tsx

@@ -12,6 +12,23 @@ import { useSiteMetadata } from '../../../hooks/useSiteMetadata'
 import checkPreviousOrder from '../../../utils/checkPreviousOrder'
 import { useAsset } from '../../../providers/Asset'
 import { secondsToString } from '../../../utils/metadata'
+import { gql, useQuery } from '@apollo/client'
+import { OrdersData } from '../../../@types/apollo/OrdersData'
+import BigNumber from 'bignumber.js'
+
+const previousOrderQuery = gql`
+  query PreviousOrder($id: String!, $account: String!) {
+    tokenOrders(
+      first: 1
+      where: { datatokenId: $id, payer: $account }
+      orderBy: timestamp
+      orderDirection: desc
+    ) {
+      timestamp
+      tx
+    }
+  }
+`
 
 function getHelpText(
   token: {
@@ -58,6 +75,34 @@ export default function Consume({
   const [isConsumable, setIsConsumable] = useState(true)
   const [assetTimeout, setAssetTimeout] = useState('')
 
+  const { data } = useQuery<OrdersData>(previousOrderQuery, {
+    variables: {
+      id: ddo.dataToken?.toLowerCase(),
+      account: accountId?.toLowerCase()
+    },
+    pollInterval: 5000
+  })
+
+  useEffect(() => {
+    if (!data || !assetTimeout || data.tokenOrders.length === 0) return
+
+    const lastOrder = data.tokenOrders[0]
+
+    if (assetTimeout === 'Forever') {
+      setPreviousOrderId(lastOrder.tx)
+      setHasPreviousOrder(true)
+    } else {
+      const expiry = new BigNumber(lastOrder.timestamp).plus(assetTimeout)
+      const unixTime = new BigNumber(Math.floor(Date.now() / 1000))
+      if (unixTime.isLessThan(expiry)) {
+        setPreviousOrderId(lastOrder.tx)
+        setHasPreviousOrder(true)
+      } else {
+        setHasPreviousOrder(false)
+      }
+    }
+  }, [data, assetTimeout])
+
   useEffect(() => {
     const { timeout } = ddo.findServiceByType('access').attributes.main
     setAssetTimeout(secondsToString(timeout))
@@ -95,18 +140,6 @@ export default function Consume({
     hasDatatoken
   ])
 
-  useEffect(() => {
-    if (!ocean || !accountId) return
-
-    async function checkOrders() {
-      // HEADS UP! checkPreviousOrder() also checks for expiration of possible set timeout.
-      const orderId = await checkPreviousOrder(ocean, accountId, ddo, 'access')
-      setPreviousOrderId(orderId)
-      setHasPreviousOrder(!!orderId)
-    }
-    checkOrders()
-  }, [ocean, ddo, accountId])
-
   async function handleConsume() {
     !hasPreviousOrder && !hasDatatoken && (await buyDT('1'))
     await consume(

src/components/organisms/AssetContent/EditHistory.tsx

@@ -4,52 +4,53 @@ import { useAsset } from '../../../providers/Asset'
 import EtherscanLink from '../../atoms/EtherscanLink'
 import Time from '../../atoms/Time'
 import styles from './EditHistory.module.css'
+import { gql, useQuery } from '@apollo/client'
+import { ReceiptData_datatokens_updates as ReceiptData } from '../../../@types/apollo/ReceiptData'
 
-interface Receipt {
-  hash: string
-  timestamp: string
-}
-
-// TODO: fetch for real
-const fakeReceipts = [
-  {
-    hash: '0xxxxxxxxx',
-    timestamp: '1607460269'
-  },
-  {
-    hash: '0xxxxxxxxx',
-    timestamp: '1606460159'
-  },
-  {
-    hash: '0xxxxxxxxx',
-    timestamp: '1506460159'
+const getReceipts = gql`
+  query ReceiptData($address: ID!) {
+    datatokens(where: { id: $address }) {
+      createTime
+      tx
+      updates(orderBy: timestamp, orderDirection: desc) {
+        id
+        tx
+        timestamp
       }
-]
+    }
+  }
+`
 
 export default function EditHistory(): ReactElement {
   const { networkId } = useOcean()
   const { ddo } = useAsset()
+  const { data } = useQuery(getReceipts, {
+    variables: { address: ddo?.dataToken.toLowerCase() }
+  })
 
-  const [receipts, setReceipts] = useState<Receipt[]>()
+  const [receipts, setReceipts] = useState<ReceiptData[]>()
+  const [creationTx, setCreationTx] = useState<string>()
 
   useEffect(() => {
-    setReceipts(fakeReceipts)
-  }, [])
+    if (!data) return
+    setReceipts(data.datatokens[0].updates)
+    setCreationTx(data.datatokens[0].tx)
+  }, [data])
 
   return (
     <>
       <h3 className={styles.title}>Metadata History</h3>
       <ul className={styles.history}>
         {receipts?.map((receipt) => (
-          <li key={receipt.hash} className={styles.item}>
-            <EtherscanLink networkId={networkId} path={`/tx/${receipt.hash}`}>
-              edited <Time date={receipt.timestamp} relative isUnix />
+          <li key={receipt.id} className={styles.item}>
+            <EtherscanLink networkId={networkId} path={`/tx/${receipt.tx}`}>
+              edited{' '}
+              <Time date={receipt.timestamp.toString()} relative isUnix />
             </EtherscanLink>
           </li>
         ))}
         <li className={styles.item}>
-          {/* TODO: get this initial metadata creation tx somehow */}
-          <EtherscanLink networkId={networkId} path="/tx/xxx">
+          <EtherscanLink networkId={networkId} path={`/tx/${creationTx}`}>
             published <Time date={ddo.created} relative />
           </EtherscanLink>
         </li>

src/components/organisms/AssetContent/MetaFull.tsx

@@ -25,6 +25,7 @@ export default function MetaFull(): ReactElement {
         title="Owner"
         content={<Publisher account={ddo?.publicKey[0].owner} />}
       />
+
       {type === 'algorithm' && (
         <MetaItem title="Docker Image" content={<DockerImage />} />
       )}

src/components/organisms/AssetContent/index.tsx

@@ -15,7 +15,7 @@ import Button from '../../atoms/Button'
 import Edit from '../AssetActions/Edit'
 import DebugOutput from '../../atoms/DebugOutput'
 import MetaMain from './MetaMain'
-// import EditHistory from './EditHistory'
+import EditHistory from './EditHistory'
 
 export interface AssetContentProps {
   path?: string
@@ -97,7 +97,7 @@ export default function AssetContent(props: AssetContentProps): ReactElement {
           )}
 
           <MetaFull />
-          {/* <EditHistory /> */}
+          <EditHistory />
           {debug === true && <DebugOutput title="DDO" output={ddo} />}
         </div>
       </div>

src/utils/wallet.ts

@@ -1,10 +1,19 @@
-import {
-  infuraProjectId as infuraId,
-  portisId,
-  network
-} from '../../app.config'
+import { infuraProjectId as infuraId, portisId } from '../../app.config'
 import WalletConnectProvider from '@walletconnect/web3-provider'
 
+export interface EthereumListsChain {
+  name: string
+  chainId: number
+  shortName: string
+  chain: string
+  network: string
+  networkId: number
+  nativeCurrency: { name: string; symbol: string; decimals: number }
+  rpc: string[]
+  faucets: string[]
+  infoURL: string
+}
+
 const web3ModalTheme = {
   background: 'var(--background-body)',
   main: 'var(--font-color-heading)',
@@ -47,28 +56,6 @@ export const web3ModalOpts = {
   theme: web3ModalTheme
 }
 
-export function getNetworkId(network: string): number {
-  switch (network) {
-    case 'mainnet':
-      return 1
-    case 'ropsten':
-      return 3
-    case 'rinkeby':
-      return 4
-    case 'kovan':
-      return 42
-    case 'development':
-      return 8996
-    default:
-      return 0
-  }
-}
-
-export function isDefaultNetwork(networkId: number): boolean {
-  const configuredNetwork = getNetworkId(network)
-  return configuredNetwork === networkId
-}
-
 export function accountTruncate(account: string): string {
   if (!account) return
   const middle = account.substring(6, 38)
@@ -76,19 +63,25 @@ export function accountTruncate(account: string): string {
   return truncated
 }
 
-export function getNetworkName(networkId: number): string {
-  switch (networkId) {
-    case 1:
-      return 'Main'
-    case 3:
-      return 'Ropsten'
-    case 4:
-      return 'Rinkeby'
-    case 42:
-      return 'Kovan'
-    case 8996:
-      return 'Development'
-    default:
-      return 'Unknown'
-  }
+export function getNetworkDisplayName(
+  data: EthereumListsChain,
+  networkId: number
+): string {
+  const displayName = data
+    ? `${data.chain} ${data.network === 'mainnet' ? '' : data.network}`
+    : networkId === 8996
+    ? 'Development'
+    : 'Unknown'
+
+  return displayName
+}
+
+export function getNetworkData(
+  data: { node: EthereumListsChain }[],
+  networkId: number
+): EthereumListsChain {
+  const networkData = data.filter(
+    ({ node }: { node: EthereumListsChain }) => node.networkId === networkId
+  )[0]
+  return networkData.node
 }