跳转至

自定义钱包连接

原文：https://docs.elrond.com/developers/tutorials/custom-wallet-connect

## 自定义钱包连接

我们的定制钱包连接是一个平台，允许您将分散的应用程序(dApps)连接到您的钱包。一旦您通过我们的自定义钱包连接授权了来自 dApp 的连接请求，dApp 就可以向您的钱包发送交易请求。

在本指南中，我们将带您完成将 dApp 连接到 WalletConnect 的过程。这将为用户提供将他们的Elrond钱包安全连接到 dApps 的桥梁。

先决条件

在我们开始之前，您需要满足一些要求。

  • 建立一个有效的 dApp。

我们已经创建了一个关于如何在几分钟内在Elrond区块链 建造一个 dApp 的教程。

  • 为您的钱包连接服务器购买一个域。

要连接到我们的自定义 WalletConnect 服务器，我们需要一个 HTTPS 连接。配置 Nginx 主机时将使用该域名。

都准备好了吗？我们开始吧！🚀。

设置自定义钱包连接服务器

一切就绪后，让我们设置 Wallet Connect 应用程序。首先，在一个 Ubuntu 18.04 服务器上启动一个新实例，并配置 Wallet Connect 服务器。

安装依赖关系

启动您的终端并运行以下命令来安装依赖项:

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

默认情况下， nginx 配置被保存到目录中。从默认目录中删除 nginx 配置，并创建所需的目录。

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

导航到你的文本编辑器，在/etc/nginx/sites-enabled位置创建一个 walletconnect 文件。将这几行代码添加到文件中:

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

由于我们所做的重大配置更改，我们需要完全重启 nginx 。执行此命令重新启动并启用服务器。

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

接下来，申请您的 certbot 证书。

certbot --nginx -d1 mycustomwalletconnect.com

运行这个命令来下载 Redis 及其依赖项。接下来使用status命令检查 Redis 是否正常运行。

sudo apt-get install -y redis

sudo systemctl status redis

我们还需要安装将在生产中运行的nodejs。

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

最后，我们将设置一个 wallet 连接桥服务器来发送 Wallet Connect 连接。运行下面的命令。

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 &

干得好！我们的服务器正在运行！

钱包连接本质上作为一个“链接”工作，使用他们的钱包将用户连接到 dApps。因此，在本指南的下一节中，我们将配置 dApp 以使用新的自定义 wallet connect 服务器。

配置 dApp 使用新的自定义钱包连接服务器。

在本节中，我们将使用前面创建的示例 dApp 来配置一组 Wallet Connect 地址(我们可以有多个 Wallet Connect 服务器)。

在您的config.tsx文件中，添加以下代码行:

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

接下来，创建一个app.tsx文件，我们将把数组导入到应用程序中，并在启动DappProvider组件时，将数组作为customNetworkConfig参数的键/值对提交。

将这些代码添加到您的app.tsx文件中，

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

重新启动应用程序。

恭喜你！现在，当用户通过 wallet connect 连接到 dApp 时，他们将使用我们的自定义 wallet connect 服务器。🎉

回到顶部