如何在Web3中注入Binance Wallet替代MetaMask实现链操作？

报错核心原因 #

BinanceChain未声明报错通常来自两类情况：

• Binance Chain Wallet扩展仅会在用户完成安装后，将BinanceChain对象注入到window全局作用域下。如果用户未安装扩展、或者代码执行时机早于扩展注入完成的节点，就会找不到该对象
• TypeScript项目如果未提前声明全局BinanceChain类型，也会抛出语法层面的未定义提示

推荐实现方案（适配你当前使用的bsc-connector） #

你不需要直接调用全局BinanceChain对象，bsc-connector激活后可以直接拿到兼容EIP-1193标准的provider实例，用法和你之前使用的ethereum对象完全一致，不需要大幅改造原有代码：

import { BscConnector } from '@binance-chain/bsc-connector'

export const bsc = new BscConnector({
  supportedChainIds: [56, 97]
})

// 连接钱包后获取provider
await bsc.activate();
const provider = await bsc.getProvider();

// 直接用provider调用方法，和MetaMask的ethereum.request用法完全相同
const signResult = await provider.request({
  method: "eth_sign", 
  params: ["你的钱包地址", "需要签名的内容"]
})

// 原有基础方法依然可以正常使用
const account = await bsc.getAccount();
const chainId = await bsc.getChainId();

如果你确实需要直接使用全局BinanceChain对象 #

1. 增加兼容判断避免运行时报错 #

调用前先判断对象是否存在，同时保证执行时机晚于页面加载完成（不要在页面初始化同步代码中直接调用，建议放在用户点击连接钱包的交互事件回调中）：

// 调用前先做存在性判断
if (window.BinanceChain) {
  const signResult = await window.BinanceChain.request({
    method: "eth_sign", 
    params: ["address", "message"]
  })
} else {
  // 提示用户安装Binance Chain Wallet扩展
  alert("请先安装Binance Chain Wallet钱包扩展")
}

2. TypeScript项目补充类型声明 #

在项目的.d.ts类型声明文件中增加全局类型定义，避免语法层面的未定义报错：

interface Window {
  BinanceChain?: {
    request: (args: {method: string, params?: any[]}) => Promise<any>;
    // 可以根据官方文档补充其他需要用到的属性和方法
  }
}

内容的提问来源于stack exchange，提问作者Mariusz Sidorowicz