From 0e88a9e0b5a3fc44067a35d32c8e7aa5bfaf2b1b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Jadach?= <michal.jadach@hoprnet.org>
Date: Wed, 15 Jan 2025 11:18:49 +0100
Subject: [PATCH] validate eth address in withdrawl modal, bugfix disabled
 withdraw button

---
 package.json                                |  2 +-
 src/components/Modal/node/WithdrawModal.tsx | 32 +++++++++++++++------
 2 files changed, 25 insertions(+), 9 deletions(-)

diff --git a/package.json b/package.json
index a605e6cc..2f9e8792 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "hopr-admin",
-  "version": "2.1.13",
+  "version": "2.1.12",
   "private": true,
   "dependencies": {
     "@emotion/react": "^11.11.0",
diff --git a/src/components/Modal/node/WithdrawModal.tsx b/src/components/Modal/node/WithdrawModal.tsx
index 1edecd49..5066f0ae 100644
--- a/src/components/Modal/node/WithdrawModal.tsx
+++ b/src/components/Modal/node/WithdrawModal.tsx
@@ -11,7 +11,7 @@ import CloseIcon from '@mui/icons-material/Close';
 import WithdrawIcon from '../../../future-hopr-lib-components/Icons/Withdraw';
 import LaunchIcon from '@mui/icons-material/Launch';
 import { nodeActionsAsync } from '../../../store/slices/node';
-import { parseEther } from 'viem';
+import { parseEther, isAddress } from 'viem';
 import { utils as hoprdUtils } from '@hoprnet/hopr-sdk';
 const { sdkApiError } = hoprdUtils;
 
@@ -83,17 +83,18 @@ const WithdrawModal = ({ initialCurrency }: WithdrawModalProps) => {
   const [openModal, set_openModal] = useState(false);
   const [currency, set_currency] = useState<'HOPR' | 'NATIVE'>(initialCurrency ?? 'NATIVE');
   const [amount, set_amount] = useState<string>('');
-  const [maxAmount, set_maxAmount] = useState<string>('');
+  const [maxAmount, set_maxAmount] = useState<string>(nativeBalance.value ?? '');
   const [recipient, set_recipient] = useState<string>('');
   const [isLoading, set_isLoading] = useState(false);
   const [transactionHash, set_transactionHash] = useState('');
 
   const withdrawingZeroOrLess = amount ? parseEther(amount) <= parseEther('0') : false;
   const withdrawingMoreThanTheWallet = amount ? parseEther(amount) > parseEther(maxAmount) : false;
+  const validatedEthAddress = isAddress(recipient);
 
   useEffect(() => {
     setMaxAmount();
-  }, [currency]);
+  }, [currency, nativeBalance.value]);
 
   const handleOpenModal = () => {
     set_openModal(true);
@@ -103,12 +104,24 @@ const WithdrawModal = ({ initialCurrency }: WithdrawModalProps) => {
     set_openModal(false);
   };
 
-  const setMaxAmount = () => {
+  // Testing:
+  useEffect(() => {
+    console.log({recipient, amount, withdrawingZeroOrLess, withdrawingMoreThanTheWallet,  ' parseEther(amount)': parseEther(amount), 'parseEther(maxAmount)': parseEther(maxAmount), native: nativeBalance});
+  }, [recipient, amount, withdrawingZeroOrLess, withdrawingMoreThanTheWallet,maxAmount, nativeBalance]);
+
+  const setAmount = () => {
+    setMaxAmount();
     if (currency === 'HOPR' && hoprBalance.formatted) {
       set_amount(hoprBalance.formatted);
-      set_maxAmount(hoprBalance.formatted);
     } else if (currency === 'NATIVE' && nativeBalance.formatted) {
       set_amount(nativeBalance.formatted);
+    }
+  };
+
+  const setMaxAmount = () => {
+    if (currency === 'HOPR' && hoprBalance.formatted) {
+      set_maxAmount(hoprBalance.formatted);
+    } else if (currency === 'NATIVE' && nativeBalance.formatted) {
       set_maxAmount(nativeBalance.formatted);
     }
   };
@@ -222,7 +235,7 @@ const WithdrawModal = ({ initialCurrency }: WithdrawModalProps) => {
               InputProps={{
                 endAdornment: (
                   <InputAdornment position="end">
-                    <MaxButton onClick={setMaxAmount}>Max</MaxButton>
+                    <MaxButton onClick={setAmount}>Max</MaxButton>
                   </InputAdornment>
                 ),
                 inputProps: { min: 0, step: 'any' },
@@ -235,12 +248,15 @@ const WithdrawModal = ({ initialCurrency }: WithdrawModalProps) => {
                 safeAddress ? `${safeAddress.substring(0, 6)}...${safeAddress.substring(38)}` : '0x4f5a...1728'
               }
               value={recipient}
-              onChange={(e) => set_recipient(e.target.value)}
+              onChange={(e) => {
+                console.log('rec', e.target.value)
+                set_recipient(e.target.value)
+              }}
             />
             <Button
               onClick={handleWithdraw}
               pending={isLoading}
-              disabled={!recipient || !amount || withdrawingZeroOrLess || withdrawingMoreThanTheWallet}
+              disabled={!recipient || !amount || withdrawingZeroOrLess || withdrawingMoreThanTheWallet || !validatedEthAddress}
             >
               Withdraw
             </Button>