refactor(console): extract create deployment confirm in hook

akash-network · Aug 28, 2024 · 6378ef8 · 6378ef8
1 parent ad19256
commit 6378ef8
Show file tree

Hide file tree

Showing 10 changed files with 93 additions and 83 deletions.
diff --git a/apps/deploy-web/src/components/deployments/DeploymentDetailTopBar.tsx b/apps/deploy-web/src/components/deployments/DeploymentDetailTopBar.tsx
@@ -15,7 +15,7 @@ import { AnalyticsEvents } from "@src/utils/analytics";
 import { TransactionMessageData } from "@src/utils/TransactionMessageData";
 import { UrlService } from "@src/utils/urlUtils";
 import { DeploymentDepositModal } from "./DeploymentDepositModal";
-import { useCloseDeploymentConfirm } from "@src/hooks/useCloseDeploymentConfirm";
+import { useManagedDeploymentConfirm } from "@src/hooks/useManagedDeploymentConfirm";
 
 type Props = {
   address: string;
@@ -35,7 +35,7 @@ export const DeploymentDetailTopBar: React.FunctionComponent<Props> = ({ address
   const deploymentName = getDeploymentName(deployment?.dseq);
   const previousRoute = usePreviousRoute();
   const wallet = useWallet();
-  const { closeDeploymentConfirm } = useCloseDeploymentConfirm();
+  const { closeDeploymentConfirm } = useManagedDeploymentConfirm();
 
   function handleBackClick() {
     if (previousRoute) {

diff --git a/apps/deploy-web/src/components/deployments/DeploymentList.tsx b/apps/deploy-web/src/components/deployments/DeploymentList.tsx
@@ -32,7 +32,7 @@ import { UrlService } from "@src/utils/urlUtils";
 import Layout from "../layout/Layout";
 import { Title } from "../shared/Title";
 import { DeploymentListRow } from "./DeploymentListRow";
-import { useCloseDeploymentConfirm } from "@src/hooks/useCloseDeploymentConfirm";
+import { useManagedDeploymentConfirm } from "@src/hooks/useManagedDeploymentConfirm";
 
 export const DeploymentList: React.FunctionComponent = () => {
   const { address, signAndBroadcastTx, isWalletLoaded } = useWallet();
@@ -55,7 +55,7 @@ export const DeploymentList: React.FunctionComponent = () => {
   const currentPageDeployments = orderedDeployments.slice(start, end);
   const pageCount = Math.ceil(orderedDeployments.length / pageSize);
   const [, setDeploySdl] = useAtom(sdlStore.deploySdl);
-  const { closeDeploymentConfirm } = useCloseDeploymentConfirm();
+  const { closeDeploymentConfirm } = useManagedDeploymentConfirm();
 
   useEffect(() => {
     if (isWalletLoaded && isSettingsInit) {

diff --git a/apps/deploy-web/src/components/deployments/DeploymentListRow.tsx b/apps/deploy-web/src/components/deployments/DeploymentListRow.tsx
@@ -37,7 +37,7 @@ import { PriceValue } from "../shared/PriceValue";
 import { SpecDetailList } from "../shared/SpecDetailList";
 import { DeploymentDepositModal } from "./DeploymentDepositModal";
 import { LeaseChip } from "./LeaseChip";
-import { useCloseDeploymentConfirm } from "@src/hooks/useCloseDeploymentConfirm";
+import { useManagedDeploymentConfirm } from "@src/hooks/useManagedDeploymentConfirm";
 
 type Props = {
   deployment: NamedDeploymentDto;
@@ -111,7 +111,7 @@ export const DeploymentListRow: React.FunctionComponent<Props> = ({ deployment,
   const avgCost = udenomToDenom(getAvgCostPerMonth(deploymentCost || 0));
   const storageDeploymentData = getDeploymentData(deployment?.dseq);
   const denomData = useDenomData(deployment.escrowAccount.balance.denom);
-  const { closeDeploymentConfirm } = useCloseDeploymentConfirm();
+  const { closeDeploymentConfirm } = useManagedDeploymentConfirm();
 
   function viewDeployment() {
     router.push(UrlService.deploymentDetails(deployment.dseq));

diff --git a/apps/deploy-web/src/components/new-deployment/CreateLease.tsx b/apps/deploy-web/src/components/new-deployment/CreateLease.tsx
@@ -40,7 +40,7 @@ import { ManifestErrorSnackbar } from "../shared/ManifestErrorSnackbar";
 import ViewPanel from "../shared/ViewPanel";
 import { BidCountdownTimer } from "./BidCountdownTimer";
 import { BidGroup } from "./BidGroup";
-import { useCloseDeploymentConfirm } from "@src/hooks/useCloseDeploymentConfirm";
+import { useManagedDeploymentConfirm } from "@src/hooks/useManagedDeploymentConfirm";
 
 type Props = {
   dseq: string;
@@ -89,7 +89,7 @@ export const CreateLease: React.FunctionComponent<Props> = ({ dseq }) => {
   const allClosed = (bids?.length || 0) > 0 && bids?.every(bid => bid.state === "closed");
   const { enqueueSnackbar, closeSnackbar } = useSnackbar();
   const wallet = useWallet();
-  const { closeDeploymentConfirm } = useCloseDeploymentConfirm();
+  const { closeDeploymentConfirm } = useManagedDeploymentConfirm();
 
   useEffect(() => {
     getDeploymentDetail();

diff --git a/apps/deploy-web/src/components/new-deployment/ManifestEdit.tsx b/apps/deploy-web/src/components/new-deployment/ManifestEdit.tsx
@@ -39,11 +39,8 @@ import { LinkTo } from "../shared/LinkTo";
 import { PrerequisiteList } from "../shared/PrerequisiteList";
 import ViewPanel from "../shared/ViewPanel";
 import { SdlBuilder, SdlBuilderRefType } from "./SdlBuilder";
-import { usePopup } from "@akashnetwork/ui/context";
-import { LeaseSpecDetail } from "../shared/LeaseSpecDetail";
-import { v3Manifest, v2Service, v2ManifestService, v3ManifestService } from "@akashnetwork/akashjs/build/sdl/types";
-import first from "lodash/first";
 import { importSimpleSdl } from "@src/utils/sdl/sdlImport";
+import { useManagedDeploymentConfirm } from "@src/hooks/useManagedDeploymentConfirm";
 
 type Props = {
   onTemplateSelected: Dispatch<TemplateCreation | null>;
@@ -77,7 +74,7 @@ export const ManifestEdit: React.FunctionComponent<Props> = ({ editedManifest, s
   const fileUploadRef = useRef<HTMLInputElement>(null);
   const wallet = useWallet();
   const managedDenom = useManagedWalletDenom();
-  const { confirm } = usePopup();
+  const { createDeploymentConfirm } = useManagedDeploymentConfirm();
 
   useWhen(wallet.isManaged && sdlDenom === "uakt", () => {
     setSdlDenom(managedDenom);
@@ -190,31 +187,12 @@ export const ManifestEdit: React.FunctionComponent<Props> = ({ editedManifest, s
     if (isManaged) {
       const services = importSimpleSdl(editedManifest as string);
 
-      if (!deploymentData) {
+      if (!services) {
         setParsingError("Error while parsing SDL file");
         return;
       }
 
-      const isConfirmed = await confirm({
-        title: "Confirm deployment creation?",
-        message: (
-          <div className="space-y-2">
-            {services.map(service => {
-              return (
-                <div key={service.image} className="rounded border p-4">
-                  <div className="mb-2 text-sm"><span className="font-bold">{service.title}</span>:{service.image}</div>
-                  <div className="flex items-center space-x-4 whitespace-nowrap">
-                    <LeaseSpecDetail type="cpu" className="flex-shrink-0" value={service.profile?.cpu as number} />
-                    {service.profile?.hasGpu && <LeaseSpecDetail type="gpu" className="flex-shrink-0" value={service.profile?.gpu as number} />}
-                    <LeaseSpecDetail type="ram" className="flex-shrink-0" value={`${service.profile?.ram} ${service.profile?.ramUnit}`} />
-                    <LeaseSpecDetail type="storage" className="flex-shrink-0" value={`${service.profile?.storage} ${service.profile?.storageUnit}`} />
-                  </div>
-                </div>
-              );
-            })}
-          </div>
-        )
-      });
+      const isConfirmed = await createDeploymentConfirm(services);
 
       if (isConfirmed) {
         await handleCreateClick(defaultDeposit, envConfig.NEXT_PUBLIC_MASTER_WALLET_ADDRESS);

diff --git a/apps/deploy-web/src/components/sdl/RentGpusForm.tsx b/apps/deploy-web/src/components/sdl/RentGpusForm.tsx
@@ -41,6 +41,7 @@ import { MemoryFormControl } from "./MemoryFormControl";
 import { RegionSelect } from "./RegionSelect";
 import { StorageFormControl } from "./StorageFormControl";
 import { TokenFormControl } from "./TokenFormControl";
+import { useManagedDeploymentConfirm } from "@src/hooks/useManagedDeploymentConfirm";
 
 export const RentGpusForm: React.FunctionComponent = () => {
   const [error, setError] = useState<string | null>(null);
@@ -65,11 +66,12 @@ export const RentGpusForm: React.FunctionComponent = () => {
   const searchParams = useSearchParams();
   const currentService: ServiceType = (_services && _services[0]) || ({} as any);
   const { settings } = useSettings();
-  const { address, signAndBroadcastTx } = useWallet();
+  const { address, signAndBroadcastTx, isManaged } = useWallet();
   const { loadValidCertificates, localCert, isLocalCertMatching, loadLocalCert, setSelectedCertificate } = useCertificate();
   const [sdlDenom, setSdlDenom] = useState("uakt");
   const { minDeposit } = useChainParam();
   const router = useRouter();
+  const { createDeploymentConfirm } = useManagedDeploymentConfirm();
 
   useEffect(() => {
     if (rentGpuSdl && rentGpuSdl.services) {
@@ -178,6 +180,14 @@ export const RentGpusForm: React.FunctionComponent = () => {
 
   const onDeploymentDeposit = async (deposit: number, depositorAddress: string) => {
     setIsDepositingDeployment(false);
+
+    if (isManaged) {
+      const isConfirmed = await createDeploymentConfirm(rentGpuSdl?.services as ServiceType[]);
+
+      if (!isConfirmed) {
+        return;
+      }
+    }
     await handleCreateClick(deposit, depositorAddress);
   };
 

diff --git a/apps/deploy-web/src/hooks/useCloseDeploymentConfirm.tsx b/apps/deploy-web/src/hooks/useCloseDeploymentConfirm.tsx
diff --git a/apps/deploy-web/src/hooks/useManagedDeploymentConfirm.tsx b/apps/deploy-web/src/hooks/useManagedDeploymentConfirm.tsx
@@ -0,0 +1,66 @@
+import { usePopup } from "@akashnetwork/ui/context";
+import { LeaseSpecDetail } from "@src/components/shared/LeaseSpecDetail";
+import { useWallet } from "@src/context/WalletProvider";
+import { ServiceType } from "@src/types";
+
+export const useManagedDeploymentConfirm = () => {
+  const { isManaged } = useWallet();
+  const { confirm } = usePopup();
+
+  const closeDeploymentConfirm = async (dseq: string[]) => {
+    if (isManaged) {
+      const isConfirmed = await confirm({
+        title: `Are you sure you want to close ${dseq.length > 1 ? "these deployments" : "this deployment"}?`,
+        message: (
+          <div className="space-y-2">
+            <p className="text-sm">
+              DSEQ <span className="text-xs text-muted-foreground">({dseq.join(",")})</span>
+            </p>
+            <p className="text-sm text-muted-foreground">Closing a deployment will stop all services and release any unused escrowed funds.</p>
+          </div>
+        )
+      });
+
+      if (!isConfirmed) {
+        return false;
+      }
+    }
+
+    return true;
+  };
+
+  const createDeploymentConfirm = async (services: ServiceType[]) => {
+    if (isManaged) {
+      const isConfirmed = await confirm({
+        title: "Confirm deployment creation?",
+        message: (
+          <div className="space-y-2">
+            {services.map(service => {
+              return (
+                <div key={service.image} className="rounded border p-4">
+                  <div className="mb-2 text-sm">
+                    <span className="font-bold">{service.title}</span>:{service.image}
+                  </div>
+                  <div className="flex items-center space-x-4 whitespace-nowrap">
+                    <LeaseSpecDetail type="cpu" className="flex-shrink-0" value={service.profile?.cpu as number} />
+                    {service.profile?.hasGpu && <LeaseSpecDetail type="gpu" className="flex-shrink-0" value={service.profile?.gpu as number} />}
+                    <LeaseSpecDetail type="ram" className="flex-shrink-0" value={`${service.profile?.ram} ${service.profile?.ramUnit}`} />
+                    <LeaseSpecDetail type="storage" className="flex-shrink-0" value={`${service.profile?.storage} ${service.profile?.storageUnit}`} />
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        )
+      });
+
+      if (!isConfirmed) {
+        return false;
+      }
+    }
+
+    return true;
+  };
+
+  return { closeDeploymentConfirm, createDeploymentConfirm };
+};
diff --git a/apps/deploy-web/src/types/sdlBuilder.ts b/apps/deploy-web/src/types/sdlBuilder.ts
@@ -374,18 +374,6 @@ export const RentGpusFormValuesSchema = z.object({
   region: ProviderRegionValueSchema.optional()
 });
 
-export const ImportServiceSchema = z.object({
-  id: z.string().optional(),
-  title: z.string().optional(),
-  image: z.string().optional(),
-  profile: ProfileSchema.optional(),
-  expose: z.array(ExposeSchema).optional(),
-  command: CommandSchema.optional(),
-  env: z.array(EnvironmentVariableSchema).optional(),
-  placement: PlacementSchema.optional(),
-  count: z.number().optional()
-});
-
 export type ServiceType = z.infer<typeof ServiceSchema>;
 export type SdlBuilderFormValuesType = z.infer<typeof SdlBuilderFormValuesSchema>;
 export type ProfileGpuModelType = z.infer<typeof ProfileGpuModelSchema>;
@@ -402,4 +390,3 @@ export type ExposeType = z.infer<typeof ExposeSchema>;
 export type PlacementType = z.infer<typeof PlacementSchema>;
 export type ProviderRegionValueType = z.infer<typeof ProviderRegionValueSchema>;
 export type RentGpusFormValuesType = z.infer<typeof RentGpusFormValuesSchema>;
-export type ImportServiceType = z.infer<typeof ImportServiceSchema>;
diff --git a/apps/deploy-web/src/utils/sdl/sdlImport.ts b/apps/deploy-web/src/utils/sdl/sdlImport.ts
@@ -1,21 +1,21 @@
 import yaml from "js-yaml";
 import { nanoid } from "nanoid";
 
-import { ExposeType, ImportServiceType, ProfileGpuModelType } from "@src/types";
+import { ExposeType, ServiceType, ProfileGpuModelType } from "@src/types";
 import { CustomValidationError } from "../deploymentData";
 import { capitalizeFirstLetter } from "../stringUtils";
 import { defaultHttpOptions } from "./data";
 
 export const importSimpleSdl = (yamlStr: string) => {
   try {
     const yamlJson = yaml.load(yamlStr) as any;
-    const services: ImportServiceType[] = [];
+    const services: ServiceType[] = [];
 
     const sortedServicesNames = Object.keys(yamlJson.services).sort();
     sortedServicesNames.forEach(svcName => {
       const svc = yamlJson.services[svcName];
 
-      const service: ImportServiceType = {
+      const service: Partial<ServiceType> = {
         id: nanoid(),
         title: svcName,
         image: svc.image
@@ -126,7 +126,7 @@ export const importSimpleSdl = (yamlStr: string) => {
 
       service.count = deployment.count;
 
-      services.push(service);
+      services.push(service as ServiceType);
     });
 
     return services;