如何在 Angular 应用程序中使用 WalletConnect？

Question

问题： 我正在尝试使用 WalletConnect 在我的 angular 应用程序中连接 MetaMask 钱包。我有以下代码来连接钱包。一切运行正常，直到下面代码中的这一行：await connector.createSession();

有人使用 angular 实现 WalletConnect 并遇到这个问题吗？

错误：

ERROR Error: Uncaught (in promise): ReferenceError: Buffer is not defined
ReferenceError: Buffer is not defined
    at typedarrayToBuffer (vendor.js:82628:15)
    at arrayToBuffer (vendor.js:61701:71)
    at Module.arrayToHex (vendor.js:61704:24)
    at generateRandomBytes32 (vendor.js:64322:63)
    at vendor.js:56407:96
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (vendor.js:167002:24)
    at _next (vendor.js:167024:9)
    at ZoneDelegate.invoke (polyfills.js:4680:26)
    at Object.onInvoke (vendor.js:137134:25)
    at resolvePromise (polyfills.js:5521:31)
    at resolvePromise (polyfills.js:5475:17)
    at polyfills.js:5587:17
    at ZoneDelegate.invokeTask (polyfills.js:4714:31)
    at Object.onInvokeTask (vendor.js:137122:25)
    at ZoneDelegate.invokeTask (polyfills.js:4713:60)
    at Zone.runTask (polyfills.js:4486:47)
    at drainMicroTaskQueue (polyfills.js:4890:35)
    at ZoneTask.invokeTask [as invoke] (polyfills.js:4799:21)
    at invokeTask (polyfills.js:5908:14)

使用 WalletConnect 文档中的代码：

// Create a connector
    const connector = new WalletConnect({
      bridge: "https://bridge.walletconnect.org", // Required
      qrcodeModal: QRCodeModal,
    });

    // Subscribe to connection events
    connector.on("connect", (error, payload) => {
      if (error) {
        throw error;
      }

      // Get provided accounts and chainId
      const { accounts, chainId } = payload.params[0];
    });

    connector.on("session_update", (error, payload) => {
      if (error) {
        throw error;
      }

      // Get updated accounts and chainId
      const { accounts, chainId } = payload.params[0];
    });

    connector.on("disconnect", (error, payload) => {
      if (error) {
        throw error;
      }

      // Delete connector
    });

    // Check if connection is already established
    if (!connector.connected) {
      // create new session
      await connector.createSession();
    }

Answer 1

首先，使用 npm npm install buffer 安装缓冲区，然后在 polyfills.ts 文件末尾添加此代码：

(window as any)['global'] = window;
global.Buffer = global.Buffer || require('buffer').Buffer;

Answer 2

除了@houmn.sanati的回答，我还得做一些额外的步骤。

这些是我为解决问题所采取的所有步骤：

安装buffer包npm install buffer
在 polyfills.ts 文件中添加这一行
安装@types/nodenpm i --save-dev @types/node
将 types 添加到您的 tsconfig.json 并在 compilerOptions

tsconfig.app.json

{
  ...
  "compilerOptions": {
    ...
    "types": [
      "node"
    ]
  },
  "angularCompilerOptions": {
    ...
  }
}

（可选：仅当您遇到 preact 包问题时）在 package.json 文件

preact

"overrides": {
    "preact@10.4.1": {
      "preact": "10.0.5"
    }
  }

如何在 Angular 应用程序中使用 WalletConnect？

How to use WalletConnect with Angular app?

angular

metamask

decentralized-applications

wallet-connect