Adds Ability to Create Account Component from Package in Web Client (0xMiden#1469)

Author: dagarcia7

CHANGELOG.md

@@ -16,7 +16,7 @@
 * Added `getMapEntries` method to `AccountStorage` in web client for iterating storage map entries ([#1323](https://github.com/0xMiden/miden-client/pull/1323)).
 * Added `Address` addition and removal for accounts ([#1367](https://github.com/0xMiden/miden-client/pull/1367)).
 * Refactored code into their own files and added `ProvenTransaction` and `TransactionStoreUpdate` bindings for the WebClient ([#1408](https://github.com/0xMiden/miden-client/pull/1408)).
-* Added `NoteFile` type, used for exporting and importing `Notes` ([#1378](https://github.com/0xMiden/miden-client/pull/1383)).
+* Added `NoteFile` type, used for exporting and importing `Notes`([#1378](https://github.com/0xMiden/miden-client/pull/1383)).
 * Build `IndexedDB` code from a `build.rs` instead of pushing artifacts to the repo ([#1409](https://github.com/0xMiden/miden-client/pull/1409)).
 * Implemented missing RPC endpoints: `/SyncStorageMaps`, `/SyncAccountVault` & `/SyncTransactions` ([#1362](https://github.com/0xMiden/miden-client/pull/1362)).
 * Updated `submit_proven_transaction()` to include `TransactionInputs` for validator ([#1421](https://github.com/0xMiden/miden-client/pull/1421)).
@@ -25,6 +25,7 @@
 * Started allowing for note ID prefixes in CLI `notes --send` ([#1433](https://github.com/0xMiden/miden-client/pull/1433)).
 * Refactored note scripts to be pre-loaded into the store instead of providing them through advice inputs ([#1426](https://github.com/0xMiden/miden-client/pull/1426)).
 * [BREAKING] Refactored client transaction APIs and the new `TransactionResult` type ([#1407](https://github.com/0xMiden/miden-client/pull/1407)).
+* Added ability to create `AccountComponent` from a `Package` and `StorageSlot` array in the Web Client ([#1469](https://github.com/0xMiden/miden-client/pull/1469)).
 
 ### Changes
 

crates/idxdb-store/build.rs

@@ -1,25 +1,40 @@
 use std::process::Command;
 
-fn main() -> miette::Result<(), String> {
-    println!("cargo::rerun-if-changed=src");
-
-    // Install dependencies for the TS project files with yarn
-    let status = Command::new("yarn").current_dir("src").status().map_err(|err| {
-        format!("could not install ts dependencies -- have you installed yarn? got error: {err}")
-    })?;
+#[cfg(windows)]
+fn run_yarn(args: &[&str]) -> Result<(), String> {
+    let status = Command::new("cmd")
+        .args(["/C", "yarn"])
+        .args(args)
+        .current_dir("src")
+        .status()
+        .map_err(|err| format!("could not run yarn via cmd: {err}"))?;
     if !status.success() {
-        return Err(format!("could not install ts dependencies: yarn exited with status {status}"));
+        return Err(format!("yarn exited with status {status}"));
     }
+    Ok(())
+}
 
-    // Build the TS files into JS and store the artifacts under src/js
+#[cfg(not(windows))]
+fn run_yarn(args: &[&str]) -> Result<(), String> {
     let status = Command::new("yarn")
-        .args(["build"])
+        .args(args)
         .current_dir("src")
         .status()
-        .map_err(|err| format!("failed to run build command for typescript: {err}"))?;
+        .map_err(|err| format!("could not run yarn: {err}"))?;
     if !status.success() {
-        return Err(format!("failed to build typescript: yarn build exited with status {status}"));
+        return Err(format!("yarn exited with status {status}"));
     }
+    Ok(())
+}
+
+fn main() -> miette::Result<(), String> {
+    println!("cargo::rerun-if-changed=src");
+
+    // Install deps
+    run_yarn(&[]).map_err(|e| format!("could not install ts dependencies: {e}"))?;
+
+    // Build TS
+    run_yarn(&["build"]).map_err(|e| format!("failed to build typescript: {e}"))?;
 
     Ok(())
 }

crates/web-client/js/types/index.d.ts

@@ -55,6 +55,7 @@ export {
   NoteType,
   OutputNote,
   OutputNotesArray,
+  Package,
   PublicKey,
   Rpo256,
   RpcClient,

crates/web-client/src/models/account_component.rs

@@ -2,10 +2,13 @@ use miden_client::account::StorageSlot as NativeStorageSlot;
 use miden_client::account::component::AccountComponent as NativeAccountComponent;
 use miden_client::auth::{AuthRpoFalcon512 as NativeRpoFalcon512, PublicKeyCommitment};
 use miden_client::crypto::rpo_falcon512::SecretKey as NativeSecretKey;
+use miden_client::vm::Package as NativePackage;
 use miden_core::mast::MastNodeExt;
 use wasm_bindgen::prelude::*;
 
 use crate::js_error_with_context;
+use crate::models::miden_arrays::StorageSlotArray;
+use crate::models::package::Package;
 use crate::models::script_builder::ScriptBuilder;
 use crate::models::secret_key::SecretKey;
 use crate::models::storage_slot::StorageSlot;
@@ -73,6 +76,26 @@ impl AccountComponent {
         .into();
         AccountComponent(native_auth_component)
     }
+
+    #[wasm_bindgen(js_name = "fromPackage")]
+    pub fn from_package(
+        package: &Package,
+        storage_slots: &StorageSlotArray,
+    ) -> Result<AccountComponent, JsValue> {
+        let native_package: NativePackage = package.into();
+        let native_library = native_package.unwrap_library().as_ref().clone();
+        let native_slots: Vec<NativeStorageSlot> = storage_slots
+            .__inner
+            .iter()
+            .map(|storage_slot| storage_slot.clone().into())
+            .collect();
+
+        NativeAccountComponent::new(native_library, native_slots)
+            .map(AccountComponent)
+            .map_err(|e| {
+                js_error_with_context(e, "Failed to create account component from package")
+            })
+    }
 }
 
 // CONVERSIONS

crates/web-client/src/models/mod.rs

@@ -77,6 +77,7 @@ pub mod note_tag;
 pub mod note_type;
 pub mod output_note;
 pub mod output_notes;
+pub mod package;
 pub mod partial_note;
 pub mod proven_transaction;
 pub mod provers;

crates/web-client/src/models/package.rs

@@ -0,0 +1,47 @@
+use miden_client::vm::Package as NativePackage;
+use wasm_bindgen::prelude::*;
+use wasm_bindgen_futures::js_sys::Uint8Array;
+
+use crate::utils::{deserialize_from_uint8array, serialize_to_uint8array};
+
+#[derive(Clone)]
+#[wasm_bindgen]
+pub struct Package(NativePackage);
+
+#[wasm_bindgen]
+impl Package {
+    pub fn serialize(&self) -> Uint8Array {
+        serialize_to_uint8array(&self.0)
+    }
+
+    pub fn deserialize(bytes: &Uint8Array) -> Result<Package, JsValue> {
+        deserialize_from_uint8array::<NativePackage>(bytes).map(Package)
+    }
+}
+
+// CONVERSIONS
+// ================================================================================================
+
+impl From<NativePackage> for Package {
+    fn from(native_package: NativePackage) -> Self {
+        Package(native_package)
+    }
+}
+
+impl From<&NativePackage> for Package {
+    fn from(native_package: &NativePackage) -> Self {
+        Package(native_package.clone())
+    }
+}
+
+impl From<Package> for NativePackage {
+    fn from(package: Package) -> Self {
+        package.0
+    }
+}
+
+impl From<&Package> for NativePackage {
+    fn from(package: &Package) -> Self {
+        package.0.clone()
+    }
+}

crates/web-client/src/utils/test_utils.rs

@@ -1,6 +1,16 @@
+use alloc::sync::Arc;
+
+use miden_client::Serializable;
 use miden_client::account::AccountId as NativeAccountId;
+use miden_client::assembly::Assembler as NativeAssembler;
 use miden_client::testing::account_id::ACCOUNT_ID_REGULAR_PRIVATE_ACCOUNT_UPDATABLE_CODE;
+use miden_client::vm::{
+    MastArtifact as NativeMastArtifact,
+    Package as NativePackage,
+    PackageManifest as NativePackageManifest,
+};
 use wasm_bindgen::prelude::*;
+use wasm_bindgen_futures::js_sys::Uint8Array;
 
 use crate::models::account_id::AccountId;
 
@@ -15,4 +25,32 @@ impl TestUtils {
             ACCOUNT_ID_REGULAR_PRIVATE_ACCOUNT_UPDATABLE_CODE.try_into().unwrap();
         native_account_id.into()
     }
+
+    #[wasm_bindgen(js_name = "createMockSerializedPackage")]
+    pub fn create_mock_serialized_package() -> Uint8Array {
+        pub const CODE: &str = "
+            export.foo
+                push.1.2 mul
+            end
+
+            export.bar
+                push.1.2 add
+            end
+        ";
+
+        let library = NativeAssembler::default().assemble_library([CODE]).unwrap();
+
+        let package_without_metadata = NativePackage {
+            name: "test_package_no_metadata".to_string(),
+            mast: NativeMastArtifact::Library(Arc::new(library)),
+            manifest: NativePackageManifest::new(None),
+            sections: vec![], // No metadata section
+            version: Default::default(),
+            description: None,
+        };
+
+        let bytes: Vec<u8> = package_without_metadata.to_bytes();
+
+        Uint8Array::from(bytes.as_slice())
+    }
 }

crates/web-client/test/global.test.d.ts

@@ -44,6 +44,7 @@ import {
   NoteType,
   OutputNote,
   OutputNotesArray,
+  Package,
   PublicKey,
   Rpo256,
   RpcClient,
@@ -132,6 +133,7 @@ declare global {
     NoteType: typeof NoteType;
     OutputNote: typeof OutputNote;
     OutputNotesArray: typeof OutputNotesArray;
+    Package: typeof Package;
     PublicKey: typeof PublicKey;
     Rpo256: typeof Rpo256;
     SecretKey: typeof SecretKey;

crates/web-client/test/package.test.ts

@@ -0,0 +1,43 @@
+import { Page } from "@playwright/test";
+import test from "./playwright.global.setup";
+
+export const deserializePackageFromBytes = async (
+  testingPage: Page
+): Promise<void> => {
+  await testingPage.evaluate(async () => {
+    const testPackageBytes = window.TestUtils.createMockSerializedPackage();
+    window.Package.deserialize(testPackageBytes);
+  });
+};
+
+export const createAccountComponentFromPackage = async (
+  testingPage: Page
+): Promise<void> => {
+  return await testingPage.evaluate(async () => {
+    const testPackageBytes = window.TestUtils.createMockSerializedPackage();
+    const deserializedPackage = window.Package.deserialize(testPackageBytes);
+    let emptyStorageSlot = window.StorageSlot.emptyValue();
+    let storageMap = new window.StorageMap();
+    let storageSlotMap = window.StorageSlot.map(storageMap);
+
+    window.AccountComponent.fromPackage(
+      deserializedPackage,
+      new window.MidenArrays.StorageSlotArray([
+        emptyStorageSlot,
+        storageSlotMap,
+      ])
+    );
+  });
+};
+
+test.describe("package tests", () => {
+  test("successfully deserializes a package from bytes", async ({ page }) => {
+    await deserializePackageFromBytes(page);
+  });
+
+  test("creates an account component from a package and storage slot array", async ({
+    page,
+  }) => {
+    await createAccountComponentFromPackage(page);
+  });
+});