refactor: improve dropdown state handling (external state) (#43)

AngleProtocol · Dec 24, 2024 · e51a849 · e51a849
1 parent 604de55
commit e51a849
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 5 deletions.
diff --git a/src/components/dapp/TransactionButton.tsx b/src/components/dapp/TransactionButton.tsx
@@ -16,8 +16,6 @@ export default function TransactionButton({ tx, name, children, onExecute, ...pr
   const { address: user, client, sendTransaction } = useWalletContext();
 
   const execute = useCallback(async () => {
-    console.log("CLIENT", client);
-
     if (!tx || !user || !client) return;
 
     const hash = await sendTransaction?.([

diff --git a/src/components/extenders/Dropdown.tsx b/src/components/extenders/Dropdown.tsx
@@ -34,8 +34,9 @@ export default function Dropdown({
     if (!internalState || !onHover) return;
     hideTimeout.current = setTimeout(() => {
       setInternalState(false);
+      state?.[1]?.(false);
     }, 100);
-  }, [internalState, onHover]);
+  }, [internalState, onHover, state]);
 
   const handleMouseEnter = useCallback(() => {
     if (!onHover) return;
@@ -44,7 +45,8 @@ export default function Dropdown({
       hideTimeout.current = null;
     }
     setInternalState(true);
-  }, [onHover]);
+    state?.[1]?.(true);
+  }, [onHover, state]);
 
   const cancelClose = useCallback(() => {
     if (!onHover || !hideTimeout.current) return;
@@ -57,11 +59,20 @@ export default function Dropdown({
     clearTimeout(hideTimeout.current);
   }, [onHover]);
 
+  const toggle = useCallback(
+    () =>
+      blockEvent(() => {
+        setInternalState(!internalState);
+        state?.[1]?.(!state?.[0]);
+      }),
+    [internalState, state],
+  );
+
   return (
     <Popover.Root open={!state ? internalState : state?.[0]} onOpenChange={!state ? setInternalState : state?.[1]}>
       <Popover.Trigger
         className={className}
-        onClick={blockEvent(() => setInternalState(r => !r))}
+        onClick={toggle}
         onMouseEnter={handleMouseEnter}
         onMouseLeave={closeModalWithDelay}>
         {children}