fetch history published/shares/transactions/downloads using url account id and dynamic compute tab

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

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

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[]>()

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[]>()

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

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 = [
+interface HistoryTab {
+  title: string
+  content: JSX.Element
+}
+
+function getTabs(accountIdentifier: string): HistoryTab[] {
+  const { accountId } = useWeb3()
+  const defaultTabs: HistoryTab[] = [
     {
       title: 'Published',
-    content: <PublishedList />
+      content: <PublishedList accountId={accountIdentifier} />
     },
     {
       title: 'Pool Shares',
-    content: <PoolShares />
+      content: <PoolShares accountId={accountIdentifier} />
     },
     {
       title: 'Pool Transactions',
-    content: <PoolTransactions />
+      content: <PoolTransactions accountId={accountIdentifier} />
     },
     {
       title: 'Downloads',
-    content: <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 (

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