replace history page and route with account

_redirects

@@ -1 +1,2 @@
 /asset/* /asset/index.html 200
+/account/* /account/index.html 200

content/pages/account.json

@@ -0,0 +1,4 @@
+{
+  "title": "Account",
+  "description": "Find the data sets and jobs that you previously accessed."
+}

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."
   }

content/site.json

@@ -12,8 +12,8 @@
         "link": "/publish"
       },
       {
-        "name": "History",
+        "name": "My Account",
-        "link": "/history"
+        "link": "/account"
       }
     ],
     "warning": {

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/)
+  const handleClientSideOnlyAsset = page.path.match(/^\/asset/)
-
+  const handleClientSideOnlyAccount = page.path.match(/^\/account/)
-  if (handleClientSideOnly) {
-    page.matchPath = '/asset/*'
 
+  if (handleClientSideOnlyAsset || handleClientSideOnlyAccount) {
+    page.matchPath = handleClientSideOnlyAsset
+      ? '/asset/*'
+      : handleClientSideOnlyAsset
+      ? '/account/*'
+      : '/'
     // Update the page.
     createPage(page)
   }

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>
 )

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);

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 { ComputeJobMetaData } from '../../../../../@types/ComputeJobMetaData'
-import Time from '../../../atoms/Time'
+import Time from '../../../../atoms/Time'
-import Button from '../../../atoms/Button'
+import Button from '../../../../atoms/Button'
-import Modal from '../../../atoms/Modal'
+import Modal from '../../../../atoms/Modal'
-import MetaItem from '../../../organisms/AssetContent/MetaItem'
+import MetaItem from '../../../../organisms/AssetContent/MetaItem'
-import { ReactComponent as External } from '../../../../images/external.svg'
+import { ReactComponent as External } from '../../../../../images/external.svg'
-import { retrieveDDO } from '../../../../utils/aquarius'
+import { retrieveDDO } from '../../../../../utils/aquarius'
-import { useOcean } from '../../../../providers/Ocean'
+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,

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 Loader from '../../../../atoms/Loader'
-import { ComputeJobMetaData } from '../../../../@types/ComputeJobMetaData'
+import { ComputeJobMetaData } from '../../../../../@types/ComputeJobMetaData'
-import { ListItem } from '../../../atoms/Lists'
+import { ListItem } from '../../../../atoms/Lists'
-import Button from '../../../atoms/Button'
+import Button from '../../../../atoms/Button'
-import { useOcean } from '../../../../providers/Ocean'
+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 {

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 Table from '../../../../atoms/Table'
-import Button from '../../../atoms/Button'
+import Button from '../../../../atoms/Button'
-import { useOcean } from '../../../../providers/Ocean'
+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 { useUserPreferences } from '../../../../../providers/UserPreferences'
-import { getOceanConfig } from '../../../../utils/ocean'
+import { getOceanConfig } from '../../../../../utils/ocean'
-import { fetchDataForMultipleChains } from '../../../../utils/subgraph'
+import { fetchDataForMultipleChains } from '../../../../../utils/subgraph'
 import {
   OrdersData_tokenOrders as OrdersData,
   OrdersData_tokenOrders_datatokenId as OrdersDatatoken
-} from '../../../../@types/apollo/OrdersData'
+} from '../../../../../@types/apollo/OrdersData'
-import NetworkName from '../../../atoms/NetworkName'
+import NetworkName from '../../../../atoms/NetworkName'
 
 const getComputeOrders = gql`
   query ComputeOrders($user: String!) {

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 AssetTitle from '../../../molecules/AssetListTitle'
-import { useWeb3 } from '../../../providers/Web3'
+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 { useSiteMetadata } from '../../../../hooks/useSiteMetadata'
-import { useUserPreferences } from '../../../providers/UserPreferences'
+import { useUserPreferences } from '../../../../providers/UserPreferences'
-import { fetchDataForMultipleChains } from '../../../utils/subgraph'
+import { fetchDataForMultipleChains } from '../../../../utils/subgraph'
-import { OrdersData_tokenOrders as OrdersData } from '../../../@types/apollo/OrdersData'
+import { OrdersData_tokenOrders as OrdersData } from '../../../../@types/apollo/OrdersData'
-import NetworkName from '../../atoms/NetworkName'
+import NetworkName from '../../../atoms/NetworkName'
 
 const getTokenOrders = gql`
   query OrdersData($user: String!) {

src/components/pages/Account/History/PoolShares.tsx

@@ -1,22 +1,22 @@
 import React, { ReactElement, useEffect, useState } from 'react'
-import Table from '../../atoms/Table'
+import Table from '../../../atoms/Table'
-import Conversion from '../../atoms/Price/Conversion'
+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 Token from '../../../organisms/AssetActions/Pool/Token'
-import { useWeb3 } from '../../../providers/Web3'
+import { useWeb3 } from '../../../../providers/Web3'
-import { useUserPreferences } from '../../../providers/UserPreferences'
+import { useUserPreferences } from '../../../../providers/UserPreferences'
-import { fetchDataForMultipleChains } from '../../../utils/subgraph'
+import { fetchDataForMultipleChains } from '../../../../utils/subgraph'
-import NetworkName from '../../atoms/NetworkName'
+import NetworkName from '../../../atoms/NetworkName'
 import axios from 'axios'
-import { retrieveDDO } from '../../../utils/aquarius'
+import { retrieveDDO } from '../../../../utils/aquarius'
 
 const REFETCH_INTERVAL = 20000
 

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'
+} from '../../../../utils/aquarius'
-import { useWeb3 } from '../../../providers/Web3'
+import { useWeb3 } from '../../../../providers/Web3'
-import { useSiteMetadata } from '../../../hooks/useSiteMetadata'
+import { useSiteMetadata } from '../../../../hooks/useSiteMetadata'
-import { useUserPreferences } from '../../../providers/UserPreferences'
+import { useUserPreferences } from '../../../../providers/UserPreferences'
 
 export default function PublishedList(): ReactElement {
   const { accountId } = useWeb3()

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 { useUserPreferences } from '../../../../providers/UserPreferences'
-import OceanProvider from '../../../providers/Ocean'
+import OceanProvider from '../../../../providers/Ocean'
 
 const tabs = [
   {

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>
+  )
+}

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
+          }
+        }
+      }
+    }
+  }
+`

src/pages/history.tsx

@@ -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
-          }
-        }
-      }
-    }
-  }
-`

tests/unit/__fixtures__/siteMetadata.json

@@ -23,8 +23,8 @@
                   "link": "/publish"
                 },
                 {
-                  "name": "History",
+                  "name": "Account",
-                  "link": "/history"
+                  "link": "/account"
                 }
               ]
             }