Connect thirdweb Wallets to Any Onchain App

Greg

In-app wallets are one of the most used features in the thirdweb SDK, allowing anyone to create a wallet within your application using their email, phone number, social logins, or passkey. However, these wallets are siloed to the application they were created in unless the user exports their private key to use with another wallet provider. Now, we're changing that by enabling Wallet Connect for all thirdweb wallets so your users can connect to apps across the web3 ecosystem.

This capability will be enabled by default in the Connect UI for all wallets (backwards compatible). For developers creating a custom UI, we expose everything you need to easily establish and manage connections between your users' wallets and other apps.

If using the connect UI, users will see a "Manage Wallet" button when opening their wallet details. When they navigate to the manage wallet screen then "Connect to an app", they can paste a WalletConnect URI to establish a connection between your app and the one the user connects to. Learn where to get a WalletConnect URI here.

To establish a connection with WalletConnect using a custom UI, you first need to create a WalletConnectClient. This client manages your WalletConnect sessions behind the scenes, similar to how a ThirdwebClient manages your RPC connections behind the scenes.

Once you have a WalletConnect client, you can establish a WalletConnectSession between your wallet and another application with a URI (found in the connecting app).

You're now connected to the external app. When a request is made on the app that generated the URI, it will be sent to the wallet that created the WalletConnectClient.

You can view your active sessions at any time using getActiveWalletConnectSessions, and you can disconnect from any sessions with disconnectWalletConnectSession.

You can add custom event handlers to your WalletConnectClient, enabling things like custom approval or transaction UI elements. To set your own handlers, pass an object of each request you'd like to override to createWalletConnectClient. You can even add additional request handlers that aren't accounted for in the defaults.

We also export the default handlers so you can add additional behavior while maintaining the existing handler function.

We can't wait to see the incredible wallet experiences you build!