1
- import { ConnectButton as ConnectButtonRainbowKit } from '@rainbow-me/rainbowkit' ;
2
1
import { Children , isValidElement , useCallback , useMemo } from 'react' ;
3
2
import type { ReactNode } from 'react' ;
4
3
import { useEffect , useState } from 'react' ;
@@ -13,9 +12,11 @@ import {
13
12
text as dsText ,
14
13
pressable ,
15
14
} from '../../styles/theme' ;
15
+ import { useOnchainKit } from '../../useOnchainKit' ;
16
16
import type { ConnectWalletReact } from '../types' ;
17
17
import { ConnectButton } from './ConnectButton' ;
18
18
import { ConnectWalletText } from './ConnectWalletText' ;
19
+ import { WalletModal } from './WalletModal' ;
19
20
import { useWalletContext } from './WalletProvider' ;
20
21
21
22
export function ConnectWallet ( {
@@ -24,9 +25,10 @@ export function ConnectWallet({
24
25
// In a few version we will officially deprecate this prop,
25
26
// but for now we will keep it for backward compatibility.
26
27
text = 'Connect Wallet' ,
27
- withWalletAggregator = false ,
28
28
onConnect,
29
29
} : ConnectWalletReact ) {
30
+ const { config = { wallet : { display : undefined } } } = useOnchainKit ( ) ;
31
+
30
32
// Core Hooks
31
33
const { isOpen, setIsOpen } = useWalletContext ( ) ;
32
34
const { address : accountAddress , status } = useAccount ( ) ;
@@ -63,6 +65,10 @@ export function ConnectWallet({
63
65
setIsOpen ( ! isOpen ) ;
64
66
} , [ isOpen , setIsOpen ] ) ;
65
67
68
+ const handleClose = useCallback ( ( ) => {
69
+ setIsOpen ( false ) ;
70
+ } , [ setIsOpen ] ) ;
71
+
66
72
// Effects
67
73
useEffect ( ( ) => {
68
74
if ( hasClickedConnect && status === 'connected' && onConnect ) {
@@ -72,23 +78,17 @@ export function ConnectWallet({
72
78
} , [ status , hasClickedConnect , onConnect ] ) ;
73
79
74
80
if ( status === 'disconnected' ) {
75
- if ( withWalletAggregator ) {
81
+ if ( config ?. wallet ?. display === 'modal' ) {
76
82
return (
77
- < ConnectButtonRainbowKit . Custom >
78
- { ( { openConnectModal } ) => (
79
- < div className = "flex" data-testid = "ockConnectWallet_Container" >
80
- < ConnectButton
81
- className = { className }
82
- connectWalletText = { connectWalletText }
83
- onClick = { ( ) => {
84
- openConnectModal ( ) ;
85
- setHasClickedConnect ( true ) ;
86
- } }
87
- text = { text }
88
- />
89
- </ div >
90
- ) }
91
- </ ConnectButtonRainbowKit . Custom >
83
+ < div className = "flex" data-testid = "ockConnectWallet_Container" >
84
+ < ConnectButton
85
+ className = { className }
86
+ connectWalletText = { connectWalletText }
87
+ onClick = { ( ) => setIsOpen ( true ) }
88
+ text = { text }
89
+ />
90
+ < WalletModal isOpen = { isOpen } onClose = { handleClose } />
91
+ </ div >
92
92
) ;
93
93
}
94
94
return (
0 commit comments