more ComputeJobs refactor

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

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"

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