@iota/client-wasm

IOTA Client Library - WebAssembly bindings

WebAssembly (Wasm) bindings for TypeScript/JavaScript to the iota.rs client library.

Which bindings to choose?

The iota.rs client library also offers dedicated Node.js bindings. The differences with this package are outlined below.

	Wasm bindings	Node.js bindings
Environment	Node.js, browsers	Node.js
Installation	-	Rust, Cargo required*
Performance	✔️	✔️✔️
Proof-of-work	Single-threaded	Multi-threaded
MQTT	❌	✔️
Stronghold	❌	✔️
Ledger Nano	❌	✔️

*Node.js bindings only need to be compiled during npm install if a pre-compiled binary is not available for your platform.

tl;dr: Use the Node.js bindings if you can. The Wasm bindings are just more portable and support browser environments.

Requirements

• One of the following Node.js versions: '16.x', '18.x';
• wasm-bindgen (cargo install wasm-bindgen-cli);

Installation

• Using npm:

$ npm i @iota/client-wasm

• Using yarn:

$ yarn add @iota/client-wasm

Getting Started

After installing the library, you can create a Client instance and interface with it.

Node.js Usage

const { Client } = require('@iota/client-wasm/node');

const client = new Client({
    nodes: ['https://api.testnet.shimmer.network'],
});

client.getInfo().then(console.log).catch(console.error);

See the Node.js examples for more demonstrations, the only change needed is to import @iota/client-wasm/node instead of @iota/client.

Web Setup

Unlike Node.js, a few more steps are required to use this in the browser.

The library loads the compiled Wasm file with an HTTP GET request, so the client_wasm_bg.wasm file must be copied to the root of the distribution folder.

A bundler such as webpack or rollup is recommended.

Rollup

• Install rollup-plugin-copy:

npm install rollup-plugin-copy --save-dev

• Add the plugin to your rollup.config.js:

// Include the copy plugin.
import copy from 'rollup-plugin-copy'

// ...

// Add the copy plugin to the `plugins` array:
copy({
  targets: [{
    src: 'node_modules/@iota/client-wasm/web/wasm/client_wasm_bg.wasm',
    dest: 'public',
    rename: 'client_wasm_bg.wasm'
  }]
})

Webpack

• Install copy-webpack-plugin:

npm install copy-webpack-plugin --save-dev

• Add the plugin to your webpack.config.js:

// Include the copy plugin.
const CopyWebPlugin = require('copy-webpack-plugin');

// ...

experiments: {
    // futureDefaults: true, // includes asyncWebAssembly, topLevelAwait etc.
    asyncWebAssembly: true
}

// Add the copy plugin to the `plugins` array:
plugins: [
    new CopyWebPlugin({
      patterns: [
        {
          from: 'node_modules/@iota/client-wasm/web/wasm/client_wasm_bg.wasm',
          to: 'client_wasm_bg.wasm'
        }
      ]
    }),
    // other plugins...
]

Web Usage

import { init, Client } from "@iota/client-wasm/web";

init().then(() => {
  const client = new Client({
    nodes: ['https://api.testnet.shimmer.network'],
  });

  client.getInfo().then(console.log).catch(console.error);
}).catch(console.error);

// Default path to load is "client_wasm_bg.wasm", 
// but you can override it by passing a path explicitly.
//
// init("./static/client_wasm_bg.wasm").then(...)