From 261348f883d8e76b5be7155fae65061f049c1e01 Mon Sep 17 00:00:00 2001
From: Bogdan Fazakas <bogdan.fazakas@gmail.com>
Date: Wed, 4 Aug 2021 15:21:57 +0300
Subject: [PATCH 01/31] replace history page and route with account

---
 _redirects                                    |  3 +-
 content/pages/account.json                    |  4 +++
 content/pages/history.json                    |  2 --
 content/site.json                             |  4 +--
 gatsby-node.js                                | 12 ++++---
 .../organisms/AssetActions/Compute/index.tsx  |  2 +-
 .../History/ComputeJobs/Details.module.css    |  2 +-
 .../History/ComputeJobs/Details.tsx           | 18 +++++-----
 .../History/ComputeJobs/Results.module.css    |  0
 .../History/ComputeJobs/Results.tsx           | 14 ++++----
 .../History/ComputeJobs/index.module.css      |  0
 .../History/ComputeJobs/index.tsx             | 26 +++++++-------
 .../pages/{ => Account}/History/Downloads.tsx | 20 +++++------
 .../History/PoolShares.module.css             |  0
 .../{ => Account}/History/PoolShares.tsx      | 20 +++++------
 .../{ => Account}/History/PublishedList.tsx   | 10 +++---
 .../{ => Account}/History/index.module.css    |  0
 .../pages/{ => Account}/History/index.tsx     |  8 ++---
 src/components/pages/Account/index.tsx        | 23 ++++++++++++
 src/pages/account/index.tsx                   | 35 +++++++++++++++++++
 src/pages/history.tsx                         | 30 ----------------
 tests/unit/__fixtures__/siteMetadata.json     |  4 +--
 22 files changed, 136 insertions(+), 101 deletions(-)
 create mode 100644 content/pages/account.json
 rename src/components/pages/{ => Account}/History/ComputeJobs/Details.module.css (95%)
 rename src/components/pages/{ => Account}/History/ComputeJobs/Details.tsx (82%)
 rename src/components/pages/{ => Account}/History/ComputeJobs/Results.module.css (100%)
 rename src/components/pages/{ => Account}/History/ComputeJobs/Results.tsx (86%)
 rename src/components/pages/{ => Account}/History/ComputeJobs/index.module.css (100%)
 rename src/components/pages/{ => Account}/History/ComputeJobs/index.tsx (91%)
 rename src/components/pages/{ => Account}/History/Downloads.tsx (83%)
 rename src/components/pages/{ => Account}/History/PoolShares.module.css (100%)
 rename src/components/pages/{ => Account}/History/PoolShares.tsx (91%)
 rename src/components/pages/{ => Account}/History/PublishedList.tsx (86%)
 rename src/components/pages/{ => Account}/History/index.module.css (100%)
 rename src/components/pages/{ => Account}/History/index.tsx (82%)
 create mode 100644 src/components/pages/Account/index.tsx
 create mode 100644 src/pages/account/index.tsx
 delete mode 100644 src/pages/history.tsx

diff --git a/_redirects b/_redirects
index 3b85ef2de..b810c2224 100644
--- a/_redirects
+++ b/_redirects
@@ -1 +1,2 @@
-/asset/* /asset/index.html 200
\ No newline at end of file
+/asset/* /asset/index.html 200
+/account/* /account/index.html 200
\ No newline at end of file
diff --git a/content/pages/account.json b/content/pages/account.json
new file mode 100644
index 000000000..b1d2c8362
--- /dev/null
+++ b/content/pages/account.json
@@ -0,0 +1,4 @@
+{
+  "title": "Account",
+  "description": "Find the data sets and jobs that you previously accessed."
+}
diff --git a/content/pages/history.json b/content/pages/history.json
index 57df3eb16..8dfbf2a8a 100644
--- a/content/pages/history.json
+++ b/content/pages/history.json
@@ -1,6 +1,4 @@
 {
-  "title": "History",
-  "description": "Find the data sets and jobs that you previously accessed.",
   "compute": {
     "storage": "Results are stored for 30 days."
   }
diff --git a/content/site.json b/content/site.json
index 6b6556de2..84e2ede5c 100644
--- a/content/site.json
+++ b/content/site.json
@@ -12,8 +12,8 @@
         "link": "/publish"
       },
       {
-        "name": "History",
-        "link": "/history"
+        "name": "My Account",
+        "link": "/account"
       }
     ],
     "warning": {
diff --git a/gatsby-node.js b/gatsby-node.js
index 86b1e751d..bb9ed6192 100644
--- a/gatsby-node.js
+++ b/gatsby-node.js
@@ -33,11 +33,15 @@ exports.onCreatePage = async ({ page, actions }) => {
   const { createPage } = actions
   // page.matchPath is a special key that's used for matching pages
   // only on the client.
-  const handleClientSideOnly = page.path.match(/^\/asset/)
-
-  if (handleClientSideOnly) {
-    page.matchPath = '/asset/*'
+  const handleClientSideOnlyAsset = page.path.match(/^\/asset/)
+  const handleClientSideOnlyAccount = page.path.match(/^\/account/)
 
+  if (handleClientSideOnlyAsset || handleClientSideOnlyAccount) {
+    page.matchPath = handleClientSideOnlyAsset
+      ? '/asset/*'
+      : handleClientSideOnlyAsset
+      ? '/account/*'
+      : '/'
     // Update the page.
     createPage(page)
   }
diff --git a/src/components/organisms/AssetActions/Compute/index.tsx b/src/components/organisms/AssetActions/Compute/index.tsx
index ec32d2acf..1359763b5 100644
--- a/src/components/organisms/AssetActions/Compute/index.tsx
+++ b/src/components/organisms/AssetActions/Compute/index.tsx
@@ -41,7 +41,7 @@ import { getPreviousOrders, getPrice } from '../../../../utils/subgraph'
 import { chainIds } from '../../../../../app.config'
 
 const SuccessAction = () => (
-  <Button style="text" to="/history?defaultTab=ComputeJobs" size="small">
+  <Button style="text" to="/account?defaultTab=ComputeJobs" size="small">
     Go to history →
   </Button>
 )
diff --git a/src/components/pages/History/ComputeJobs/Details.module.css b/src/components/pages/Account/History/ComputeJobs/Details.module.css
similarity index 95%
rename from src/components/pages/History/ComputeJobs/Details.module.css
rename to src/components/pages/Account/History/ComputeJobs/Details.module.css
index 785537c38..53a32197e 100644
--- a/src/components/pages/History/ComputeJobs/Details.module.css
+++ b/src/components/pages/Account/History/ComputeJobs/Details.module.css
@@ -7,7 +7,7 @@
 }
 
 .asset {
-  composes: box from '../../../atoms/Box.module.css';
+  composes: box from '../../../../atoms/Box.module.css';
   box-shadow: none;
   padding: calc(var(--spacer) / 2);
   margin-bottom: calc(var(--spacer) / 2);
diff --git a/src/components/pages/History/ComputeJobs/Details.tsx b/src/components/pages/Account/History/ComputeJobs/Details.tsx
similarity index 82%
rename from src/components/pages/History/ComputeJobs/Details.tsx
rename to src/components/pages/Account/History/ComputeJobs/Details.tsx
index 1cc5fef97..ace32cf41 100644
--- a/src/components/pages/History/ComputeJobs/Details.tsx
+++ b/src/components/pages/Account/History/ComputeJobs/Details.tsx
@@ -1,16 +1,16 @@
 import React, { ReactElement, useEffect, useState } from 'react'
 import axios from 'axios'
-import { ComputeJobMetaData } from '../../../../@types/ComputeJobMetaData'
-import Time from '../../../atoms/Time'
-import Button from '../../../atoms/Button'
-import Modal from '../../../atoms/Modal'
-import MetaItem from '../../../organisms/AssetContent/MetaItem'
-import { ReactComponent as External } from '../../../../images/external.svg'
-import { retrieveDDO } from '../../../../utils/aquarius'
-import { useOcean } from '../../../../providers/Ocean'
+import { ComputeJobMetaData } from '../../../../../@types/ComputeJobMetaData'
+import Time from '../../../../atoms/Time'
+import Button from '../../../../atoms/Button'
+import Modal from '../../../../atoms/Modal'
+import MetaItem from '../../../../organisms/AssetContent/MetaItem'
+import { ReactComponent as External } from '../../../../../images/external.svg'
+import { retrieveDDO } from '../../../../../utils/aquarius'
+import { useOcean } from '../../../../../providers/Ocean'
 import Results from './Results'
 import styles from './Details.module.css'
-import { useSiteMetadata } from '../../../../hooks/useSiteMetadata'
+import { useSiteMetadata } from '../../../../../hooks/useSiteMetadata'
 
 function Asset({
   title,
diff --git a/src/components/pages/History/ComputeJobs/Results.module.css b/src/components/pages/Account/History/ComputeJobs/Results.module.css
similarity index 100%
rename from src/components/pages/History/ComputeJobs/Results.module.css
rename to src/components/pages/Account/History/ComputeJobs/Results.module.css
diff --git a/src/components/pages/History/ComputeJobs/Results.tsx b/src/components/pages/Account/History/ComputeJobs/Results.tsx
similarity index 86%
rename from src/components/pages/History/ComputeJobs/Results.tsx
rename to src/components/pages/Account/History/ComputeJobs/Results.tsx
index 7d5f04941..14ae57d43 100644
--- a/src/components/pages/History/ComputeJobs/Results.tsx
+++ b/src/components/pages/Account/History/ComputeJobs/Results.tsx
@@ -1,17 +1,17 @@
 import { Logger } from '@oceanprotocol/lib'
 import React, { ReactElement, useState } from 'react'
-import Loader from '../../../atoms/Loader'
-import { ComputeJobMetaData } from '../../../../@types/ComputeJobMetaData'
-import { ListItem } from '../../../atoms/Lists'
-import Button from '../../../atoms/Button'
-import { useOcean } from '../../../../providers/Ocean'
+import Loader from '../../../../atoms/Loader'
+import { ComputeJobMetaData } from '../../../../../@types/ComputeJobMetaData'
+import { ListItem } from '../../../../atoms/Lists'
+import Button from '../../../../atoms/Button'
+import { useOcean } from '../../../../../providers/Ocean'
 import styles from './Results.module.css'
-import FormHelp from '../../../atoms/Input/Help'
+import FormHelp from '../../../../atoms/Input/Help'
 import { graphql, useStaticQuery } from 'gatsby'
 
 export const contentQuery = graphql`
   query HistoryPageComputeResultsQuery {
-    content: allFile(filter: { relativePath: { eq: "pages/history.json" } }) {
+    content: allFile(filter: { relativePath: { eq: "pages/account.json" } }) {
       edges {
         node {
           childPagesJson {
diff --git a/src/components/pages/History/ComputeJobs/index.module.css b/src/components/pages/Account/History/ComputeJobs/index.module.css
similarity index 100%
rename from src/components/pages/History/ComputeJobs/index.module.css
rename to src/components/pages/Account/History/ComputeJobs/index.module.css
diff --git a/src/components/pages/History/ComputeJobs/index.tsx b/src/components/pages/Account/History/ComputeJobs/index.tsx
similarity index 91%
rename from src/components/pages/History/ComputeJobs/index.tsx
rename to src/components/pages/Account/History/ComputeJobs/index.tsx
index 8d3ea9bed..162e81ca8 100644
--- a/src/components/pages/History/ComputeJobs/index.tsx
+++ b/src/components/pages/Account/History/ComputeJobs/index.tsx
@@ -1,32 +1,32 @@
 import React, { ReactElement, useEffect, useState } from 'react'
 import web3 from 'web3'
-import Time from '../../../atoms/Time'
+import Time from '../../../../atoms/Time'
 import { Link } from 'gatsby'
 import { DDO, Logger, Service, Provider } from '@oceanprotocol/lib'
-import { ComputeJobMetaData } from '../../../../@types/ComputeJobMetaData'
+import { ComputeJobMetaData } from '../../../../../@types/ComputeJobMetaData'
 import Dotdotdot from 'react-dotdotdot'
-import Table from '../../../atoms/Table'
-import Button from '../../../atoms/Button'
-import { useOcean } from '../../../../providers/Ocean'
+import Table from '../../../../atoms/Table'
+import Button from '../../../../atoms/Button'
+import { useOcean } from '../../../../../providers/Ocean'
 import { gql } from 'urql'
-import { useWeb3 } from '../../../../providers/Web3'
+import { useWeb3 } from '../../../../../providers/Web3'
 import {
   queryMetadata,
   transformChainIdsListToQuery
-} from '../../../../utils/aquarius'
+} from '../../../../../utils/aquarius'
 import axios, { CancelToken } from 'axios'
 import Details from './Details'
 import { ComputeJob } from '@oceanprotocol/lib/dist/node/ocean/interfaces/Compute'
-import { ReactComponent as Refresh } from '../../../../images/refresh.svg'
+import { ReactComponent as Refresh } from '../../../../../images/refresh.svg'
 import styles from './index.module.css'
-import { useUserPreferences } from '../../../../providers/UserPreferences'
-import { getOceanConfig } from '../../../../utils/ocean'
-import { fetchDataForMultipleChains } from '../../../../utils/subgraph'
+import { useUserPreferences } from '../../../../../providers/UserPreferences'
+import { getOceanConfig } from '../../../../../utils/ocean'
+import { fetchDataForMultipleChains } from '../../../../../utils/subgraph'
 import {
   OrdersData_tokenOrders as OrdersData,
   OrdersData_tokenOrders_datatokenId as OrdersDatatoken
-} from '../../../../@types/apollo/OrdersData'
-import NetworkName from '../../../atoms/NetworkName'
+} from '../../../../../@types/apollo/OrdersData'
+import NetworkName from '../../../../atoms/NetworkName'
 
 const getComputeOrders = gql`
   query ComputeOrders($user: String!) {
diff --git a/src/components/pages/History/Downloads.tsx b/src/components/pages/Account/History/Downloads.tsx
similarity index 83%
rename from src/components/pages/History/Downloads.tsx
rename to src/components/pages/Account/History/Downloads.tsx
index f12e08f69..33064fb9a 100644
--- a/src/components/pages/History/Downloads.tsx
+++ b/src/components/pages/Account/History/Downloads.tsx
@@ -1,18 +1,18 @@
 import React, { ReactElement, useEffect, useState } from 'react'
-import Table from '../../atoms/Table'
+import Table from '../../../atoms/Table'
 import { gql } from 'urql'
-import Time from '../../atoms/Time'
+import Time from '../../../atoms/Time'
 import web3 from 'web3'
-import AssetTitle from '../../molecules/AssetListTitle'
-import { useWeb3 } from '../../../providers/Web3'
+import AssetTitle from '../../../molecules/AssetListTitle'
+import { useWeb3 } from '../../../../providers/Web3'
 import axios from 'axios'
-import { retrieveDDO } from '../../../utils/aquarius'
+import { retrieveDDO } from '../../../../utils/aquarius'
 import { Logger } from '@oceanprotocol/lib'
-import { useSiteMetadata } from '../../../hooks/useSiteMetadata'
-import { useUserPreferences } from '../../../providers/UserPreferences'
-import { fetchDataForMultipleChains } from '../../../utils/subgraph'
-import { OrdersData_tokenOrders as OrdersData } from '../../../@types/apollo/OrdersData'
-import NetworkName from '../../atoms/NetworkName'
+import { useSiteMetadata } from '../../../../hooks/useSiteMetadata'
+import { useUserPreferences } from '../../../../providers/UserPreferences'
+import { fetchDataForMultipleChains } from '../../../../utils/subgraph'
+import { OrdersData_tokenOrders as OrdersData } from '../../../../@types/apollo/OrdersData'
+import NetworkName from '../../../atoms/NetworkName'
 
 const getTokenOrders = gql`
   query OrdersData($user: String!) {
diff --git a/src/components/pages/History/PoolShares.module.css b/src/components/pages/Account/History/PoolShares.module.css
similarity index 100%
rename from src/components/pages/History/PoolShares.module.css
rename to src/components/pages/Account/History/PoolShares.module.css
diff --git a/src/components/pages/History/PoolShares.tsx b/src/components/pages/Account/History/PoolShares.tsx
similarity index 91%
rename from src/components/pages/History/PoolShares.tsx
rename to src/components/pages/Account/History/PoolShares.tsx
index 2413a4318..882657801 100644
--- a/src/components/pages/History/PoolShares.tsx
+++ b/src/components/pages/Account/History/PoolShares.tsx
@@ -1,22 +1,22 @@
 import React, { ReactElement, useEffect, useState } from 'react'
-import Table from '../../atoms/Table'
-import Conversion from '../../atoms/Price/Conversion'
+import Table from '../../../atoms/Table'
+import Conversion from '../../../atoms/Price/Conversion'
 import styles from './PoolShares.module.css'
-import AssetTitle from '../../molecules/AssetListTitle'
+import AssetTitle from '../../../molecules/AssetListTitle'
 import { gql } from 'urql'
 import {
   PoolShares as PoolSharesList,
   PoolShares_poolShares as PoolShare,
   PoolShares_poolShares_poolId_tokens as PoolSharePoolIdTokens
-} from '../../../@types/apollo/PoolShares'
+} from '../../../../@types/apollo/PoolShares'
 import web3 from 'web3'
-import Token from '../../organisms/AssetActions/Pool/Token'
-import { useWeb3 } from '../../../providers/Web3'
-import { useUserPreferences } from '../../../providers/UserPreferences'
-import { fetchDataForMultipleChains } from '../../../utils/subgraph'
-import NetworkName from '../../atoms/NetworkName'
+import Token from '../../../organisms/AssetActions/Pool/Token'
+import { useWeb3 } from '../../../../providers/Web3'
+import { useUserPreferences } from '../../../../providers/UserPreferences'
+import { fetchDataForMultipleChains } from '../../../../utils/subgraph'
+import NetworkName from '../../../atoms/NetworkName'
 import axios from 'axios'
-import { retrieveDDO } from '../../../utils/aquarius'
+import { retrieveDDO } from '../../../../utils/aquarius'
 
 const REFETCH_INTERVAL = 20000
 
diff --git a/src/components/pages/History/PublishedList.tsx b/src/components/pages/Account/History/PublishedList.tsx
similarity index 86%
rename from src/components/pages/History/PublishedList.tsx
rename to src/components/pages/Account/History/PublishedList.tsx
index 536f161ad..461697579 100644
--- a/src/components/pages/History/PublishedList.tsx
+++ b/src/components/pages/Account/History/PublishedList.tsx
@@ -1,15 +1,15 @@
 import { Logger } from '@oceanprotocol/lib'
 import { QueryResult } from '@oceanprotocol/lib/dist/node/metadatacache/MetadataCache'
 import React, { ReactElement, useEffect, useState } from 'react'
-import AssetList from '../../organisms/AssetList'
+import AssetList from '../../../organisms/AssetList'
 import axios from 'axios'
 import {
   queryMetadata,
   transformChainIdsListToQuery
-} from '../../../utils/aquarius'
-import { useWeb3 } from '../../../providers/Web3'
-import { useSiteMetadata } from '../../../hooks/useSiteMetadata'
-import { useUserPreferences } from '../../../providers/UserPreferences'
+} from '../../../../utils/aquarius'
+import { useWeb3 } from '../../../../providers/Web3'
+import { useSiteMetadata } from '../../../../hooks/useSiteMetadata'
+import { useUserPreferences } from '../../../../providers/UserPreferences'
 
 export default function PublishedList(): ReactElement {
   const { accountId } = useWeb3()
diff --git a/src/components/pages/History/index.module.css b/src/components/pages/Account/History/index.module.css
similarity index 100%
rename from src/components/pages/History/index.module.css
rename to src/components/pages/Account/History/index.module.css
diff --git a/src/components/pages/History/index.tsx b/src/components/pages/Account/History/index.tsx
similarity index 82%
rename from src/components/pages/History/index.tsx
rename to src/components/pages/Account/History/index.tsx
index aa0cfe2b8..34d5b4f7d 100644
--- a/src/components/pages/History/index.tsx
+++ b/src/components/pages/Account/History/index.tsx
@@ -1,13 +1,13 @@
 import React, { ReactElement } from 'react'
-import Tabs from '../../atoms/Tabs'
+import Tabs from '../../../atoms/Tabs'
 import PoolShares from './PoolShares'
-import PoolTransactions from '../../molecules/PoolTransactions'
+import PoolTransactions from '../../../molecules/PoolTransactions'
 import PublishedList from './PublishedList'
 import Downloads from './Downloads'
 import ComputeJobs from './ComputeJobs'
 import styles from './index.module.css'
-import { useUserPreferences } from '../../../providers/UserPreferences'
-import OceanProvider from '../../../providers/Ocean'
+import { useUserPreferences } from '../../../../providers/UserPreferences'
+import OceanProvider from '../../../../providers/Ocean'
 
 const tabs = [
   {
diff --git a/src/components/pages/Account/index.tsx b/src/components/pages/Account/index.tsx
new file mode 100644
index 000000000..9faf8affb
--- /dev/null
+++ b/src/components/pages/Account/index.tsx
@@ -0,0 +1,23 @@
+import React, { ReactElement } from 'react'
+import HistoryPage from './History'
+import { useWeb3 } from '../../../providers/Web3'
+
+export default function AccountPage({
+  accountIdentifier
+}: {
+  accountIdentifier: ReactElement | string
+}): ReactElement {
+  const { accountId } = useWeb3()
+  if (!accountIdentifier) accountIdentifier = accountId
+
+  return (
+    <article>
+      {accountIdentifier ? (
+        <p>WIP Account metadata header for user: {accountIdentifier}</p>
+      ) : (
+        <p>Please connect your Web3 wallet.</p>
+      )}
+      <HistoryPage />
+    </article>
+  )
+}
diff --git a/src/pages/account/index.tsx b/src/pages/account/index.tsx
new file mode 100644
index 000000000..f7c1fe9da
--- /dev/null
+++ b/src/pages/account/index.tsx
@@ -0,0 +1,35 @@
+import React, { ReactElement, useState, useEffect } from 'react'
+import Page from '../../components/templates/Page'
+import { graphql, PageProps } from 'gatsby'
+import AccountPage from '../../components/pages/Account'
+
+export default function PageGatsbyAccount(props: PageProps): ReactElement {
+  const content = (props.data as any).content.edges[0].node.childPagesJson
+  const { title } = content
+  const [accountId, setAccountId] = useState<string>()
+
+  useEffect(() => {
+    setAccountId(props.location.pathname.split('/')[2])
+  }, [props.location.pathname])
+
+  return (
+    <Page title={title} uri={props.uri}>
+      <AccountPage accountIdentifier={accountId} />
+    </Page>
+  )
+}
+
+export const contentQuery = graphql`
+  query AccountPageQuery {
+    content: allFile(filter: { relativePath: { eq: "pages/account.json" } }) {
+      edges {
+        node {
+          childPagesJson {
+            title
+            description
+          }
+        }
+      }
+    }
+  }
+`
diff --git a/src/pages/history.tsx b/src/pages/history.tsx
deleted file mode 100644
index bd9896014..000000000
--- a/src/pages/history.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import React, { ReactElement } from 'react'
-import PageHistory from '../components/pages/History'
-import Page from '../components/templates/Page'
-import { graphql, PageProps } from 'gatsby'
-
-export default function PageGatsbyHistory(props: PageProps): ReactElement {
-  const content = (props.data as any).content.edges[0].node.childPagesJson
-  const { title, description } = content
-
-  return (
-    <Page title={title} description={description} uri={props.uri}>
-      <PageHistory />
-    </Page>
-  )
-}
-
-export const contentQuery = graphql`
-  query HistoryPageQuery {
-    content: allFile(filter: { relativePath: { eq: "pages/history.json" } }) {
-      edges {
-        node {
-          childPagesJson {
-            title
-            description
-          }
-        }
-      }
-    }
-  }
-`
diff --git a/tests/unit/__fixtures__/siteMetadata.json b/tests/unit/__fixtures__/siteMetadata.json
index 37d545223..fba721a67 100644
--- a/tests/unit/__fixtures__/siteMetadata.json
+++ b/tests/unit/__fixtures__/siteMetadata.json
@@ -23,8 +23,8 @@
                   "link": "/publish"
                 },
                 {
-                  "name": "History",
-                  "link": "/history"
+                  "name": "Account",
+                  "link": "/account"
                 }
               ]
             }

From 86a8c3b374bd6d433a394f0207380f23b6438ddf Mon Sep 17 00:00:00 2001
From: Bogdan Fazakas <bogdan.fazakas@gmail.com>
Date: Wed, 4 Aug 2021 15:55:27 +0300
Subject: [PATCH 02/31] fixed import error for compute jobs

---
 gatsby-node.js                                        | 11 +++++------
 .../organisms/AssetActions/Compute/index.tsx          |  2 +-
 2 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/gatsby-node.js b/gatsby-node.js
index bb9ed6192..cc88386ba 100644
--- a/gatsby-node.js
+++ b/gatsby-node.js
@@ -36,14 +36,13 @@ exports.onCreatePage = async ({ page, actions }) => {
   const handleClientSideOnlyAsset = page.path.match(/^\/asset/)
   const handleClientSideOnlyAccount = page.path.match(/^\/account/)
 
-  if (handleClientSideOnlyAsset || handleClientSideOnlyAccount) {
-    page.matchPath = handleClientSideOnlyAsset
-      ? '/asset/*'
-      : handleClientSideOnlyAsset
-      ? '/account/*'
-      : '/'
+  if (handleClientSideOnlyAsset) {
+    page.matchPath = '/asset/*'
     // Update the page.
     createPage(page)
+  } else if (handleClientSideOnlyAccount) {
+    page.matchPath = '/account/*'
+    createPage(page)
   }
 }
 
diff --git a/src/components/organisms/AssetActions/Compute/index.tsx b/src/components/organisms/AssetActions/Compute/index.tsx
index c2a47a7aa..d4c669650 100644
--- a/src/components/organisms/AssetActions/Compute/index.tsx
+++ b/src/components/organisms/AssetActions/Compute/index.tsx
@@ -39,7 +39,7 @@ import { AssetSelectionAsset } from '../../../molecules/FormFields/AssetSelectio
 import AlgorithmDatasetsListForCompute from '../../AssetContent/AlgorithmDatasetsListForCompute'
 import { getPreviousOrders, getPrice } from '../../../../utils/subgraph'
 import AssetActionHistoryTable from '../../AssetActionHistoryTable'
-import ComputeJobs from '../../../pages/History/ComputeJobs'
+import ComputeJobs from '../../../pages/Account/History/ComputeJobs'
 
 const SuccessAction = () => (
   <Button style="text" to="/account?defaultTab=ComputeJobs" size="small">

From e998a989b5f5f52e914ffeb6b152488ef894ec6a Mon Sep 17 00:00:00 2001
From: Bogdan Fazakas <bogdan.fazakas@gmail.com>
Date: Wed, 4 Aug 2021 18:30:14 +0300
Subject: [PATCH 03/31] fetch history published/shares/transactions/downloads
 using url account id and dynamic compute tab

---
 .../molecules/PoolTransactions/index.tsx      |  5 +-
 .../organisms/AssetActions/Pool/index.tsx     |  6 +-
 .../pages/Account/History/Downloads.tsx       |  7 ++-
 .../pages/Account/History/PoolShares.tsx      |  7 ++-
 .../pages/Account/History/PublishedList.tsx   |  7 ++-
 .../pages/Account/History/index.tsx           | 58 ++++++++++++-------
 src/components/pages/Account/index.tsx        |  4 +-
 7 files changed, 63 insertions(+), 31 deletions(-)

diff --git a/src/components/molecules/PoolTransactions/index.tsx b/src/components/molecules/PoolTransactions/index.tsx
index ca0d174a2..4336d9c62 100644
--- a/src/components/molecules/PoolTransactions/index.tsx
+++ b/src/components/molecules/PoolTransactions/index.tsx
@@ -129,12 +129,13 @@ const columnsMinimal = [columns[0], columns[3]]
 
 export default function PoolTransactions({
   poolAddress,
-  minimal
+  minimal,
+  accountId
 }: {
   poolAddress?: string
   minimal?: boolean
+  accountId: string
 }): ReactElement {
-  const { accountId } = useWeb3()
   const [logs, setLogs] = useState<PoolTransaction[]>()
   const [isLoading, setIsLoading] = useState<boolean>(false)
   const { chainIds } = useUserPreferences()
diff --git a/src/components/organisms/AssetActions/Pool/index.tsx b/src/components/organisms/AssetActions/Pool/index.tsx
index 5079e1fd0..244b39860 100644
--- a/src/components/organisms/AssetActions/Pool/index.tsx
+++ b/src/components/organisms/AssetActions/Pool/index.tsx
@@ -386,7 +386,11 @@ export default function Pool(): ReactElement {
 
           {accountId && (
             <AssetActionHistoryTable title="Your Pool Transactions">
-              <PoolTransactions poolAddress={price?.address} minimal />
+              <PoolTransactions
+                accountId={accountId}
+                poolAddress={price?.address}
+                minimal
+              />
             </AssetActionHistoryTable>
           )}
         </>
diff --git a/src/components/pages/Account/History/Downloads.tsx b/src/components/pages/Account/History/Downloads.tsx
index 33064fb9a..aa8f5e81c 100644
--- a/src/components/pages/Account/History/Downloads.tsx
+++ b/src/components/pages/Account/History/Downloads.tsx
@@ -65,8 +65,11 @@ const columns = [
   }
 ]
 
-export default function ComputeDownloads(): ReactElement {
-  const { accountId } = useWeb3()
+export default function ComputeDownloads({
+  accountId
+}: {
+  accountId: string
+}): ReactElement {
   const { appConfig } = useSiteMetadata()
   const [isLoading, setIsLoading] = useState(false)
   const [orders, setOrders] = useState<DownloadedAssets[]>()
diff --git a/src/components/pages/Account/History/PoolShares.tsx b/src/components/pages/Account/History/PoolShares.tsx
index 882657801..806361842 100644
--- a/src/components/pages/Account/History/PoolShares.tsx
+++ b/src/components/pages/Account/History/PoolShares.tsx
@@ -154,8 +154,11 @@ const columns = [
   }
 ]
 
-export default function PoolShares(): ReactElement {
-  const { accountId } = useWeb3()
+export default function PoolShares({
+  accountId
+}: {
+  accountId: string
+}): ReactElement {
   const [assets, setAssets] = useState<Asset[]>()
   const [loading, setLoading] = useState<boolean>(false)
   const [data, setData] = useState<PoolShare[]>()
diff --git a/src/components/pages/Account/History/PublishedList.tsx b/src/components/pages/Account/History/PublishedList.tsx
index 461697579..2a6f5996c 100644
--- a/src/components/pages/Account/History/PublishedList.tsx
+++ b/src/components/pages/Account/History/PublishedList.tsx
@@ -11,8 +11,11 @@ import { useWeb3 } from '../../../../providers/Web3'
 import { useSiteMetadata } from '../../../../hooks/useSiteMetadata'
 import { useUserPreferences } from '../../../../providers/UserPreferences'
 
-export default function PublishedList(): ReactElement {
-  const { accountId } = useWeb3()
+export default function PublishedList({
+  accountId
+}: {
+  accountId: string
+}): ReactElement {
   const { appConfig } = useSiteMetadata()
   const { chainIds } = useUserPreferences()
 
diff --git a/src/components/pages/Account/History/index.tsx b/src/components/pages/Account/History/index.tsx
index 34d5b4f7d..dcd1163aa 100644
--- a/src/components/pages/Account/History/index.tsx
+++ b/src/components/pages/Account/History/index.tsx
@@ -8,25 +8,34 @@ import ComputeJobs from './ComputeJobs'
 import styles from './index.module.css'
 import { useUserPreferences } from '../../../../providers/UserPreferences'
 import OceanProvider from '../../../../providers/Ocean'
+import { useWeb3 } from '../../../../providers/Web3'
 
-const tabs = [
-  {
-    title: 'Published',
-    content: <PublishedList />
-  },
-  {
-    title: 'Pool Shares',
-    content: <PoolShares />
-  },
-  {
-    title: 'Pool Transactions',
-    content: <PoolTransactions />
-  },
-  {
-    title: 'Downloads',
-    content: <Downloads />
-  },
-  {
+interface HistoryTab {
+  title: string
+  content: JSX.Element
+}
+
+function getTabs(accountIdentifier: string): HistoryTab[] {
+  const { accountId } = useWeb3()
+  const defaultTabs: HistoryTab[] = [
+    {
+      title: 'Published',
+      content: <PublishedList accountId={accountIdentifier} />
+    },
+    {
+      title: 'Pool Shares',
+      content: <PoolShares accountId={accountIdentifier} />
+    },
+    {
+      title: 'Pool Transactions',
+      content: <PoolTransactions accountId={accountIdentifier} />
+    },
+    {
+      title: 'Downloads',
+      content: <Downloads accountId={accountIdentifier} />
+    }
+  ]
+  const computeTab: HistoryTab = {
     title: 'Compute Jobs',
     content: (
       <OceanProvider>
@@ -34,12 +43,21 @@ const tabs = [
       </OceanProvider>
     )
   }
-]
+  if (accountIdentifier === accountId) {
+    defaultTabs.push(computeTab)
+  }
+  return defaultTabs
+}
 
-export default function HistoryPage(): ReactElement {
+export default function HistoryPage({
+  accountId
+}: {
+  accountId: string
+}): ReactElement {
   const { chainIds } = useUserPreferences()
   const url = new URL(window.location.href)
   const defaultTab = url.searchParams.get('defaultTab')
+  const tabs = getTabs(accountId)
   let defaultTabIndex = 0
   defaultTab === 'ComputeJobs' ? (defaultTabIndex = 4) : (defaultTabIndex = 0)
   return (
diff --git a/src/components/pages/Account/index.tsx b/src/components/pages/Account/index.tsx
index 9faf8affb..158df829a 100644
--- a/src/components/pages/Account/index.tsx
+++ b/src/components/pages/Account/index.tsx
@@ -5,7 +5,7 @@ import { useWeb3 } from '../../../providers/Web3'
 export default function AccountPage({
   accountIdentifier
 }: {
-  accountIdentifier: ReactElement | string
+  accountIdentifier: string
 }): ReactElement {
   const { accountId } = useWeb3()
   if (!accountIdentifier) accountIdentifier = accountId
@@ -17,7 +17,7 @@ export default function AccountPage({
       ) : (
         <p>Please connect your Web3 wallet.</p>
       )}
-      <HistoryPage />
+      <HistoryPage accountId={accountIdentifier} />
     </article>
   )
 }

From a456b55a32ba45ac04c234b99139e7735f1d613b Mon Sep 17 00:00:00 2001
From: Bogdan Fazakas <bogdan.fazakas@gmail.com>
Date: Wed, 4 Aug 2021 18:42:46 +0300
Subject: [PATCH 04/31] fix lint error

---
 .../pages/Account/History/index.tsx           | 20 +++++++++----------
 src/components/pages/Account/index.tsx        |  2 +-
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/components/pages/Account/History/index.tsx b/src/components/pages/Account/History/index.tsx
index dcd1163aa..2a54e7b98 100644
--- a/src/components/pages/Account/History/index.tsx
+++ b/src/components/pages/Account/History/index.tsx
@@ -15,24 +15,23 @@ interface HistoryTab {
   content: JSX.Element
 }
 
-function getTabs(accountIdentifier: string): HistoryTab[] {
-  const { accountId } = useWeb3()
+function getTabs(accountId: string, userAccountId: string): HistoryTab[] {
   const defaultTabs: HistoryTab[] = [
     {
       title: 'Published',
-      content: <PublishedList accountId={accountIdentifier} />
+      content: <PublishedList accountId={accountId} />
     },
     {
       title: 'Pool Shares',
-      content: <PoolShares accountId={accountIdentifier} />
+      content: <PoolShares accountId={accountId} />
     },
     {
       title: 'Pool Transactions',
-      content: <PoolTransactions accountId={accountIdentifier} />
+      content: <PoolTransactions accountId={accountId} />
     },
     {
       title: 'Downloads',
-      content: <Downloads accountId={accountIdentifier} />
+      content: <Downloads accountId={accountId} />
     }
   ]
   const computeTab: HistoryTab = {
@@ -43,21 +42,22 @@ function getTabs(accountIdentifier: string): HistoryTab[] {
       </OceanProvider>
     )
   }
-  if (accountIdentifier === accountId) {
+  if (accountId === userAccountId) {
     defaultTabs.push(computeTab)
   }
   return defaultTabs
 }
 
 export default function HistoryPage({
-  accountId
+  accountIdentifier
 }: {
-  accountId: string
+  accountIdentifier: string
 }): ReactElement {
   const { chainIds } = useUserPreferences()
+  const { accountId } = useWeb3()
   const url = new URL(window.location.href)
   const defaultTab = url.searchParams.get('defaultTab')
-  const tabs = getTabs(accountId)
+  const tabs = getTabs(accountIdentifier, accountId)
   let defaultTabIndex = 0
   defaultTab === 'ComputeJobs' ? (defaultTabIndex = 4) : (defaultTabIndex = 0)
   return (
diff --git a/src/components/pages/Account/index.tsx b/src/components/pages/Account/index.tsx
index 158df829a..954599e35 100644
--- a/src/components/pages/Account/index.tsx
+++ b/src/components/pages/Account/index.tsx
@@ -17,7 +17,7 @@ export default function AccountPage({
       ) : (
         <p>Please connect your Web3 wallet.</p>
       )}
-      <HistoryPage accountId={accountIdentifier} />
+      <HistoryPage accountIdentifier={accountIdentifier} />
     </article>
   )
 }

From a36e32aa4ba6239a078fa4821d7df8d19862d2d1 Mon Sep 17 00:00:00 2001
From: Bogdan Fazakas <bogdan.fazakas@gmail.com>
Date: Fri, 20 Aug 2021 16:30:38 +0300
Subject: [PATCH 05/31] added sort for published assets

---
 .../pages/Account/History/PublishedList.tsx   | 38 ++++++++++++-------
 .../templates/Search/filterService.tsx        | 30 ++++++++-------
 src/components/templates/Search/index.tsx     |  1 +
 3 files changed, 42 insertions(+), 27 deletions(-)

diff --git a/src/components/pages/Account/History/PublishedList.tsx b/src/components/pages/Account/History/PublishedList.tsx
index 2a6f5996c..5f8fad32a 100644
--- a/src/components/pages/Account/History/PublishedList.tsx
+++ b/src/components/pages/Account/History/PublishedList.tsx
@@ -1,13 +1,13 @@
 import { Logger } from '@oceanprotocol/lib'
 import { QueryResult } from '@oceanprotocol/lib/dist/node/metadatacache/MetadataCache'
-import React, { ReactElement, useEffect, useState } from 'react'
+import React, { ReactElement, useEffect, useState, useReducer } from 'react'
 import AssetList from '../../../organisms/AssetList'
 import axios from 'axios'
 import {
   queryMetadata,
   transformChainIdsListToQuery
 } from '../../../../utils/aquarius'
-import { useWeb3 } from '../../../../providers/Web3'
+import ServiceFilter from '../../../templates/Search/filterService'
 import { useSiteMetadata } from '../../../../hooks/useSiteMetadata'
 import { useUserPreferences } from '../../../../providers/UserPreferences'
 
@@ -22,16 +22,19 @@ export default function PublishedList({
   const [queryResult, setQueryResult] = useState<QueryResult>()
   const [isLoading, setIsLoading] = useState(false)
   const [page, setPage] = useState<number>(1)
+  const [service, setServiceType] = useState<string>()
 
   useEffect(() => {
     async function getPublished() {
+      const serviceFiter =
+        service === undefined ? 'dataset OR algorithm' : `${service}`
       if (!accountId) return
       const queryPublishedAssets = {
         page: page,
         offset: 9,
         query: {
           query_string: {
-            query: `(publicKey.owner:${accountId}) AND (${transformChainIdsListToQuery(
+            query: `(publicKey.owner:${accountId}) AND (service.attributes.main.type:${serviceFiter}) AND (${transformChainIdsListToQuery(
               chainIds
             )})`
           }
@@ -51,19 +54,26 @@ export default function PublishedList({
       }
     }
     getPublished()
-  }, [accountId, page, appConfig.metadataCacheUri, chainIds])
+  }, [accountId, page, appConfig.metadataCacheUri, chainIds, service])
 
   return accountId ? (
-    <AssetList
-      assets={queryResult?.results}
-      isLoading={isLoading}
-      showPagination
-      page={queryResult?.page}
-      totalPages={queryResult?.totalPages}
-      onPageChange={(newPage) => {
-        setPage(newPage)
-      }}
-    />
+    <div>
+      <ServiceFilter
+        serviceType={service}
+        setServiceType={setServiceType}
+        isSearch={false}
+      />
+      <AssetList
+        assets={queryResult?.results}
+        isLoading={isLoading}
+        showPagination
+        page={queryResult?.page}
+        totalPages={queryResult?.totalPages}
+        onPageChange={(newPage) => {
+          setPage(newPage)
+        }}
+      />
+    </div>
   ) : (
     <div>Please connect your Web3 wallet.</div>
   )
diff --git a/src/components/templates/Search/filterService.tsx b/src/components/templates/Search/filterService.tsx
index 168c35fe2..888996be7 100644
--- a/src/components/templates/Search/filterService.tsx
+++ b/src/components/templates/Search/filterService.tsx
@@ -16,21 +16,25 @@ const serviceFilterItems = [
 
 export default function FilterPrice({
   serviceType,
-  setServiceType
+  setServiceType,
+  isSearch
 }: {
   serviceType: string
   setServiceType: React.Dispatch<React.SetStateAction<string>>
+  isSearch: boolean
 }): ReactElement {
   const navigate = useNavigate()
   const [serviceSelections, setServiceSelections] = useState<string[]>([])
 
   async function applyServiceFilter(filterBy: string) {
-    let urlLocation = await addExistingParamsToUrl(location, ['serviceType'])
-    if (filterBy && location.search.indexOf('&serviceType') === -1) {
-      urlLocation = `${urlLocation}&serviceType=${filterBy}`
-    }
     setServiceType(filterBy)
-    navigate(urlLocation)
+    if (isSearch) {
+      let urlLocation = await addExistingParamsToUrl(location, ['serviceType'])
+      if (filterBy && location.search.indexOf('&serviceType') === -1) {
+        urlLocation = `${urlLocation}&serviceType=${filterBy}`
+      }
+      navigate(urlLocation)
+    }
   }
 
   async function handleSelectedFilter(isSelected: boolean, value: string) {
@@ -58,14 +62,14 @@ export default function FilterPrice({
     }
   }
 
-  async function applyClearFilter() {
-    let urlLocation = await addExistingParamsToUrl(location, ['serviceType'])
-
-    urlLocation = `${urlLocation}`
-
+  async function applyClearFilter(isSearch: boolean) {
     setServiceSelections([])
     setServiceType(undefined)
-    navigate(urlLocation)
+    if (isSearch) {
+      let urlLocation = await addExistingParamsToUrl(location, ['serviceType'])
+      urlLocation = `${urlLocation}`
+      navigate(urlLocation)
+    }
   }
 
   return (
@@ -100,7 +104,7 @@ export default function FilterPrice({
             key={index}
             className={showClear ? styles.showClear : styles.hideClear}
             onClick={async () => {
-              applyClearFilter()
+              applyClearFilter(isSearch)
             }}
           >
             {e.display}
diff --git a/src/components/templates/Search/index.tsx b/src/components/templates/Search/index.tsx
index 2f9508b41..d61aed559 100644
--- a/src/components/templates/Search/index.tsx
+++ b/src/components/templates/Search/index.tsx
@@ -75,6 +75,7 @@ export default function SearchPage({
             <ServiceFilter
               serviceType={service}
               setServiceType={setServiceType}
+              isSearch={true}
             />
             <Sort
               sortType={sortType}

From 3afdaa236f7479b79f089a51793fea6f98909395 Mon Sep 17 00:00:00 2001
From: Bogdan Fazakas <bogdan.fazakas@gmail.com>
Date: Fri, 20 Aug 2021 16:45:53 +0300
Subject: [PATCH 06/31] fixed lint error

---
 src/components/templates/Search/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/templates/Search/index.tsx b/src/components/templates/Search/index.tsx
index d61aed559..fc11f2218 100644
--- a/src/components/templates/Search/index.tsx
+++ b/src/components/templates/Search/index.tsx
@@ -75,7 +75,7 @@ export default function SearchPage({
             <ServiceFilter
               serviceType={service}
               setServiceType={setServiceType}
-              isSearch={true}
+              isSearch
             />
             <Sort
               sortType={sortType}

From 54334bb6fda79be6f8d509a54a827d1345079c75 Mon Sep 17 00:00:00 2001
From: Bogdan Fazakas <bogdan.fazakas@gmail.com>
Date: Mon, 23 Aug 2021 12:11:28 +0300
Subject: [PATCH 07/31] display filter only when necessary

---
 .../pages/Account/History/PublishedList.tsx       | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/components/pages/Account/History/PublishedList.tsx b/src/components/pages/Account/History/PublishedList.tsx
index 5f8fad32a..c2610aa2c 100644
--- a/src/components/pages/Account/History/PublishedList.tsx
+++ b/src/components/pages/Account/History/PublishedList.tsx
@@ -58,11 +58,16 @@ export default function PublishedList({
 
   return accountId ? (
     <div>
-      <ServiceFilter
-        serviceType={service}
-        setServiceType={setServiceType}
-        isSearch={false}
-      />
+      {queryResult?.results?.length > 0 ? (
+        <ServiceFilter
+          serviceType={service}
+          setServiceType={setServiceType}
+          isSearch={false}
+        />
+      ) : (
+        ''
+      )}
+
       <AssetList
         assets={queryResult?.results}
         isLoading={isLoading}

From d015279d941cc4d5c87ff1a9d15a030c558a2093 Mon Sep 17 00:00:00 2001
From: Bogdan Fazakas <bogdan.fazakas@gmail.com>
Date: Mon, 23 Aug 2021 16:17:28 +0300
Subject: [PATCH 08/31] display loading spinner on every fetch published assets
 call

---
 src/components/pages/Account/History/PublishedList.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/pages/Account/History/PublishedList.tsx b/src/components/pages/Account/History/PublishedList.tsx
index c2610aa2c..f03ca89ce 100644
--- a/src/components/pages/Account/History/PublishedList.tsx
+++ b/src/components/pages/Account/History/PublishedList.tsx
@@ -44,7 +44,7 @@ export default function PublishedList({
       try {
         const source = axios.CancelToken.source()
 
-        queryResult || setIsLoading(true)
+        setIsLoading(true)
         const result = await queryMetadata(queryPublishedAssets, source.token)
         setQueryResult(result)
       } catch (error) {

From 18badb7b17c5c7ef556cdb31a0588699f9e3d732 Mon Sep 17 00:00:00 2001
From: Bogdan Fazakas <bogdan.fazakas@gmail.com>
Date: Tue, 24 Aug 2021 16:55:32 +0300
Subject: [PATCH 09/31] allways display filters on published page

---
 .../pages/Account/History/PublishedList.tsx       | 15 +++++----------
 1 file changed, 5 insertions(+), 10 deletions(-)

diff --git a/src/components/pages/Account/History/PublishedList.tsx b/src/components/pages/Account/History/PublishedList.tsx
index f03ca89ce..c9f4cda3c 100644
--- a/src/components/pages/Account/History/PublishedList.tsx
+++ b/src/components/pages/Account/History/PublishedList.tsx
@@ -58,16 +58,11 @@ export default function PublishedList({
 
   return accountId ? (
     <div>
-      {queryResult?.results?.length > 0 ? (
-        <ServiceFilter
-          serviceType={service}
-          setServiceType={setServiceType}
-          isSearch={false}
-        />
-      ) : (
-        ''
-      )}
-
+      <ServiceFilter
+        serviceType={service}
+        setServiceType={setServiceType}
+        isSearch={false}
+      />
       <AssetList
         assets={queryResult?.results}
         isLoading={isLoading}

From f8ffcbac753f3e65dcc5d4ef0147a7b774fe2366 Mon Sep 17 00:00:00 2001
From: Bogdan Fazakas <bogdan.fazakas@gmail.com>
Date: Wed, 1 Sep 2021 14:56:34 +0300
Subject: [PATCH 10/31] Account metadata header (#776)

* get all neded data for the header from 3box, aqua and subgraph

* fix tvl display error

* WIP metadata header styling

* added more styling for the header

* make page title optional so we can remove it on account page

* stroke change for svg images and default values

* more styling added to the header

* fixed linter

* added ocean balance to tvl

* update styling for statistcs

* fixed eror for go to my account from another account page

* updated styling for mobile use

* wip show more on explorer links and description

* properly display read more for explorer links and description

* replaced show more with 3box redirect on description

* change accounts default picture and check links length before display element

* use optional on links

* grid cleanup, new number unit, split up stats

* rename all the things, more profile header styling

* visual hierarchy, improve image loading experience

* layout flow & visual tweaks

* more description

* replaced account route  with profile when accesing a profile by the eth address

* use account id from url if exists when fetching data

* bump @oceanprotocol/art to v3.2.0

* styling, fallbacks, edge case fixes

* clean up Publisher atom, link to profile page

* fixed issue when switching to my profile from another profile

* output accountId, make it copyable, remove stats icons

* render tweaks, markup cleanup

* add 3box reference

* mobile tabs spacing tweaks

* text flow and spacing tweaks

Co-authored-by: Matthias Kretschmann <m@kretschmann.io>
---
 _redirects                                    |   2 +-
 content/pages/{account.json => profile.json}  |   0
 content/site.json                             |   4 +-
 gatsby-node.js                                |   4 +-
 package-lock.json                             | 108 +++++++++++++++++
 package.json                                  |   1 +
 src/components/atoms/Copy.module.css          |  35 ++++++
 src/components/atoms/Copy.tsx                 |  33 ++++++
 .../atoms/Publisher/ProfileDetails.module.css |  72 ------------
 .../atoms/Publisher/ProfileDetails.tsx        |  51 --------
 .../atoms/Publisher/index.module.css          |  31 -----
 src/components/atoms/Publisher/index.tsx      |  33 +-----
 src/components/atoms/Tabs.module.css          |  11 +-
 .../molecules/NumberUnit.module.css           |  48 ++++++++
 src/components/molecules/NumberUnit.tsx       |  45 ++++++++
 .../organisms/AssetActions/Compute/index.tsx  |   4 +-
 src/components/pages/Account/index.tsx        |  23 ----
 .../pages/Profile/Account.module.css          |  62 ++++++++++
 src/components/pages/Profile/Account.tsx      |  75 ++++++++++++
 .../pages/Profile/Header.module.css           |  54 +++++++++
 src/components/pages/Profile/Header.tsx       | 109 ++++++++++++++++++
 .../History/ComputeJobs/Details.module.css    |   0
 .../History/ComputeJobs/Details.tsx           |   1 -
 .../History/ComputeJobs/Results.module.css    |   0
 .../History/ComputeJobs/Results.tsx           |   0
 .../History/ComputeJobs/index.module.css      |   0
 .../History/ComputeJobs/index.tsx             |   5 +-
 .../History/Downloads.tsx                     |   1 -
 .../History/PoolShares.module.css             |   0
 .../History/PoolShares.tsx                    |  18 +--
 .../History/PublishedList.tsx                 |   2 +-
 .../History/index.module.css                  |   2 +-
 .../{Account => Profile}/History/index.tsx    |  17 ++-
 .../Profile}/PublisherLinks.module.css        |   7 +-
 .../Profile}/PublisherLinks.tsx               |  16 ++-
 src/components/pages/Profile/Stats.module.css |   6 +
 src/components/pages/Profile/Stats.tsx        | 103 +++++++++++++++++
 src/components/pages/Profile/index.tsx        |  16 +++
 src/components/templates/Page.tsx             |   2 +-
 src/pages/account/index.tsx                   |  35 ------
 src/pages/profile/index.tsx                   |  39 +++++++
 src/utils/subgraph.ts                         | 107 +++++++++++++++++
 tests/unit/__fixtures__/siteMetadata.json     |   4 +-
 43 files changed, 894 insertions(+), 292 deletions(-)
 rename content/pages/{account.json => profile.json} (100%)
 create mode 100644 src/components/atoms/Copy.module.css
 create mode 100644 src/components/atoms/Copy.tsx
 delete mode 100644 src/components/atoms/Publisher/ProfileDetails.module.css
 delete mode 100644 src/components/atoms/Publisher/ProfileDetails.tsx
 create mode 100644 src/components/molecules/NumberUnit.module.css
 create mode 100644 src/components/molecules/NumberUnit.tsx
 delete mode 100644 src/components/pages/Account/index.tsx
 create mode 100644 src/components/pages/Profile/Account.module.css
 create mode 100644 src/components/pages/Profile/Account.tsx
 create mode 100644 src/components/pages/Profile/Header.module.css
 create mode 100644 src/components/pages/Profile/Header.tsx
 rename src/components/pages/{Account => Profile}/History/ComputeJobs/Details.module.css (100%)
 rename src/components/pages/{Account => Profile}/History/ComputeJobs/Details.tsx (98%)
 rename src/components/pages/{Account => Profile}/History/ComputeJobs/Results.module.css (100%)
 rename src/components/pages/{Account => Profile}/History/ComputeJobs/Results.tsx (100%)
 rename src/components/pages/{Account => Profile}/History/ComputeJobs/index.module.css (100%)
 rename src/components/pages/{Account => Profile}/History/ComputeJobs/index.tsx (98%)
 rename src/components/pages/{Account => Profile}/History/Downloads.tsx (98%)
 rename src/components/pages/{Account => Profile}/History/PoolShares.module.css (100%)
 rename src/components/pages/{Account => Profile}/History/PoolShares.tsx (92%)
 rename src/components/pages/{Account => Profile}/History/PublishedList.tsx (96%)
 rename src/components/pages/{Account => Profile}/History/index.module.css (98%)
 rename src/components/pages/{Account => Profile}/History/index.tsx (83%)
 rename src/components/{atoms/Publisher => pages/Profile}/PublisherLinks.module.css (69%)
 rename src/components/{atoms/Publisher => pages/Profile}/PublisherLinks.tsx (80%)
 create mode 100644 src/components/pages/Profile/Stats.module.css
 create mode 100644 src/components/pages/Profile/Stats.tsx
 create mode 100644 src/components/pages/Profile/index.tsx
 delete mode 100644 src/pages/account/index.tsx
 create mode 100644 src/pages/profile/index.tsx

diff --git a/_redirects b/_redirects
index b810c2224..db198413a 100644
--- a/_redirects
+++ b/_redirects
@@ -1,2 +1,2 @@
 /asset/* /asset/index.html 200
-/account/* /account/index.html 200
\ No newline at end of file
+/profile/* /profile/index.html 200
\ No newline at end of file
diff --git a/content/pages/account.json b/content/pages/profile.json
similarity index 100%
rename from content/pages/account.json
rename to content/pages/profile.json
diff --git a/content/site.json b/content/site.json
index 84e2ede5c..7cef28e78 100644
--- a/content/site.json
+++ b/content/site.json
@@ -12,8 +12,8 @@
         "link": "/publish"
       },
       {
-        "name": "My Account",
-        "link": "/account"
+        "name": "Profile",
+        "link": "/profile"
       }
     ],
     "warning": {
diff --git a/gatsby-node.js b/gatsby-node.js
index cc88386ba..cb611c715 100644
--- a/gatsby-node.js
+++ b/gatsby-node.js
@@ -34,14 +34,14 @@ exports.onCreatePage = async ({ page, actions }) => {
   // page.matchPath is a special key that's used for matching pages
   // only on the client.
   const handleClientSideOnlyAsset = page.path.match(/^\/asset/)
-  const handleClientSideOnlyAccount = page.path.match(/^\/account/)
+  const handleClientSideOnlyAccount = page.path.match(/^\/profile/)
 
   if (handleClientSideOnlyAsset) {
     page.matchPath = '/asset/*'
     // Update the page.
     createPage(page)
   } else if (handleClientSideOnlyAccount) {
-    page.matchPath = '/account/*'
+    page.matchPath = '/profile/*'
     createPage(page)
   }
 }
diff --git a/package-lock.json b/package-lock.json
index 4574eb4f3..94e78b378 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -55,6 +55,7 @@
         "query-string": "^7.0.0",
         "react": "^17.0.2",
         "react-chartjs-2": "^2.11.2",
+        "react-clipboard.js": "^2.0.16",
         "react-data-table-component": "^6.11.7",
         "react-dom": "^17.0.2",
         "react-dotdotdot": "^1.3.1",
@@ -10524,6 +10525,15 @@
         "classnames": "*"
       }
     },
+    "node_modules/@types/clipboard": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/@types/clipboard/-/clipboard-2.0.7.tgz",
+      "integrity": "sha512-VwVFUHlneOsWfv/GaaY7Kwk4XasDqkAlyFQtsHxnOw0yyBYWTrlEXtmb9RtC+VFBCdtuOeIXECmELNd5RrKp/g==",
+      "deprecated": "This is a stub types definition. clipboard provides its own type definitions, so you do not need this installed.",
+      "dependencies": {
+        "clipboard": "*"
+      }
+    },
     "node_modules/@types/common-tags": {
       "version": "1.8.0",
       "resolved": "https://registry.npmjs.org/@types/common-tags/-/common-tags-1.8.0.tgz",
@@ -16998,6 +17008,16 @@
       "resolved": "https://registry.npmjs.org/cli-width/-/cli-width-2.2.1.tgz",
       "integrity": "sha512-GRMWDxpOB6Dgk2E5Uo+3eEBvtOOlimMmpbFiKuLFnQzYDavtLFY3K5ona41jgN/WdRZtG7utuVSVTL4HbZHGkw=="
     },
+    "node_modules/clipboard": {
+      "version": "2.0.8",
+      "resolved": "https://registry.npmjs.org/clipboard/-/clipboard-2.0.8.tgz",
+      "integrity": "sha512-Y6WO0unAIQp5bLmk1zdThRhgJt/x3ks6f30s3oE3H1mgIEU33XyQjEf8gsf6DxC7NPX8Y1SsNWjUjL/ywLnnbQ==",
+      "dependencies": {
+        "good-listener": "^1.2.2",
+        "select": "^1.1.2",
+        "tiny-emitter": "^2.0.0"
+      }
+    },
     "node_modules/clipboardy": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/clipboardy/-/clipboardy-2.3.0.tgz",
@@ -19004,6 +19024,11 @@
         "node": ">=0.4.0"
       }
     },
+    "node_modules/delegate": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/delegate/-/delegate-3.2.0.tgz",
+      "integrity": "sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw=="
+    },
     "node_modules/delegates": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
@@ -28778,6 +28803,14 @@
         "node": ">= 0.10"
       }
     },
+    "node_modules/good-listener": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/good-listener/-/good-listener-1.2.2.tgz",
+      "integrity": "sha1-1TswzfkxPf+33JoNR3CWqm0UXFA=",
+      "dependencies": {
+        "delegate": "^3.1.2"
+      }
+    },
     "node_modules/google-protobuf": {
       "version": "3.17.3",
       "resolved": "https://registry.npmjs.org/google-protobuf/-/google-protobuf-3.17.3.tgz",
@@ -44904,6 +44937,20 @@
         "react-dom": "^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0"
       }
     },
+    "node_modules/react-clipboard.js": {
+      "version": "2.0.16",
+      "resolved": "https://registry.npmjs.org/react-clipboard.js/-/react-clipboard.js-2.0.16.tgz",
+      "integrity": "sha512-COwmnbrRbl8y4f/SjtonnJTeBRD03YzsHBL5on8iL/uyjERsMkKC7djtfmns7iRAbzadn/84MdpaqaQ3ITP47g==",
+      "dependencies": {
+        "@types/clipboard": "^2.0.1",
+        "clipboard": "^2.0.0",
+        "prop-types": "^15.5.0"
+      },
+      "peerDependencies": {
+        "react": ">=15.5.0",
+        "react-dom": ">=15.0.0"
+      }
+    },
     "node_modules/react-data-table-component": {
       "version": "6.11.7",
       "resolved": "https://registry.npmjs.org/react-data-table-component/-/react-data-table-component-6.11.7.tgz",
@@ -47656,6 +47703,11 @@
         "seek-table": "bin/seek-bzip-table"
       }
     },
+    "node_modules/select": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/select/-/select-1.1.2.tgz",
+      "integrity": "sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0="
+    },
     "node_modules/select-hose": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",
@@ -51465,6 +51517,11 @@
       "resolved": "https://registry.npmjs.org/timsort/-/timsort-0.3.0.tgz",
       "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q="
     },
+    "node_modules/tiny-emitter": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz",
+      "integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q=="
+    },
     "node_modules/tiny-queue": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/tiny-queue/-/tiny-queue-0.2.1.tgz",
@@ -66972,6 +67029,14 @@
         "classnames": "*"
       }
     },
+    "@types/clipboard": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/@types/clipboard/-/clipboard-2.0.7.tgz",
+      "integrity": "sha512-VwVFUHlneOsWfv/GaaY7Kwk4XasDqkAlyFQtsHxnOw0yyBYWTrlEXtmb9RtC+VFBCdtuOeIXECmELNd5RrKp/g==",
+      "requires": {
+        "clipboard": "*"
+      }
+    },
     "@types/common-tags": {
       "version": "1.8.0",
       "resolved": "https://registry.npmjs.org/@types/common-tags/-/common-tags-1.8.0.tgz",
@@ -72373,6 +72438,16 @@
       "resolved": "https://registry.npmjs.org/cli-width/-/cli-width-2.2.1.tgz",
       "integrity": "sha512-GRMWDxpOB6Dgk2E5Uo+3eEBvtOOlimMmpbFiKuLFnQzYDavtLFY3K5ona41jgN/WdRZtG7utuVSVTL4HbZHGkw=="
     },
+    "clipboard": {
+      "version": "2.0.8",
+      "resolved": "https://registry.npmjs.org/clipboard/-/clipboard-2.0.8.tgz",
+      "integrity": "sha512-Y6WO0unAIQp5bLmk1zdThRhgJt/x3ks6f30s3oE3H1mgIEU33XyQjEf8gsf6DxC7NPX8Y1SsNWjUjL/ywLnnbQ==",
+      "requires": {
+        "good-listener": "^1.2.2",
+        "select": "^1.1.2",
+        "tiny-emitter": "^2.0.0"
+      }
+    },
     "clipboardy": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/clipboardy/-/clipboardy-2.3.0.tgz",
@@ -73977,6 +74052,11 @@
       "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
       "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk="
     },
+    "delegate": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/delegate/-/delegate-3.2.0.tgz",
+      "integrity": "sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw=="
+    },
     "delegates": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
@@ -81674,6 +81754,14 @@
         "minimatch": "~3.0.2"
       }
     },
+    "good-listener": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/good-listener/-/good-listener-1.2.2.tgz",
+      "integrity": "sha1-1TswzfkxPf+33JoNR3CWqm0UXFA=",
+      "requires": {
+        "delegate": "^3.1.2"
+      }
+    },
     "google-protobuf": {
       "version": "3.17.3",
       "resolved": "https://registry.npmjs.org/google-protobuf/-/google-protobuf-3.17.3.tgz",
@@ -94695,6 +94783,16 @@
         "prop-types": "^15.7.2"
       }
     },
+    "react-clipboard.js": {
+      "version": "2.0.16",
+      "resolved": "https://registry.npmjs.org/react-clipboard.js/-/react-clipboard.js-2.0.16.tgz",
+      "integrity": "sha512-COwmnbrRbl8y4f/SjtonnJTeBRD03YzsHBL5on8iL/uyjERsMkKC7djtfmns7iRAbzadn/84MdpaqaQ3ITP47g==",
+      "requires": {
+        "@types/clipboard": "^2.0.1",
+        "clipboard": "^2.0.0",
+        "prop-types": "^15.5.0"
+      }
+    },
     "react-data-table-component": {
       "version": "6.11.7",
       "resolved": "https://registry.npmjs.org/react-data-table-component/-/react-data-table-component-6.11.7.tgz",
@@ -96908,6 +97006,11 @@
         "commander": "^2.8.1"
       }
     },
+    "select": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/select/-/select-1.1.2.tgz",
+      "integrity": "sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0="
+    },
     "select-hose": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",
@@ -100004,6 +100107,11 @@
       "resolved": "https://registry.npmjs.org/timsort/-/timsort-0.3.0.tgz",
       "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q="
     },
+    "tiny-emitter": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz",
+      "integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q=="
+    },
     "tiny-queue": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/tiny-queue/-/tiny-queue-0.2.1.tgz",
diff --git a/package.json b/package.json
index 00d7cac9c..7bfab8799 100644
--- a/package.json
+++ b/package.json
@@ -70,6 +70,7 @@
     "query-string": "^7.0.0",
     "react": "^17.0.2",
     "react-chartjs-2": "^2.11.2",
+    "react-clipboard.js": "^2.0.16",
     "react-data-table-component": "^6.11.7",
     "react-dom": "^17.0.2",
     "react-dotdotdot": "^1.3.1",
diff --git a/src/components/atoms/Copy.module.css b/src/components/atoms/Copy.module.css
new file mode 100644
index 000000000..ebc157ee4
--- /dev/null
+++ b/src/components/atoms/Copy.module.css
@@ -0,0 +1,35 @@
+.button {
+  display: inline-block;
+  margin: 0;
+  border: 0;
+  box-shadow: none;
+  background: none;
+  padding: 0;
+  cursor: pointer;
+  position: relative;
+}
+
+.icon {
+  fill: var(--color-secondary);
+  transition: 0.15s ease-out;
+  width: 10px;
+  height: 10px;
+}
+
+.button:hover .icon {
+  fill: var(--font-color-text);
+}
+
+.copied .icon,
+.button.copied:hover .icon {
+  fill: var(--brand-alert-green);
+}
+
+.copied::after {
+  content: 'Copied!';
+  position: absolute;
+  top: -150%;
+  left: -100%;
+  font-size: var(--font-size-mini);
+  color: var(--brand-alert-green);
+}
diff --git a/src/components/atoms/Copy.tsx b/src/components/atoms/Copy.tsx
new file mode 100644
index 000000000..d0693963f
--- /dev/null
+++ b/src/components/atoms/Copy.tsx
@@ -0,0 +1,33 @@
+import React, { ReactElement, useEffect, useState } from 'react'
+import loadable from '@loadable/component'
+import styles from './Copy.module.css'
+import { ReactComponent as IconCopy } from '../../images/copy.svg'
+
+// lazy load when needed only, as library is a bit big
+const Clipboard = loadable(() => import('react-clipboard.js'))
+
+export default function Copy({ text }: { text: string }): ReactElement {
+  const [isCopied, setIsCopied] = useState(false)
+
+  // Clear copy success style after 5 sec.
+  useEffect(() => {
+    if (!isCopied) return
+
+    const timeout = setTimeout(() => {
+      setIsCopied(false)
+    }, 5000)
+
+    return () => clearTimeout(timeout)
+  }, [isCopied])
+
+  return (
+    <Clipboard
+      data-clipboard-text={text}
+      button-title="Copy to clipboard"
+      onSuccess={() => setIsCopied(true)}
+      className={`${styles.button} ${isCopied ? styles.copied : ''}`}
+    >
+      <IconCopy className={styles.icon} />
+    </Clipboard>
+  )
+}
diff --git a/src/components/atoms/Publisher/ProfileDetails.module.css b/src/components/atoms/Publisher/ProfileDetails.module.css
deleted file mode 100644
index a0e85bea5..000000000
--- a/src/components/atoms/Publisher/ProfileDetails.module.css
+++ /dev/null
@@ -1,72 +0,0 @@
-.profile {
-  background: var(--background-highlight);
-  border-radius: var(--border-radius);
-  padding: calc(var(--spacer) / 2);
-  margin-bottom: calc(var(--spacer) / 4);
-}
-
-@media (min-width: 40rem) {
-  .profile {
-    margin: calc(var(--spacer) / 8);
-    margin-bottom: calc(var(--spacer) / 4);
-  }
-}
-
-.profile p {
-  margin-bottom: calc(var(--spacer) / 4);
-}
-
-.profile code {
-  padding: 0;
-  color: var(--color-secondary);
-  font-size: var(--font-size-mini);
-  overflow-wrap: break-word;
-  word-wrap: break-word;
-  word-break: break-word;
-}
-
-.header {
-  margin-bottom: calc(var(--spacer) / 4);
-  text-align: center;
-}
-
-.header::after {
-  content: '';
-  display: block;
-  margin: calc(var(--spacer) / 2) auto;
-  width: 20%;
-  height: 2px;
-  background: var(--border-color);
-}
-
-.image {
-  width: 48px;
-  height: 48px;
-  border-radius: 50%;
-  overflow: hidden;
-  display: inline-block;
-  margin-bottom: calc(var(--spacer) / 4);
-  border: 1px solid var(--border-color);
-  box-shadow: 0 6px 17px 0 var(--box-shadow-color);
-}
-
-.title {
-  font-size: var(--font-size-base);
-  margin-bottom: 0;
-}
-
-.description {
-  font-size: var(--font-size-small);
-}
-
-.profile p:last-child {
-  margin-bottom: 0;
-}
-
-.meta {
-  color: var(--color-secondary);
-  font-size: var(--font-size-mini);
-  text-align: right;
-  margin-left: calc(var(--spacer) / 4);
-  margin-right: calc(var(--spacer) / 4);
-}
diff --git a/src/components/atoms/Publisher/ProfileDetails.tsx b/src/components/atoms/Publisher/ProfileDetails.tsx
deleted file mode 100644
index 7f4be381b..000000000
--- a/src/components/atoms/Publisher/ProfileDetails.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import React, { ReactElement } from 'react'
-import styles from './ProfileDetails.module.css'
-import { Profile } from '../../../models/Profile'
-import ExplorerLink from '../ExplorerLink'
-import PublisherLinks from './PublisherLinks'
-
-export default function ProfileDetails({
-  profile,
-  networkId,
-  account
-}: {
-  profile: Profile
-  networkId: number
-  account: string
-}): ReactElement {
-  return (
-    <>
-      <div className={styles.profile}>
-        <header className={styles.header}>
-          {profile?.image && (
-            <div className={styles.image}>
-              <img src={profile.image} width="48" height="48" />
-            </div>
-          )}
-          <h3 className={styles.title}>
-            {profile?.emoji} {profile?.name}
-          </h3>
-
-          <ExplorerLink networkId={networkId} path={`address/${account}`}>
-            <code>{account}</code>
-          </ExplorerLink>
-        </header>
-
-        {profile?.description && (
-          <p className={styles.description}>{profile?.description}</p>
-        )}
-        <PublisherLinks links={profile?.links} />
-      </div>
-      <div className={styles.meta}>
-        Profile data from{' '}
-        <a
-          href={`https://www.3box.io/${account}`}
-          target="_blank"
-          rel="noreferrer"
-        >
-          3Box Hub
-        </a>
-      </div>
-    </>
-  )
-}
diff --git a/src/components/atoms/Publisher/index.module.css b/src/components/atoms/Publisher/index.module.css
index 71a0287b8..93592f599 100644
--- a/src/components/atoms/Publisher/index.module.css
+++ b/src/components/atoms/Publisher/index.module.css
@@ -8,40 +8,9 @@
   }
 }
 
-.links {
-  display: inline;
-}
-
-.links a,
-.links span {
-  margin-left: calc(var(--spacer) / 3);
-  font-size: var(--font-size-mini);
-}
-
-.links a:first-child,
-.links span:first-child {
-  margin-left: 0;
-}
-
-.links a:hover,
-.links a:focus {
-  color: var(--brand-pink);
-}
-
 .linksExternal {
   width: 6px;
   height: 6px;
   display: inline-block;
   fill: var(--color-secondary);
 }
-
-.detailsTrigger {
-  cursor: help;
-}
-
-.detailsTrigger svg {
-  width: 10px;
-  height: 10px;
-  position: relative;
-  bottom: -1px;
-}
diff --git a/src/components/atoms/Publisher/index.tsx b/src/components/atoms/Publisher/index.tsx
index 8fac6942c..38934bf90 100644
--- a/src/components/atoms/Publisher/index.tsx
+++ b/src/components/atoms/Publisher/index.tsx
@@ -1,15 +1,11 @@
 import React, { ReactElement, useEffect, useState } from 'react'
 import styles from './index.module.css'
 import classNames from 'classnames/bind'
-import Tooltip from '../Tooltip'
 import { Profile } from '../../../models/Profile'
 import { Link } from 'gatsby'
 import get3BoxProfile from '../../../utils/profile'
-import ExplorerLink from '../ExplorerLink'
 import { accountTruncate } from '../../../utils/web3'
 import axios from 'axios'
-import { ReactComponent as Info } from '../../../images/info.svg'
-import ProfileDetails from './ProfileDetails'
 import Add from './Add'
 import { useWeb3 } from '../../../providers/Web3'
 
@@ -62,35 +58,10 @@ export default function Publisher({
         name
       ) : (
         <>
-          <Link
-            to={`/search?sort=created&sortOrder=desc&text=${account}`}
-            title="Show all data sets created by this account."
-          >
+          <Link to={`/profile/${account}`} title="Show profile page.">
             {name}
           </Link>
-          <div className={styles.links}>
-            {' — '}
-            {profile && (
-              <Tooltip
-                placement="bottom"
-                content={
-                  <ProfileDetails
-                    profile={profile}
-                    networkId={networkId}
-                    account={account}
-                  />
-                }
-              >
-                <span className={styles.detailsTrigger}>
-                  Profile <Info className={styles.linksExternal} />
-                </span>
-              </Tooltip>
-            )}
-            {showAdd && <Add />}
-            <ExplorerLink networkId={networkId} path={`address/${account}`}>
-              Explorer
-            </ExplorerLink>
-          </div>
+          {showAdd && <Add />}
         </>
       )}
     </div>
diff --git a/src/components/atoms/Tabs.module.css b/src/components/atoms/Tabs.module.css
index 3d76fc0d6..f138f9458 100644
--- a/src/components/atoms/Tabs.module.css
+++ b/src/components/atoms/Tabs.module.css
@@ -1,8 +1,7 @@
 .tabList {
   text-align: center;
   border-bottom: 1px solid var(--border-color);
-  padding-top: calc(var(--spacer) / 2);
-  padding-bottom: calc(var(--spacer) / 2);
+  padding: calc(var(--spacer) / 2);
 }
 
 .tab {
@@ -36,5 +35,11 @@
 }
 
 .tabContent {
-  padding: var(--spacer);
+  padding: calc(var(--spacer) / 2);
+}
+
+@media (min-width: 40rem) {
+  .tabContent {
+    padding: var(--spacer);
+  }
 }
diff --git a/src/components/molecules/NumberUnit.module.css b/src/components/molecules/NumberUnit.module.css
new file mode 100644
index 000000000..13fb622f4
--- /dev/null
+++ b/src/components/molecules/NumberUnit.module.css
@@ -0,0 +1,48 @@
+.number,
+.number * {
+  font-weight: var(--font-weight-bold);
+  font-size: var(--font-size-h4);
+  color: var(--font-color-heading);
+}
+
+.number {
+  white-space: nowrap;
+  display: inline-flex;
+  align-items: center;
+  line-height: 1;
+}
+
+.number.small,
+.number.small * {
+  font-size: var(--font-size-h5);
+}
+
+.label {
+  display: block;
+}
+
+.number svg {
+  width: var(--font-size-large);
+  height: var(--font-size-large);
+  margin-right: calc(var(--spacer) / 4);
+  stroke: currentColor;
+}
+
+.unit {
+  font-size: var(--font-size-small);
+  color: var(--color-secondary);
+}
+
+.unit a {
+  color: var(--color-secondary);
+  display: block;
+  padding: 0.5rem 1rem;
+  border: 0.1rem solid transparent;
+  border-radius: 0.2rem;
+}
+
+.unit a:hover,
+.unit a:focus {
+  background: var(--brand-white);
+  border: 0.1rem solid var(--brand-pink);
+}
diff --git a/src/components/molecules/NumberUnit.tsx b/src/components/molecules/NumberUnit.tsx
new file mode 100644
index 000000000..72ffc7daa
--- /dev/null
+++ b/src/components/molecules/NumberUnit.tsx
@@ -0,0 +1,45 @@
+import React, { ReactElement } from 'react'
+import styles from './NumberUnit.module.css'
+
+interface NumberInnerProps {
+  label: string
+  value: number | string | Element | ReactElement
+  small?: boolean
+  icon?: Element | ReactElement
+}
+
+interface NumberUnitProps extends NumberInnerProps {
+  link?: string
+  linkTooltip?: string
+}
+
+const NumberInner = ({ small, label, value, icon }: NumberInnerProps) => (
+  <>
+    <div className={`${styles.number} ${small && styles.small}`}>
+      {icon && icon}
+      {value}
+    </div>
+    <span className={styles.label}>{label}</span>
+  </>
+)
+
+export default function NumberUnit({
+  link,
+  linkTooltip,
+  small,
+  label,
+  value,
+  icon
+}: NumberUnitProps): ReactElement {
+  return (
+    <div className={styles.unit}>
+      {link ? (
+        <a href={link} title={linkTooltip}>
+          <NumberInner small={small} label={label} value={value} icon={icon} />
+        </a>
+      ) : (
+        <NumberInner small={small} label={label} value={value} icon={icon} />
+      )}
+    </div>
+  )
+}
diff --git a/src/components/organisms/AssetActions/Compute/index.tsx b/src/components/organisms/AssetActions/Compute/index.tsx
index 448e724ef..7984835d7 100644
--- a/src/components/organisms/AssetActions/Compute/index.tsx
+++ b/src/components/organisms/AssetActions/Compute/index.tsx
@@ -39,10 +39,10 @@ import { AssetSelectionAsset } from '../../../molecules/FormFields/AssetSelectio
 import AlgorithmDatasetsListForCompute from '../../AssetContent/AlgorithmDatasetsListForCompute'
 import { getPreviousOrders, getPrice } from '../../../../utils/subgraph'
 import AssetActionHistoryTable from '../../AssetActionHistoryTable'
-import ComputeJobs from '../../../pages/Account/History/ComputeJobs'
+import ComputeJobs from '../../../pages/Profile/History/ComputeJobs'
 
 const SuccessAction = () => (
-  <Button style="text" to="/account?defaultTab=ComputeJobs" size="small">
+  <Button style="text" to="/profile?defaultTab=ComputeJobs" size="small">
     Go to history →
   </Button>
 )
diff --git a/src/components/pages/Account/index.tsx b/src/components/pages/Account/index.tsx
deleted file mode 100644
index 954599e35..000000000
--- a/src/components/pages/Account/index.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import React, { ReactElement } from 'react'
-import HistoryPage from './History'
-import { useWeb3 } from '../../../providers/Web3'
-
-export default function AccountPage({
-  accountIdentifier
-}: {
-  accountIdentifier: string
-}): ReactElement {
-  const { accountId } = useWeb3()
-  if (!accountIdentifier) accountIdentifier = accountId
-
-  return (
-    <article>
-      {accountIdentifier ? (
-        <p>WIP Account metadata header for user: {accountIdentifier}</p>
-      ) : (
-        <p>Please connect your Web3 wallet.</p>
-      )}
-      <HistoryPage accountIdentifier={accountIdentifier} />
-    </article>
-  )
-}
diff --git a/src/components/pages/Profile/Account.module.css b/src/components/pages/Profile/Account.module.css
new file mode 100644
index 000000000..678f3c716
--- /dev/null
+++ b/src/components/pages/Profile/Account.module.css
@@ -0,0 +1,62 @@
+.account {
+  text-align: center;
+}
+
+.account p {
+  margin: 0;
+}
+
+@media (min-width: 40rem) {
+  .account {
+    text-align: left;
+    display: grid;
+    grid-template-columns: 0.2fr 1.8fr;
+    gap: calc(var(--spacer) / 2);
+    align-items: center;
+  }
+}
+
+.imageWrap {
+  width: 96px;
+  height: 96px;
+  border-radius: 50%;
+  overflow: hidden;
+  margin-bottom: calc(var(--spacer) / 4);
+  border: 1px solid var(--border-color);
+  box-shadow: 0 6px 17px 0 var(--box-shadow-color);
+}
+
+.image {
+  max-width: unset;
+}
+
+.name {
+  font-size: var(--font-size-h3);
+  margin-bottom: calc(var(--spacer) / 8);
+}
+
+.accountId {
+  display: block;
+  font-size: var(--font-size-small);
+  color: var(--color-secondary);
+  word-wrap: break-word;
+  white-space: pre-wrap;
+  padding: 0;
+  margin: 0;
+}
+
+.explorer {
+  font-size: var(--font-size-mini);
+  margin-right: calc(var(--spacer) / 1.5);
+  display: inline-flex;
+  align-items: center;
+}
+
+.explorer svg:first-child {
+  width: var(--font-size-mini);
+  height: var(--font-size-mini);
+}
+
+.explorer svg:last-child {
+  margin-left: calc(var(--spacer) / 12);
+}
diff --git a/src/components/pages/Profile/Account.tsx b/src/components/pages/Profile/Account.tsx
new file mode 100644
index 000000000..91bfccb6a
--- /dev/null
+++ b/src/components/pages/Profile/Account.tsx
@@ -0,0 +1,75 @@
+import { toDataUrl } from 'ethereum-blockies'
+import React, { ReactElement } from 'react'
+import { useUserPreferences } from '../../../providers/UserPreferences'
+import { accountTruncate } from '../../../utils/web3'
+import ExplorerLink from '../../atoms/ExplorerLink'
+import NetworkName from '../../atoms/NetworkName'
+import jellyfish from '@oceanprotocol/art/creatures/jellyfish/jellyfish-grid.svg'
+import styles from './Account.module.css'
+import Copy from '../../atoms/Copy'
+
+const Blockies = ({ account }: { account: string | undefined }) => {
+  if (!account) return null
+
+  const blockies = toDataUrl(account)
+
+  return (
+    <img
+      className={styles.image}
+      src={blockies}
+      alt="Blockies"
+      aria-hidden="true"
+    />
+  )
+}
+
+export default function Account({
+  name,
+  image,
+  accountId
+}: {
+  name: string
+  image: string
+  accountId: string
+}): ReactElement {
+  const { chainIds } = useUserPreferences()
+
+  return (
+    <div className={styles.account}>
+      <figure className={styles.imageWrap}>
+        {image ? (
+          <img src={image} className={styles.image} width="96" height="96" />
+        ) : accountId ? (
+          <Blockies account={accountId} />
+        ) : (
+          <img
+            src={jellyfish}
+            className={styles.image}
+            width="96"
+            height="96"
+          />
+        )}
+      </figure>
+
+      <div>
+        <h3 className={styles.name}>{name || accountTruncate(accountId)}</h3>
+        <code className={styles.accountId}>
+          {accountId} <Copy text={accountId} />
+        </code>
+        <p>
+          {accountId &&
+            chainIds.map((value) => (
+              <ExplorerLink
+                className={styles.explorer}
+                networkId={value}
+                path={`address/${accountId}`}
+                key={value}
+              >
+                <NetworkName networkId={value} />
+              </ExplorerLink>
+            ))}
+        </p>
+      </div>
+    </div>
+  )
+}
diff --git a/src/components/pages/Profile/Header.module.css b/src/components/pages/Profile/Header.module.css
new file mode 100644
index 000000000..98bf59bca
--- /dev/null
+++ b/src/components/pages/Profile/Header.module.css
@@ -0,0 +1,54 @@
+.grid {
+  composes: box from '../../atoms/Box.module.css';
+  background: var(--background-body-transparent);
+  backdrop-filter: blur(3px);
+  position: relative;
+}
+
+.description {
+  color: var(--color-secondary);
+  font-size: var(--font-size-small);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  margin-top: var(--spacer);
+}
+
+.description p:last-child {
+  margin-bottom: 0;
+}
+
+@media (min-width: 50rem) {
+  .grid {
+    display: grid;
+    gap: var(--spacer);
+    /* lazy golden ratio */
+    grid-template-columns: 1.618fr 1fr;
+  }
+
+  .description {
+    margin-top: calc(var(--spacer) / 2);
+    -webkit-line-clamp: 7 !important;
+  }
+}
+
+.publisherLinks {
+  margin-top: calc(var(--spacer) / 2);
+  margin-bottom: calc(var(--spacer) / 2);
+}
+
+.more {
+  font-size: var(--font-size-mini);
+  margin-left: calc(var(--spacer) / 8);
+  cursor: pointer;
+}
+
+.meta {
+  color: var(--color-secondary);
+  font-size: var(--font-size-mini);
+  position: absolute;
+  right: calc(var(--spacer) / 3);
+  bottom: calc(var(--spacer) / 6);
+}
diff --git a/src/components/pages/Profile/Header.tsx b/src/components/pages/Profile/Header.tsx
new file mode 100644
index 000000000..c697bb387
--- /dev/null
+++ b/src/components/pages/Profile/Header.tsx
@@ -0,0 +1,109 @@
+import React, { ReactElement, useEffect, useState } from 'react'
+import get3BoxProfile from '../../../utils/profile'
+import { ProfileLink } from '../../../models/Profile'
+import { accountTruncate } from '../../../utils/web3'
+import axios from 'axios'
+import PublisherLinks from './PublisherLinks'
+import Markdown from '../../atoms/Markdown'
+import Stats from './Stats'
+import Account from './Account'
+import styles from './Header.module.css'
+
+const isDescriptionTextClamped = () => {
+  const el = document.getElementById('description')
+  if (el) return el.scrollHeight > el.clientHeight
+}
+
+export default function AccountHeader({
+  accountId
+}: {
+  accountId: string
+}): ReactElement {
+  const [image, setImage] = useState<string>()
+  const [name, setName] = useState(accountTruncate(accountId))
+  const [description, setDescription] = useState<string>()
+  const [links, setLinks] = useState<ProfileLink[]>()
+  const [isShowMore, setIsShowMore] = useState(false)
+
+  const toogleShowMore = () => {
+    setIsShowMore(!isShowMore)
+  }
+
+  useEffect(() => {
+    if (!accountId) {
+      setName(null)
+      setDescription(null)
+      setImage(null)
+      setLinks([])
+      return
+    }
+
+    const source = axios.CancelToken.source()
+
+    async function getInfoFrom3Box() {
+      const profile = await get3BoxProfile(accountId, source.token)
+      if (profile) {
+        const { name, emoji, description, image, links } = profile
+        setName(`${emoji || ''} ${name || accountTruncate(accountId)}`)
+        setDescription(description || null)
+        setImage(image || null)
+        setLinks(links || [])
+      } else {
+        setName(null)
+        setDescription(null)
+        setImage(null)
+        setLinks([])
+      }
+    }
+    getInfoFrom3Box()
+
+    return () => {
+      source.cancel()
+    }
+  }, [accountId])
+
+  return (
+    <div className={styles.grid}>
+      <div>
+        <Account accountId={accountId} image={image} name={name} />
+        <Stats accountId={accountId} />
+      </div>
+
+      <div>
+        <Markdown
+          text={
+            description ||
+            'No description found on [3box](https://3box.io/login).'
+          }
+          className={styles.description}
+        />
+        {isDescriptionTextClamped() ? (
+          <span className={styles.more} onClick={toogleShowMore}>
+            <a
+              href={`https://www.3box.io/${accountId}`}
+              target="_blank"
+              rel="noreferrer"
+            >
+              Read more on 3box
+            </a>
+          </span>
+        ) : (
+          ''
+        )}
+        {links?.length > 0 && (
+          <PublisherLinks links={links} className={styles.publisherLinks} />
+        )}
+      </div>
+      <div className={styles.meta}>
+        Profile data from{' '}
+        <a
+          href={`https://www.3box.io/${accountId}`}
+          target="_blank"
+          rel="noreferrer"
+        >
+          3Box Hub
+        </a>
+      </div>
+    </div>
+  )
+}
diff --git a/src/components/pages/Account/History/ComputeJobs/Details.module.css b/src/components/pages/Profile/History/ComputeJobs/Details.module.css
similarity index 100%
rename from src/components/pages/Account/History/ComputeJobs/Details.module.css
rename to src/components/pages/Profile/History/ComputeJobs/Details.module.css
diff --git a/src/components/pages/Account/History/ComputeJobs/Details.tsx b/src/components/pages/Profile/History/ComputeJobs/Details.tsx
similarity index 98%
rename from src/components/pages/Account/History/ComputeJobs/Details.tsx
rename to src/components/pages/Profile/History/ComputeJobs/Details.tsx
index ace32cf41..3620b2f99 100644
--- a/src/components/pages/Account/History/ComputeJobs/Details.tsx
+++ b/src/components/pages/Profile/History/ComputeJobs/Details.tsx
@@ -7,7 +7,6 @@ import Modal from '../../../../atoms/Modal'
 import MetaItem from '../../../../organisms/AssetContent/MetaItem'
 import { ReactComponent as External } from '../../../../../images/external.svg'
 import { retrieveDDO } from '../../../../../utils/aquarius'
-import { useOcean } from '../../../../../providers/Ocean'
 import Results from './Results'
 import styles from './Details.module.css'
 import { useSiteMetadata } from '../../../../../hooks/useSiteMetadata'
diff --git a/src/components/pages/Account/History/ComputeJobs/Results.module.css b/src/components/pages/Profile/History/ComputeJobs/Results.module.css
similarity index 100%
rename from src/components/pages/Account/History/ComputeJobs/Results.module.css
rename to src/components/pages/Profile/History/ComputeJobs/Results.module.css
diff --git a/src/components/pages/Account/History/ComputeJobs/Results.tsx b/src/components/pages/Profile/History/ComputeJobs/Results.tsx
similarity index 100%
rename from src/components/pages/Account/History/ComputeJobs/Results.tsx
rename to src/components/pages/Profile/History/ComputeJobs/Results.tsx
diff --git a/src/components/pages/Account/History/ComputeJobs/index.module.css b/src/components/pages/Profile/History/ComputeJobs/index.module.css
similarity index 100%
rename from src/components/pages/Account/History/ComputeJobs/index.module.css
rename to src/components/pages/Profile/History/ComputeJobs/index.module.css
diff --git a/src/components/pages/Account/History/ComputeJobs/index.tsx b/src/components/pages/Profile/History/ComputeJobs/index.tsx
similarity index 98%
rename from src/components/pages/Account/History/ComputeJobs/index.tsx
rename to src/components/pages/Profile/History/ComputeJobs/index.tsx
index b3f549f24..5dad65cf0 100644
--- a/src/components/pages/Account/History/ComputeJobs/index.tsx
+++ b/src/components/pages/Profile/History/ComputeJobs/index.tsx
@@ -22,10 +22,7 @@ import styles from './index.module.css'
 import { useUserPreferences } from '../../../../../providers/UserPreferences'
 import { getOceanConfig } from '../../../../../utils/ocean'
 import { fetchDataForMultipleChains } from '../../../../../utils/subgraph'
-import {
-  OrdersData_tokenOrders as OrdersData,
-  OrdersData_tokenOrders_datatokenId as OrdersDatatoken
-} from '../../../../../@types/apollo/OrdersData'
+import { OrdersData_tokenOrders_datatokenId as OrdersDatatoken } from '../../../../../@types/apollo/OrdersData'
 import NetworkName from '../../../../atoms/NetworkName'
 
 const getComputeOrders = gql`
diff --git a/src/components/pages/Account/History/Downloads.tsx b/src/components/pages/Profile/History/Downloads.tsx
similarity index 98%
rename from src/components/pages/Account/History/Downloads.tsx
rename to src/components/pages/Profile/History/Downloads.tsx
index aa8f5e81c..0d206b631 100644
--- a/src/components/pages/Account/History/Downloads.tsx
+++ b/src/components/pages/Profile/History/Downloads.tsx
@@ -4,7 +4,6 @@ import { gql } from 'urql'
 import Time from '../../../atoms/Time'
 import web3 from 'web3'
 import AssetTitle from '../../../molecules/AssetListTitle'
-import { useWeb3 } from '../../../../providers/Web3'
 import axios from 'axios'
 import { retrieveDDO } from '../../../../utils/aquarius'
 import { Logger } from '@oceanprotocol/lib'
diff --git a/src/components/pages/Account/History/PoolShares.module.css b/src/components/pages/Profile/History/PoolShares.module.css
similarity index 100%
rename from src/components/pages/Account/History/PoolShares.module.css
rename to src/components/pages/Profile/History/PoolShares.module.css
diff --git a/src/components/pages/Account/History/PoolShares.tsx b/src/components/pages/Profile/History/PoolShares.tsx
similarity index 92%
rename from src/components/pages/Account/History/PoolShares.tsx
rename to src/components/pages/Profile/History/PoolShares.tsx
index 39f03db93..de24051d7 100644
--- a/src/components/pages/Account/History/PoolShares.tsx
+++ b/src/components/pages/Profile/History/PoolShares.tsx
@@ -5,15 +5,16 @@ import styles from './PoolShares.module.css'
 import AssetTitle from '../../../molecules/AssetListTitle'
 import { gql } from 'urql'
 import {
-  PoolShares as PoolSharesList,
   PoolShares_poolShares as PoolShare,
   PoolShares_poolShares_poolId_tokens as PoolSharePoolIdTokens
 } from '../../../../@types/apollo/PoolShares'
 import web3 from 'web3'
 import Token from '../../../organisms/AssetActions/Pool/Token'
-import { useWeb3 } from '../../../../providers/Web3'
 import { useUserPreferences } from '../../../../providers/UserPreferences'
-import { fetchDataForMultipleChains } from '../../../../utils/subgraph'
+import {
+  fetchDataForMultipleChains,
+  calculateUserLiquidity
+} from '../../../../utils/subgraph'
 import NetworkName from '../../../atoms/NetworkName'
 import axios from 'axios'
 import { retrieveDDO } from '../../../../utils/aquarius'
@@ -59,17 +60,6 @@ interface Asset {
   createTime: number
 }
 
-function calculateUserLiquidity(poolShare: PoolShare) {
-  const ocean =
-    (poolShare.balance / poolShare.poolId.totalShares) *
-    poolShare.poolId.oceanReserve
-  const datatokens =
-    (poolShare.balance / poolShare.poolId.totalShares) *
-    poolShare.poolId.datatokenReserve
-  const totalLiquidity = ocean + datatokens * poolShare.poolId.consumePrice
-  return totalLiquidity
-}
-
 function findValidToken(tokens: PoolSharePoolIdTokens[]) {
   const symbol = tokens.find((token) => token.tokenId !== null)
   return symbol.tokenId.symbol
diff --git a/src/components/pages/Account/History/PublishedList.tsx b/src/components/pages/Profile/History/PublishedList.tsx
similarity index 96%
rename from src/components/pages/Account/History/PublishedList.tsx
rename to src/components/pages/Profile/History/PublishedList.tsx
index c9f4cda3c..da7c42c6a 100644
--- a/src/components/pages/Account/History/PublishedList.tsx
+++ b/src/components/pages/Profile/History/PublishedList.tsx
@@ -1,6 +1,6 @@
 import { Logger } from '@oceanprotocol/lib'
 import { QueryResult } from '@oceanprotocol/lib/dist/node/metadatacache/MetadataCache'
-import React, { ReactElement, useEffect, useState, useReducer } from 'react'
+import React, { ReactElement, useEffect, useState } from 'react'
 import AssetList from '../../../organisms/AssetList'
 import axios from 'axios'
 import {
diff --git a/src/components/pages/Account/History/index.module.css b/src/components/pages/Profile/History/index.module.css
similarity index 98%
rename from src/components/pages/Account/History/index.module.css
rename to src/components/pages/Profile/History/index.module.css
index 7bfacd3ef..75db8b925 100644
--- a/src/components/pages/Account/History/index.module.css
+++ b/src/components/pages/Profile/History/index.module.css
@@ -16,7 +16,7 @@
   }
 }
 
-.content {
+.tabs {
   margin-top: var(--spacer);
   background-color: var(--background-body);
 }
diff --git a/src/components/pages/Account/History/index.tsx b/src/components/pages/Profile/History/index.tsx
similarity index 83%
rename from src/components/pages/Account/History/index.tsx
rename to src/components/pages/Profile/History/index.tsx
index 2a54e7b98..dc817fb50 100644
--- a/src/components/pages/Account/History/index.tsx
+++ b/src/components/pages/Profile/History/index.tsx
@@ -5,8 +5,8 @@ import PoolTransactions from '../../../molecules/PoolTransactions'
 import PublishedList from './PublishedList'
 import Downloads from './Downloads'
 import ComputeJobs from './ComputeJobs'
+import { useLocation } from '@reach/router'
 import styles from './index.module.css'
-import { useUserPreferences } from '../../../../providers/UserPreferences'
 import OceanProvider from '../../../../providers/Ocean'
 import { useWeb3 } from '../../../../providers/Web3'
 
@@ -53,20 +53,17 @@ export default function HistoryPage({
 }: {
   accountIdentifier: string
 }): ReactElement {
-  const { chainIds } = useUserPreferences()
   const { accountId } = useWeb3()
-  const url = new URL(window.location.href)
+  const location = useLocation()
+
+  const url = new URL(location.href)
   const defaultTab = url.searchParams.get('defaultTab')
   const tabs = getTabs(accountIdentifier, accountId)
+
   let defaultTabIndex = 0
   defaultTab === 'ComputeJobs' ? (defaultTabIndex = 4) : (defaultTabIndex = 0)
+
   return (
-    <article className={styles.content}>
-      <Tabs
-        items={tabs}
-        className={styles.tabs}
-        defaultIndex={defaultTabIndex}
-      />
-    </article>
+    <Tabs items={tabs} className={styles.tabs} defaultIndex={defaultTabIndex} />
   )
 }
diff --git a/src/components/atoms/Publisher/PublisherLinks.module.css b/src/components/pages/Profile/PublisherLinks.module.css
similarity index 69%
rename from src/components/atoms/Publisher/PublisherLinks.module.css
rename to src/components/pages/Profile/PublisherLinks.module.css
index fb52e55ef..c24bb9f98 100644
--- a/src/components/atoms/Publisher/PublisherLinks.module.css
+++ b/src/components/pages/Profile/PublisherLinks.module.css
@@ -1,3 +1,7 @@
+.links {
+  width: 100%;
+}
+
 .links,
 .links a {
   font-size: var(--font-size-small);
@@ -7,6 +11,7 @@
 .links a {
   margin-left: calc(var(--spacer) / 3);
   color: inherit;
+  display: inline-block;
 }
 
 .links a:first-child {
@@ -19,5 +24,5 @@
 }
 
 .linksExternal {
-  composes: linksExternal from './index.module.css';
+  composes: linksExternal from '../../atoms/Publisher/index.module.css';
 }
diff --git a/src/components/atoms/Publisher/PublisherLinks.tsx b/src/components/pages/Profile/PublisherLinks.tsx
similarity index 80%
rename from src/components/atoms/Publisher/PublisherLinks.tsx
rename to src/components/pages/Profile/PublisherLinks.tsx
index 46ec0cba4..40b422a62 100644
--- a/src/components/atoms/Publisher/PublisherLinks.tsx
+++ b/src/components/pages/Profile/PublisherLinks.tsx
@@ -1,15 +1,25 @@
 import React, { ReactElement } from 'react'
-import styles from './PublisherLinks.module.css'
+import classNames from 'classnames/bind'
 import { ProfileLink } from '../../../models/Profile'
 import { ReactComponent as External } from '../../../images/external.svg'
+import styles from './PublisherLinks.module.css'
+
+const cx = classNames.bind(styles)
 
 export default function PublisherLinks({
-  links
+  links,
+  className
 }: {
   links: ProfileLink[]
+  className: string
 }): ReactElement {
+  const styleClasses = cx({
+    links: true,
+    [className]: className
+  })
+
   return (
-    <div className={styles.links}>
+    <div className={styleClasses}>
       {' — '}
       {links?.map((link: ProfileLink) => {
         const href =
diff --git a/src/components/pages/Profile/Stats.module.css b/src/components/pages/Profile/Stats.module.css
new file mode 100644
index 000000000..8878438c8
--- /dev/null
+++ b/src/components/pages/Profile/Stats.module.css
@@ -0,0 +1,6 @@
+.stats {
+  display: grid;
+  gap: var(--spacer);
+  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
+  margin-top: calc(var(--spacer) / 2);
+}
diff --git a/src/components/pages/Profile/Stats.tsx b/src/components/pages/Profile/Stats.tsx
new file mode 100644
index 000000000..fd43dccb4
--- /dev/null
+++ b/src/components/pages/Profile/Stats.tsx
@@ -0,0 +1,103 @@
+import { DDO, Logger } from '@oceanprotocol/lib'
+import React, { useEffect, useState } from 'react'
+import { ReactElement } from 'react-markdown'
+import { useUserPreferences } from '../../../providers/UserPreferences'
+import {
+  getAccountLiquidityInOwnAssets,
+  getAccountNumberOfOrders,
+  getAssetsBestPrices,
+  UserTVL
+} from '../../../utils/subgraph'
+import Conversion from '../../atoms/Price/Conversion'
+import NumberUnit from '../../molecules/NumberUnit'
+import styles from './Stats.module.css'
+import {
+  queryMetadata,
+  transformChainIdsListToQuery
+} from '../../../utils/aquarius'
+import axios from 'axios'
+
+export default function Stats({
+  accountId
+}: {
+  accountId: string
+}): ReactElement {
+  const { chainIds } = useUserPreferences()
+
+  const [publishedAssets, setPublishedAssets] = useState<DDO[]>()
+  const [numberOfAssets, setNumberOfAssets] = useState(0)
+  const [sold, setSold] = useState(0)
+  const [tvl, setTvl] = useState<UserTVL>()
+
+  useEffect(() => {
+    if (!accountId) {
+      setNumberOfAssets(0)
+      setSold(0)
+      setTvl({ price: '0', oceanBalance: '0' })
+      return
+    }
+
+    async function getPublished() {
+      const queryPublishedAssets = {
+        query: {
+          query_string: {
+            query: `(publicKey.owner:${accountId}) AND (${transformChainIdsListToQuery(
+              chainIds
+            )})`
+          }
+        }
+      }
+      try {
+        const source = axios.CancelToken.source()
+        const result = await queryMetadata(queryPublishedAssets, source.token)
+        setPublishedAssets(result.results)
+        setNumberOfAssets(result.totalResults)
+      } catch (error) {
+        Logger.error(error.message)
+      }
+    }
+    getPublished()
+
+    async function getAccountSoldValue() {
+      const nrOrders = await getAccountNumberOfOrders(accountId, chainIds)
+      setSold(nrOrders)
+    }
+    getAccountSoldValue()
+  }, [accountId, chainIds])
+
+  useEffect(() => {
+    if (!publishedAssets) return
+
+    async function getAccountTVL() {
+      try {
+        const accountPoolAdresses: string[] = []
+        const assetsPrices = await getAssetsBestPrices(publishedAssets)
+        for (const priceInfo of assetsPrices) {
+          if (priceInfo.price.type === 'pool') {
+            accountPoolAdresses.push(priceInfo.price.address.toLowerCase())
+          }
+        }
+        const userTvl: UserTVL = await getAccountLiquidityInOwnAssets(
+          accountId,
+          chainIds,
+          accountPoolAdresses
+        )
+        setTvl(userTvl)
+      } catch (error) {
+        Logger.error(error.message)
+      }
+    }
+    getAccountTVL()
+  }, [publishedAssets])
+
+  return (
+    <div className={styles.stats}>
+      <NumberUnit label="Published" value={numberOfAssets} />
+      <NumberUnit label="Sold" value={sold} />
+      <NumberUnit
+        label="Total Value Locked"
+        value={<Conversion price={tvl?.price} hideApproximateSymbol />}
+      />
+    </div>
+  )
+}
diff --git a/src/components/pages/Profile/index.tsx b/src/components/pages/Profile/index.tsx
new file mode 100644
index 000000000..d4eafd450
--- /dev/null
+++ b/src/components/pages/Profile/index.tsx
@@ -0,0 +1,16 @@
+import React, { ReactElement } from 'react'
+import HistoryPage from './History'
+import AccountHeader from './Header'
+
+export default function AccountPage({
+  accountId
+}: {
+  accountId: string
+}): ReactElement {
+  return (
+    <>
+      <AccountHeader accountId={accountId} />
+      <HistoryPage accountIdentifier={accountId} />
+    </>
+  )
+}
diff --git a/src/components/templates/Page.tsx b/src/components/templates/Page.tsx
index 1672d4dbf..b91717999 100644
--- a/src/components/templates/Page.tsx
+++ b/src/components/templates/Page.tsx
@@ -5,7 +5,7 @@ import Container from '../atoms/Container'
 
 export interface PageProps {
   children: ReactNode
-  title: string
+  title?: string
   uri: string
   description?: string
   noPageHeader?: boolean
diff --git a/src/pages/account/index.tsx b/src/pages/account/index.tsx
deleted file mode 100644
index f7c1fe9da..000000000
--- a/src/pages/account/index.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import React, { ReactElement, useState, useEffect } from 'react'
-import Page from '../../components/templates/Page'
-import { graphql, PageProps } from 'gatsby'
-import AccountPage from '../../components/pages/Account'
-
-export default function PageGatsbyAccount(props: PageProps): ReactElement {
-  const content = (props.data as any).content.edges[0].node.childPagesJson
-  const { title } = content
-  const [accountId, setAccountId] = useState<string>()
-
-  useEffect(() => {
-    setAccountId(props.location.pathname.split('/')[2])
-  }, [props.location.pathname])
-
-  return (
-    <Page title={title} uri={props.uri}>
-      <AccountPage accountIdentifier={accountId} />
-    </Page>
-  )
-}
-
-export const contentQuery = graphql`
-  query AccountPageQuery {
-    content: allFile(filter: { relativePath: { eq: "pages/account.json" } }) {
-      edges {
-        node {
-          childPagesJson {
-            title
-            description
-          }
-        }
-      }
-    }
-  }
-`
diff --git a/src/pages/profile/index.tsx b/src/pages/profile/index.tsx
new file mode 100644
index 000000000..451a639ea
--- /dev/null
+++ b/src/pages/profile/index.tsx
@@ -0,0 +1,39 @@
+import React, { ReactElement, useEffect, useState } from 'react'
+import Page from '../../components/templates/Page'
+import { graphql, PageProps } from 'gatsby'
+import ProfilePage from '../../components/pages/Profile'
+import { accountTruncate } from '../../utils/web3'
+import { useWeb3 } from '../../providers/Web3'
+
+export default function PageGatsbyProfile(props: PageProps): ReactElement {
+  const { accountId } = useWeb3()
+  const [finalAccountId, setFinalAccountId] = useState<string>()
+
+  // Have accountId in path take over, if not present fall back to web3
+  useEffect(() => {
+    const pathAccountId = props.location.pathname.split('/')[2]
+    const finalAccountId = pathAccountId || accountId
+    setFinalAccountId(finalAccountId)
+  }, [props.location.pathname, accountId])
+
+  return (
+    <Page uri={props.uri} title={accountTruncate(finalAccountId)} noPageHeader>
+      <ProfilePage accountId={finalAccountId} />
+    </Page>
+  )
+}
+
+export const contentQuery = graphql`
+  query ProfilePageQuery {
+    content: allFile(filter: { relativePath: { eq: "pages/profile.json" } }) {
+      edges {
+        node {
+          childPagesJson {
+            title
+            description
+          }
+        }
+      }
+    }
+  }
+`
diff --git a/src/utils/subgraph.ts b/src/utils/subgraph.ts
index 0d11cef74..53c7b16aa 100644
--- a/src/utils/subgraph.ts
+++ b/src/utils/subgraph.ts
@@ -20,6 +20,15 @@ import {
   HighestLiquidityAssets_pools as HighestLiquidityAssetsPools,
   HighestLiquidityAssets as HighestLiquidityGraphAssets
 } from '../@types/apollo/HighestLiquidityAssets'
+import {
+  PoolShares as PoolSharesList,
+  PoolShares_poolShares as PoolShare
+} from '../@types/apollo/PoolShares'
+
+export interface UserTVL {
+  price: string
+  oceanBalance: string
+}
 
 export interface PriceList {
   [key: string]: string
@@ -141,6 +150,43 @@ const HighestLiquidityAssets = gql`
   }
 `
 
+const TotalAccountOrders = gql`
+  query TotalAccountOrders($payer: String) {
+    tokenOrders(orderBy: id, where: { payer: $payer }) {
+      id
+      payer {
+        id
+      }
+    }
+  }
+`
+const UserSharesQuery = gql`
+  query UserSharesQuery($user: String, $pools: [String!]) {
+    poolShares(where: { userAddress: $user, poolId_in: $pools }) {
+      id
+      balance
+      userAddress {
+        id
+      }
+      poolId {
+        id
+        datatokenAddress
+        valueLocked
+        tokens {
+          tokenId {
+            symbol
+          }
+        }
+        oceanReserve
+        datatokenReserve
+        totalShares
+        consumePrice
+        spotPrice
+        createTime
+      }
+    }
+  }
+`
 export function getSubgraphUri(chainId: number): string {
   const config = getOceanConfig(chainId)
   return config.subgraphUri
@@ -497,3 +543,64 @@ export async function getHighestLiquidityDIDs(
     .replace(/(did:op:)/g, '0x')
   return [searchDids, didList.length]
 }
+
+export async function getAccountNumberOfOrders(
+  accountId: string,
+  chainIds: number[]
+): Promise<number> {
+  const queryVariables = {
+    payer: accountId.toLowerCase()
+  }
+  const results = await fetchDataForMultipleChains(
+    TotalAccountOrders,
+    queryVariables,
+    chainIds
+  )
+  let numberOfOrders = 0
+  for (const result of results) {
+    numberOfOrders += result.tokenOrders.length
+  }
+  return numberOfOrders
+}
+
+export function calculateUserLiquidity(poolShare: PoolShare) {
+  const ocean =
+    (poolShare.balance / poolShare.poolId.totalShares) *
+    poolShare.poolId.oceanReserve
+  const datatokens =
+    (poolShare.balance / poolShare.poolId.totalShares) *
+    poolShare.poolId.datatokenReserve
+  const totalLiquidity = ocean + datatokens * poolShare.poolId.consumePrice
+  return totalLiquidity
+}
+
+export async function getAccountLiquidityInOwnAssets(
+  accountId: string,
+  chainIds: number[],
+  pools: string[]
+): Promise<UserTVL> {
+  const queryVariables = {
+    user: accountId.toLowerCase(),
+    pools: pools
+  }
+  const results: PoolSharesList[] = await fetchDataForMultipleChains(
+    UserSharesQuery,
+    queryVariables,
+    chainIds
+  )
+  let totalLiquidity = 0
+  let totalOceanLiquidity = 0
+  for (const result of results) {
+    for (const poolShare of result.poolShares) {
+      const userShare = poolShare.balance / poolShare.poolId.totalShares
+      const userBalance = userShare * poolShare.poolId.oceanReserve
+      totalOceanLiquidity += userBalance
+      const poolLiquidity = calculateUserLiquidity(poolShare)
+      totalLiquidity += poolLiquidity
+    }
+  }
+  return {
+    price: totalLiquidity.toString(),
+    oceanBalance: totalOceanLiquidity.toString()
+  }
+}
diff --git a/tests/unit/__fixtures__/siteMetadata.json b/tests/unit/__fixtures__/siteMetadata.json
index fba721a67..a00cd86a2 100644
--- a/tests/unit/__fixtures__/siteMetadata.json
+++ b/tests/unit/__fixtures__/siteMetadata.json
@@ -23,8 +23,8 @@
                   "link": "/publish"
                 },
                 {
-                  "name": "Account",
-                  "link": "/account"
+                  "name": "Profile",
+                  "link": "/profile"
                 }
               ]
             }

From b30fcf0c4b02d1214db6293c0297240da1cbe518 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Wed, 1 Sep 2021 14:07:28 +0200
Subject: [PATCH 11/31] move Blockies into separate component

---
 src/components/atoms/Blockies.module.css      |  8 +++++++
 src/components/atoms/Blockies.tsx             | 23 +++++++++++++++++++
 .../molecules/Wallet/Account.module.css       | 10 +-------
 src/components/molecules/Wallet/Account.tsx   | 18 ++-------------
 .../pages/Profile/Account.module.css          |  6 ++++-
 src/components/pages/Profile/Account.tsx      | 19 ++-------------
 6 files changed, 41 insertions(+), 43 deletions(-)
 create mode 100644 src/components/atoms/Blockies.module.css
 create mode 100644 src/components/atoms/Blockies.tsx

diff --git a/src/components/atoms/Blockies.module.css b/src/components/atoms/Blockies.module.css
new file mode 100644
index 000000000..928123b18
--- /dev/null
+++ b/src/components/atoms/Blockies.module.css
@@ -0,0 +1,8 @@
+.blockies {
+  width: var(--font-size-large);
+  height: var(--font-size-large);
+  border-radius: 50%;
+  overflow: hidden;
+  display: inline-block;
+  vertical-align: middle;
+}
diff --git a/src/components/atoms/Blockies.tsx b/src/components/atoms/Blockies.tsx
new file mode 100644
index 000000000..4a02becbe
--- /dev/null
+++ b/src/components/atoms/Blockies.tsx
@@ -0,0 +1,23 @@
+import { toDataUrl } from 'ethereum-blockies'
+import React, { ReactElement } from 'react'
+import styles from './Blockies.module.css'
+
+export default function Blockies({
+  accountId,
+  className
+}: {
+  accountId: string
+  className?: string
+}): ReactElement {
+  if (!accountId) return null
+  const blockies = toDataUrl(accountId)
+
+  return (
+    <img
+      className={`${styles.blockies} ${className || ''}`}
+      src={blockies}
+      alt="Blockies"
+      aria-hidden="true"
+    />
+  )
+}
diff --git a/src/components/molecules/Wallet/Account.module.css b/src/components/molecules/Wallet/Account.module.css
index 0a4d0d6be..1dbce49f8 100644
--- a/src/components/molecules/Wallet/Account.module.css
+++ b/src/components/molecules/Wallet/Account.module.css
@@ -41,20 +41,12 @@
   }
 }
 
-.blockies {
-  width: var(--font-size-large);
-  height: var(--font-size-large);
-  border-radius: 50%;
-  overflow: hidden;
-  display: inline-block;
-  vertical-align: middle;
-}
-
 .address {
   display: none;
   text-transform: none;
   border-right: 1px solid var(--border-color);
   padding-right: calc(var(--spacer) / 3);
+  padding-left: calc(var(--spacer) / 8);
 }
 
 @media screen and (min-width: 60rem) {
diff --git a/src/components/molecules/Wallet/Account.tsx b/src/components/molecules/Wallet/Account.tsx
index 7b3be33fc..22c2ad249 100644
--- a/src/components/molecules/Wallet/Account.tsx
+++ b/src/components/molecules/Wallet/Account.tsx
@@ -1,24 +1,10 @@
-import { toDataUrl } from 'ethereum-blockies'
 import React, { FormEvent } from 'react'
 import { ReactComponent as Caret } from '../../../images/caret.svg'
 import { accountTruncate } from '../../../utils/web3'
 import Loader from '../../atoms/Loader'
 import styles from './Account.module.css'
 import { useWeb3 } from '../../../providers/Web3'
-
-const Blockies = ({ account }: { account: string | undefined }) => {
-  if (!account) return null
-  const blockies = toDataUrl(account)
-
-  return (
-    <img
-      className={styles.blockies}
-      src={blockies}
-      alt="Blockies"
-      aria-hidden="true"
-    />
-  )
-}
+import Blockies from '../../atoms/Blockies'
 
 // Forward ref for Tippy.js
 // eslint-disable-next-line
@@ -44,7 +30,7 @@ const Account = React.forwardRef((props, ref: any) => {
       ref={ref}
       onClick={(e) => e.preventDefault()}
     >
-      <Blockies account={accountId} />
+      <Blockies accountId={accountId} />
       <span className={styles.address} title={accountId}>
         {accountTruncate(accountId)}
       </span>
diff --git a/src/components/pages/Profile/Account.module.css b/src/components/pages/Profile/Account.module.css
index 678f3c716..2c58d49ef 100644
--- a/src/components/pages/Profile/Account.module.css
+++ b/src/components/pages/Profile/Account.module.css
@@ -16,9 +16,13 @@
   }
 }
 
-.imageWrap {
+.imageWrap,
+.image {
   width: 96px;
   height: 96px;
+}
+
+.imageWrap {
   border-radius: 50%;
   overflow: hidden;
   margin-bottom: calc(var(--spacer) / 4);
diff --git a/src/components/pages/Profile/Account.tsx b/src/components/pages/Profile/Account.tsx
index 91bfccb6a..8c68ac039 100644
--- a/src/components/pages/Profile/Account.tsx
+++ b/src/components/pages/Profile/Account.tsx
@@ -1,4 +1,3 @@
-import { toDataUrl } from 'ethereum-blockies'
 import React, { ReactElement } from 'react'
 import { useUserPreferences } from '../../../providers/UserPreferences'
 import { accountTruncate } from '../../../utils/web3'
@@ -7,21 +6,7 @@ import NetworkName from '../../atoms/NetworkName'
 import jellyfish from '@oceanprotocol/art/creatures/jellyfish/jellyfish-grid.svg'
 import styles from './Account.module.css'
 import Copy from '../../atoms/Copy'
-
-const Blockies = ({ account }: { account: string | undefined }) => {
-  if (!account) return null
-
-  const blockies = toDataUrl(account)
-
-  return (
-    <img
-      className={styles.image}
-      src={blockies}
-      alt="Blockies"
-      aria-hidden="true"
-    />
-  )
-}
+import Blockies from '../../atoms/Blockies'
 
 export default function Account({
   name,
@@ -40,7 +25,7 @@ export default function Account({
         {image ? (
           <img src={image} className={styles.image} width="96" height="96" />
         ) : accountId ? (
-          <Blockies account={accountId} />
+          <Blockies accountId={accountId} className={styles.image} />
         ) : (
           <img
             src={jellyfish}

From ed9930dfb3e33a78a1dc193d1761e8a2fc62ea05 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Wed, 1 Sep 2021 14:30:55 +0200
Subject: [PATCH 12/31] refactor state, make use of existing Profile model

---
 src/components/pages/Profile/Account.tsx |  8 +-
 src/components/pages/Profile/Header.tsx  | 97 +++++++++++++-----------
 src/components/pages/Profile/Stats.tsx   |  4 +-
 src/models/Profile.ts                    |  2 +-
 src/utils/profile.ts                     |  1 -
 5 files changed, 60 insertions(+), 52 deletions(-)

diff --git a/src/components/pages/Profile/Account.tsx b/src/components/pages/Profile/Account.tsx
index 8c68ac039..6928bfe2d 100644
--- a/src/components/pages/Profile/Account.tsx
+++ b/src/components/pages/Profile/Account.tsx
@@ -38,9 +38,11 @@ export default function Account({
 
       <div>
         <h3 className={styles.name}>{name || accountTruncate(accountId)}</h3>
-        <code className={styles.accountId}>
-          {accountId} <Copy text={accountId} />
-        </code>
+        {accountId && (
+          <code className={styles.accountId}>
+            {accountId} <Copy text={accountId} />
+          </code>
+        )}
         <p>
           {accountId &&
             chainIds.map((value) => (
diff --git a/src/components/pages/Profile/Header.tsx b/src/components/pages/Profile/Header.tsx
index c697bb387..59105744e 100644
--- a/src/components/pages/Profile/Header.tsx
+++ b/src/components/pages/Profile/Header.tsx
@@ -1,6 +1,6 @@
 import React, { ReactElement, useEffect, useState } from 'react'
 import get3BoxProfile from '../../../utils/profile'
-import { ProfileLink } from '../../../models/Profile'
+import { Profile } from '../../../models/Profile'
 import { accountTruncate } from '../../../utils/web3'
 import axios from 'axios'
 import PublisherLinks from './PublisherLinks'
@@ -14,15 +14,36 @@ const isDescriptionTextClamped = () => {
   if (el) return el.scrollHeight > el.clientHeight
 }
 
+const clearedProfile: Profile = {
+  name: null,
+  image: null,
+  description: null,
+  links: null
+}
+
+const Link3Box = ({ accountId, text }: { accountId: string; text: string }) => {
+  return (
+    <a
+      href={`https://www.3box.io/${accountId}`}
+      target="_blank"
+      rel="noreferrer"
+    >
+      {text}
+    </a>
+  )
+}
+
 export default function AccountHeader({
   accountId
 }: {
   accountId: string
 }): ReactElement {
-  const [image, setImage] = useState<string>()
-  const [name, setName] = useState(accountTruncate(accountId))
-  const [description, setDescription] = useState<string>()
-  const [links, setLinks] = useState<ProfileLink[]>()
+  const [profile, setProfile] = useState<Profile>({
+    name: accountTruncate(accountId),
+    image: null,
+    description: null,
+    links: null
+  })
   const [isShowMore, setIsShowMore] = useState(false)
 
   const toogleShowMore = () => {
@@ -31,28 +52,26 @@ export default function AccountHeader({
 
   useEffect(() => {
     if (!accountId) {
-      setName(null)
-      setDescription(null)
-      setImage(null)
-      setLinks([])
+      setProfile(clearedProfile)
       return
     }
 
     const source = axios.CancelToken.source()
 
     async function getInfoFrom3Box() {
-      const profile = await get3BoxProfile(accountId, source.token)
-      if (profile) {
-        const { name, emoji, description, image, links } = profile
-        setName(`${emoji || ''} ${name || accountTruncate(accountId)}`)
-        setDescription(description || null)
-        setImage(image || null)
-        setLinks(links || [])
+      const profile3Box = await get3BoxProfile(accountId, source.token)
+      if (profile3Box) {
+        const { name, emoji, description, image, links } = profile3Box
+        const newName = `${emoji || ''} ${name || accountTruncate(accountId)}`
+        const newProfile = {
+          name: newName,
+          image,
+          description,
+          links
+        }
+        setProfile(newProfile)
       } else {
-        setName(null)
-        setDescription(null)
-        setImage(null)
-        setLinks([])
+        setProfile(clearedProfile)
       }
     }
     getInfoFrom3Box()
@@ -65,44 +84,32 @@ export default function AccountHeader({
   return (
     <div className={styles.grid}>
       <div>
-        <Account accountId={accountId} image={image} name={name} />
+        <Account
+          accountId={accountId}
+          image={profile.image}
+          name={profile.name}
+        />
         <Stats accountId={accountId} />
       </div>
 
       <div>
-        <Markdown
-          text={
-            description ||
-            'No description found on [3box](https://3box.io/login).'
-          }
-          className={styles.description}
-        />
+        <Markdown text={profile.description} className={styles.description} />
         {isDescriptionTextClamped() ? (
           <span className={styles.more} onClick={toogleShowMore}>
-            <a
-              href={`https://www.3box.io/${accountId}`}
-              target="_blank"
-              rel="noreferrer"
-            >
-              Read more on 3box
-            </a>
+            <Link3Box accountId={accountId} text="Read more on 3box" />
           </span>
         ) : (
           ''
         )}
-        {links?.length > 0 && (
-          <PublisherLinks links={links} className={styles.publisherLinks} />
+        {profile.links?.length > 0 && (
+          <PublisherLinks
+            links={profile.links}
+            className={styles.publisherLinks}
+          />
         )}
       </div>
       <div className={styles.meta}>
-        Profile data from{' '}
-        <a
-          href={`https://www.3box.io/${accountId}`}
-          target="_blank"
-          rel="noreferrer"
-        >
-          3Box Hub
-        </a>
+        Profile data from <Link3Box accountId={accountId} text="3Box Hub" />
       </div>
     </div>
   )
diff --git a/src/components/pages/Profile/Stats.tsx b/src/components/pages/Profile/Stats.tsx
index fd43dccb4..ebf25df0d 100644
--- a/src/components/pages/Profile/Stats.tsx
+++ b/src/components/pages/Profile/Stats.tsx
@@ -92,12 +92,12 @@ export default function Stats({
 
   return (
     <div className={styles.stats}>
-      <NumberUnit label="Published" value={numberOfAssets} />
-      <NumberUnit label="Sold" value={sold} />
       <NumberUnit
         label="Total Value Locked"
         value={<Conversion price={tvl?.price} hideApproximateSymbol />}
       />
+      <NumberUnit label="Sold" value={sold} />
+      <NumberUnit label="Published" value={numberOfAssets} />
     </div>
   )
 }
diff --git a/src/models/Profile.ts b/src/models/Profile.ts
index e1850b445..a653dbb53 100644
--- a/src/models/Profile.ts
+++ b/src/models/Profile.ts
@@ -4,7 +4,7 @@ export interface ProfileLink {
 }
 
 export interface Profile {
-  did: string
+  did?: string
   name?: string
   description?: string
   emoji?: string
diff --git a/src/utils/profile.ts b/src/utils/profile.ts
index f78d2c71b..c6d760585 100644
--- a/src/utils/profile.ts
+++ b/src/utils/profile.ts
@@ -1,7 +1,6 @@
 import { Profile, ProfileLink, ResponseData3Box } from '../models/Profile'
 import axios, { AxiosResponse, CancelToken } from 'axios'
 import jwtDecode from 'jwt-decode'
-import { Logger } from '@oceanprotocol/lib'
 
 // https://docs.3box.io/api/rest-api
 const apiUri = 'https://3box.oceanprotocol.com'

From e998dc777aeec29dda49fe57c318146164b313b8 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Wed, 1 Sep 2021 15:01:39 +0200
Subject: [PATCH 13/31] refactor that huge ComputeJobs index component

---
 .../Profile/History/ComputeJobs/index.tsx     | 246 ++----------------
 .../Profile/History/ComputeJobs/utils.ts      | 232 +++++++++++++++++
 2 files changed, 254 insertions(+), 224 deletions(-)
 create mode 100644 src/components/pages/Profile/History/ComputeJobs/utils.ts

diff --git a/src/components/pages/Profile/History/ComputeJobs/index.tsx b/src/components/pages/Profile/History/ComputeJobs/index.tsx
index 5dad65cf0..77af736cf 100644
--- a/src/components/pages/Profile/History/ComputeJobs/index.tsx
+++ b/src/components/pages/Profile/History/ComputeJobs/index.tsx
@@ -1,76 +1,20 @@
-import React, { ReactElement, useEffect, useState } from 'react'
-import web3 from 'web3'
+import React, { ReactElement, useEffect, useState, useCallback } from 'react'
 import Time from '../../../../atoms/Time'
 import { Link } from 'gatsby'
-import { DDO, Logger, Service, Provider } from '@oceanprotocol/lib'
+import { Logger } from '@oceanprotocol/lib'
 import { ComputeJobMetaData } from '../../../../../@types/ComputeJobMetaData'
 import Dotdotdot from 'react-dotdotdot'
 import Table from '../../../../atoms/Table'
 import Button from '../../../../atoms/Button'
 import { useOcean } from '../../../../../providers/Ocean'
-import { gql } from 'urql'
 import { useWeb3 } from '../../../../../providers/Web3'
-import {
-  queryMetadata,
-  transformChainIdsListToQuery
-} from '../../../../../utils/aquarius'
-import axios, { CancelToken } from 'axios'
 import Details from './Details'
-import { ComputeJob } from '@oceanprotocol/lib/dist/node/ocean/interfaces/Compute'
 import { ReactComponent as Refresh } from '../../../../../images/refresh.svg'
-import styles from './index.module.css'
 import { useUserPreferences } from '../../../../../providers/UserPreferences'
 import { getOceanConfig } from '../../../../../utils/ocean'
-import { fetchDataForMultipleChains } from '../../../../../utils/subgraph'
-import { OrdersData_tokenOrders_datatokenId as OrdersDatatoken } from '../../../../../@types/apollo/OrdersData'
 import NetworkName from '../../../../atoms/NetworkName'
-
-const getComputeOrders = gql`
-  query ComputeOrders($user: String!) {
-    tokenOrders(
-      orderBy: timestamp
-      orderDirection: desc
-      where: { payer: $user }
-    ) {
-      id
-      serviceId
-      datatokenId {
-        address
-      }
-      tx
-      timestamp
-    }
-  }
-`
-
-const getComputeOrdersByDatatokenAddress = gql`
-  query ComputeOrdersByDatatokenAddress(
-    $user: String!
-    $datatokenAddress: String!
-  ) {
-    tokenOrders(
-      orderBy: timestamp
-      orderDirection: desc
-      where: { payer: $user, datatokenId: $datatokenAddress }
-    ) {
-      id
-      serviceId
-      datatokenId {
-        address
-      }
-      tx
-      timestamp
-    }
-  }
-`
-
-interface TokenOrder {
-  id: string
-  serviceId: number
-  datatokenId: OrdersDatatoken
-  tx: any | null
-  timestamp: number
-}
+import { getComputeJobs } from './utils'
+import styles from './index.module.css'
 
 export function Status({ children }: { children: string }): ReactElement {
   return <div className={styles.status}>{children}</div>
@@ -123,28 +67,6 @@ const columns = [
   }
 ]
 
-async function getAssetMetadata(
-  queryDtList: string,
-  cancelToken: CancelToken,
-  chainIds: number[]
-): Promise<DDO[]> {
-  const queryDid = {
-    page: 1,
-    offset: 100,
-    query: {
-      query_string: {
-        query: `(${queryDtList}) AND (${transformChainIdsListToQuery(
-          chainIds
-        )}) AND service.attributes.main.type:dataset AND service.type:compute`,
-        fields: ['dataToken']
-      }
-    }
-  }
-
-  const result = await queryMetadata(queryDid, cancelToken)
-  return result.results
-}
-
 export default function ComputeJobs({
   minimal,
   assetDTAddress,
@@ -170,161 +92,37 @@ export default function ComputeJobs({
     if (ocean === undefined) {
       initOcean()
     }
-  }, [networkId, ocean])
+  }, [networkId, ocean, connect])
 
-  async function getJobs() {
-    if (!accountId) return
-    setIsLoading(true)
-    const variables = assetDTAddress
-      ? {
-          user: accountId?.toLowerCase(),
-          datatokenAddress: assetDTAddress.toLowerCase()
-        }
-      : {
-          user: accountId?.toLowerCase()
-        }
-    const result = await fetchDataForMultipleChains(
-      assetDTAddress ? getComputeOrdersByDatatokenAddress : getComputeOrders,
-      variables,
-      assetDTAddress ? [chainId] : chainIds
-    )
-    let data: TokenOrder[] = []
-    for (let i = 0; i < result.length; i++) {
-      if (!result[i].tokenOrders) continue
-      result[i].tokenOrders.forEach((tokenOrder: TokenOrder) => {
-        data.push(tokenOrder)
-      })
-    }
-    if (!ocean || !account || !data) {
-      return
-    }
-    data = data.sort((a, b) => b.timestamp - a.timestamp)
-    const dtList = []
-    const computeJobs: ComputeJobMetaData[] = []
-    for (let i = 0; i < data.length; i++) {
-      dtList.push(data[i].datatokenId.address)
-    }
-    const queryDtList = JSON.stringify(dtList)
-      .replace(/,/g, ' ')
-      .replace(/"/g, '')
-      .replace(/(\[|\])/g, '')
-    if (queryDtList === '') {
-      setJobs([])
+  const fetchJobs = useCallback(async () => {
+    if (!chainIds || !accountId) {
       setIsLoading(false)
       return
     }
 
     try {
       setIsLoading(true)
-      const source = axios.CancelToken.source()
-      const assets = await getAssetMetadata(queryDtList, source.token, chainIds)
-      const providers: Provider[] = []
-      const serviceEndpoints: string[] = []
-      for (let i = 0; i < data.length; i++) {
-        try {
-          const did = web3.utils
-            .toChecksumAddress(data[i].datatokenId.address)
-            .replace('0x', 'did:op:')
-          const ddo = assets.filter((x) => x.id === did)[0]
-          if (ddo === undefined) continue
 
-          const service = ddo.service.filter(
-            (x: Service) => x.index === data[i].serviceId
-          )[0]
-
-          if (!service || service.type !== 'compute') continue
-          const { serviceEndpoint } = service
-
-          const wasProviderQueried =
-            serviceEndpoints.filter((x) => x === serviceEndpoint).length > 0
-
-          if (wasProviderQueried) continue
-          serviceEndpoints.push(serviceEndpoint)
-        } catch (err) {
-          Logger.error(err)
-        }
-      }
-
-      try {
-        setIsLoading(true)
-        for (let i = 0; i < serviceEndpoints.length; i++) {
-          const instanceConfig = {
-            config,
-            web3: config.web3Provider,
-            logger: Logger,
-            ocean: ocean
-          }
-          const provider = await Provider.getInstance(instanceConfig)
-          await provider.setBaseUrl(serviceEndpoints[i])
-          const hasSameCompute =
-            providers.filter(
-              (x) => x.computeAddress === provider.computeAddress
-            ).length > 0
-          if (!hasSameCompute) providers.push(provider)
-        }
-      } catch (err) {
-        Logger.error(err)
-      }
-      for (let i = 0; i < providers.length; i++) {
-        try {
-          const providerComputeJobs = (await providers[i].computeStatus(
-            '',
-            account,
-            undefined,
-            undefined,
-            false
-          )) as ComputeJob[]
-
-          // means the provider uri is not good, so we ignore it and move on
-          if (!providerComputeJobs) continue
-          providerComputeJobs.sort((a, b) => {
-            if (a.dateCreated > b.dateCreated) {
-              return -1
-            }
-            if (a.dateCreated < b.dateCreated) {
-              return 1
-            }
-            return 0
-          })
-
-          for (let j = 0; j < providerComputeJobs.length; j++) {
-            const job = providerComputeJobs[j]
-            const did = job.inputDID[0]
-            const ddo = assets.filter((x) => x.id === did)[0]
-
-            if (!ddo) continue
-            const serviceMetadata = ddo.service.filter(
-              (x: Service) => x.type === 'metadata'
-            )[0]
-
-            const compJob: ComputeJobMetaData = {
-              ...job,
-              assetName: serviceMetadata.attributes.main.name,
-              assetDtSymbol: ddo.dataTokenInfo.symbol,
-              networkId: ddo.chainId
-            }
-            computeJobs.push(compJob)
-          }
-        } catch (err) {
-          Logger.error(err)
-        }
-      }
-      setJobs(computeJobs)
+      const jobs = await getComputeJobs(
+        accountId,
+        assetDTAddress,
+        chainIds,
+        chainId,
+        config,
+        ocean,
+        account
+      )
+      setJobs(jobs)
     } catch (error) {
-      Logger.log(error.message)
+      Logger.error(error.message)
     } finally {
       setIsLoading(false)
     }
-    return true
-  }
+  }, [account, accountId, assetDTAddress, chainIds, chainId, config, ocean])
 
   useEffect(() => {
-    if (!chainIds || !accountId) {
-      setIsLoading(false)
-      return
-    }
-    getJobs()
-  }, [ocean, account, chainIds, accountId])
+    fetchJobs()
+  }, [fetchJobs])
 
   return accountId ? (
     <>
@@ -333,7 +131,7 @@ export default function ComputeJobs({
           style="text"
           size="small"
           title="Refresh compute jobs"
-          onClick={() => getJobs()}
+          onClick={async () => await fetchJobs()}
           disabled={isLoading}
           className={styles.refresh}
         >
diff --git a/src/components/pages/Profile/History/ComputeJobs/utils.ts b/src/components/pages/Profile/History/ComputeJobs/utils.ts
new file mode 100644
index 000000000..0f65f9011
--- /dev/null
+++ b/src/components/pages/Profile/History/ComputeJobs/utils.ts
@@ -0,0 +1,232 @@
+import {
+  DDO,
+  Service,
+  Logger,
+  Provider,
+  Config,
+  Ocean,
+  Account
+} from '@oceanprotocol/lib'
+import web3 from 'web3'
+import { ComputeJob } from '@oceanprotocol/lib/dist/node/ocean/interfaces/Compute'
+import axios, { CancelToken } from 'axios'
+import { gql } from 'urql'
+import { ComputeJobMetaData } from '../../../../../@types/ComputeJobMetaData'
+import {
+  transformChainIdsListToQuery,
+  queryMetadata
+} from '../../../../../utils/aquarius'
+import { fetchDataForMultipleChains } from '../../../../../utils/subgraph'
+import { OrdersData_tokenOrders_datatokenId as OrdersDatatoken } from '../../../../../@types/apollo/OrdersData'
+
+const getComputeOrders = gql`
+  query ComputeOrders($user: String!) {
+    tokenOrders(
+      orderBy: timestamp
+      orderDirection: desc
+      where: { payer: $user }
+    ) {
+      id
+      serviceId
+      datatokenId {
+        address
+      }
+      tx
+      timestamp
+    }
+  }
+`
+
+const getComputeOrdersByDatatokenAddress = gql`
+  query ComputeOrdersByDatatokenAddress(
+    $user: String!
+    $datatokenAddress: String!
+  ) {
+    tokenOrders(
+      orderBy: timestamp
+      orderDirection: desc
+      where: { payer: $user, datatokenId: $datatokenAddress }
+    ) {
+      id
+      serviceId
+      datatokenId {
+        address
+      }
+      tx
+      timestamp
+    }
+  }
+`
+
+interface TokenOrder {
+  id: string
+  serviceId: number
+  datatokenId: OrdersDatatoken
+  tx: any | null
+  timestamp: number
+}
+
+async function getAssetMetadata(
+  queryDtList: string,
+  cancelToken: CancelToken,
+  chainIds: number[]
+): Promise<DDO[]> {
+  const queryDid = {
+    page: 1,
+    offset: 100,
+    query: {
+      query_string: {
+        query: `(${queryDtList}) AND (${transformChainIdsListToQuery(
+          chainIds
+        )}) AND service.attributes.main.type:dataset AND service.type:compute`,
+        fields: ['dataToken']
+      }
+    }
+  }
+
+  const result = await queryMetadata(queryDid, cancelToken)
+  return result.results
+}
+
+export async function getComputeJobs(
+  accountId: string,
+  assetDTAddress: string,
+  chainIds: number[],
+  chainId: number,
+  config: Config,
+  ocean: Ocean,
+  account: Account
+): Promise<ComputeJobMetaData[]> {
+  const variables = assetDTAddress
+    ? {
+        user: accountId?.toLowerCase(),
+        datatokenAddress: assetDTAddress.toLowerCase()
+      }
+    : {
+        user: accountId?.toLowerCase()
+      }
+  const result = await fetchDataForMultipleChains(
+    assetDTAddress ? getComputeOrdersByDatatokenAddress : getComputeOrders,
+    variables,
+    assetDTAddress ? [chainId] : chainIds
+  )
+  let data: TokenOrder[] = []
+  for (let i = 0; i < result.length; i++) {
+    if (!result[i].tokenOrders) continue
+    result[i].tokenOrders.forEach((tokenOrder: TokenOrder) => {
+      data.push(tokenOrder)
+    })
+  }
+
+  if (!ocean || !account || !data) return []
+
+  data = data.sort((a, b) => b.timestamp - a.timestamp)
+  const dtList = []
+  const computeJobs: ComputeJobMetaData[] = []
+
+  for (let i = 0; i < data.length; i++) {
+    dtList.push(data[i].datatokenId.address)
+  }
+  const queryDtList = JSON.stringify(dtList)
+    .replace(/,/g, ' ')
+    .replace(/"/g, '')
+    .replace(/(\[|\])/g, '')
+
+  if (queryDtList === '') return []
+
+  const source = axios.CancelToken.source()
+  const assets = await getAssetMetadata(queryDtList, source.token, chainIds)
+  const providers: Provider[] = []
+  const serviceEndpoints: string[] = []
+
+  try {
+    for (let i = 0; i < data.length; i++) {
+      try {
+        const did = web3.utils
+          .toChecksumAddress(data[i].datatokenId.address)
+          .replace('0x', 'did:op:')
+        const ddo = assets.filter((x) => x.id === did)[0]
+        if (ddo === undefined) continue
+
+        const service = ddo.service.filter(
+          (x: Service) => x.index === data[i].serviceId
+        )[0]
+
+        if (!service || service.type !== 'compute') continue
+        const { serviceEndpoint } = service
+
+        const wasProviderQueried =
+          serviceEndpoints.filter((x) => x === serviceEndpoint).length > 0
+
+        if (wasProviderQueried) continue
+        serviceEndpoints.push(serviceEndpoint)
+      } catch (err) {
+        Logger.error(err)
+      }
+    }
+
+    for (let i = 0; i < serviceEndpoints.length; i++) {
+      const instanceConfig = {
+        config,
+        web3: config.web3Provider,
+        logger: Logger,
+        ocean
+      }
+      const provider = await Provider.getInstance(instanceConfig)
+      await provider.setBaseUrl(serviceEndpoints[i])
+      const hasSameCompute =
+        providers.filter((x) => x.computeAddress === provider.computeAddress)
+          .length > 0
+      if (!hasSameCompute) providers.push(provider)
+    }
+  } catch (err) {
+    Logger.error(err)
+  }
+
+  for (let i = 0; i < providers.length; i++) {
+    try {
+      const providerComputeJobs = (await providers[i].computeStatus(
+        '',
+        account,
+        undefined,
+        undefined,
+        false
+      )) as ComputeJob[]
+
+      // means the provider uri is not good, so we ignore it and move on
+      if (!providerComputeJobs) continue
+      providerComputeJobs.sort((a, b) => {
+        if (a.dateCreated > b.dateCreated) {
+          return -1
+        }
+        if (a.dateCreated < b.dateCreated) {
+          return 1
+        }
+        return 0
+      })
+
+      for (let j = 0; j < providerComputeJobs.length; j++) {
+        const job = providerComputeJobs[j]
+        const did = job.inputDID[0]
+        const ddo = assets.filter((x) => x.id === did)[0]
+
+        if (!ddo) continue
+        const serviceMetadata = ddo.service.filter(
+          (x: Service) => x.type === 'metadata'
+        )[0]
+
+        const compJob: ComputeJobMetaData = {
+          ...job,
+          assetName: serviceMetadata.attributes.main.name,
+          assetDtSymbol: ddo.dataTokenInfo.symbol,
+          networkId: ddo.chainId
+        }
+        computeJobs.push(compJob)
+      }
+    } catch (err) {
+      Logger.error(err)
+    }
+  }
+
+  return computeJobs
+}

From e3900e8326d1762cba880a65b7ad57261c8b69ee Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Wed, 1 Sep 2021 15:15:25 +0200
Subject: [PATCH 14/31] more ComputeJobs refactor

---
 .../organisms/AssetActions/Compute/index.tsx    |  6 +-----
 .../pages/Profile/History/ComputeJobs/index.tsx | 17 +++++++----------
 .../pages/Profile/History/ComputeJobs/utils.ts  | 10 +++++-----
 3 files changed, 13 insertions(+), 20 deletions(-)

diff --git a/src/components/organisms/AssetActions/Compute/index.tsx b/src/components/organisms/AssetActions/Compute/index.tsx
index 7984835d7..7d5432523 100644
--- a/src/components/organisms/AssetActions/Compute/index.tsx
+++ b/src/components/organisms/AssetActions/Compute/index.tsx
@@ -473,11 +473,7 @@ export default function Compute({
       </footer>
       {accountId && (
         <AssetActionHistoryTable title="Your Compute Jobs">
-          <ComputeJobs
-            minimal
-            assetDTAddress={ddo.dataTokenInfo.address}
-            chainId={ddo.chainId}
-          />
+          <ComputeJobs minimal />
         </AssetActionHistoryTable>
       )}
     </>
diff --git a/src/components/pages/Profile/History/ComputeJobs/index.tsx b/src/components/pages/Profile/History/ComputeJobs/index.tsx
index 77af736cf..35b2ee211 100644
--- a/src/components/pages/Profile/History/ComputeJobs/index.tsx
+++ b/src/components/pages/Profile/History/ComputeJobs/index.tsx
@@ -15,6 +15,7 @@ import { getOceanConfig } from '../../../../../utils/ocean'
 import NetworkName from '../../../../atoms/NetworkName'
 import { getComputeJobs } from './utils'
 import styles from './index.module.css'
+import { useAsset } from '../../../../../providers/Asset'
 
 export function Status({ children }: { children: string }): ReactElement {
   return <div className={styles.status}>{children}</div>
@@ -68,16 +69,13 @@ const columns = [
 ]
 
 export default function ComputeJobs({
-  minimal,
-  assetDTAddress,
-  chainId
+  minimal
 }: {
   minimal?: boolean
-  assetDTAddress?: string
-  chainId?: number
 }): ReactElement {
   const { ocean, account, config, connect } = useOcean()
   const { accountId, networkId } = useWeb3()
+  const { ddo } = useAsset()
   const [isLoading, setIsLoading] = useState(true)
   const { chainIds } = useUserPreferences()
   const [jobs, setJobs] = useState<ComputeJobMetaData[]>([])
@@ -104,10 +102,9 @@ export default function ComputeJobs({
       setIsLoading(true)
 
       const jobs = await getComputeJobs(
-        accountId,
-        assetDTAddress,
+        ddo?.dataTokenInfo?.address,
         chainIds,
-        chainId,
+        ddo?.chainId,
         config,
         ocean,
         account
@@ -118,7 +115,7 @@ export default function ComputeJobs({
     } finally {
       setIsLoading(false)
     }
-  }, [account, accountId, assetDTAddress, chainIds, chainId, config, ocean])
+  }, [account, accountId, chainIds, ddo, config, ocean])
 
   useEffect(() => {
     fetchJobs()
@@ -126,7 +123,7 @@ export default function ComputeJobs({
 
   return accountId ? (
     <>
-      {jobs.length <= 0 || minimal || (
+      {(jobs?.length || !minimal) && (
         <Button
           style="text"
           size="small"
diff --git a/src/components/pages/Profile/History/ComputeJobs/utils.ts b/src/components/pages/Profile/History/ComputeJobs/utils.ts
index 0f65f9011..601bd4fc5 100644
--- a/src/components/pages/Profile/History/ComputeJobs/utils.ts
+++ b/src/components/pages/Profile/History/ComputeJobs/utils.ts
@@ -89,7 +89,6 @@ async function getAssetMetadata(
 }
 
 export async function getComputeJobs(
-  accountId: string,
   assetDTAddress: string,
   chainIds: number[],
   chainId: number,
@@ -99,12 +98,13 @@ export async function getComputeJobs(
 ): Promise<ComputeJobMetaData[]> {
   const variables = assetDTAddress
     ? {
-        user: accountId?.toLowerCase(),
+        user: account?.getId().toLowerCase(),
         datatokenAddress: assetDTAddress.toLowerCase()
       }
     : {
-        user: accountId?.toLowerCase()
+        user: account?.getId().toLowerCase()
       }
+
   const result = await fetchDataForMultipleChains(
     assetDTAddress ? getComputeOrdersByDatatokenAddress : getComputeOrders,
     variables,
@@ -112,8 +112,8 @@ export async function getComputeJobs(
   )
   let data: TokenOrder[] = []
   for (let i = 0; i < result.length; i++) {
-    if (!result[i].tokenOrders) continue
-    result[i].tokenOrders.forEach((tokenOrder: TokenOrder) => {
+    if (!result[i]?.tokenOrders) continue
+    result[i]?.tokenOrders.forEach((tokenOrder: TokenOrder) => {
       data.push(tokenOrder)
     })
   }

From b2bec2abe4690dc5cbcb1f75b44e77735b94eff8 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Wed, 1 Sep 2021 16:03:52 +0200
Subject: [PATCH 15/31] more getComputeJobs refactor

* move to compute utils
* abstract out more loops into separate methods
* fix results display
---
 .../Profile/History/ComputeJobs/Results.tsx   |   2 +-
 .../Profile/History/ComputeJobs/index.tsx     |  14 +-
 .../Profile/History/ComputeJobs/utils.ts      | 232 ---------------
 src/utils/compute.ts                          | 268 +++++++++++++++++-
 4 files changed, 269 insertions(+), 247 deletions(-)
 delete mode 100644 src/components/pages/Profile/History/ComputeJobs/utils.ts

diff --git a/src/components/pages/Profile/History/ComputeJobs/Results.tsx b/src/components/pages/Profile/History/ComputeJobs/Results.tsx
index 14ae57d43..9c2d64f75 100644
--- a/src/components/pages/Profile/History/ComputeJobs/Results.tsx
+++ b/src/components/pages/Profile/History/ComputeJobs/Results.tsx
@@ -11,7 +11,7 @@ import { graphql, useStaticQuery } from 'gatsby'
 
 export const contentQuery = graphql`
   query HistoryPageComputeResultsQuery {
-    content: allFile(filter: { relativePath: { eq: "pages/account.json" } }) {
+    content: allFile(filter: { relativePath: { eq: "pages/history.json" } }) {
       edges {
         node {
           childPagesJson {
diff --git a/src/components/pages/Profile/History/ComputeJobs/index.tsx b/src/components/pages/Profile/History/ComputeJobs/index.tsx
index 35b2ee211..e43d97c3d 100644
--- a/src/components/pages/Profile/History/ComputeJobs/index.tsx
+++ b/src/components/pages/Profile/History/ComputeJobs/index.tsx
@@ -13,7 +13,7 @@ import { ReactComponent as Refresh } from '../../../../../images/refresh.svg'
 import { useUserPreferences } from '../../../../../providers/UserPreferences'
 import { getOceanConfig } from '../../../../../utils/ocean'
 import NetworkName from '../../../../atoms/NetworkName'
-import { getComputeJobs } from './utils'
+import { getComputeJobs } from '../../../../../utils/compute'
 import styles from './index.module.css'
 import { useAsset } from '../../../../../providers/Asset'
 
@@ -100,15 +100,7 @@ export default function ComputeJobs({
 
     try {
       setIsLoading(true)
-
-      const jobs = await getComputeJobs(
-        ddo?.dataTokenInfo?.address,
-        chainIds,
-        ddo?.chainId,
-        config,
-        ocean,
-        account
-      )
+      const jobs = await getComputeJobs(chainIds, config, ocean, account, ddo)
       setJobs(jobs)
     } catch (error) {
       Logger.error(error.message)
@@ -123,7 +115,7 @@ export default function ComputeJobs({
 
   return accountId ? (
     <>
-      {(jobs?.length || !minimal) && (
+      {jobs?.length >= 0 && !minimal && (
         <Button
           style="text"
           size="small"
diff --git a/src/components/pages/Profile/History/ComputeJobs/utils.ts b/src/components/pages/Profile/History/ComputeJobs/utils.ts
deleted file mode 100644
index 601bd4fc5..000000000
--- a/src/components/pages/Profile/History/ComputeJobs/utils.ts
+++ /dev/null
@@ -1,232 +0,0 @@
-import {
-  DDO,
-  Service,
-  Logger,
-  Provider,
-  Config,
-  Ocean,
-  Account
-} from '@oceanprotocol/lib'
-import web3 from 'web3'
-import { ComputeJob } from '@oceanprotocol/lib/dist/node/ocean/interfaces/Compute'
-import axios, { CancelToken } from 'axios'
-import { gql } from 'urql'
-import { ComputeJobMetaData } from '../../../../../@types/ComputeJobMetaData'
-import {
-  transformChainIdsListToQuery,
-  queryMetadata
-} from '../../../../../utils/aquarius'
-import { fetchDataForMultipleChains } from '../../../../../utils/subgraph'
-import { OrdersData_tokenOrders_datatokenId as OrdersDatatoken } from '../../../../../@types/apollo/OrdersData'
-
-const getComputeOrders = gql`
-  query ComputeOrders($user: String!) {
-    tokenOrders(
-      orderBy: timestamp
-      orderDirection: desc
-      where: { payer: $user }
-    ) {
-      id
-      serviceId
-      datatokenId {
-        address
-      }
-      tx
-      timestamp
-    }
-  }
-`
-
-const getComputeOrdersByDatatokenAddress = gql`
-  query ComputeOrdersByDatatokenAddress(
-    $user: String!
-    $datatokenAddress: String!
-  ) {
-    tokenOrders(
-      orderBy: timestamp
-      orderDirection: desc
-      where: { payer: $user, datatokenId: $datatokenAddress }
-    ) {
-      id
-      serviceId
-      datatokenId {
-        address
-      }
-      tx
-      timestamp
-    }
-  }
-`
-
-interface TokenOrder {
-  id: string
-  serviceId: number
-  datatokenId: OrdersDatatoken
-  tx: any | null
-  timestamp: number
-}
-
-async function getAssetMetadata(
-  queryDtList: string,
-  cancelToken: CancelToken,
-  chainIds: number[]
-): Promise<DDO[]> {
-  const queryDid = {
-    page: 1,
-    offset: 100,
-    query: {
-      query_string: {
-        query: `(${queryDtList}) AND (${transformChainIdsListToQuery(
-          chainIds
-        )}) AND service.attributes.main.type:dataset AND service.type:compute`,
-        fields: ['dataToken']
-      }
-    }
-  }
-
-  const result = await queryMetadata(queryDid, cancelToken)
-  return result.results
-}
-
-export async function getComputeJobs(
-  assetDTAddress: string,
-  chainIds: number[],
-  chainId: number,
-  config: Config,
-  ocean: Ocean,
-  account: Account
-): Promise<ComputeJobMetaData[]> {
-  const variables = assetDTAddress
-    ? {
-        user: account?.getId().toLowerCase(),
-        datatokenAddress: assetDTAddress.toLowerCase()
-      }
-    : {
-        user: account?.getId().toLowerCase()
-      }
-
-  const result = await fetchDataForMultipleChains(
-    assetDTAddress ? getComputeOrdersByDatatokenAddress : getComputeOrders,
-    variables,
-    assetDTAddress ? [chainId] : chainIds
-  )
-  let data: TokenOrder[] = []
-  for (let i = 0; i < result.length; i++) {
-    if (!result[i]?.tokenOrders) continue
-    result[i]?.tokenOrders.forEach((tokenOrder: TokenOrder) => {
-      data.push(tokenOrder)
-    })
-  }
-
-  if (!ocean || !account || !data) return []
-
-  data = data.sort((a, b) => b.timestamp - a.timestamp)
-  const dtList = []
-  const computeJobs: ComputeJobMetaData[] = []
-
-  for (let i = 0; i < data.length; i++) {
-    dtList.push(data[i].datatokenId.address)
-  }
-  const queryDtList = JSON.stringify(dtList)
-    .replace(/,/g, ' ')
-    .replace(/"/g, '')
-    .replace(/(\[|\])/g, '')
-
-  if (queryDtList === '') return []
-
-  const source = axios.CancelToken.source()
-  const assets = await getAssetMetadata(queryDtList, source.token, chainIds)
-  const providers: Provider[] = []
-  const serviceEndpoints: string[] = []
-
-  try {
-    for (let i = 0; i < data.length; i++) {
-      try {
-        const did = web3.utils
-          .toChecksumAddress(data[i].datatokenId.address)
-          .replace('0x', 'did:op:')
-        const ddo = assets.filter((x) => x.id === did)[0]
-        if (ddo === undefined) continue
-
-        const service = ddo.service.filter(
-          (x: Service) => x.index === data[i].serviceId
-        )[0]
-
-        if (!service || service.type !== 'compute') continue
-        const { serviceEndpoint } = service
-
-        const wasProviderQueried =
-          serviceEndpoints.filter((x) => x === serviceEndpoint).length > 0
-
-        if (wasProviderQueried) continue
-        serviceEndpoints.push(serviceEndpoint)
-      } catch (err) {
-        Logger.error(err)
-      }
-    }
-
-    for (let i = 0; i < serviceEndpoints.length; i++) {
-      const instanceConfig = {
-        config,
-        web3: config.web3Provider,
-        logger: Logger,
-        ocean
-      }
-      const provider = await Provider.getInstance(instanceConfig)
-      await provider.setBaseUrl(serviceEndpoints[i])
-      const hasSameCompute =
-        providers.filter((x) => x.computeAddress === provider.computeAddress)
-          .length > 0
-      if (!hasSameCompute) providers.push(provider)
-    }
-  } catch (err) {
-    Logger.error(err)
-  }
-
-  for (let i = 0; i < providers.length; i++) {
-    try {
-      const providerComputeJobs = (await providers[i].computeStatus(
-        '',
-        account,
-        undefined,
-        undefined,
-        false
-      )) as ComputeJob[]
-
-      // means the provider uri is not good, so we ignore it and move on
-      if (!providerComputeJobs) continue
-      providerComputeJobs.sort((a, b) => {
-        if (a.dateCreated > b.dateCreated) {
-          return -1
-        }
-        if (a.dateCreated < b.dateCreated) {
-          return 1
-        }
-        return 0
-      })
-
-      for (let j = 0; j < providerComputeJobs.length; j++) {
-        const job = providerComputeJobs[j]
-        const did = job.inputDID[0]
-        const ddo = assets.filter((x) => x.id === did)[0]
-
-        if (!ddo) continue
-        const serviceMetadata = ddo.service.filter(
-          (x: Service) => x.type === 'metadata'
-        )[0]
-
-        const compJob: ComputeJobMetaData = {
-          ...job,
-          assetName: serviceMetadata.attributes.main.name,
-          assetDtSymbol: ddo.dataTokenInfo.symbol,
-          networkId: ddo.chainId
-        }
-        computeJobs.push(compJob)
-      }
-    } catch (err) {
-      Logger.error(err)
-    }
-  }
-
-  return computeJobs
-}
diff --git a/src/utils/compute.ts b/src/utils/compute.ts
index fe37f0b7e..dbc5c518a 100644
--- a/src/utils/compute.ts
+++ b/src/utils/compute.ts
@@ -1,10 +1,272 @@
 import {
-  DDO,
-  Ocean,
   ServiceComputePrivacy,
-  publisherTrustedAlgorithm as PublisherTrustedAlgorithm
+  publisherTrustedAlgorithm as PublisherTrustedAlgorithm,
+  DDO,
+  Service,
+  Logger,
+  Provider,
+  Config,
+  Ocean,
+  Account
 } from '@oceanprotocol/lib'
 import { ComputePrivacyForm } from '../models/FormEditComputeDataset'
+import web3 from 'web3'
+import { ComputeJob } from '@oceanprotocol/lib/dist/node/ocean/interfaces/Compute'
+import axios, { CancelToken } from 'axios'
+import { gql } from 'urql'
+import { ComputeJobMetaData } from '../@types/ComputeJobMetaData'
+import { transformChainIdsListToQuery, queryMetadata } from './aquarius'
+import { fetchDataForMultipleChains } from './subgraph'
+import { OrdersData_tokenOrders_datatokenId as OrdersDatatoken } from '../@types/apollo/OrdersData'
+
+const getComputeOrders = gql`
+  query ComputeOrders($user: String!) {
+    tokenOrders(
+      orderBy: timestamp
+      orderDirection: desc
+      where: { payer: $user }
+    ) {
+      id
+      serviceId
+      datatokenId {
+        address
+      }
+      tx
+      timestamp
+    }
+  }
+`
+
+const getComputeOrdersByDatatokenAddress = gql`
+  query ComputeOrdersByDatatokenAddress(
+    $user: String!
+    $datatokenAddress: String!
+  ) {
+    tokenOrders(
+      orderBy: timestamp
+      orderDirection: desc
+      where: { payer: $user, datatokenId: $datatokenAddress }
+    ) {
+      id
+      serviceId
+      datatokenId {
+        address
+      }
+      tx
+      timestamp
+    }
+  }
+`
+
+interface TokenOrder {
+  id: string
+  serviceId: number
+  datatokenId: OrdersDatatoken
+  tx: any
+  timestamp: number
+}
+
+async function getAssetMetadata(
+  queryDtList: string,
+  cancelToken: CancelToken,
+  chainIds: number[]
+): Promise<DDO[]> {
+  const queryDid = {
+    page: 1,
+    offset: 100,
+    query: {
+      query_string: {
+        query: `(${queryDtList}) AND (${transformChainIdsListToQuery(
+          chainIds
+        )}) AND service.attributes.main.type:dataset AND service.type:compute`,
+        fields: ['dataToken']
+      }
+    }
+  }
+
+  const result = await queryMetadata(queryDid, cancelToken)
+  return result.results
+}
+
+function getServiceEndpoints(data: TokenOrder[], assets: DDO[]): string[] {
+  const serviceEndpoints: string[] = []
+
+  for (let i = 0; i < data.length; i++) {
+    try {
+      const did = web3.utils
+        .toChecksumAddress(data[i].datatokenId.address)
+        .replace('0x', 'did:op:')
+      const ddo = assets.filter((x) => x.id === did)[0]
+      if (ddo === undefined) continue
+
+      const service = ddo.service.filter(
+        (x: Service) => x.index === data[i].serviceId
+      )[0]
+
+      if (!service || service.type !== 'compute') continue
+      const { serviceEndpoint } = service
+
+      const wasProviderQueried =
+        serviceEndpoints?.filter((x) => x === serviceEndpoint).length > 0
+
+      if (wasProviderQueried) continue
+      serviceEndpoints.push(serviceEndpoint)
+    } catch (err) {
+      Logger.error(err.message)
+    }
+  }
+
+  return serviceEndpoints
+}
+
+async function getProviders(
+  serviceEndpoints: string[],
+  config: Config,
+  ocean: Ocean
+): Promise<Provider[]> {
+  const providers: Provider[] = []
+
+  try {
+    for (let i = 0; i < serviceEndpoints?.length; i++) {
+      const instanceConfig = {
+        config,
+        web3: config.web3Provider,
+        logger: Logger,
+        ocean
+      }
+      const provider = await Provider.getInstance(instanceConfig)
+      await provider.setBaseUrl(serviceEndpoints[i])
+      const hasSameCompute =
+        providers.filter((x) => x.computeAddress === provider.computeAddress)
+          .length > 0
+      if (!hasSameCompute) providers.push(provider)
+    }
+  } catch (err) {
+    Logger.error(err.message)
+  }
+
+  return providers
+}
+
+async function getJobs(
+  providers: Provider[],
+  account: Account,
+  assets: DDO[]
+): Promise<ComputeJobMetaData[]> {
+  const computeJobs: ComputeJobMetaData[] = []
+
+  for (let i = 0; i < providers.length; i++) {
+    try {
+      const providerComputeJobs = (await providers[i].computeStatus(
+        '',
+        account,
+        undefined,
+        undefined,
+        false
+      )) as ComputeJob[]
+
+      // means the provider uri is not good, so we ignore it and move on
+      if (!providerComputeJobs) continue
+      providerComputeJobs.sort((a, b) => {
+        if (a.dateCreated > b.dateCreated) {
+          return -1
+        }
+        if (a.dateCreated < b.dateCreated) {
+          return 1
+        }
+        return 0
+      })
+
+      for (let j = 0; j < providerComputeJobs?.length; j++) {
+        const job = providerComputeJobs[j]
+        const did = job.inputDID[0]
+        const ddo = assets.filter((x) => x.id === did)[0]
+
+        if (!ddo) continue
+        const serviceMetadata = ddo.service.filter(
+          (x: Service) => x.type === 'metadata'
+        )[0]
+
+        const compJob: ComputeJobMetaData = {
+          ...job,
+          assetName: serviceMetadata.attributes.main.name,
+          assetDtSymbol: ddo.dataTokenInfo.symbol,
+          networkId: ddo.chainId
+        }
+        computeJobs.push(compJob)
+      }
+    } catch (err) {
+      Logger.error(err.message)
+    }
+  }
+
+  return computeJobs
+}
+
+function getDtList(data: TokenOrder[]) {
+  const dtList = []
+
+  for (let i = 0; i < data.length; i++) {
+    dtList.push(data[i].datatokenId.address)
+  }
+  const queryDtList = JSON.stringify(dtList)
+    .replace(/,/g, ' ')
+    .replace(/"/g, '')
+    .replace(/(\[|\])/g, '')
+
+  return queryDtList
+}
+
+export async function getComputeJobs(
+  chainIds: number[],
+  config: Config,
+  ocean: Ocean,
+  account: Account,
+  ddo?: DDO
+): Promise<ComputeJobMetaData[]> {
+  const assetDTAddress = ddo?.dataTokenInfo?.address
+
+  const variables = assetDTAddress
+    ? {
+        user: account?.getId().toLowerCase(),
+        datatokenAddress: assetDTAddress.toLowerCase()
+      }
+    : {
+        user: account?.getId().toLowerCase()
+      }
+
+  const result = await fetchDataForMultipleChains(
+    assetDTAddress ? getComputeOrdersByDatatokenAddress : getComputeOrders,
+    variables,
+    assetDTAddress ? [ddo?.chainId] : chainIds
+  )
+  let data: TokenOrder[] = []
+
+  for (let i = 0; i < result.length; i++) {
+    if (!result[i]?.tokenOrders) continue
+    result[i]?.tokenOrders.forEach((tokenOrder: TokenOrder) => {
+      data.push(tokenOrder)
+    })
+  }
+
+  if (!ocean || !account || !data) return
+
+  data = data.sort((a, b) => b.timestamp - a.timestamp)
+  const queryDtList = getDtList(data)
+  if (queryDtList === '') return
+
+  const source = axios.CancelToken.source()
+  const assets = await getAssetMetadata(queryDtList, source.token, chainIds)
+  const serviceEndpoints = getServiceEndpoints(data, assets)
+  const providers: Provider[] = await getProviders(
+    serviceEndpoints,
+    config,
+    ocean
+  )
+  const computeJobs = await getJobs(providers, account, assets)
+
+  return computeJobs
+}
 
 export async function createTrustedAlgorithmList(
   selectedAlgorithms: string[], // list of DIDs

From 6e0902f5d35058ca1c720b91c87f58dadefb0403 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Wed, 1 Sep 2021 17:48:54 +0200
Subject: [PATCH 16/31] typings & typos

---
 src/utils/subgraph.ts | 55 ++++++++++++++++++++++---------------------
 1 file changed, 28 insertions(+), 27 deletions(-)

diff --git a/src/utils/subgraph.ts b/src/utils/subgraph.ts
index 6b13e1b1e..68fbae502 100644
--- a/src/utils/subgraph.ts
+++ b/src/utils/subgraph.ts
@@ -5,11 +5,11 @@ import { getOceanConfig } from './ocean'
 import web3 from 'web3'
 import {
   AssetsPoolPrice,
-  AssetsPoolPrice_pools as AssetsPoolPricePools
+  AssetsPoolPrice_pools as AssetsPoolPricePool
 } from '../@types/apollo/AssetsPoolPrice'
 import {
   AssetsFrePrice,
-  AssetsFrePrice_fixedRateExchanges as AssetsFrePriceFixedRateExchanges
+  AssetsFrePrice_fixedRateExchanges as AssetsFrePriceFixedRateExchange
 } from '../@types/apollo/AssetsFrePrice'
 import {
   AssetsFreePrice,
@@ -17,7 +17,7 @@ import {
 } from '../@types/apollo/AssetsFreePrice'
 import { AssetPreviousOrder } from '../@types/apollo/AssetPreviousOrder'
 import {
-  HighestLiquidityAssets_pools as HighestLiquidityAssetsPools,
+  HighestLiquidityAssets_pools as HighestLiquidityAssetsPool,
   HighestLiquidityAssets as HighestLiquidityGraphAssets
 } from '../@types/apollo/HighestLiquidityAssets'
 import {
@@ -113,7 +113,7 @@ const PoolQuery = gql`
   }
 `
 
-const AssetPoolPriceQuerry = gql`
+const AssetPoolPriceQuery = gql`
   query AssetPoolPrice($datatokenAddress: String) {
     pools(where: { datatokenAddress: $datatokenAddress }) {
       id
@@ -276,8 +276,8 @@ export async function getPreviousOrders(
 }
 
 function transformPriceToBestPrice(
-  frePrice: AssetsFrePriceFixedRateExchanges[],
-  poolPrice: AssetsPoolPricePools[],
+  frePrice: AssetsFrePriceFixedRateExchange[],
+  poolPrice: AssetsPoolPricePool[],
   freePrice: AssetFreePriceDispenser[]
 ) {
   if (poolPrice?.length > 0) {
@@ -340,8 +340,8 @@ async function getAssetsPoolsExchangesAndDatatokenMap(
   assets: DDO[]
 ): Promise<
   [
-    AssetsPoolPricePools[],
-    AssetsFrePriceFixedRateExchanges[],
+    AssetsPoolPricePool[],
+    AssetsFrePriceFixedRateExchange[],
     AssetFreePriceDispenser[],
     DidAndDatatokenMap
   ]
@@ -359,8 +359,8 @@ async function getAssetsPoolsExchangesAndDatatokenMap(
       chainAssetLists[ddo.chainId].push(ddo?.dataToken.toLowerCase())
     }
   }
-  let poolPriceResponse: AssetsPoolPricePools[] = []
-  let frePriceResponse: AssetsFrePriceFixedRateExchanges[] = []
+  let poolPriceResponse: AssetsPoolPricePool[] = []
+  let frePriceResponse: AssetsFrePriceFixedRateExchange[] = []
   let freePriceResponse: AssetFreePriceDispenser[] = []
 
   for (const chainKey in chainAssetLists) {
@@ -403,8 +403,8 @@ export async function getAssetsPriceList(assets: DDO[]): Promise<PriceList> {
   const priceList: PriceList = {}
 
   const values: [
-    AssetsPoolPricePools[],
-    AssetsFrePriceFixedRateExchanges[],
+    AssetsPoolPricePool[],
+    AssetsFrePriceFixedRateExchange[],
     AssetFreePriceDispenser[],
     DidAndDatatokenMap
   ] = await getAssetsPoolsExchangesAndDatatokenMap(assets)
@@ -441,7 +441,7 @@ export async function getPrice(asset: DDO): Promise<BestPrice> {
   const queryContext = getQueryContext(Number(asset.chainId))
 
   const poolPriceResponse: OperationResult<AssetsPoolPrice> = await fetchData(
-    AssetPoolPriceQuerry,
+    AssetPoolPriceQuery,
     poolVariables,
     queryContext
   )
@@ -472,7 +472,7 @@ export async function getSpotPrice(asset: DDO): Promise<number> {
   const queryContext = getQueryContext(Number(asset.chainId))
 
   const poolPriceResponse: OperationResult<AssetsPoolPrice> = await fetchData(
-    AssetPoolPriceQuerry,
+    AssetPoolPriceQuery,
     poolVariables,
     queryContext
   )
@@ -486,8 +486,8 @@ export async function getAssetsBestPrices(
   const assetsWithPrice: AssetListPrices[] = []
 
   const values: [
-    AssetsPoolPricePools[],
-    AssetsFrePriceFixedRateExchanges[],
+    AssetsPoolPricePool[],
+    AssetsFrePriceFixedRateExchange[],
     AssetFreePriceDispenser[],
     DidAndDatatokenMap
   ] = await getAssetsPoolsExchangesAndDatatokenMap(assets)
@@ -497,19 +497,20 @@ export async function getAssetsBestPrices(
   const freePriceResponse = values[2]
   for (const ddo of assets) {
     const dataToken = ddo.dataToken.toLowerCase()
-    const poolPrice: AssetsPoolPricePools[] = []
-    const frePrice: AssetsFrePriceFixedRateExchanges[] = []
+    const poolPrice: AssetsPoolPricePool[] = []
+    const frePrice: AssetsFrePriceFixedRateExchange[] = []
     const freePrice: AssetFreePriceDispenser[] = []
     const pool = poolPriceResponse.find(
-      (pool: any) => pool.datatokenAddress === dataToken
+      (pool: AssetsPoolPricePool) => pool.datatokenAddress === dataToken
     )
     pool && poolPrice.push(pool)
     const fre = frePriceResponse.find(
-      (fre: any) => fre.datatoken.address === dataToken
+      (fre: AssetsFrePriceFixedRateExchange) =>
+        fre.datatoken.address === dataToken
     )
     fre && frePrice.push(fre)
     const free = freePriceResponse.find(
-      (free: any) => free.datatoken.address === dataToken
+      (free: AssetFreePriceDispenser) => free.datatoken.address === dataToken
     )
     free && freePrice.push(free)
     const bestPrice = transformPriceToBestPrice(frePrice, poolPrice, freePrice)
@@ -526,22 +527,22 @@ export async function getHighestLiquidityDIDs(
   chainIds: number[]
 ): Promise<[string, number]> {
   const didList: string[] = []
-  let highestLiquidiyAssets: HighestLiquidityAssetsPools[] = []
+  let highestLiquidityAssets: HighestLiquidityAssetsPool[] = []
   for (const chain of chainIds) {
     const queryContext = getQueryContext(Number(chain))
     const fetchedPools: OperationResult<HighestLiquidityGraphAssets, any> =
       await fetchData(HighestLiquidityAssets, null, queryContext)
-    highestLiquidiyAssets = highestLiquidiyAssets.concat(
+    highestLiquidityAssets = highestLiquidityAssets.concat(
       fetchedPools.data.pools
     )
   }
-  highestLiquidiyAssets
+  highestLiquidityAssets
     .sort((a, b) => a.oceanReserve - b.oceanReserve)
     .reverse()
-  for (let i = 0; i < highestLiquidiyAssets.length; i++) {
-    if (!highestLiquidiyAssets[i].datatokenAddress) continue
+  for (let i = 0; i < highestLiquidityAssets.length; i++) {
+    if (!highestLiquidityAssets[i].datatokenAddress) continue
     const did = web3.utils
-      .toChecksumAddress(highestLiquidiyAssets[i].datatokenAddress)
+      .toChecksumAddress(highestLiquidityAssets[i].datatokenAddress)
       .replace('0x', 'did:op:')
     didList.push(did)
   }

From 992c8ac33c4ede23d0873ce121e65dc5aac12cfa Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Thu, 2 Sep 2021 13:35:06 +0200
Subject: [PATCH 17/31] change IPFS gateway for loading image

---
 src/utils/profile.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/utils/profile.ts b/src/utils/profile.ts
index c6d760585..9917a2588 100644
--- a/src/utils/profile.ts
+++ b/src/utils/profile.ts
@@ -4,7 +4,7 @@ import jwtDecode from 'jwt-decode'
 
 // https://docs.3box.io/api/rest-api
 const apiUri = 'https://3box.oceanprotocol.com'
-const ipfsUrl = 'https://dweb.link'
+const ipfsUrl = 'https://infura-ipfs.io'
 
 function decodeProof(proofJWT: string) {
   if (!proofJWT) return

From 1644b79cb282225a839b32507163cc0bec6a01e5 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Thu, 2 Sep 2021 16:33:32 +0200
Subject: [PATCH 18/31] fix pool transactions symbols for swap tx, kinda

---
 .../molecules/PoolTransactions/Title.tsx      | 21 +++++++------------
 .../molecules/PoolTransactions/index.tsx      | 14 +++++--------
 2 files changed, 13 insertions(+), 22 deletions(-)

diff --git a/src/components/molecules/PoolTransactions/Title.tsx b/src/components/molecules/PoolTransactions/Title.tsx
index 5305c34f7..8b5ea065c 100644
--- a/src/components/molecules/PoolTransactions/Title.tsx
+++ b/src/components/molecules/PoolTransactions/Title.tsx
@@ -1,28 +1,23 @@
 import React, { useState, useEffect, ReactElement } from 'react'
-import { Datatoken, PoolTransaction } from '.'
+import { PoolTransaction } from '.'
 import { useUserPreferences } from '../../../providers/UserPreferences'
 import ExplorerLink from '../../atoms/ExplorerLink'
 import { formatPrice } from '../../atoms/Price/PriceUnit'
 import styles from './Title.module.css'
 
-function getSymbol(tokenId: Datatoken) {
-  const symbol = tokenId === null ? 'OCEAN' : tokenId.symbol
-  return symbol
-}
-
 async function getTitle(row: PoolTransaction, locale: string) {
   let title = ''
   switch (row.event) {
     case 'swap': {
       const inToken = row.tokens.filter((x) => x.type === 'in')[0]
-      const inTokenSymbol = getSymbol(inToken.poolToken.tokenId)
+      const inTokenSymbol = inToken?.poolToken.symbol
       const outToken = row.tokens.filter((x) => x.type === 'out')[0]
-      const outTokenSymbol = getSymbol(outToken.poolToken.tokenId)
+      const outTokenSymbol = outToken?.poolToken.symbol
       title += `Swap ${formatPrice(
-        Math.abs(inToken.value).toString(),
+        Math.abs(inToken?.value).toString(),
         locale
       )}${inTokenSymbol} for ${formatPrice(
-        Math.abs(outToken.value).toString(),
+        Math.abs(outToken?.value).toString(),
         locale
       )}${outTokenSymbol}`
 
@@ -34,13 +29,13 @@ async function getTitle(row: PoolTransaction, locale: string) {
           x.tokenAddress.toLowerCase() !==
           row.poolAddress.datatokenAddress.toLowerCase()
       )[0]
-      const firstTokenSymbol = await getSymbol(firstToken.poolToken.tokenId)
+      const firstTokenSymbol = firstToken?.poolToken.symbol
       const secondToken = row.tokens.filter(
         (x) =>
           x.tokenAddress.toLowerCase() ===
           row.poolAddress.datatokenAddress.toLowerCase()
       )[0]
-      const secondTokenSymbol = await getSymbol(secondToken.poolToken.tokenId)
+      const secondTokenSymbol = secondToken?.poolToken.symbol
       title += `Create pool with ${formatPrice(
         Math.abs(firstToken.value).toString(),
         locale
@@ -53,7 +48,7 @@ async function getTitle(row: PoolTransaction, locale: string) {
     case 'join':
     case 'exit': {
       for (let i = 0; i < row.tokens.length; i++) {
-        const tokenSymbol = await getSymbol(row.tokens[i].poolToken.tokenId)
+        const tokenSymbol = row.tokens[i].poolToken.symbol
         if (i > 0) title += '\n'
         title += `${row.event === 'join' ? 'Add' : 'Remove'} ${formatPrice(
           Math.abs(row.tokens[i].value).toString(),
diff --git a/src/components/molecules/PoolTransactions/index.tsx b/src/components/molecules/PoolTransactions/index.tsx
index a565cd340..75b0933f4 100644
--- a/src/components/molecules/PoolTransactions/index.tsx
+++ b/src/components/molecules/PoolTransactions/index.tsx
@@ -6,7 +6,6 @@ import { useUserPreferences } from '../../../providers/UserPreferences'
 import { gql } from 'urql'
 import { TransactionHistory_poolTransactions as TransactionHistoryPoolTransactions } from '../../../@types/apollo/TransactionHistory'
 import web3 from 'web3'
-import { useWeb3 } from '../../../providers/Web3'
 import { fetchDataForMultipleChains } from '../../../utils/subgraph'
 import { useSiteMetadata } from '../../../hooks/useSiteMetadata'
 import NetworkName from '../../atoms/NetworkName'
@@ -56,10 +55,12 @@ const txHistoryQuery = gql`
     ) {
       tokens {
         poolToken {
-          tokenId {
-            symbol
-          }
+          id
+          symbol
         }
+        value
+        type
+        tokenAddress
       }
       tx
       event
@@ -67,11 +68,6 @@ const txHistoryQuery = gql`
       poolAddress {
         datatokenAddress
       }
-      tokens {
-        value
-        type
-        tokenAddress
-      }
     }
   }
 `

From 65944d086177c5a1d3a69468efbb4f17ef00c79c Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Thu, 2 Sep 2021 16:55:10 +0200
Subject: [PATCH 19/31] more token query changes

---
 src/components/molecules/PoolTransactions/index.tsx | 13 +++++--------
 1 file changed, 5 insertions(+), 8 deletions(-)

diff --git a/src/components/molecules/PoolTransactions/index.tsx b/src/components/molecules/PoolTransactions/index.tsx
index 75b0933f4..b3d11fe65 100644
--- a/src/components/molecules/PoolTransactions/index.tsx
+++ b/src/components/molecules/PoolTransactions/index.tsx
@@ -26,10 +26,12 @@ const txHistoryQueryByPool = gql`
     ) {
       tokens {
         poolToken {
-          tokenId {
-            symbol
-          }
+          id
+          symbol
         }
+        value
+        type
+        tokenAddress
       }
       tx
       event
@@ -37,11 +39,6 @@ const txHistoryQueryByPool = gql`
       poolAddress {
         datatokenAddress
       }
-      tokens {
-        value
-        type
-        tokenAddress
-      }
     }
   }
 `

From fe065aea589dc72b54285be38442b88d2b17f873 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Thu, 2 Sep 2021 19:35:49 +0200
Subject: [PATCH 20/31] small PoolShares refactor

---
 .../Profile/History/PoolShares.module.css     |  12 +-
 .../pages/Profile/History/PoolShares.tsx      | 121 ++++++++++--------
 2 files changed, 71 insertions(+), 62 deletions(-)

diff --git a/src/components/pages/Profile/History/PoolShares.module.css b/src/components/pages/Profile/History/PoolShares.module.css
index 9cd00bbe6..4dcf96482 100644
--- a/src/components/pages/Profile/History/PoolShares.module.css
+++ b/src/components/pages/Profile/History/PoolShares.module.css
@@ -30,31 +30,31 @@
   }
 }
 
-.yourLiquidity {
+.userLiquidity {
   display: flex;
   flex-direction: column;
   align-items: flex-end;
 }
 
-.yourLiquidity [class*='Conversion-module--'] {
+.userLiquidity [class*='Conversion-module--'] {
   margin-bottom: calc(var(--spacer) / 8);
 }
 
-.yourLiquidity [class*='Conversion-module--'] strong {
+.userLiquidity [class*='Conversion-module--'] strong {
   font-size: var(--font-size-base);
 }
 
-.yourLiquidity [class*='Token-module--token'] {
+.userLiquidity [class*='Token-module--token'] {
   display: flex;
   align-items: center;
   justify-content: flex-end;
   margin-bottom: calc(var(--spacer) / 8);
 }
 
-.yourLiquidity [class*='Token-module--token'] div {
+.userLiquidity [class*='Token-module--token'] div {
   font-size: var(--font-size-small);
 }
 
-.yourLiquidity [class*='Token-module--icon'] {
+.userLiquidity [class*='Token-module--icon'] {
   display: none;
 }
diff --git a/src/components/pages/Profile/History/PoolShares.tsx b/src/components/pages/Profile/History/PoolShares.tsx
index c943ce847..58e70f4a8 100644
--- a/src/components/pages/Profile/History/PoolShares.tsx
+++ b/src/components/pages/Profile/History/PoolShares.tsx
@@ -1,4 +1,4 @@
-import React, { ReactElement, useEffect, useState } from 'react'
+import React, { ReactElement, useCallback, useEffect, useState } from 'react'
 import Table from '../../../atoms/Table'
 import Conversion from '../../../atoms/Price/Conversion'
 import styles from './PoolShares.module.css'
@@ -102,7 +102,7 @@ function Liquidity({ row, type }: { row: Asset; type: string }) {
     dataTokenBalance = row.poolShare.poolId.datatokenReserve.toString()
   }
   return (
-    <div className={styles.yourLiquidity}>
+    <div className={styles.userLiquidity}>
       <Conversion
         price={price}
         className={styles.totalLiquidity}
@@ -146,7 +146,7 @@ const columns = [
     }
   },
   {
-    name: 'Your Liquidity',
+    name: 'Liquidity',
     selector: function getAssetRow(row: Asset) {
       return <Liquidity row={row} type="user" />
     },
@@ -161,6 +161,43 @@ const columns = [
   }
 ]
 
+async function getPoolSharesData(accountId: string, chainIds: number[]) {
+  const variables = { user: accountId?.toLowerCase() }
+  const data: PoolShare[] = []
+  const result = await fetchDataForMultipleChains(
+    poolSharesQuery,
+    variables,
+    chainIds
+  )
+  for (let i = 0; i < result.length; i++) {
+    result[i].poolShares.forEach((poolShare: PoolShare) => {
+      data.push(poolShare)
+    })
+  }
+  return data
+}
+
+async function getPoolSharesAssets(data: PoolShare[]) {
+  const assetList: Asset[] = []
+  const source = axios.CancelToken.source()
+
+  for (let i = 0; i < data.length; i++) {
+    const did = web3.utils
+      .toChecksumAddress(data[i].poolId.datatokenAddress)
+      .replace('0x', 'did:op:')
+    const ddo = await retrieveDDO(did, source.token)
+    const userLiquidity = calculateUserLiquidity(data[i])
+    assetList.push({
+      poolShare: data[i],
+      userLiquidity: userLiquidity,
+      networkId: ddo?.chainId,
+      createTime: data[i].poolId.createTime
+    })
+  }
+  const assets = assetList.sort((a, b) => b.createTime - a.createTime)
+  return assets
+}
+
 export default function PoolShares({
   accountId
 }: {
@@ -172,33 +209,16 @@ export default function PoolShares({
   const [dataFetchInterval, setDataFetchInterval] = useState<NodeJS.Timeout>()
   const { chainIds } = useUserPreferences()
 
-  async function fetchPoolSharesData() {
-    const variables = { user: accountId?.toLowerCase() }
-    const shares: PoolShare[] = []
-    const result = await fetchDataForMultipleChains(
-      poolSharesQuery,
-      variables,
-      chainIds
-    )
-    for (let i = 0; i < result.length; i++) {
-      result[i].poolShares.forEach((poolShare: PoolShare) => {
-        shares.push(poolShare)
-      })
-    }
-    if (JSON.stringify(data) !== JSON.stringify(shares)) {
-      setData(shares)
-    }
-  }
+  const refetchPoolSharesData = useCallback(() => {
+    if (dataFetchInterval) return
 
-  function refetchPoolShares() {
-    if (!dataFetchInterval) {
-      setDataFetchInterval(
-        setInterval(function () {
-          fetchPoolSharesData()
-        }, REFETCH_INTERVAL)
-      )
-    }
-  }
+    setDataFetchInterval(
+      setInterval(async () => {
+        const newData = await getPoolSharesData(accountId, chainIds)
+        setData(newData)
+      }, REFETCH_INTERVAL)
+    )
+  }, [dataFetchInterval, chainIds, accountId])
 
   useEffect(() => {
     return () => {
@@ -207,43 +227,32 @@ export default function PoolShares({
   }, [dataFetchInterval])
 
   useEffect(() => {
-    async function getShares() {
-      const assetList: Asset[] = []
-      const source = axios.CancelToken.source()
+    async function init() {
+      setLoading(true)
+      const newData = await getPoolSharesData(accountId, chainIds)
+      setData(newData)
+      refetchPoolSharesData()
+    }
+    init()
+  }, [accountId, chainIds, refetchPoolSharesData])
 
+  useEffect(() => {
+    if (!data) return
+
+    async function getShares() {
       try {
-        setLoading(true)
-        if (!data) {
-          await fetchPoolSharesData()
-          return
+        const newAssets = await getPoolSharesAssets(data)
+        if (JSON.stringify(assets) !== JSON.stringify(newAssets)) {
+          setAssets(newAssets)
         }
-        for (let i = 0; i < data.length; i++) {
-          const did = web3.utils
-            .toChecksumAddress(data[i].poolId.datatokenAddress)
-            .replace('0x', 'did:op:')
-          const ddo = await retrieveDDO(did, source.token)
-          const userLiquidity = calculateUserLiquidity(data[i])
-          assetList.push({
-            poolShare: data[i],
-            userLiquidity: userLiquidity,
-            networkId: ddo.chainId,
-            createTime: data[i].poolId.createTime
-          })
-        }
-        const orderedAssets = assetList.sort(
-          (a, b) => b.createTime - a.createTime
-        )
-        setAssets(orderedAssets)
-        refetchPoolShares()
       } catch (error) {
         console.error('Error fetching pool shares: ', error.message)
       } finally {
         setLoading(false)
       }
     }
-
     getShares()
-  }, [accountId, chainIds, data])
+  }, [accountId, chainIds, data, assets])
 
   return accountId ? (
     <Table

From 1a54dda59c0e513ecd6e8ed0bac45fa32062f0fb Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Thu, 2 Sep 2021 19:49:21 +0200
Subject: [PATCH 21/31] more cleanup and typos

---
 src/utils/freePrice.ts |  5 +++--
 src/utils/metadata.ts  | 39 ++++++---------------------------------
 2 files changed, 9 insertions(+), 35 deletions(-)

diff --git a/src/utils/freePrice.ts b/src/utils/freePrice.ts
index 68e6de649..98645e4de 100644
--- a/src/utils/freePrice.ts
+++ b/src/utils/freePrice.ts
@@ -1,11 +1,12 @@
 import { Logger, Ocean } from '@oceanprotocol/lib'
+import { TransactionReceipt } from 'web3-core'
 
 export async function setMinterToPublisher(
   ocean: Ocean,
   dataTokenAddress: string,
   accountId: string,
   setError: (msg: string) => void
-): Promise<any> {
+): Promise<TransactionReceipt> {
   // free pricing v3 workaround part1
   const response = await ocean.OceanDispenser.cancelMinter(
     dataTokenAddress,
@@ -23,7 +24,7 @@ export async function setMinterToDispenser(
   dataTokenAddress: string,
   accountId: string,
   setError: (msg: string) => void
-): Promise<any> {
+): Promise<TransactionReceipt> {
   // free pricing v3 workaround part2
   const response = await ocean.OceanDispenser.makeMinter(
     dataTokenAddress,
diff --git a/src/utils/metadata.ts b/src/utils/metadata.ts
index 7e4578b8b..0a8ebada4 100644
--- a/src/utils/metadata.ts
+++ b/src/utils/metadata.ts
@@ -76,7 +76,7 @@ export function checkIfTimeoutInPredefinedValues(
   return false
 }
 
-function getAlgoithComponent(
+function getAlgorithmComponent(
   image: string,
   containerTag: string,
   entrypoint: string,
@@ -94,7 +94,7 @@ function getAlgoithComponent(
   }
 }
 
-function getAlgoithFileExtension(fileUrl: string): string {
+function getAlgorithmFileExtension(fileUrl: string): string {
   const splitedFileUrl = fileUrl.split('.')
   return splitedFileUrl[splitedFileUrl.length - 1]
 }
@@ -203,7 +203,6 @@ export function transformPublishAlgorithmFormToMetadata(
     author,
     description,
     tags,
-    dockerImage,
     image,
     containerTag,
     entrypoint,
@@ -214,12 +213,12 @@ export function transformPublishAlgorithmFormToMetadata(
 ): MetadataMarket {
   const currentTime = toStringNoMS(new Date())
   const fileUrl = typeof files !== 'string' && files[0].url
-  const algorithmLanguace = getAlgoithFileExtension(fileUrl)
-  const algorithm = getAlgoithComponent(
+  const algorithmLanguage = getAlgorithmFileExtension(fileUrl)
+  const algorithm = getAlgorithmComponent(
     image,
     containerTag,
     entrypoint,
-    algorithmLanguace
+    algorithmLanguage
   )
   const metadata: MetadataMarket = {
     main: {
@@ -230,7 +229,7 @@ export function transformPublishAlgorithmFormToMetadata(
       dateCreated: ddo ? ddo.created : currentTime,
       files: typeof files !== 'string' && files,
       license: 'https://market.oceanprotocol.com/terms',
-      algorithm: algorithm
+      algorithm
     },
     additionalInformation: {
       ...AssetModel.additionalInformation,
@@ -242,29 +241,3 @@ export function transformPublishAlgorithmFormToMetadata(
 
   return metadata
 }
-
-function idToName(id: number): string {
-  switch (id) {
-    case 1:
-      return 'eth'
-    case 137:
-      return 'polygon'
-    case 3:
-      return 'ropsten'
-    case 4:
-      return 'rinkeby'
-    case 1287:
-      return 'moonbase'
-    default:
-      return 'eth'
-  }
-}
-
-export function mapChainIdsToNetworkNames(chainIds: number[]): string[] {
-  const networkNames: string[] = []
-  for (let i = 0; i < chainIds.length; i++) {
-    const networkName = idToName(chainIds[i])
-    networkNames.push(networkName)
-  }
-  return networkNames
-}

From 6d7ca84056da8e2ceeb64e59f5c683bd71c73200 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Fri, 3 Sep 2021 14:50:09 +0200
Subject: [PATCH 22/31] published spacing tweaks, search filters renaming

---
 src/components/atoms/Copy.module.css             |  2 +-
 .../Profile/History/PublishedList.module.css     |  7 +++++++
 .../pages/Profile/History/PublishedList.tsx      | 11 +++++++----
 ...lterService.module.css => Filters.module.css} |  4 ----
 .../Search/{filterService.tsx => Filters.tsx}    | 16 ++++++++++++----
 src/components/templates/Search/index.tsx        |  6 +++---
 6 files changed, 30 insertions(+), 16 deletions(-)
 create mode 100644 src/components/pages/Profile/History/PublishedList.module.css
 rename src/components/templates/Search/{filterService.module.css => Filters.module.css} (94%)
 rename src/components/templates/Search/{filterService.tsx => Filters.tsx} (93%)

diff --git a/src/components/atoms/Copy.module.css b/src/components/atoms/Copy.module.css
index ebc157ee4..4ba29b771 100644
--- a/src/components/atoms/Copy.module.css
+++ b/src/components/atoms/Copy.module.css
@@ -29,7 +29,7 @@
   content: 'Copied!';
   position: absolute;
   top: -150%;
-  left: -100%;
+  left: -140%;
   font-size: var(--font-size-mini);
   color: var(--brand-alert-green);
 }
diff --git a/src/components/pages/Profile/History/PublishedList.module.css b/src/components/pages/Profile/History/PublishedList.module.css
new file mode 100644
index 000000000..4ef16e734
--- /dev/null
+++ b/src/components/pages/Profile/History/PublishedList.module.css
@@ -0,0 +1,7 @@
+.filters {
+  margin-top: -1rem;
+}
+
+.assets {
+  margin-top: calc(var(--spacer) / 3);
+}
diff --git a/src/components/pages/Profile/History/PublishedList.tsx b/src/components/pages/Profile/History/PublishedList.tsx
index da7c42c6a..767c0debc 100644
--- a/src/components/pages/Profile/History/PublishedList.tsx
+++ b/src/components/pages/Profile/History/PublishedList.tsx
@@ -7,9 +7,10 @@ import {
   queryMetadata,
   transformChainIdsListToQuery
 } from '../../../../utils/aquarius'
-import ServiceFilter from '../../../templates/Search/filterService'
+import Filters from '../../../templates/Search/Filters'
 import { useSiteMetadata } from '../../../../hooks/useSiteMetadata'
 import { useUserPreferences } from '../../../../providers/UserPreferences'
+import styles from './PublishedList.module.css'
 
 export default function PublishedList({
   accountId
@@ -57,11 +58,12 @@ export default function PublishedList({
   }, [accountId, page, appConfig.metadataCacheUri, chainIds, service])
 
   return accountId ? (
-    <div>
-      <ServiceFilter
+    <>
+      <Filters
         serviceType={service}
         setServiceType={setServiceType}
         isSearch={false}
+        className={styles.filters}
       />
       <AssetList
         assets={queryResult?.results}
@@ -72,8 +74,9 @@ export default function PublishedList({
         onPageChange={(newPage) => {
           setPage(newPage)
         }}
+        className={styles.assets}
       />
-    </div>
+    </>
   ) : (
     <div>Please connect your Web3 wallet.</div>
   )
diff --git a/src/components/templates/Search/filterService.module.css b/src/components/templates/Search/Filters.module.css
similarity index 94%
rename from src/components/templates/Search/filterService.module.css
rename to src/components/templates/Search/Filters.module.css
index 7417f7983..0b65a3751 100644
--- a/src/components/templates/Search/filterService.module.css
+++ b/src/components/templates/Search/Filters.module.css
@@ -43,10 +43,6 @@ button.filter,
   color: var(--background-body);
 }
 
-.filterList:first-of-type {
-  margin-bottom: calc(var(--spacer) / 6);
-}
-
 .showClear:hover {
   display: inline-flex;
   color: var(--color-primary);
diff --git a/src/components/templates/Search/filterService.tsx b/src/components/templates/Search/Filters.tsx
similarity index 93%
rename from src/components/templates/Search/filterService.tsx
rename to src/components/templates/Search/Filters.tsx
index 888996be7..cd6e15a09 100644
--- a/src/components/templates/Search/filterService.tsx
+++ b/src/components/templates/Search/Filters.tsx
@@ -1,9 +1,9 @@
 import React, { ReactElement, useState } from 'react'
 import { useNavigate } from '@reach/router'
-import styles from './filterService.module.css'
 import classNames from 'classnames/bind'
 import { addExistingParamsToUrl, FilterByTypeOptions } from './utils'
 import Button from '../../atoms/Button'
+import styles from './Filters.module.css'
 
 const cx = classNames.bind(styles)
 
@@ -14,14 +14,16 @@ const serviceFilterItems = [
   { display: 'algorithms', value: FilterByTypeOptions.Algorithm }
 ]
 
-export default function FilterPrice({
+export default function Filters({
   serviceType,
   setServiceType,
-  isSearch
+  isSearch,
+  className
 }: {
   serviceType: string
   setServiceType: React.Dispatch<React.SetStateAction<string>>
   isSearch: boolean
+  className?: string
 }): ReactElement {
   const navigate = useNavigate()
   const [serviceSelections, setServiceSelections] = useState<string[]>([])
@@ -72,11 +74,17 @@ export default function FilterPrice({
     }
   }
 
+  const styleClasses = cx({
+    filterList: true,
+    [className]: className
+  })
+
   return (
-    <div className={styles.filterList}>
+    <div className={styleClasses}>
       {serviceFilterItems.map((e, index) => {
         const isServiceSelected =
           e.value === serviceType || serviceSelections.includes(e.value)
+
         const selectFilter = cx({
           [styles.selected]: isServiceSelected,
           [styles.filter]: true
diff --git a/src/components/templates/Search/index.tsx b/src/components/templates/Search/index.tsx
index fc11f2218..bcf509d39 100644
--- a/src/components/templates/Search/index.tsx
+++ b/src/components/templates/Search/index.tsx
@@ -2,15 +2,15 @@ import React, { ReactElement, useState, useEffect } from 'react'
 import Permission from '../../organisms/Permission'
 import { QueryResult } from '@oceanprotocol/lib/dist/node/metadatacache/MetadataCache'
 import AssetList from '../../organisms/AssetList'
-import styles from './index.module.css'
 import queryString from 'query-string'
-import ServiceFilter from './filterService'
+import Filters from './Filters'
 import Sort from './sort'
 import { getResults } from './utils'
 import { navigate } from 'gatsby'
 import { updateQueryStringParameter } from '../../../utils'
 import { useSiteMetadata } from '../../../hooks/useSiteMetadata'
 import { useUserPreferences } from '../../../providers/UserPreferences'
+import styles from './index.module.css'
 
 export default function SearchPage({
   location,
@@ -72,7 +72,7 @@ export default function SearchPage({
       <>
         <div className={styles.search}>
           <div className={styles.row}>
-            <ServiceFilter
+            <Filters
               serviceType={service}
               setServiceType={setServiceType}
               isSearch

From 4def756c8d85b57594f118f2f07590d4d7fd3a1e Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Fri, 3 Sep 2021 14:55:53 +0200
Subject: [PATCH 23/31] fix pool transactions setup title, kinda

---
 src/components/molecules/PoolTransactions/Title.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/molecules/PoolTransactions/Title.tsx b/src/components/molecules/PoolTransactions/Title.tsx
index 8b5ea065c..8535a44df 100644
--- a/src/components/molecules/PoolTransactions/Title.tsx
+++ b/src/components/molecules/PoolTransactions/Title.tsx
@@ -37,10 +37,10 @@ async function getTitle(row: PoolTransaction, locale: string) {
       )[0]
       const secondTokenSymbol = secondToken?.poolToken.symbol
       title += `Create pool with ${formatPrice(
-        Math.abs(firstToken.value).toString(),
+        Math.abs(firstToken?.value).toString(),
         locale
       )}${firstTokenSymbol} and ${formatPrice(
-        Math.abs(secondToken.value).toString(),
+        Math.abs(secondToken?.value).toString(),
         locale
       )}${secondTokenSymbol}`
       break

From f3c5812ef1453d56f428b8554c1dfe630431c8df Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Fri, 3 Sep 2021 15:06:21 +0200
Subject: [PATCH 24/31] file reorg

---
 .../pages/Profile/{ => Header}/Account.module.css    |  0
 .../pages/Profile/{ => Header}/Account.tsx           | 12 ++++++------
 .../Profile/{ => Header}/PublisherLinks.module.css   |  2 +-
 .../pages/Profile/{ => Header}/PublisherLinks.tsx    |  4 ++--
 .../pages/Profile/{ => Header}/Stats.module.css      |  0
 src/components/pages/Profile/{ => Header}/Stats.tsx  | 10 +++++-----
 .../{Header.module.css => Header/index.module.css}   |  2 +-
 .../pages/Profile/{Header.tsx => Header/index.tsx}   | 10 +++++-----
 8 files changed, 20 insertions(+), 20 deletions(-)
 rename src/components/pages/Profile/{ => Header}/Account.module.css (100%)
 rename src/components/pages/Profile/{ => Header}/Account.tsx (81%)
 rename src/components/pages/Profile/{ => Header}/PublisherLinks.module.css (81%)
 rename src/components/pages/Profile/{ => Header}/PublisherLinks.tsx (88%)
 rename src/components/pages/Profile/{ => Header}/Stats.module.css (100%)
 rename src/components/pages/Profile/{ => Header}/Stats.tsx (91%)
 rename src/components/pages/Profile/{Header.module.css => Header/index.module.css} (95%)
 rename src/components/pages/Profile/{Header.tsx => Header/index.tsx} (91%)

diff --git a/src/components/pages/Profile/Account.module.css b/src/components/pages/Profile/Header/Account.module.css
similarity index 100%
rename from src/components/pages/Profile/Account.module.css
rename to src/components/pages/Profile/Header/Account.module.css
diff --git a/src/components/pages/Profile/Account.tsx b/src/components/pages/Profile/Header/Account.tsx
similarity index 81%
rename from src/components/pages/Profile/Account.tsx
rename to src/components/pages/Profile/Header/Account.tsx
index 6928bfe2d..bcc1abd76 100644
--- a/src/components/pages/Profile/Account.tsx
+++ b/src/components/pages/Profile/Header/Account.tsx
@@ -1,12 +1,12 @@
 import React, { ReactElement } from 'react'
-import { useUserPreferences } from '../../../providers/UserPreferences'
-import { accountTruncate } from '../../../utils/web3'
-import ExplorerLink from '../../atoms/ExplorerLink'
-import NetworkName from '../../atoms/NetworkName'
+import { useUserPreferences } from '../../../../providers/UserPreferences'
+import { accountTruncate } from '../../../../utils/web3'
+import ExplorerLink from '../../../atoms/ExplorerLink'
+import NetworkName from '../../../atoms/NetworkName'
 import jellyfish from '@oceanprotocol/art/creatures/jellyfish/jellyfish-grid.svg'
+import Copy from '../../../atoms/Copy'
+import Blockies from '../../../atoms/Blockies'
 import styles from './Account.module.css'
-import Copy from '../../atoms/Copy'
-import Blockies from '../../atoms/Blockies'
 
 export default function Account({
   name,
diff --git a/src/components/pages/Profile/PublisherLinks.module.css b/src/components/pages/Profile/Header/PublisherLinks.module.css
similarity index 81%
rename from src/components/pages/Profile/PublisherLinks.module.css
rename to src/components/pages/Profile/Header/PublisherLinks.module.css
index c24bb9f98..7df4ca3d1 100644
--- a/src/components/pages/Profile/PublisherLinks.module.css
+++ b/src/components/pages/Profile/Header/PublisherLinks.module.css
@@ -24,5 +24,5 @@
 }
 
 .linksExternal {
-  composes: linksExternal from '../../atoms/Publisher/index.module.css';
+  composes: linksExternal from '../../../atoms/Publisher/index.module.css';
 }
diff --git a/src/components/pages/Profile/PublisherLinks.tsx b/src/components/pages/Profile/Header/PublisherLinks.tsx
similarity index 88%
rename from src/components/pages/Profile/PublisherLinks.tsx
rename to src/components/pages/Profile/Header/PublisherLinks.tsx
index 40b422a62..01d6028d7 100644
--- a/src/components/pages/Profile/PublisherLinks.tsx
+++ b/src/components/pages/Profile/Header/PublisherLinks.tsx
@@ -1,7 +1,7 @@
 import React, { ReactElement } from 'react'
 import classNames from 'classnames/bind'
-import { ProfileLink } from '../../../models/Profile'
-import { ReactComponent as External } from '../../../images/external.svg'
+import { ProfileLink } from '../../../../models/Profile'
+import { ReactComponent as External } from '../../../../images/external.svg'
 import styles from './PublisherLinks.module.css'
 
 const cx = classNames.bind(styles)
diff --git a/src/components/pages/Profile/Stats.module.css b/src/components/pages/Profile/Header/Stats.module.css
similarity index 100%
rename from src/components/pages/Profile/Stats.module.css
rename to src/components/pages/Profile/Header/Stats.module.css
diff --git a/src/components/pages/Profile/Stats.tsx b/src/components/pages/Profile/Header/Stats.tsx
similarity index 91%
rename from src/components/pages/Profile/Stats.tsx
rename to src/components/pages/Profile/Header/Stats.tsx
index ebf25df0d..8f4604a63 100644
--- a/src/components/pages/Profile/Stats.tsx
+++ b/src/components/pages/Profile/Header/Stats.tsx
@@ -1,20 +1,20 @@
 import { DDO, Logger } from '@oceanprotocol/lib'
 import React, { useEffect, useState } from 'react'
 import { ReactElement } from 'react-markdown'
-import { useUserPreferences } from '../../../providers/UserPreferences'
+import { useUserPreferences } from '../../../../providers/UserPreferences'
 import {
   getAccountLiquidityInOwnAssets,
   getAccountNumberOfOrders,
   getAssetsBestPrices,
   UserTVL
-} from '../../../utils/subgraph'
-import Conversion from '../../atoms/Price/Conversion'
-import NumberUnit from '../../molecules/NumberUnit'
+} from '../../../../utils/subgraph'
+import Conversion from '../../../atoms/Price/Conversion'
+import NumberUnit from '../../../molecules/NumberUnit'
 import styles from './Stats.module.css'
 import {
   queryMetadata,
   transformChainIdsListToQuery
-} from '../../../utils/aquarius'
+} from '../../../../utils/aquarius'
 import axios from 'axios'
 
 export default function Stats({
diff --git a/src/components/pages/Profile/Header.module.css b/src/components/pages/Profile/Header/index.module.css
similarity index 95%
rename from src/components/pages/Profile/Header.module.css
rename to src/components/pages/Profile/Header/index.module.css
index 98bf59bca..c9c8a33c3 100644
--- a/src/components/pages/Profile/Header.module.css
+++ b/src/components/pages/Profile/Header/index.module.css
@@ -1,5 +1,5 @@
 .grid {
-  composes: box from '../../atoms/Box.module.css';
+  composes: box from '../../../atoms/Box.module.css';
   background: var(--background-body-transparent);
   backdrop-filter: blur(3px);
   position: relative;
diff --git a/src/components/pages/Profile/Header.tsx b/src/components/pages/Profile/Header/index.tsx
similarity index 91%
rename from src/components/pages/Profile/Header.tsx
rename to src/components/pages/Profile/Header/index.tsx
index 59105744e..eaf16c411 100644
--- a/src/components/pages/Profile/Header.tsx
+++ b/src/components/pages/Profile/Header/index.tsx
@@ -1,13 +1,13 @@
 import React, { ReactElement, useEffect, useState } from 'react'
-import get3BoxProfile from '../../../utils/profile'
-import { Profile } from '../../../models/Profile'
-import { accountTruncate } from '../../../utils/web3'
+import get3BoxProfile from '../../../../utils/profile'
+import { Profile } from '../../../../models/Profile'
+import { accountTruncate } from '../../../../utils/web3'
 import axios from 'axios'
 import PublisherLinks from './PublisherLinks'
-import Markdown from '../../atoms/Markdown'
+import Markdown from '../../../atoms/Markdown'
 import Stats from './Stats'
 import Account from './Account'
-import styles from './Header.module.css'
+import styles from './index.module.css'
 
 const isDescriptionTextClamped = () => {
   const el = document.getElementById('description')

From 852e71f17ae40d3c769aa39dce956fae50320ea7 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Mon, 6 Sep 2021 12:31:57 +0200
Subject: [PATCH 25/31] fix pool shares network switching, always refetch
 everything

---
 .../pages/Profile/History/PoolShares.tsx      | 59 ++++++++-----------
 1 file changed, 23 insertions(+), 36 deletions(-)

diff --git a/src/components/pages/Profile/History/PoolShares.tsx b/src/components/pages/Profile/History/PoolShares.tsx
index 58e70f4a8..5963d22cf 100644
--- a/src/components/pages/Profile/History/PoolShares.tsx
+++ b/src/components/pages/Profile/History/PoolShares.tsx
@@ -205,54 +205,41 @@ export default function PoolShares({
 }): ReactElement {
   const [assets, setAssets] = useState<Asset[]>()
   const [loading, setLoading] = useState<boolean>(false)
-  const [data, setData] = useState<PoolShare[]>()
   const [dataFetchInterval, setDataFetchInterval] = useState<NodeJS.Timeout>()
   const { chainIds } = useUserPreferences()
 
-  const refetchPoolSharesData = useCallback(() => {
-    if (dataFetchInterval) return
+  const fetchPoolSharesData = useCallback(async () => {
+    try {
+      setLoading(true)
+      const data = await getPoolSharesData(accountId, chainIds)
+      const newAssets = await getPoolSharesAssets(data)
 
-    setDataFetchInterval(
-      setInterval(async () => {
-        const newData = await getPoolSharesData(accountId, chainIds)
-        setData(newData)
-      }, REFETCH_INTERVAL)
-    )
-  }, [dataFetchInterval, chainIds, accountId])
-
-  useEffect(() => {
-    return () => {
-      clearInterval(dataFetchInterval)
+      if (JSON.stringify(assets) !== JSON.stringify(newAssets)) {
+        setAssets(newAssets)
+      }
+    } catch (error) {
+      console.error('Error fetching pool shares: ', error.message)
+    } finally {
+      setLoading(false)
     }
-  }, [dataFetchInterval])
+  }, [accountId, assets, chainIds])
 
   useEffect(() => {
     async function init() {
-      setLoading(true)
-      const newData = await getPoolSharesData(accountId, chainIds)
-      setData(newData)
-      refetchPoolSharesData()
+      await fetchPoolSharesData()
+
+      if (dataFetchInterval) return
+      const interval = setInterval(async () => {
+        await fetchPoolSharesData()
+      }, REFETCH_INTERVAL)
+      setDataFetchInterval(interval)
     }
     init()
-  }, [accountId, chainIds, refetchPoolSharesData])
 
-  useEffect(() => {
-    if (!data) return
-
-    async function getShares() {
-      try {
-        const newAssets = await getPoolSharesAssets(data)
-        if (JSON.stringify(assets) !== JSON.stringify(newAssets)) {
-          setAssets(newAssets)
-        }
-      } catch (error) {
-        console.error('Error fetching pool shares: ', error.message)
-      } finally {
-        setLoading(false)
-      }
+    return () => {
+      clearInterval(dataFetchInterval)
     }
-    getShares()
-  }, [accountId, chainIds, data, assets])
+  }, [dataFetchInterval, fetchPoolSharesData])
 
   return accountId ? (
     <Table

From c9f56e9a4633ac800e14ce5629d16e3cbeafa4d9 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Mon, 6 Sep 2021 12:38:14 +0200
Subject: [PATCH 26/31] no loading spinner on refetch pool shares

---
 src/components/pages/Profile/Header/Stats.tsx       | 2 +-
 src/components/pages/Profile/History/PoolShares.tsx | 5 ++---
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/components/pages/Profile/Header/Stats.tsx b/src/components/pages/Profile/Header/Stats.tsx
index 8f4604a63..92aa9961c 100644
--- a/src/components/pages/Profile/Header/Stats.tsx
+++ b/src/components/pages/Profile/Header/Stats.tsx
@@ -88,7 +88,7 @@ export default function Stats({
       }
     }
     getAccountTVL()
-  }, [publishedAssets])
+  }, [publishedAssets, accountId, chainIds])
 
   return (
     <div className={styles.stats}>
diff --git a/src/components/pages/Profile/History/PoolShares.tsx b/src/components/pages/Profile/History/PoolShares.tsx
index 5963d22cf..48d6e2945 100644
--- a/src/components/pages/Profile/History/PoolShares.tsx
+++ b/src/components/pages/Profile/History/PoolShares.tsx
@@ -210,7 +210,6 @@ export default function PoolShares({
 
   const fetchPoolSharesData = useCallback(async () => {
     try {
-      setLoading(true)
       const data = await getPoolSharesData(accountId, chainIds)
       const newAssets = await getPoolSharesAssets(data)
 
@@ -219,14 +218,14 @@ export default function PoolShares({
       }
     } catch (error) {
       console.error('Error fetching pool shares: ', error.message)
-    } finally {
-      setLoading(false)
     }
   }, [accountId, assets, chainIds])
 
   useEffect(() => {
     async function init() {
+      setLoading(true)
       await fetchPoolSharesData()
+      setLoading(false)
 
       if (dataFetchInterval) return
       const interval = setInterval(async () => {

From 5a336bd6998e7a8d0ca8ff5a87676d0a716f7924 Mon Sep 17 00:00:00 2001
From: Bogdan Fazakas <bogdan.fazakas@gmail.com>
Date: Tue, 7 Sep 2021 13:11:13 +0300
Subject: [PATCH 27/31] Fix Profile sold value (#840)

* update profile sold value logic

* remove commented block
---
 src/components/pages/Profile/Header/Stats.tsx | 11 +++++------
 src/utils/subgraph.ts                         | 19 +++++++++++++------
 2 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/src/components/pages/Profile/Header/Stats.tsx b/src/components/pages/Profile/Header/Stats.tsx
index 92aa9961c..c4e5c842e 100644
--- a/src/components/pages/Profile/Header/Stats.tsx
+++ b/src/components/pages/Profile/Header/Stats.tsx
@@ -52,17 +52,16 @@ export default function Stats({
         const result = await queryMetadata(queryPublishedAssets, source.token)
         setPublishedAssets(result.results)
         setNumberOfAssets(result.totalResults)
+        const nrOrders = await getAccountNumberOfOrders(
+          result.results,
+          chainIds
+        )
+        setSold(nrOrders)
       } catch (error) {
         Logger.error(error.message)
       }
     }
     getPublished()
-
-    async function getAccountSoldValue() {
-      const nrOrders = await getAccountNumberOfOrders(accountId, chainIds)
-      setSold(nrOrders)
-    }
-    getAccountSoldValue()
   }, [accountId, chainIds])
 
   useEffect(() => {
diff --git a/src/utils/subgraph.ts b/src/utils/subgraph.ts
index 0e92640e9..182245347 100644
--- a/src/utils/subgraph.ts
+++ b/src/utils/subgraph.ts
@@ -167,15 +167,18 @@ const HighestLiquidityAssets = gql`
 `
 
 const TotalAccountOrders = gql`
-  query TotalAccountOrders($payer: String) {
-    tokenOrders(orderBy: id, where: { payer: $payer }) {
-      id
+  query TotalAccountOrders($datatokenId_in: [String!]) {
+    tokenOrders(where: { datatokenId_in: $datatokenId_in }) {
       payer {
         id
       }
+      datatokenId {
+        id
+      }
     }
   }
 `
+
 const UserSharesQuery = gql`
   query UserSharesQuery($user: String, $pools: [String!]) {
     poolShares(where: { userAddress: $user, poolId_in: $pools }) {
@@ -564,11 +567,15 @@ export async function getHighestLiquidityDIDs(
 }
 
 export async function getAccountNumberOfOrders(
-  accountId: string,
+  assets: DDO[],
   chainIds: number[]
 ): Promise<number> {
+  const datatokens: string[] = []
+  assets.forEach((ddo) => {
+    datatokens.push(ddo?.dataToken?.toLowerCase())
+  })
   const queryVariables = {
-    payer: accountId.toLowerCase()
+    datatokenId_in: datatokens
   }
   const results = await fetchDataForMultipleChains(
     TotalAccountOrders,
@@ -577,7 +584,7 @@ export async function getAccountNumberOfOrders(
   )
   let numberOfOrders = 0
   for (const result of results) {
-    numberOfOrders += result.tokenOrders.length
+    numberOfOrders += result?.tokenOrders?.length
   }
   return numberOfOrders
 }

From 032606e61c74e9d5b7eca415c5fa62f8d27eaa04 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Mon, 13 Sep 2021 16:39:32 +0200
Subject: [PATCH 28/31] add total user liquidity, new Profile provider (#841)

* label renaming, add total user liquidity

* new useProfile provider

* centralize pool shares fetching

* add some assets fetching to profile provider

* move 3box profile fetching, check passed accountId

* cancel token fixes

* remove publisher on published assets list

* more cancel token fixes

* prevent asset name double fetching in pool shares

* prevent asset name double fetching in downloads

* prevent asset name double fetching in pool transactions

* more cancel token fixes

* refetch crash fix

* another pool shares refetch fix

* pool transactions data flow refactor

* Add total downloads, speed up downloads fetching (#849)

* add total downloads

* replace multiple retrieveDDO with one single request

* getAssetsFromDidList() helper

* fix mixed up timestamps

* data structure based on tokenOrders

* add logging

* add tooltip to downloads, small NumberUnit refactor

* safeguard against passed empty didList

* deal with plural/singular in labels
---
 src/components/atoms/Tooltip.module.css       |   4 +
 src/components/atoms/Tooltip.tsx              |   1 +
 src/components/molecules/AssetListTitle.tsx   |   3 +-
 src/components/molecules/AssetTeaser.tsx      |   8 +-
 src/components/molecules/Bookmarks.tsx        |  34 +-
 .../molecules/NumberUnit.module.css           |   7 +
 src/components/molecules/NumberUnit.tsx       |  45 ++-
 .../molecules/PoolTransactions/Title.tsx      |   1 +
 .../molecules/PoolTransactions/index.tsx      | 123 +++++---
 src/components/organisms/AssetList.tsx        |   5 +-
 .../pages/Profile/Header/Account.tsx          |  19 +-
 .../pages/Profile/Header/PublisherLinks.tsx   |   8 +-
 .../pages/Profile/Header/Stats.module.css     |   4 +-
 src/components/pages/Profile/Header/Stats.tsx | 108 ++++---
 src/components/pages/Profile/Header/index.tsx |  67 +---
 .../pages/Profile/History/Downloads.tsx       | 106 +------
 .../pages/Profile/History/PoolShares.tsx      | 116 +++----
 .../pages/Profile/History/PublishedList.tsx   |  45 ++-
 src/pages/profile/index.tsx                   |   5 +-
 src/providers/Profile.tsx                     | 291 ++++++++++++++++++
 src/utils/aquarius.ts                         | 137 ++++++++-
 src/utils/subgraph.ts                         |  98 +++++-
 22 files changed, 800 insertions(+), 435 deletions(-)
 create mode 100644 src/providers/Profile.tsx

diff --git a/src/components/atoms/Tooltip.module.css b/src/components/atoms/Tooltip.module.css
index 97bcbda11..131a7cea5 100644
--- a/src/components/atoms/Tooltip.module.css
+++ b/src/components/atoms/Tooltip.module.css
@@ -9,6 +9,10 @@
   font-size: var(--font-size-small);
 }
 
+.content p {
+  margin: 0;
+}
+
 .icon {
   width: 1em;
   height: 1em;
diff --git a/src/components/atoms/Tooltip.tsx b/src/components/atoms/Tooltip.tsx
index 1719ff0a0..08a5039a2 100644
--- a/src/components/atoms/Tooltip.tsx
+++ b/src/components/atoms/Tooltip.tsx
@@ -5,6 +5,7 @@ import { useSpring, animated } from 'react-spring'
 import styles from './Tooltip.module.css'
 import { ReactComponent as Info } from '../../images/info.svg'
 import { Placement } from 'tippy.js'
+import Markdown from './Markdown'
 
 const cx = classNames.bind(styles)
 
diff --git a/src/components/molecules/AssetListTitle.tsx b/src/components/molecules/AssetListTitle.tsx
index 9fb6a7535..fe6c67bfe 100644
--- a/src/components/molecules/AssetListTitle.tsx
+++ b/src/components/molecules/AssetListTitle.tsx
@@ -1,5 +1,4 @@
 import { DDO } from '@oceanprotocol/lib'
-import { useOcean } from '../../providers/Ocean'
 import { Link } from 'gatsby'
 import React, { ReactElement, useEffect, useState } from 'react'
 import { getAssetsNames } from '../../utils/aquarius'
@@ -43,7 +42,7 @@ export default function AssetListTitle({
 
   return (
     <h3 className={styles.title}>
-      <Link to={`/asset/${did || ddo.id}`}>{assetTitle}</Link>
+      <Link to={`/asset/${did || ddo?.id}`}>{assetTitle}</Link>
     </h3>
   )
 }
diff --git a/src/components/molecules/AssetTeaser.tsx b/src/components/molecules/AssetTeaser.tsx
index 2543e1ba1..b1b249642 100644
--- a/src/components/molecules/AssetTeaser.tsx
+++ b/src/components/molecules/AssetTeaser.tsx
@@ -13,11 +13,13 @@ import { BestPrice } from '../../models/BestPrice'
 declare type AssetTeaserProps = {
   ddo: DDO
   price: BestPrice
+  noPublisher?: boolean
 }
 
 const AssetTeaser: React.FC<AssetTeaserProps> = ({
   ddo,
-  price
+  price,
+  noPublisher
 }: AssetTeaserProps) => {
   const { attributes } = ddo.findServiceByType('metadata')
   const { name, type } = attributes.main
@@ -34,7 +36,9 @@ const AssetTeaser: React.FC<AssetTeaserProps> = ({
           <Dotdotdot clamp={3}>
             <h1 className={styles.title}>{name}</h1>
           </Dotdotdot>
-          <Publisher account={owner} minimal className={styles.publisher} />
+          {!noPublisher && (
+            <Publisher account={owner} minimal className={styles.publisher} />
+          )}
         </header>
 
         <AssetType
diff --git a/src/components/molecules/Bookmarks.tsx b/src/components/molecules/Bookmarks.tsx
index e2a882560..527a62e0a 100644
--- a/src/components/molecules/Bookmarks.tsx
+++ b/src/components/molecules/Bookmarks.tsx
@@ -5,10 +5,7 @@ import { Logger } from '@oceanprotocol/lib'
 import Price from '../atoms/Price'
 import Tooltip from '../atoms/Tooltip'
 import AssetTitle from './AssetListTitle'
-import {
-  queryMetadata,
-  transformChainIdsListToQuery
-} from '../../utils/aquarius'
+import { getAssetsFromDidList } from '../../utils/aquarius'
 import { getAssetsBestPrices, AssetListPrices } from '../../utils/subgraph'
 import axios, { CancelToken } from 'axios'
 import { useSiteMetadata } from '../../hooks/useSiteMetadata'
@@ -18,31 +15,8 @@ async function getAssetsBookmarked(
   chainIds: number[],
   cancelToken: CancelToken
 ) {
-  const searchDids = JSON.stringify(bookmarks)
-    .replace(/,/g, ' ')
-    .replace(/"/g, '')
-    .replace(/(\[|\])/g, '')
-    // for whatever reason ddo.id is not searchable, so use ddo.dataToken instead
-    .replace(/(did:op:)/g, '0x')
-
-  const queryBookmarks = {
-    page: 1,
-    offset: 100,
-    query: {
-      query_string: {
-        query: `(${searchDids}) AND (${transformChainIdsListToQuery(
-          chainIds
-        )})`,
-        fields: ['dataToken'],
-        default_operator: 'OR'
-      }
-    },
-    sort: { created: -1 }
-  }
-
   try {
-    const result = await queryMetadata(queryBookmarks, cancelToken)
-
+    const result = await getAssetsFromDidList(bookmarks, chainIds, cancelToken)
     return result
   } catch (error) {
     Logger.error(error.message)
@@ -88,7 +62,7 @@ export default function Bookmarks(): ReactElement {
   const { chainIds } = useUserPreferences()
 
   useEffect(() => {
-    if (!appConfig.metadataCacheUri || bookmarks === []) return
+    if (!appConfig?.metadataCacheUri || bookmarks === []) return
 
     const source = axios.CancelToken.source()
 
@@ -121,7 +95,7 @@ export default function Bookmarks(): ReactElement {
     return () => {
       source.cancel()
     }
-  }, [bookmarks, chainIds])
+  }, [bookmarks, chainIds, appConfig?.metadataCacheUri])
 
   return (
     <Table
diff --git a/src/components/molecules/NumberUnit.module.css b/src/components/molecules/NumberUnit.module.css
index 13fb622f4..67dd67b9b 100644
--- a/src/components/molecules/NumberUnit.module.css
+++ b/src/components/molecules/NumberUnit.module.css
@@ -3,6 +3,7 @@
   font-weight: var(--font-weight-bold);
   font-size: var(--font-size-h4);
   color: var(--font-color-heading);
+  margin-left: 0;
 }
 
 .number {
@@ -46,3 +47,9 @@
   background: var(--brand-white);
   border: 0.1rem solid var(--brand-pink);
 }
+
+.tooltip svg {
+  width: 0.8em !important;
+  height: 0.8em !important;
+  margin-left: 0;
+}
diff --git a/src/components/molecules/NumberUnit.tsx b/src/components/molecules/NumberUnit.tsx
index 72ffc7daa..0198df079 100644
--- a/src/components/molecules/NumberUnit.tsx
+++ b/src/components/molecules/NumberUnit.tsx
@@ -1,45 +1,38 @@
 import React, { ReactElement } from 'react'
+import Markdown from '../atoms/Markdown'
+import Tooltip from '../atoms/Tooltip'
 import styles from './NumberUnit.module.css'
 
-interface NumberInnerProps {
+interface NumberUnitProps {
   label: string
   value: number | string | Element | ReactElement
   small?: boolean
   icon?: Element | ReactElement
+  tooltip?: string
 }
 
-interface NumberUnitProps extends NumberInnerProps {
-  link?: string
-  linkTooltip?: string
-}
-
-const NumberInner = ({ small, label, value, icon }: NumberInnerProps) => (
-  <>
-    <div className={`${styles.number} ${small && styles.small}`}>
-      {icon && icon}
-      {value}
-    </div>
-    <span className={styles.label}>{label}</span>
-  </>
-)
-
 export default function NumberUnit({
-  link,
-  linkTooltip,
   small,
   label,
   value,
-  icon
+  icon,
+  tooltip
 }: NumberUnitProps): ReactElement {
   return (
     <div className={styles.unit}>
-      {link ? (
-        <a href={link} title={linkTooltip}>
-          <NumberInner small={small} label={label} value={value} icon={icon} />
-        </a>
-      ) : (
-        <NumberInner small={small} label={label} value={value} icon={icon} />
-      )}
+      <div className={`${styles.number} ${small && styles.small}`}>
+        {icon && icon}
+        {value}
+      </div>
+      <span className={styles.label}>
+        {label}{' '}
+        {tooltip && (
+          <Tooltip
+            content={<Markdown text={tooltip} />}
+            className={styles.tooltip}
+          />
+        )}
+      </span>
     </div>
   )
 }
diff --git a/src/components/molecules/PoolTransactions/Title.tsx b/src/components/molecules/PoolTransactions/Title.tsx
index 8535a44df..bd9fcf5a7 100644
--- a/src/components/molecules/PoolTransactions/Title.tsx
+++ b/src/components/molecules/PoolTransactions/Title.tsx
@@ -68,6 +68,7 @@ export default function Title({ row }: { row: PoolTransaction }): ReactElement {
 
   useEffect(() => {
     if (!locale || !row) return
+
     async function init() {
       const title = await getTitle(row, locale)
       setTitle(title)
diff --git a/src/components/molecules/PoolTransactions/index.tsx b/src/components/molecules/PoolTransactions/index.tsx
index b3d11fe65..2ba87f53f 100644
--- a/src/components/molecules/PoolTransactions/index.tsx
+++ b/src/components/molecules/PoolTransactions/index.tsx
@@ -1,4 +1,4 @@
-import React, { ReactElement, useEffect, useState } from 'react'
+import React, { ReactElement, useCallback, useEffect, useState } from 'react'
 import Time from '../../atoms/Time'
 import Table from '../../atoms/Table'
 import AssetTitle from '../AssetListTitle'
@@ -10,9 +10,10 @@ import { fetchDataForMultipleChains } from '../../../utils/subgraph'
 import { useSiteMetadata } from '../../../hooks/useSiteMetadata'
 import NetworkName from '../../atoms/NetworkName'
 import { retrieveDDO } from '../../../utils/aquarius'
-import axios from 'axios'
+import axios, { CancelToken } from 'axios'
 import Title from './Title'
 import styles from './index.module.css'
+import { DDO, Logger } from '@oceanprotocol/lib'
 
 const REFETCH_INTERVAL = 20000
 
@@ -75,6 +76,7 @@ export interface Datatoken {
 
 export interface PoolTransaction extends TransactionHistoryPoolTransactions {
   networkId: number
+  ddo: DDO
 }
 
 const columns = [
@@ -87,11 +89,7 @@ const columns = [
   {
     name: 'Data Set',
     selector: function getAssetRow(row: PoolTransaction) {
-      const did = web3.utils
-        .toChecksumAddress(row.poolAddress.datatokenAddress)
-        .replace('0x', 'did:op:')
-
-      return <AssetTitle did={did} />
+      return <AssetTitle ddo={row.ddo} />
     }
   },
   {
@@ -131,14 +129,14 @@ export default function PoolTransactions({
   minimal?: boolean
   accountId: string
 }): ReactElement {
-  const [logs, setLogs] = useState<PoolTransaction[]>()
-  const [isLoading, setIsLoading] = useState<boolean>(false)
+  const [transactions, setTransactions] = useState<PoolTransaction[]>()
+  const [isLoading, setIsLoading] = useState<boolean>(true)
   const { chainIds } = useUserPreferences()
   const { appConfig } = useSiteMetadata()
   const [dataFetchInterval, setDataFetchInterval] = useState<NodeJS.Timeout>()
   const [data, setData] = useState<PoolTransaction[]>()
 
-  async function fetchPoolTransactionData() {
+  const getPoolTransactionData = useCallback(async () => {
     const variables = {
       user: accountId?.toLowerCase(),
       pool: poolAddress?.toLowerCase()
@@ -159,71 +157,94 @@ export default function PoolTransactions({
     if (JSON.stringify(data) !== JSON.stringify(transactions)) {
       setData(transactions)
     }
-  }
+  }, [accountId, chainIds, data, poolAddress, poolChainId])
 
-  function refetchPoolTransactions() {
-    if (!dataFetchInterval) {
-      setDataFetchInterval(
-        setInterval(function () {
-          fetchPoolTransactionData()
-        }, REFETCH_INTERVAL)
+  const getPoolTransactions = useCallback(
+    async (cancelToken: CancelToken) => {
+      if (!data) return
+
+      const poolTransactions: PoolTransaction[] = []
+
+      for (let i = 0; i < data.length; i++) {
+        const { datatokenAddress } = data[i].poolAddress
+        const did = web3.utils
+          .toChecksumAddress(datatokenAddress)
+          .replace('0x', 'did:op:')
+        const ddo = await retrieveDDO(did, cancelToken)
+        ddo &&
+          poolTransactions.push({
+            ...data[i],
+            networkId: ddo?.chainId,
+            ddo
+          })
+      }
+      const sortedTransactions = poolTransactions.sort(
+        (a, b) => b.timestamp - a.timestamp
       )
-    }
-  }
+      setTransactions(sortedTransactions)
+    },
+    [data]
+  )
 
+  //
+  // Get data, periodically
+  //
   useEffect(() => {
+    if (!appConfig?.metadataCacheUri) return
+
+    async function getTransactions() {
+      try {
+        await getPoolTransactionData()
+
+        if (dataFetchInterval) return
+        const interval = setInterval(async () => {
+          await getPoolTransactionData()
+        }, REFETCH_INTERVAL)
+        setDataFetchInterval(interval)
+      } catch (error) {
+        Logger.error('Error fetching pool transactions: ', error.message)
+      }
+    }
+    getTransactions()
+
     return () => {
       clearInterval(dataFetchInterval)
     }
-  }, [dataFetchInterval])
+  }, [getPoolTransactionData, dataFetchInterval, appConfig.metadataCacheUri])
 
+  //
+  // Transform to final transactions
+  //
   useEffect(() => {
-    if (!appConfig.metadataCacheUri) return
+    const cancelTokenSource = axios.CancelToken.source()
 
-    async function getTransactions() {
-      const poolTransactions: PoolTransaction[] = []
-      const source = axios.CancelToken.source()
+    async function transformData() {
       try {
         setIsLoading(true)
-
-        if (!data) {
-          await fetchPoolTransactionData()
-          return
-        }
-        const poolTransactionsData = data.map((obj) => ({ ...obj }))
-
-        for (let i = 0; i < poolTransactionsData.length; i++) {
-          const did = web3.utils
-            .toChecksumAddress(
-              poolTransactionsData[i].poolAddress.datatokenAddress
-            )
-            .replace('0x', 'did:op:')
-          const ddo = await retrieveDDO(did, source.token)
-          poolTransactionsData[i].networkId = ddo.chainId
-          poolTransactions.push(poolTransactionsData[i])
-        }
-        const sortedTransactions = poolTransactions.sort(
-          (a, b) => b.timestamp - a.timestamp
-        )
-        setLogs(sortedTransactions)
-        refetchPoolTransactions()
+        await getPoolTransactions(cancelTokenSource.token)
       } catch (error) {
-        console.error('Error fetching pool transactions: ', error.message)
+        Logger.error('Error fetching pool transactions: ', error.message)
       } finally {
         setIsLoading(false)
       }
     }
-    getTransactions()
-  }, [accountId, chainIds, appConfig.metadataCacheUri, poolAddress, data])
+    transformData()
+
+    return () => {
+      cancelTokenSource.cancel()
+    }
+  }, [getPoolTransactions])
 
   return accountId ? (
     <Table
       columns={minimal ? columnsMinimal : columns}
-      data={logs}
+      data={transactions}
       isLoading={isLoading}
       noTableHead={minimal}
       dense={minimal}
-      pagination={minimal ? logs?.length >= 4 : logs?.length >= 9}
+      pagination={
+        minimal ? transactions?.length >= 4 : transactions?.length >= 9
+      }
       paginationPerPage={minimal ? 5 : 10}
     />
   ) : (
diff --git a/src/components/organisms/AssetList.tsx b/src/components/organisms/AssetList.tsx
index 477186a3a..219dd3a7b 100644
--- a/src/components/organisms/AssetList.tsx
+++ b/src/components/organisms/AssetList.tsx
@@ -26,6 +26,7 @@ declare type AssetListProps = {
   isLoading?: boolean
   onPageChange?: React.Dispatch<React.SetStateAction<number>>
   className?: string
+  noPublisher?: boolean
 }
 
 const AssetList: React.FC<AssetListProps> = ({
@@ -35,7 +36,8 @@ const AssetList: React.FC<AssetListProps> = ({
   totalPages,
   isLoading,
   onPageChange,
-  className
+  className,
+  noPublisher
 }) => {
   const { chainIds } = useUserPreferences()
   const [assetsWithPrices, setAssetWithPrices] = useState<AssetListPrices[]>()
@@ -71,6 +73,7 @@ const AssetList: React.FC<AssetListProps> = ({
               ddo={assetWithPrice.ddo}
               price={assetWithPrice.price}
               key={assetWithPrice.ddo.id}
+              noPublisher={noPublisher}
             />
           ))
         ) : chainIds.length === 0 ? (
diff --git a/src/components/pages/Profile/Header/Account.tsx b/src/components/pages/Profile/Header/Account.tsx
index bcc1abd76..4878a9efc 100644
--- a/src/components/pages/Profile/Header/Account.tsx
+++ b/src/components/pages/Profile/Header/Account.tsx
@@ -7,23 +7,26 @@ import jellyfish from '@oceanprotocol/art/creatures/jellyfish/jellyfish-grid.svg
 import Copy from '../../../atoms/Copy'
 import Blockies from '../../../atoms/Blockies'
 import styles from './Account.module.css'
+import { useProfile } from '../../../../providers/Profile'
 
 export default function Account({
-  name,
-  image,
   accountId
 }: {
-  name: string
-  image: string
   accountId: string
 }): ReactElement {
   const { chainIds } = useUserPreferences()
+  const { profile } = useProfile()
 
   return (
     <div className={styles.account}>
       <figure className={styles.imageWrap}>
-        {image ? (
-          <img src={image} className={styles.image} width="96" height="96" />
+        {profile?.image ? (
+          <img
+            src={profile?.image}
+            className={styles.image}
+            width="96"
+            height="96"
+          />
         ) : accountId ? (
           <Blockies accountId={accountId} className={styles.image} />
         ) : (
@@ -37,7 +40,9 @@ export default function Account({
       </figure>
 
       <div>
-        <h3 className={styles.name}>{name || accountTruncate(accountId)}</h3>
+        <h3 className={styles.name}>
+          {profile?.name || accountTruncate(accountId)}
+        </h3>
         {accountId && (
           <code className={styles.accountId}>
             {accountId} <Copy text={accountId} />
diff --git a/src/components/pages/Profile/Header/PublisherLinks.tsx b/src/components/pages/Profile/Header/PublisherLinks.tsx
index 01d6028d7..2c97782d7 100644
--- a/src/components/pages/Profile/Header/PublisherLinks.tsx
+++ b/src/components/pages/Profile/Header/PublisherLinks.tsx
@@ -1,18 +1,18 @@
 import React, { ReactElement } from 'react'
 import classNames from 'classnames/bind'
-import { ProfileLink } from '../../../../models/Profile'
 import { ReactComponent as External } from '../../../../images/external.svg'
 import styles from './PublisherLinks.module.css'
+import { useProfile } from '../../../../providers/Profile'
 
 const cx = classNames.bind(styles)
 
 export default function PublisherLinks({
-  links,
   className
 }: {
-  links: ProfileLink[]
   className: string
 }): ReactElement {
+  const { profile } = useProfile()
+
   const styleClasses = cx({
     links: true,
     [className]: className
@@ -21,7 +21,7 @@ export default function PublisherLinks({
   return (
     <div className={styleClasses}>
       {' — '}
-      {links?.map((link: ProfileLink) => {
+      {profile?.links?.map((link) => {
         const href =
           link.name === 'Twitter'
             ? `https://twitter.com/${link.value}`
diff --git a/src/components/pages/Profile/Header/Stats.module.css b/src/components/pages/Profile/Header/Stats.module.css
index 8878438c8..67a6a0c7c 100644
--- a/src/components/pages/Profile/Header/Stats.module.css
+++ b/src/components/pages/Profile/Header/Stats.module.css
@@ -1,6 +1,6 @@
 .stats {
   display: grid;
   gap: var(--spacer);
-  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
-  margin-top: calc(var(--spacer) / 2);
+  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
+  margin-top: var(--spacer);
 }
diff --git a/src/components/pages/Profile/Header/Stats.tsx b/src/components/pages/Profile/Header/Stats.tsx
index c4e5c842e..3c86dbf3c 100644
--- a/src/components/pages/Profile/Header/Stats.tsx
+++ b/src/components/pages/Profile/Header/Stats.tsx
@@ -1,4 +1,4 @@
-import { DDO, Logger } from '@oceanprotocol/lib'
+import { Logger } from '@oceanprotocol/lib'
 import React, { useEffect, useState } from 'react'
 import { ReactElement } from 'react-markdown'
 import { useUserPreferences } from '../../../../providers/UserPreferences'
@@ -6,16 +6,27 @@ import {
   getAccountLiquidityInOwnAssets,
   getAccountNumberOfOrders,
   getAssetsBestPrices,
-  UserTVL
+  UserLiquidity,
+  calculateUserLiquidity
 } from '../../../../utils/subgraph'
 import Conversion from '../../../atoms/Price/Conversion'
 import NumberUnit from '../../../molecules/NumberUnit'
 import styles from './Stats.module.css'
-import {
-  queryMetadata,
-  transformChainIdsListToQuery
-} from '../../../../utils/aquarius'
-import axios from 'axios'
+import { useProfile } from '../../../../providers/Profile'
+import { PoolShares_poolShares as PoolShare } from '../../../../@types/apollo/PoolShares'
+
+async function getPoolSharesLiquidity(
+  poolShares: PoolShare[]
+): Promise<number> {
+  let totalLiquidity = 0
+
+  for (const poolShare of poolShares) {
+    const poolLiquidity = calculateUserLiquidity(poolShare)
+    totalLiquidity += poolLiquidity
+  }
+
+  return totalLiquidity
+}
 
 export default function Stats({
   accountId
@@ -23,80 +34,91 @@ export default function Stats({
   accountId: string
 }): ReactElement {
   const { chainIds } = useUserPreferences()
+  const { poolShares, assets, assetsTotal, downloadsTotal } = useProfile()
 
-  const [publishedAssets, setPublishedAssets] = useState<DDO[]>()
-  const [numberOfAssets, setNumberOfAssets] = useState(0)
   const [sold, setSold] = useState(0)
-  const [tvl, setTvl] = useState<UserTVL>()
+  const [publisherLiquidity, setPublisherLiquidity] = useState<UserLiquidity>()
+  const [totalLiquidity, setTotalLiquidity] = useState(0)
 
   useEffect(() => {
     if (!accountId) {
-      setNumberOfAssets(0)
       setSold(0)
-      setTvl({ price: '0', oceanBalance: '0' })
+      setPublisherLiquidity({ price: '0', oceanBalance: '0' })
+      setTotalLiquidity(0)
       return
     }
 
-    async function getPublished() {
-      const queryPublishedAssets = {
-        query: {
-          query_string: {
-            query: `(publicKey.owner:${accountId}) AND (${transformChainIdsListToQuery(
-              chainIds
-            )})`
-          }
-        }
-      }
+    async function getSales() {
+      if (!assets) return
+
       try {
-        const source = axios.CancelToken.source()
-        const result = await queryMetadata(queryPublishedAssets, source.token)
-        setPublishedAssets(result.results)
-        setNumberOfAssets(result.totalResults)
-        const nrOrders = await getAccountNumberOfOrders(
-          result.results,
-          chainIds
-        )
+        const nrOrders = await getAccountNumberOfOrders(assets, chainIds)
         setSold(nrOrders)
       } catch (error) {
         Logger.error(error.message)
       }
     }
-    getPublished()
-  }, [accountId, chainIds])
+    getSales()
+  }, [accountId, chainIds, assets])
 
   useEffect(() => {
-    if (!publishedAssets) return
+    if (!assets || !accountId || !chainIds) return
 
-    async function getAccountTVL() {
+    async function getPublisherLiquidity() {
       try {
         const accountPoolAdresses: string[] = []
-        const assetsPrices = await getAssetsBestPrices(publishedAssets)
+        const assetsPrices = await getAssetsBestPrices(assets)
         for (const priceInfo of assetsPrices) {
           if (priceInfo.price.type === 'pool') {
             accountPoolAdresses.push(priceInfo.price.address.toLowerCase())
           }
         }
-        const userTvl: UserTVL = await getAccountLiquidityInOwnAssets(
+        const userLiquidity = await getAccountLiquidityInOwnAssets(
           accountId,
           chainIds,
           accountPoolAdresses
         )
-        setTvl(userTvl)
+        setPublisherLiquidity(userLiquidity)
       } catch (error) {
         Logger.error(error.message)
       }
     }
-    getAccountTVL()
-  }, [publishedAssets, accountId, chainIds])
+    getPublisherLiquidity()
+  }, [assets, accountId, chainIds])
+
+  useEffect(() => {
+    if (!poolShares) return
+
+    async function getTotalLiquidity() {
+      try {
+        const totalLiquidity = await getPoolSharesLiquidity(poolShares)
+        setTotalLiquidity(totalLiquidity)
+      } catch (error) {
+        console.error('Error fetching pool shares: ', error.message)
+      }
+    }
+    getTotalLiquidity()
+  }, [poolShares])
 
   return (
     <div className={styles.stats}>
       <NumberUnit
-        label="Total Value Locked"
-        value={<Conversion price={tvl?.price} hideApproximateSymbol />}
+        label="Liquidity in Own Assets"
+        value={
+          <Conversion price={publisherLiquidity?.price} hideApproximateSymbol />
+        }
+      />
+      <NumberUnit
+        label="Total Liquidity"
+        value={<Conversion price={`${totalLiquidity}`} hideApproximateSymbol />}
+      />
+      <NumberUnit label={`Sale${sold === 1 ? '' : 's'}`} value={sold} />
+      <NumberUnit label="Published" value={assetsTotal} />
+      <NumberUnit
+        label={`Download${downloadsTotal === 1 ? '' : 's'}`}
+        tooltip="Datatoken orders for assets with `access` service, as opposed to `compute`. As one order could allow multiple or infinite downloads this number does not reflect the actual download count of an asset file."
+        value={downloadsTotal}
       />
-      <NumberUnit label="Sold" value={sold} />
-      <NumberUnit label="Published" value={numberOfAssets} />
     </div>
   )
 }
diff --git a/src/components/pages/Profile/Header/index.tsx b/src/components/pages/Profile/Header/index.tsx
index eaf16c411..42fb0370c 100644
--- a/src/components/pages/Profile/Header/index.tsx
+++ b/src/components/pages/Profile/Header/index.tsx
@@ -1,26 +1,16 @@
-import React, { ReactElement, useEffect, useState } from 'react'
-import get3BoxProfile from '../../../../utils/profile'
-import { Profile } from '../../../../models/Profile'
-import { accountTruncate } from '../../../../utils/web3'
-import axios from 'axios'
+import React, { ReactElement, useState } from 'react'
 import PublisherLinks from './PublisherLinks'
 import Markdown from '../../../atoms/Markdown'
 import Stats from './Stats'
 import Account from './Account'
 import styles from './index.module.css'
+import { useProfile } from '../../../../providers/Profile'
 
 const isDescriptionTextClamped = () => {
   const el = document.getElementById('description')
   if (el) return el.scrollHeight > el.clientHeight
 }
 
-const clearedProfile: Profile = {
-  name: null,
-  image: null,
-  description: null,
-  links: null
-}
-
 const Link3Box = ({ accountId, text }: { accountId: string; text: string }) => {
   return (
     <a
@@ -38,62 +28,22 @@ export default function AccountHeader({
 }: {
   accountId: string
 }): ReactElement {
-  const [profile, setProfile] = useState<Profile>({
-    name: accountTruncate(accountId),
-    image: null,
-    description: null,
-    links: null
-  })
+  const { profile } = useProfile()
   const [isShowMore, setIsShowMore] = useState(false)
 
   const toogleShowMore = () => {
     setIsShowMore(!isShowMore)
   }
 
-  useEffect(() => {
-    if (!accountId) {
-      setProfile(clearedProfile)
-      return
-    }
-
-    const source = axios.CancelToken.source()
-
-    async function getInfoFrom3Box() {
-      const profile3Box = await get3BoxProfile(accountId, source.token)
-      if (profile3Box) {
-        const { name, emoji, description, image, links } = profile3Box
-        const newName = `${emoji || ''} ${name || accountTruncate(accountId)}`
-        const newProfile = {
-          name: newName,
-          image,
-          description,
-          links
-        }
-        setProfile(newProfile)
-      } else {
-        setProfile(clearedProfile)
-      }
-    }
-    getInfoFrom3Box()
-
-    return () => {
-      source.cancel()
-    }
-  }, [accountId])
-
   return (
     <div className={styles.grid}>
       <div>
-        <Account
-          accountId={accountId}
-          image={profile.image}
-          name={profile.name}
-        />
+        <Account accountId={accountId} />
         <Stats accountId={accountId} />
       </div>
 
       <div>
-        <Markdown text={profile.description} className={styles.description} />
+        <Markdown text={profile?.description} className={styles.description} />
         {isDescriptionTextClamped() ? (
           <span className={styles.more} onClick={toogleShowMore}>
             <Link3Box accountId={accountId} text="Read more on 3box" />
@@ -101,11 +51,8 @@ export default function AccountHeader({
         ) : (
           ''
         )}
-        {profile.links?.length > 0 && (
-          <PublisherLinks
-            links={profile.links}
-            className={styles.publisherLinks}
-          />
+        {profile?.links?.length > 0 && (
+          <PublisherLinks className={styles.publisherLinks} />
         )}
       </div>
       <div className={styles.meta}>
diff --git a/src/components/pages/Profile/History/Downloads.tsx b/src/components/pages/Profile/History/Downloads.tsx
index 0d206b631..ef06b9f01 100644
--- a/src/components/pages/Profile/History/Downloads.tsx
+++ b/src/components/pages/Profile/History/Downloads.tsx
@@ -1,64 +1,33 @@
-import React, { ReactElement, useEffect, useState } from 'react'
+import React, { ReactElement } from 'react'
 import Table from '../../../atoms/Table'
-import { gql } from 'urql'
 import Time from '../../../atoms/Time'
-import web3 from 'web3'
 import AssetTitle from '../../../molecules/AssetListTitle'
-import axios from 'axios'
-import { retrieveDDO } from '../../../../utils/aquarius'
-import { Logger } from '@oceanprotocol/lib'
-import { useSiteMetadata } from '../../../../hooks/useSiteMetadata'
-import { useUserPreferences } from '../../../../providers/UserPreferences'
-import { fetchDataForMultipleChains } from '../../../../utils/subgraph'
-import { OrdersData_tokenOrders as OrdersData } from '../../../../@types/apollo/OrdersData'
 import NetworkName from '../../../atoms/NetworkName'
-
-const getTokenOrders = gql`
-  query OrdersData($user: String!) {
-    tokenOrders(
-      orderBy: timestamp
-      orderDirection: desc
-      where: { consumer: $user }
-    ) {
-      datatokenId {
-        address
-        symbol
-      }
-      timestamp
-      tx
-    }
-  }
-`
-
-interface DownloadedAssets {
-  did: string
-  dtSymbol: string
-  timestamp: number
-  networkId: number
-}
+import { useProfile } from '../../../../providers/Profile'
+import { DownloadedAsset } from '../../../../utils/aquarius'
 
 const columns = [
   {
     name: 'Data Set',
-    selector: function getAssetRow(row: DownloadedAssets) {
-      return <AssetTitle did={row.did} />
+    selector: function getAssetRow(row: DownloadedAsset) {
+      return <AssetTitle ddo={row.ddo} />
     }
   },
   {
     name: 'Network',
-    selector: function getNetwork(row: DownloadedAssets) {
+    selector: function getNetwork(row: DownloadedAsset) {
       return <NetworkName networkId={row.networkId} />
     }
   },
   {
     name: 'Datatoken',
-    selector: function getTitleRow(row: DownloadedAssets) {
+    selector: function getTitleRow(row: DownloadedAsset) {
       return row.dtSymbol
     }
   },
   {
     name: 'Time',
-    selector: function getTimeRow(row: DownloadedAssets) {
+    selector: function getTimeRow(row: DownloadedAsset) {
       return <Time date={row.timestamp.toString()} relative isUnix />
     }
   }
@@ -69,67 +38,14 @@ export default function ComputeDownloads({
 }: {
   accountId: string
 }): ReactElement {
-  const { appConfig } = useSiteMetadata()
-  const [isLoading, setIsLoading] = useState(false)
-  const [orders, setOrders] = useState<DownloadedAssets[]>()
-  const { chainIds } = useUserPreferences()
-
-  useEffect(() => {
-    const variables = { user: accountId?.toLowerCase() }
-
-    async function filterAssets() {
-      const filteredOrders: DownloadedAssets[] = []
-      const source = axios.CancelToken.source()
-      try {
-        setIsLoading(true)
-        const response = await fetchDataForMultipleChains(
-          getTokenOrders,
-          variables,
-          chainIds
-        )
-
-        const data: OrdersData[] = []
-        for (let i = 0; i < response.length; i++) {
-          response[i].tokenOrders.forEach((tokenOrder: OrdersData) => {
-            data.push(tokenOrder)
-          })
-        }
-
-        for (let i = 0; i < data.length; i++) {
-          const did = web3.utils
-            .toChecksumAddress(data[i].datatokenId.address)
-            .replace('0x', 'did:op:')
-          const ddo = await retrieveDDO(did, source.token)
-          if (!ddo) continue
-          if (ddo.service[1].type === 'access') {
-            filteredOrders.push({
-              did: did,
-              networkId: ddo.chainId,
-              dtSymbol: data[i].datatokenId.symbol,
-              timestamp: data[i].timestamp
-            })
-          }
-        }
-        const sortedOrders = filteredOrders.sort(
-          (a, b) => b.timestamp - a.timestamp
-        )
-        setOrders(sortedOrders)
-      } catch (err) {
-        Logger.log(err.message)
-      } finally {
-        setIsLoading(false)
-      }
-    }
-
-    filterAssets()
-  }, [accountId, appConfig.metadataCacheUri, chainIds])
+  const { downloads, isDownloadsLoading } = useProfile()
 
   return accountId ? (
     <Table
       columns={columns}
-      data={orders}
+      data={downloads}
       paginationPerPage={10}
-      isLoading={isLoading}
+      isLoading={isDownloadsLoading}
     />
   ) : (
     <div>Please connect your Web3 wallet.</div>
diff --git a/src/components/pages/Profile/History/PoolShares.tsx b/src/components/pages/Profile/History/PoolShares.tsx
index 48d6e2945..80c1a1a98 100644
--- a/src/components/pages/Profile/History/PoolShares.tsx
+++ b/src/components/pages/Profile/History/PoolShares.tsx
@@ -3,61 +3,31 @@ import Table from '../../../atoms/Table'
 import Conversion from '../../../atoms/Price/Conversion'
 import styles from './PoolShares.module.css'
 import AssetTitle from '../../../molecules/AssetListTitle'
-import { gql } from 'urql'
 import {
   PoolShares_poolShares as PoolShare,
   PoolShares_poolShares_poolId_tokens as PoolSharePoolIdTokens
 } from '../../../../@types/apollo/PoolShares'
 import web3 from 'web3'
 import Token from '../../../organisms/AssetActions/Pool/Token'
-import { useUserPreferences } from '../../../../providers/UserPreferences'
-import {
-  fetchDataForMultipleChains,
-  calculateUserLiquidity
-} from '../../../../utils/subgraph'
+import { calculateUserLiquidity } from '../../../../utils/subgraph'
 import NetworkName from '../../../atoms/NetworkName'
-import axios from 'axios'
+import axios, { CancelToken } from 'axios'
 import { retrieveDDO } from '../../../../utils/aquarius'
 import { isValidNumber } from '../../../../utils/numberValidations'
 import Decimal from 'decimal.js'
+import { useProfile } from '../../../../providers/Profile'
+import { DDO } from '@oceanprotocol/lib'
 
 Decimal.set({ toExpNeg: -18, precision: 18, rounding: 1 })
 
 const REFETCH_INTERVAL = 20000
 
-const poolSharesQuery = gql`
-  query PoolShares($user: String) {
-    poolShares(where: { userAddress: $user, balance_gt: 0.001 }, first: 1000) {
-      id
-      balance
-      userAddress {
-        id
-      }
-      poolId {
-        id
-        datatokenAddress
-        valueLocked
-        tokens {
-          id
-          isDatatoken
-          symbol
-        }
-        oceanReserve
-        datatokenReserve
-        totalShares
-        consumePrice
-        spotPrice
-        createTime
-      }
-    }
-  }
-`
-
 interface Asset {
   userLiquidity: number
   poolShare: PoolShare
   networkId: number
   createTime: number
+  ddo: DDO
 }
 
 function findTokenByType(tokens: PoolSharePoolIdTokens[], type: string) {
@@ -126,10 +96,7 @@ const columns = [
   {
     name: 'Data Set',
     selector: function getAssetRow(row: Asset) {
-      const did = web3.utils
-        .toChecksumAddress(row.poolShare.poolId.datatokenAddress)
-        .replace('0x', 'did:op:')
-      return <AssetTitle did={did} />
+      return <AssetTitle ddo={row.ddo} />
     },
     grow: 2
   },
@@ -161,38 +128,27 @@ const columns = [
   }
 ]
 
-async function getPoolSharesData(accountId: string, chainIds: number[]) {
-  const variables = { user: accountId?.toLowerCase() }
-  const data: PoolShare[] = []
-  const result = await fetchDataForMultipleChains(
-    poolSharesQuery,
-    variables,
-    chainIds
-  )
-  for (let i = 0; i < result.length; i++) {
-    result[i].poolShares.forEach((poolShare: PoolShare) => {
-      data.push(poolShare)
-    })
-  }
-  return data
-}
-
-async function getPoolSharesAssets(data: PoolShare[]) {
+async function getPoolSharesAssets(
+  data: PoolShare[],
+  cancelToken: CancelToken
+) {
   const assetList: Asset[] = []
-  const source = axios.CancelToken.source()
 
   for (let i = 0; i < data.length; i++) {
     const did = web3.utils
       .toChecksumAddress(data[i].poolId.datatokenAddress)
       .replace('0x', 'did:op:')
-    const ddo = await retrieveDDO(did, source.token)
+    const ddo = await retrieveDDO(did, cancelToken)
     const userLiquidity = calculateUserLiquidity(data[i])
-    assetList.push({
-      poolShare: data[i],
-      userLiquidity: userLiquidity,
-      networkId: ddo?.chainId,
-      createTime: data[i].poolId.createTime
-    })
+
+    ddo &&
+      assetList.push({
+        poolShare: data[i],
+        userLiquidity: userLiquidity,
+        networkId: ddo?.chainId,
+        createTime: data[i].poolId.createTime,
+        ddo
+      })
   }
   const assets = assetList.sort((a, b) => b.createTime - a.createTime)
   return assets
@@ -203,33 +159,36 @@ export default function PoolShares({
 }: {
   accountId: string
 }): ReactElement {
+  const { poolShares, isPoolSharesLoading } = useProfile()
   const [assets, setAssets] = useState<Asset[]>()
   const [loading, setLoading] = useState<boolean>(false)
   const [dataFetchInterval, setDataFetchInterval] = useState<NodeJS.Timeout>()
-  const { chainIds } = useUserPreferences()
 
-  const fetchPoolSharesData = useCallback(async () => {
-    try {
-      const data = await getPoolSharesData(accountId, chainIds)
-      const newAssets = await getPoolSharesAssets(data)
+  const fetchPoolSharesAssets = useCallback(
+    async (cancelToken: CancelToken) => {
+      if (!poolShares || isPoolSharesLoading) return
 
-      if (JSON.stringify(assets) !== JSON.stringify(newAssets)) {
-        setAssets(newAssets)
+      try {
+        const assets = await getPoolSharesAssets(poolShares, cancelToken)
+        setAssets(assets)
+      } catch (error) {
+        console.error('Error fetching pool shares: ', error.message)
       }
-    } catch (error) {
-      console.error('Error fetching pool shares: ', error.message)
-    }
-  }, [accountId, assets, chainIds])
+    },
+    [poolShares, isPoolSharesLoading]
+  )
 
   useEffect(() => {
+    const cancelTokenSource = axios.CancelToken.source()
+
     async function init() {
       setLoading(true)
-      await fetchPoolSharesData()
+      await fetchPoolSharesAssets(cancelTokenSource.token)
       setLoading(false)
 
       if (dataFetchInterval) return
       const interval = setInterval(async () => {
-        await fetchPoolSharesData()
+        await fetchPoolSharesAssets(cancelTokenSource.token)
       }, REFETCH_INTERVAL)
       setDataFetchInterval(interval)
     }
@@ -237,8 +196,9 @@ export default function PoolShares({
 
     return () => {
       clearInterval(dataFetchInterval)
+      cancelTokenSource.cancel()
     }
-  }, [dataFetchInterval, fetchPoolSharesData])
+  }, [dataFetchInterval, fetchPoolSharesAssets])
 
   return accountId ? (
     <Table
diff --git a/src/components/pages/Profile/History/PublishedList.tsx b/src/components/pages/Profile/History/PublishedList.tsx
index 767c0debc..6a1c7ea6e 100644
--- a/src/components/pages/Profile/History/PublishedList.tsx
+++ b/src/components/pages/Profile/History/PublishedList.tsx
@@ -2,15 +2,12 @@ import { Logger } from '@oceanprotocol/lib'
 import { QueryResult } from '@oceanprotocol/lib/dist/node/metadatacache/MetadataCache'
 import React, { ReactElement, useEffect, useState } from 'react'
 import AssetList from '../../../organisms/AssetList'
-import axios from 'axios'
-import {
-  queryMetadata,
-  transformChainIdsListToQuery
-} from '../../../../utils/aquarius'
+import { getPublishedAssets } from '../../../../utils/aquarius'
 import Filters from '../../../templates/Search/Filters'
 import { useSiteMetadata } from '../../../../hooks/useSiteMetadata'
 import { useUserPreferences } from '../../../../providers/UserPreferences'
 import styles from './PublishedList.module.css'
+import axios from 'axios'
 
 export default function PublishedList({
   accountId
@@ -23,30 +20,23 @@ export default function PublishedList({
   const [queryResult, setQueryResult] = useState<QueryResult>()
   const [isLoading, setIsLoading] = useState(false)
   const [page, setPage] = useState<number>(1)
-  const [service, setServiceType] = useState<string>()
+  const [service, setServiceType] = useState('dataset OR algorithm')
 
   useEffect(() => {
-    async function getPublished() {
-      const serviceFiter =
-        service === undefined ? 'dataset OR algorithm' : `${service}`
-      if (!accountId) return
-      const queryPublishedAssets = {
-        page: page,
-        offset: 9,
-        query: {
-          query_string: {
-            query: `(publicKey.owner:${accountId}) AND (service.attributes.main.type:${serviceFiter}) AND (${transformChainIdsListToQuery(
-              chainIds
-            )})`
-          }
-        },
-        sort: { created: -1 }
-      }
-      try {
-        const source = axios.CancelToken.source()
+    if (!accountId) return
 
+    const cancelTokenSource = axios.CancelToken.source()
+
+    async function getPublished() {
+      try {
         setIsLoading(true)
-        const result = await queryMetadata(queryPublishedAssets, source.token)
+        const result = await getPublishedAssets(
+          accountId,
+          chainIds,
+          cancelTokenSource.token,
+          page,
+          service
+        )
         setQueryResult(result)
       } catch (error) {
         Logger.error(error.message)
@@ -55,6 +45,10 @@ export default function PublishedList({
       }
     }
     getPublished()
+
+    return () => {
+      cancelTokenSource.cancel()
+    }
   }, [accountId, page, appConfig.metadataCacheUri, chainIds, service])
 
   return accountId ? (
@@ -75,6 +69,7 @@ export default function PublishedList({
           setPage(newPage)
         }}
         className={styles.assets}
+        noPublisher
       />
     </>
   ) : (
diff --git a/src/pages/profile/index.tsx b/src/pages/profile/index.tsx
index 451a639ea..2c2012f03 100644
--- a/src/pages/profile/index.tsx
+++ b/src/pages/profile/index.tsx
@@ -4,6 +4,7 @@ import { graphql, PageProps } from 'gatsby'
 import ProfilePage from '../../components/pages/Profile'
 import { accountTruncate } from '../../utils/web3'
 import { useWeb3 } from '../../providers/Web3'
+import ProfileProvider from '../../providers/Profile'
 
 export default function PageGatsbyProfile(props: PageProps): ReactElement {
   const { accountId } = useWeb3()
@@ -18,7 +19,9 @@ export default function PageGatsbyProfile(props: PageProps): ReactElement {
 
   return (
     <Page uri={props.uri} title={accountTruncate(finalAccountId)} noPageHeader>
-      <ProfilePage accountId={finalAccountId} />
+      <ProfileProvider accountId={finalAccountId}>
+        <ProfilePage accountId={finalAccountId} />
+      </ProfileProvider>
     </Page>
   )
 }
diff --git a/src/providers/Profile.tsx b/src/providers/Profile.tsx
new file mode 100644
index 000000000..cbe8d3bd2
--- /dev/null
+++ b/src/providers/Profile.tsx
@@ -0,0 +1,291 @@
+import React, {
+  useContext,
+  useState,
+  useEffect,
+  createContext,
+  ReactElement,
+  useCallback,
+  ReactNode
+} from 'react'
+import { getPoolSharesData, getUserTokenOrders } from '../utils/subgraph'
+import { useUserPreferences } from './UserPreferences'
+import { PoolShares_poolShares as PoolShare } from '../@types/apollo/PoolShares'
+import { DDO, Logger } from '@oceanprotocol/lib'
+import {
+  DownloadedAsset,
+  getDownloadAssets,
+  getPublishedAssets
+} from '../utils/aquarius'
+import { useSiteMetadata } from '../hooks/useSiteMetadata'
+import { Profile } from '../models/Profile'
+import { accountTruncate } from '../utils/web3'
+import axios, { CancelToken } from 'axios'
+import ethereumAddress from 'ethereum-address'
+import get3BoxProfile from '../utils/profile'
+import web3 from 'web3'
+
+interface ProfileProviderValue {
+  profile: Profile
+  poolShares: PoolShare[]
+  isPoolSharesLoading: boolean
+  assets: DDO[]
+  assetsTotal: number
+  isEthAddress: boolean
+  downloads: DownloadedAsset[]
+  downloadsTotal: number
+  isDownloadsLoading: boolean
+}
+
+const ProfileContext = createContext({} as ProfileProviderValue)
+
+const refreshInterval = 10000 // 10 sec.
+
+function ProfileProvider({
+  accountId,
+  children
+}: {
+  accountId: string
+  children: ReactNode
+}): ReactElement {
+  const { chainIds } = useUserPreferences()
+  const { appConfig } = useSiteMetadata()
+
+  const [isEthAddress, setIsEthAddress] = useState<boolean>()
+
+  //
+  // Do nothing in all following effects
+  // when accountId is no ETH address
+  //
+  useEffect(() => {
+    const isEthAddress = ethereumAddress.isAddress(accountId)
+    setIsEthAddress(isEthAddress)
+  }, [accountId])
+
+  //
+  // 3Box
+  //
+  const [profile, setProfile] = useState<Profile>({
+    name: accountTruncate(accountId),
+    image: null,
+    description: null,
+    links: null
+  })
+
+  useEffect(() => {
+    const clearedProfile: Profile = {
+      name: null,
+      image: null,
+      description: null,
+      links: null
+    }
+
+    if (!accountId || !isEthAddress) {
+      setProfile(clearedProfile)
+      return
+    }
+
+    const cancelTokenSource = axios.CancelToken.source()
+
+    async function getInfoFrom3Box() {
+      const profile3Box = await get3BoxProfile(
+        accountId,
+        cancelTokenSource.token
+      )
+      if (profile3Box) {
+        const { name, emoji, description, image, links } = profile3Box
+        const newName = `${emoji || ''} ${name || accountTruncate(accountId)}`
+        const newProfile = {
+          name: newName,
+          image,
+          description,
+          links
+        }
+        setProfile(newProfile)
+        Logger.log('[profile] Found and set 3box profile.', newProfile)
+      } else {
+        setProfile(clearedProfile)
+        Logger.log('[profile] No 3box profile found.')
+      }
+    }
+    getInfoFrom3Box()
+
+    return () => {
+      cancelTokenSource.cancel()
+    }
+  }, [accountId, isEthAddress])
+
+  //
+  // POOL SHARES
+  //
+  const [poolShares, setPoolShares] = useState<PoolShare[]>()
+  const [isPoolSharesLoading, setIsPoolSharesLoading] = useState<boolean>(false)
+  const [poolSharesInterval, setPoolSharesInterval] = useState<NodeJS.Timeout>()
+
+  const fetchPoolShares = useCallback(async () => {
+    if (!accountId || !chainIds || !isEthAddress) return
+
+    try {
+      setIsPoolSharesLoading(true)
+      const poolShares = await getPoolSharesData(accountId, chainIds)
+      setPoolShares(poolShares)
+      Logger.log(
+        `[profile] Fetched ${poolShares.length} pool shares.`,
+        poolShares
+      )
+    } catch (error) {
+      Logger.error('Error fetching pool shares: ', error.message)
+    } finally {
+      setIsPoolSharesLoading(false)
+    }
+  }, [accountId, chainIds, isEthAddress])
+
+  useEffect(() => {
+    async function init() {
+      await fetchPoolShares()
+
+      if (poolSharesInterval) return
+      const interval = setInterval(async () => {
+        await fetchPoolShares()
+      }, refreshInterval)
+      setPoolSharesInterval(interval)
+    }
+    init()
+
+    return () => {
+      clearInterval(poolSharesInterval)
+    }
+  }, [poolSharesInterval, fetchPoolShares])
+
+  //
+  // PUBLISHED ASSETS
+  //
+  const [assets, setAssets] = useState<DDO[]>()
+  const [assetsTotal, setAssetsTotal] = useState(0)
+  // const [assetsWithPrices, setAssetsWithPrices] = useState<AssetListPrices[]>()
+
+  useEffect(() => {
+    if (!accountId || !isEthAddress) return
+
+    const cancelTokenSource = axios.CancelToken.source()
+
+    async function getAllPublished() {
+      try {
+        const result = await getPublishedAssets(
+          accountId,
+          chainIds,
+          cancelTokenSource.token
+        )
+        setAssets(result.results)
+        setAssetsTotal(result.totalResults)
+        Logger.log(
+          `[profile] Fetched ${result.totalResults} assets.`,
+          result.results
+        )
+
+        // Hint: this would only make sense if we "search" in all subcomponents
+        // against this provider's state, meaning filtering via js rather then sending
+        // more queries to Aquarius.
+        // const assetsWithPrices = await getAssetsBestPrices(result.results)
+        // setAssetsWithPrices(assetsWithPrices)
+      } catch (error) {
+        Logger.error(error.message)
+      }
+    }
+    getAllPublished()
+
+    return () => {
+      cancelTokenSource.cancel()
+    }
+  }, [accountId, appConfig.metadataCacheUri, chainIds, isEthAddress])
+
+  //
+  // DOWNLOADS
+  //
+  const [downloads, setDownloads] = useState<DownloadedAsset[]>()
+  const [downloadsTotal, setDownloadsTotal] = useState(0)
+  const [isDownloadsLoading, setIsDownloadsLoading] = useState<boolean>()
+  const [downloadsInterval, setDownloadsInterval] = useState<NodeJS.Timeout>()
+
+  const fetchDownloads = useCallback(
+    async (cancelToken: CancelToken) => {
+      if (!accountId || !chainIds) return
+
+      const didList: string[] = []
+      const tokenOrders = await getUserTokenOrders(accountId, chainIds)
+
+      for (let i = 0; i < tokenOrders?.length; i++) {
+        const did = web3.utils
+          .toChecksumAddress(tokenOrders[i].datatokenId.address)
+          .replace('0x', 'did:op:')
+        didList.push(did)
+      }
+
+      const downloads = await getDownloadAssets(
+        didList,
+        tokenOrders,
+        chainIds,
+        cancelToken
+      )
+      setDownloads(downloads)
+      setDownloadsTotal(downloads.length)
+      Logger.log(
+        `[profile] Fetched ${downloads.length} download orders.`,
+        downloads
+      )
+    },
+    [accountId, chainIds]
+  )
+
+  useEffect(() => {
+    const cancelTokenSource = axios.CancelToken.source()
+
+    async function getDownloadAssets() {
+      if (!appConfig?.metadataCacheUri) return
+
+      try {
+        setIsDownloadsLoading(true)
+        await fetchDownloads(cancelTokenSource.token)
+      } catch (err) {
+        Logger.log(err.message)
+      } finally {
+        setIsDownloadsLoading(false)
+      }
+    }
+    getDownloadAssets()
+
+    if (downloadsInterval) return
+    const interval = setInterval(async () => {
+      await fetchDownloads(cancelTokenSource.token)
+    }, refreshInterval)
+    setDownloadsInterval(interval)
+
+    return () => {
+      cancelTokenSource.cancel()
+      clearInterval(downloadsInterval)
+    }
+  }, [fetchDownloads, appConfig.metadataCacheUri, downloadsInterval])
+
+  return (
+    <ProfileContext.Provider
+      value={{
+        profile,
+        poolShares,
+        isPoolSharesLoading,
+        assets,
+        assetsTotal,
+        isEthAddress,
+        downloads,
+        downloadsTotal,
+        isDownloadsLoading
+      }}
+    >
+      {children}
+    </ProfileContext.Provider>
+  )
+}
+
+// Helper hook to access the provider values
+const useProfile = (): ProfileProviderValue => useContext(ProfileContext)
+
+export { ProfileProvider, useProfile, ProfileProviderValue, ProfileContext }
+export default ProfileProvider
diff --git a/src/utils/aquarius.ts b/src/utils/aquarius.ts
index 10adee35c..54cd909ba 100644
--- a/src/utils/aquarius.ts
+++ b/src/utils/aquarius.ts
@@ -12,7 +12,16 @@ import {
 import { AssetSelectionAsset } from '../components/molecules/FormFields/AssetSelection'
 import { PriceList, getAssetsPriceList } from './subgraph'
 import axios, { CancelToken, AxiosResponse } from 'axios'
+import { OrdersData_tokenOrders as OrdersData } from '../@types/apollo/OrdersData'
 import { metadataCacheUri } from '../../app.config'
+import web3 from '../../tests/unit/__mocks__/web3'
+
+export interface DownloadedAsset {
+  dtSymbol: string
+  timestamp: number
+  networkId: number
+  ddo: DDO
+}
 
 function getQueryForAlgorithmDatasets(algorithmDid: string, chainId?: number) {
   return {
@@ -66,7 +75,8 @@ export async function queryMetadata(
   try {
     const response: AxiosResponse<any> = await axios.post(
       `${metadataCacheUri}/api/v1/aquarius/assets/ddo/query`,
-      { ...query, cancelToken }
+      { ...query },
+      { cancelToken }
     )
     if (!response || response.status !== 200 || !response.data) return
     return transformQueryResult(response.data)
@@ -108,10 +118,8 @@ export async function getAssetsNames(
   try {
     const response: AxiosResponse<Record<string, string>> = await axios.post(
       `${metadataCacheUri}/api/v1/aquarius/assets/names`,
-      {
-        didList,
-        cancelToken
-      }
+      { didList },
+      { cancelToken }
     )
     if (!response || response.status !== 200 || !response.data) return
     return response.data
@@ -204,3 +212,122 @@ export async function getAlgorithmDatasetsForCompute(
   )
   return datasets
 }
+
+export async function getPublishedAssets(
+  accountId: string,
+  chainIds: number[],
+  cancelToken: CancelToken,
+  page?: number,
+  type?: string
+): Promise<QueryResult> {
+  if (!accountId) return
+
+  page = page || 1
+  type = type || 'dataset OR algorithm'
+
+  const queryPublishedAssets = {
+    page,
+    offset: 9,
+    query: {
+      query_string: {
+        query: `(publicKey.owner:${accountId}) AND (service.attributes.main.type:${type}) AND (${transformChainIdsListToQuery(
+          chainIds
+        )})`
+      }
+    },
+    sort: { created: -1 }
+  }
+
+  try {
+    const result = await queryMetadata(queryPublishedAssets, cancelToken)
+    return result
+  } catch (error) {
+    if (axios.isCancel(error)) {
+      Logger.log(error.message)
+    } else {
+      Logger.error(error.message)
+    }
+  }
+}
+
+export async function getAssetsFromDidList(
+  didList: string[],
+  chainIds: number[],
+  cancelToken: CancelToken
+): Promise<QueryResult> {
+  try {
+    // TODO: figure out cleaner way to transform string[] into csv
+    const searchDids = JSON.stringify(didList)
+      .replace(/,/g, ' ')
+      .replace(/"/g, '')
+      .replace(/(\[|\])/g, '')
+      // for whatever reason ddo.id is not searchable, so use ddo.dataToken instead
+      .replace(/(did:op:)/g, '0x')
+
+    // safeguard against passed empty didList, preventing 500 from Aquarius
+    if (!searchDids) return
+
+    const query = {
+      page: 1,
+      offset: 1000,
+      query: {
+        query_string: {
+          query: `(${searchDids}) AND (${transformChainIdsListToQuery(
+            chainIds
+          )})`,
+          fields: ['dataToken'],
+          default_operator: 'OR'
+        }
+      },
+      sort: { created: -1 }
+    }
+
+    const queryResult = await queryMetadata(query, cancelToken)
+    return queryResult
+  } catch (error) {
+    Logger.error(error.message)
+  }
+}
+
+export async function getDownloadAssets(
+  didList: string[],
+  tokenOrders: OrdersData[],
+  chainIds: number[],
+  cancelToken: CancelToken
+): Promise<DownloadedAsset[]> {
+  const downloadedAssets: DownloadedAsset[] = []
+
+  try {
+    const queryResult = await getAssetsFromDidList(
+      didList,
+      chainIds,
+      cancelToken
+    )
+    const ddoList = queryResult?.results
+
+    for (let i = 0; i < tokenOrders?.length; i++) {
+      const ddo = ddoList.filter(
+        (ddo) =>
+          tokenOrders[i].datatokenId.address.toLowerCase() ===
+          ddo.dataToken.toLowerCase()
+      )[0]
+
+      // make sure we are only pushing download orders
+      if (ddo.service[1].type !== 'access') continue
+
+      downloadedAssets.push({
+        ddo,
+        networkId: ddo.chainId,
+        dtSymbol: tokenOrders[i].datatokenId.symbol,
+        timestamp: tokenOrders[i].timestamp
+      })
+    }
+
+    const sortedOrders = downloadedAssets.sort(
+      (a, b) => b.timestamp - a.timestamp
+    )
+    return sortedOrders
+  } catch (error) {
+    Logger.error(error.message)
+  }
+}
diff --git a/src/utils/subgraph.ts b/src/utils/subgraph.ts
index 182245347..ed253ed81 100644
--- a/src/utils/subgraph.ts
+++ b/src/utils/subgraph.ts
@@ -1,5 +1,5 @@
 import { gql, OperationResult, TypedDocumentNode, OperationContext } from 'urql'
-import { DDO } from '@oceanprotocol/lib'
+import { DDO, Logger } from '@oceanprotocol/lib'
 import { getUrqlClientInstance } from '../providers/UrqlProvider'
 import { getOceanConfig } from './ocean'
 import web3 from 'web3'
@@ -25,8 +25,9 @@ import {
   PoolShares_poolShares as PoolShare
 } from '../@types/apollo/PoolShares'
 import { BestPrice } from '../models/BestPrice'
+import { OrdersData_tokenOrders as OrdersData } from '../@types/apollo/OrdersData'
 
-export interface UserTVL {
+export interface UserLiquidity {
   price: string
   oceanBalance: string
 }
@@ -206,6 +207,52 @@ const UserSharesQuery = gql`
     }
   }
 `
+
+const userPoolSharesQuery = gql`
+  query PoolShares($user: String) {
+    poolShares(where: { userAddress: $user, balance_gt: 0.001 }, first: 1000) {
+      id
+      balance
+      userAddress {
+        id
+      }
+      poolId {
+        id
+        datatokenAddress
+        valueLocked
+        tokens {
+          id
+          isDatatoken
+          symbol
+        }
+        oceanReserve
+        datatokenReserve
+        totalShares
+        consumePrice
+        spotPrice
+        createTime
+      }
+    }
+  }
+`
+
+const UserTokenOrders = gql`
+  query OrdersData($user: String!) {
+    tokenOrders(
+      orderBy: timestamp
+      orderDirection: desc
+      where: { consumer: $user }
+    ) {
+      datatokenId {
+        address
+        symbol
+      }
+      timestamp
+      tx
+    }
+  }
+`
+
 export function getSubgraphUri(chainId: number): string {
   const config = getOceanConfig(chainId)
   return config.subgraphUri
@@ -604,7 +651,7 @@ export async function getAccountLiquidityInOwnAssets(
   accountId: string,
   chainIds: number[],
   pools: string[]
-): Promise<UserTVL> {
+): Promise<UserLiquidity> {
   const queryVariables = {
     user: accountId.toLowerCase(),
     pools: pools
@@ -630,3 +677,48 @@ export async function getAccountLiquidityInOwnAssets(
     oceanBalance: totalOceanLiquidity.toString()
   }
 }
+
+export async function getPoolSharesData(
+  accountId: string,
+  chainIds: number[]
+): Promise<PoolShare[]> {
+  const variables = { user: accountId?.toLowerCase() }
+  const data: PoolShare[] = []
+  const result = await fetchDataForMultipleChains(
+    userPoolSharesQuery,
+    variables,
+    chainIds
+  )
+  for (let i = 0; i < result.length; i++) {
+    result[i].poolShares.forEach((poolShare: PoolShare) => {
+      data.push(poolShare)
+    })
+  }
+  return data
+}
+
+export async function getUserTokenOrders(
+  accountId: string,
+  chainIds: number[]
+): Promise<OrdersData[]> {
+  const data: OrdersData[] = []
+  const variables = { user: accountId?.toLowerCase() }
+
+  try {
+    const tokenOrders = await fetchDataForMultipleChains(
+      UserTokenOrders,
+      variables,
+      chainIds
+    )
+
+    for (let i = 0; i < tokenOrders?.length; i++) {
+      tokenOrders[i].tokenOrders.forEach((tokenOrder: OrdersData) => {
+        data.push(tokenOrder)
+      })
+    }
+
+    return data
+  } catch (error) {
+    Logger.error(error.message)
+  }
+}

From ddb96562706e1c0958e89ff781cc8fbbf2bc80f4 Mon Sep 17 00:00:00 2001
From: Bogdan Fazakas <bogdan.fazakas@gmail.com>
Date: Wed, 15 Sep 2021 13:14:09 +0300
Subject: [PATCH 29/31] remove chainId as a dependecy on sales and liquidity in
 own assets useEffect (#854)

---
 src/components/pages/Profile/Header/Stats.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/pages/Profile/Header/Stats.tsx b/src/components/pages/Profile/Header/Stats.tsx
index 3c86dbf3c..163394746 100644
--- a/src/components/pages/Profile/Header/Stats.tsx
+++ b/src/components/pages/Profile/Header/Stats.tsx
@@ -59,7 +59,7 @@ export default function Stats({
       }
     }
     getSales()
-  }, [accountId, chainIds, assets])
+  }, [accountId, assets])
 
   useEffect(() => {
     if (!assets || !accountId || !chainIds) return
@@ -84,7 +84,7 @@ export default function Stats({
       }
     }
     getPublisherLiquidity()
-  }, [assets, accountId, chainIds])
+  }, [assets, accountId])
 
   useEffect(() => {
     if (!poolShares) return

From 15a29bcb011d0d621fbdde675c20cef42d904762 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Wed, 15 Sep 2021 12:28:35 +0200
Subject: [PATCH 30/31] roll back search filter refactor for published list

---
 .../pages/Profile/History/PublishedList.tsx   |   7 +-
 src/components/templates/Search/Filters.tsx   | 292 ++++++++----------
 src/components/templates/Search/index.tsx     |   1 -
 3 files changed, 138 insertions(+), 162 deletions(-)

diff --git a/src/components/pages/Profile/History/PublishedList.tsx b/src/components/pages/Profile/History/PublishedList.tsx
index 6a1c7ea6e..21995ef76 100644
--- a/src/components/pages/Profile/History/PublishedList.tsx
+++ b/src/components/pages/Profile/History/PublishedList.tsx
@@ -3,7 +3,7 @@ import { QueryResult } from '@oceanprotocol/lib/dist/node/metadatacache/Metadata
 import React, { ReactElement, useEffect, useState } from 'react'
 import AssetList from '../../../organisms/AssetList'
 import { getPublishedAssets } from '../../../../utils/aquarius'
-import Filters from '../../../templates/Search/Filters'
+// import Filters from '../../../templates/Search/Filters'
 import { useSiteMetadata } from '../../../../hooks/useSiteMetadata'
 import { useUserPreferences } from '../../../../providers/UserPreferences'
 import styles from './PublishedList.module.css'
@@ -53,12 +53,11 @@ export default function PublishedList({
 
   return accountId ? (
     <>
-      <Filters
+      {/* <Filters
         serviceType={service}
         setServiceType={setServiceType}
-        isSearch={false}
         className={styles.filters}
-      />
+      /> */}
       <AssetList
         assets={queryResult?.results}
         isLoading={isLoading}
diff --git a/src/components/templates/Search/Filters.tsx b/src/components/templates/Search/Filters.tsx
index ecea7cd80..dd91e789e 100644
--- a/src/components/templates/Search/Filters.tsx
+++ b/src/components/templates/Search/Filters.tsx
@@ -23,20 +23,16 @@ const accessFilterItems = [
   { display: 'compute ', value: FilterByAccessOptions.Compute }
 ]
 
-export default function Filters({
+export default function FilterPrice({
   serviceType,
   accessType,
   setServiceType,
-  setAccessType,
-  isSearch,
-  className
+  setAccessType
 }: {
   serviceType: string
   accessType: string
   setServiceType: React.Dispatch<React.SetStateAction<string>>
-  isSearch: boolean
   setAccessType: React.Dispatch<React.SetStateAction<string>>
-  className?: string
 }): ReactElement {
   const navigate = useNavigate()
   const [serviceSelections, setServiceSelections] = useState<string[]>([])
@@ -50,165 +46,147 @@ export default function Filters({
       urlLocation = await addExistingParamsToUrl(location, ['serviceType'])
     }
 
-    async function applyServiceFilter(filterBy: string) {
-      setServiceType(filterBy)
-      if (filter && location.search.indexOf(filterType) === -1) {
-        filterType === 'accessType'
-          ? (urlLocation = `${urlLocation}&accessType=${filter}`)
-          : (urlLocation = `${urlLocation}&serviceType=${filter}`)
-      }
-
-      if (isSearch) {
-        let urlLocation = await addExistingParamsToUrl(location, [
-          'serviceType'
-        ])
-        if (filterBy && location.search.indexOf('&serviceType') === -1) {
-          urlLocation = `${urlLocation}&serviceType=${filterBy}`
-        }
-        filterType === 'accessType'
-          ? setAccessType(filter)
-          : setServiceType(filter)
-        navigate(urlLocation)
-      }
+    if (filter && location.search.indexOf(filterType) === -1) {
+      filterType === 'accessType'
+        ? (urlLocation = `${urlLocation}&accessType=${filter}`)
+        : (urlLocation = `${urlLocation}&serviceType=${filter}`)
     }
 
-    async function handleSelectedFilter(isSelected: boolean, value: string) {
-      if (
-        value === FilterByAccessOptions.Download ||
-        value === FilterByAccessOptions.Compute
-      ) {
-        if (isSelected) {
-          if (accessSelections.length > 1) {
-            // both selected -> select the other one
-            const otherValue = accessFilterItems.find(
-              (p) => p.value !== value
-            ).value
-            await applyFilter(otherValue, 'accessType')
-            setAccessSelections([otherValue])
-          } else {
-            // only the current one selected -> deselect it
-            await applyFilter(undefined, 'accessType')
-            setAccessSelections([])
-          }
+    filterType === 'accessType' ? setAccessType(filter) : setServiceType(filter)
+    navigate(urlLocation)
+  }
+
+  async function handleSelectedFilter(isSelected: boolean, value: string) {
+    if (
+      value === FilterByAccessOptions.Download ||
+      value === FilterByAccessOptions.Compute
+    ) {
+      if (isSelected) {
+        if (accessSelections.length > 1) {
+          // both selected -> select the other one
+          const otherValue = accessFilterItems.find(
+            (p) => p.value !== value
+          ).value
+          await applyFilter(otherValue, 'accessType')
+          setAccessSelections([otherValue])
         } else {
-          if (accessSelections.length) {
-            // one already selected -> both selected
-            await applyFilter(undefined, 'accessType')
-            setAccessSelections(accessFilterItems.map((p) => p.value))
-          } else {
-            // none selected -> select
-            await applyFilter(value, 'accessType')
-            setAccessSelections([value])
-          }
+          // only the current one selected -> deselect it
+          await applyFilter(undefined, 'accessType')
+          setAccessSelections([])
         }
       } else {
-        if (isSelected) {
-          if (serviceSelections.length > 1) {
-            const otherValue = serviceFilterItems.find(
-              (p) => p.value !== value
-            ).value
-            await applyFilter(otherValue, 'serviceType')
-            setServiceSelections([otherValue])
-          } else {
-            await applyFilter(undefined, 'serviceType')
-            setServiceSelections([])
-          }
+        if (accessSelections.length) {
+          // one already selected -> both selected
+          await applyFilter(undefined, 'accessType')
+          setAccessSelections(accessFilterItems.map((p) => p.value))
         } else {
-          if (serviceSelections.length) {
-            await applyFilter(undefined, 'serviceType')
-            setServiceSelections(serviceFilterItems.map((p) => p.value))
-          } else {
-            await applyFilter(value, 'serviceType')
-            setServiceSelections([value])
-          }
+          // none selected -> select
+          await applyFilter(value, 'accessType')
+          setAccessSelections([value])
+        }
+      }
+    } else {
+      if (isSelected) {
+        if (serviceSelections.length > 1) {
+          const otherValue = serviceFilterItems.find(
+            (p) => p.value !== value
+          ).value
+          await applyFilter(otherValue, 'serviceType')
+          setServiceSelections([otherValue])
+        } else {
+          await applyFilter(undefined, 'serviceType')
+          setServiceSelections([])
+        }
+      } else {
+        if (serviceSelections.length) {
+          await applyFilter(undefined, 'serviceType')
+          setServiceSelections(serviceFilterItems.map((p) => p.value))
+        } else {
+          await applyFilter(value, 'serviceType')
+          setServiceSelections([value])
         }
       }
     }
-
-    async function applyClearFilter(isSearch: boolean) {
-      setServiceSelections([])
-      setAccessSelections([])
-
-      setServiceType(undefined)
-      setAccessType(undefined)
-      if (isSearch) {
-        let urlLocation = await addExistingParamsToUrl(location, [
-          'serviceType'
-        ])
-        urlLocation = `${urlLocation}`
-        navigate(urlLocation)
-      }
-    }
-
-    const styleClasses = cx({
-      filterList: true,
-      [className]: className
-    })
-
-    return (
-      <div className={styleClasses}>
-        {serviceFilterItems.map((e, index) => {
-          const isServiceSelected =
-            e.value === serviceType || serviceSelections.includes(e.value)
-
-          const selectFilter = cx({
-            [styles.selected]: isServiceSelected,
-            [styles.filter]: true
-          })
-          return (
-            <Button
-              size="small"
-              style="text"
-              key={index}
-              className={selectFilter}
-              onClick={async () => {
-                handleSelectedFilter(isServiceSelected, e.value)
-              }}
-            >
-              {e.display}
-            </Button>
-          )
-        })}
-        <div className={styles.separator} />
-        {accessFilterItems.map((e, index) => {
-          const isAccessSelected =
-            e.value === accessType || accessSelections.includes(e.value)
-          const selectFilter = cx({
-            [styles.selected]: isAccessSelected,
-            [styles.filter]: true
-          })
-          return (
-            <Button
-              size="small"
-              style="text"
-              key={index}
-              className={selectFilter}
-              onClick={async () => {
-                handleSelectedFilter(isAccessSelected, e.value)
-              }}
-            >
-              {e.display}
-            </Button>
-          )
-        })}
-        {clearFilters.map((e, index) => {
-          const showClear =
-            accessSelections.length > 0 || serviceSelections.length > 0
-          return (
-            <Button
-              size="small"
-              style="text"
-              key={index}
-              className={showClear ? styles.showClear : styles.hideClear}
-              onClick={async () => {
-                applyClearFilter(isSearch)
-              }}
-            >
-              {e.display}
-            </Button>
-          )
-        })}
-      </div>
-    )
   }
+
+  async function applyClearFilter() {
+    let urlLocation = await addExistingParamsToUrl(location, [
+      'accessType',
+      'serviceType'
+    ])
+
+    urlLocation = `${urlLocation}`
+
+    setServiceSelections([])
+    setAccessSelections([])
+
+    setServiceType(undefined)
+    setAccessType(undefined)
+    navigate(urlLocation)
+  }
+
+  return (
+    <div className={styles.filterList}>
+      {serviceFilterItems.map((e, index) => {
+        const isServiceSelected =
+          e.value === serviceType || serviceSelections.includes(e.value)
+        const selectFilter = cx({
+          [styles.selected]: isServiceSelected,
+          [styles.filter]: true
+        })
+        return (
+          <Button
+            size="small"
+            style="text"
+            key={index}
+            className={selectFilter}
+            onClick={async () => {
+              handleSelectedFilter(isServiceSelected, e.value)
+            }}
+          >
+            {e.display}
+          </Button>
+        )
+      })}
+      <div className={styles.separator} />
+      {accessFilterItems.map((e, index) => {
+        const isAccessSelected =
+          e.value === accessType || accessSelections.includes(e.value)
+        const selectFilter = cx({
+          [styles.selected]: isAccessSelected,
+          [styles.filter]: true
+        })
+        return (
+          <Button
+            size="small"
+            style="text"
+            key={index}
+            className={selectFilter}
+            onClick={async () => {
+              handleSelectedFilter(isAccessSelected, e.value)
+            }}
+          >
+            {e.display}
+          </Button>
+        )
+      })}
+      {clearFilters.map((e, index) => {
+        const showClear =
+          accessSelections.length > 0 || serviceSelections.length > 0
+        return (
+          <Button
+            size="small"
+            style="text"
+            key={index}
+            className={showClear ? styles.showClear : styles.hideClear}
+            onClick={async () => {
+              applyClearFilter()
+            }}
+          >
+            {e.display}
+          </Button>
+        )
+      })}
+    </div>
+  )
 }
diff --git a/src/components/templates/Search/index.tsx b/src/components/templates/Search/index.tsx
index bf7b35bc0..a493657cb 100644
--- a/src/components/templates/Search/index.tsx
+++ b/src/components/templates/Search/index.tsx
@@ -80,7 +80,6 @@ export default function SearchPage({
               accessType={access}
               setServiceType={setServiceType}
               setAccessType={setAccessType}
-              isSearch
             />
             <Sort
               sortType={sortType}

From 212865110e1db065ab7d6c81c1b6195aca02de1b Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Mon, 20 Sep 2021 13:47:15 +0200
Subject: [PATCH 31/31] ENS names (#860)

* prototype getting ENS names

* get ENS name with subgraph

* ENS name for publisher line

* inject ENS name in profile page

* refactor to cover all use cases for profile URLs

* fixes for switching between own and other profiles

* remove testing ENS libraries

* more cleanup

* any solves everything

* build fix

* more profile switching tweaks

* link publisher line to ens name

* another profile switching fix

* show ENS link in meta line
---
 package-lock.json                             | 20 -------
 package.json                                  |  1 -
 src/components/atoms/Publisher/index.tsx      | 25 ++++++---
 src/components/molecules/Wallet/Account.tsx   |  4 +-
 .../pages/Profile/Header/Account.tsx          | 12 ++---
 src/components/pages/Profile/Header/index.tsx | 28 +++++++---
 src/models/Profile.ts                         |  1 +
 src/pages/profile/index.tsx                   | 52 +++++++++++++++---
 src/providers/Profile.tsx                     | 32 ++++++-----
 src/providers/Web3.tsx                        | 53 +++++++++++--------
 src/utils/ens.ts                              | 52 ++++++++++++++++++
 11 files changed, 196 insertions(+), 84 deletions(-)
 create mode 100644 src/utils/ens.ts

diff --git a/package-lock.json b/package-lock.json
index 94e78b378..153f41abd 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -86,7 +86,6 @@
         "@testing-library/jest-dom": "^5.12.0",
         "@testing-library/react": "^11.2.7",
         "@types/chart.js": "^2.9.32",
-        "@types/classnames": "^2.3.1",
         "@types/jest": "^26.0.23",
         "@types/loadable__component": "^5.13.1",
         "@types/lodash.debounce": "^4.0.3",
@@ -10515,16 +10514,6 @@
         "moment": "^2.10.2"
       }
     },
-    "node_modules/@types/classnames": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/@types/classnames/-/classnames-2.3.1.tgz",
-      "integrity": "sha512-zeOWb0JGBoVmlQoznvqXbE0tEC/HONsnoUNH19Hc96NFsTAwTXbTqb8FMYkru1F/iqp7a18Ws3nWJvtA1sHD1A==",
-      "deprecated": "This is a stub types definition. classnames provides its own type definitions, so you do not need this installed.",
-      "dev": true,
-      "dependencies": {
-        "classnames": "*"
-      }
-    },
     "node_modules/@types/clipboard": {
       "version": "2.0.7",
       "resolved": "https://registry.npmjs.org/@types/clipboard/-/clipboard-2.0.7.tgz",
@@ -67020,15 +67009,6 @@
         "moment": "^2.10.2"
       }
     },
-    "@types/classnames": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/@types/classnames/-/classnames-2.3.1.tgz",
-      "integrity": "sha512-zeOWb0JGBoVmlQoznvqXbE0tEC/HONsnoUNH19Hc96NFsTAwTXbTqb8FMYkru1F/iqp7a18Ws3nWJvtA1sHD1A==",
-      "dev": true,
-      "requires": {
-        "classnames": "*"
-      }
-    },
     "@types/clipboard": {
       "version": "2.0.7",
       "resolved": "https://registry.npmjs.org/@types/clipboard/-/clipboard-2.0.7.tgz",
diff --git a/package.json b/package.json
index 7bfab8799..318ef028c 100644
--- a/package.json
+++ b/package.json
@@ -101,7 +101,6 @@
     "@testing-library/jest-dom": "^5.12.0",
     "@testing-library/react": "^11.2.7",
     "@types/chart.js": "^2.9.32",
-    "@types/classnames": "^2.3.1",
     "@types/jest": "^26.0.23",
     "@types/loadable__component": "^5.13.1",
     "@types/lodash.debounce": "^4.0.3",
diff --git a/src/components/atoms/Publisher/index.tsx b/src/components/atoms/Publisher/index.tsx
index 38934bf90..734fd1e02 100644
--- a/src/components/atoms/Publisher/index.tsx
+++ b/src/components/atoms/Publisher/index.tsx
@@ -8,6 +8,7 @@ import { accountTruncate } from '../../../utils/web3'
 import axios from 'axios'
 import Add from './Add'
 import { useWeb3 } from '../../../providers/Web3'
+import { getEnsName } from '../../../utils/ens'
 
 const cx = classNames.bind(styles)
 
@@ -20,27 +21,34 @@ export default function Publisher({
   minimal?: boolean
   className?: string
 }): ReactElement {
-  const { networkId, accountId } = useWeb3()
+  const { accountId } = useWeb3()
   const [profile, setProfile] = useState<Profile>()
-  const [name, setName] = useState<string>()
+  const [name, setName] = useState(accountTruncate(account))
+  const [accountEns, setAccountEns] = useState<string>()
 
   const showAdd = account === accountId && !profile
 
   useEffect(() => {
     if (!account) return
 
-    setName(accountTruncate(account))
     const source = axios.CancelToken.source()
 
-    async function get3Box() {
+    async function getExternalName() {
+      // ENS
+      const accountEns = await getEnsName(account)
+      if (accountEns) {
+        setAccountEns(accountEns)
+        setName(accountEns)
+      }
+
+      // 3box
       const profile = await get3BoxProfile(account, source.token)
       if (!profile) return
-
       setProfile(profile)
       const { name, emoji } = profile
       name && setName(`${emoji || ''} ${name}`)
     }
-    get3Box()
+    getExternalName()
 
     return () => {
       source.cancel()
@@ -58,7 +66,10 @@ export default function Publisher({
         name
       ) : (
         <>
-          <Link to={`/profile/${account}`} title="Show profile page.">
+          <Link
+            to={`/profile/${accountEns || account}`}
+            title="Show profile page."
+          >
             {name}
           </Link>
           {showAdd && <Add />}
diff --git a/src/components/molecules/Wallet/Account.tsx b/src/components/molecules/Wallet/Account.tsx
index 22c2ad249..e95430306 100644
--- a/src/components/molecules/Wallet/Account.tsx
+++ b/src/components/molecules/Wallet/Account.tsx
@@ -9,7 +9,7 @@ import Blockies from '../../atoms/Blockies'
 // Forward ref for Tippy.js
 // eslint-disable-next-line
 const Account = React.forwardRef((props, ref: any) => {
-  const { accountId, web3Modal, connect } = useWeb3()
+  const { accountId, accountEns, web3Modal, connect } = useWeb3()
 
   async function handleActivation(e: FormEvent<HTMLButtonElement>) {
     // prevent accidentially submitting a form the button might be in
@@ -32,7 +32,7 @@ const Account = React.forwardRef((props, ref: any) => {
     >
       <Blockies accountId={accountId} />
       <span className={styles.address} title={accountId}>
-        {accountTruncate(accountId)}
+        {accountTruncate(accountEns || accountId)}
       </span>
       <Caret aria-hidden="true" className={styles.caret} />
     </button>
diff --git a/src/components/pages/Profile/Header/Account.tsx b/src/components/pages/Profile/Header/Account.tsx
index 4878a9efc..084526671 100644
--- a/src/components/pages/Profile/Header/Account.tsx
+++ b/src/components/pages/Profile/Header/Account.tsx
@@ -1,6 +1,5 @@
 import React, { ReactElement } from 'react'
 import { useUserPreferences } from '../../../../providers/UserPreferences'
-import { accountTruncate } from '../../../../utils/web3'
 import ExplorerLink from '../../../atoms/ExplorerLink'
 import NetworkName from '../../../atoms/NetworkName'
 import jellyfish from '@oceanprotocol/art/creatures/jellyfish/jellyfish-grid.svg'
@@ -40,12 +39,13 @@ export default function Account({
       </figure>
 
       <div>
-        <h3 className={styles.name}>
-          {profile?.name || accountTruncate(accountId)}
-        </h3>
+        <h3 className={styles.name}>{profile?.name}</h3>
         {accountId && (
-          <code className={styles.accountId}>
-            {accountId} <Copy text={accountId} />
+          <code
+            className={styles.accountId}
+            title={profile?.accountEns ? accountId : null}
+          >
+            {profile?.accountEns || accountId} <Copy text={accountId} />
           </code>
         )}
         <p>
diff --git a/src/components/pages/Profile/Header/index.tsx b/src/components/pages/Profile/Header/index.tsx
index 42fb0370c..95f05fae9 100644
--- a/src/components/pages/Profile/Header/index.tsx
+++ b/src/components/pages/Profile/Header/index.tsx
@@ -11,13 +11,9 @@ const isDescriptionTextClamped = () => {
   if (el) return el.scrollHeight > el.clientHeight
 }
 
-const Link3Box = ({ accountId, text }: { accountId: string; text: string }) => {
+const LinkExternal = ({ url, text }: { url: string; text: string }) => {
   return (
-    <a
-      href={`https://www.3box.io/${accountId}`}
-      target="_blank"
-      rel="noreferrer"
-    >
+    <a href={url} target="_blank" rel="noreferrer">
       {text}
     </a>
   )
@@ -46,7 +42,10 @@ export default function AccountHeader({
         <Markdown text={profile?.description} className={styles.description} />
         {isDescriptionTextClamped() ? (
           <span className={styles.more} onClick={toogleShowMore}>
-            <Link3Box accountId={accountId} text="Read more on 3box" />
+            <LinkExternal
+              url={`https://www.3box.io/${accountId}`}
+              text="Read more on 3box"
+            />
           </span>
         ) : (
           ''
@@ -56,7 +55,20 @@ export default function AccountHeader({
         )}
       </div>
       <div className={styles.meta}>
-        Profile data from <Link3Box accountId={accountId} text="3Box Hub" />
+        Profile data from{' '}
+        {profile?.accountEns && (
+          <>
+            <LinkExternal
+              url={`https://app.ens.domains/name/${profile.accountEns}`}
+              text="ENS"
+            />{' '}
+            &{' '}
+          </>
+        )}
+        <LinkExternal
+          url={`https://www.3box.io/${accountId}`}
+          text="3Box Hub"
+        />
       </div>
     </div>
   )
diff --git a/src/models/Profile.ts b/src/models/Profile.ts
index a653dbb53..195c531cd 100644
--- a/src/models/Profile.ts
+++ b/src/models/Profile.ts
@@ -6,6 +6,7 @@ export interface ProfileLink {
 export interface Profile {
   did?: string
   name?: string
+  accountEns?: string
   description?: string
   emoji?: string
   image?: string
diff --git a/src/pages/profile/index.tsx b/src/pages/profile/index.tsx
index 2c2012f03..160a43261 100644
--- a/src/pages/profile/index.tsx
+++ b/src/pages/profile/index.tsx
@@ -1,25 +1,63 @@
 import React, { ReactElement, useEffect, useState } from 'react'
 import Page from '../../components/templates/Page'
-import { graphql, PageProps } from 'gatsby'
+import { graphql, PageProps, navigate } from 'gatsby'
 import ProfilePage from '../../components/pages/Profile'
 import { accountTruncate } from '../../utils/web3'
 import { useWeb3 } from '../../providers/Web3'
 import ProfileProvider from '../../providers/Profile'
+import { getEnsAddress, getEnsName } from '../../utils/ens'
+import ethereumAddress from 'ethereum-address'
 
 export default function PageGatsbyProfile(props: PageProps): ReactElement {
-  const { accountId } = useWeb3()
+  const { accountId, accountEns } = useWeb3()
   const [finalAccountId, setFinalAccountId] = useState<string>()
+  const [finalAccountEns, setFinalAccountEns] = useState<string>()
 
   // Have accountId in path take over, if not present fall back to web3
   useEffect(() => {
-    const pathAccountId = props.location.pathname.split('/')[2]
-    const finalAccountId = pathAccountId || accountId
-    setFinalAccountId(finalAccountId)
-  }, [props.location.pathname, accountId])
+    async function init() {
+      if (!props?.location?.pathname) return
+
+      // Path is root /profile, have web3 take over
+      if (props.location.pathname === '/profile') {
+        setFinalAccountEns(accountEns)
+        setFinalAccountId(accountId)
+        return
+      }
+
+      const pathAccount = props.location.pathname.split('/')[2]
+
+      // Path has ETH addreess
+      if (ethereumAddress.isAddress(pathAccount)) {
+        const finalAccountId = pathAccount || accountId
+        setFinalAccountId(finalAccountId)
+
+        const accountEns = await getEnsName(finalAccountId)
+        if (!accountEns) return
+        setFinalAccountEns(accountEns)
+      } else {
+        // Path has ENS name
+        setFinalAccountEns(pathAccount)
+        const resolvedAccountId = await getEnsAddress(pathAccount)
+        setFinalAccountId(resolvedAccountId)
+      }
+    }
+    init()
+  }, [props.location.pathname, accountId, accountEns])
+
+  // Replace pathname with ENS name if present
+  useEffect(() => {
+    if (!finalAccountEns || props.location.pathname === '/profile') return
+
+    const newProfilePath = `/profile/${finalAccountEns}`
+    // make sure we only replace path once
+    if (newProfilePath !== props.location.pathname)
+      navigate(newProfilePath, { replace: true })
+  }, [props.location, finalAccountEns, accountId])
 
   return (
     <Page uri={props.uri} title={accountTruncate(finalAccountId)} noPageHeader>
-      <ProfileProvider accountId={finalAccountId}>
+      <ProfileProvider accountId={finalAccountId} accountEns={finalAccountEns}>
         <ProfilePage accountId={finalAccountId} />
       </ProfileProvider>
     </Page>
diff --git a/src/providers/Profile.tsx b/src/providers/Profile.tsx
index cbe8d3bd2..8cb2689aa 100644
--- a/src/providers/Profile.tsx
+++ b/src/providers/Profile.tsx
@@ -42,9 +42,11 @@ const refreshInterval = 10000 // 10 sec.
 
 function ProfileProvider({
   accountId,
+  accountEns,
   children
 }: {
   accountId: string
+  accountEns: string
   children: ReactNode
 }): ReactElement {
   const { chainIds } = useUserPreferences()
@@ -62,18 +64,19 @@ function ProfileProvider({
   }, [accountId])
 
   //
-  // 3Box
+  // User profile: ENS + 3Box
   //
-  const [profile, setProfile] = useState<Profile>({
-    name: accountTruncate(accountId),
-    image: null,
-    description: null,
-    links: null
-  })
+  const [profile, setProfile] = useState<Profile>()
+
+  useEffect(() => {
+    if (!accountEns) return
+    Logger.log(`[profile] ENS name found for ${accountId}:`, accountEns)
+  }, [accountId, accountEns])
 
   useEffect(() => {
     const clearedProfile: Profile = {
       name: null,
+      accountEns: null,
       image: null,
       description: null,
       links: null
@@ -86,7 +89,9 @@ function ProfileProvider({
 
     const cancelTokenSource = axios.CancelToken.source()
 
-    async function getInfoFrom3Box() {
+    async function getInfo() {
+      setProfile({ name: accountEns || accountTruncate(accountId), accountEns })
+
       const profile3Box = await get3BoxProfile(
         accountId,
         cancelTokenSource.token
@@ -100,19 +105,22 @@ function ProfileProvider({
           description,
           links
         }
-        setProfile(newProfile)
+        setProfile((prevState) => ({
+          ...prevState,
+          ...newProfile
+        }))
         Logger.log('[profile] Found and set 3box profile.', newProfile)
       } else {
-        setProfile(clearedProfile)
+        // setProfile(clearedProfile)
         Logger.log('[profile] No 3box profile found.')
       }
     }
-    getInfoFrom3Box()
+    getInfo()
 
     return () => {
       cancelTokenSource.cancel()
     }
-  }, [accountId, isEthAddress])
+  }, [accountId, accountEns, isEthAddress])
 
   //
   // POOL SHARES
diff --git a/src/providers/Web3.tsx b/src/providers/Web3.tsx
index 09eca99eb..5f76e8fe3 100644
--- a/src/providers/Web3.tsx
+++ b/src/providers/Web3.tsx
@@ -18,7 +18,7 @@ import {
   getNetworkDataById,
   getNetworkDisplayName
 } from '../utils/web3'
-import { graphql } from 'gatsby'
+import { getEnsName } from '../utils/ens'
 import { UserBalance } from '../@types/TokenBalance'
 import { getOceanBalance } from '../utils/ocean'
 import useNetworkMetadata from '../hooks/useNetworkMetadata'
@@ -29,6 +29,7 @@ interface Web3ProviderValue {
   web3Modal: Web3Modal
   web3ProviderInfo: IProviderInfo
   accountId: string
+  accountEns: string
   balance: UserBalance
   networkId: number
   chainId: number
@@ -84,26 +85,6 @@ export const web3ModalOpts = {
 
 const refreshInterval = 20000 // 20 sec.
 
-const networksQuery = graphql`
-  query {
-    allNetworksMetadataJson {
-      edges {
-        node {
-          chain
-          network
-          networkId
-          chainId
-          nativeCurrency {
-            name
-            symbol
-            decimals
-          }
-        }
-      }
-    }
-  }
-`
-
 const Web3Context = createContext({} as Web3ProviderValue)
 
 function Web3Provider({ children }: { children: ReactNode }): ReactElement {
@@ -120,6 +101,7 @@ function Web3Provider({ children }: { children: ReactNode }): ReactElement {
   const [block, setBlock] = useState<number>()
   const [isTestnet, setIsTestnet] = useState<boolean>()
   const [accountId, setAccountId] = useState<string>()
+  const [accountEns, setAccountEns] = useState<string>()
   const [web3Loading, setWeb3Loading] = useState<boolean>(true)
   const [balance, setBalance] = useState<UserBalance>({
     eth: '0',
@@ -181,6 +163,27 @@ function Web3Provider({ children }: { children: ReactNode }): ReactElement {
     }
   }, [accountId, networkId, web3])
 
+  // -----------------------------------
+  // Helper: Get user ENS name
+  // -----------------------------------
+  const getUserEnsName = useCallback(async () => {
+    if (!accountId) return
+
+    try {
+      // const accountEns = await getEnsNameWithWeb3(
+      //   accountId,
+      //   web3Provider,
+      //   `${networkId}`
+      // )
+      const accountEns = await getEnsName(accountId)
+      setAccountEns(accountEns)
+      accountEns &&
+        Logger.log(`[web3] ENS name found for ${accountId}:`, accountEns)
+    } catch (error) {
+      Logger.error('[web3] Error: ', error.message)
+    }
+  }, [accountId])
+
   // -----------------------------------
   // Create initial Web3Modal instance
   // -----------------------------------
@@ -229,6 +232,13 @@ function Web3Provider({ children }: { children: ReactNode }): ReactElement {
     }
   }, [getUserBalance])
 
+  // -----------------------------------
+  // Get and set user ENS name
+  // -----------------------------------
+  useEffect(() => {
+    getUserEnsName()
+  }, [getUserEnsName])
+
   // -----------------------------------
   // Get and set network metadata
   // -----------------------------------
@@ -333,6 +343,7 @@ function Web3Provider({ children }: { children: ReactNode }): ReactElement {
         web3Modal,
         web3ProviderInfo,
         accountId,
+        accountEns,
         balance,
         networkId,
         chainId,
diff --git a/src/utils/ens.ts b/src/utils/ens.ts
new file mode 100644
index 000000000..9f2807bc3
--- /dev/null
+++ b/src/utils/ens.ts
@@ -0,0 +1,52 @@
+import { gql, OperationContext, OperationResult } from 'urql'
+import { fetchData } from './subgraph'
+
+// make sure to only query for domains owned by account, so domains
+// solely set by 3rd parties like *.gitcoin.eth won't show up
+const UserEnsNames = gql<any>`
+  query UserEnsDomains($accountId: String!) {
+    domains(where: { resolvedAddress: $accountId, owner: $accountId }) {
+      name
+    }
+  }
+`
+
+const UserEnsAddress = gql<any>`
+  query UserEnsDomainsAddress($name: String!) {
+    domains(where: { name: $name }) {
+      resolvedAddress {
+        id
+      }
+    }
+  }
+`
+
+const ensSubgraphQueryContext: OperationContext = {
+  url: `https://api.thegraph.com/subgraphs/name/ensdomains/ens`,
+  requestPolicy: 'cache-and-network'
+}
+
+export async function getEnsName(accountId: string): Promise<string> {
+  const response: OperationResult<any> = await fetchData(
+    UserEnsNames,
+    { accountId: accountId.toLowerCase() },
+    ensSubgraphQueryContext
+  )
+  if (!response?.data?.domains?.length) return
+
+  // Default order of response.data.domains seems to be by creation time, from oldest to newest.
+  // Pick the last one as that is what direct web3 calls do.
+  const { name } = response.data.domains.slice(-1)[0]
+  return name
+}
+
+export async function getEnsAddress(ensName: string): Promise<string> {
+  const response: OperationResult<any> = await fetchData(
+    UserEnsAddress,
+    { name: ensName },
+    ensSubgraphQueryContext
+  )
+  if (!response?.data?.domains?.length) return
+  const { id } = response.data.domains[0].resolvedAddress
+  return id
+}