From fce4a08e52d551873a8fd37a77fdbf55f04a7a35 Mon Sep 17 00:00:00 2001
From: Thoralf-M <46689931+Thoralf-M@users.noreply.github.com>
Date: Fri, 15 Dec 2023 13:11:31 +0100
Subject: [PATCH] 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 <lucas.tortora@iota.org>
---
 .../1.0/docs/getting-started/wasm.mdx         | 96 ++++++++++++-------
 1 file changed, 62 insertions(+), 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
index f76c4ee356e..6d65222f30f 100644
--- 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/).
\ No newline at end of file