From 9d1f8468496be0ce6a7b05dfca2079cc758b65fb Mon Sep 17 00:00:00 2001 From: Brendan from DeFi Date: Fri, 1 Nov 2024 15:35:14 -0700 Subject: [PATCH] feat: add installation steps for popular frameworks (#1546) --- site/docs/components/InstallationOptions.tsx | 52 ++++ site/docs/components/StartBuilding.tsx | 191 +++++++++++++ site/docs/components/svg/astroSvg.tsx | 15 ++ site/docs/components/svg/nextjsSvg.tsx | 63 +++++ site/docs/components/svg/remixSvg.tsx | 17 ++ site/docs/components/svg/viteSvg.tsx | 17 ++ site/docs/pages/getting-started.mdx | 231 ++-------------- site/docs/pages/installation.mdx | 12 + site/docs/pages/installation/astro.mdx | 267 +++++++++++++++++++ site/docs/pages/installation/nextjs.mdx | 228 ++++++++++++++++ site/docs/pages/installation/remix.mdx | 257 ++++++++++++++++++ site/docs/pages/installation/vite.mdx | 220 +++++++++++++++ site/sidebar.ts | 9 + 13 files changed, 1363 insertions(+), 216 deletions(-) create mode 100644 site/docs/components/InstallationOptions.tsx create mode 100644 site/docs/components/StartBuilding.tsx create mode 100644 site/docs/components/svg/astroSvg.tsx create mode 100644 site/docs/components/svg/nextjsSvg.tsx create mode 100644 site/docs/components/svg/remixSvg.tsx create mode 100644 site/docs/components/svg/viteSvg.tsx create mode 100644 site/docs/pages/installation.mdx create mode 100644 site/docs/pages/installation/astro.mdx create mode 100644 site/docs/pages/installation/nextjs.mdx create mode 100644 site/docs/pages/installation/remix.mdx create mode 100644 site/docs/pages/installation/vite.mdx diff --git a/site/docs/components/InstallationOptions.tsx b/site/docs/components/InstallationOptions.tsx new file mode 100644 index 0000000000..ad6add9796 --- /dev/null +++ b/site/docs/components/InstallationOptions.tsx @@ -0,0 +1,52 @@ +import { Link } from 'react-router-dom'; +import AstroSvg from './svg/astroSvg.tsx'; +import NextjsSvg from './svg/nextjsSvg.tsx'; +import RemixSvg from './svg/remixSvg.tsx'; +import ViteIcon from './svg/viteSvg.tsx'; + +export default function InstallationOptions() { + return ( +
+ } + /> + } + /> + } + /> + } + /> +
+ ); +} + +type FrameworkProps = { + name: string; + href: string; + icon?: React.ReactNode; +}; + +function FrameworkCard({ name, href, icon }: FrameworkProps) { + return ( + +
+
{icon}
+ {name} +
+ + ); +} diff --git a/site/docs/components/StartBuilding.tsx b/site/docs/components/StartBuilding.tsx new file mode 100644 index 0000000000..fbed3141bd --- /dev/null +++ b/site/docs/components/StartBuilding.tsx @@ -0,0 +1,191 @@ +export default function StartBuilding() { + return ( + <> +

Start building!

+
Explore our ready-to-use onchain components:
+ + + ); +} diff --git a/site/docs/components/svg/astroSvg.tsx b/site/docs/components/svg/astroSvg.tsx new file mode 100644 index 0000000000..e1b7015f99 --- /dev/null +++ b/site/docs/components/svg/astroSvg.tsx @@ -0,0 +1,15 @@ +const AstroSvg = () => ( + + Astro + + + +); + +export default AstroSvg; diff --git a/site/docs/components/svg/nextjsSvg.tsx b/site/docs/components/svg/nextjsSvg.tsx new file mode 100644 index 0000000000..ce9e74c76e --- /dev/null +++ b/site/docs/components/svg/nextjsSvg.tsx @@ -0,0 +1,63 @@ +const NextjsSvg = () => ( + + Next.js + + + + + + + + + + + + + + + + + + + +); + +export default NextjsSvg; diff --git a/site/docs/components/svg/remixSvg.tsx b/site/docs/components/svg/remixSvg.tsx new file mode 100644 index 0000000000..60e35b4739 --- /dev/null +++ b/site/docs/components/svg/remixSvg.tsx @@ -0,0 +1,17 @@ +const RemixSvg = () => ( + + Remix + + + +); + +export default RemixSvg; diff --git a/site/docs/components/svg/viteSvg.tsx b/site/docs/components/svg/viteSvg.tsx new file mode 100644 index 0000000000..15a6cb2b57 --- /dev/null +++ b/site/docs/components/svg/viteSvg.tsx @@ -0,0 +1,17 @@ +const ViteIcon = () => ( + + Vite + + + +); + +export default ViteIcon; diff --git a/site/docs/pages/getting-started.mdx b/site/docs/pages/getting-started.mdx index f0ccdcf85f..a8ba2789a6 100644 --- a/site/docs/pages/getting-started.mdx +++ b/site/docs/pages/getting-started.mdx @@ -1,10 +1,14 @@ +import StartBuilding from '../components/StartBuilding'; +import InstallationOptions from '../components/InstallationOptions'; + # Getting Started -OnchainKit is your go-to SDK for building beautiful onchain applications. +OnchainKit is your go-to SDK for building beautiful onchain applications. Anyone can build an onchain app in 15 minutes with OnchainKit. -## Why OnchainKit? +## Why OnchainKit? + OnchainKit streamlines onchain development by providing a comprehensive toolkit that combines powerful features with developer-friendly design: - **Ergonomic design:** Our full-stack kits simplify complex onchain interactions into intuitive components and APIs that work seamlessly together. @@ -13,11 +17,13 @@ OnchainKit streamlines onchain development by providing a comprehensive toolkit - **Framework agnostic:** OnchainKit is framework agnostic, meaning it can be used with any framework that supports React. - **Supercharged by Base:** Leverage Base's cutting-edge protocol features and vast ecosystem through our deeply integrated tooling and vibrant developer community. - ## Automatic Installation -OnchainKit Template + height="364" +/> We recommend starting a new OnchainKit app using `create onchain`, which sets up everything automatically for you. To create a project, run: @@ -28,223 +34,16 @@ npm create onchain@latest After the prompts, `create onchain` will create a folder with your project name and install the required dependencies. You can also checkout our pre-built templates: + - [Onchain Commerce](https://onchain-commerce-template.vercel.app/) - [NFT minting](https://github.com/coinbase/onchain-app-template) - [Funding flow](https://github.com/fakepixels/fund-component) - [Social profile](https://github.com/fakepixels/ock-identity) ## Manual Installation -Add OnchainKit to your existing project manually. - -::::steps - -## Install OnchainKit - -Install OnchainKit in your project. - -:::code-group - -```bash [npm] -npm install @coinbase/onchainkit -``` - -```bash [yarn] -yarn add @coinbase/onchainkit -``` - -```bash [pnpm] -pnpm add @coinbase/onchainkit -``` - -```bash [bun] -bun add @coinbase/onchainkit -``` - -::: - -## Get Your Client API Key - -Get your [Client API Key](https://portal.cdp.coinbase.com/projects/project-id/api-keys/client-key) from Coinbase Developer Platform. - -OnchainKit copy Client API Key -Create a `.env` file in your project's root directory. - OnchainKit define Client API Key - -Add your Client API Key to the `.env` file: - -```tsx [.env] -NEXT_PUBLIC_ONCHAINKIT_API_KEY=YOUR_CLIENT_API_KEY -``` - -## Add Providers - -Create a `providers.tsx` file. Add `OnchainKitProvider` as a child of `WagmiProvider` and `QueryClientProvider`. - -Inside the `WagmiProvider`, wrap your app in a TanStack Query React Context Provider, e.g. `QueryClientProvider`, and pass a new `QueryClient` instance to the `client` property. - -Additionally, add Base as a supported chain in the Wagmi configuration file `wagmi.ts`. - -:::code-group - -```tsx twoslash [providers.tsx] -// @noErrors: 2307 2580 - cannot find 'process', cannot find './wagmi' -import { OnchainKitProvider } from '@coinbase/onchainkit'; // [!code ++] -import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; -import { base } from 'wagmi/chains'; // [!code ++] -import { type ReactNode, useState } from 'react'; -import { type State, WagmiProvider } from 'wagmi'; - -import { getConfig } from '@/wagmi'; - -export function Providers(props: { - children: ReactNode; - initialState?: State; -}) { - const [config] = useState(() => getConfig()); - const [queryClient] = useState(() => new QueryClient()); - - return ( - - - // [!code ++] - {props.children} - // [!code ++] - - - ); -} -``` - -```tsx twoslash [wagmi.ts] -import { http, cookieStorage, createConfig, createStorage } from 'wagmi'; -import { base } from 'wagmi/chains'; // [!code ++] -import { coinbaseWallet } from 'wagmi/connectors'; - -export function getConfig() { - return createConfig({ - chains: [base], // [!code ++] - connectors: [ - coinbaseWallet({ - appName: "OnchainKit", - preference: 'smartWalletOnly', - version: '4', - }), - ], - storage: createStorage({ - storage: cookieStorage, - }), - ssr: true, - transports: { - [base.id]: http(), // [!code ++] - }, - }); -} - -declare module 'wagmi' { - interface Register { - config: ReturnType; - } -} -``` -::: - -## Wrap your app with `` - -After the setup, wrap your app with the above `` component. - -```javascript -import './globals.css'; -import { Providers } from './providers'; // [!code ++] - -export default function RootLayout({ - children, -}: Readonly<{ - children: React.ReactNode; -}>) { - return ( - - - {children} // [!code ++] - - - ); -} -``` - -## Add Styles - -OnchainKit components come with pre-configured styles. To include these styles in your project, add the following import statement at the top of this file: - -```javascript -import '@coinbase/onchainkit/styles.css'; -``` - -For example, if you're using Next.js with the app router, your `app/layout.tsx` might look like this: - -```tsx [layout.tsx] -import '@coinbase/onchainkit/styles.css'; // [!code ++] -import './globals.css'; -import type { Metadata } from 'next'; -import { Inter } from 'next/font/google'; -import { headers } from 'next/headers'; -import { type ReactNode } from 'react'; -import { cookieToInitialState } from 'wagmi'; - -import { getConfig } from '../wagmi'; -import { Providers } from './providers'; - -const inter = Inter({ subsets: ['latin'] }); - -export const metadata: Metadata = { - title: 'Create Wagmi', - description: 'Generated by create-wagmi', -}; - -export default function RootLayout(props: { children: ReactNode }) { - const initialState = cookieToInitialState( - getConfig(), - headers().get('cookie') - ); - return ( - - - {props.children} - - - ); -} - -``` - -This ensures that the OnchainKit styles are loaded and applied to your entire application. - -- For Tailwind CSS users, check out our [Tailwind Integration Guide](/guides/tailwind). - -- Update the appearance of components by using our built-in themes or crafting your own custom theme. -Explore the possibilities in our [Theming Guide](/guides/themes). - -:::: - -## Start building! +Add OnchainKit to your existing project manually. -Explore our ready-to-use onchain components: + -- [**`Identity`**](/identity/identity) - Show [Basename](/identity/name), [avatars](/identity/avatar), [badges](/identity/badge), and [addresses](/identity/address). -- [**`Wallet`**](/wallet/wallet) - Create or connect wallets with [Connect Wallet](/wallet/wallet). -- [**`Transaction`**](/transaction/transaction) - Handle [transactions](/transaction/transaction) using EOAs or Smart Wallets. -- [**`Checkout`**](/checkout/checkout) - Integrate USDC [checkout](/checkout/checkout) flows with ease. -- [**`Fund`**](/fund/fund-button) - Create a [funding flow](/fund/fund-button) to onboard users. -- [**`Tokens`**](/token/token-chip) - Search and display [tokens](/token/token-chip) with various components. -- [**`Swap`**](/swap/swap) - Enable [token swaps](/swap/swap) in your app. -- [**`Frame`**](/frame/frame-metadata) - Build and test [Farcaster frames](/frame/frame-metadata). + diff --git a/site/docs/pages/installation.mdx b/site/docs/pages/installation.mdx new file mode 100644 index 0000000000..201eefd50e --- /dev/null +++ b/site/docs/pages/installation.mdx @@ -0,0 +1,12 @@ +--- +title: Installation · OnchainKit +description: Install OnchainKit using the top React frameworks +--- + +import InstallationOptions from '../components/InstallationOptions'; + +# Installation + +How to install OnchainKit using the top React frameworks. + + diff --git a/site/docs/pages/installation/astro.mdx b/site/docs/pages/installation/astro.mdx new file mode 100644 index 0000000000..d77d74d791 --- /dev/null +++ b/site/docs/pages/installation/astro.mdx @@ -0,0 +1,267 @@ +--- +title: Astro Installation · OnchainKit +description: Install OnchainKit using Astro +--- + +import StartBuilding from '../../components/StartBuilding'; + +# Astro Installation + +Install and configure OnchainKit with Astro. +If you are integrating OnchainKit into an existing project, +skip to the [OnchainKit installation](#install-onchainkit). + +::::steps + +## Install Astro + +Create a new Astro project by using the Astro CLI. +More information about Astro can be found [here](https://docs.astro.build/en/install-and-setup/#start-a-new-project). + +:::code-group + +```bash [npm] +npm create astro@latest +``` + +```bash [yarn] +yarn create astro +``` + +```bash [pnpm] +pnpm create astro@latest +``` + +::: + +## Install React + +Astro does not come with React by default, so if you are not already using React +in your application, you will need to install it. + +```bash +npx astro add react +``` + +## Install OnchainKit + +Add OnchainKit to your project by installing the `@coinbase/onchainkit` package. + +:::code-group + +```bash [npm] +npm install @coinbase/onchainkit +``` + +```bash [yarn] +yarn add @coinbase/onchainkit +``` + +```bash [pnpm] +pnpm add @coinbase/onchainkit +``` + +```bash [bun] +bun add @coinbase/onchainkit +``` + +::: + +## Get A Client API Key + +Get your [Client API Key](https://portal.cdp.coinbase.com/projects/project-id/api-keys/client-key) from Coinbase Developer Platform. + +OnchainKit copy Client API Key + +Create a `.env` file in your project's root directory. + +OnchainKit define Client API Key + +Add your Client API Key to the `.env` file: + +```dotenv [.env] +PUBLIC_ONCHAINKIT_API_KEY=YOUR_CLIENT_API_KEY +``` + +## Configure Providers + +In order to use OnchainKit, you need to wrap your app with three providers: + +1. `` +2. `` +3. `` + +To accomplish this, we recommend creating a `wagmi.ts` file +and an `AppProviders.tsx` file within the `src` directory. + +You must add `base` as a supported chain in the Wagmi configuration file `wagmi.ts`. +You can use `baseSepolia` for testing. + +:::code-group + +```tsx twoslash [wagmi.ts] +import { http, cookieStorage, createConfig, createStorage } from 'wagmi'; +import { base } from 'wagmi/chains'; // add baseSepolia for testing // [!code ++] +import { coinbaseWallet } from 'wagmi/connectors'; + +export function getConfig() { + return createConfig({ + chains: [base], // add baseSepolia for testing // [!code ++] + connectors: [ + coinbaseWallet({ + appName: 'OnchainKit', + preference: 'smartWalletOnly', + version: '4', + }), + ], + storage: createStorage({ + storage: cookieStorage, + }), + ssr: true, + transports: { + [base.id]: http(), // add baseSepolia for testing // [!code ++] + }, + }); +} + +declare module 'wagmi' { + interface Register { + config: ReturnType; + } +} +``` + +```tsx twoslash [providers.tsx] +// @noErrors: 2307 2580 2339 - cannot find 'process', cannot find './wagmi', cannot find 'import.meta' +import { OnchainKitProvider } from '@coinbase/onchainkit'; +import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; +import { base } from 'wagmi/chains'; // add baseSepolia for testing// [!code ++] +import { type ReactNode, useState } from 'react'; +import { type State, WagmiProvider } from 'wagmi'; + +import { getConfig } from '@/wagmi'; // your import path may vary // [!code ++] + +export function Providers(props: { + children: ReactNode; + initialState?: State; +}) { + const [config] = useState(() => getConfig()); + const [queryClient] = useState(() => new QueryClient()); + + return ( + + + + {props.children} + + + + ); +} +``` + +::: + +## Wrap your OnchainKit components with `` + +After configuring the providers in step 4, you will need to wrap your OnchainKit components +with the `` component. + +There are two options for this: + +1. Create a component, eg. `` that contains all OnchainKit components. +2. Wrap every OnchainKit component individually. + +:::code-group + +```tsx [ReactIsland] +import { AppProviders } from '../AppProviders'; + +export default function ReactIsland() { + return ( + + + + ); +} +``` + +```tsx [OnchainKit Wrappers] +import { AppProviders } from '../AppProviders'; +import { OnchainKitComponent } from '@coinbase/onchainkit'; + +export default function OnchainKitComponentWrapper() { + return ( + + + + ); +} +``` + +::: + +The advantage of ReactIsland is that you will only have a single provider at any time. +The drawback is that your OnchainKit components will all need to live in the same Island. + +The advantage of individal wrappers is that you can use OnchainKit components anywhere in your app. +The drawback is that you will have multiple providers if you use more than one OnchainKit component. + +## Add OnchainKit Components to your App + +You can add OnchainKit components to your app by using the component(s) you +created above into your `.astro` files. + +For example, if you created a ReactIsland, you can add it to your +`src/pages/index.astro` file: + +```astro [src/pages/index.astro] +--- +import Layout from '../layouts/Layout.astro'; +import ReactIsland from '../components/ReactIsland'; +--- + + +
+ ... + + ... +
+ +``` + +Don't forget to add the `client:only="react"` directive to your OnchainKit component, +as this is required for Astro to render React components. + +## Import OnchainKit Styles + +OnchainKit components come with pre-configured styles. +To include these styles in your project, add the following import +statement at the top of the `Layout.astro` file: + +```tsx +import '@coinbase/onchainkit/styles.css'; +``` + +This ensures that the OnchainKit styles are loaded and applied to your entire application. + +- For Tailwind CSS users, check out our [Tailwind Integration Guide](/guides/tailwind). + +- Update the appearance of components by using our built-in themes or crafting your own custom theme. + Explore the possibilities in our [Theming Guide](/guides/themes). + +:::: + + diff --git a/site/docs/pages/installation/nextjs.mdx b/site/docs/pages/installation/nextjs.mdx new file mode 100644 index 0000000000..166b8a5780 --- /dev/null +++ b/site/docs/pages/installation/nextjs.mdx @@ -0,0 +1,228 @@ +--- +title: Next.js Installation · OnchainKit +description: Install OnchainKit using Next.js +--- + +import StartBuilding from '../../components/StartBuilding'; + +# Next.js Installation + +Install and configure OnchainKit with Next.js. +If you are integrating OnchainKit into an existing project, +skip to the [OnchainKit installation](#install-onchainkit). + +::::steps + +## Install Next.js + +Create a new Next.js project by using the Next.js CLI. +More information about Next.js can be found [here](https://nextjs.org/docs/getting-started/installation). + + +```bash [npm] +npm create next-app@latest +``` + +During the setup process you will encounter multiple prompts. +Make sure you enable TypeScript, ESLint, and Tailwind CSS. + +## Install OnchainKit + +Install OnchainKit in your project. + +:::code-group + +```bash [npm] +npm install @coinbase/onchainkit +``` + +```bash [yarn] +yarn add @coinbase/onchainkit +``` + +```bash [pnpm] +pnpm add @coinbase/onchainkit +``` + +```bash [bun] +bun add @coinbase/onchainkit +``` + +::: + +## Get Your Client API Key + +Get your [Client API Key](https://portal.cdp.coinbase.com/projects/project-id/api-keys/client-key) from Coinbase Developer Platform. + +OnchainKit copy Client API Key + +Create a `.env` file in your project's root directory. + OnchainKit define Client API Key + +Add your Client API Key to the `.env` file: + +```tsx [.env] +NEXT_PUBLIC_ONCHAINKIT_API_KEY=YOUR_CLIENT_API_KEY +``` + +## Add Providers + +Create a `providers.tsx` file. Add `OnchainKitProvider` as a child of `WagmiProvider` and `QueryClientProvider`. + +Inside the `WagmiProvider`, wrap your app in a TanStack Query React Context Provider, e.g. `QueryClientProvider`, and pass a new `QueryClient` instance to the `client` property. + +Additionally, add Base as a supported chain in the Wagmi configuration file `wagmi.ts`. + +:::code-group + +```tsx twoslash [wagmi.ts] +import { http, cookieStorage, createConfig, createStorage } from 'wagmi'; +import { base } from 'wagmi/chains'; // add baseSepolia for testing // [!code ++] +import { coinbaseWallet } from 'wagmi/connectors'; + +export function getConfig() { + return createConfig({ + chains: [base], // add baseSepolia for testing// [!code ++] + connectors: [ + coinbaseWallet({ + appName: "OnchainKit", + preference: 'smartWalletOnly', + version: '4', + }), + ], + storage: createStorage({ + storage: cookieStorage, + }), + ssr: true, + transports: { + [base.id]: http(), // add baseSepolia for testing // [!code ++] + }, + }); +} + +declare module 'wagmi' { + interface Register { + config: ReturnType; + } +} +``` + +```tsx twoslash [providers.tsx] +// @noErrors: 2307 2580 2339 - cannot find 'process', cannot find './wagmi', cannot find 'import.meta' +import { OnchainKitProvider } from '@coinbase/onchainkit'; +import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; +import { base } from 'wagmi/chains'; // add baseSepolia for testing // [!code ++] +import { type ReactNode, useState } from 'react'; +import { type State, WagmiProvider } from 'wagmi'; + +import { getConfig } from '@/wagmi'; // your import path may vary // [!code ++] + +export function Providers(props: { + children: ReactNode; + initialState?: State; +}) { + const [config] = useState(() => getConfig()); + const [queryClient] = useState(() => new QueryClient()); + + return ( + + + + {props.children} + + + + ); +} +``` + +::: + +## Wrap your app with `` + +After the setup, wrap your app with the above `` component. + +```javascript +import './globals.css'; +import { Providers } from './providers'; // [!code ++] + +export default function RootLayout({ + children, +}: Readonly<{ + children: React.ReactNode; +}>) { + return ( + + + {children} // [!code ++] + + + ); +} +``` + +## Add Styles + +OnchainKit components come with pre-configured styles. To include these styles in your project, add the following import statement at the top of this file: + +```javascript +import '@coinbase/onchainkit/styles.css'; +``` + +For example, if you're using Next.js with the app router, your `app/layout.tsx` might look like this: + +```tsx [layout.tsx] +import '@coinbase/onchainkit/styles.css'; // [!code ++] +import './globals.css'; +import type { Metadata } from 'next'; +import { Inter } from 'next/font/google'; +import { headers } from 'next/headers'; +import { type ReactNode } from 'react'; +import { cookieToInitialState } from 'wagmi'; + +import { getConfig } from '../wagmi'; +import { Providers } from './providers'; + +const inter = Inter({ subsets: ['latin'] }); + +export const metadata: Metadata = { + title: 'Create Wagmi', + description: 'Generated by create-wagmi', +}; + +export default function RootLayout(props: { children: ReactNode }) { + const initialState = cookieToInitialState( + getConfig(), + headers().get('cookie') + ); + return ( + + + {props.children} + + + ); +} + +``` + +This ensures that the OnchainKit styles are loaded and applied to your entire application. + +- For Tailwind CSS users, check out our [Tailwind Integration Guide](/guides/tailwind). + +- Update the appearance of components by using our built-in themes or crafting your own custom theme. +Explore the possibilities in our [Theming Guide](/guides/themes). + +:::: + + diff --git a/site/docs/pages/installation/remix.mdx b/site/docs/pages/installation/remix.mdx new file mode 100644 index 0000000000..3c10be15f9 --- /dev/null +++ b/site/docs/pages/installation/remix.mdx @@ -0,0 +1,257 @@ +--- +title: Remix Installation · OnchainKit +description: Install OnchainKit using Remix +--- + +import StartBuilding from '../../components/StartBuilding'; + +# Remix Installation + +Install and configure OnchainKit with Remix. +If you are integrating OnchainKit into an existing project, +skip to the [OnchainKit installation](#install-onchainkit). + +::::steps + +## Install Remix + +Create a new Remix project by using the Remix CLI. +More information about Remix can be found [here](https://remix.run/docs/en/main/start/quickstart). + +```bash +npx create-remix@latest +``` + +## Install OnchainKit + +Add OnchainKit to your project by installing the `@coinbase/onchainkit` package. + +:::code-group + +```bash [npm] +npm install @coinbase/onchainkit +``` + +```bash [yarn] +yarn add @coinbase/onchainkit +``` + +```bash [pnpm] +pnpm add @coinbase/onchainkit +``` + +```bash [bun] +bun add @coinbase/onchainkit +``` + +::: + +## Get A Client API Key + +Get your [Client API Key](https://portal.cdp.coinbase.com/projects/project-id/api-keys/client-key) from Coinbase Developer Platform. + +OnchainKit copy Client API Key + +Create a `.env` file in your project's root directory. + +OnchainKit define Client API Key + +Add your Client API Key to the `.env` file: + +```dotenv [.env] +PUBLIC_ONCHAINKIT_API_KEY=YOUR_CLIENT_API_KEY +``` + +Update the `app/root.tsx` file to provide access to your Client API Key +through `window.ENV`: + +```tsx +declare global { + interface Window { + ENV: { + PUBLIC_ONCHAINKIT_API_KEY: string; // [!code ++] + }; + } +} + +export async function loader() { + return json({ + ENV: { + PUBLIC_ONCHAINKIT_API_KEY: process.env.PUBLIC_ONCHAINKIT_API_KEY, // [!code ++] + }, + }); +} +``` + +If this is the first env variable you've added to your project, you will need to +update the `Layout` component of `app/root.tsx` to make it available to your app: + +```tsx +export function Layout({ children }: { children: React.ReactNode }) { + const data = useLoaderData(); // [!code ++] + return ( + + + + + + + + + {children} + +