From fb58d567ede0769c8b5c160cf54d00e45c3ea03b Mon Sep 17 00:00:00 2001
From: dschlabach <daniel.schlabach@coinbase.com>
Date: Fri, 1 Nov 2024 10:59:46 -0400
Subject: [PATCH 1/6] chore: docs
---
site/docs/pages/wallet/types.mdx | 1 +
1 file changed, 1 insertion(+)
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.
};
```
From 55d7fc724e1933ba04c49a0419304e25f6b5de73 Mon Sep 17 00:00:00 2001
From: dschlabach <daniel.schlabach@coinbase.com>
Date: Fri, 1 Nov 2024 14:25:16 -0400
Subject: [PATCH 2/6] onconnect
---
site/docs/pages/wallet/wallet.mdx | 27 ++++++++++++++++++++++++++-
1 file changed, 26 insertions(+), 1 deletion(-)
diff --git a/site/docs/pages/wallet/wallet.mdx b/site/docs/pages/wallet/wallet.mdx
index c08dc2d1c0..cc13b4f2ba 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,31 @@ export default OnchainProviders;
::::
+## Examples
+
+### With Sign In With Ethereum (SIWE)
+
+To use SIWE 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'
+
+const message = createSiweMessage({
+ address: '0xA0Cf798816D4b9b9866b5330EEa46a18382f251e',
+ chainId: base.id,
+ domain: 'example.com',
+ nonce: 'foobarbaz',
+ uri: 'https://example.com/path',
+ version: '1',
+})
+
+
+<ConnectWallet />
+
+```
+
## Components
The components are designed to work together hierarchically. For each component, ensure the following:
From 321339dab3cbf976940e36c1327084e87b4fdefe Mon Sep 17 00:00:00 2001
From: dschlabach <daniel.schlabach@coinbase.com>
Date: Fri, 1 Nov 2024 14:29:59 -0400
Subject: [PATCH 3/6] chore: docs
---
site/docs/pages/wallet/wallet.mdx | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/site/docs/pages/wallet/wallet.mdx b/site/docs/pages/wallet/wallet.mdx
index cc13b4f2ba..78f0a71c5b 100644
--- a/site/docs/pages/wallet/wallet.mdx
+++ b/site/docs/pages/wallet/wallet.mdx
@@ -497,7 +497,7 @@ const message = createSiweMessage({
})
-<ConnectWallet />
+<ConnectWallet onConnect={() => {}} />
```
From b23686ebe5d487c398c4fbc5d8f2205d56153902 Mon Sep 17 00:00:00 2001
From: dschlabach <daniel.schlabach@coinbase.com>
Date: Fri, 1 Nov 2024 14:38:34 -0400
Subject: [PATCH 4/6] add docs
---
site/docs/pages/wallet/wallet.mdx | 8 +++++++-
1 file changed, 7 insertions(+), 1 deletion(-)
diff --git a/site/docs/pages/wallet/wallet.mdx b/site/docs/pages/wallet/wallet.mdx
index 78f0a71c5b..c5fb960e56 100644
--- a/site/docs/pages/wallet/wallet.mdx
+++ b/site/docs/pages/wallet/wallet.mdx
@@ -486,6 +486,7 @@ To use SIWE with OnchainKit, you can use the `onConnect` prop in the `<ConnectWa
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',
@@ -496,8 +497,13 @@ const message = createSiweMessage({
version: '1',
})
+export function WalletComponents() {
+ const { signMessage } = useSignMessage();
-<ConnectWallet onConnect={() => {}} />
+ return (
+ <ConnectWallet onConnect={() => {signMessage({ message })}} />
+ );
+}
```
From 1a9ce98172783a37a560d45c9b53c8e57e28f26e Mon Sep 17 00:00:00 2001
From: dschlabach <daniel.schlabach@coinbase.com>
Date: Fri, 1 Nov 2024 14:42:54 -0400
Subject: [PATCH 5/6] nit
---
site/docs/pages/wallet/wallet.mdx | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/site/docs/pages/wallet/wallet.mdx b/site/docs/pages/wallet/wallet.mdx
index c5fb960e56..d05073c167 100644
--- a/site/docs/pages/wallet/wallet.mdx
+++ b/site/docs/pages/wallet/wallet.mdx
@@ -480,7 +480,7 @@ export default OnchainProviders;
### With Sign In With Ethereum (SIWE)
-To use SIWE with OnchainKit, you can use the `onConnect` prop in the `<ConnectWallet />` component. This will trigger the SIWE prompt when the user connects their wallet.
+To use Sign In With Ethereum (SIWE) 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';
From 7721817623a7199ffc4421b60bc8b06745137ea6 Mon Sep 17 00:00:00 2001
From: Daniel Schlabach <31226559+dschlabach@users.noreply.github.com>
Date: Fri, 1 Nov 2024 14:45:34 -0400
Subject: [PATCH 6/6] Update site/docs/pages/wallet/wallet.mdx
Co-authored-by: alec <93971719+0xAlec@users.noreply.github.com>
---
site/docs/pages/wallet/wallet.mdx | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/site/docs/pages/wallet/wallet.mdx b/site/docs/pages/wallet/wallet.mdx
index d05073c167..a758904927 100644
--- a/site/docs/pages/wallet/wallet.mdx
+++ b/site/docs/pages/wallet/wallet.mdx
@@ -480,7 +480,7 @@ export default OnchainProviders;
### With Sign In With Ethereum (SIWE)
-To use Sign In With Ethereum (SIWE) with OnchainKit, you can use the `onConnect` prop in the `<ConnectWallet />` component. This will trigger the SIWE prompt when the user connects their wallet.
+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';