updated label text to reflect new min deposit

deploy-web/src/components/get-started/GetStartedStepper.tsx

@@ -1,5 +1,5 @@
 import { cx } from "@emotion/css";
-import { Box, Button, CircularProgress, Paper, Step, StepContent, StepLabel, Stepper, Typography } from "@mui/material";
+import { Box, Button, CircularProgress, Step, StepContent, StepLabel, Stepper, Typography } from "@mui/material";
 import { useWallet } from "@src/context/WalletProvider";
 import { UrlService } from "@src/utils/urlUtils";
 import Link from "next/link";
@@ -19,6 +19,7 @@ import { CustomTooltip } from "../shared/CustomTooltip";
 import { RouteStepKeys } from "@src/utils/constants";
 import { udenomToDenom } from "@src/utils/mathHelpers";
 import "@leapwallet/elements/styles.css";
+import { useChainParam } from "@src/context/ChainParamProvider";
 
 const LiquidityModal = dynamic(() => import("../liquidity-modal"), {
   ssr: false,
@@ -53,6 +54,7 @@ export const GetStartedStepper: React.FunctionComponent<Props> = () => {
   const { classes } = useStyles();
   const [activeStep, setActiveStep] = useState(0);
   const { isWalletConnected, walletBalances, address, refreshBalances } = useWallet();
+  const { minDeposit } = useChainParam();
   const aktBalance = walletBalances ? uaktToAKT(walletBalances.uakt) : null;
   const usdcBalance = walletBalances ? udenomToDenom(walletBalances.usdc) : null;
 
@@ -99,8 +101,8 @@ export const GetStartedStepper: React.FunctionComponent<Props> = () => {
 
         <StepContent>
           <Typography variant="body2" color="textSecondary">
-            You need at least 5 AKT or USDC in your wallet to deploy on Akash. If you don't have 5 AKT or USDC, you can request for some tokens to get started
-            on our <ExternalLink href="https://discord.gg/akash" text="Discord" />.
+            You need at least {minDeposit.akt} AKT or {minDeposit.usdc} USDC in your wallet to deploy on Akash. If you don't have {minDeposit.akt} AKT or{" "}
+            {minDeposit.usdc} USDC, you can request for some tokens to get started on our <ExternalLink href="https://discord.gg/akash" text="Discord" />.
           </Typography>
 
           <Box sx={{ mt: 1, mb: 2, display: "flex", alignItems: "center" }}>
@@ -135,13 +137,13 @@ export const GetStartedStepper: React.FunctionComponent<Props> = () => {
 
           {walletBalances && (
             <Box sx={{ display: "flex", alignItems: "center", margin: "1rem 0" }}>
-              {aktBalance >= 5 || usdcBalance >= 5 ? (
+              {aktBalance >= minDeposit.akt || usdcBalance >= minDeposit.usdc ? (
                 <CheckIcon color="success" sx={{ marginRight: ".5rem" }} />
               ) : (
                 <CustomTooltip
                   title={
                     <>
-                      If you don't have 5 AKT or USDC, you can request authorization for some tokens to get started on our{" "}
+                      If you don't have {minDeposit.akt} AKT or {minDeposit.usdc} USDC, you can request authorization for some tokens to get started on our{" "}
                       <ExternalLink href="https://discord.gg/akash" text="Discord" />.
                     </>
                   }
@@ -224,4 +226,3 @@ export const GetStartedStepper: React.FunctionComponent<Props> = () => {
     </Stepper>
   );
 };
-

deploy-web/src/components/newDeploymentWizard/ManifestEdit.tsx

@@ -28,6 +28,7 @@ import sdlStore from "@src/store/sdlStore";
 import { useAtom } from "jotai";
 import { SdlBuilder, SdlBuilderRefType } from "./SdlBuilder";
 import { validateDeploymentData } from "@src/utils/deploymentUtils";
+import { useChainParam } from "@src/context/ChainParamProvider";
 
 const yaml = require("js-yaml");
 
@@ -68,6 +69,7 @@ export const ManifestEdit: React.FunctionComponent<Props> = ({ editedManifest, s
   const theme = useTheme();
   const smallScreen = useMediaQuery(theme.breakpoints.down("md"));
   const sdlBuilderRef = useRef<SdlBuilderRefType>(null);
+  const { minDeposit } = useChainParam();
 
   useEffect(() => {
     if (selectedTemplate?.name) {
@@ -319,7 +321,7 @@ export const ManifestEdit: React.FunctionComponent<Props> = ({ editedManifest, s
           infoText={
             <Alert severity="info" className={classes.alert} variant="outlined">
               <Typography variant="caption">
-                To create a deployment, you need to have at least <b>5 AKT</b> or <b>5 USDC</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.{" "}
                 <LinkTo onClick={ev => handleDocClick(ev, "https://docs.akash.network/glossary/escrow#escrow-accounts")}>
                   <strong>Learn more.</strong>
                 </LinkTo>

deploy-web/src/components/newDeploymentWizard/PrerequisiteList.tsx

@@ -7,6 +7,7 @@ import { makeStyles } from "tss-react/mui";
 import { useWallet } from "@src/context/WalletProvider";
 import { ConnectWallet } from "../shared/ConnectWallet";
 import { Popup } from "../shared/Popup";
+import { useChainParam } from "@src/context/ChainParamProvider";
 
 const useStyles = makeStyles()(theme => ({
   list: {
@@ -26,6 +27,7 @@ export const PrerequisiteList: React.FunctionComponent<Props> = ({ onClose, onCo
   const [isLoadingPrerequisites, setIsLoadingPrerequisites] = useState(false);
   const [isBalanceValidated, setIsBalanceValidated] = useState(null);
   const { address, walletBalances, refreshBalances } = useWallet();
+  const { minDeposit } = useChainParam();
 
   useEffect(() => {
     async function loadPrerequisites() {
@@ -86,7 +88,7 @@ export const PrerequisiteList: React.FunctionComponent<Props> = ({ onClose, onCo
               </ListItemIcon>
               <ListItemText
                 primary="Wallet Balance"
-                secondary="The balance of the wallet needs to be of at least 5 AKT or USDC. If you do not have 5 AKT or USDC, you will need to specify an authorized depositor."
+                secondary={`The balance of the wallet needs to be of at least ${minDeposit.akt} AKT or ${minDeposit.usdc} USDC. If you do not have ${minDeposit.akt} AKT or ${minDeposit.usdc} USDC, you will need to specify an authorized depositor.`}
               />
             </ListItem>
           </List>
@@ -99,4 +101,3 @@ export const PrerequisiteList: React.FunctionComponent<Props> = ({ onClose, onCo
     </Popup>
   );
 };
-

deploy-web/src/components/sdl/RentGpusForm.tsx

@@ -35,6 +35,7 @@ import { ImageSelect } from "./ImageSelect";
 import RocketLaunchIcon from "@mui/icons-material/RocketLaunch";
 import { event } from "nextjs-google-analytics";
 import { AnalyticsEvents } from "@src/utils/analytics";
+import { useChainParam } from "@src/context/ChainParamProvider";
 
 const yaml = require("js-yaml");
 
@@ -63,6 +64,7 @@ export const RentGpusForm: React.FunctionComponent<Props> = ({}) => {
   const { address, signAndBroadcastTx } = useWallet();
   const { loadValidCertificates, localCert, isLocalCertMatching, loadLocalCert, setSelectedCertificate } = useCertificate();
   const [sdlDenom, setSdlDenom] = useState("uakt");
+  const { minDeposit } = useChainParam();
 
   useEffect(() => {
     if (rentGpuSdl && rentGpuSdl.services) {
@@ -219,7 +221,7 @@ export const RentGpusForm: React.FunctionComponent<Props> = ({}) => {
           infoText={
             <Alert severity="info" sx={{ marginBottom: "1rem" }} variant="outlined">
               <Typography variant="caption">
-                To create a deployment, you need to have at least <b>5 AKT</b> or <b>5 USDC</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.{" "}
                 <LinkTo onClick={ev => handleDocClick(ev, "https://docs.akash.network/glossary/escrow#escrow-accounts")}>
                   <strong>Learn more.</strong>
                 </LinkTo>

deploy-web/src/context/ChainParamProvider/ChainParamProvider.tsx

@@ -0,0 +1,41 @@
+import React from "react";
+import { useEffect } from "react";
+import { uAktDenom } from "@src/utils/constants";
+import { useSettings } from "../SettingsProvider";
+import { useUsdcDenom } from "@src/hooks/useDenom";
+import { useDepositParams } from "@src/queries/useSettings";
+import { uaktToAKT } from "@src/utils/priceUtils";
+import { udenomToDenom } from "@src/utils/mathHelpers";
+
+type MinDeposit = {
+  akt: number;
+  usdc: number;
+};
+
+type ContextType = {
+  minDeposit: MinDeposit;
+};
+
+const ChainParamContext = React.createContext<ContextType>({} as ContextType);
+
+export const ChainParamProvider = ({ children }) => {
+  const { isSettingsInit } = useSettings();
+  const { data: depositParams, refetch: getDepositParams } = useDepositParams({ enabled: false });
+  const usdcDenom = useUsdcDenom();
+  const aktMinDeposit = depositParams ? uaktToAKT(parseFloat(depositParams.find(x => x.denom === uAktDenom)?.amount) || 0) : null;
+  const usdcMinDeposit = depositParams ? udenomToDenom(parseFloat(depositParams.find(x => x.denom === usdcDenom)?.amount) || 0) : null;
+  const minDeposit = { akt: aktMinDeposit, usdc: usdcMinDeposit };
+
+  useEffect(() => {
+    if (isSettingsInit && !depositParams) {
+      getDepositParams();
+    }
+  }, [isSettingsInit, depositParams]);
+
+  return <ChainParamContext.Provider value={{ minDeposit }}>{children}</ChainParamContext.Provider>;
+};
+
+// Hook
+export function useChainParam() {
+  return { ...React.useContext(ChainParamContext) };
+}

deploy-web/src/context/ChainParamProvider/index.ts

@@ -0,0 +1 @@
+export { useChainParam, ChainParamProvider } from "./ChainParamProvider";

deploy-web/src/context/SettingsProvider/SettingsProviderContext.tsx

@@ -7,6 +7,7 @@ import { migrateLocalStorage } from "@src/utils/localStorage";
 import { initAppTypes } from "@src/utils/init";
 import { NodeStatus } from "@src/types/node";
 import { initiateNetworkData, networks } from "@src/store/networkStore";
+import { DepositParams } from "@src/types/deployment";
 
 type Node = {
   api: string;
@@ -317,4 +318,3 @@ export const SettingsProvider = ({ children }) => {
 export const useSettings = () => {
   return { ...React.useContext(SettingsProviderContext) };
 };
-

deploy-web/src/pages/_app.tsx

@@ -28,6 +28,7 @@ import { PageHead } from "@src/components/layout/PageHead";
 import { CustomChainProvider } from "@src/context/CustomChainProvider";
 
 import "@interchain-ui/react/styles";
+import { ChainParamProvider } from "@src/context/ChainParamProvider";
 
 interface Props extends AppProps {
   emotionCache?: EmotionCache;
@@ -76,18 +77,20 @@ const App: React.FunctionComponent<Props> = ({ Component, pageProps, emotionCach
                     <AddressBookProvider>
                       <SettingsProvider>
                         <CustomChainProvider>
-                          <WalletProvider>
-                            <CertificateProvider>
-                              <TemplatesProvider>
-                                <LocalNoteProvider>
-                                  <BackgroundTaskProvider>
-                                    {isProd && <GoogleAnalytics />}
-                                    <Component {...pageProps} />
-                                  </BackgroundTaskProvider>
-                                </LocalNoteProvider>
-                              </TemplatesProvider>
-                            </CertificateProvider>
-                          </WalletProvider>
+                          <ChainParamProvider>
+                            <WalletProvider>
+                              <CertificateProvider>
+                                <TemplatesProvider>
+                                  <LocalNoteProvider>
+                                    <BackgroundTaskProvider>
+                                      {isProd && <GoogleAnalytics />}
+                                      <Component {...pageProps} />
+                                    </BackgroundTaskProvider>
+                                  </LocalNoteProvider>
+                                </TemplatesProvider>
+                              </CertificateProvider>
+                            </WalletProvider>
+                          </ChainParamProvider>
                         </CustomChainProvider>
                       </SettingsProvider>
                     </AddressBookProvider>