From 511c673ea6f58ef708a0ceb07c61650c54a262fb Mon Sep 17 00:00:00 2001 From: Maxime Beauchamp Date: Tue, 12 Mar 2024 11:33:12 -0400 Subject: [PATCH 1/2] updated label text to reflect new min deposit --- deploy-web/src/components/get-started/GetStartedStepper.tsx | 2 +- deploy-web/src/components/newDeploymentWizard/ManifestEdit.tsx | 2 +- .../src/components/newDeploymentWizard/PrerequisiteList.tsx | 2 +- deploy-web/src/components/sdl/RentGpusForm.tsx | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/deploy-web/src/components/get-started/GetStartedStepper.tsx b/deploy-web/src/components/get-started/GetStartedStepper.tsx index 175c3d47b..a891877f8 100644 --- a/deploy-web/src/components/get-started/GetStartedStepper.tsx +++ b/deploy-web/src/components/get-started/GetStartedStepper.tsx @@ -99,7 +99,7 @@ export const GetStartedStepper: React.FunctionComponent = () => { - 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 + You need at least .5 AKT or 5 USDC in your wallet to deploy on Akash. If you don't have .5 AKT or 5 USDC, you can request for some tokens to get started on our . diff --git a/deploy-web/src/components/newDeploymentWizard/ManifestEdit.tsx b/deploy-web/src/components/newDeploymentWizard/ManifestEdit.tsx index b0b085345..bc3372577 100644 --- a/deploy-web/src/components/newDeploymentWizard/ManifestEdit.tsx +++ b/deploy-web/src/components/newDeploymentWizard/ManifestEdit.tsx @@ -319,7 +319,7 @@ export const ManifestEdit: React.FunctionComponent = ({ editedManifest, s infoText={ - To create a deployment, you need to have at least 5 AKT or 5 USDC in an escrow account.{" "} + To create a deployment, you need to have at least .5 AKT or 5 USDC in an escrow account.{" "} handleDocClick(ev, "https://docs.akash.network/glossary/escrow#escrow-accounts")}> Learn more. diff --git a/deploy-web/src/components/newDeploymentWizard/PrerequisiteList.tsx b/deploy-web/src/components/newDeploymentWizard/PrerequisiteList.tsx index 7c4d685af..44e7c6402 100644 --- a/deploy-web/src/components/newDeploymentWizard/PrerequisiteList.tsx +++ b/deploy-web/src/components/newDeploymentWizard/PrerequisiteList.tsx @@ -86,7 +86,7 @@ export const PrerequisiteList: React.FunctionComponent = ({ onClose, onCo diff --git a/deploy-web/src/components/sdl/RentGpusForm.tsx b/deploy-web/src/components/sdl/RentGpusForm.tsx index 0737c8ae4..0120d5e41 100644 --- a/deploy-web/src/components/sdl/RentGpusForm.tsx +++ b/deploy-web/src/components/sdl/RentGpusForm.tsx @@ -219,7 +219,7 @@ export const RentGpusForm: React.FunctionComponent = ({}) => { infoText={ - To create a deployment, you need to have at least 5 AKT or 5 USDC in an escrow account.{" "} + To create a deployment, you need to have at least .5 AKT or 5 USDC in an escrow account.{" "} handleDocClick(ev, "https://docs.akash.network/glossary/escrow#escrow-accounts")}> Learn more. From 302a4aeb58a42a1bee764526000b58b12382cb26 Mon Sep 17 00:00:00 2001 From: Maxime Beauchamp Date: Tue, 12 Mar 2024 15:00:48 -0400 Subject: [PATCH 2/2] add chain param context with min deposit values --- .../get-started/GetStartedStepper.tsx | 13 +++--- .../newDeploymentWizard/ManifestEdit.tsx | 4 +- .../newDeploymentWizard/PrerequisiteList.tsx | 5 ++- .../src/components/sdl/RentGpusForm.tsx | 4 +- .../ChainParamProvider/ChainParamProvider.tsx | 41 +++++++++++++++++++ .../src/context/ChainParamProvider/index.ts | 1 + .../SettingsProviderContext.tsx | 2 +- deploy-web/src/pages/_app.tsx | 27 ++++++------ 8 files changed, 74 insertions(+), 23 deletions(-) create mode 100644 deploy-web/src/context/ChainParamProvider/ChainParamProvider.tsx create mode 100644 deploy-web/src/context/ChainParamProvider/index.ts diff --git a/deploy-web/src/components/get-started/GetStartedStepper.tsx b/deploy-web/src/components/get-started/GetStartedStepper.tsx index a891877f8..a275c9085 100644 --- a/deploy-web/src/components/get-started/GetStartedStepper.tsx +++ b/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 = () => { 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 = () => { - You need at least .5 AKT or 5 USDC in your wallet to deploy on Akash. If you don't have .5 AKT or 5 USDC, you can request for some tokens to get started - on our . + 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 . @@ -135,13 +137,13 @@ export const GetStartedStepper: React.FunctionComponent = () => { {walletBalances && ( - {aktBalance >= 5 || usdcBalance >= 5 ? ( + {aktBalance >= minDeposit.akt || usdcBalance >= minDeposit.usdc ? ( ) : ( - 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{" "} . } @@ -224,4 +226,3 @@ export const GetStartedStepper: React.FunctionComponent = () => { ); }; - diff --git a/deploy-web/src/components/newDeploymentWizard/ManifestEdit.tsx b/deploy-web/src/components/newDeploymentWizard/ManifestEdit.tsx index bc3372577..6d5735aec 100644 --- a/deploy-web/src/components/newDeploymentWizard/ManifestEdit.tsx +++ b/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 = ({ editedManifest, s const theme = useTheme(); const smallScreen = useMediaQuery(theme.breakpoints.down("md")); const sdlBuilderRef = useRef(null); + const { minDeposit } = useChainParam(); useEffect(() => { if (selectedTemplate?.name) { @@ -319,7 +321,7 @@ export const ManifestEdit: React.FunctionComponent = ({ editedManifest, s infoText={ - To create a deployment, you need to have at least .5 AKT or 5 USDC 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://docs.akash.network/glossary/escrow#escrow-accounts")}> Learn more. diff --git a/deploy-web/src/components/newDeploymentWizard/PrerequisiteList.tsx b/deploy-web/src/components/newDeploymentWizard/PrerequisiteList.tsx index 44e7c6402..f36a2692b 100644 --- a/deploy-web/src/components/newDeploymentWizard/PrerequisiteList.tsx +++ b/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 = ({ 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 = ({ onClose, onCo @@ -99,4 +101,3 @@ export const PrerequisiteList: React.FunctionComponent = ({ onClose, onCo ); }; - diff --git a/deploy-web/src/components/sdl/RentGpusForm.tsx b/deploy-web/src/components/sdl/RentGpusForm.tsx index 0120d5e41..9cfb5c19f 100644 --- a/deploy-web/src/components/sdl/RentGpusForm.tsx +++ b/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 = ({}) => { 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 = ({}) => { infoText={ - To create a deployment, you need to have at least .5 AKT or 5 USDC 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://docs.akash.network/glossary/escrow#escrow-accounts")}> Learn more. diff --git a/deploy-web/src/context/ChainParamProvider/ChainParamProvider.tsx b/deploy-web/src/context/ChainParamProvider/ChainParamProvider.tsx new file mode 100644 index 000000000..942cc93f1 --- /dev/null +++ b/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({} 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 {children}; +}; + +// Hook +export function useChainParam() { + return { ...React.useContext(ChainParamContext) }; +} diff --git a/deploy-web/src/context/ChainParamProvider/index.ts b/deploy-web/src/context/ChainParamProvider/index.ts new file mode 100644 index 000000000..25dbec1da --- /dev/null +++ b/deploy-web/src/context/ChainParamProvider/index.ts @@ -0,0 +1 @@ +export { useChainParam, ChainParamProvider } from "./ChainParamProvider"; diff --git a/deploy-web/src/context/SettingsProvider/SettingsProviderContext.tsx b/deploy-web/src/context/SettingsProvider/SettingsProviderContext.tsx index bb3f555bb..c90777aa3 100644 --- a/deploy-web/src/context/SettingsProvider/SettingsProviderContext.tsx +++ b/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) }; }; - diff --git a/deploy-web/src/pages/_app.tsx b/deploy-web/src/pages/_app.tsx index 378b8a382..e4c212274 100644 --- a/deploy-web/src/pages/_app.tsx +++ b/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 = ({ Component, pageProps, emotionCach - - - - - - {isProd && } - - - - - - + + + + + + + {isProd && } + + + + + + +