From 44675e131fc617dd15c95e362f07ebf4e7685eaa Mon Sep 17 00:00:00 2001 From: Paul Cramer Date: Tue, 17 Dec 2024 10:33:08 -0800 Subject: [PATCH 1/3] feat: Auto logged in components --- .changeset/slow-bats-obey.md | 5 + site/docs/components/AppDemo.tsx | 118 ++++++++++++++++++++ site/docs/components/landing/SwapDemo.tsx | 6 +- site/docs/components/landing/WalletDemo.tsx | 9 +- 4 files changed, 129 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..b2e16833c2 --- /dev/null +++ b/site/docs/components/AppDemo.tsx @@ -0,0 +1,118 @@ +'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 { 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'; + +const demoWalletConnector = (_config: any) => { + const account = privateKeyToAccount(DUMMY_PK as `0x${string}`); + + 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() { ); }} - +
); } 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 ( - + @@ -61,10 +59,9 @@ function WalletDemo() { Wallet - - + ); } From 329c8c30b850bfafe5b3b98dc0cb65f40acb20fc Mon Sep 17 00:00:00 2001 From: Paul Cramer Date: Tue, 17 Dec 2024 15:22:22 -0800 Subject: [PATCH 2/3] formatting --- site/docs/components/AppDemo.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/site/docs/components/AppDemo.tsx b/site/docs/components/AppDemo.tsx index b2e16833c2..f4a12012a1 100644 --- a/site/docs/components/AppDemo.tsx +++ b/site/docs/components/AppDemo.tsx @@ -8,6 +8,7 @@ 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(); @@ -17,7 +18,7 @@ const queryClient = new QueryClient(); const DUMMY_PK = '0xa67bdd8a49324aa36cb3f7f7064b9b560e3aa653b774be9793415c0a6fc62cf8'; -const demoWalletConnector = (_config: any) => { +const demoWalletConnector = (_config: Config) => { const account = privateKeyToAccount(DUMMY_PK as `0x${string}`); const client = createWalletClient({ From 0dfbade3b941bd3a3c08ae42d6b593a7b8be82fb Mon Sep 17 00:00:00 2001 From: Paul Cramer Date: Tue, 17 Dec 2024 15:26:05 -0800 Subject: [PATCH 3/3] asdf --- site/docs/components/AppDemo.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/site/docs/components/AppDemo.tsx b/site/docs/components/AppDemo.tsx index f4a12012a1..fbe8c9da98 100644 --- a/site/docs/components/AppDemo.tsx +++ b/site/docs/components/AppDemo.tsx @@ -16,10 +16,10 @@ 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'; + '0xa67bdd8a49324aa36cb3f7f7064b9b560e3aa653b774be9793415c0a6fc62cf8' as const; const demoWalletConnector = (_config: Config) => { - const account = privateKeyToAccount(DUMMY_PK as `0x${string}`); + const account = privateKeyToAccount(DUMMY_PK); const client = createWalletClient({ account,