From d47723a340b9c6945a85f9cf3cdf77c92be4f400 Mon Sep 17 00:00:00 2001
From: Daniel Schlabach <31226559+dschlabach@users.noreply.github.com>
Date: Fri, 1 Nov 2024 14:49:59 -0400
Subject: [PATCH] docs: add documentation for `<ConnectWallet />`'s `onConnect`
 handler (#1555)

---
 site/docs/pages/wallet/types.mdx  |  1 +
 site/docs/pages/wallet/wallet.mdx | 33 ++++++++++++++++++++++++++++++-
 2 files changed, 33 insertions(+), 1 deletion(-)

diff --git a/site/docs/pages/wallet/types.mdx b/site/docs/pages/wallet/types.mdx
index be8e13a20a..6251b18e74 100644
--- a/site/docs/pages/wallet/types.mdx
+++ b/site/docs/pages/wallet/types.mdx
@@ -13,6 +13,7 @@ type ConnectWalletReact = {
   className?: string; // Optional className override for button element
   text?: string; // Optional text override for button. Note: Prefer using `ConnectWalletText` component instead as this will be deprecated in a future version.
   withWalletAggregator?: boolean; // Optional flag to enable the wallet aggregator like RainbowKit
+  onConnect?: () => void; // Optional callback function that is called when the wallet is connected. Can be used to trigger SIWE prompts or other actions.
 };
 ```
 
diff --git a/site/docs/pages/wallet/wallet.mdx b/site/docs/pages/wallet/wallet.mdx
index c08dc2d1c0..a758904927 100644
--- a/site/docs/pages/wallet/wallet.mdx
+++ b/site/docs/pages/wallet/wallet.mdx
@@ -379,7 +379,7 @@ import {
 ```
 
 ```tsx twoslash [OnchainProviders.tsx]
-// @noErrors: 2304 2322 - Cannot find VITE_WALLET_CONNECT_PROJECT_ID, Canoot find name Props
+// @noErrors: 2304 2322 - Cannot find VITE_WALLET_CONNECT_PROJECT_ID, Cannot find name Props
 'use client';
 import type { ReactNode } from 'react';
 import { OnchainKitProvider } from '@coinbase/onchainkit';
@@ -476,6 +476,37 @@ export default OnchainProviders;
 
 ::::
 
+## Examples
+
+### With Sign In With Ethereum (SIWE)
+
+To use [Sign In With Ethereum (SIWE)](https://docs.login.xyz/general-information/siwe-overview) with OnchainKit, you can use the `onConnect` prop in the `<ConnectWallet />` component. This will trigger the SIWE prompt when the user connects their wallet.
+
+```tsx twoslash
+import { ConnectWallet } from '@coinbase/onchainkit/wallet';
+import { base } from 'wagmi/chains';
+import { createSiweMessage } from 'viem/siwe'
+import { useSignMessage } from 'wagmi';
+
+const message = createSiweMessage({
+  address: '0xA0Cf798816D4b9b9866b5330EEa46a18382f251e',
+  chainId: base.id,
+  domain: 'example.com',
+  nonce: 'foobarbaz',
+  uri: 'https://example.com/path',
+  version: '1',
+})
+
+export function WalletComponents() {
+  const { signMessage } = useSignMessage();
+
+  return (
+    <ConnectWallet onConnect={() => {signMessage({ message })}} />
+  );
+}
+
+```
+
 ## Components
 
 The components are designed to work together hierarchically. For each component, ensure the following: