Update wasm.mdx (#1383)

* Update wasm.mdx * * added requirements * added example explanations * import examples from https://github.com/iotaledger/iota-sdk/blob/develop/bindings/wasm/README.md * updated API Ref link * use tabs for Node.js and Web * changed tab order --------- Co-authored-by: Lucas Tortora <[email protected]>
iotaledger · Dec 15, 2023 · fce4a08 · fce4a08
1 parent e0399a6
commit fce4a08
Showing 1 changed file with 62 additions and 34 deletions.
diff --git a/docs/build/iota-sdk/1.0/docs/getting-started/wasm.mdx b/docs/build/iota-sdk/1.0/docs/getting-started/wasm.mdx
@@ -43,6 +43,15 @@ Use the Node.js bindings if you can. The Wasm bindings are just more portable an
 
 :::
 
+### Requirements
+
+- One of the following [Node.js](https://nodejs.org/) versions: '16.x', '18.x';
+- [`wasm-bindgen`](https://github.com/rustwasm/wasm-bindgen). You can install it by running:
+
+```bash
+cargo install wasm-bindgen-cli
+```
+
 ### Install Using a Package Manager
 
 To start using the IOTA SDK in your Wasm project, you can install the IOTA SDK from your package manager of choice:
@@ -147,51 +156,69 @@ A bundler such as [webpack](https://webpack.js.org/) or [rollup](https://rollupj
 
 After you [installed the library](#install-the-iota-sdk), you can create a `Client` instance and interface with it.
 
+The following example creates a [`Client`](https://wiki.iota.org/shimmer/iota-sdk/references/nodejs/classes/Client/)
+instance connected to
+the [Shimmer Testnet](https://api.testnet.shimmer.network), and retrieves the node's information by
+calling [`Client.getInfo()`](https://wiki.iota.org/shimmer/iota-sdk/references/nodejs/classes/Client/#getinfo),
+and then print the node's information.
+
+<Tabs groupId="usage" queryString>
+<TabItem value="Web" label="Web">
+<div className={'hide-code-block-extras'}>
+
 ```typescript reference
-https://github.com/iotaledger/iota-sdk/blob/develop/bindings/nodejs/examples/client/getting-started.ts#L4-L23
+https://github.com/iotaledger/iota-sdk/blob/develop/bindings/wasm/README.md#L151-L168
 ```
 
+</div>
+</TabItem>
+<TabItem value="Node.js" label="Node.js">
+<div className={'hide-code-block-extras'}>
+
+```typescript reference
+https://github.com/iotaledger/iota-sdk/blob/develop/bindings/wasm/README.md#L127-L145
+```
+
+</div>
+</TabItem>
+</Tabs>
+
 ### Wallet
 
 After you [installed the library](#installing-the-iota-sdk), you can create a `Wallet` instance and interact with it.
 
+The following example will create a
+new [`Wallet`](https://wiki.iota.org/iota-sdk/references/nodejs/classes/Wallet/) [`Account`](https://wiki.iota.org/iota-sdk/references/nodejs/classes/Account/)
+that connects to the [Shimmer Testnet](https://api.testnet.shimmer.network) using the
+[`MnemonicSecretManager`](https://wiki.iota.org/iota-sdk/references/nodejs/interfaces/MnemonicSecretManager/)
+by calling
+the [`Wallet.createAccount(data)`](https://wiki.iota.org/iota-sdk/references/nodejs/classes/Wallet/#createaccount)
+function.
+
+
+<Tabs groupId="usage" queryString>
+<TabItem value="Web" label="Web">
+<div className={'hide-code-block-extras'}>
+
 ```typescript reference
-https://github.com/iotaledger/iota-sdk/blob/develop/bindings/nodejs/examples/wallet/getting-started.ts#L4-L60
+https://github.com/iotaledger/iota-sdk/blob/develop/bindings/wasm/README.md#L214-L239
 ```
 
-### Web Usage
-
-```javascript
-import init, {Wallet, CoinType} from "@iota/sdk-wasm/web";
-
-init().then(() => {
-    const wallet = new Wallet({
-        storagePath: './my-database',
-        coinType: CoinType.Shimmer,
-        clientOptions: {
-            nodes: ['https://api.testnet.shimmer.network'],
-        },
-        secretManager: {
-            mnemonic: "my development mnemonic",
-        },
-    });
-
-    const account = await wallet.createAccount({
-        alias: 'Alice',
-    });
-
-    account.addresses().then((addresses) => {
-        console.log(addresses);
-    });
-}).catch(console.error);
-
-// Default path to load is "iota_sdk_wasm_bg.wasm",
-// but you can override it by passing a path explicitly.
-//
-// init("./static/iota_sdk_wasm_bg.wasm").then(...)
+</div>
+</TabItem>
+<TabItem value="Node.js" label="Node.js">
+<div className={'hide-code-block-extras'}>
+
+```typescript reference
+https://github.com/iotaledger/iota-sdk/blob/develop/bindings/wasm/README.md#L184-L208
 ```
 
-## What's next?
+
+</div>
+</TabItem>
+</Tabs>
+
+## What's Next?
 
 ### How-To Guides
 
@@ -218,4 +245,5 @@ yarn run-example examples/client/00_get_info.ts
 
 ## API Reference
 
-The IOTA SDK Rust API Reference is in the [crate documentation](https://docs.rs/iota-sdk/latest/iota_sdk/).
+If you are using the Wasm binding, you use the Node.js API reference in the
+[IOTA Wiki](https://wiki.iota.org/shimmer/iota-sdk/references/nodejs/api_ref/).