Install OnchainKit using Astro
Install Astro
Install React
Install OnchainKit
@coinbase/onchainkit
package.Get A Client API Key
.env
file in your project’s root directory..env
file:Add Providers
providers.tsx
file. Add OnchainKitProvider
with your desired config.Under the hood, OnchainKit will create our recommended Wagmi and QueryClient
providers. If you wish to customize these providers, check out Custom
Supplemental Providers.Wrap your OnchainKit components with <AppProviders />
<AppProviders />
component.There are two options for this:<ReactIsland />
that contains all OnchainKit components.Add OnchainKit Components to your App
.astro
files.For example, if you created a ReactIsland, you can add it to your
src/pages/index.astro
file:client:only="react"
directive to your OnchainKit component,
as this is required for Astro to render React components.Import OnchainKit Styles
Layout.astro
file:Identity
– Show Basenames, avatars, badges, and addresses.Wallet
– Create or connect wallets with Connect Wallet.Transaction
– Handle transactions using EOAs or Smart Wallets.Checkout
– Integrate USDC checkout flows with ease.Fund
– Create a funding flow to onboard users.Tokens
– Search and display tokens with various components.Swap
– Enable token swaps in your app.Mint
– View and Mint NFTs in your app.