feat: use serde_json for serialization

Author: riverKanies

docs/cookbook/wasm.md

@@ -53,25 +53,25 @@ Here is the relevant rust code:
 --8<-- "examples/wasm/rust/src/lib.rs:wallet"
 ```
 
-The first time you load the page in your browser, you should see info in the console confirming that a new wallet was created and a full scan was performed. If you reload the page you should see that the wallet was loaded from the previously saved data and a sync was performed instead of a scan.
+The first time you load the page in your browser, you should see info in the console confirming that a new wallet was created and a full scan was performed. If you then reload the page you should see that the wallet was loaded from the previously saved data and a sync was performed instead of a full scan.
 
 #### System Time Consideration
 Notice we are using a JS binding to access system time with `js_sys::Date::now()`, then passing that timestamp to the `apply_update_at()` function, rather than attempting to use the `.apply_update()` function which would throw an error.
 
 #### Persistence Consideration
-Also notice we are using an in-memory wallet with `.create_wallet_no_persist()`. If you try to use persistence through file or database you will get an error becuase those features require OS access. Instead we have to create a binding to pass the wallet data to the JavaScript environment where we can handle persistence. The rust side methods to extract the wallet data are:
+Also notice we are using an in-memory wallet with `.create_wallet_no_persist()`. If you try to use persistence through file or database you will get an error becuase those features require OS access. Instead we have to create a binding to pass the wallet data to the JavaScript environment where we can handle persistence. We have a method to grab the new updates to the wallet data, and a method to merge new updates with existing data. With this simple approach to persistence we must always merge existing data with the updates unless there is no existing data (i.e. after new wallet creation). The rust side methods to extract the wallet data are:
 
 ```rust
 --8<-- "examples/wasm/rust/src/lib.rs:store"
 ```
 
-And they are called from our minimal custom browser store:
+Notice we're converting the wallet data to a JSON string so that it plays nicely with WASM; and on the JS side we'll save our data string with a minimal custom browser store:
 
 ```javascript
 --8<-- "examples/wasm/js/index.js:store"
 ```
 
-This is just to show an example of how the wallet data can be persisted. We're using local storage here and stringifying the data (which takes some special logic to handle the Map values in the data). In practice a wallet app should probably use cloud storage of some sort since browser local storage is relatively temporary.
+This is just to show an example of how the wallet data can be persisted. We're using local storage here, but in practice a wallet app would generally use cloud storage of some sort since browser local storage tends to be temporary.
 
 ### Balance and Addresses
 

examples/wasm/js/index.js

@@ -1,34 +1,17 @@
 import {  WalletWrapper, greet } from '../rust/pkg';
 
 // --8<-- [start:store]
-// needed to handle js Map serialization
+// simple string storage example
 const Store = {
     save: data => {
         if (!data) {
             console.log("No data to save");
             return;
         }
-        const serializedStaged = JSON.stringify(data, (key, value) => {
-            if (value instanceof Map) {
-                return {
-                    dataType: 'Map',
-                    value: Array.from(value.entries())
-                };
-            }
-            return value;
-        });
-        localStorage.setItem("walletData", serializedStaged);
+        localStorage.setItem("walletData", data);  // data is already a JSON string
     },
     load: () => {
-        const walletDataString = localStorage.getItem("walletData");
-        // Convert serialized Maps back to Map objects when loading
-        const walletData = JSON.parse(walletDataString, (key, value) => {
-            if (value?.dataType === 'Map') {
-                return new Map(value.value);
-            }
-            return value;
-        });
-        return walletData;
+        return localStorage.getItem("walletData");  // return the JSON string directly
     }
 }
 // --8<-- [end:store]
@@ -42,11 +25,11 @@ async function run() {
     console.log(greet()); // Should print "Hello, bdk-wasm!"
 
     // --8<-- [start:wallet]
-    let walletData = Store.load();
-    console.log("Wallet data:", walletData);
+    let walletDataString = Store.load();
+    console.log("Wallet data:", walletDataString);
 
     let wallet;
-    if (!walletData) {
+    if (!walletDataString) {
         console.log("Creating new wallet");
         wallet = new WalletWrapper(
             "signet",
@@ -58,16 +41,16 @@ async function run() {
         console.log("Performing Full Scan...");
         await wallet.scan(2);
 
-        const stagedData = wallet.take_staged();
-        console.log("Staged:", stagedData);
+        const stagedDataString = wallet.take_staged();
+        console.log("Staged:", stagedDataString);
 
-        Store.save(stagedData);
+        Store.save(stagedDataString);
         console.log("Wallet data saved to local storage");
-        walletData = stagedData;
+        walletDataString = stagedDataString;
     } else {
         console.log("Loading wallet");
         wallet = WalletWrapper.load(
-            walletData,
+            walletDataString,
             "https://mutinynet.com/api",
             externalDescriptor,
             internalDescriptor
@@ -76,10 +59,10 @@ async function run() {
         console.log("Syncing...");
         await wallet.sync(2);
 
-        const stagedData = wallet.take_staged();
-        console.log("Staged:", stagedData);
+        const stagedDataString = wallet.take_staged();
+        console.log("Staged:", stagedDataString);
 
-        Store.save(stagedData);
+        Store.save(stagedDataString);
         console.log("Wallet data saved to local storage");
     }
     // --8<-- [end:wallet]
@@ -89,12 +72,14 @@ async function run() {
     console.log("Balance:", wallet.balance());
 
     // Test address generation
-    console.log("New address:", wallet.get_new_address());
+    console.log("New address:", wallet.reveal_next_address());
 
-    const mergedData = wallet.take_merged(walletData);
-    console.log("Merged:", mergedData);
+    // handle changeset merge on rust side
+    const mergedDataString = wallet.take_merged(walletDataString);
+    
+    console.log("Merged:", mergedDataString);
 
-    Store.save(mergedData);
+    Store.save(mergedDataString);
     console.log("new address saved");
     // --8<-- [end:utils]
 }

examples/wasm/rust/Cargo.toml

@@ -16,6 +16,7 @@ wasm-bindgen-futures = "0.4.45"
 js-sys = "0.3.72"
 web-sys = { version = "0.3.72", features = ["console"] }
 serde-wasm-bindgen = "0.6.5"
+serde_json = "1.0"
 
 # The `console_error_panic_hook` crate provides better debugging of panics by
 # logging them with `console.error`. This is great for development, but requires

examples/wasm/rust/src/lib.rs

@@ -5,7 +5,8 @@ use bdk_esplora::{
 use bdk_wallet::{chain::Merge, bitcoin::Network, ChangeSet, KeychainKind, Wallet};
 use js_sys::Date;
 use wasm_bindgen::prelude::*;
-use serde_wasm_bindgen::{from_value, to_value};
+// use serde_wasm_bindgen::{from_value, to_value};
+use serde_json::{self, Value};
 
 const PARALLEL_REQUESTS: usize = 1;
 
@@ -71,15 +72,16 @@ impl WalletWrapper {
         })
     }
 
-    pub fn load(changeset: JsValue, url: &str, external_descriptor: &str, internal_descriptor: &str) -> JsResult<WalletWrapper> {
-        let changeset = from_value(changeset)?;
+    pub fn load(changeset_str: &str, url: &str, external_descriptor: &str, internal_descriptor: &str) -> JsResult<WalletWrapper> {
+        let changeset_value: Value = serde_json::from_str(changeset_str)?;
+        let changeset: ChangeSet = serde_json::from_value(changeset_value)?;
+
         let wallet_opt = Wallet::load()
             .descriptor(KeychainKind::External, Some(external_descriptor.to_string()))
             .descriptor(KeychainKind::Internal, Some(internal_descriptor.to_string()))
             .extract_keys()
             .load_wallet_no_persist(changeset)?;
 
-
         let wallet = match wallet_opt {
             Some(wallet) => wallet,
             None => return Err(JsError::new("Failed to load wallet, check the changeset")),
@@ -126,7 +128,7 @@ impl WalletWrapper {
         balance.total().to_sat()
     }
 
-    pub fn get_new_address(&mut self) -> String {
+    pub fn reveal_next_address(&mut self) -> String {
         let address = self
             .wallet
             .reveal_next_address(KeychainKind::External);
@@ -144,24 +146,27 @@ impl WalletWrapper {
     }
 
     // --8<-- [start:store]
-    pub fn take_staged(&mut self) -> JsResult<JsValue> {
+    pub fn take_staged(&mut self) -> JsResult<String> {
         match self.wallet.take_staged() {
             Some(changeset) => {
-                Ok(to_value(&changeset)?)
+                let value = serde_json::to_value(&changeset)?;
+                Ok(serde_json::to_string(&value)?)
             }
-            None => Ok(JsValue::null()),
+            None => Ok("null".to_string()),
         }
     }
 
-    pub fn take_merged(&mut self, previous: JsValue) -> JsResult<JsValue> {
+    pub fn take_merged(&mut self, previous: String) -> JsResult<String> {
         match self.wallet.take_staged() {
             Some(curr_changeset) => {
-                let mut changeset: ChangeSet = from_value(previous)?;
-                changeset.merge(curr_changeset);
-                Ok(to_value(&changeset)?)
+                let previous_value: Value = serde_json::from_str(&previous)?;
+                let mut previous_changeset: ChangeSet = serde_json::from_value(previous_value)?;
+                previous_changeset.merge(curr_changeset);
+                let final_value = serde_json::to_value(&previous_changeset)?;
+                Ok(serde_json::to_string(&final_value)?)
             }
-            None => Ok(JsValue::null()),
+            None => Ok("null".to_string()),
         }
     }
     // --8<-- [end:store]
-}
+}