液体钱包套件用于WASM

目前这只是个概念验证，但我们希望展示我们在WASM环境中实现液体钱包套件的承诺。

作为npm包可用。

示例

• 基本 示例，将npm包集成到web应用中。
• 基本工作液体 钱包。作为CT描述符仅查看钱包或连接到玉石。

针对LWK库消费者（前端开发者）

展示库功能的演示页面可以通过以下方式本地运行

$ cd lwk_wasm/www
$ npm install
$ npm run start

在浏览器中打开 https://127.0.0.1:8080

在 index.html 和 index.js 中所做的任何更改都会在浏览器中实时重新加载。

测试用例

$ node --version
v20.11.1
$ npm --version
10.2.4

针对LWK库开发者

要构建WASM库，需要安装 rust 和 wasm-pack

$ wasm-pack build --dev

要启用web-serial

$ RUSTFLAGS="--cfg=web_sys_unstable_apis" wasm-pack build --dev --features serial

然后按照库消费者部分进行。

测试

$ cd lwk_wasm
$ wasm-pack test --firefox # or --chrome

然后在浏览器中打开 http://127.0.0.1:8000，也打开开发者工具以查看控制台消息和网络请求。

为了避免需要打开浏览器，可以使用无头模式。

注意通过环境变量指定的超时时间已增加，默认的20秒可能太低。

$ cd lwk_wasm
$ WASM_BINDGEN_TEST_TIMEOUT=60 wasm-pack test --firefox --headless

运行特定测试（注意双横线 --）

$ wasm-pack test --firefox --headless -- -- balance_test_testnet

构建NPM包以发布

以发布模式构建rust包，优化空间。

$ cd lwk_wasm/
$ RUSTFLAGS="--cfg=web_sys_unstable_apis" CARGO_PROFILE_RELEASE_OPT_LEVEL=z wasm-pack build --features serial

构建WASM库以进行性能分析

为了分析生成的wasm文件以优化大小，我们想遵循与发布相同的优化，但我们想保留调试信息以分析生成的库并分析函数名称。

$ cd lwk_wasm/
$ RUSTFLAGS="--cfg=web_sys_unstable_apis" CARGO_PROFILE_RELEASE_OPT_LEVEL=z CARGO_PROFILE_RELEASE_DEBUG=2 wasm-pack build --profiling --features serial

然后可以使用 twiggy 分析库

twiggy top -n 10 pkg/lwk_wasm_bg.wasm

发布网页

在从前一节构建NPM包之后

$ git checkout master
$ cd lwk_wasm/www
$ npm run build
$ cd -
$ git checkout gh-pages
$ git reset --hard HEAD~1
$ git rebase master
$ cp lwk_wasm/www/dist/* docs/
$ git add docs
$ git commit -m "gh-pages: update site"
$ git push github gh-pages