From 0dfc01c601233a32c2bb6a46c18fb28c810bdc2f Mon Sep 17 00:00:00 2001 From: Josh Miller Date: Tue, 20 Feb 2024 23:47:37 +0000 Subject: [PATCH] clean up --- frontend/abi/index.ts | 1 + frontend/client/client.ts | 189 ------------------ frontend/client/index.ts | 1 - frontend/client/types.ts | 2 - .../components/Modals/QRModal/QRModal.tsx | 2 +- frontend/components/Modals/index.ts | 1 + frontend/components/Spawn/Funding/Funding.tsx | 2 +- .../Spawn/SpawnHeader/SpawnHeader.tsx | 4 +- .../SpawnStakingCheck/SpawnStakingCheck.tsx | 32 ++- frontend/components/Spawn/index.tsx | 5 +- .../YourAgents/HasAgents/HasAgents.tsx | 17 ++ .../YourAgents/NoAgents/NoAgents.tsx | 15 ++ .../ServiceCard/ServiceCardTotalBalance.tsx | 33 ++- frontend/components/YourAgents/YourAgents.tsx | 40 ++-- frontend/components/YourAgents/index.ts | 4 + frontend/constants/index.ts | 5 + frontend/constants/urls.ts | 2 +- .../AppInfoProvider/AppInfoProvider.tsx | 2 +- .../context/ModalsProvider/ModalsProvider.tsx | 4 +- .../ServicesProvider/ServicesProvider.tsx | 12 +- .../SpawnProvider/SpawnProvider.test.tsx | 2 +- .../context/SpawnProvider/SpawnProvider.tsx | 2 +- frontend/hooks/index.ts | 1 + frontend/hooks/useAppInfo.tsx | 2 +- frontend/hooks/useMarketplace.tsx | 2 +- frontend/hooks/useModals.tsx | 2 +- frontend/hooks/useMulticall.tsx | 4 +- frontend/hooks/useServices.tsx | 2 +- frontend/pages/_app.tsx | 4 +- .../pages/spawn/[serviceTemplateHash].tsx | 55 ++++- frontend/service/AppInfo.ts | 6 +- frontend/service/Services.ts | 9 +- frontend/service/index.ts | 2 + frontend/theme/index.ts | 1 + frontend/types/index.ts | 1 + 35 files changed, 176 insertions(+), 292 deletions(-) create mode 100644 frontend/abi/index.ts delete mode 100644 frontend/client/client.ts create mode 100644 frontend/components/Modals/index.ts create mode 100644 frontend/components/YourAgents/HasAgents/HasAgents.tsx create mode 100644 frontend/components/YourAgents/NoAgents/NoAgents.tsx create mode 100644 frontend/components/YourAgents/index.ts create mode 100644 frontend/constants/index.ts create mode 100644 frontend/service/index.ts create mode 100644 frontend/theme/index.ts create mode 100644 frontend/types/index.ts diff --git a/frontend/abi/index.ts b/frontend/abi/index.ts new file mode 100644 index 000000000..ef5553da9 --- /dev/null +++ b/frontend/abi/index.ts @@ -0,0 +1 @@ +export * from "./multicall3Abi"; diff --git a/frontend/client/client.ts b/frontend/client/client.ts deleted file mode 100644 index 21f4fe20d..000000000 --- a/frontend/client/client.ts +++ /dev/null @@ -1,189 +0,0 @@ -import { Action } from "./enums"; -import { - HttpResponse, - ClientResponse, - Deployment, - EmptyPayload, - StopDeployment, - Service, - EmptyResponse, - Services, - ServiceTemplate, - UpdateServicePayload, - DeleteServicesPayload, - DeleteServicesResponse, - AppInfo, -} from "./types"; - -export class HttpClient< - GetResponse, - PostRequest, - PostResponse, - PutRequest, - PutResponse, - DeleteRequest, - DeleteResponse, -> { - endpoint: string; - - constructor(endpoint: string) { - this.endpoint = endpoint; - } - - async request({ - data, - method, - }: { - data: string; - method: string; - }): Promise { - try { - const result = await fetch(this.endpoint, { - method: method, - body: data, - headers: { - "Content-Type": "application/json", - }, - }); - const response = await result.json(); - if (response.error) { - return { - error: response.error, - data: undefined, - }; - } - return { - error: undefined, - data: response, - }; - } catch (err) { - return { - error: String(err), - data: undefined, - }; - } - } - - async get(): Promise> { - try { - const result = await fetch(this.endpoint); - const response = await result.json(); - return { - error: undefined, - data: response, - }; - } catch { - return { - error: "Error connecting to server", - data: undefined, - }; - } - } - - async post({ - data, - }: { - data: PostRequest; - }): Promise> { - const response = await this.request({ - data: JSON.stringify(data), - method: "POST", - }); - return response as ClientResponse; - } - - async put({ - data, - }: { - data: PutRequest; - }): Promise> { - const response = await this.request({ - data: JSON.stringify(data), - method: "PUT", - }); - return response as ClientResponse; - } - - async delete({ - data, - }: { - data: DeleteRequest; - }): Promise> { - const response = await this.request({ - data: JSON.stringify(data), - method: "DELETE", - }); - return response as ClientResponse; - } -} - -export class DeploymentEndpoint extends HttpClient< - Deployment, - EmptyPayload, - Deployment, - EmptyPayload, - Deployment, - StopDeployment, - Deployment -> {} - -export class ServiceEndpoint extends HttpClient< - Service, - EmptyPayload, - EmptyResponse, - Service, - Service, - EmptyPayload, - EmptyResponse -> { - actions = { - [Action.STATUS]: "status", - [Action.BUILD]: "build", - [Action.DEPLOY]: "deploy", - [Action.STOP]: "stop", - }; - - constructor(endpoint: string) { - super(endpoint); - } - - deployment(action: Action) { - return new DeploymentEndpoint(`${this.endpoint}/${this.actions[action]}`); - } -} - -export class ServicesEndpoint extends HttpClient< - Services, - ServiceTemplate, - Service, - UpdateServicePayload, - Service, - DeleteServicesPayload, - DeleteServicesResponse -> { - constructor(endpoint: string) { - super(endpoint); - } - - service(hash: string): ServiceEndpoint { - return new ServiceEndpoint(`${this.endpoint}/${hash}`); - } -} - -export function getClient(url: string) { - const api = new HttpClient< - AppInfo, - EmptyPayload, - EmptyResponse, - EmptyPayload, - EmptyResponse, - EmptyPayload, - EmptyResponse - >(url); - const services = new ServicesEndpoint(`${url}/services`); - return { - url: url, - api: api, - services: services, - }; -} diff --git a/frontend/client/index.ts b/frontend/client/index.ts index c39b42e71..13e1105d6 100644 --- a/frontend/client/index.ts +++ b/frontend/client/index.ts @@ -1,3 +1,2 @@ -export * from "./client"; export * from "./enums"; export * from "./types"; diff --git a/frontend/client/types.ts b/frontend/client/types.ts index e5b048cf6..59d62d8f8 100644 --- a/frontend/client/types.ts +++ b/frontend/client/types.ts @@ -31,8 +31,6 @@ export type Service = { chain_data?: ChainData; }; -export type Services = Service[]; - export type ServiceTemplate = { name: string; hash: string; diff --git a/frontend/components/Modals/QRModal/QRModal.tsx b/frontend/components/Modals/QRModal/QRModal.tsx index 14104a1ba..94cf846a7 100644 --- a/frontend/components/Modals/QRModal/QRModal.tsx +++ b/frontend/components/Modals/QRModal/QRModal.tsx @@ -1,5 +1,5 @@ import { useModals } from "@/hooks"; -import { QRModalData } from "@/types/QRModalData"; +import { QRModalData } from "@/types"; import { Flex, Modal, QRCode, Typography } from "antd"; import { ethers } from "ethers"; import { useMemo } from "react"; diff --git a/frontend/components/Modals/index.ts b/frontend/components/Modals/index.ts new file mode 100644 index 000000000..1e93b64ab --- /dev/null +++ b/frontend/components/Modals/index.ts @@ -0,0 +1 @@ +export * from "./QRModal/QRModal"; diff --git a/frontend/components/Spawn/Funding/Funding.tsx b/frontend/components/Spawn/Funding/Funding.tsx index d7c2042a2..03930f6cc 100644 --- a/frontend/components/Spawn/Funding/Funding.tsx +++ b/frontend/components/Spawn/Funding/Funding.tsx @@ -1,6 +1,6 @@ import { Service } from "@/client"; import { SpawnScreenState } from "@/enums"; -import { useSpawn } from "@/hooks/useSpawn"; +import { useSpawn } from "@/hooks"; import { TimelineItemProps, Flex, Typography, Timeline } from "antd"; import { useState, useMemo, useEffect, SetStateAction, Dispatch } from "react"; diff --git a/frontend/components/Spawn/SpawnHeader/SpawnHeader.tsx b/frontend/components/Spawn/SpawnHeader/SpawnHeader.tsx index 49b504ed2..4fde330a1 100644 --- a/frontend/components/Spawn/SpawnHeader/SpawnHeader.tsx +++ b/frontend/components/Spawn/SpawnHeader/SpawnHeader.tsx @@ -1,5 +1,5 @@ -import { useSpawn } from "@/hooks/useSpawn"; -import { mainTheme } from "@/theme/mainTheme"; +import { useSpawn } from "@/hooks"; +import { mainTheme } from "@/theme"; import { Flex, Progress, Typography } from "antd"; import Image from "next/image"; import { useMemo } from "react"; diff --git a/frontend/components/Spawn/SpawnStakingCheck/SpawnStakingCheck.tsx b/frontend/components/Spawn/SpawnStakingCheck/SpawnStakingCheck.tsx index 99d855259..54b86a9f4 100644 --- a/frontend/components/Spawn/SpawnStakingCheck/SpawnStakingCheck.tsx +++ b/frontend/components/Spawn/SpawnStakingCheck/SpawnStakingCheck.tsx @@ -1,8 +1,7 @@ import { Service, ServiceTemplate } from "@/client"; -import { TOKENS } from "@/constants/tokens"; +import { TOKENS } from "@/constants"; import { SpawnScreenState } from "@/enums"; -import { useEthers, useServices } from "@/hooks"; -import { useAppInfo } from "@/hooks/useAppInfo"; +import { useEthers, useServices, useAppInfo } from "@/hooks"; import { Button, Flex, Typography, message } from "antd"; import { ethers } from "ethers"; import { @@ -44,7 +43,10 @@ export const SpawnStakingCheck = ({ const [isCreating, setIsCreating] = useState(false); const [buttonClicked, setButtonClicked] = useState(); - const publicKey = useMemo(() => getPublicKey(), [getPublicKey]); + const publicKey: string | undefined = useMemo( + () => getPublicKey(), + [getPublicKey], + ); /** * Creates service, then performs relevant state updates @@ -181,18 +183,26 @@ export const SpawnStakingCheck = ({ setButtonClicked(undefined); }; + const stakingRequirement = useMemo( + () => + ethers.utils.formatUnits( + `${ + serviceTemplate.configuration.olas_cost_of_bond + + serviceTemplate.configuration.olas_required_to_stake + }`, + ), + [ + serviceTemplate.configuration.olas_cost_of_bond, + serviceTemplate.configuration.olas_required_to_stake, + ], + ); + return ( Would you like to stake OLAS? - {ethers.utils.formatUnits( - `${ - serviceTemplate.configuration.olas_cost_of_bond + - serviceTemplate.configuration.olas_required_to_stake - }`, - )}{" "} - OLAS required + {stakingRequirement} OLAS required diff --git a/frontend/components/Spawn/index.tsx b/frontend/components/Spawn/index.tsx index 902b547ec..dc42b1592 100644 --- a/frontend/components/Spawn/index.tsx +++ b/frontend/components/Spawn/index.tsx @@ -1,6 +1,7 @@ -export * from "./SpawnDone/SpawnDone"; +export * from "./Funding/Funding"; export * from "./SpawnAgentFunding/SpawnAgentFunding"; +export * from "./SpawnDone/SpawnDone"; +export * from "./SpawnError/SpawnError"; export * from "./SpawnHeader/SpawnHeader"; export * from "./SpawnRPC/SpawnRPC"; export * from "./SpawnStakingCheck/SpawnStakingCheck"; -export * from "./SpawnError/SpawnError"; diff --git a/frontend/components/YourAgents/HasAgents/HasAgents.tsx b/frontend/components/YourAgents/HasAgents/HasAgents.tsx new file mode 100644 index 000000000..0828175c6 --- /dev/null +++ b/frontend/components/YourAgents/HasAgents/HasAgents.tsx @@ -0,0 +1,17 @@ +import { Service } from "@/client"; +import { Flex } from "antd"; +import { ServiceCard } from "../ServiceCard/ServiceCard"; + +export const HasAgents = ({ + services, +}: { + services: Service[]; +}): JSX.Element => { + return ( + + {services.map((service: Service) => ( + + ))} + + ); +}; diff --git a/frontend/components/YourAgents/NoAgents/NoAgents.tsx b/frontend/components/YourAgents/NoAgents/NoAgents.tsx new file mode 100644 index 000000000..9e9ad0c41 --- /dev/null +++ b/frontend/components/YourAgents/NoAgents/NoAgents.tsx @@ -0,0 +1,15 @@ +import { Tab } from "@/enums"; +import { useTabs } from "@/hooks"; +import { Flex, Typography, Button } from "antd"; + +export const NoAgents = (): JSX.Element => { + const { setActiveTab } = useTabs(); + return ( + + No agents running. + + + ); +}; diff --git a/frontend/components/YourAgents/ServiceCard/ServiceCardTotalBalance.tsx b/frontend/components/YourAgents/ServiceCard/ServiceCardTotalBalance.tsx index acd34d641..a2e7628a1 100644 --- a/frontend/components/YourAgents/ServiceCard/ServiceCardTotalBalance.tsx +++ b/frontend/components/YourAgents/ServiceCard/ServiceCardTotalBalance.tsx @@ -1,5 +1,5 @@ import { Service } from "@/client"; -import { useMulticall } from "@/hooks/useMulticall"; +import { useMulticall } from "@/hooks"; import { Flex, Typography, message } from "antd"; import { useMemo, useState } from "react"; import { useInterval } from "usehooks-ts"; @@ -11,16 +11,14 @@ export const ServiceCardTotalBalance = ({ service }: { service: Service }) => { const [hasInitialLoaded, setHasInitialLoaded] = useState(false); const [balances, setBalances] = useState<{ [address: string]: number }>({}); - const sumBalances: number = useMemo( - () => - hasInitialLoaded && balances - ? Object.values(balances).reduce( - (acc: number, balance: number) => (acc += balance), - 0, - ) - : 0, - [balances, hasInitialLoaded], - ); + const sumBalances: number | undefined = useMemo(() => { + if (hasInitialLoaded && balances) { + return Object.values(balances).reduce( + (acc: number, balance: number) => (acc += balance), + 0, + ); + } + }, [balances, hasInitialLoaded]); useInterval(() => { if ( @@ -29,7 +27,7 @@ export const ServiceCardTotalBalance = ({ service }: { service: Service }) => { service.ledger?.rpc ) getETHBalances( - [...service.chain_data.instances, service.chain_data.multisig], // multisig not required? + [...service.chain_data.instances, service.chain_data.multisig], service.ledger.rpc, ) .then((r) => { @@ -40,10 +38,11 @@ export const ServiceCardTotalBalance = ({ service }: { service: Service }) => { }, BALANCE_POLLING_INTERVAL); return ( - - TOTAL BALANCE - XDAI {sumBalances}{" "} - {/* hardcoded XDAI for now */} - + sumBalances !== undefined && ( + + TOTAL BALANCE + XDAI {sumBalances} + + ) ); }; diff --git a/frontend/components/YourAgents/YourAgents.tsx b/frontend/components/YourAgents/YourAgents.tsx index 9d90254a8..69a9e96bd 100644 --- a/frontend/components/YourAgents/YourAgents.tsx +++ b/frontend/components/YourAgents/YourAgents.tsx @@ -1,11 +1,17 @@ -import { Tab } from "@/enums/Tabs"; -import { useTabs } from "@/hooks/useTabs"; -import { Button, Flex, Typography } from "antd"; - import { useServices } from "@/hooks/useServices"; -import { ServiceCard } from "./ServiceCard/ServiceCard"; import { Service } from "@/client"; import { useMemo } from "react"; +import dynamic from "next/dynamic"; + +const HasAgents = dynamic( + () => import("./HasAgents/HasAgents").then((mod) => mod.HasAgents), + { ssr: false }, +); + +const NoAgents = dynamic( + () => import("./NoAgents/NoAgents").then((mod) => mod.NoAgents), + { ssr: false }, +); export const YourAgents = () => { const { getServicesFromState } = useServices(); @@ -24,27 +30,5 @@ export const YourAgents = () => { [services], ); - return hasAgents ? : ; -}; - -const HasServices = ({ services }: { services: Service[] }): JSX.Element => { - return ( - - {services.map((service: Service) => ( - - ))} - - ); -}; - -const NoAgents = (): JSX.Element => { - const { setActiveTab } = useTabs(); - return ( - - No agents running. - - - ); + return hasAgents ? : ; }; diff --git a/frontend/components/YourAgents/index.ts b/frontend/components/YourAgents/index.ts new file mode 100644 index 000000000..2d7d57c31 --- /dev/null +++ b/frontend/components/YourAgents/index.ts @@ -0,0 +1,4 @@ +export * from "./YourAgents"; +export * from "./HasAgents/HasAgents"; +export * from "./NoAgents/NoAgents"; +export * from "./ServiceCard/ServiceCard"; diff --git a/frontend/constants/index.ts b/frontend/constants/index.ts new file mode 100644 index 000000000..6010e93de --- /dev/null +++ b/frontend/constants/index.ts @@ -0,0 +1,5 @@ +export * from "./chains"; +export * from "./contracts"; +export * from "./serviceTemplates"; +export * from "./tokens"; +export * from "./urls"; diff --git a/frontend/constants/urls.ts b/frontend/constants/urls.ts index 4d9f352ae..477a7fde7 100644 --- a/frontend/constants/urls.ts +++ b/frontend/constants/urls.ts @@ -1,2 +1,2 @@ export const NODIES_URL: string = "https://nodies.app"; -export const BACKEND_URL: string = `http://localhost:${process.env.NEXT_PUBLIC_BACKEND_PORT}/api`; +export const BACKEND_URL: string = `http://localhost:${process.env.NEXT_PUBLIC_BACKEND_PORT || 8000}/api`; diff --git a/frontend/context/AppInfoProvider/AppInfoProvider.tsx b/frontend/context/AppInfoProvider/AppInfoProvider.tsx index 864ebdb90..0959da8e6 100644 --- a/frontend/context/AppInfoProvider/AppInfoProvider.tsx +++ b/frontend/context/AppInfoProvider/AppInfoProvider.tsx @@ -1,5 +1,5 @@ import { AppInfo } from "@/client"; -import AppInfoService from "@/service/AppInfo"; +import { AppInfoService } from "@/service"; import { message } from "antd"; import { Dispatch, diff --git a/frontend/context/ModalsProvider/ModalsProvider.tsx b/frontend/context/ModalsProvider/ModalsProvider.tsx index 3df1bbe39..f2493f35d 100644 --- a/frontend/context/ModalsProvider/ModalsProvider.tsx +++ b/frontend/context/ModalsProvider/ModalsProvider.tsx @@ -1,4 +1,4 @@ -import { QRModalData } from "@/types/QRModalData"; +import { QRModalData } from "@/types"; import dynamic from "next/dynamic"; import { createContext, @@ -45,7 +45,7 @@ export const ModalsProvider = ({ children }: PropsWithChildren) => { setQrModalData, }} > - + {qrModalData.open && } {children} ); diff --git a/frontend/context/ServicesProvider/ServicesProvider.tsx b/frontend/context/ServicesProvider/ServicesProvider.tsx index 3c6b8fc60..054d8443d 100644 --- a/frontend/context/ServicesProvider/ServicesProvider.tsx +++ b/frontend/context/ServicesProvider/ServicesProvider.tsx @@ -1,5 +1,5 @@ -import { Services } from "@/client"; -import ServicesService from "@/service/Services"; +import { Service } from "@/client"; +import { ServicesService } from "@/service"; import { message } from "antd"; import { Dispatch, @@ -13,8 +13,8 @@ import { import { useInterval } from "usehooks-ts"; type ServicesProviderProps = { - services: Services; - setServices: Dispatch>; + services: Service[]; + setServices: Dispatch>; updateServicesState: () => Promise; hasInitialLoaded: boolean; }; @@ -27,12 +27,12 @@ export const ServicesContext = createContext({ }); export const ServicesProvider = ({ children }: PropsWithChildren) => { - const [services, setServices] = useState([]); + const [services, setServices] = useState([]); const [hasInitialLoaded, setHasInitialLoaded] = useState(false); const updateServicesState = useCallback(async (): Promise => { try { - return ServicesService.getServices().then((data: Services) => { + return ServicesService.getServices().then((data: Service[]) => { setServices(data); }); } catch (e) { diff --git a/frontend/context/SpawnProvider/SpawnProvider.test.tsx b/frontend/context/SpawnProvider/SpawnProvider.test.tsx index 07216cf43..4b197a4dc 100644 --- a/frontend/context/SpawnProvider/SpawnProvider.test.tsx +++ b/frontend/context/SpawnProvider/SpawnProvider.test.tsx @@ -5,7 +5,7 @@ import { SpawnContext, SpawnProvider, } from "./SpawnProvider"; -import { SpawnScreenState } from "@/enums/SpawnState"; +import { SpawnScreenState } from "@/enums"; import "@testing-library/jest-dom"; describe("SpawnProvider", () => { diff --git a/frontend/context/SpawnProvider/SpawnProvider.tsx b/frontend/context/SpawnProvider/SpawnProvider.tsx index 42bcd7336..be16a31c7 100644 --- a/frontend/context/SpawnProvider/SpawnProvider.tsx +++ b/frontend/context/SpawnProvider/SpawnProvider.tsx @@ -1,4 +1,4 @@ -import { SpawnScreenState } from "@/enums/SpawnState"; +import { SpawnScreenState } from "@/enums"; import { Dispatch, PropsWithChildren, diff --git a/frontend/hooks/index.ts b/frontend/hooks/index.ts index 13186339a..246809b3a 100644 --- a/frontend/hooks/index.ts +++ b/frontend/hooks/index.ts @@ -5,3 +5,4 @@ export * from "./useTabs"; export * from "./useMarketplace"; export * from "./useEthers"; export * from "./useMulticall"; +export * from "./useAppInfo"; diff --git a/frontend/hooks/useAppInfo.tsx b/frontend/hooks/useAppInfo.tsx index bda2f36ae..5e71a3220 100644 --- a/frontend/hooks/useAppInfo.tsx +++ b/frontend/hooks/useAppInfo.tsx @@ -1,4 +1,4 @@ -import { AppInfoContext } from "@/context/AppInfoProvider/AppInfoProvider"; +import { AppInfoContext } from "@/context"; import { useContext } from "react"; export const useAppInfo = () => { diff --git a/frontend/hooks/useMarketplace.tsx b/frontend/hooks/useMarketplace.tsx index 7ad0bc3c5..364c169ed 100644 --- a/frontend/hooks/useMarketplace.tsx +++ b/frontend/hooks/useMarketplace.tsx @@ -1,5 +1,5 @@ import { ServiceTemplate } from "@/client"; -import { serviceTemplates } from "@/constants/serviceTemplates"; +import { serviceTemplates } from "@/constants"; export const useMarketplace = () => { const getServiceTemplates = (): ServiceTemplate[] => serviceTemplates; diff --git a/frontend/hooks/useModals.tsx b/frontend/hooks/useModals.tsx index e379c4e5d..d43ee0b90 100644 --- a/frontend/hooks/useModals.tsx +++ b/frontend/hooks/useModals.tsx @@ -1,5 +1,5 @@ import { ModalsContext } from "@/context"; -import { QRModalData } from "@/types/QRModalData"; +import { QRModalData } from "@/types"; import { useContext } from "react"; export const useModals = () => { diff --git a/frontend/hooks/useMulticall.tsx b/frontend/hooks/useMulticall.tsx index 6ff08cfc6..bd27fd3b0 100644 --- a/frontend/hooks/useMulticall.tsx +++ b/frontend/hooks/useMulticall.tsx @@ -1,7 +1,7 @@ -import { MULTICALL_CONTRACT } from "@/constants/contracts"; +import { MULTICALL_CONTRACT } from "@/constants"; import { BigNumber, ethers } from "ethers"; import { Contract, ContractCall, Provider } from "ethers-multicall"; -import { multicall3Abi } from "@/abi/multicall3Abi"; +import { multicall3Abi } from "@/abi"; export const useMulticall = () => { /** diff --git a/frontend/hooks/useServices.tsx b/frontend/hooks/useServices.tsx index 9a1621323..ae4eb254c 100644 --- a/frontend/hooks/useServices.tsx +++ b/frontend/hooks/useServices.tsx @@ -1,6 +1,6 @@ import { Service, ServiceHash, ServiceTemplate } from "@/client"; import { ServicesContext } from "@/context"; -import ServicesService from "@/service/Services"; +import { ServicesService } from "@/service"; import { useContext } from "react"; export const useServices = () => { diff --git a/frontend/pages/_app.tsx b/frontend/pages/_app.tsx index 86a45c928..f72a7f655 100644 --- a/frontend/pages/_app.tsx +++ b/frontend/pages/_app.tsx @@ -4,8 +4,8 @@ import { SpawnProvider, TabsProvider, } from "@/context"; -import { AppInfoProvider } from "@/context/AppInfoProvider/AppInfoProvider"; -import { mainTheme } from "@/theme/mainTheme"; +import { AppInfoProvider } from "@/context"; +import { mainTheme } from "@/theme"; import { ConfigProvider } from "antd"; import type { AppProps } from "next/app"; diff --git a/frontend/pages/spawn/[serviceTemplateHash].tsx b/frontend/pages/spawn/[serviceTemplateHash].tsx index 78e7b58ac..7da7d0a2f 100644 --- a/frontend/pages/spawn/[serviceTemplateHash].tsx +++ b/frontend/pages/spawn/[serviceTemplateHash].tsx @@ -1,17 +1,56 @@ import { Service, ServiceTemplate } from "@/client"; -import { - SpawnAgentFunding, - SpawnDone, - SpawnHeader, - SpawnRPC, - SpawnStakingCheck, -} from "@/components/Spawn"; -import { SpawnError } from "@/components/Spawn/SpawnError/SpawnError"; import { SpawnScreenState } from "@/enums"; import { useMarketplace, useSpawn } from "@/hooks"; import { GetServerSidePropsContext } from "next"; +import dynamic from "next/dynamic"; import { useMemo, useState } from "react"; +const SpawnAgentFunding = dynamic( + () => + import("@/components/Spawn/SpawnAgentFunding/SpawnAgentFunding").then( + (mod) => mod.SpawnAgentFunding, + ), + { ssr: false }, +); + +const SpawnDone = dynamic( + () => + import("@/components/Spawn/SpawnDone/SpawnDone").then( + (mod) => mod.SpawnDone, + ), + { ssr: false }, +); + +const SpawnHeader = dynamic( + () => + import("@/components/Spawn/SpawnHeader/SpawnHeader").then( + (mod) => mod.SpawnHeader, + ), + { ssr: false }, +); + +const SpawnRPC = dynamic( + () => + import("@/components/Spawn/SpawnRPC/SpawnRPC").then((mod) => mod.SpawnRPC), + { ssr: false }, +); + +const SpawnStakingCheck = dynamic( + () => + import("@/components/Spawn/SpawnStakingCheck/SpawnStakingCheck").then( + (mod) => mod.SpawnStakingCheck, + ), + { ssr: false }, +); + +const SpawnError = dynamic( + () => + import("@/components/Spawn/SpawnError/SpawnError").then( + (mod) => mod.SpawnError, + ), + { ssr: false }, +); + export const getServerSideProps = async ( context: GetServerSidePropsContext, ) => { diff --git a/frontend/service/AppInfo.ts b/frontend/service/AppInfo.ts index e7fb09837..9f7cb1fac 100644 --- a/frontend/service/AppInfo.ts +++ b/frontend/service/AppInfo.ts @@ -1,5 +1,5 @@ import { AppInfo } from "@/client"; -import { BACKEND_URL } from "@/constants/urls"; +import { BACKEND_URL } from "@/constants"; /** * Get the app info, including users public key key @@ -13,8 +13,6 @@ const getAppInfo = async (): Promise => { }).then((response) => response.json()); }; -const AppInfoService = { +export const AppInfoService = { getAppInfo, }; - -export default AppInfoService; diff --git a/frontend/service/Services.ts b/frontend/service/Services.ts index dac0b5e3f..f919107bc 100644 --- a/frontend/service/Services.ts +++ b/frontend/service/Services.ts @@ -5,9 +5,8 @@ import { Service, ServiceHash, ServiceTemplate, - Services, } from "@/client"; -import { BACKEND_URL } from "@/constants/urls"; +import { BACKEND_URL } from "@/constants"; /** * Get the status of a service @@ -39,7 +38,7 @@ const getService = async (serviceHash: ServiceHash): Promise => * Gets an array of services from the backend * @returns An array of services */ -const getServices = async (): Promise => +const getServices = async (): Promise => fetch(`${BACKEND_URL}/services`, { method: "GET", headers: { @@ -99,7 +98,7 @@ const stopService = async (serviceHash: ServiceHash): Promise => method: "POST", }).then((response) => response.json()); -const ServicesService = { +export const ServicesService = { getService, getServices, getServiceStatus, @@ -108,5 +107,3 @@ const ServicesService = { deployService, createService, }; - -export default ServicesService; diff --git a/frontend/service/index.ts b/frontend/service/index.ts new file mode 100644 index 000000000..df3a80ba2 --- /dev/null +++ b/frontend/service/index.ts @@ -0,0 +1,2 @@ +export * from "./AppInfo"; +export * from "./Services"; diff --git a/frontend/theme/index.ts b/frontend/theme/index.ts new file mode 100644 index 000000000..f9a6c243e --- /dev/null +++ b/frontend/theme/index.ts @@ -0,0 +1 @@ +export * from "./mainTheme"; diff --git a/frontend/types/index.ts b/frontend/types/index.ts new file mode 100644 index 000000000..f3eef6a67 --- /dev/null +++ b/frontend/types/index.ts @@ -0,0 +1 @@ +export type * from "./QRModalData";