add demo components

base · Feb 14, 2025 · 55f6b7b · 55f6b7b
1 parent 805e743
commit 55f6b7b
Show file tree

Hide file tree

Showing 8 changed files with 572 additions and 238 deletions.
diff --git a/apps/web/app/CryptoProviders.dynamic.tsx b/apps/web/app/CryptoProviders.dynamic.tsx
@@ -3,9 +3,15 @@
 import { useEffect, useState } from 'react';
 import { useErrors } from 'apps/web/contexts/Errors';
 
-export function DynamicCryptoProviders({ children }: { children: React.ReactNode }) {
+export function DynamicCryptoProviders({
+  children,
+  theme,
+}: {
+  children: React.ReactNode;
+  theme: 'light' | 'dark';
+}) {
   const [CryptoProvidersDynamic, setCryptoProvidersDynamic] =
-    useState<React.ComponentType<{ children: React.ReactNode }>>();
+    useState<React.ComponentType<{ children: React.ReactNode; theme: 'light' | 'dark' }>>();
   const { logError } = useErrors();
 
   useEffect(() => {
@@ -18,5 +24,5 @@ export function DynamicCryptoProviders({ children }: { children: React.ReactNode
 
   if (!CryptoProvidersDynamic) return null;
 
-  return <CryptoProvidersDynamic>{children}</CryptoProvidersDynamic>;
+  return <CryptoProvidersDynamic theme={theme}>{children}</CryptoProvidersDynamic>;
 }
diff --git a/apps/web/app/CryptoProviders.tsx b/apps/web/app/CryptoProviders.tsx
@@ -53,15 +53,15 @@ const queryClient = new QueryClient();
 
 type CryptoProvidersProps = {
   children: React.ReactNode;
+  theme?: 'light' | 'dark';
 };
 
-const onchainKitConfig: AppConfig = {
-  appearance: {
-    mode: 'light',
-  },
-};
-
-export default function CryptoProviders({ children }: CryptoProvidersProps) {
+export default function CryptoProviders({ children, theme = 'light' }: CryptoProvidersProps) {
+  const onchainKitConfig: AppConfig = {
+    appearance: {
+      mode: theme,
+    },
+  };
   return (
     <WagmiProvider config={config}>
       <QueryClientProvider client={queryClient}>

diff --git a/apps/web/next.config.js b/apps/web/next.config.js
@@ -120,6 +120,8 @@ const contentSecurityPolicy = {
     `https://${process.env.NEXT_PUBLIC_PINATA_GATEWAY_URL}`,
     'https://usdc-claim-git-master-coinbase-vercel.vercel.app',
     'https://eth.merkle.io', // new default viem rpc
+    'https://blue-api.morpho.org/graphql', // morpho
+    'https://base-sepolia.easscan.org/graphql', // nft
   ],
   'frame-src': ['https://p.datadoghq.com'],
   'frame-ancestors': ["'self'", baseXYZDomains],
@@ -135,6 +137,7 @@ const contentSecurityPolicy = {
     'https://cloudflare-ipfs.com', // ipfs Cloudflare ens avatar resolution
     'https://res.cloudinary.com',
     `https://${process.env.NEXT_PUBLIC_PINATA_GATEWAY_URL}`,
+    'https://img.reservoir.tools', // reservoir
   ],
 };
 

diff --git a/apps/web/src/components/Developers/Onchainkit/Demo.tsx b/apps/web/src/components/Developers/Onchainkit/Demo.tsx
@@ -3,20 +3,35 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import sun from 'apps/web/src/components/Developers/Shared/sun.svg';
 import moon from 'apps/web/src/components/Developers/Shared/moon.svg';
+import usdc from 'apps/web/src/components/Developers/Onchainkit/usdc.png';
 import Image, { StaticImageData } from 'next/image';
 import { Icon } from 'apps/web/src/components/Icon/Icon';
 import classNames from 'classnames';
 import { DynamicCryptoProviders } from 'apps/web/app/CryptoProviders.dynamic';
 import { WalletDefault } from '@coinbase/onchainkit/wallet';
 import CodeSnippet from 'apps/web/src/components/Developers/Shared/CodeSnippet';
-import { CheckoutButton } from '@coinbase/onchainkit/checkout';
-import { Checkout } from '@coinbase/onchainkit/checkout';
+import { Checkout, CheckoutButton } from '@coinbase/onchainkit/checkout';
 import { TransactionDefault } from '@coinbase/onchainkit/transaction';
+import { Earn } from '@coinbase/onchainkit/earn';
+import { Buy } from '@coinbase/onchainkit/buy';
+import { FundCard } from '@coinbase/onchainkit/fund';
+import { NFTMintCard } from '@coinbase/onchainkit/nft';
+import { NFTMedia } from '@coinbase/onchainkit/nft/view';
 import {
+  NFTCreator,
+  NFTCollectionTitle,
+  NFTAssetCost,
+  NFTMinters,
+  NFTQuantitySelector,
+  NFTMintButton,
+} from '@coinbase/onchainkit/nft/mint';
+import {
+  CLICK_CALLS,
   COMPONENT_CODE_SNIPPETS,
   ONCHAINKIT_DEMO_TABS,
 } from 'apps/web/src/components/Developers/Onchainkit/constants';
 import { ComponentDropdown } from 'apps/web/src/components/Developers/Onchainkit/ComponentDropdown';
+import { Token } from '@coinbase/onchainkit/token';
 
 const styles = `
   .code-snippet::-webkit-scrollbar {
@@ -57,6 +72,15 @@ const styles = `
   }
 `;
 
+export const usdcToken: Token = {
+  name: 'USDC',
+  address: '0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913',
+  symbol: 'USDC',
+  decimals: 6,
+  chainId: 8453,
+  image: usdc.src,
+};
+
 export function Demo() {
   const [theme, setTheme] = useState<'light' | 'dark'>('dark');
   const [isMounted, setIsMounted] = useState(false);
@@ -87,7 +111,7 @@ export function Demo() {
 
   const component = useMemo(() => {
     if (selectedTab === 'Transact') {
-      return <TransactionDefault calls={[]} className="mr-auto w-auto" />;
+      return <TransactionDefault calls={CLICK_CALLS} className="mr-auto w-auto" />;
     }
     if (selectedTab === 'Checkout') {
       return (
@@ -96,23 +120,39 @@ export function Demo() {
         </Checkout>
       );
     }
+    if (selectedTab === 'Earn') {
+      return <Earn vaultAddress="0x7BfA7C4f149E7415b73bdeDfe609237e29CBF34A" />;
+    }
+    if (selectedTab === 'Buy') {
+      return <Buy toToken={usdcToken} disabled={true} />;
+    }
+    if (selectedTab === 'Mint') {
+      return (
+        <NFTMintCard contractAddress="0xed2f34043387783b2727ff2799a46ce3ae1a34d2" tokenId="2">
+          <NFTCreator />
+          <NFTMedia />
+          <NFTCollectionTitle />
+          <NFTMinters />
+          <NFTQuantitySelector />
+          <NFTAssetCost />
+          <NFTMintButton />
+        </NFTMintCard>
+      );
+    }
+    if (selectedTab === 'Fund') {
+      return (
+        <FundCard
+          assetSymbol="ETH"
+          country="US"
+          currency="USD"
+          presetAmountInputs={['10', '20', '100']}
+          className="w-[400px] max-w-full"
+        />
+      );
+    }
     return <WalletDefault />;
   }, [selectedTab]);
 
-  if (!isMounted) {
-    return (
-      <div id="demo" className="bg-black pb-32 pt-24">
-        <div className="mx-auto max-w-4xl">
-          <div className="bg-neutral-900/50 mx-auto overflow-hidden rounded-xl border border-white/10">
-            <div className="flex h-[500px] items-center justify-center">
-              <div className="text-white/50">Loading...</div>
-            </div>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
   return (
     <section className="w-full">
       <style>{styles}</style>
@@ -197,24 +237,28 @@ export function Demo() {
           </div>
         </div>
 
-        <div className="grid grid-cols-1 lg:grid-cols-2">
-          <div
-            className={classNames(
-              'h-[300px] p-8 lg:h-[500px] lg:p-12',
-              'border-b lg:border-b-0 lg:border-r',
-              'flex items-center justify-center transition-colors',
-              'overflow-visible',
-              theme === 'dark' ? 'border-dark-palette-line/50' : 'border-dark-palette-line/50',
-            )}
-          >
-            <DynamicCryptoProviders>{component}</DynamicCryptoProviders>
-          </div>
-          <div className="h-[300px] py-6 pl-6 pr-1 lg:h-[500px]">
-            <div className={`${theme} relative h-full`}>
-              <CodeSnippet code={codeSnippet} />
+        {isMounted ? (
+          <div className="grid grid-cols-1 lg:grid-cols-2">
+            <div
+              className={classNames(
+                'h-[300px] p-8 lg:h-[500px] lg:p-12',
+                'border-b lg:border-b-0 lg:border-r',
+                'flex items-center justify-center transition-colors',
+                'overflow-scroll',
+                theme === 'dark' ? 'border-dark-palette-line/50' : 'border-dark-palette-line/50',
+              )}
+            >
+              <DynamicCryptoProviders theme={theme}>{component}</DynamicCryptoProviders>
+            </div>
+            <div className="h-[300px] py-6 pl-6 pr-1 lg:h-[500px]">
+              <div className={`${theme} relative h-full`}>
+                <CodeSnippet code={codeSnippet} />
+              </div>
             </div>
           </div>
-        </div>
+        ) : (
+          <div className="flex h-[300px] items-center justify-center p-8 lg:h-[500px]" />
+        )}
       </div>
     </section>
   );

diff --git a/apps/web/src/components/Developers/Onchainkit/constants.ts b/apps/web/src/components/Developers/Onchainkit/constants.ts
@@ -1,3 +1,5 @@
+import { Address, encodeFunctionData } from 'viem';
+
 export const COMPONENT_CODE_SNIPPETS: Record<string, string> = {
   Wallet: `import { 
   WalletDefault 
@@ -7,17 +9,80 @@ function WalletDefaultDemo() {
   return <WalletDefault />
 }
 `,
-  Earn: `
+  Earn: `import { Earn } from '@coinbase/onchainkit/earn';
+
+function EarnDemo() {
+  const vaultAddress = '0x7BfA7C4f149E7415b73bdeDfe609237e29CBF34A';
+
+  return <Earn vaultAddress={vaultAddress} />;
+}
   `,
-  Fund: `
+  Fund: `import { FundCard } from "@coinbase/onchainkit/fund"
+
+function FundDemo() {
+
+  return (
+    <FundCard
+      assetSymbol="ETH"
+      country="US"
+      currency="USD"
+      presetAmountInputs={['10', '20', '100']}
+    />
+  )
+}
   `,
   Pay: `
   `,
-  Buy: `
-  `,
-  Checkout: `
+  Buy: `import { Buy } from "@coinbase/onchainkit/buy"
+import { Token } from "@coinbase/onchainkit/token";
+
+function BuyDemo() {
+  const usdcToken: Token = {
+    name: 'USDC',
+    address: '0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913',
+    symbol: 'USDC',
+    decimals: 6,
+    chainId: 8453,
+    image: usdc.src,
+  };
+
+  return <Buy toToken={usdcToken} />
+}
   `,
-  Mint: `
+  Checkout: `import { Checkout, CheckoutButton } from '@coinbase/onchainkit/checkout';
+
+function CheckoutDemo() {  
+  return (
+    <Checkout>
+      <CheckoutButton />
+    </Checkout>
+  )
+}`,
+  Mint: `import { NFTMintCard } from "@coinbase/onchainkit/nft";
+import { NFTMedia } from "@coinbase/onchainkit/nft/view";
+import {
+  NFTCreator,
+  NFTCollectionTitle,
+  NFTAssetCost,
+  NFTMinters,
+  NFTQuantitySelector,
+  NFTMintButton,
+} from "@coinbase/onchainkit/nft/mint";
+
+function NFTMintDemo() {
+
+  return (
+    <NFTMintCard contractAddress="0xed2f34043387783b2727ff2799a46ce3ae1a34d2" tokenId="2">
+      <NFTCreator />
+      <NFTMedia />
+      <NFTCollectionTitle />
+      <NFTMinters />
+      <NFTQuantitySelector />
+      <NFTAssetCost />
+      <NFTMintButton />
+    </NFTMintCard>
+  )
+}
   `,
   Transact: `import { 
   TransactionDefault 
@@ -35,9 +100,59 @@ export const ONCHAINKIT_DEMO_TABS = [
   'Wallet',
   'Earn',
   'Fund',
-  'Pay',
   'Buy',
   'Checkout',
   'Mint',
   'Transact',
 ];
+
+const clickAbi = [
+  {
+    type: 'function',
+    name: 'click',
+    inputs: [],
+    outputs: [],
+    stateMutability: 'nonpayable',
+  },
+  {
+    type: 'event',
+    name: 'Clicked',
+    inputs: [
+      {
+        name: 'account',
+        type: 'address',
+        indexed: true,
+        internalType: 'address',
+      },
+    ],
+    anonymous: false,
+  },
+] as const;
+
+const deployedContracts: Record<number, { click: Address }> = {
+  [8543]: {
+    click: '0x7d662A03CC7f493D447EB8b499cF4533f5B640E2',
+  },
+  [85432]: {
+    click: '0x7d662A03CC7f493D447EB8b499cF4533f5B640E2',
+  },
+};
+
+export const CLICK_CALLS = [
+  {
+    data: encodeFunctionData({
+      abi: clickAbi,
+      functionName: 'click',
+      args: [],
+    }),
+    to: deployedContracts[85432].click,
+  },
+  {
+    data: encodeFunctionData({
+      abi: clickAbi,
+      functionName: 'click',
+      args: [],
+    }),
+    to: deployedContracts[85432].click,
+  },
+];
diff --git a/apps/web/src/components/Developers/Onchainkit/usdc.png b/apps/web/src/components/Developers/Onchainkit/usdc.png
diff --git a/apps/web/src/components/Developers/Shared/CodeSnippet.tsx b/apps/web/src/components/Developers/Shared/CodeSnippet.tsx
@@ -11,11 +11,11 @@ export default function CodeSnippet({ code }: { code: string }) {
 
         const highlighter = await createHighlighter({
           themes: ['github-light', 'github-dark'],
-          langs: ['typescript'],
+          langs: ['tsx'],
         });
 
         const formattedCode = highlighter.codeToHtml(code, {
-          lang: 'typescript',
+          lang: 'tsx',
           themes: {
             light: 'github-light',
             dark: 'github-dark',