From d158ca6d81580766362810ad4bbc7c219dcae52d Mon Sep 17 00:00:00 2001 From: Maxime Beauchamp <15185355+baktun14@users.noreply.github.com> Date: Fri, 1 Mar 2024 16:18:31 -0500 Subject: [PATCH] handle min value in deployment deposit --- .../deployment/DeploymentListRow.tsx | 1 + .../DeploymentDepositModal.tsx | 21 ++++++++++++------- .../DeploymentDetailTopBar.tsx | 1 + .../newDeploymentWizard/ManifestEdit.tsx | 1 - .../src/components/sdl/RentGpusForm.tsx | 1 - deploy-web/src/hooks/useWalletBalance.ts | 10 ++++++--- deploy-web/src/queries/useSettings.ts | 4 +--- deploy-web/src/types/deployment.ts | 2 +- 8 files changed, 24 insertions(+), 17 deletions(-) diff --git a/deploy-web/src/components/deployment/DeploymentListRow.tsx b/deploy-web/src/components/deployment/DeploymentListRow.tsx index 3e5814749..9ee1c9c57 100644 --- a/deploy-web/src/components/deployment/DeploymentListRow.tsx +++ b/deploy-web/src/components/deployment/DeploymentListRow.tsx @@ -360,6 +360,7 @@ export const DeploymentListRow: React.FunctionComponent = ({ deployment, {isActive && isDepositingDeployment && ( setIsDepositingDeployment(false)} onDeploymentDeposit={onDeploymentDeposit} /> diff --git a/deploy-web/src/components/deploymentDetail/DeploymentDepositModal.tsx b/deploy-web/src/components/deploymentDetail/DeploymentDepositModal.tsx index d711a6657..ae3d7a7be 100644 --- a/deploy-web/src/components/deploymentDetail/DeploymentDepositModal.tsx +++ b/deploy-web/src/components/deploymentDetail/DeploymentDepositModal.tsx @@ -20,14 +20,14 @@ import { GranteeDepositMenuItem } from "./GranteeDepositMenuItem"; type Props = { infoText?: string | ReactNode; - min?: number; + disableMin?: boolean; denom: string; onDeploymentDeposit: (deposit: number, depositorAddress: string) => void; handleCancel: () => void; children?: ReactNode; }; -export const DeploymentDepositModal: React.FunctionComponent = ({ handleCancel, onDeploymentDeposit, denom, min = 0, infoText = null }) => { +export const DeploymentDepositModal: React.FunctionComponent = ({ handleCancel, onDeploymentDeposit, disableMin, denom, infoText = null }) => { const formRef = useRef(null); const { settings } = useSettings(); const { enqueueSnackbar } = useSnackbar(); @@ -35,6 +35,7 @@ export const DeploymentDepositModal: React.FunctionComponent = ({ handleC const [isCheckingDepositor, setIsCheckingDepositor] = useState(false); const { walletBalances, address } = useWallet(); const { data: granteeGrants } = useGranteeGrants(address); + const depositData = useDenomData(denom); const { handleSubmit, control, @@ -45,15 +46,20 @@ export const DeploymentDepositModal: React.FunctionComponent = ({ handleC unregister } = useForm({ defaultValues: { - amount: min, + amount: 0, useDepositor: false, depositorAddress: "" } }); const { amount, useDepositor, depositorAddress } = watch(); - const depositData = useDenomData(denom); const usdcIbcDenom = useUsdcDenom(); + useEffect(() => { + if (depositData && amount === 0 && !disableMin) { + setValue("amount", depositData?.min || 0); + } + }, [depositData]); + useEffect(() => { clearErrors(); setError(""); @@ -127,8 +133,8 @@ export const DeploymentDepositModal: React.FunctionComponent = ({ handleC clearErrors(); const deposit = denomToUdenom(amount); - if (deposit < denomToUdenom(min)) { - setError(`Deposit amount must be greater or equal than ${min}.`); + if (!disableMin && deposit < depositData?.min) { + setError(`Deposit amount must be greater or equal than ${depositData?.min}.`); return; } @@ -209,7 +215,7 @@ export const DeploymentDepositModal: React.FunctionComponent = ({ handleC autoFocus error={!!fieldState.error} helperText={fieldState.error && helperText} - inputProps={{ min: min, step: 0.000001, max: depositData?.inputMax }} + inputProps={{ min: (!disableMin && depositData?.min) || 0, step: 0.000001, max: depositData?.inputMax }} InputProps={{ startAdornment: {depositData?.label} }} @@ -265,4 +271,3 @@ export const DeploymentDepositModal: React.FunctionComponent = ({ handleC ); }; - diff --git a/deploy-web/src/components/deploymentDetail/DeploymentDetailTopBar.tsx b/deploy-web/src/components/deploymentDetail/DeploymentDetailTopBar.tsx index 4c01f44e4..eb6a08fee 100644 --- a/deploy-web/src/components/deploymentDetail/DeploymentDetailTopBar.tsx +++ b/deploy-web/src/components/deploymentDetail/DeploymentDetailTopBar.tsx @@ -206,6 +206,7 @@ export const DeploymentDetailTopBar: React.FunctionComponent = ({ address {isDepositingDeployment && ( setIsDepositingDeployment(false)} onDeploymentDeposit={onDeploymentDeposit} /> diff --git a/deploy-web/src/components/newDeploymentWizard/ManifestEdit.tsx b/deploy-web/src/components/newDeploymentWizard/ManifestEdit.tsx index 4c4452cc8..b0b085345 100644 --- a/deploy-web/src/components/newDeploymentWizard/ManifestEdit.tsx +++ b/deploy-web/src/components/newDeploymentWizard/ManifestEdit.tsx @@ -315,7 +315,6 @@ export const ManifestEdit: React.FunctionComponent = ({ editedManifest, s setIsDepositingDeployment(false)} onDeploymentDeposit={onDeploymentDeposit} - min={5} // TODO Query from chain params denom={sdlDenom} infoText={ diff --git a/deploy-web/src/components/sdl/RentGpusForm.tsx b/deploy-web/src/components/sdl/RentGpusForm.tsx index 9e7ac9215..0737c8ae4 100644 --- a/deploy-web/src/components/sdl/RentGpusForm.tsx +++ b/deploy-web/src/components/sdl/RentGpusForm.tsx @@ -215,7 +215,6 @@ export const RentGpusForm: React.FunctionComponent = ({}) => { setIsDepositingDeployment(false)} onDeploymentDeposit={onDeploymentDeposit} - min={5} // TODO Query from chain params denom={currentService?.placement?.pricing?.denom || sdlDenom} infoText={ diff --git a/deploy-web/src/hooks/useWalletBalance.ts b/deploy-web/src/hooks/useWalletBalance.ts index 02fc9cc5e..810c696ed 100644 --- a/deploy-web/src/hooks/useWalletBalance.ts +++ b/deploy-web/src/hooks/useWalletBalance.ts @@ -36,7 +36,11 @@ export const useDenomData = (denom: string) => { const { walletBalances } = useWallet(); const [depositData, setDepositData] = useState(null); const usdcIbcDenom = useUsdcDenom(); - const { data: depositParams } = useDepositParams(); + const { data: depositParams, refetch: getDepositParams } = useDepositParams({ enabled: false }); + + useEffect(() => { + getDepositParams(); + }, []); useEffect(() => { if (isLoaded && walletBalances && depositParams) { @@ -46,7 +50,7 @@ export const useDenomData = (denom: string) => { case uAktDenom: params = depositParams.find(p => p.denom === uAktDenom); depositData = { - min: parseInt(params?.amount || 0), + min: uaktToAKT(parseInt(params?.amount || 0)), label: "AKT", balance: uaktToAKT(walletBalances.uakt, 6), inputMax: uaktToAKT(Math.max(walletBalances.uakt - txFeeBuffer, 0), 6) @@ -55,7 +59,7 @@ export const useDenomData = (denom: string) => { case usdcIbcDenom: params = depositParams.find(p => p.denom === usdcIbcDenom); depositData = { - min: parseInt(params?.amount || 0), + min: udenomToDenom(parseInt(params?.amount || 0)), label: "USDC", balance: udenomToDenom(walletBalances.usdc, 6), inputMax: udenomToDenom(Math.max(walletBalances.usdc - txFeeBuffer, 0), 6) diff --git a/deploy-web/src/queries/useSettings.ts b/deploy-web/src/queries/useSettings.ts index dd3da565e..2e14f6744 100644 --- a/deploy-web/src/queries/useSettings.ts +++ b/deploy-web/src/queries/useSettings.ts @@ -27,9 +27,7 @@ export function useSaveSettings() { async function getDepositParams(apiEndpoint: string) { const depositParamsQuery = await axios.get(ApiUrlService.depositParams(apiEndpoint)); const depositParams = depositParamsQuery.data as RpcDeposiParams; - const params = JSON.parse(depositParams.params.value) as DepositParams[]; - - console.log(depositParams, params); + const params = JSON.parse(depositParams.param.value) as DepositParams[]; return params; } diff --git a/deploy-web/src/types/deployment.ts b/deploy-web/src/types/deployment.ts index 2448f6538..6ea6f8871 100644 --- a/deploy-web/src/types/deployment.ts +++ b/deploy-web/src/types/deployment.ts @@ -321,7 +321,7 @@ export interface BidDto { } export interface RpcDeposiParams { - params: { + param: { subspace: string; key: string; // Array of { denom: string, amount: string }