diff --git a/.changeset/slow-bats-obey.md b/.changeset/slow-bats-obey.md
new file mode 100644
index 0000000000..b497677dd3
--- /dev/null
+++ b/.changeset/slow-bats-obey.md
@@ -0,0 +1,5 @@
+---
+'@coinbase/onchainkit': patch
+---
+
+-**docs**: Auto logged in components on landing page. @cpcramer #1754
diff --git a/site/docs/components/AppDemo.tsx b/site/docs/components/AppDemo.tsx
new file mode 100644
index 0000000000..fbe8c9da98
--- /dev/null
+++ b/site/docs/components/AppDemo.tsx
@@ -0,0 +1,119 @@
+'use client';
+import { OnchainKitProvider } from '@coinbase/onchainkit';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import type { ReactNode } from 'react';
+import { http, WagmiProvider, createConfig } from 'wagmi';
+import { base, baseSepolia } from 'wagmi/chains';
+import { coinbaseWallet } from 'wagmi/connectors';
+import '@coinbase/onchainkit/styles.css';
+import { createWalletClient } from 'viem';
+import { privateKeyToAccount } from 'viem/accounts';
+import type { Config } from 'wagmi';
+import { useTheme } from '../contexts/Theme.tsx';
+
+const queryClient = new QueryClient();
+
+// WARNING: This is a publicly exposed private key used only for documentation demos.
+// Do not use this key for any real transactions or store any assets in this account.
+const DUMMY_PK =
+ '0xa67bdd8a49324aa36cb3f7f7064b9b560e3aa653b774be9793415c0a6fc62cf8' as const;
+
+const demoWalletConnector = (_config: Config) => {
+ const account = privateKeyToAccount(DUMMY_PK);
+
+ const client = createWalletClient({
+ account,
+ chain: baseSepolia,
+ transport: http(),
+ });
+
+ return {
+ id: 'testWallet',
+ name: 'Test Wallet',
+ type: 'injected' as const,
+ async connect() {
+ return {
+ accounts: [account.address],
+ chainId: baseSepolia.id,
+ };
+ },
+ async switchChain({ chainId }: { chainId: number }) {
+ if (chainId === baseSepolia.id) {
+ return baseSepolia;
+ }
+ if (chainId === base.id) {
+ return base;
+ }
+ throw new Error('Unsupported chain');
+ },
+ async disconnect() {},
+ async getAccount() {
+ return account.address;
+ },
+ async getChainId() {
+ return baseSepolia.id;
+ },
+ async isAuthorized() {
+ return true;
+ },
+ onAccountsChanged() {},
+ onChainChanged() {},
+ onDisconnect() {},
+ async getAccounts() {
+ return [account.address];
+ },
+ async getProvider() {
+ return client;
+ },
+ };
+};
+
+const wagmiConfig = createConfig({
+ chains: [base, baseSepolia],
+ connectors: [
+ demoWalletConnector,
+ coinbaseWallet({
+ appName: 'OnchainKit',
+ }),
+ ],
+ ssr: true,
+ transports: {
+ [base.id]: http(),
+ [baseSepolia.id]: http(),
+ },
+});
+
+export default function AppDemo({ children }: { children: ReactNode }) {
+ const isServer = typeof window === 'undefined';
+ if (isServer) {
+ return null;
+ }
+ const viteCdpApiKey = import.meta.env.VITE_CDP_API_KEY;
+ const viteProjectId = import.meta.env.VITE_CDP_PROJECT_ID;
+ const { theme } = useTheme();
+
+ return (
+
+
+
+
+ {children}
+
+
+
+
+ );
+}
diff --git a/site/docs/components/landing/SwapDemo.tsx b/site/docs/components/landing/SwapDemo.tsx
index da2cd69006..4c82be205b 100644
--- a/site/docs/components/landing/SwapDemo.tsx
+++ b/site/docs/components/landing/SwapDemo.tsx
@@ -7,7 +7,7 @@ import {
SwapToggleButton,
} from '@coinbase/onchainkit/swap';
import { ConnectWallet, Wallet } from '@coinbase/onchainkit/wallet';
-import App from '../App.tsx';
+import AppDemo from '../AppDemo.tsx';
import SwapWrapper from '../SwapWrapper.tsx';
export const swapDemoCode = `
@@ -48,7 +48,7 @@ export const swapDemoCode = `
function SwapDemo() {
return (
-
+
{({ address, swappableTokens }) => {
if (address) {
@@ -84,7 +84,7 @@ function SwapDemo() {
);
}}
-
+