1+ "use client" ;
2+
3+ // @refresh reset
4+ import { Balance } from "../Balance" ;
5+ import { AddressInfoDropdown } from "../RainbowKitCustomConnectButton/AddressInfoDropdown" ;
6+ import { AddressQRCodeModal } from "../RainbowKitCustomConnectButton/AddressQRCodeModal" ;
7+ import { WrongNetworkDropdown } from "../RainbowKitCustomConnectButton/WrongNetworkDropdown" ;
8+ import { useAccount , useConnect , useDisconnect } from "wagmi" ;
9+ import { Address } from "viem" ;
10+ import { useNetworkColor } from "~~/hooks/scaffold-eth" ;
11+ import { useTargetNetwork } from "~~/hooks/scaffold-eth/useTargetNetwork" ;
12+ import { getBlockExplorerAddressLink } from "~~/utils/scaffold-eth" ;
13+
14+ /**
15+ * Custom Reown Connect Button (preserving original RainbowKit design)
16+ * Uses Reown AppKit's modal for wallet connection but maintains Scaffold-ETH styling
17+ */
18+ export const ReownCustomConnectButton = ( ) => {
19+ const networkColor = useNetworkColor ( ) ;
20+ const { targetNetwork } = useTargetNetwork ( ) ;
21+ const { address, isConnected } = useAccount ( ) ;
22+ const { connect, connectors } = useConnect ( ) ;
23+ const { disconnect } = useDisconnect ( ) ;
24+
25+ // Open Reown modal function
26+ const openConnectModal = ( ) => {
27+ console . log ( 'Opening Reown modal...' ) ;
28+
29+ // Try to access the global modal
30+ if ( typeof window !== 'undefined' ) {
31+ console . log ( 'Window available, checking for modal...' ) ;
32+
33+ // First try: access modal directly from global scope
34+ if ( ( window as any ) . modal && ( window as any ) . modal . open ) {
35+ console . log ( 'Found modal in global scope, opening...' ) ;
36+ ( window as any ) . modal . open ( ) ;
37+ return ;
38+ }
39+
40+ // Second try: trigger click on hidden appkit button
41+ const appkitButton = document . querySelector ( 'appkit-button' ) ;
42+ if ( appkitButton ) {
43+ console . log ( 'Found appkit-button, triggering click...' ) ;
44+ ( appkitButton as any ) . click ( ) ;
45+ return ;
46+ }
47+
48+ // Third try: use wagmi connect with first available connector
49+ const connector = connectors [ 0 ] ;
50+ if ( connector ) {
51+ console . log ( 'Using wagmi connector:' , connector . name ) ;
52+ connect ( { connector } ) ;
53+ return ;
54+ }
55+ }
56+
57+ // Fallback: show error or use default behavior
58+ console . warn ( 'Reown modal not found, falling back to default connector' ) ;
59+ const connector = connectors [ 0 ] ;
60+ if ( connector ) {
61+ connect ( { connector } ) ;
62+ }
63+ } ;
64+
65+ const connected = isConnected && address ;
66+ const blockExplorerAddressLink = address
67+ ? getBlockExplorerAddressLink ( targetNetwork , address )
68+ : undefined ;
69+
70+ return (
71+ < >
72+ { ( ( ) => {
73+ if ( ! connected ) {
74+ return (
75+ < button className = "btn btn-primary btn-sm" onClick = { openConnectModal } type = "button" >
76+ Wallet
77+ </ button >
78+ ) ;
79+ }
80+
81+ // Note: We're not implementing chain switching validation here since
82+ // Reown handles this automatically. If needed, chain validation can be added.
83+
84+ return (
85+ < >
86+ < div className = "flex flex-col items-center mr-1" >
87+ < Balance address = { address as Address } className = "min-h-0 h-auto" />
88+ < span className = "text-xs" style = { { color : networkColor } } >
89+ { targetNetwork . name }
90+ </ span >
91+ </ div >
92+ < AddressInfoDropdown
93+ address = { address as Address }
94+ displayName = { address } // Reown doesn't provide ENS resolution in the same way
95+ ensAvatar = { undefined } // Will be handled by AddressInfoDropdown internally
96+ blockExplorerAddressLink = { blockExplorerAddressLink }
97+ />
98+ < AddressQRCodeModal address = { address as Address } modalId = "qrcode-modal" />
99+ </ >
100+ ) ;
101+ } ) ( ) }
102+ </ >
103+ ) ;
104+ } ;
105+
106+ // Note: Not exporting as RainbowKitCustomConnectButton to avoid conflicts
107+ // Use ReownCustomConnectButton directly or update imports to use the new name
0 commit comments