WalletConnect V2 Setup

WalletConnect 2.0

Starting with the 2.0 version of the dApp SDK ( previously @elrondnetwork/dapp-core@2.0.0 ) and @multiversx/sdk-dapp@2.2.8 WalletConnect 2.0 is available as a login and signing provider, allowing users to login by scanning a QR code with the Mobile App

This is an implementation of sdk-wallet-connect-provider ( docs ) signing provider

Setup

As WalletConnect 2.0 is not enabled by default there are a few steps needed to enable it:

Set the walletConnectV2ProjectId

In the DappProvider wrapper a walletConnectV2ProjectId must be provided in the customNetworkConfig

The Project ID can be generated for free here: https://cloud.walletconnect.com/sign-in

<DappProvider
    environment="devnet"
    customNetworkConfig={{
      name: 'customConfig',
      walletConnectV2ProjectId: '9b1a9564f91...'
    }}
>

The WalletConnect Project ID grants you access to the WalletConnect Cloud Relay that securely manages communication between the device and the dApp.

Set the isWalletConnectV2 flag

Once the walletConnectV2ProjectId is set in the DappProvider global Context, the next step would be to activate the Walletconnect V2 functionality in the Login UI.

That means setting the isWalletConnectV2 flag to true in the <WalletConnectLoginButton> component

<WalletConnectLoginButton
  callbackRoute='/dashboard'
  loginButtonText='xPortal App'
  isWalletConnectV2={true} // or simply isWalletConnectV2
/>

Or, if you want access to the container without the button set the isWalletConnectV2 flag to true in the <WalletConnectLoginContainer> component.

<WalletConnectLoginContainer
  callbackRoute={callbackRoute}
  loginButtonText='Login with xPortal'
  title='xPortal Login'
  logoutRoute='/unlock'
  className='wallect-connect-login-modal'
  lead='Scan the QR code using xPortal'
  wrapContentInsideModal={wrapContentInsideModal}
  redirectAfterLogin={redirectAfterLogin}
  token={token}
  onLoginRedirect={onLoginRedirect}
  onClose={onClose}
  isWalletConnectV2={true} // or simply isWalletConnectV2
/>

That's it !

If the Project ID is valid and the isWalletConnectV2 flag is true the new functionality will work out of the box with the Transactions and Message signing flows.

You can check out this PR on the dApp Template with the all the changes required to activate the updated functionality.