deposit-hook: add min amount validation

apps/deposit-pool/src/components/FormButton.tsx

@@ -51,15 +51,23 @@ export function FormButton({ poolBalances }: { poolBalances: IBalance[] }) {
       .filter((symbol) => symbol) as string[];
   }, [amounts, poolTokens, tokenAddresses]);
 
+  const zeroAmount = useMemo(() => {
+    return tokenAddresses
+      .map((tokenAddress) => amounts[tokenAddress])
+      .some((amount) => Number(amount) <= 0);
+  }, [amounts, tokenAddresses]);
+
   const shouldDisableButton = useMemo(() => {
     if (insufficientTokenSymbols.length) return true;
     if (Number(referenceAmount || "0") <= 0) return true;
+    if (zeroAmount) return true;
     if (isSubmitting) return true;
     return false;
-  }, [insufficientTokenSymbols, isSubmitting, referenceAmount]);
+  }, [insufficientTokenSymbols, isSubmitting, referenceAmount, zeroAmount]);
 
-  const ButtonMessage = () => {
+  const buttonMessage = useMemo(() => {
     if (Number(referenceAmount || "0") <= 0) return "Enter an amount";
+    if (zeroAmount) return "Enter a larger amount";
     if (insufficientTokenSymbols.length === 1) {
       return `Insufficient ${insufficientTokenSymbols[0]} balance`;
     }
@@ -69,14 +77,21 @@ export function FormButton({ poolBalances }: { poolBalances: IBalance[] }) {
     if (isSubmitting) return "Creating hook...";
     if (context?.hookToEdit) return "Update post-hook";
     return "Add post-hook";
-  };
+  }, [
+    zeroAmount,
+    insufficientTokenSymbols,
+    isSubmitting,
+    referenceAmount,
+    context?.hookToEdit,
+  ]);
+
   return (
     <ButtonPrimary
       className="mt-3"
       type="submit"
       disabled={shouldDisableButton}
     >
-      <ButtonMessage />
+      {buttonMessage}
     </ButtonPrimary>
   );
 }