Beginner

Custom Wallet Connect

With the rise of decentralized applications (dApps), there has been an increased demand for seamless integration between dApps and users’ existing wallet solutions. Custom Wallet Connect is a solution that enables dApp developers to connect their users’ existing wallets to the dApp in a secure and seamless manner. In this tutorial, we will learn how to integrate Custom Wallet Connect on the MultiversX platform.

By the end of this tutorial, you will have a clear understanding of how to use Custom Wallet Connect on MultiversX to improve the user experience and security of your dApp. Whether you are a beginner or an experienced dApp developer, this tutorial will provide you with the knowledge and skills you need to start building amazing dApps with Custom Wallet Connect on MultiversX.

Custom Wallet Connect​

Our custom Wallet Connect is a platform that allows you to connect decentralized applications (dApps) to your wallet. The dApp can send transaction requests to your wallet once you have authorized a connection request from it through our custom Wallet Connect.

In this guide, we will walk you through the process of connecting a dApp to our WalletConnect. This will provide users with the bridge that securely connects their MultiversX wallets to dApps.

Prerequisites​

Before we begin, a few requirements are needed to get you running.

• Set up a working dApp.

We have created a tutorial on how to build a dApp on the MultiversX blockchain in a few minutes.

• Purchase a domain for your Wallet Connect server.

To connect to our custom WalletConnect server, we need an HTTPS connection. This domain name will be used when configuring the Nginx host.

Set up the custom Wallet Connect server​

With everything in place, let’s set up the Wallet Connect application. To begin, launch a new instance on an Ubuntu 18.04 server and configure the Wallet Connect server.

Install Dependencies

Spin up your terminal and run this command to install the dependencies:

sudo apt-get update && sudo apt-get install certbot python3-certbot-nginx docker.io docker-compose nginx -y

By default, nginx configuration is saved to the directory. Remove the nginx configuration from the default directory and create the required directories.

sudo rm -f /etc/nginx/sites-enabled/default
mkdir -p /etc/nginx/sites-enabled

Navigate to your text editor and create a walletconnect file in the /etc/nginx/sites-enabled location. Add these lines of code to the file:

cat << EOF > /etc/nginx/sites-enabled/walletconnect

server {
  server_name mycustomwalletconnect.com.;
  location / {
    proxy_set_header Upgrade \$http_upgrade;
    proxy_http_version 1.1;
    proxy_set_header X-Forwarded-Host \$http_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto \$scheme;
    proxy_set_header X-Forwarded-For \$remote_addr;
    proxy_set_header Host \$host;
    proxy_set_header Connection upgrade;
    proxy_cache_bypass \$http_upgrade;
    proxy_connect_timeout 5s;
    proxy_send_timeout 300s;
    proxy_read_timeout 300s;
    proxy_buffering on;
    proxy_buffer_size 32k;
    proxy_buffers 8 32k;
    proxy_pass http://127.0.0.1:5001;
  }
}
EOF

Due to the significant configuration changes we have made, we need to fully restart nginx. Execute this command to restart and enable the server.

systemctl restart nginx.service && systemctl enable nginx.service

Next, request your certbot certificates.

certbot --nginx -d1 mycustomwalletconnect.com

Run this command to download Redis and its dependencies. Next check if Redis is functioning properly using the status command.

sudo apt-get install -y redis
sudo systemctl status redis

We also need to install nodejs which will run in production.

curl -sL https://deb.nodesource.com/setup_14.x -o /tmp/setup_14.sh && chmod +x /tmp/setup_14.sh
sudo apt-get install -y nodejs

Lastly, we will set up a wallet connection bridge server for sending Wallet Connect connections. Run the commands below.

mkdir ~/wallet-connect
cd ~/wallet-connect
git clone https://github.com/WalletConnect/node-walletconnect-bridge
cd ~/wallet-connect/node-walletconnect-bridge
npm install --no-optional
npm run build
nohup npm run start > wallet_connect_log 2>&1 &

Great job! Our server is running!

The Wallet Connect essentially works as a “link”, connecting users to dApps using their wallet. Therefore, in the next section of this guide, we configure our dApp to use the new custom wallet connect server.

Configure the dApp to use the new custom Wallet Connect server.​

In this section, we will use the sample dApp that we created earlier to configure an array of Wallet Connect addresses (we can have more than one Wallet Connect server).

In your config.tsx file, add the following lines of code:

export const walletConnectBridgeAddresses = ['https://mycustomwalletconnect.com:5000'];

Next, create an app.tsx file, where we will import the array into the application and submit the array as a key/value pair for the customNetworkConfig parameter when the DappProvider component is launched.

Add these codes to your app.tsx file,

import { walletConnectBridgeAddresses } from 'config';
    <DappProvider
        environment={environment}
        customNetworkConfig={{
            name: 'customConfig',
            apiTimeout: 6000,
            walletConnectBridgeAddresses
        }}
        completedTransactionsDelay={200}
    >