add useWalletDetailsModal hook (thirdweb-dev#3229)

Author: MananTank

.changeset/three-wombats-tease.md

@@ -0,0 +1,24 @@
+---
+"thirdweb": minor
+---
+
+Add `useWalletDetailsModal` hook to open Wallet Details Modal without using `<ConnectButton />` component
+
+```tsx
+import { createThirdwebClient } from "thirdweb";
+import { useWalletDetailsModal } from "thirdweb/react";
+
+const client = createThirdwebClient({
+  clientId: "<your_client_id>",
+});
+
+function Example() {
+  const { open } = useWalletDetailsModal();
+
+  function handleClick() {
+    open({ client, theme: "light" });
+  }
+
+  return <button onClick={handleClick}> Show Wallet Details </button>;
+}
+```

packages/thirdweb/src/exports/react.ts

@@ -135,3 +135,8 @@ export {
   useWalletInfo,
   useWalletImage,
 } from "../react/web/ui/hooks/useWalletInfo.js";
+
+export {
+  useWalletDetailsModal,
+  type UseWalletDetailsModalOptions,
+} from "../react/web/ui/ConnectWallet/Details.js";

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

@@ -294,6 +294,8 @@ function ConnectButtonInner(
       chains={props?.chains || []}
       chain={props.chain}
       switchButton={props.switchButton}
+      client={props.client}
+      connectLocale={locale}
     />
   );
 }

packages/thirdweb/src/react/web/ui/ConnectWallet/ConnectButtonProps.ts

@@ -132,20 +132,6 @@ export type ConnectButton_detailsModalOptions = {
    */
   networkSelector?: NetworkSelectorProps;
 
-  /**
-   * Hide the "Switch to Personal wallet" option in the Connect Wallet details modal which is shown when wallet is connected to either Smart Wallet or Safe.
-   *
-   * By default it is `false`
-   * @example
-   * ```tsx
-   * <ConnectButton detailsModal={{
-   *    hideSwitchToPersonalWallet: true
-   *  }}
-   * />
-   * ```
-   */
-  hideSwitchToPersonalWallet?: boolean;
-
   /**
    * Hide the "Disconnect Wallet" button in the `ConnectButton` Details Modal.
    *