Skip to content

Commit 45efbb1

Browse files
cpcramercpcramer
committed
Disconnect bug seems to be gone, connecting is working.
1 parent 289f89e commit 45efbb1

File tree

6 files changed

+249
-101
lines changed

6 files changed

+249
-101
lines changed

‎playground/nextjs-app-router/onchainkit/package.json

+5-4
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
"ci:format": "biome ci --linter-enabled=false --organize-imports-enabled=false",
1313
"ci:lint": "biome ci --formatter-enabled=false --organize-imports-enabled=false",
1414
"cp": "cp -R src site/docs/pages",
15-
"dev:watch": "concurrently \"tailwind -i ./src/styles/index-with-tailwind.css -o ./src/styles.css --watch\" \"tsup\"",
15+
"dev:watch": "concurrently \"tailwind -i ./src/styles/index-with-tailwind.css -o ./src/styles.css --watch\" \"tsup --watch ./src/**/*.tsx\"",
1616
"format": "biome format --write .",
1717
"lint": "biome lint --write .",
1818
"lint:unsafe": "biome lint --write --unsafe .",
@@ -38,13 +38,13 @@
3838
"dependencies": {
3939
"@rainbow-me/rainbowkit": "^2.1.3",
4040
"@tanstack/react-query": "^5",
41-
"@walletconnect/modal": "^2.7.0",
4241
"clsx": "^2.1.1",
4342
"graphql": "^14 || ^15 || ^16",
4443
"graphql-request": "^6.1.0",
44+
"permissionless": "^0.1.29",
4545
"tailwind-merge": "^2.3.0",
46-
"viem": "^2.21.33",
47-
"wagmi": "^2.12.24"
46+
"viem": "^2.17.4",
47+
"wagmi": "^2.11.0"
4848
},
4949
"devDependencies": {
5050
"@biomejs/biome": "1.8.3",
@@ -73,6 +73,7 @@
7373
"graphql-request": "^6.1.0",
7474
"jsdom": "^24.1.0",
7575
"packemon": "3.3.1",
76+
"permissionless": "^0.1.29",
7677
"react": "^18",
7778
"react-dom": "^18",
7879
"rimraf": "^5.0.5",

‎src/OnchainKitProvider.test.tsx

+6-6
Original file line numberDiff line numberDiff line change
@@ -185,8 +185,8 @@ describe('OnchainKitProvider', () => {
185185
paymaster: paymasterUrl,
186186
wallet: {
187187
display: 'classic',
188-
termsUrl: undefined,
189-
privacyUrl: undefined,
188+
termsUrl: 'https://base.org/terms-of-service',
189+
privacyUrl: 'https://base.org/privacy-policy',
190190
},
191191
},
192192
chain: base,
@@ -220,8 +220,8 @@ describe('OnchainKitProvider', () => {
220220
paymaster: null,
221221
wallet: {
222222
display: 'classic',
223-
termsUrl: undefined,
224-
privacyUrl: undefined,
223+
termsUrl: 'https://base.org/terms-of-service',
224+
privacyUrl: 'https://base.org/privacy-policy',
225225
},
226226
},
227227
}),
@@ -269,8 +269,8 @@ describe('OnchainKitProvider', () => {
269269
paymaster: 'https://example.com',
270270
wallet: {
271271
display: 'classic',
272-
termsUrl: undefined,
273-
privacyUrl: undefined,
272+
termsUrl: 'https://base.org/terms-of-service',
273+
privacyUrl: 'https://base.org/privacy-policy',
274274
},
275275
},
276276
projectId: null,

‎src/wallet/components/ConnectWallet.test.tsx

+78-25
Original file line numberDiff line numberDiff line change
@@ -224,28 +224,27 @@ describe('ConnectWallet', () => {
224224

225225
describe('wallet display modes', () => {
226226
it('should render modal when config.wallet.display is "modal"', () => {
227-
const setIsOpenMock = vi.fn();
228227
vi.mocked(useOnchainKit).mockReturnValue({
229228
config: { wallet: { display: 'modal' } },
230229
});
231230
vi.mocked(useAccount).mockReturnValue({
232231
address: '',
233232
status: 'disconnected',
234233
});
235-
vi.mocked(useWalletContext).mockReturnValue({
236-
isOpen: false,
237-
setIsOpen: setIsOpenMock,
234+
vi.mocked(useConnect).mockReturnValue({
235+
connectors: [{ id: 'mockConnector' }],
236+
connect: vi.fn(),
237+
status: 'idle',
238238
});
239239

240240
render(<ConnectWallet text="Connect Wallet" />);
241241

242-
const container = screen.getByTestId('ockConnectWallet_Container');
243-
expect(container).toBeInTheDocument();
244-
const connectButton = screen.getByTestId('ockConnectButton');
245-
expect(connectButton).toBeInTheDocument();
242+
// Click the connect button
243+
const button = screen.getByTestId('ockConnectButton');
244+
fireEvent.click(button);
246245

247-
fireEvent.click(connectButton);
248-
expect(setIsOpenMock).toHaveBeenCalledWith(true);
246+
// Verify that the modal is rendered using the correct test ID
247+
expect(screen.getByTestId('ockModalOverlay')).toBeInTheDocument();
249248
});
250249

251250
it('should render direct connect when config.wallet.display is undefined', () => {
@@ -317,40 +316,50 @@ describe('ConnectWallet', () => {
317316
});
318317

319318
describe('modal handling', () => {
320-
it('should close modal when handleClose is called', () => {
321-
const setIsOpenMock = vi.fn();
322-
vi.mocked(useWalletContext).mockReturnValue({
323-
isOpen: true,
324-
setIsOpen: setIsOpenMock,
325-
});
319+
it('should close modal when clicking overlay', () => {
326320
vi.mocked(useOnchainKit).mockReturnValue({
327321
config: { wallet: { display: 'modal' } },
328322
});
323+
vi.mocked(useAccount).mockReturnValue({
324+
address: '',
325+
status: 'disconnected',
326+
});
329327

330328
render(<ConnectWallet text="Connect Wallet" />);
331329

332-
const modalOverlay = screen.getByTestId('modal-overlay');
330+
// Open the modal first
331+
const connectButton = screen.getByTestId('ockConnectButton');
332+
fireEvent.click(connectButton);
333+
334+
// Now click the overlay to close
335+
const modalOverlay = screen.getByTestId('ockModalOverlay');
333336
fireEvent.click(modalOverlay);
334337

335-
expect(setIsOpenMock).toHaveBeenCalledWith(false);
338+
// Modal should no longer be in the document
339+
expect(screen.queryByTestId('ockModalOverlay')).not.toBeInTheDocument();
336340
});
337341

338-
it('should close modal when close button is clicked', () => {
339-
const setIsOpenMock = vi.fn();
340-
vi.mocked(useWalletContext).mockReturnValue({
341-
isOpen: true,
342-
setIsOpen: setIsOpenMock,
343-
});
342+
it('should close modal when clicking close button', () => {
344343
vi.mocked(useOnchainKit).mockReturnValue({
345344
config: { wallet: { display: 'modal' } },
346345
});
346+
vi.mocked(useAccount).mockReturnValue({
347+
address: '',
348+
status: 'disconnected',
349+
});
347350

348351
render(<ConnectWallet text="Connect Wallet" />);
349352

353+
// Open the modal first
354+
const connectButton = screen.getByTestId('ockConnectButton');
355+
fireEvent.click(connectButton);
356+
357+
// Click close button using aria-label instead of test-id
350358
const closeButton = screen.getByLabelText('Close modal');
351359
fireEvent.click(closeButton);
352360

353-
expect(setIsOpenMock).toHaveBeenCalledWith(false);
361+
// Modal should no longer be in the document
362+
expect(screen.queryByTestId('ockModalOverlay')).not.toBeInTheDocument();
354363
});
355364
});
356365

@@ -457,5 +466,49 @@ describe('ConnectWallet', () => {
457466

458467
expect(onConnectMock).toHaveBeenCalledTimes(1);
459468
});
469+
470+
it('should handle hasClickedConnect state correctly when modal is used', () => {
471+
const onConnectMock = vi.fn();
472+
const mockUseAccount = vi.mocked(useAccount);
473+
474+
// Configure for modal display
475+
vi.mocked(useOnchainKit).mockReturnValue({
476+
config: { wallet: { display: 'modal' } },
477+
});
478+
479+
// Initial disconnected state
480+
mockUseAccount.mockReturnValue({
481+
address: undefined,
482+
status: 'disconnected',
483+
});
484+
485+
const { rerender } = render(
486+
<ConnectWallet text="Connect Wallet" onConnect={onConnectMock} />,
487+
);
488+
489+
// Click connect button to open modal
490+
const button = screen.getByTestId('ockConnectButton');
491+
fireEvent.click(button);
492+
493+
// Simulate connection success
494+
mockUseAccount.mockReturnValue({
495+
address: '0x123',
496+
status: 'connected',
497+
});
498+
499+
// Rerender to trigger useEffect
500+
rerender(
501+
<ConnectWallet text="Connect Wallet" onConnect={onConnectMock} />,
502+
);
503+
504+
// onConnect should have been called once
505+
expect(onConnectMock).toHaveBeenCalledTimes(1);
506+
507+
// Rerender again to ensure onConnect isn't called multiple times
508+
rerender(
509+
<ConnectWallet text="Connect Wallet" onConnect={onConnectMock} />,
510+
);
511+
expect(onConnectMock).toHaveBeenCalledTimes(1);
512+
});
460513
});
461514
});

‎src/wallet/components/ConnectWallet.tsx

+9-14
Original file line numberDiff line numberDiff line change
@@ -27,11 +27,11 @@ export function ConnectWallet({
2727
text = 'Connect Wallet',
2828
onConnect,
2929
}: ConnectWalletReact) {
30-
// debugger;
3130
const { config = { wallet: { display: undefined } } } = useOnchainKit();
3231

3332
// Core Hooks
3433
const { isOpen, setIsOpen } = useWalletContext();
34+
const [isModalOpen, setIsModalOpen] = useState(false);
3535
const { address: accountAddress, status } = useAccount();
3636
const { connectors, connect, status: connectStatus } = useConnect();
3737

@@ -61,19 +61,19 @@ export function ConnectWallet({
6161
const connector = connectors[0];
6262
const isLoading = connectStatus === 'pending' || status === 'connecting';
6363

64-
// Handles
64+
// Handlers
6565
const handleToggle = useCallback(() => {
6666
setIsOpen(!isOpen);
6767
}, [isOpen, setIsOpen]);
6868

6969
const handleCloseModal = useCallback(() => {
70-
setIsOpen(false);
71-
}, [setIsOpen]);
70+
setIsModalOpen(false);
71+
}, []);
7272

7373
const handleOpenModal = useCallback(() => {
74-
setIsOpen(true);
74+
setIsModalOpen(true);
7575
setHasClickedConnect(true);
76-
}, [setIsOpen]);
76+
}, []);
7777

7878
// Effects
7979
useEffect(() => {
@@ -82,7 +82,7 @@ export function ConnectWallet({
8282
setHasClickedConnect(false);
8383
}
8484
}, [status, hasClickedConnect, onConnect]);
85-
// debugger;
85+
8686
if (status === 'disconnected') {
8787
if (config?.wallet?.display === 'modal') {
8888
return (
@@ -96,13 +96,8 @@ export function ConnectWallet({
9696
}}
9797
text={text}
9898
/>
99-
{isOpen && (
100-
<WalletModal
101-
isOpen={true}
102-
onClose={() => {
103-
handleCloseModal();
104-
}}
105-
/>
99+
{isModalOpen && (
100+
<WalletModal isOpen={true} onClose={handleCloseModal} />
106101
)}
107102
</div>
108103
);

0 commit comments

Comments
 (0)