updated code snippets to runnable demos

coinbase · Nov 15, 2024 · 0508719 · 0508719
1 parent 5e11e0d
commit 0508719
Show file tree

Hide file tree

Showing 6 changed files with 112 additions and 86 deletions.
diff --git a/site/docs/components/landing/CheckoutDemo.tsx b/site/docs/components/landing/CheckoutDemo.tsx
@@ -10,9 +10,11 @@ export const checkoutDemoCode = `
       CheckoutButton
   } from '@coinbase/onchainkit/checkout';
 
-  <Checkout productId='my-product-id' >
-    <CheckoutButton coinbaseBranded={true}/>
-  </Checkout>
+  function CheckoutDemo() {
+    <Checkout productId='my-product-id' >
+      <CheckoutButton coinbaseBranded={true}/>
+    </Checkout>
+  }
 `;
 
 const GITHUB_LINK = 'https://github.com/coinbase/onchain-commerce-template';

diff --git a/site/docs/components/landing/FundDemo.tsx b/site/docs/components/landing/FundDemo.tsx
@@ -5,24 +5,35 @@ import App from '../App.tsx';
 import FundWrapper from '../FundWrapper.tsx';
 
 export const fundDemoCode = `
+  import { useAccount } from 'wagmi';
   import {
     FundButton,
     getOnrampBuyUrl
   } from '@coinbase/onchainkit/fund';
-  import { useAccount } from 'wagmi';
+  import { WalletDefault } from '@coinbase/onchainkit/wallet';
 
-  const projectId = 'YOUR_CDP_PROJECT_ID';
-  const { address } = useAccount();
+  function FundDemo() {
+    const projectId = 'YOUR_CDP_PROJECT_ID';
+    const { address } = useAccount();
 
-  const onrampBuyUrl = getOnrampBuyUrl({
-    projectId,
-    addresses: { [address]: ['base'] },
-    assets: ['USDC'],
-    presetFiatAmount: 20,
-    fiatCurrency: 'USD'
-  });
+    const onrampBuyUrl = getOnrampBuyUrl({
+      projectId,
+      addresses: { [address]: ['base'] },
+      assets: ['USDC'],
+      presetFiatAmount: 20,
+      fiatCurrency: 'USD'
+    });
 
-  <FundButton fundingUrl={onrampBuyUrl} />
+    return (
+      <>
+        {address ? (
+          <FundButton fundingUrl={onrampBuyUrl} />
+        ) : (
+          <WalletDefault />
+        )}
+      </>
+    )
+  }
 `;
 
 function FundDemo() {

diff --git a/site/docs/components/landing/IdentityDemo.tsx b/site/docs/components/landing/IdentityDemo.tsx
@@ -16,16 +16,20 @@ export const identityDemoCode = `
     Address
   } from '@coinbase/onchainkit/identity';
 
-  <Identity
-    address="0x838aD0EAE54F99F1926dA7C3b6bFbF617389B4D9"
-    schemaId="0xf8b05c79f090979bf4a80270aba232dff11a10d9ca55c4f88de95317970f0de9"
-  >
-    <Avatar />
-    <Name>
-      <Badge />
-    </Name>
-    <Address />
-  </Identity>
+  function IdentityDemo() {
+    return (
+      <Identity
+        address="0x838aD0EAE54F99F1926dA7C3b6bFbF617389B4D9"
+        schemaId="0xf8b05c79f090979bf4a80270aba232dff11a10d9ca55c4f88de95317970f0de9"
+      >
+        <Avatar />
+        <Name>
+          <Badge />
+        </Name>
+        <Address />
+      </Identity>
+    )
+  }
 `;
 
 function IdentityDemo() {

diff --git a/site/docs/components/landing/SwapDemo.tsx b/site/docs/components/landing/SwapDemo.tsx
@@ -11,46 +11,47 @@ import App from '../App.tsx';
 import SwapWrapper from '../SwapWrapper.tsx';
 
 export const swapDemoCode = `
-  import { Avatar, Name } from '@coinbase/onchainkit/identity';
-  import {
-    Swap,
-    SwapAmountInput,
-    SwapToggleButton,
-    SwapButton,
-    SwapMessage,
-    SwapToast,
-  } from '@coinbase/onchainkit/swap';
-  import { Wallet, ConnectWallet } from '@coinbase/onchainkit/wallet';
   import { useAccount } from 'wagmi';
+  import { SwapDefault } from '@coinbase/onchainkit/swap';
   import type { Token } from '@coinbase/onchainkit/token';
+  import { WalletDefault } from '@coinbase/onchainkit/wallet';
 
-  const { address } = useAccount();
+  function SwapDemo() {
+    const { address } = useAccount();
+    const ETHToken: Token = {
+      address: "",
+      chainId: 8453,
+      decimals: 18,
+      name: "Ethereum",
+      symbol: "ETH",
+      image: "",
+    };
 
-  const ETHToken: Token = {
-    address: "",
-    chainId: 8453,
-    decimals: 18,
-    name: "Ethereum",
-    symbol: "ETH",
-    image: "",
-  };
+    const USDCToken: Token = {
+      address: "0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913",
+      chainId: 8453,
+      decimals: 6,
+      name: "USDC",
+      symbol: "USDC",
+      image: "",
+    };
 
-  const USDCToken: Token = {
-    address: "0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913",
-    chainId: 8453,
-    decimals: 6,
-    name: "USDC",
-    symbol: "USDC",
-    image: "",
-  };
+    const swappableTokens: Token[] = [ETHToken, USDCToken];
 
-  const swappableTokens: Token[] = [ETHToken, USDCToken];
-
-  <SwapDefault
-    from={swappableFromTokens}
-    to={swappableToTokens}
-  />
-  `;
+    return (
+      <>
+        {address ? (
+          <SwapDefault
+            from={swappableTokens}
+            to={swappableTokens}
+          />
+        ) : (
+          <WalletDefault />
+        )}
+      </>
+    );
+  }
+`;
 
 function SwapDemo() {
   return (

diff --git a/site/docs/components/landing/TransactionDemo.tsx b/site/docs/components/landing/TransactionDemo.tsx
@@ -12,35 +12,42 @@ import App from '../App.tsx';
 import TransactionWrapper from '../TransactionWrapper.tsx';
 
 export const transactionDemoCode = `
-  import {
-    Transaction,
-    TransactionButton,
-    TransactionSponsor,
-    TransactionStatus,
-    TransactionStatusAction,
-    TransactionStatusLabel,
-  } from '@coinbase/onchainkit/transaction';
-  import type { LifecycleStatus } from '@coinbase/onchainkit/transaction';
-  import {
-    Wallet,
-    ConnectWallet,
-  } from '@coinbase/onchainkit/wallet';
-  import {
-    Avatar,
-    Name,
-  } from '@coinbase/onchainkit/identity';
   import { useAccount } from 'wagmi';
-  import { contracts } from './contracts';
+  import { TransactionDefault } from '@coinbase/onchainkit/transaction';
+  import { WalletDefault } from '@coinbase/onchainkit/wallet';
 
-  const { address } = useAccount();
-  const handleOnStatus = useCallback((status: LifecycleStatus) => {
-    console.log('LifecycleStatus', status);
-  }, []);
+  export default function TransactionDemo() {
+    const { address } = useAccount();
+    const clickContractAddress = '0x67c97D1FB8184F038592b2109F854dfb09C77C75';
+    const clickContractAbi = [
+      {
+        type: 'function',
+        name: 'click',
+        inputs: [],
+        outputs: [],
+        stateMutability: 'nonpayable',
+      },
+    ] as const;
+    const contracts = [
+      {
+        address: clickContractAddress,
+        abi: clickContractAbi,
+        functionName: 'click',
+        args: [],
+      },
+    ];
 
-  <TransactionDefault
-    contracts={contracts}
-  />
-  `;
+    return (
+      <>
+        {address ? (
+          <TransactionDefault contracts={contracts} chainId={84532} />
+        ) : (
+          <WalletDefault />
+        )}
+      </>
+    );
+  }
+`;
 
 function TransactionDemo() {
   return (

diff --git a/site/docs/components/landing/WalletDemo.tsx b/site/docs/components/landing/WalletDemo.tsx
@@ -35,8 +35,9 @@ export const walletDemoCode = `
     Identity,
   } from '@coinbase/onchainkit/identity';
 
-  <WalletDefault />
-
+  function WalletDefaultDemo() {
+    return <WalletDefault />
+  }
 `;
 
 function WalletDemo() {