feat: homepage updates (#1634)

coinbase · Nov 19, 2024 · 69a759f · 69a759f
1 parent 5a41b79
commit 69a759f
Show file tree

Hide file tree

Showing 9 changed files with 147 additions and 92 deletions.
diff --git a/site/README.md b/site/README.md
@@ -3,6 +3,6 @@
 To run the site locally:
 
 ```bash
-bun install
-bun dev
+yarn install
+yarn dev
 ```
diff --git a/site/docs/components/landing/CheckoutDemo.tsx b/site/docs/components/landing/CheckoutDemo.tsx
@@ -10,9 +10,13 @@ export const checkoutDemoCode = `
       CheckoutButton
   } from '@coinbase/onchainkit/checkout';
 
-  <Checkout productId='my-product-id' >
-    <CheckoutButton coinbaseBranded={true}/>
-  </Checkout>
+  function CheckoutDemo() {
+    return (
+      <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/ComponentPreview.tsx b/site/docs/components/landing/ComponentPreview.tsx
@@ -9,6 +9,7 @@ import { getHighlightedCode } from './getHighlightedCode.tsx';
 import CheckoutDemo, { checkoutDemoCode } from './CheckoutDemo.tsx';
 import FundDemo, { fundDemoCode } from './FundDemo.tsx';
 import IdentityDemo, { identityDemoCode } from './IdentityDemo.tsx';
+import NftMintCardDemo, { nftMintCardDemoCode } from './NftMintCardDemo.tsx';
 import SwapDemo, { swapDemoCode } from './SwapDemo.tsx';
 import TransactionDemo, { transactionDemoCode } from './TransactionDemo.tsx';
 import WalletDemo, { walletDemoCode } from './WalletDemo.tsx';
@@ -33,6 +34,12 @@ const components: Component[] = [
     code: swapDemoCode,
     description: 'Enable swaps between different cryptocurrencies.',
   },
+  {
+    name: 'Mint',
+    component: NftMintCardDemo,
+    code: nftMintCardDemoCode,
+    description: 'Enable NFT mints (ERC721 and ERC1155).',
+  },
   {
     name: 'Checkout',
     component: CheckoutDemo,
@@ -184,7 +191,7 @@ function PreviewContainer({
   }, [activeTab, theme]);
 
   return (
-    <div className="h-[550px] w-[375px] overflow-hidden rounded-lg border border-zinc-200 bg-zinc-50 sm:w-[600px] md:h-[670px] md:w-[700px] dark:border-zinc-900 dark:bg-zinc-950">
+    <div className="h-[600px] w-[375px] overflow-hidden rounded-lg border border-zinc-200 bg-zinc-50 sm:w-[600px] md:h-[670px] md:w-[700px] dark:border-zinc-900 dark:bg-[#0f0f0f]">
       <div className="mt-2 flex items-center justify-between border-zinc-200 border-b px-3 dark:border-zinc-900">
         <div className="flex">
           <TabButton
@@ -217,13 +224,15 @@ function PreviewContainer({
           </button>
         )}
       </div>
-      <div className="flex overflow-auto">
+      <div className="flex overflow-auto py-6">
         <div
           className={`${
             activeSubTab === 'preview' ? 'flex' : 'hidden'
           } h-[500px] w-full items-center justify-center md:h-[600px]`}
         >
-          <ActiveComponent />
+          <div className="w-auto max-w-[200px] md:max-w-[325px]">
+            <ActiveComponent />
+          </div>
         </div>
         <div className={`${activeSubTab === 'code' ? 'flex' : 'hidden'} p-4`}>
           <pre className="h-[450px] whitespace-pre-wrap break-words text-sm md:h-[600px]">

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/NftMintCardDemo.tsx b/site/docs/components/landing/NftMintCardDemo.tsx
@@ -0,0 +1,26 @@
+import { NFTMintCardDefault } from '@coinbase/onchainkit/nft';
+import App from '../App.tsx';
+
+export const nftMintCardDemoCode = `
+  import { NFTMintCardDefault } from '@coinbase/onchainkit/nft';
+
+  function NftMintCardDemo() {
+    return (
+      <NFTMintCardDefault
+        contractAddress="0xed2f34043387783b2727ff2799a46ce3ae1a34d2"
+        tokenId="2"
+      />
+    )
+  }
+`;
+
+export default function NftMintCardDemo() {
+  return (
+    <App>
+      <NFTMintCardDefault
+        contractAddress="0xed2f34043387783b2727ff2799a46ce3ae1a34d2"
+        tokenId="2"
+      />
+    </App>
+  );
+}
diff --git a/site/docs/components/landing/SwapDemo.tsx b/site/docs/components/landing/SwapDemo.tsx
@@ -11,46 +11,39 @@ 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';
 
-  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 (
+      <SwapDefault
+        from={swappableTokens}
+        to={swappableTokens}
+      />
+    );
+  }
+`;
 
 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() {