Refactor imports and add UserBalanceProvider and ServicesService

frontend/client/types.ts

@@ -1,5 +1,6 @@
 import { Address } from '@/types';
-import { Ledger, Chain, DeploymentStatus } from './enums';
+
+import { Chain, DeploymentStatus, Ledger } from './enums';
 
 export type ServiceHash = string;
 

frontend/context/UserBalanceProvider.tsx

@@ -0,0 +1,34 @@
+import { createContext, PropsWithChildren, useState } from 'react';
+import { useInterval } from 'usehooks-ts';
+
+import { useAppInfo } from '@/hooks';
+import { EthersService } from '@/service';
+
+export const UserBalanceContext = createContext<{
+  balance: number;
+}>({
+  balance: 0,
+});
+
+export const UserBalanceProvider = ({ children }: PropsWithChildren) => {
+  const { userPublicKey } = useAppInfo();
+  const [balance, setBalance] = useState<number>(0);
+
+  const updateBalance = async () => {
+    const isRpcValid = await EthersService.checkRpc('http://localhost:8545');
+    if (userPublicKey && isRpcValid)
+      EthersService.getEthBalance(userPublicKey, 'http://localhost:8545').then(
+        (res) => setBalance(res),
+      );
+  };
+
+  useInterval(() => {
+    updateBalance();
+  }, 5000);
+
+  return (
+    <UserBalanceContext.Provider value={{ balance }}>
+      {children}
+    </UserBalanceContext.Provider>
+  );
+};

frontend/service/Services.ts

@@ -0,0 +1,101 @@
+import { Deployment, Service, ServiceHash, ServiceTemplate } from '@/client';
+import { BACKEND_URL } from '@/constants';
+
+/**
+ * Get a single service from the backend
+ * @param serviceHash
+ * @returns
+ */
+const getService = async (serviceHash: ServiceHash): Promise<Service> =>
+  fetch(`${BACKEND_URL}/services/${serviceHash}`).then((response) =>
+    response.json(),
+  );
+
+/**
+ * Gets an array of services from the backend
+ * @returns An array of services
+ */
+const getServices = async (): Promise<Service[]> =>
+  fetch(`${BACKEND_URL}/services`, {
+    method: 'GET',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  }).then((response) => response.json());
+
+/**
+ * Creates a service
+ * @param serviceTemplate
+ * @returns Promise<Service>
+ */
+const createService = async ({
+  serviceTemplate,
+  deploy,
+}: {
+  serviceTemplate: ServiceTemplate;
+  deploy: boolean;
+}): Promise<Service> =>
+  fetch(`${BACKEND_URL}/services`, {
+    method: 'POST',
+    body: JSON.stringify({
+      ...serviceTemplate,
+      deploy,
+      configuration: {
+        ...serviceTemplate.configuration,
+        rpc: 'http://localhost:8545',
+      },
+    }),
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  }).then((response) => response.json());
+
+const deployOnChain = async (serviceHash: ServiceHash): Promise<Deployment> =>
+  fetch(`${BACKEND_URL}/services/${serviceHash}/onchain/deploy`, {
+    method: 'POST',
+  }).then((response) => response.json());
+
+const stopOnChain = async (serviceHash: ServiceHash): Promise<Deployment> =>
+  fetch(`${BACKEND_URL}/services/${serviceHash}/onchain/stop`, {
+    method: 'POST',
+  }).then((response) => response.json());
+
+const buildDeployment = async (serviceHash: ServiceHash): Promise<Deployment> =>
+  fetch(`${BACKEND_URL}/services/${serviceHash}/deployment/build`, {
+    method: 'POST',
+  }).then((response) => response.json());
+
+const startDeployment = async (serviceHash: ServiceHash): Promise<Deployment> =>
+  fetch(`${BACKEND_URL}/services/${serviceHash}/deployment/start`, {
+    method: 'POST',
+  }).then((response) => response.json());
+
+const stopDeployment = async (serviceHash: ServiceHash): Promise<Deployment> =>
+  fetch(`${BACKEND_URL}/services/${serviceHash}/deployment/stop`, {
+    method: 'POST',
+  }).then((response) => response.json());
+
+const deleteDeployment = async (
+  serviceHash: ServiceHash,
+): Promise<Deployment> =>
+  fetch(`${BACKEND_URL}/services/${serviceHash}/deployment/delete`, {
+    method: 'POST',
+  }).then((response) => response.json());
+
+const getDeployment = async (serviceHash: ServiceHash): Promise<Deployment> =>
+  fetch(`${BACKEND_URL}/services/${serviceHash}/deployment`).then((response) =>
+    response.json(),
+  );
+
+export const ServicesService = {
+  getService,
+  getServices,
+  getDeployment,
+  createService,
+  deployOnChain,
+  stopOnChain,
+  buildDeployment,
+  startDeployment,
+  stopDeployment,
+  deleteDeployment,
+};