如何在我的網站上添加“連接錢包”按鈕？

一個“連接錢包”按鈕使用戶可以安全地將其加密錢包（例如metamask或WalletConnect）鏈接起來，從而通過交易簽名和地址驗證可以與基於區塊鏈的平台進行交互。

2025/07/02 11:28

了解“連接錢包”按鈕的目的

如果您要構建分散的應用程序（DAPP）或集成基於區塊鏈的功能，則必須在網站上添加“連接錢包”按鈕。此按鈕允許用戶安全地連接其加密貨幣錢包，例如metamask，Trust Wallet或WalletConnect，以與您的平台進行交互。此按鈕的主要功能是在用戶的錢包和您的Web應用程序之間建立連接，以便可以在鏈上簽名和驗證交易。

在進行繼續之前，重要的是要了解錢包連接在以太坊和其他兼容EVM兼容的區塊鏈的背景下如何工作。當用戶單擊“連接錢包”按鈕時，提示他們批准訪問其錢包地址。一旦獲得批准，您的網站就可以臨時訪問錢包地址，並可以從區塊鏈執行讀取操作或啟動交易簽名。

選擇右錢包集成庫

為了有效地實現“連接錢包”按鈕，開發人員經常使用諸如Web3.js ， ethers.js或Web3 -Modal之類的庫，這些庫抽象了連接錢包中涉及的許多複雜性。其中， Web3 -Modal被廣泛使用，因為它支持開箱即用的多個錢包提供商，包括MetAmask，WalletConnect，Coinbase Wallet等。

首先，您需要安裝所需的軟件包。例如，使用NPM ，您可以運行：

• npm install web3modal
• npm install ethers

安裝後，將模塊導入您的JavaScript或打字稿文件：

 import Web3Modal from 'web3modal';
 import { ethers } from 'ethers';

此設置使您可以訪問初始化錢包連接接口的必要工具。

設置連接錢包按鈕UI

下一步涉及在HTML或JSX文件中創建實際的“連接錢包”按鈕。根據您的前端框架（反應，VUE，Angular或Plain HTML），您可以相應地構建按鈕。這是一個簡單的示例，使用普通html：

 Connect Wallet

您可以使用CSS對按鈕進行樣式，以匹配網站的設計。在連接錢包後，動態更改按鈕文本也很常見 - 例如，顯示截斷的錢包地址或將標籤更改為“斷開連接” 。

實施連接邏輯

現在是核心部分：實現“連接錢包”按鈕背後的邏輯。使用Web3 -Modal ，您可以初始化提供商並請求訪問用戶錢包。這是一個基本實現：

 const connectWalletButton = document.getElementById('connectWalletButton'); connectwalletbutton.addeventlistener（'click'，async（）=> {
 const web3modal = new web3modal（）;
 const Connection =等待Web3modal.connect（）;
 const提供者= new ethers.providers.web3provider（連接）;




//獲取簽名者和錢包地址
 const Signer = provider.getSigner（）;
 const address =等待簽名器.getAddress（）;



console.log（'連接的錢包地址：'，地址）;
 connectwalletbutton.textContent = Connected: ${address.slice(0, 6)}...${address.slice(38, 42)} ;
 }）;

該腳本會在按鈕上聽單擊事件，通過Web3modal打開錢包選擇模式，連接到所選的錢包，並使用Ethers.js檢索錢包地址。

優雅處理錯誤至關重要。您應該將此邏輯包裝在TryCatch塊中，並在連接失敗或拒絕時提供用戶反饋。

管理錢包斷開連接

成功連接錢包後，用戶可能希望隨時斷開連接。為了支持這一點，您可以添加一個“斷開連接”功能，該功能可以清除Web3modal中的緩存連接並重置UI狀態。

這是您可以擴展以前的代碼以允許斷開連接的方法：

 let currentAddress = null; connectwalletbutton.addeventlistener（'click'，async（）=> {
 如果（！currentAddress）{




const web3Modal = new Web3Modal(); const connection = await web3Modal.connect(); const provider = new ethers.providers.Web3Provider(connection); const signer = provider.getSigner(); currentAddress = await signer.getAddress(); connectWalletButton.textContent = `Connected: ${currentAddress.slice(0, 6)}...${currentAddress.slice(38, 42)}`;
 } 別的 {
 
// Disconnect const web3Modal = new Web3Modal(); web3Modal.clearCachedProvider(); currentAddress = null; connectWalletButton.textContent = 'Connect Wallet';
 }
 }）;

這種方法根據是否已經連接了錢包在連接和斷開狀態之間切換。

常見問題

問：我可以自定義Web3modal中顯示的錢包選項嗎？

是的， Web3 -Modal允許自定義顯示的錢包提供商。您可以通過在實例化Web3modal對象時傳遞允許的連接器列表來指定哪些錢包出現。例如：

 const web3Modal = new Web3Modal({
 network: 'mainnet',
 cacheProvider: true,
 providerOptions: { walletconnect: { package: WalletConnectProvider, options: { infuraId: 'YOUR_INFURA_ID' } }

}
}）;

這使您可以控制用戶可以使用哪些錢包。

問：如何檢測用戶是否已安裝了metAmask？

您可以在窗口中檢查以太坊對象的存在：

 if (typeof window.ethereum !== 'undefined') {
 console.log('MetaMask is installed!');
 } else {
 console.log('MetaMask not found. Please install it.');
 }

這有助於確定是否提示用戶在未檢測到的情況下安裝錢包。

問：用戶關閉並重新打開頁面後，是否可以自動連接錢包？

是的， Web3 -Modal支持緩存提供商連接。如果用戶以前連接了錢包並且沒有手動斷開連接，則可以自動恢復連接。通過設置cacheProvider: true啟用此行為。

問：在錢包連接後，DAPP獲得了什麼權限？

連接錢包時，DAPP通常會收到許可：

• 閱讀用戶的錢包地址。
• 請求交易簽名。
• 查詢與用戶帳戶有關的區塊鏈數據。

但是，如果沒有通過錢包接口獲得明確的用戶批准，DAPP無法簽署或發送交易。