From cf8045615f1548a9b304855cd77232766a89b84b Mon Sep 17 00:00:00 2001
From: Paul Cramer <paulccramer@gmail.com>
Date: Tue, 17 Dec 2024 15:34:15 -0800
Subject: [PATCH] docs: Enable auto logged in components on landing page
 (#1754)

---
 .changeset/slow-bats-obey.md                |   5 +
 site/docs/components/AppDemo.tsx            | 119 ++++++++++++++++++++
 site/docs/components/landing/SwapDemo.tsx   |   6 +-
 site/docs/components/landing/WalletDemo.tsx |   9 +-
 4 files changed, 130 insertions(+), 9 deletions(-)
 create mode 100644 .changeset/slow-bats-obey.md
 create mode 100644 site/docs/components/AppDemo.tsx

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 (
+    <WagmiProvider config={wagmiConfig}>
+      <QueryClientProvider client={queryClient}>
+        <OnchainKitProvider
+          apiKey={viteCdpApiKey}
+          chain={base}
+          projectId={viteProjectId}
+          schemaId="0xf8b05c79f090979bf4a80270aba232dff11a10d9ca55c4f88de95317970f0de9"
+          config={{
+            appearance: {
+              mode: 'auto',
+              theme: theme,
+            },
+            autoConnect: true,
+            chains: [base, baseSepolia],
+          }}
+        >
+          <div style={{ display: 'flex', flexDirection: 'column' }}>
+            {children}
+          </div>
+        </OnchainKitProvider>
+      </QueryClientProvider>
+    </WagmiProvider>
+  );
+}
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 (
     <div className="mx-auto flex flex-col items-center justify-center">
-      <App>
+      <AppDemo>
         <SwapWrapper>
           {({ address, swappableTokens }) => {
             if (address) {
@@ -84,7 +84,7 @@ function SwapDemo() {
             );
           }}
         </SwapWrapper>
-      </App>
+      </AppDemo>
     </div>
   );
 }
diff --git a/site/docs/components/landing/WalletDemo.tsx b/site/docs/components/landing/WalletDemo.tsx
index 33bac9272d..934254ac17 100644
--- a/site/docs/components/landing/WalletDemo.tsx
+++ b/site/docs/components/landing/WalletDemo.tsx
@@ -11,10 +11,9 @@ import {
   Wallet,
   WalletDropdown,
   WalletDropdownBasename,
-  WalletDropdownDisconnect,
   WalletDropdownLink,
 } from '@coinbase/onchainkit/wallet';
-import App from '../App.tsx';
+import AppDemo from '../AppDemo.tsx';
 
 export const walletDemoCode = `
   import {
@@ -24,7 +23,6 @@ export const walletDemoCode = `
     WalletDropdown,
     WalletDropdownBasename,
     WalletDropdownLink,
-    WalletDropdownDisconnect,
   } from '@coinbase/onchainkit/wallet';
   import {
     Address,
@@ -42,7 +40,7 @@ export const walletDemoCode = `
 
 function WalletDemo() {
   return (
-    <App>
+    <AppDemo>
       <Wallet>
         <ConnectWallet>
           <Avatar className="h-6 w-6" />
@@ -61,10 +59,9 @@ function WalletDemo() {
             Wallet
           </WalletDropdownLink>
           <WalletDropdownBasename />
-          <WalletDropdownDisconnect />
         </WalletDropdown>
       </Wallet>
-    </App>
+    </AppDemo>
   );
 }