如何使用带有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

首先，使用npmnpm 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": {
...
}
}

• (可选：仅当您面临预启动包的问题时)在package.json文件中为preact包添加此覆盖

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