diff --git a/apps/deploy-web/src/components/deployments/DeploymentDepositModal.tsx b/apps/deploy-web/src/components/deployments/DeploymentDepositModal.tsx index 66e9a6001..e303b4f9d 100644 --- a/apps/deploy-web/src/components/deployments/DeploymentDepositModal.tsx +++ b/apps/deploy-web/src/components/deployments/DeploymentDepositModal.tsx @@ -30,11 +30,15 @@ import { UAKT_DENOM } from "@src/config/denom.config"; import { usePricing } from "@src/context/PricingProvider"; import { useSettings } from "@src/context/SettingsProvider"; import { useWallet } from "@src/context/WalletProvider"; +import { useUser } from "@src/hooks/useUser"; import { useDenomData, useWalletBalance } from "@src/hooks/useWalletBalance"; import { useGranteeGrants } from "@src/queries/useGrantsQuery"; +import { ServiceType } from "@src/types"; import { AnalyticsCategory, AnalyticsEvents } from "@src/types/analytics"; import { denomToUdenom, udenomToDenom } from "@src/utils/mathHelpers"; import { coinToUDenom } from "@src/utils/priceUtils"; +import { UrlService } from "@src/utils/urlUtils"; +import { LeaseSpecDetail } from "../shared/LeaseSpecDetail"; import { LinkTo } from "../shared/LinkTo"; import { GranteeDepositMenuItem } from "./GranteeDepositMenuItem"; @@ -45,6 +49,8 @@ export type DeploymentDepositModalProps = { onDeploymentDeposit: (deposit: number, depositorAddress: string) => void; handleCancel: () => void; children?: ReactNode; + title?: string; + services?: ServiceType[]; }; const formSchema = z @@ -73,7 +79,9 @@ export const DeploymentDepositModal: React.FunctionComponent { const formRef = useRef(null); const { settings } = useSettings(); @@ -96,6 +104,15 @@ export const DeploymentDepositModal: React.FunctionComponent compareAsc(new Date(), new Date(x.expiration)) !== 1 && x.authorization.spend_limit.denom === denom) || []; + const user = useUser(); + + const goToSignIn = () => { + window.location.href = UrlService.login(); + }; + + const goToCheckout = () => { + window.location.href = "/api/proxy/v1/checkout"; + }; useEffect(() => { if (depositData && amount === 0 && !disableMin) { @@ -225,10 +242,29 @@ export const DeploymentDepositModal: React.FunctionComponent + {services.length > 0 && ( +
+ {services.map(service => { + return ( + +
+ {service.title}:{service.image} +
+
+ + {service.profile?.hasGpu && } + + +
+
+ ); + })} +
+ )} +
{infoText} @@ -259,6 +295,17 @@ export const DeploymentDepositModal: React.FunctionComponent +
+ {user?.userId ? ( + goToCheckout()} className="text-primary"> + Buy more credits + + ) : ( + goToSignIn()} className="text-primary"> + Sign in to buy more credits + + )} +
{isCustodial && ( diff --git a/apps/deploy-web/src/components/new-deployment/ManifestEdit.tsx b/apps/deploy-web/src/components/new-deployment/ManifestEdit.tsx index e50d98e3b..d19fca8ee 100644 --- a/apps/deploy-web/src/components/new-deployment/ManifestEdit.tsx +++ b/apps/deploy-web/src/components/new-deployment/ManifestEdit.tsx @@ -17,8 +17,8 @@ import { useCertificate } from "@src/context/CertificateProvider"; import { useChainParam } from "@src/context/ChainParamProvider"; import { useSdlBuilder } from "@src/context/SdlBuilderProvider/SdlBuilderProvider"; import { useWallet } from "@src/context/WalletProvider"; -import { useManagedDeploymentConfirm } from "@src/hooks/useManagedDeploymentConfirm"; import { useManagedWalletDenom } from "@src/hooks/useManagedWalletDenom"; +import { useDenomData } from "@src/hooks/useWalletBalance"; import { useWhen } from "@src/hooks/useWhen"; import { useDepositParams } from "@src/queries/useSettings"; import sdlStore from "@src/store/sdlStore"; @@ -67,6 +67,8 @@ export const ManifestEdit: React.FunctionComponent = ({ const [selectedSdlEditMode, setSelectedSdlEditMode] = useAtom(sdlStore.selectedSdlEditMode); const [isRepoInputValid, setIsRepoInputValid] = useState(false); const [sdlDenom, setSdlDenom] = useState("uakt"); + const depositData = useDenomData(sdlDenom); + const { settings } = useSettings(); const { address, signAndBroadcastTx, isManaged, isTrialing } = useWallet(); const router = useRouter(); @@ -83,8 +85,8 @@ export const ManifestEdit: React.FunctionComponent = ({ const defaultDeposit = depositParams || browserEnvConfig.NEXT_PUBLIC_DEFAULT_INITIAL_DEPOSIT; const wallet = useWallet(); const managedDenom = useManagedWalletDenom(); - const { createDeploymentConfirm } = useManagedDeploymentConfirm(); const { enqueueSnackbar } = useSnackbar(); + const services = importSimpleSdl(editedManifest as string); useWhen( wallet.isManaged && sdlDenom === "uakt" && editedManifest, @@ -192,18 +194,12 @@ export const ManifestEdit: React.FunctionComponent = ({ } if (isManaged) { - const services = importSimpleSdl(editedManifest as string); - if (!services) { setParsingError("Error while parsing SDL file"); return; } - const isConfirmed = await createDeploymentConfirm(services); - - if (isConfirmed) { - await handleCreateClick(defaultDeposit, browserEnvConfig.NEXT_PUBLIC_MASTER_WALLET_ADDRESS); - } + setIsDepositingDeployment(true); } else { setIsCheckingPrerequisites(true); } @@ -429,14 +425,24 @@ export const ManifestEdit: React.FunctionComponent = ({ handleCancel={() => setIsDepositingDeployment(false)} onDeploymentDeposit={onDeploymentDeposit} denom={sdlDenom} + title="Confirm deployment creation?" infoText={ - To create a deployment, you need to have at least {minDeposit.akt} AKT or {minDeposit.usdc} USDC in an escrow account.{" "} + {isManaged ? ( + <> + To create a deployment, you need to have at least ${depositData?.min} in an escrow account.{" "} + + ) : ( + <> + To create a deployment, you need to have at least {minDeposit.akt} AKT or {minDeposit.usdc} USDC in an escrow account.{" "} + + )} handleDocClick(ev, "https://akash.network/docs/other-resources/payments/")}> Learn more. } + services={services} /> )} {isCheckingPrerequisites && setIsCheckingPrerequisites(false)} onContinue={onPrerequisiteContinue} />} diff --git a/apps/deploy-web/src/components/sdl/RentGpusForm.tsx b/apps/deploy-web/src/components/sdl/RentGpusForm.tsx index a54a1e43f..f91551199 100644 --- a/apps/deploy-web/src/components/sdl/RentGpusForm.tsx +++ b/apps/deploy-web/src/components/sdl/RentGpusForm.tsx @@ -15,8 +15,8 @@ import { useCertificate } from "@src/context/CertificateProvider"; import { useChainParam } from "@src/context/ChainParamProvider"; import { useSettings } from "@src/context/SettingsProvider"; import { useWallet } from "@src/context/WalletProvider"; -import { useManagedDeploymentConfirm } from "@src/hooks/useManagedDeploymentConfirm"; import { useManagedWalletDenom } from "@src/hooks/useManagedWalletDenom"; +import { useDenomData } from "@src/hooks/useWalletBalance"; import { useWhen } from "@src/hooks/useWhen"; import { useGpuModels } from "@src/queries/useGpuQuery"; import { useDepositParams } from "@src/queries/useSettings"; @@ -77,10 +77,10 @@ export const RentGpusForm: React.FunctionComponent = () => { const [sdlDenom, setSdlDenom] = useState("uakt"); const { minDeposit } = useChainParam(); const router = useRouter(); - const { createDeploymentConfirm } = useManagedDeploymentConfirm(); const managedDenom = useManagedWalletDenom(); const { data: depositParams } = useDepositParams(); const defaultDeposit = depositParams || browserEnvConfig.NEXT_PUBLIC_DEFAULT_INITIAL_DEPOSIT; + const depositData = useDenomData(sdlDenom); useWhen(isManaged && sdlDenom === "uakt", () => { setSdlDenom(managedDenom); @@ -207,13 +207,7 @@ export const RentGpusForm: React.FunctionComponent = () => { setRentGpuSdl(data); if (isManaged) { - const isConfirmed = await createDeploymentConfirm(rentGpuSdl?.services as ServiceType[]); - - if (!isConfirmed) { - return; - } - - await handleCreateClick(defaultDeposit, browserEnvConfig.NEXT_PUBLIC_MASTER_WALLET_ADDRESS); + setIsDepositingDeployment(true); } else { setIsCheckingPrerequisites(true); } @@ -298,13 +292,23 @@ export const RentGpusForm: React.FunctionComponent = () => { infoText={

- To create a deployment, you need to have at least {minDeposit.akt} AKT or {minDeposit.usdc} USDC in an escrow account.{" "} + {isManaged ? ( + <> + To create a deployment, you need to have at least ${depositData?.min} in an escrow account.{" "} + + ) : ( + <> + To create a deployment, you need to have at least {minDeposit.akt} AKT or {minDeposit.usdc} USDC in an escrow account.{" "} + + )} handleDocClick(ev, "https://akash.network/docs/getting-started/intro-to-akash/bids-and-leases/#escrow-accounts")}> Learn more.

} + title="Confirm deployment creation?" + services={rentGpuSdl?.services} /> )} {isCheckingPrerequisites && setIsCheckingPrerequisites(false)} onContinue={onPrerequisiteContinue} />} diff --git a/apps/deploy-web/src/hooks/useManagedDeploymentConfirm.tsx b/apps/deploy-web/src/hooks/useManagedDeploymentConfirm.tsx index 366bdca64..2581fa119 100644 --- a/apps/deploy-web/src/hooks/useManagedDeploymentConfirm.tsx +++ b/apps/deploy-web/src/hooks/useManagedDeploymentConfirm.tsx @@ -1,16 +1,8 @@ -import { FormattedNumber } from "react-intl"; -import { Alert, AlertDescription, AlertTitle } from "@akashnetwork/ui/components"; import { usePopup } from "@akashnetwork/ui/context"; -import { LeaseSpecDetail } from "@src/components/shared/LeaseSpecDetail"; -import { useChainParam } from "@src/context/ChainParamProvider"; import { useWallet } from "@src/context/WalletProvider"; -import { ServiceType } from "@src/types"; -import { useWalletBalance } from "./useWalletBalance"; export const useManagedDeploymentConfirm = () => { - const { minDeposit } = useChainParam(); - const { balance: walletBalance } = useWalletBalance(); const { isManaged } = useWallet(); const { confirm } = usePopup(); @@ -36,69 +28,5 @@ export const useManagedDeploymentConfirm = () => { return true; }; - const createDeploymentConfirm = async (services: ServiceType[]) => { - if (isManaged) { - const hasEnoughForDeposit = (walletBalance?.totalDeploymentGrantsUSD || 0) >= minDeposit.usdc; - - const isConfirmed = await confirm({ - title: "Confirm deployment creation?", - message: ( -
- {!hasEnoughForDeposit && ( - - Insufficient funds - -

- You need more than{" "} - {" "} - available to create a deployment. -

-

- Current available balance:{" "} - - - -

-
-
- )} - - {services.map(service => { - return ( - -
- {service.title}:{service.image} -
-
- - {service.profile?.hasGpu && } - - -
-
- ); - })} -
- ) - }); - - if (!isConfirmed) { - return false; - } - } - - return true; - }; - - return { closeDeploymentConfirm, createDeploymentConfirm }; + return { closeDeploymentConfirm }; };