Merge pull request #394 from WatchItDev/app/refactor/quick-trasnsfer-…

…amount

refactor: input amount and change wallet removed

src/sections/finance/components/finance-deposit-from-metamask.tsx

@@ -18,12 +18,12 @@ interface FinanceDepositFromMetamaskProps {
 const FinanceDepositFromMetamask: FC<FinanceDepositFromMetamaskProps> = ({ onClose }) => {
   const sessionData = useSelector((state: any) => state.auth.session);
   const depositHook = useDepositMetamask();
-  const { address, connecting, connect, setAddress } = useMetaMask();
+  const { address, connecting, connect } = useMetaMask();
 
   if (connecting) return <FinanceMetamaskLoader />;
   if (!address) return <FinanceMetamaskButton connect={connect} />;
 
-  return <FinanceDeposit address={address} recipient={sessionData?.address} depositHook={depositHook} onClose={onClose} onChangeWallet={setAddress} />;
+  return <FinanceDeposit address={address} recipient={sessionData?.address} depositHook={depositHook} onClose={onClose} />;
 };
 
 export default FinanceDepositFromMetamask;

src/sections/finance/components/finance-deposit.tsx

@@ -62,7 +62,7 @@ interface FinanceDepositProps {
  * - `depositHook` (generic or Metamask deposit hook)
  * - `onClose`
  */
-const FinanceDeposit: FC<FinanceDepositProps> = ({ address, recipient, depositHook, onClose, onChangeWallet }) => {
+const FinanceDeposit: FC<FinanceDepositProps> = ({ address, recipient, depositHook, onClose }) => {
   const [amount, setAmount] = useState<number>();
   const [helperText, setHelperText] = useState<string>("");
   const { balance } = useGetMmcContractBalance(address);
@@ -175,7 +175,6 @@ const FinanceDeposit: FC<FinanceDepositProps> = ({ address, recipient, depositHo
         balance={balance ?? 0}
         label={'Confirm'}
         onConfirmAction={handleConfirmDeposit}
-        onChangeWallet={onChangeWallet}
         onCloseAction={onClose}
       />
     </>

src/sections/finance/components/finance-dialogs-actions.tsx

@@ -1,13 +1,7 @@
-// React and libraries imports
-import { Address } from 'viem';
-
 // @mui components
 import DialogActions from '@mui/material/DialogActions';
 import LoadingButton from '@mui/lab/LoadingButton';
 
-// Project imports
-import FinanceChangeWallet from '@src/sections/finance/components/finance-change-wallet.tsx';
-
 type FinanceDialogsActionsProps = {
   rainbowComponent: any;
   loading: boolean;
@@ -16,8 +10,7 @@ type FinanceDialogsActionsProps = {
   balance: number;
   label: string;
   onConfirmAction: () => void;
-  onCloseAction?: () => void;
-  onChangeWallet?: (address: Address) => void;
+  onCloseAction?: () => void
 };
 
 const FinanceDialogsActions = ({
@@ -27,12 +20,10 @@ const FinanceDialogsActions = ({
   actionLoading,
   amount,
   balance,
-  label,
-  onChangeWallet,
+  label
 }: FinanceDialogsActionsProps) => {
   return (
     <DialogActions sx={{ width: '100%', pt: 1 }}>
-      {onChangeWallet && <FinanceChangeWallet onChangingWallet={onChangeWallet} />}
       <RainbowEffect
         {...(loading && {
           borderRadius: '10px',

src/sections/finance/components/finance-quick-transfer.tsx

@@ -35,6 +35,8 @@ import FinanceSearchProfileModal from '@src/sections/finance/components/finance-
 
 const STEP = 50;
 const MIN_AMOUNT = 0;
+// A thousand millions allowed in the pool
+const MAX_POOL: number = 1000000000;
 
 interface Props extends CardProps {
   title?: string;
@@ -202,29 +204,34 @@ export default function FinanceQuickTransfer({
     }
   }, [MAX_AMOUNT]);
 
-  // Handle changes in the input for the amount
-  const handleChangeInput = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
-    setAmount(Number(event.target.value));
-    if(Number(event.target.value) < MAX_AMOUNT) {
-      setCanContinue(true);
-    }else{
-      setCanContinue(false);
+  // Helper function to handle amount constraints
+  const handleAmountConstraints = (value: number, MAX_AMOUNT: number) => {
+    if (value > MAX_POOL) {
+      value = MAX_POOL; // Truncate to a thousand millions
     }
-  }, []);
-
-  // Validate the amount on blur
-  const handleBlur = useCallback(() => {
-    if(amount < MAX_AMOUNT) {
-      setCanContinue(true);
+    if (value < 0) {
+      value = 0; // Set amount to 0 if lower than 0
     }
+    setAmount(value);
+    setCanContinue(value <= MAX_AMOUNT);
 
-    if (amount < 0) {
-      setAmount(0);
-    } else if (amount > MAX_AMOUNT) {
+    // If amount is greater than balance, allow input but setCanContinue to false
+    if (value > MAX_AMOUNT) {
       setCanContinue(false);
     }
+  };
+
+  const handleChangeInput = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
+    const value = Number(event.target.value);
+    handleAmountConstraints(value, MAX_AMOUNT);
+  }, [MAX_AMOUNT]);
+
+
+  const handleBlur = useCallback(() => {
+    handleAmountConstraints(amount, MAX_AMOUNT);
   }, [amount, MAX_AMOUNT]);
 
+
   // Called after finishing a transfer
   const handleTransferFinish = () => {
     setAmount(0);
@@ -371,7 +378,7 @@ export default function FinanceQuickTransfer({
   const renderInput = (
     <Stack spacing={3}>
       <InputAmount
-        max={MAX_AMOUNT}
+        max={MAX_POOL}
         amount={amount}
         onBlur={handleBlur}
         onChange={handleChangeInput}

src/sections/finance/components/finance-withdraw-from-metamask.tsx

@@ -14,12 +14,12 @@ interface FinanceWithdrawFromMetamaskProps {
 
 const FinanceWithdrawFromMetamask: FC<FinanceWithdrawFromMetamaskProps> = ({ onClose }) => {
   const withdrawHook = useWithdraw();
-  const { address, connecting, connect, setAddress } = useMetaMask();
+  const { address, connecting, connect } = useMetaMask();
 
   if (connecting) return <FinanceMetamaskLoader />;
   if (!address) return <FinanceMetamaskButton connect={connect} />;
 
-  return <FinanceWithdraw address={address} withdrawHook={withdrawHook} onClose={onClose} onChangeWallet={setAddress} />;
+  return <FinanceWithdraw address={address} withdrawHook={withdrawHook} onClose={onClose} />;
 };
 
 export default FinanceWithdrawFromMetamask;

src/sections/finance/components/finance-withdraw.tsx

@@ -36,7 +36,7 @@ interface FinanceWithdrawProps {
 
 // ----------------------------------------------------------------------
 
-const FinanceWithdraw: FC<FinanceWithdrawProps> = ({ address, withdrawHook, onClose, onChangeWallet }) => {
+const FinanceWithdraw: FC<FinanceWithdrawProps> = ({ address, withdrawHook, onClose }) => {
   const [amount, setAmount] = useState<number>();
   const [amountError, setAmountError] = useState(false);
   const [amountHelperText, setAmountHelperText] = useState('');
@@ -138,7 +138,6 @@ const FinanceWithdraw: FC<FinanceWithdrawProps> = ({ address, withdrawHook, onCl
         label={'Confirm'}
         onConfirmAction={handleConfirmWithdraw}
         onCloseAction={onClose}
-        onChangeWallet={onChangeWallet}
       />
     </>
   );