Merge pull request #2304 from webb-tools/linh/overview-service-table

feat(tangle-dapp): Integrate backend on Active Service table on Overview page

apps/tangle-dapp/app/services/ActiveServicesTable.tsx

@@ -4,30 +4,28 @@ import { Typography } from '@webb-tools/webb-ui-components';
 import { FC } from 'react';
 
 import { ContainerSkeleton, ServiceTable, TableStatus } from '../../components';
-import { useActiveServices } from '../../data/serviceOverview';
+import useServiceOverview from '../../data/serviceOverview/useServiceOverview';
 
 const pageSize = 10;
 
 const ActiveServicesTable: FC = () => {
-  const { data: activeServicesData, isLoading: activeServicesDataLoading } =
-    useActiveServices();
+  const { services, isLoading } = useServiceOverview();
 
   return (
     <div className="space-y-5">
       <Typography variant="h4" fw="bold">
         Active Services
       </Typography>
-      {activeServicesData && activeServicesData.length === 0 ? (
+      {services && services.length === 0 ? (
         <TableStatus
-          title="No Past Services Found"
+          title="No Active Services Found"
           description="No ongoing MPC services at the moment. Active services will be listed here."
           icon="⏳"
         />
-      ) : activeServicesDataLoading || !activeServicesData ? (
+      ) : isLoading || !services ? (
         <ContainerSkeleton />
       ) : (
-        // TODO: Handle lazy load when integrating with backend
-        <ServiceTable data={activeServicesData} pageSize={pageSize} />
+        <ServiceTable data={services} pageSize={pageSize} />
       )}
     </div>
   );

apps/tangle-dapp/app/services/layout.tsx

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+
+import ServiceOverviewContext from '../../context/ServiceOverviewContext';
+
+export default function ServiceDetailsLayout({
+  children,
+}: {
+  children: ReactNode;
+}) {
+  return <ServiceOverviewContext>{children}</ServiceOverviewContext>;
+}

apps/tangle-dapp/context/ServiceOverviewContext.tsx

@@ -0,0 +1,49 @@
+'use client';
+
+import { Option } from '@polkadot/types';
+import { TanglePrimitivesJobsJobInfo } from '@polkadot/types/lookup';
+import { createContext, FC, PropsWithChildren, useCallback } from 'react';
+import { map } from 'rxjs/operators';
+
+import usePolkadotApiRx from '../hooks/usePolkadotApiRx';
+import { Service } from '../types';
+import { extractServiceDetails } from '../utils/polkadot/services';
+
+export const ServiceOverviewContext = createContext<{
+  services: Service[];
+  isLoading: boolean;
+}>({
+  services: [],
+  isLoading: true,
+});
+
+const ServiceOverviewProvider: FC<PropsWithChildren> = ({ children }) => {
+  const { data: services, isLoading } = usePolkadotApiRx(
+    useCallback((api) => {
+      return api.query.jobs.submittedJobs.entries().pipe(
+        map((jobsData) =>
+          jobsData
+            .map(([key, job]) => {
+              const id = key.args[1].toString();
+              const service = extractServiceDetails(
+                id,
+                job as Option<TanglePrimitivesJobsJobInfo>
+              );
+              return service;
+            })
+            .filter((service): service is Service => service !== null)
+        )
+      );
+    }, [])
+  );
+
+  return (
+    <ServiceOverviewContext.Provider
+      value={{ services: services ?? [], isLoading }}
+    >
+      {children}
+    </ServiceOverviewContext.Provider>
+  );
+};
+
+export default ServiceOverviewProvider;

apps/tangle-dapp/data/serviceOverview/index.ts

@@ -1 +1 @@
-export { default as useActiveServices } from './useActiveServices';
+export { default as useServiceOverview } from './useServiceOverview';

apps/tangle-dapp/data/serviceOverview/useServiceOverview.ts

@@ -0,0 +1,9 @@
+'use client';
+
+import { useContext } from 'react';
+
+import { ServiceOverviewContext } from '../../context/ServiceOverviewContext';
+
+export default function useServiceOverview() {
+  return useContext(ServiceOverviewContext);
+}