🎁

DAPP in AlphaWallet

Custom Wallet Connect

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 AlphaWallet. 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 Arbitrum blockchain in a few minutes.
  • Purchase a domain for your Wallet Connect server.
To connect to our custom AlphaWallet server, we need an HTTPS connection. This domain name will be used when configuring the Nginx host.
All set? Let’s get started! 🚀.

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 AlphaWallet file in the /etc/nginx/sites-enabled location. Add these lines of code to the file:
cat << EOF > /etc/nginx/sites-enabled/AlphaWallet
server {
server_name mycustomAlphaWallet.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 mycustomAlphaWallet.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/AlphaWallet/node-AlphaWallet-bridge
cd ~/AlphaWallet/node-AlphaWallet-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 AlphaWalletBridgeAddresses = ['https://mycustomAlphaWallet.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 { AlphaWalletBridgeAddresses } from 'config';
<DappProvider
environment={environment}
customNetworkConfig={{
name: 'customConfig',
apiTimeout: 6000,
AlphaWalletBridgeAddresses
}}
completedTransactionsDelay={200}
>
Restart the application.
Congratulations! Now, when a user connects to a dApp through wallet connect, they will be using our custom wallet connect server. 🎉
Last modified 11mo ago