OnchainKit
@OnchainKit
Followers
2,316
Following
21
Media
64
Statuses
220
A kit to make building onchain easy for everyone. Created by @base .
Onchain
Joined June 2024
Don't wanna be here?
Send us removal request.
Explore trending content on Musk Viewer
Georgia
• 349198 Tweets
Texas
• 283706 Tweets
Yankees
• 240299 Tweets
Never Trump
• 161662 Tweets
Arnold Palmer
• 137238 Tweets
Presiden
• 100902 Tweets
World Series
• 91818 Tweets
WANG YIBO IN THE GT FINALS
• 67199 Tweets
Juan Soto
• 61803 Tweets
期日前投票
• 61213 Tweets
CHENLE VICTORIOUS FIRST THROW
• 54629 Tweets
Stanton
• 44933 Tweets
GALA EN EL AUDITORIO
• 40178 Tweets
#DOMELIVE_Atlantis
• 33464 Tweets
Kirby
• 29215 Tweets
Rayados
• 25885 Tweets
#菊花賞
• 23703 Tweets
ZETA
• 23658 Tweets
#刀剣乱舞ONLINEもうすぐ十周年
• 22068 Tweets
#かぼちゃ大作戦シルエットクイズ
• 22021 Tweets
Ewers
• 19277 Tweets
Tigres
• 18822 Tweets
gerard
• 17564 Tweets
ダノンデサイル
• 16872 Tweets
アーバンシック
• 13840 Tweets
ねこあつめ2
• 11378 Tweets
コスモキュランダ
• 10216 Tweets
Introducing the Fund Component 💸
Easily fund wallets via debit cards, bank accounts, or a
@coinbase
account.
Bring user funds onchain in minutes — without them leaving your app.
27
46
241
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:
7
21
148
We launched an hour ago, and the integration is already live.
If this is not based, idk what is.
@jessepollak
@OnchainKit
Swap is now live on our website! Feels good to be based, thanks guys 💙
8
13
87
12
17
112
Introducing our Upgraded Swap Component 💫
v0.33.1
+ Support for low liquidity tokens on
@base
+ Configurable max slippage
+ USD values for tokens
+ One-click swap with atomic batching
+ App interface fee
+ Gasless swaps
Start now:
12
19
111
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
7
21
94
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.
11
15
84
Onchainkit on a billboard!
Today we made our first stop in NYC to help onboard users to
@base
with a billboard using the
@onchainkit
!
The QR code takes you to our website where you can buy our token through the
@coinbase
smart wallet in the matter of seconds.
This is just the beginning! Stay based 💙
28
86
336
5
16
79
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.
6
4
56
We want to power your community.
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. ⬇️
29
43
119
5
8
47
Introducing Defaults 🍬
`v0.33.4`
We've added default implementations of our most popular components to make them even more lightweight.
See the side-by-side comparison.
Left → Default Swap Component
Right → Full Swap Component
Start building:
6
7
46
Building with
@onchainkit
is about getting 1% better everyday.
Well, sometimes much better.
<Transaction /> live on
4
6
42
Every community should get the token directly onsite, powered by smart wallet & swap component.
You can buy $KEYCAT DIRECTLY ON THE SITE using the Coinbase smart wallet
@OnchainKit
@WilsonCusack
thanks for making this possible!
3
2
27
2
6
39
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:
5
12
31
New update: EIP-5792 support ✨
`v0.31.4`
OnchainKit can now dynamically adapt its behavior based on the connected wallet's capabilities.
If we detect your users have a smart wallet, we can automatically enable:
+ Atomic batch transactions
+ Auxiliary funds
+ Paymaster
2
2
34
Integrate Basename into your app to get a fresh upgrade 🌿✨
🟣 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. 🏋️♀️🏋️♂️
28
10
43
5
9
31
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
5
9
31
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.
5
5
31
OnchainKit now supports Twoslash 🥷🏻
Enjoy better inline type information and improved DevX for everyone using our toolkit.
No more guessing about types or jumping between files.
3
4
24
Swap component in the wild 👀
Amazing demo by
@0xRishi
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
7
6
34
3
3
21
Proud to be powering a part of the ColorPunks experience by
@mykcryptodev
.
Now minted out ⚡️⚡️⚡️
1
3
20
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.
5
1
17
You can now copy our code blocks directly from our docs site.
Get start now:
2
5
18
PSA: the component works with both EOA and Smart Wallets :~)
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:
7
21
148
3
2
16
Our get started page also got a refresh:
What you doing this weekend?
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
7
21
94
0
1
12
We're proudly powering Drakula's swap with our component. 💫
It's October, let's kickstart
@base
season together 🔵
Introducing Drakula: watch videos, get the alpha, trade Base tokens
Live today on the App Store, download at
107
101
428
1
2
14
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.
1
0
14
1. Drop in <SwapComponents />
2. Connect smart wallet ()
3. Swap
TADA ✨ It really is that simple.
1
1
14
Very based
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!
5
8
30
1
1
13
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.
1
0
12
As always, our design is open source.
⮑
Fork & build your own.
1
0
12
The
@OnchainKit
team ensures I never miss a test day. 🏋️ 🥇 🤸♀️
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.
8
2
39
0
0
12
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
1
0
11
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.
1
0
11
easter egg for the passionate 🐰
1
0
11
Get your morning coffee ☕️ powered by
@OnchainKit
Built from scratch with
@OnchainKit
in just a couple of minutes. Also, the integration with
#basenames
is great and straightforward.
Now, time to get back to work and prepare the minting dApp for these awesome Fever Maniacs that you can already see on my
9
4
33
2
0
11
Bootstrap your consumer app with a portal social profile with Basename. 🪪
Use the `getName` utils from
@OnchainKit
.
The best part of building on-chain is solving the cold start problem of onboarding new users with Basename Profile.
Access the user's X profile, GitHub, website, and more with just one click.
Built with
@onchainkit
.
Try it here:
18
34
133
3
2
11
Also... bonus announcement:
All of our components are now both dark 🌙 / light ☀️ mode compatible.
0
0
9
+ Basename integration +
Basename just launched today. 🎉
We're the easiest way to integrate Basename in your application.
Simply add: <WalletDropdownBasename />
1
1
10
✨ Link to repo:
🍽️ Served it on a plate for you. Fork it now.
1
0
9
We've got Wallet.
Integrate the latest Smart Wallet in your app with our built-out, fully customizable button.
1
0
10
We love to hear feedback from our community.
You can submit what you'd like to see next on Github:
0
0
10
If you have more feedback and ideas around our developer experience, submit an issue to our Github:
0
1
10
Our favorite onchain experience just got a new Swap component ✨
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
26
26
59
2
0
9
so fast, so smooth 🧈
0
1
9
And so much more to come. 🧑🍳
You can submit what you'd like to see next on Github:
0
0
9
We've got Token.
Build your own wallet interface with all the data needed fetched for you.
1
0
7
+ 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.
1
0
7
We're always looking for community feedback + contributions.
Submit your ideas/suggestions/bug reports here:
We read every one of them! 🤓
0
0
8
We also made a tutorial on how to integrate easily:
1
1
8
We've got Swap.
Onboard your users to your community token in-app without ever needing to leave the page.
2
0
8
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:
2
1
8
+ Dynamic mobile UI +
We apply automatic reformatting of the wallet dropdown so that the experience is seamless on both desktop and mobile.
1
0
7
We've got Identity.
Render ENS and wallet balance in a breeze.
1
0
7
Upgrade your app now with
@OnchainKit
✨
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!
4
7
39
0
0
7
You can now have these experiences out of the box!
As always, we welcome community contributors from the community to make us better:
0
0
7
Our transaction button makes is super easy to plug in NFT contracts such as
@zora
's open mints.
1
0
6
Recommend products based on wallet verified region, powered by
@Onchainkit
❤️
🔆 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
2
0
11
0
0
6
+ 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.
1
0
6
As always, our design is open source
Join our Figma community of 300+ designers:
Fork & make it yours
1
0
6
You can also use the <Fund /> component via the <Wallet /> component via the dropdown.
1
0
7
Max slippage configurability
Take control of your trades with our new slippage configuration options.
We've added intuitive controls so users can set their preferred slippage tolerance, ensuring trades execute according to their risk preferences.
1
0
6
1
0
5
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.
1
0
6
Key props:
+ text={"buy"} - button text
+ hideIcon={true} - toggle icon visibility
+ hideText={true} - toggle text visibility
+ openIn={"tab"} - opens funding screen in new tab/pop-up
+ fundingUrl={onrampBuyUrl} - customize onramp URL
1
0
5
If you have more feedback and ideas around our developer experience, submit an issue to our Github:
0
2
5
0
0
5
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.
1
0
4
We're always looking for feedback + contributors :)
Submit your PR and join the ride:
0
0
4
Get onramp capabilities in one drop-in component.
Connecting a Coinbase Smart Wallet allows users to buy or receive crypto with fiat and use
@coinbase
balance via Magic Spend.
Connecting any other EOA wallets enable users to access Coinbase Onramp.
1
0
5
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:
0
1
5
Here is a side-by-side view of our Transaction component.
Left → Default Transaction Component
Right → Full Transaction Component
1
1
5
@baseworkshops
@CryptoStatuette
@base
@baseafricaa
@wbnns
@kokocodes
@DefiDevrel
@BaseUnn
@CoinbaseDev
@coinbase
Love this so much! Open a PR in GitHub with suggestions + feature requests :)
2
2
5
To customize the styling of all components, configure your `tailwind.config.ts` file. 🎨
1
0
4
As always, every OnchainKit component comes with an open-source design file:
1
0
4
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
1
0
4
One-click swap with transaction batching
From three clicks to one.
Get the best of AA with atomic batching.
1
0
4
You can try it live:
Github:
1
0
4
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.
1
0
4
We're always looking for community feedback + contributions.
Submit your ideas/suggestions/bug reports here:
We read every one of them!
0
0
4
@DruxAMB
@jessepollak
@CryptoStatuette
@base
@roundswtf
@luckywemo
@Kc_Pele
@DefiPrincess20
@baseworkshops
@The3rdinternet
Thank you for ur service 🫡
1
0
4
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.
1
0
4
You can still customize functionality by passing props to the Default component.
For instance, you can add event handlers, enable gas sponsorship, and apply different CSS classes directly to <SwapDefault />.
1
0
4
To customize specific subcomponents, you can use our initial subcomponents structure for more granular control. 🛠️
Just like playing with lego blocks 🧱 ✨
1
1
4
Tokens in USD values
No more wrangling of price APIs.
We now display token values in USD. Give users a clear picture of their trades at a glance, making informed decisions easier than ever.
1
0
4
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.
1
0
4
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.
1
0
4
We're here to increase the total addressable market of builders.
FYI, I'm not a software engineer but I do code in academia with MATLAB and it was super easy to implement the
@OnchainKit
Fund component to
@basedtangcat
's website. The next component I would like to see is an asset bridge!
3
2
11
2
3
18
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]
2
0
4
1
0
4