diff --git a/apps/deploy-web/src/components/deployments/DeploymentDetailTopBar.tsx b/apps/deploy-web/src/components/deployments/DeploymentDetailTopBar.tsx index 6340a4151..f2be1b7c4 100644 --- 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 = ({ 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 index f09686304..7ae669dac 100644 --- 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 index 46213af17..a5e3a5c2c 100644 --- 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 = ({ 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 index dab3f6735..b7a3901b3 100644 --- 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 = ({ 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 index 6ed8682a9..d04027b72 100644 --- 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; @@ -77,7 +74,7 @@ export const ManifestEdit: React.FunctionComponent = ({ editedManifest, s const fileUploadRef = useRef(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 = ({ 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: ( -
- {services.map(service => { - return ( -
-
{service.title}:{service.image}
-
- - {service.profile?.hasGpu && } - - -
-
- ); - })} -
- ) - }); + 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 index 8801f9af7..b51d44c3c 100644 --- 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(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 deleted file mode 100644 index 6dbbd283f..000000000 --- a/apps/deploy-web/src/hooks/useCloseDeploymentConfirm.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import { usePopup } from "@akashnetwork/ui/context"; -import { useWallet } from "@src/context/WalletProvider"; - -export const useCloseDeploymentConfirm = () => { - 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: ( -
-

- DSEQ ({dseq.join(",")}) -

-

Closing a deployment will stop all services and release any unused escrowed funds.

-
- ) - }); - - if (!isConfirmed) { - return false; - } - } - - return true; - }; - - return { closeDeploymentConfirm }; -}; diff --git a/apps/deploy-web/src/hooks/useManagedDeploymentConfirm.tsx b/apps/deploy-web/src/hooks/useManagedDeploymentConfirm.tsx new file mode 100644 index 000000000..89f02f785 --- /dev/null +++ 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: ( +
+

+ DSEQ ({dseq.join(",")}) +

+

Closing a deployment will stop all services and release any unused escrowed funds.

+
+ ) + }); + + if (!isConfirmed) { + return false; + } + } + + return true; + }; + + const createDeploymentConfirm = async (services: ServiceType[]) => { + if (isManaged) { + const isConfirmed = await confirm({ + title: "Confirm deployment creation?", + message: ( +
+ {services.map(service => { + return ( +
+
+ {service.title}:{service.image} +
+
+ + {service.profile?.hasGpu && } + + +
+
+ ); + })} +
+ ) + }); + + 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 index 96b9dcb24..73b769121 100644 --- 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; export type SdlBuilderFormValuesType = z.infer; export type ProfileGpuModelType = z.infer; @@ -402,4 +390,3 @@ export type ExposeType = z.infer; export type PlacementType = z.infer; export type ProviderRegionValueType = z.infer; export type RentGpusFormValuesType = z.infer; -export type ImportServiceType = z.infer; \ No newline at end of file diff --git a/apps/deploy-web/src/utils/sdl/sdlImport.ts b/apps/deploy-web/src/utils/sdl/sdlImport.ts index c21e1fc91..10d1f0f7f 100644 --- a/apps/deploy-web/src/utils/sdl/sdlImport.ts +++ b/apps/deploy-web/src/utils/sdl/sdlImport.ts @@ -1,7 +1,7 @@ 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"; @@ -9,13 +9,13 @@ 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 = { 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;