How to use WalletConnect with Angular app?

Question

Problem: I am trying to use WalletConnect to connect MetaMask wallet in my angular app. I have the following code to connect with the wallet. Everything runs fine until this line in the below code: await connector.createSession();

Does anyone implement WalletConnect with angular and face this issue?

Error:

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)

Code using from WalletConnect documentation:

// 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();
    }

Have you tried adding Buffer: https://github.com/feross/buffer ? It could fix the issue, but it could also be a current problem with the library itself. Maybe a different version can help. — Lucas Goldner, Apr 15 '22 at 17:51
@LucasGoldner Tried 2 different versions. Stable and Beta version. Also, there are examples with react but not with angular. But it's a Standalone Client example it should work with angular right? — Johar Zaman, Apr 15 '22 at 17:53
Should work with Angular yes. But have you tried adding buffer ? — Lucas Goldner, Apr 15 '22 at 17:58
Ok sorry then I don't know :/ But if your goal is simply to connect to a wallet, just use default web3 library and try something like this: https://ethereum.stackexchange.com/questions/101587/can-i-implement-walletconnect-with-vanilla-javascript — Lucas Goldner, Apr 15 '22 at 18:02
@LucasGoldner Connecting wallet was working with web3 library but only on web browsers. I need it on the web and on mobile as well. That's why I need to use walletconnect. — Johar Zaman, Apr 15 '22 at 18:03
Sorry I misunderstood your comment. You mean using web3 provider in WalletConnect. But what would be InfuraId in that case? @LucasGoldner — Johar Zaman, Apr 15 '22 at 18:05
Ah, okay, got you. In this case, an option could be to redirect them to the meta wallet app for now until you find another way: https://metamask.github.io/metamask-deeplinks/ — Lucas Goldner, Apr 15 '22 at 18:07
If you are using infura just use this as your RPCUrl : https://mainnet.infura.io/v3/yourInfuraID — Lucas Goldner, Apr 15 '22 at 18:09

score 2 · Answer 1 · answered Apr 16 '22 at 08:02

2

first, install buffer using npm npm install buffer then add this code at the end of polyfills.ts file:

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

answered Apr 16 '22 at 08:02

houman.sanati

1,054
3
18
34

@houmn.sanati I tried this but then I face an issue `require is not found` Also tried some other workarounds to include Buffer still no luck. – Johar Zaman Apr 16 '22 at 17:33

Johar Zaman · Accepted Answer · 2022-04-18T15:01:18.450

In addition to @houmn.sanati answer, I had to do some extra steps.

These are all the steps I took to fix the issue:

Install buffer package npm install buffer
Add this line in polyfills.ts file
Install @types/node npm i --save-dev @types/node
Add types to your tsconfig.json and tsconfig.app.json(if you have this file) in compilerOptions

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

(Optional: Only If you face issue with preact package) Add this override for preact package in package.json file

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

How to use WalletConnect with Angular app?

2 Answers2