refactor deposit card to use new evm wallet hook features

astriaorg · Oct 24, 2024 · bf34e01 · bf34e01
1 parent b39ae45
commit bf34e01
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 66 deletions.
diff --git a/web/src/components/DepositCard/DepositCard.tsx b/web/src/components/DepositCard/DepositCard.tsx
@@ -1,5 +1,5 @@
 import type React from "react";
-import { useContext, useEffect, useMemo, useRef, useState } from "react";
+import { useContext, useEffect, useMemo, useState } from "react";
 
 import { Dec, DecUtils } from "@keplr-wallet/unit";
 import AnimatedArrowSpacer from "components/AnimatedDownArrowSpacer/AnimatedDownArrowSpacer";
@@ -8,27 +8,25 @@ import type { EvmChainInfo, IbcChainInfo } from "config/chainConfigs";
 import { useConfig } from "config/hooks/useConfig";
 import { NotificationType } from "features/Notifications/components/Notification/types";
 import { NotificationsContext } from "features/Notifications/contexts/NotificationsContext";
-import EthWalletConnector from "features/EthWallet/components/EthWalletConnector/EthWalletConnector";
-import { useEthWallet } from "features/EthWallet/hooks/useEthWallet";
 import { useEvmChainSelection } from "features/EthWallet/hooks/useEvmChainSelection";
 import { useIbcChainSelection } from "features/IbcChainSelector/hooks/useIbcChainSelection";
 import { sendIbcTransfer } from "services/ibc";
 
 export default function DepositCard(): React.ReactElement {
   const { addNotification } = useContext(NotificationsContext);
-  const { userAccount: evmUserAccount, selectedWallet } = useEthWallet();
   const { evmChains, ibcChains } = useConfig();
 
   const {
+    evmAccountAddress: recipientAddress,
     selectEvmChain,
     evmChainsOptions,
     selectedEvmChain,
     selectEvmCurrency,
     evmCurrencyOptions,
+    evmBalance,
+    isLoadingEvmBalance,
+    connectEVMWallet,
   } = useEvmChainSelection(evmChains);
-  const defaultEvmChainOption = useMemo(() => {
-    return evmChainsOptions[0] || null;
-  }, [evmChainsOptions]);
   const defaultEvmCurrencyOption = useMemo(() => {
     return evmCurrencyOptions[0] || null;
   }, [evmCurrencyOptions]);
@@ -94,7 +92,6 @@ export default function DepositCard(): React.ReactElement {
 
   const [amount, setAmount] = useState<string>("");
   const [isAmountValid, setIsAmountValid] = useState<boolean>(false);
-  const [recipientAddress, setRecipientAddress] = useState<string>("");
   const [isRecipientAddressValid, setIsRecipientAddressValid] =
     useState<boolean>(false);
   const [hasTouchedForm, setHasTouchedForm] = useState<boolean>(false);
@@ -114,7 +111,15 @@ export default function DepositCard(): React.ReactElement {
     setAmount(event.target.value);
   };
 
-  const checkIsFormValid = (addressInput: string, amountInput: string) => {
+  const checkIsFormValid = (
+    addressInput: string | null,
+    amountInput: string,
+  ) => {
+    if (addressInput === null) {
+      setIsRecipientAddressValid(false);
+      return;
+    }
+
     const amount = Number.parseFloat(amountInput);
     const amountValid = amount > 0;
     setIsAmountValid(amountValid);
@@ -123,68 +128,15 @@ export default function DepositCard(): React.ReactElement {
     setIsRecipientAddressValid(addressValid);
   };
 
-  // NOTE - this was required to ensure the latest state was used in a callback
-  //  used in the modal that connects to the evm wallet.
-  // create refs to hold the latest state values
-  const latestState = useRef({
-    evmUserAccount,
-    selectedWallet,
-    recipientAddress,
-    selectedEvmChain,
-  });
-  // update the ref whenever the state changes
-  useEffect(() => {
-    latestState.current = {
-      evmUserAccount,
-      selectedWallet,
-      recipientAddress,
-      selectedEvmChain,
-    };
-  }, [evmUserAccount, selectedWallet, recipientAddress, selectedEvmChain]);
-
   // ensure evm wallet connection when selected EVM chain changes
+  /* biome-ignore lint/correctness/useExhaustiveDependencies: */
   useEffect(() => {
     if (!selectedEvmChain) {
       return;
     }
     connectEVMWallet().then((_) => {});
   }, [selectedEvmChain]);
 
-  const connectEVMWallet = async () => {
-    if (!selectedEvmChain) {
-      // select default chain if none selected, then return. effect handles retriggering.
-      selectEvmChain(defaultEvmChainOption.value);
-      return;
-    }
-
-    addNotification({
-      modalOpts: {
-        modalType: NotificationType.INFO,
-        title: "Connect EVM Wallet",
-        component: <EthWalletConnector />,
-        onCancel: () => {
-          const currentState = latestState.current;
-          setRecipientAddress("");
-          selectEvmChain(null);
-          if (currentState.selectedWallet) {
-            currentState.selectedWallet = undefined;
-          }
-        },
-        onConfirm: () => {
-          const currentState = latestState.current;
-          if (!currentState.evmUserAccount) {
-            setRecipientAddress("");
-            selectEvmChain(null);
-          } else {
-            setRecipientAddress(currentState.evmUserAccount.address);
-          }
-        },
-      },
-    });
-  };
-
-  // TODO - also set evm balance
-
   const sendBalance = async () => {
     if (!selectedIbcChain || !selectedIbcCurrency) {
       addNotification({
@@ -196,11 +148,11 @@ export default function DepositCard(): React.ReactElement {
       });
       return;
     }
-    if (!fromAddress) {
+    if (!fromAddress || !recipientAddress) {
       addNotification({
         toastOpts: {
           toastType: NotificationType.WARNING,
-          message: "Please connect your Keplr wallet first.",
+          message: "Please connect your Keplr and EVM wallet first.",
           onAcknowledge: () => {},
         },
       });
@@ -368,6 +320,16 @@ export default function DepositCard(): React.ReactElement {
                 Address: {recipientAddress}
               </p>
             )}
+            {recipientAddress && !isLoadingEvmBalance && (
+              <p className="mt-2 has-text-grey-lighter has-text-weight-semibold">
+                Balance: {evmBalance}
+              </p>
+            )}
+            {recipientAddress && isLoadingEvmBalance && (
+              <p className="mt-2 has-text-grey-lighter has-text-weight-semibold">
+                Balance: <i className="fas fa-spinner fa-pulse" />
+              </p>
+            )}
           </div>
         )}
       </div>

diff --git a/web/src/components/WithdrawCard/WithdrawCard.tsx b/web/src/components/WithdrawCard/WithdrawCard.tsx
@@ -258,7 +258,6 @@ export default function WithdrawCard(): React.ReactElement {
               </div>
             )}
           </div>
-          {/* TODO - show balance of whatever coin selected */}
           {fromAddress && (
             <div className="field-info-box py-2 px-3">
               {fromAddress && (