merge main

Author: hugolxt

package.json

@@ -67,7 +67,7 @@
     "typedoc": "^0.26.7",
     "viem": "2.23.12",
     "vite-plugin-dts": "^4.2.1",
-    "wagmi": "^2.14.1",
+    "wagmi": "^2.14.6",
     "zustand": "^5.0.0-rc.2"
   },
   "devDependencies": {

src/components/dapp/TransactionButton.tsx

@@ -19,6 +19,7 @@ export type TransactionButtonProps = ButtonProps & {
   onExecute?: (hash: string) => void;
   onSuccess?: (hash: string) => void;
   onError?: (hash: string) => void;
+  onClick?: () => void;
 };
 
 export default function TransactionButton({
@@ -27,6 +28,7 @@ export default function TransactionButton({
   children,
   onExecute,
   onSuccess,
+  onClick,
   enableSponsorCheckbox,
   iconProps,
   onError,
@@ -44,6 +46,7 @@ export default function TransactionButton({
   const execute = useCallback(async () => {
     if (!tx || !user || !client) return;
 
+    onClick?.();
     const notification = new Notifier({
       title: name,
       subtitle: "Sign transaction in your wallet",
@@ -137,7 +140,7 @@ export default function TransactionButton({
         loading: false,
       });
     }
-  }, [tx, client, user, sendTransaction, onExecute, onSuccess, onError, name]);
+  }, [tx, client, user, sendTransaction, onExecute, onSuccess, onError, name, onClick]);
 
   //TODO: remove hardcoded chainId check in favor of more integrated and generic implem
   if (enableSponsorCheckbox && chainId === 324)

src/components/extenders/Dropdown.tsx

@@ -13,6 +13,7 @@ export type DropdownProps = Component<
     state?: GetSet<boolean>;
     content?: ReactNode;
     onHover?: boolean;
+    onOpen?: () => void;
     children?: ReactNode;
   },
   HTMLButtonElement
@@ -23,6 +24,7 @@ export default function Dropdown({
   state,
   padding,
   content,
+  onOpen,
   children,
   className,
   onHover = false,
@@ -72,7 +74,12 @@ export default function Dropdown({
 
   return (
     <EventBlocker>
-      <Popover.Root open={!state ? internalState : state?.[0]} onOpenChange={!state ? setInternalState : state?.[1]}>
+      <Popover.Root
+        open={!state ? internalState : state?.[0]}
+        onOpenChange={o => {
+          onOpen?.();
+          return !state ? setInternalState(o) : state?.[1]?.(o);
+        }}>
         <Popover.Trigger
           className={className}
           onClick={toggle}

src/components/extenders/Select.tsx

@@ -138,6 +138,7 @@ export type SelectProps<Value> = Component<{
   displayOptions?: { [key: string | number | symbol]: ReactNode };
   searchOptions?: { [key: string | number | symbol]: ReactNode };
   indexOptions?: { [key: string | number | symbol]: number };
+  onOpen?: () => void;
   error?: ReactNode;
 }> &
   RadixSelect.SelectProps;
@@ -162,6 +163,7 @@ export default function Select<
   loading,
   allOption,
   placeholder,
+  onOpen,
   className,
   defaultValue,
   error,
@@ -260,7 +262,7 @@ export default function Select<
       setValue={value => {
         setSearch(value);
       }}
-    >
+      setOpen={o => o && onOpen?.()}>
       <Ariakit.SelectProvider
         setValue={v => setValue(v as Value)}
         value={value as string}

src/components/primitives/Button.tsx

@@ -45,6 +45,7 @@ export type ButtonProps = Component<
       external?: boolean;
       className?: string;
       type?: "button" | "submit" | "reset";
+      onLink?: () => void;
       bold?: boolean;
       disabled?: boolean;
     },
@@ -59,6 +60,7 @@ export default function Button({
   theme,
   className,
   bold,
+  onLink,
   children,
   external,
   disabled,
@@ -76,7 +78,10 @@ export default function Button({
         rel="noopener noreferrer"
         aria-disabled={disabled}
         tabIndex={disabled ? -1 : undefined}
-        onClick={() => window.open(to, "_blank", "noopener noreferrer")}
+        onClick={() => {
+          onLink?.();
+          return window.open(to, "_blank", "noopener noreferrer");
+        }}
         className={mergeClass(styleProps, styleBold, className, disabled && "disabled")}>
         {children}
       </a>
@@ -88,6 +93,9 @@ export default function Button({
         <Link
           prefetch="intent"
           to={to}
+          onClick={() => {
+            onLink?.();
+          }}
           aria-disabled={disabled}
           tabIndex={disabled ? -1 : undefined}
           className={mergeClass(styleProps, styleBold, className, disabled && "disabled")}

src/components/primitives/Tooltip.tsx

@@ -1,5 +1,5 @@
-import { useState, useEffect } from "react";
 import * as RadixTooltip from "@radix-ui/react-tooltip";
+import { useEffect, useState } from "react";
 import { useTheme } from "../../context/Theme.context";
 import type { Component } from "../../utils/types";
 import Text from "../primitives/Text";
@@ -9,9 +9,10 @@ export type TooltipProps = Component<{
   helper: string | React.ReactNode;
   icon?: boolean;
   className?: string;
+  onOpen?: () => void;
 }>;
 
-export default function Tooltip({ helper, children, icon = true, className }: TooltipProps) {
+export default function Tooltip({ helper, onOpen, children, icon = true, className }: TooltipProps) {
   const { vars } = useTheme();
   const [open, setOpen] = useState(false);
   const [isTouchDevice, setIsTouchDevice] = useState(false);
@@ -25,7 +26,10 @@ export default function Tooltip({ helper, children, icon = true, className }: To
     <RadixTooltip.Provider delayDuration={0}>
       <RadixTooltip.Root
         open={isTouchDevice ? open : undefined}
-        onOpenChange={isTouchDevice ? setOpen : undefined}
+        onOpenChange={isOpen => {
+          if (isTouchDevice) setOpen(isOpen);
+          if (isOpen) onOpen?.();
+        }}
         delayDuration={0}>
         <RadixTooltip.Trigger asChild>
           {/* biome-ignore lint/a11y/useKeyWithClickEvents: <explanation> */}