Test

site/docs/components/App.tsx

@@ -1,6 +1,6 @@
 'use client';
-import { OnchainKitProvider } from '@coinbase/onchainkit';
-// import { OnchainKitProvider } from '../pages/src/OnchainKitProvider';
+// import { OnchainKitProvider } from '@coinbase/onchainkit';
+import { OnchainKitProvider } from '../pages/src/OnchainKitProvider';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import type { ReactNode } from 'react';
 import { http, WagmiProvider, createConfig } from 'wagmi';

site/docs/pages/wallet/wallet.mdx

@@ -9,15 +9,15 @@ import {
   WalletDropdown,
   WalletDropdownLink,
   WalletDropdownDisconnect,
-} from '@coinbase/onchainkit/wallet';
+} from '../src/wallet';
 import {
   Address,
   Avatar,
   Name,
   Badge,
   Identity,
   EthBalance,
-} from '@coinbase/onchainkit/identity';
+} from '../src/identity';
 import { color } from '@coinbase/onchainkit/theme';
 import AppWithRK from '../../components/AppWithRK';
 import WalletComponents from '../../components/WalletComponents';

src/wallet/components/Wallet.tsx

@@ -1,26 +1,46 @@
-import { Children, useMemo } from 'react';
+import { Children, useMemo, useRef, useEffect } from 'react';
 import type { WalletReact } from '../types';
 import { ConnectWallet } from './ConnectWallet';
 import { WalletDropdown } from './WalletDropdown';
-import { WalletProvider } from './WalletProvider';
+import { WalletProvider, useWalletContext } from './WalletProvider';
+
+function WalletContent({ children }: WalletReact) {
+  const { isOpen, setIsOpen } = useWalletContext();
+  const containerRef = useRef<HTMLDivElement>(null);
 
-export function Wallet({ children }: WalletReact) {
   const { connect, dropdown } = useMemo(() => {
     const childrenArray = Children.toArray(children);
     return {
-      // @ts-ignore
       connect: childrenArray.filter(({ type }) => type === ConnectWallet),
-      // @ts-ignore
       dropdown: childrenArray.filter(({ type }) => type === WalletDropdown),
     };
   }, [children]);
 
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (containerRef.current && !containerRef.current.contains(event.target as Node) && isOpen) {
+        setIsOpen(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [isOpen, setIsOpen]);
+
+  return (
+    <div ref={containerRef} className="relative w-fit shrink-0">
+      {connect}
+      {isOpen && dropdown}
+    </div>
+  );
+}
+
+export function Wallet({ children }: WalletReact) {
   return (
     <WalletProvider>
-      <div className="relative w-fit shrink-0">
-        {connect}
-        {dropdown}
-      </div>
+      <WalletContent>{children}</WalletContent>
     </WalletProvider>
   );
-}
+}