How to use DirectSecp256k1HdWallet.generate()

[cmwaters]

Hi, I would like to generate a private key client-side. A snippet of the code is as follows:

  const serialized = window.localStorage.getItem(mainAddress)
  let wallet: DirectSecp256k1HdWallet
  if (serialized === null) {
      wallet = await DirectSecp256k1HdWallet.generate(12)
      window.localStorage.setItem(mainAddress, await wallet.serialize(mainAddress))
  } else {
      wallet = await DirectSecp256k1HdWallet.deserialize(serialized, mainAddress)
  }

However, I'm coming across the following error when running generate:

TypeError: Cannot read properties of undefined (reading 'call')
    at Hash.CipherBase (index.ts:2055)
    at new Hash (index.ts:2055)
    at createHash (index.ts:2055)
    at deriveChecksumBits (index.ts:2055)
    at Object.entropyToMnemonic (index.ts:2055)
    at Function.encode (index.ts:2055)
    at Function.generate (index.ts:2055)

I have a feeling it's to do with some way that I'm configuring things but I have no idea. Any suggestions?

[cmwaters]

In case it helps, here is a link to the code: https://github.com/rook-network/rook/blob/39d5e265f2c32f8c047173097ab72f7ea1eff206/web/apps/game/src/components/provider/game.ts#L36

[webmaster128]

The code helps indeed. Try changing

-import { Registry, DirectSecp256k1HdWallet } from '@cosmjs/stargate/node_modules/@cosmjs/proto-signing'
+import { Registry, DirectSecp256k1HdWallet } from '@cosmjs/proto-signing'

[cmwaters]

Thanks for the fast response. I made the change and rebuilt the node_modules but am still getting the same error.

[webmaster128]

Hmm, I don't really understand the eror message. Could you write down the steps to reproduce to allow for loca debugging?

[cmwaters]

Sure. The following should work but let me know if it doesn't:

git clone https://github.com/rook-network/rook
cd rook
make install // build the binary
./networks/single/init.sh // run a script to initiate the chain
rook start // start the chain

Then in another process for the web server:

cd rook/web
npm install
nx serve game // should start the server on localhost:4200

When you open the page it will try generate the private key and so you should see the error straight away.

[cmwaters]

I managed to work this out. My understanding is CipherBase, the package that's used when generating a private key uses the NodeJS stream library whereas I'm running this in the browser. I ended up using the readable-stream package to replace stream and then it worked.

[webmaster128]

Ah, yeah. The problem is deep down in dependencies here: https://github.com/crypto-browserify/cipher-base/blob/v1.0.4/index.js#L7

We has to use this Webpack config when switching from Webpack 4 to Webpack 5:

    resolve: {
      fallback: {
        buffer: false,
        crypto: false,
        events: false,
        path: false,
        stream: require.resolve("stream-browserify"),
        string_decoder: false,
      },
    },

[webmaster128]

See also bitcoinjs/bip39#170