One button, any transaction – powered by
@base
.
Introducing new component: Transaction
+ Gasless, 4337-compatible transactions
+ Real-time status updates
+ Smart gas estimation
+ Toast notifications
+ Fully customizable UI
Get started:
Our landing page just got an upgrade 💫
We're not stopping until we become the best toolkit to build apps onchain.
Get started now:
npm install @ coinbase/onchainkit
App Template is the most requested features by developers.
There you have it:
- Onchain SSO (sign up/log in)
- Smart Wallet + RainbowKit integration
- Gasless mints powered by 4337
- Paymaster integration
All powered by
@OnchainKit
components.
Our Wallet component just got some fresh upgrades ✨
+ Dynamic mobile UI
+ Basename integration
+ Wallet funding options
+ Wallet aggregator integration
Step by step, we want to become the default way to integrate onchain SSO in your app.
Check out this amazing build from Tina
@fkpxls
for the Mochi community! 🐱 It showcases the power of
@OnchainKit
's new app and swap component and will make getting involved with MOCHI easier than ever before.
Working on getting this implemented ASAP 💙 Very based. ⬇️
New component drop: Wallets by
@Onchainkit
Embed beautiful log-in/sign-up experience for your app.
+ Smart Wallet creation and connection in seconds
+ Built-in ENS support
+ Configurable dropdown menu
+ Easy Paymaster integration
Get started:
🟣 Excited to announce that Basenames are now integrated into the Fit Club app!
Thanks to
@OnchainKit
for making it smooth and easy! 💜
More updates on the way, stay fit. 🏋️♀️🏋️♂️
Introducing new component: Swap by
@Onchainkit
Embed fully-functional swap functionality in your application in 15 minutes.
+ Built-in backend integration via
@CoinbaseDev
+ Flexible styling and configurations
+ Smart Wallet compatible
Introducing Playground 🛝 ✨
Playground is where you can experiment with features that are still under development.
We open sourced it to showcase how we battle test our components.
continued exploring onchain development this weekend
this time hacking on
@base
with
@Onchainkit
☀️
the
@Onchainkit
swap component really is that easy to drop in
→ made 🔵 as a place to view/trade the base ecosystem list from
@CoinMarketCap
Can't believe it's been a week since we went live with TokenKit.
TokenKit enables you to create magical user experiences with Token components and utilities.
Like building your own wallet app in minutes.
One button, any transaction – powered by
@base
.
Introducing new component: Transaction
+ Gasless, 4337-compatible transactions
+ Real-time status updates
+ Smart gas estimation
+ Toast notifications
+ Fully customizable UI
Get started:
Our landing page just got an upgrade 💫
We're not stopping until we become the best toolkit to build apps onchain.
Get started now:
npm install @ coinbase/onchainkit
Normally, creating onchain transactions involves many moving parts:
+ Handling wallet interactions
+ Managing gas fees
+ Tracking transaction status
+ Error handling and success callbacks
We prepared these common patterns for you so you get them off the shelf.
Onchain ticketing is now available for
@farhackxyz
Kampung! We were able to make use of
@OnchainKit
to build ticketing where attendees pay using USDC on Base, our first onchain feature :D
There are only 70 priority tickets left and the event is almost here, get your tickets!
We remove as much complexity as possible for you:
1. Plug in your smart contract address
2. Set your function name
The <Transaction /> component takes in a wallet address and contract details, then streamlining the entire transaction process.
This week, we focused on enhancing the internals of
@OnchainKit
, improving its architecture and increasing test coverage.
And we just hit 100% unit test coverage. 🔵 🌊
Testing not only catches bugs but also promotes writing simpler, more maintainable (based) code.
One of our favorite features is <TransactionStatusToast /> 🍞
The toast displays different states with appropriate icons and actions, allowing easy tracking of transaction progress and to take relevant next steps.
What are the user cases?
Batch any onchain actions in your application by embedding this button and customize the button text, the smart contract address, and the function calls.
+ mint a new NFT
+ Stake some ETH
+ Register an ENS
+ Basename integration +
Basename just launched today. 🎉
We're the easiest way to integrate Basename in your application.
Simply add: <WalletDropdownBasename />
I was on
@wbnns
's office hours for
@base
earlier listening and heard him talking about Onchain Kit by
@CoinbaseDev
.
The new Swap component sounded really useful - so I got to it, an hour later, we have this new interface to buy our token from within the game.
These components
+ Wallet funding +
Fund your users wallets in seconds by helping them link to their Coinbase accounts.
Unlock millions of funded Coinbase retail users in your application.
🔆 OᑎᑕᕼᗩIᑎ ᔑᑌᗰᗰEᖇ 🔆
@coinbase
onchain verifications support using
@Onchainkit
by
@CoinbaseDev
Recommend your
@Shopify
store products based on the user's wallet verified country of residence on Farcaster!
Check it out on
Each component can be used independently or composed as needed.
Most elements accept props for easy customization without modifying core components.
Additional components or features can be easily slotted into the existing hierarchy.
+ Aggregator integration +
Want to work with other wallets?
You can expand the wallet connection options by using the withWalletAggregator prop in the <ConnectWallet /> component.
This will present users with a list of recommended and other wallets to choose from.
Pixotchi just got even more based! 🌱🔵
Your
@base
name is now displayed in your Pixotchi account!
Own a basename? It'll show up automatically.
Don't have one yet? Grab yours at !
Big thanks to
@OnchainKit
for the seamless integration!
Just released an update to
@onchainkit
`0.31.2`
Lifecycle status 🚴♀️
+ Improved state management
+ Better error handling
+ Enhanced user feedback
+ Easier debugging
+ More responsive UI
Read our guide here:
It's a QA and testing framework to battle test our components in different environments:
+ Smart Wallet + EOA
+ Base + Base Sepolia
+ Paymaster enabled / disabled
And we're adding more to ensure that our components can work in a diverse range of environments.
This is just the beginning. We have tons of of new delights coming in the following days. 🍭 ✨
We're always welcoming community contributors from the community to make us better:
The component includes two instances of the SwapAmountInput component, enabling users to specify the amount of tokens to sell and buy.
Additionally, the component features a "Swap" button for preparing the transaction.
Build a membership portal to get community tokens with USDC.
Or an ATM Frame to redeem community tokens that you receive from
@warpcast_
into ETH/USDC.
They can do it all in your app.
More seamless UX. More conversation.
Wallet is the first impression you make with your user and drives activation, conversion, and retention. 🪄
~ MAKE ~ IT ~ MAGICAL ~
Our design is inspired by
@matchaxyz
, one of our fav implementation in the wild.
What can you build with TokenKit?
TokenKit contains the UI components and utilities to interact with live token data.
Some ideas to get you started:
+ a custom wallet app
+ A token-based social app
+ A consumer-facing DeFi app
+ A token-based voting system
+ [INSERT YOUR OWN]
Every component comes with open source design files that you can share with your team:
+
Join our community of designers to create and refine our components.
We support different types of configurations:
+ Allow swapping between selected token pairs
+ Only allow swapping between a selected token pair
+ Remove <SwapToggleButton /> to make the swap unidirectional
TokenKit is just one of the many Kits we're cooking 🧑🍳
The Kits are great on their own, and much more powerful together.
The community is growing. We're always looking for contributors of code, design, ideas, AND vibes.
For <Swap /> component:
- Monitor `amountChange` for real-time input tracking
- Track `transactionPending` and `transactionApproved` for user feedback
- Differentiate ERC20 and Permit2 in transactionApproved
- Access transaction receipt data from success status
For <Transaction /> component:
- Use `transactionIdle` to determine user readiness
- Monitor `transactionPending` for real-time network updates
- Access multiple transaction receipts in success status for complex operations
Lifecycle status is the drummer of your components, maintaining a consistent tempo and rhythm for your components and the data they fetch. 🥁
It influences how the components work together and how you, as the developer, can tap into the rhythm and customize the behavior of your
The new `onStatus` prop lets you track Lifecycle Status and customize component behavior, including:
+ init
+ success
+ error
+ amountChange
+ transactionPending
+ transactionApproved
And more!
Let’s keep the onchain vibes going!! We launched TokenKit in our open source Figma in collaboration with
@spicypaprika_
, newest designer on Base working on
@Onchainkit
! So excited to have you use this for your token experiences. 🫶
Onwards and upwards 🚀
Want to highlight
@OnchainKit
's amazing design system
It's not just about the UI, but the open source design library considers the common logic, states, and edge cases for your product
Our goal is make it as easy as possible to create top-tier onchain apps.
Every Kit is open source and forkable.
Everyone should be able to build an app with our Kits in under 30 minutes.
👩🏻💻 Code:
🖌️ Figma: