fix(billing): move duplicated code to a component

refs #628
akash-network · Feb 12, 2025 · d894665 · d894665
1 parent c12562d
commit d894665
Show file tree

Hide file tree

Showing 3 changed files with 26 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,9 @@ 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 { 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";
@@ -37,6 +35,7 @@ import { domainName, handleDocClick, UrlService } from "@src/utils/urlUtils";
 import { updateWallet } from "@src/utils/walletUtils";
 import { useSettings } from "../../context/SettingsProvider";
 import { DeploymentDepositModal } from "../deployments/DeploymentDepositModal";
+import { DeploymentMinimumEscrowAlertText } from "../sdl/DeploymentMinimumEscrowAlertText";
 import { CustomNextSeo } from "../shared/CustomNextSeo";
 import { DynamicMonacoEditor } from "../shared/DynamicMonacoEditor";
 import { LinkTo } from "../shared/LinkTo";
@@ -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");
@@ -428,15 +425,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/DeploymentMinimumEscrowAlertText.tsx b/apps/deploy-web/src/components/sdl/DeploymentMinimumEscrowAlertText.tsx
@@ -0,0 +1,22 @@
+import { FC, useState } from "react";
+
+import { useChainParam } from "@src/context/ChainParamProvider";
+import { useWallet } from "@src/context/WalletProvider";
+import { useDenomData } from "@src/hooks/useWalletBalance";
+
+export const DeploymentMinimumEscrowAlertText: FC = () => {
+  const { isManaged } = useWallet();
+  const [sdlDenom] = useState("uakt");
+  const depositData = useDenomData(sdlDenom);
+  const { minDeposit } = useChainParam();
+
+  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.{" "}
+    </>
+  );
+};
diff --git a/apps/deploy-web/src/components/sdl/RentGpusForm.tsx b/apps/deploy-web/src/components/sdl/RentGpusForm.tsx
@@ -12,11 +12,9 @@ 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 { 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";
@@ -41,6 +39,7 @@ import { LinkTo } from "../shared/LinkTo";
 import { PrerequisiteList } from "../shared/PrerequisiteList";
 import { AdvancedConfig } from "./AdvancedConfig";
 import { CpuFormControl } from "./CpuFormControl";
+import { DeploymentMinimumEscrowAlertText } from "./DeploymentMinimumEscrowAlertText";
 import { FormPaper } from "./FormPaper";
 import { GpuFormControl } from "./GpuFormControl";
 import { ImageSelect } from "./ImageSelect";
@@ -75,12 +74,10 @@ 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);
 
   useWhen(isManaged && sdlDenom === "uakt", () => {
     setSdlDenom(managedDenom);
@@ -292,15 +289,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>