Connect your Smart Wallet to any dApp in React Native

Jorge

We continuously strive to provide you with the best tools to make your digital asset management as seamless and flexible as possible. Today, we are thrilled to announce an exciting feature update: our SmartWallet now supports the WalletConnect protocol. This game-changing integration makes your SmartWallet interoperable with a wide range of decentralized applications (dApps).

A significant challenge that users often face when dealing with smart wallets is the lack of interoperability. Once you create a smart wallet, you might find yourself tethered to it, unable to connect it with a different dApp. This limitation, until now, has hampered the ease of "exporting" your smart wallet and leveraging the benefits of the dApp ecosystem.

To overcome this hurdle, we have designed our SmartWallet to implement the WalletConnect protocol. WalletConnect is an open-source protocol for connecting desktop dApps to mobile wallets using end-to-end encryption by scanning a QR code. With the support for both versions 1 and 2 of WalletConnect, our SmartWallet is now equipped to communicate with an external dApp, making it easier than ever to "export" your smart wallet.

This integration transforms your SmartWallet into a bridge that securely connects you to the world of dApps, while maintaining the wallet's robust security and ease of use.

To use the new ConnectApp feature in your SmartWallet you need to install the react-native-camera package to be able to scan the WalletConnect QR codes:

yarn add react-native-camera && cd ios && pod install

Add the following code to your android/app/build.gradle file:

missingDimensionStrategy 'react-native-camera', 'general'

defaultConfig {
     applicationId "app.id"
     minSdkVersion rootProject.ext.minSdkVersion
     targetSdkVersion rootProject.ext.targetSdkVersion
     missingDimensionStrategy 'react-native-camera', 'general'
 }

Add the NSCameraUsageDescription in your Info.plist file to explain why your app needs to use the Camera. Example:

<key>NSCameraUsageDescription</key>
<string>The app uses the camera to scan QR codes</string>

After adding the camera package, you are ready to use the feature!

import { Mumbai } from '@thirdweb-dev/chains';
import { ThirdwebProvider, metamaskWallet, smartWallet } from '@thirdweb-dev/react-native';
...
<ThirdwebProvider
    activeChain={Mumbai}
    supportedWallets={[
        smartWallet({
            factoryAddress: "..."
            thirdwebApiKey: "apiKey"
            gasless: true,
            personalWallets: [localWallet()],
            enableConnectApp: true,
        }),
        metamaskWallet(),
]}>

With this update, your SmartWallet isn't just a tool for asset management - it's your passport to the universe of dApps. It's our ongoing commitment to push boundaries and redefine what a wallet can do. With the WalletConnect integration, we are excited to usher in a new era of connectivity and convenience for our users.

As always, we are keen to hear your feedback. Start exploring, connect your SmartWallet to your favorite dApps, and let us know about your experience. Here's to making the crypto world more accessible, one update at a time.

Stay tuned for more exciting updates and features.

Release 0.2.16