Use the new BitBox02 library

[shonsirsha]

Hey, a new BitBox02 library is available: https://www.npmjs.com/package/bitbox-api which replaces the current bitbox02-api (deprecated).

This new one is much smaller in size, comes with TS, is a proper ES6 module, and based on WASM. Would you be open to use this? If so, I'd be happy to contribute to this effort.

This is the sandbox for the new library, and you could also find some more information one the Bitbox02 Developer Resources.

Thanks.

[refi93]

Hi @shonsirsha, thanks for the heads up. Sure, feel free to make the PR and we'll review it 👍 When it comes to the lib size, we are currently tackling the problem by using async imports so it's not a pressing issue for us. Nevertheless, updating the lib would streamline/simplify our current integration which relies on manually added type definitions

[shonsirsha]

Hey @refi93 , I noticed that when using any instance of the new bitbox-api package anywhere in the app, the app will crash with no error logs. Just a total white screen. The error boundary also didn't catch any error.

Reproducible commit: https://github.com/shonsirsha/adalite/commit/49b8151cdf2c7c7ec9a87bf5d9b89265750d147f (see app.tsx)

More detail:

The app crashes from anything as simple as the following:

import * as bitbox from "bitbox-api"

// ....

  useEffect(() => {
    console.log('Bitbox module:', bitbox)
  }, [])

This console.log didn't even run.

I've also tried installing the bitbox-api package in a fresh preact project (using Vite) and this issue didn't occur. Same with react + webpack.

I'm wondering if there's anything specific I should know about the error handling in this project, or anything in particular in the Adalite app you'd suggest me taking a look at? Thanks a lot.

Note: keeping only the import statement didn't cause the crash.

Crash screenshots:

renders undefined in the DOM

[refi93]

Hi @shonsirsha , bitbox-api is apparently wasm-based. What worked for me was either to load the module asynchronously:

useEffect(() => {
    const fn = async () => {
      const bitbox = await import('bitbox-api')
      bitbox.bitbox02ConnectAuto(() => {
        console.log('Onclose')
      }).then((x) => {
        console.log('Debug bitbox connect', x)
      }).catch((e) => console.error('BB lib error', e))
    }
    fn()
  }, [])

or for some reason that I don't understand yet, require seems to work fine as well :D

const bitbox = require('bitbox-api')

TBH I'm not sure why an ordinaryimport completely bricks the app, I can only vaguely imagine that doing calls while the underlying wasm module is being loaded/fetched can result in unpredictable behavior. Why it does work on other project I'm not sure TBH and I'd say it's not that much worth the investigation as it can be quite a lot of time for little added value as the solutions above seem to otherwise work fine.

All in all, I think it would anyway be the most sensible to load the bitbox lib asynchronously when actually used because the wasm module is ~725kB which while not that much, is still quite significant for a lib that is relevant only for a small fraction of users.

[shonsirsha]

Closing as #1415 is merged