update

Author: kien-ngo

.changeset/metal-mails-ring.md

@@ -0,0 +1,16 @@
+---
+"thirdweb": patch
+---
+
+Add onClose callback to Connect Details modal
+
+```tsx
+<ConnectButton
+  detailsModal={{
+    onClose: (screen: string) => {
+      // The last screen name that was being shown when user closed the modal
+      console.log({ screen });
+    }
+  }}
+/>
+```

packages/thirdweb/src/react/core/hooks/connection/ConnectButtonProps.ts

@@ -327,6 +327,13 @@ export type ConnectButton_detailsModalOptions = {
    * Note: Not all tokens are resolvable to a fiat value. In that case, nothing will be shown.
    */
   showBalanceInFiat?: SupportedFiatCurrency;
+
+  /**
+   *
+   * @param screen The screen's name that was last shown when user closed the modal
+   * @returns
+   */
+  onClose?: (screen: string) => void;
 };
 
 /**

packages/thirdweb/src/react/web/ui/ConnectWallet/ConnectButton.tsx

@@ -262,6 +262,17 @@ const TW_CONNECT_WALLET = "tw-connect-wallet";
  * />
  * ```
  *
+ * ### Callback for when the details modal is closed
+ * ```tsx
+ * <ConnectButton
+ *   detailsModal={{
+ *     onClose: (screen: string) => {
+ *       console.log({ screen });
+ *     }
+ *   }}
+ * />
+ * ```
+ *
  * @param props
  * Props for the `ConnectButton` component
  *

packages/thirdweb/src/react/web/ui/ConnectWallet/Details.tsx

@@ -1084,6 +1084,9 @@ export function DetailsModal(props: {
             setOpen={(_open) => {
               if (!_open) {
                 closeModal();
+                if (props.detailsModal?.onClose) {
+                  props.detailsModal?.onClose(screen);
+                }
               }
             }}
           >
@@ -1614,12 +1617,19 @@ export type UseWalletDetailsModalOptions = {
    * Note: Not all tokens are resolvable to a fiat value. In that case, nothing will be shown.
    */
   showBalanceInFiat?: SupportedFiatCurrency;
+
+  /**
+   * The callback function for when the modal is closed
+   * @param screen The name of the screen that was being shown when user closed the modal
+   */
+  onClose?: (screen: string) => void;
 };
 
 /**
  * Hook to open the Wallet Details Modal that shows various information about the connected wallet and allows users to perform various actions like sending funds, receiving funds, switching networks, Buying tokens, etc.
  *
  * @example
+ * ### Basic usage
  * ```tsx
  * import { createThirdwebClient } from "thirdweb";
  * import { useWalletDetailsModal } from "thirdweb/react";
@@ -1638,6 +1648,15 @@ export type UseWalletDetailsModalOptions = {
  *   return <button onClick={handleClick}> Show Wallet Details </button>
  * }
  * ```
+ *
+ * ### Callback for when the modal is closed
+ * ```tsx
+ * detailsModal.open({
+ *   client,
+ *   onClose: (screen: string) => console.log({ screen })
+ * });
+ * ```
+ *
  * @wallet
  */
 export function useWalletDetailsModal() {
@@ -1672,6 +1691,7 @@ export function useWalletDetailsModal() {
               hideReceiveFunds: props.hideReceiveFunds,
               hideSendFunds: props.hideSendFunds,
               assetTabs: props.assetTabs,
+              onClose: props.onClose,
             }}
             displayBalanceToken={props.displayBalanceToken}
             theme={props.theme || "dark"}