allow input take undefined/empty value

honey-protocol · Dec 7, 2022 · 134bc82 · 134bc82
1 parent e9a5e97
commit 134bc82
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 12 deletions.
diff --git a/components/BorrowForm/BorrowForm.tsx b/components/BorrowForm/BorrowForm.tsx
@@ -56,8 +56,8 @@ const BorrowForm = (props: BorrowProps) => {
 	} = getContractsByHTokenAddr(HERC20ContractAddress);
 	const setWorkflow = useLoanFlowStore((state) => state.setWorkflow);
 
-	const [valueUSD, setValueUSD] = useState<number>(0);
-	const [valueUnderlying, setValueUnderlying] = useState<number>(0);
+	const [valueUSD, setValueUSD] = useState<number | undefined>(0);
+	const [valueUnderlying, setValueUnderlying] = useState<number | undefined>(0);
 	const [sliderValue, setSliderValue] = useState(0);
 	const { toast, ToastComponent } = useToast();
 
@@ -104,7 +104,7 @@ const BorrowForm = (props: BorrowProps) => {
 	//todo use data from blockchain
 	const borrowFee = 0.005; // 0,5%
 
-	const newAdditionalDebt = valueUnderlying * (1 + borrowFee);
+	const newAdditionalDebt = (valueUnderlying ?? 0) * (1 + borrowFee);
 	const newTotalDebt = newAdditionalDebt ? borrowedValue + newAdditionalDebt : borrowedValue;
 	/* end initial all  financial value here */
 
@@ -146,8 +146,8 @@ const BorrowForm = (props: BorrowProps) => {
 	const handleUsdInputChange = (usdValue: number | undefined) => {
 		if (userAllowance <= 0) return;
 		if (!usdValue) {
-			setValueUSD(0);
-			setValueUnderlying(0);
+			setValueUSD(undefined);
+			setValueUnderlying(undefined);
 			setSliderValue(0);
 			return;
 		}
@@ -159,12 +159,11 @@ const BorrowForm = (props: BorrowProps) => {
 	const handleUnderlyingInputChange = (UnderlyingValue: number | undefined) => {
 		if (userAllowance <= 0) return;
 		if (!UnderlyingValue) {
-			setValueUSD(0);
-			setValueUnderlying(0);
+			setValueUSD(undefined);
+			setValueUnderlying(undefined);
 			setSliderValue(0);
 			return;
 		}
-
 		setValueUSD(UnderlyingValue * underlyingPrice);
 		setValueUnderlying(UnderlyingValue);
 		setSliderValue(UnderlyingValue);
@@ -178,7 +177,7 @@ const BorrowForm = (props: BorrowProps) => {
 			await borrowMutation.mutateAsync({
 				HERC20ContractAddress,
 				NFTTokenId: nft.tokenId,
-				amount: valueUnderlying.toString(),
+				amount: (valueUnderlying ?? 0).toString(),
 				unit
 			});
 			console.log('borrow succeed');
@@ -465,7 +464,7 @@ const BorrowForm = (props: BorrowProps) => {
 										Borrow Fee <div className={questionIcon} />
 									</span>
 								}
-								value={fs(valueUnderlying * borrowFee)}
+								value={fs((valueUnderlying ?? 0) * borrowFee)}
 								//TODO: add link to docs
 								toolTipLabel={
 									<span>
@@ -480,8 +479,8 @@ const BorrowForm = (props: BorrowProps) => {
 						</div>
 					</div>
 					<InputsBlock
-						firstInputValue={p(f(valueUSD))}
-						secondInputValue={p(f(valueUnderlying))}
+						firstInputValue={valueUSD ? p(f(valueUSD)) : undefined}
+						secondInputValue={valueUnderlying ? p(f(valueUnderlying)) : undefined}
 						onChangeFirstInput={handleUsdInputChange}
 						onChangeSecondInput={handleUnderlyingInputChange}
 						maxValue={userAllowance}

diff --git a/components/InputsBlock/InputsBlock.tsx b/components/InputsBlock/InputsBlock.tsx
@@ -47,6 +47,7 @@ export const InputsBlock: FC<InputsBlockProps> = ({
 			onChangeFirstInput(parseFloat(value));
 		} else {
 			onChangeFirstInput(undefined);
+			onChangeSecondInput(undefined);
 		}
 	};
 
@@ -55,6 +56,7 @@ export const InputsBlock: FC<InputsBlockProps> = ({
 		if (isValidNumericInput(value) && value !== '') {
 			onChangeSecondInput(Number(value) < maxValue ? Number(value) : maxValue);
 		} else {
+			onChangeFirstInput(undefined);
 			onChangeSecondInput(undefined);
 		}
 	};