fix(billing): move duplicated code to a hook

refs #628
akash-network · Feb 12, 2025 · 99cda8c · 99cda8c
1 parent 63c7e08
commit 99cda8c
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 26 deletions.
diff --git a/apps/deploy-web/src/components/new-deployment/ManifestEdit.tsx b/apps/deploy-web/src/components/new-deployment/ManifestEdit.tsx
@@ -14,11 +14,10 @@ import { useSnackbar } from "notistack";
 
 import { browserEnvConfig } from "@src/config/browser-env.config";
 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 { useDeploymentMinimumEscrowAlertText } from "@src/hooks/useDeploymentMinimumEscrowAlertText";
 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,7 +66,6 @@ export const ManifestEdit: React.FunctionComponent<Props> = ({
   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();
@@ -77,7 +75,6 @@ export const ManifestEdit: React.FunctionComponent<Props> = ({
   const muiTheme = useMuiTheme();
   const smallScreen = useMediaQuery(muiTheme.breakpoints.down("md"));
   const sdlBuilderRef = useRef<SdlBuilderRefType>(null);
-  const { minDeposit } = useChainParam();
   const { hasComponent } = useSdlBuilder();
   const searchParams = useSearchParams();
   const templateId = searchParams.get("templateId");
@@ -87,6 +84,7 @@ export const ManifestEdit: React.FunctionComponent<Props> = ({
   const managedDenom = useManagedWalletDenom();
   const { enqueueSnackbar } = useSnackbar();
   const services = importSimpleSdl(editedManifest as string);
+  const deploymentMinimumEscrowAlertText = useDeploymentMinimumEscrowAlertText();
 
   useWhen(
     wallet.isManaged && sdlDenom === "uakt" && editedManifest,
@@ -428,15 +426,7 @@ export const ManifestEdit: React.FunctionComponent<Props> = ({
           title="Confirm deployment creation?"
           infoText={
             <Alert className="mb-4 text-xs" variant="default">
-              {isManaged ? (
-                <>
-                  To create a deployment, you need to have at least <b>${depositData?.min}</b> in an escrow account.{" "}
-                </>
-              ) : (
-                <>
-                  To create a deployment, you need to have at least <b>{minDeposit.akt} AKT</b> or <b>{minDeposit.usdc} USDC</b> in an escrow account.{" "}
-                </>
-              )}
+              {deploymentMinimumEscrowAlertText}
               <LinkTo onClick={ev => handleDocClick(ev, "https://akash.network/docs/other-resources/payments/")}>
                 <strong>Learn more.</strong>
               </LinkTo>

diff --git a/apps/deploy-web/src/components/sdl/RentGpusForm.tsx b/apps/deploy-web/src/components/sdl/RentGpusForm.tsx
@@ -12,11 +12,10 @@ import { event } from "nextjs-google-analytics";
 
 import { browserEnvConfig } from "@src/config/browser-env.config";
 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 { useDeploymentMinimumEscrowAlertText } from "@src/hooks/useDeploymentMinimumEscrowAlertText";
 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";
@@ -75,12 +74,11 @@ export const RentGpusForm: React.FunctionComponent = () => {
   const { address, signAndBroadcastTx, isManaged } = useWallet();
   const { loadValidCertificates, localCert, isLocalCertMatching, loadLocalCert, setSelectedCertificate } = useCertificate();
   const [sdlDenom, setSdlDenom] = useState("uakt");
-  const { minDeposit } = useChainParam();
   const router = useRouter();
   const managedDenom = useManagedWalletDenom();
   const { data: depositParams } = useDepositParams();
   const defaultDeposit = depositParams || browserEnvConfig.NEXT_PUBLIC_DEFAULT_INITIAL_DEPOSIT;
-  const depositData = useDenomData(sdlDenom);
+  const deploymentMinimumEscrowAlertText = useDeploymentMinimumEscrowAlertText();
 
   useWhen(isManaged && sdlDenom === "uakt", () => {
     setSdlDenom(managedDenom);
@@ -292,15 +290,7 @@ export const RentGpusForm: React.FunctionComponent = () => {
           infoText={
             <Alert className="mb-4" variant="default">
               <p className="text-sm text-muted-foreground">
-                {isManaged ? (
-                  <>
-                    To create a deployment, you need to have at least <b>${depositData?.min}</b> in an escrow account.{" "}
-                  </>
-                ) : (
-                  <>
-                    To create a deployment, you need to have at least <b>{minDeposit.akt} AKT</b> or <b>{minDeposit.usdc} USDC</b> in an escrow account.{" "}
-                  </>
-                )}
+                {deploymentMinimumEscrowAlertText}
                 <LinkTo onClick={ev => handleDocClick(ev, "https://akash.network/docs/getting-started/intro-to-akash/bids-and-leases/#escrow-accounts")}>
                   <strong>Learn more.</strong>
                 </LinkTo>

diff --git a/apps/deploy-web/src/hooks/useDeploymentMinimumEscrowAlertText.tsx b/apps/deploy-web/src/hooks/useDeploymentMinimumEscrowAlertText.tsx
@@ -0,0 +1,24 @@
+import { useMemo, useState } from "react";
+
+import { useChainParam } from "@src/context/ChainParamProvider";
+import { useWallet } from "@src/context/WalletProvider";
+import { useDenomData } from "@src/hooks/useWalletBalance";
+
+export const useDeploymentMinimumEscrowAlertText = () => {
+  const { isManaged } = useWallet();
+  const [sdlDenom] = useState("uakt");
+  const depositData = useDenomData(sdlDenom);
+  const { minDeposit } = useChainParam();
+
+  return useMemo(() => {
+    return isManaged ? (
+      <>
+        To create a deployment, you need to have at least <b>${depositData?.min}</b> in an escrow account.{" "}
+      </>
+    ) : (
+      <>
+        To create a deployment, you need to have at least <b>{minDeposit.akt} AKT</b> or <b>{minDeposit.usdc} USDC</b> in an escrow account.{" "}
+      </>
+    );
+  }, [isManaged, depositData?.min, minDeposit.akt, minDeposit.usdc]);
+};