chore: replace more effects

bob-collective · Nov 15, 2024 · e7dc454 · e7dc454
1 parent 534c403
commit e7dc454
Show file tree

Hide file tree

Showing 5 changed files with 64 additions and 47 deletions.
diff --git a/apps/evm/src/app/[lang]/(bridge)/bridge/components/BridgeForm/BobBridgeForm.tsx b/apps/evm/src/app/[lang]/(bridge)/bridge/components/BridgeForm/BobBridgeForm.tsx
@@ -11,7 +11,7 @@ import { t } from '@lingui/macro';
 import { useLingui } from '@lingui/react';
 import { mergeProps } from '@react-aria/utils';
 import Big from 'big.js';
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 import { useDebounceValue } from 'usehooks-ts';
 import { Address } from 'viem';
 
@@ -390,36 +390,15 @@ const BobBridgeForm = ({
     }
   };
 
-  useEffect(() => {
-    if (!amount) return;
+  const [prevChain, setPrevChain] = useState(chain);
 
-    const formAmount = form.values[BRIDGE_AMOUNT];
+  if (chain !== prevChain) {
+    setPrevChain(chain);
 
-    if (!formAmount || isNaN(+formAmount) || !selectedCurrency || !selectedToken) return;
-
-    // TODO: change currency
-    const currencyAmount = CurrencyAmount.fromBaseAmount(selectedCurrency, formAmount);
-
-    handleChangeCurrencyAmount(currencyAmount, selectedToken);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [amount]);
-
-  useEffect(() => {
-    form.resetForm();
-    gasEstimateMutation.reset();
-
-    setTicker(nativeToken.symbol);
-    setGasTicker(nativeToken.symbol);
-    setAmount('');
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [direction]);
-
-  useEffect(() => {
     if (currencyAmount && selectedToken) {
       handleChangeCurrencyAmount(currencyAmount, selectedToken);
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [chain]);
+  }
 
   const handleSubmit = async (data: BridgeFormValues) => {
     if (!currencyAmount || !selectedToken || !selectedGasToken || isBridgeDisabled) return;
@@ -473,6 +452,36 @@ const BobBridgeForm = ({
     hideErrors: 'untouched'
   });
 
+  const [prevAmount, setPrevAmount] = useState(amount);
+
+  if (amount !== prevAmount) {
+    setPrevAmount(amount);
+
+    if (amount) {
+      const formAmount = form.values[BRIDGE_AMOUNT];
+
+      if (formAmount && !isNaN(+formAmount) && selectedCurrency && selectedToken) {
+        // TODO: change currency
+        const currencyAmount = CurrencyAmount.fromBaseAmount(selectedCurrency, formAmount);
+
+        handleChangeCurrencyAmount(currencyAmount, selectedToken);
+      }
+    }
+  }
+
+  const [prevDirection, setPrevDirection] = useState<TransactionDirection>();
+
+  if (direction !== prevDirection) {
+    setPrevDirection(direction);
+
+    form.resetForm();
+    gasEstimateMutation.reset();
+
+    setTicker(nativeToken.symbol);
+    setGasTicker(nativeToken.symbol);
+    setAmount('');
+  }
+
   const handleChangeTicker = (currency: Currency) => {
     setTicker(currency.symbol as string);
 

diff --git a/apps/evm/src/app/[lang]/(bridge)/hooks/useGatewayForm.ts b/apps/evm/src/app/[lang]/(bridge)/hooks/useGatewayForm.ts
@@ -3,7 +3,7 @@
 import { useForm } from '@gobob/ui';
 import { useAccount, useIsContract } from '@gobob/wagmi';
 import Big from 'big.js';
-import { useEffect } from 'react';
+import { useState } from 'react';
 import { useAccount as useSatsAccount } from '@gobob/sats-wagmi';
 
 import { UseGatewayQueryDataReturnType } from './useGateway';
@@ -32,13 +32,6 @@ const useGatewayForm = ({ query, defaultAsset, onSubmit }: UseGatewayFormProps)
 
   const { address: btcAddress } = useSatsAccount();
 
-  useEffect(() => {
-    if (!query.fee.estimate.data || !form.values[BRIDGE_AMOUNT]) return;
-
-    form.validateField(BRIDGE_AMOUNT);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [query.fee.rates.data]);
-
   const params: BridgeFormValidationParams = {
     [BRIDGE_AMOUNT]: {
       minAmount: new Big(query.minAmount.toExact()),
@@ -61,6 +54,16 @@ const useGatewayForm = ({ query, defaultAsset, onSubmit }: UseGatewayFormProps)
     hideErrors: 'untouched'
   });
 
+  const [prevData, setPrevData] = useState(query.fee.rates.data);
+
+  if (query.fee.rates.data !== prevData) {
+    setPrevData(query.fee.rates.data);
+
+    if (query.fee.estimate.data && form.values[BRIDGE_AMOUNT]) {
+      form.validateField(BRIDGE_AMOUNT);
+    }
+  }
+
   return {
     isDisabled: isFormDisabled(form),
     form,

diff --git a/apps/evm/src/app/[lang]/sign-up/components/ReferralInput/ReferralInput.tsx b/apps/evm/src/app/[lang]/sign-up/components/ReferralInput/ReferralInput.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useState } from 'react';
 import OtpInput, { OTPInputProps } from 'react-otp-input';
 import { useLabel } from '@react-aria/label';
 import { Flex, Label, P } from '@gobob/ui';
@@ -25,6 +25,7 @@ const ReferralInput = ({ onChange, errorMessage, ...props }: ReferralInputProps)
   const { i18n } = useLingui();
 
   const [otp, setOtp] = useState(refCode || '');
+  const [prevOtp, setPrevOtp] = useState(otp);
   const labelText = t(i18n)`Enter your access code (optional):`;
 
   const { fieldProps, labelProps } = useLabel({ label: labelText });
@@ -37,12 +38,11 @@ const ReferralInput = ({ onChange, errorMessage, ...props }: ReferralInputProps)
     [onChange]
   );
 
-  useEffect(() => {
-    if (!otp) return;
+  if (otp !== prevOtp) {
+    setPrevOtp(otp);
 
-    handleChange(otp);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [otp]);
+    if (otp) handleChange(otp);
+  }
 
   const hasError = !!errorMessage;
 

diff --git a/apps/evm/src/app/[lang]/wallet/components/SendTokenModal/SendTokenModal.tsx b/apps/evm/src/app/[lang]/wallet/components/SendTokenModal/SendTokenModal.tsx
@@ -22,7 +22,7 @@ import { Trans, t } from '@lingui/macro';
 import { useLingui } from '@lingui/react';
 import { mergeProps } from '@react-aria/utils';
 import Big from 'big.js';
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 import { Address, erc20Abi } from 'viem';
 
 import { TransactionDetails } from '@/app/[lang]/(bridge)/components/TransactionDetails';
@@ -192,13 +192,16 @@ const SendTokenModal = ({ token, onClose, ...props }: SendTokenModalProps): JSX.
     hash: currency.isToken ? transferErc20Result : sendTransactionResult
   });
 
-  useEffect(() => {
+  const [prevStatus, setPrevStatus] = useState(transactionReceipt?.status);
+
+  if (transactionReceipt?.status !== prevStatus) {
+    setPrevStatus(transactionReceipt?.status);
+
     if (transactionReceipt?.status === 'success') {
       handleClose();
       toast.success(`Successfully sent ${amount} ${currency.symbol}`);
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [transactionReceipt]);
+  }
 
   const balance = tokenBalance?.toExact() || '0';
 

diff --git a/packages/ui/src/components/TokenInput/TokenInput.tsx b/packages/ui/src/components/TokenInput/TokenInput.tsx
@@ -45,6 +45,7 @@ const TokenInput = forwardRef<HTMLInputElement, TokenInputProps>((props, ref): J
 
   const defaultCurrency = useMemo(() => getDefaultCurrency(props), [props]);
   const [currency, setCurrency] = useState<Currency | undefined>(defaultCurrency);
+  const [prevCurrency, setPrevCurrency] = useState<Currency>();
 
   const inputId = useId();
 
@@ -70,7 +71,9 @@ const TokenInput = forwardRef<HTMLInputElement, TokenInputProps>((props, ref): J
     }
   }
 
-  useEffect(() => {
+  if (prevCurrency !== currency) {
+    setPrevCurrency(currency);
+
     if (value && currency) {
       const trimmedValue = trimDecimals(value, currency.decimals);
 
@@ -79,8 +82,7 @@ const TokenInput = forwardRef<HTMLInputElement, TokenInputProps>((props, ref): J
         onValueChange?.(trimmedValue);
       }
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [currency]);
+  }
 
   const handleChange = useCallback(
     (e: ChangeEvent<HTMLInputElement>) => {