How to integrate WalletConnect the easy way

Although most new users think of blockchain simply as trading crypto, Web3 is a big world touching a wide variety of industries and applications. Wallets that connect users to blockchain-based apps and protocols—known as Web3 wallets—are the gateway to that world. A business that wants to offer its users the depth and breadth of Web3 needs to offer wallets that can access it directly.

‍

Prior to 2018, when Web3 wallets were still relatively new, there wasn’t a standard interface to connect apps to wallets. WalletConnect created a standard messaging protocol for Web3 apps to integrate with wallets. It removed the need for wallet developers to individually connect with every Web3 app. Now, by scanning a QR code, anyone can establish a connection between their wallet and thousands of apps securely. 

‍

Portal SDK directly supports WalletConnect to ensure business customers have a simple way to implement access to thousands of ETH and EVM apps. 

Benefits of WalletConnect for organizations and their users

Currently most institutions such as exchanges, fintech firms, and banks offer their users custodial wallets only. Funds from these wallets are commingled, meaning they are not held in individually gated accounts per user. Their private keys are also controlled by the firm rather than the end user. For security, regulatory, and technical reasons, those wallets can’t provide users access to Web3 apps.

‍

A Web3 wallet, such as the MPC wallet as a service offered by Portal, allows organizations to offer access to Web3 apps alongside traditional digital asset trading and storage functionality. Access to apps can be natively integrated with the MPC wallet or offered via WalletConnect, where the user simply needs to scan a QR code on an app to connect. 

‍

Prior to WalletConnect, users had to install a browser extension to connect to desktop apps. Not all wallets supported these browser extensions and were often clunky and confusing. Even when a wallet was supported, the connection process was not standardized or transparent.  

‍

WalletConnect changed this experience for users by building protocols that manage access, sessions, and transactions. WalletConnect opened up the possibility that any wallet, but most helpfully mobile wallets, could connect to any app—whether on your desktop, mobile browser, or wherever.

Benefits of Portal’s WalletConnect integration for developers

The Portal SDK removes the resource-intensive process developers face when integrating WalletConnect independently. The WalletConnect integration already embedded in the Portal SDK benefits developers in a few key ways:

Automatic patches and upgrades

Portal's implementation pushes all third-party integrations such as WalletConnect to the server. This design ensures Portal can patch breaking changes and upgrades from the third party provider before they become issues for customers.

‍

For instance, if WalletConnect releases a V3.0, we've got you covered.

No dependencies

Because WalletConnect is integrated directly into the Portal SDK, a customer only needs to implement the functionality as per our documentation. In addition, if an organization determines they want to use WalletConnect later in their development cycle, the integration is just as simple and doesn’t require any reworking of the code. 

How to set up WalletConnect in Portal

Setting up WalletConnect V2.0 is straightforward and quick via the Portal SDK. Details can be found in Portal’s documentation for iOS, Android, or React Native.

‍

Step 1: Install the @portal-hq/connect package in your project.

Step 2: To initialize PortalConnect, import and create an instance of PortalConnect.

Step 3: Set up the capability to connect to a WalletConnect URI like a QR code scanner.

Step 4: Add an event handler to your PortalConnect instance in order to bind to Session Requests.

‍

The entire implementation is only about 50 lines. See below for what the final implementation code looks like:

‍

Once setup is complete, users that generate a wallet can connect to any app that accepts WalletConnect by:

1. Choosing WalletConnect as their wallet connection option.
2. Scanning the QR code from their organization's white label Portal Web3 wallet.
3. Approving the connection from the mobile wallet.
4. Approving transactions from the mobile wallet.

‍

After a session is initiated in the app, the user can continue to transact and take other actions without having to rescan the QR code while the session is ongoing.

‍

Interested in getting your wallet as a service kit with a pre-built WalletConnect integration? Request access to the API or talk to Portal.