Add common financial features like token swaps and yield generating strategies to your app with pre-built React components from OnchainKit.
<Swap />
: Swap assets directly within your app.<Earn />
: Generate yield directly within your app.<FundCard />
: Fund their wallets with fiat (via USDC, Apple Pay, or debit card) without leaving your app.<Buy />
: Purchase tokens directly within your app.Swap
and Earn
components, your users don’t need to leave your app to execute these common actions. For users who lack onchain funds, the Fund
and Buy
components offer an integrated fiat-to-crypto onramp.
Swap
component lets users exchange one token for another directly in your application. It fetches live quotes, builds transactions, and executes swaps—abstracting the underlying complexity.
Lets add the Swap
component to your app.
Install and Configure OnchainKit
Import and Render the Swap Component
experimental.useAggregator
prop to true
.
Earn
component enables users to deposit assets into yield-generating vaults and withdraw them later—all within your app. The Earn
component currently supports Morpho vaults on Base.
Earn
component.useEarnContext
to access the component’s context values, EarnDeposit
and EarnDetails
DepositButton
to render custom deposit buttons<FundCard/>
and <Buy />
components, users need to have funds in their wallet. If user’s don’t have funds, they’ll need to onramp fiat or buy tokens in order to transact. We’ll explore two out-of-the-box solutions from OnchainKit below.
The Fund
component (via <FundCard />
) offers a complete fiat onramp experience, allowing users to add funds to their wallet directly in your app. It provides:
FundCard
component, you’ll need to provide a Client API Key in OnchainKitProvider
. You can get one following our Getting Started steps.FundCard
component and its features, check out the FundCard docs.
Buy
ComponentBuy
components provide a comprehensive interface for users to purchase Tokens.
The Buy
component supports token swaps from USDC and ETH by default with the option to provide an additional token of choice using the fromToken
prop. Users are able to purchase tokens using their Coinbase account, Apple Pay, or debit card.
projectId
to be set in the OnchainKitProvider
. You can find your projectId
on Coinbase Developer Platform.<Transaction/>
: Provides a high-level transaction interface for executing custom onchain transactions.
<TokenChip/>
: Offers utilities for token selection and display, ideal for building wallet-like interfaces.
<WalletIsland/>
: An advanced, draggable wallet widget that consolidates wallet management (QR code, buy options, swap, portfolio view) in one interface.
<Buy />
and <Swap/>
components, you can enable gasless transactions by setting the isSponsored
prop to true
.