Using Smart Wallet in React
Deploy an Account Factory
Choose the right smart wallet setup for your app. thirdweb offers the following three different kinds of smart wallets:
Read about the differences between the three smart wallet types here.
Create an API key
To use the smart wallet bundler and paymaster, you must create an API key and a billing account.
To create an API Key:
- Head to the settings page in the dashboard and click the API Keys tab.
- Click on Create API Key:
- Follow the steps to create your API key.
To use smart wallet infrastructure on mainnet you will also need to create an account and add a payment method.
Create an App
To use smart wallets in a React app you can either:
- Use npx thirdweb create command to create a new project with the dependencies already installed.
- Add the dependencies to an existing project using
npx thirdweb installor your favorite package manager.
In this guide, we'll create a new project. Open your terminal and run:
When prompted, select/input the following options:
- A name for the project
EVMas the blockchain
- Select your desired environment e.g.
TypeScriptas the language.
This will create a react project with all the dependencies and a simple connect wallet button.
Build your connection UI
Using Connect Wallet (prebuilt UI)
You can change the configuration based on your requirements, but for this demo, we will enable gasless transactions and use a EmbeddedWallet as the personal wallet.
Pass the configuration to the provider:
Now, import the
ConnectWalletcomponent from the React package and add it to your app:
Clicking on the connect button will show the following Modal which allows you to create or import a local wallet.
This is the personal wallet you are using to initialize the smart wallet. For local wallet, you can create a new wallet with a password or import a previously created wallet.
After connecting your personal wallet, a smart wallet is created for you and connected to the application.
useSmartWallethook (custom UI)
The useSmartWallet hook allows you to programmatically connect your application to the wallet. You will need to build your own UI for connecting the wallet.
Use the Smart Wallet
Now that you have connected your smart wallet to your app, you can use it to send transactions and interact with smart contracts.
Use the dashboard to upload some NFTs that we will claim with our smart wallet.
Bonus: Add a Session Key
To add a session key to your smart wallet, you can use the
useCreateSessionKeyhook to add a session key to the currently connected smart wallet:
In this guide, we learned how to connect users to a React app using two methods:
- With the Connect Wallet component.
- With a custom UI component via the
- Low-level control with
ThirdwebSDKProviderand the Wallet SDK.
Take a look at the GitHub Repository for the full source code!React App
A React app to create and interact with smart wallets.