Connect React SDK
ConnectButton
A fully featured wallet connection component that allows to:
Connect to 500+ external wallets
Connect with email, phone, passkey or socials
Convert any wallet to a ERC4337 smart wallet for gasless transactions
Sign in with ethereum (Auth)
Once connected, the component allows to:
Resolve ENS names and avatars
Manage multiple connected wallets
Send and receive native tokens and ERC20 tokens
View ERC20 tokens and NFTs
Onramp, bridge and swap tokens
Switch chains
Connect to another app with WalletConnect
View all available config options
By passing the accountAbstraction
prop, ALL connected wallets will be converted to smart accounts.
And by setting sponsorGas
to true
, all transactions done with those smart accounts will be sponsored.
Note that this prop doesn't affect ecosystem wallets. Ecosystem wallets will only be converted to smart accounts if the ecosystem owner has enabled account abstraction.
For more granular control, you can also pass a custom theme object:
View all available themes properties
Some elements in this component have classes with a tw-
prefix.
You can target these classes in your own CSS stylesheet to override their styles.
In some cases, you may need to use the !important
flag for the override to take effect. Do not use on auto-generated class names, as they may change between builds.
View all available auth helper functions
These tokens and NFTs will be shown in the modal when the user clicks "View Assets", as well as the send token screen.
When you click on "View Assets", by default the "Tokens" tab is shown first. If you want to show the "NFTs" tab first, change the order of the asset tabs to: ["nft", "token"] Note: If an empty array is passed, the [View Funds] button will be hidden