feat(ts-sdk): add test case decoding with wasm

Signed-off-by: Eric Hegnes <eric@hegnes.com>

Author: ehegnes

app2/src/lib/components/model/PacketComponent.svelte

@@ -1,24 +1,22 @@
 <script lang="ts">
-import BlockHashComponent from "$lib/components/model/BlockHashComponent.svelte"
 import ChainComponent from "$lib/components/model/ChainComponent.svelte"
 import ErrorComponent from "$lib/components/model/ErrorComponent.svelte"
 import HeightComponent from "$lib/components/model/HeightComponent.svelte"
 import PacketTracesComponent from "$lib/components/model/PacketTracesComponent.svelte"
-import TransactionHashComponent from "$lib/components/model/TransactionHashComponent.svelte"
-import DateTimeComponent from "$lib/components/ui/DateTimeComponent.svelte"
 import Label from "$lib/components/ui/Label.svelte"
 import LongMonoWord from "$lib/components/ui/LongMonoWord.svelte"
 import Skeleton from "$lib/components/ui/Skeleton.svelte"
 import * as AppRuntime from "$lib/runtime"
 import { chains } from "$lib/stores/chains.svelte"
 import { packetDetails } from "$lib/stores/packets.svelte"
+import ucs03Wasm from "$wasm/ucs03-zkgm-packet_bg.wasm?url"
 import { getChain } from "@unionlabs/sdk/schema"
 import * as Ucs03 from "@unionlabs/sdk/Ucs03"
+import { WasmTest } from "@unionlabs/sdk/WasmTest"
 import { Effect, Option } from "effect"
 import { pipe } from "effect/Function"
-import { getOrUndefined } from "effect/Option"
 import * as S from "effect/Schema"
-import { fromHex } from "viem"
+import { fromHex, hexToBytes } from "viem"
 import A from "../ui/A.svelte"
 
 const sourceChain = $derived(
@@ -42,6 +40,25 @@ const destinationChain = $derived(
       ),
   ),
 )
+
+const wasmDetails = AppRuntime.runPromiseExit$(() =>
+  pipe(
+    WasmTest,
+    Effect.andThen((wasm) =>
+      pipe(
+        packetDetails.data,
+        Effect.flatMap((data) =>
+          pipe(
+            data.data,
+            hexToBytes,
+            wasm.decodePacket,
+          )
+        ),
+      )
+    ),
+    Effect.provide(WasmTest.Default(ucs03Wasm)),
+  )
+)
 </script>
 
 {#if Option.isSome(packetDetails.error)}
@@ -222,6 +239,11 @@ const destinationChain = $derived(
       <LongMonoWord class="mt-2">{packetDetails.data.value.data}</LongMonoWord>
     </div>
 
+    <div class="p-4">
+      <Label>Raw Packet Data (WASM)</Label>
+      <pre>{wasmDetails.current}</pre>
+    </div>
+
     {#if Option.isSome(packetDetails.data.value.acknowledgement)}
       <div class="p-4">
         <Label>Acknowledgement</Label>

app2/svelte.config.js

@@ -20,6 +20,7 @@ const config = {
     alias: {
       "@unionlabs/sdk": "../ts-sdk/src/index.js",
       "@unionlabs/sdk/*": "../ts-sdk/src/*",
+      "@unionlabs/sdk/ucs03.wasm": "../ts-sdk/src/internal/wasm/ucs03-zkgm-packet_bg.wasm",
       "@unionlabs/sdk-evm": "../ts-sdk-evm/src/index.js",
       "@unionlabs/sdk-evm/*": "../ts-sdk-evm/src/*",
       "@unionlabs/sdk-cosmos": "../ts-sdk-cosmos/src/index.js",

app2/vite.config.ts

@@ -1,6 +1,7 @@
 import { sveltekit } from "@sveltejs/kit/vite"
 import tailwindcss from "@tailwindcss/vite"
 import { svelteTesting } from "@testing-library/svelte/vite"
+import * as Path from "node:path"
 import { defineConfig } from "vite"
 
 export default defineConfig({
@@ -10,6 +11,16 @@ export default defineConfig({
   },
   plugins: [sveltekit(), tailwindcss()],
   build: { sourcemap: true },
+  assetsInclude: ["**/*.wasm"],
+  resolve: {
+    alias: {
+      $wasm: Path.resolve(__dirname, "../ts-sdk/src/internal/wasm"),
+      // "@unionlabs/sdk/ucs03.wasm": Path.resolve(
+      //   __dirname,
+      //   "../ts-sdk/src/internal/wasm/ucs03-zkgm-packet_bg.wasm",
+      // ),
+    },
+  },
   server: {
     allowedHosts: true,
   },

tools/rust/buildWasm.nix

@@ -19,9 +19,15 @@ let
       contractFileNameWithoutExt,
     }:
     ''
-      ${pkgs.binaryen}/bin/wasm-opt target/wasm32-unknown-unknown/wasm-release/${contractFileNameWithoutExt}.wasm -Oz -o ${(crateCargoToml crateDirFromRoot).package.name}
+      ${pkgs.binaryen}/bin/wasm-opt \
+        target/wasm32-unknown-unknown/wasm-release/${contractFileNameWithoutExt}.wasm \
+        -Oz -o ${(crateCargoToml crateDirFromRoot).package.name}.wasm
 
-      ${pkgs.lib.meta.getExe pkgsUnstable.wasm-bindgen-cli_0_2_100} ${(crateCargoToml crateDirFromRoot).package.name} --out-dir $out --typescript --target web
+      ${pkgs.lib.meta.getExe pkgsUnstable.wasm-bindgen-cli_0_2_100} \
+        ${(crateCargoToml crateDirFromRoot).package.name}.wasm \
+        --out-dir $out \
+        --typescript \
+        --target web
     '';
   cargoBuildExtraArgs =
     features:

ts-sdk/package.json

@@ -22,7 +22,8 @@
     ".": "./src/index.ts",
     "./*": "./src/*.ts",
     "./examples/*": "./examples/*.ts",
-    "./internal/*": null
+    "./internal/*": null,
+    "./ucs03.wasm": "./src/internal/wasm/ucs03-zkgm-packet_bg.wasm"
   },
   "scripts": {
     "build": "pnpm build-esm && pnpm build-annotate && pnpm build-cjs && build-utils pack-v3",

ts-sdk/src/WasmTest.ts

@@ -0,0 +1,41 @@
+import { Effect } from "effect"
+
+function isNodeRuntime(): boolean {
+  return typeof process !== "undefined" && !!process.versions?.node
+}
+
+export class WasmTest extends Effect.Service<WasmTest>()("WasmTest", {
+  scoped: Effect.fn(function*(workerUrl?: string) {
+    const wasm = yield* Effect.tryPromise(() => import("./internal/wasm/ucs03-zkgm-packet.js"))
+
+    yield* Effect.log({ wasm })
+
+    const wasmUrl = workerUrl ?? new URL(
+      "./internal/wasm/ucs03-zkgm-packet_bg.wasm",
+      import.meta.url,
+    )
+
+    if (isNodeRuntime()) {
+      const { readFile } = yield* Effect.tryPromise(() => import("node:fs/promises"))
+      const bytes = yield* Effect.tryPromise(() => readFile(wasmUrl))
+      yield* Effect.tryPromise(() => wasm.default({ module_or_path: bytes }))
+    } else {
+      console.log("TRYING TO INSTANTIATE IN BROWSER")
+      yield* Effect.tryPromise(() => wasm.default(workerUrl))
+    }
+
+    const decodePacket = Effect.fn("decodePacket")(
+      (packet: Uint8Array) => Effect.try(() => wasm.decode_packet(packet)),
+    )
+
+    const encodePacket = Effect.fn("encodePacket")(
+      (packet: Uint8Array) => Effect.try(() => wasm.encode_packet(packet)),
+    )
+
+    return {
+      wasm,
+      decodePacket,
+      encodePacket,
+    } as const
+  }),
+}) {}

ts-sdk/src/index.ts

@@ -181,3 +181,11 @@ export * as Staking from "./Staking.js"
  * @since 2.0.0
  */
 // export * as GasPrice from "./GasPrice.js"
+//
+
+/**
+ * This module provides a WASM-bound decode/encode functionality.
+ *
+ * @since 2.0.0
+ */
+export * as WasmTest from "./WasmTest.js"

ts-sdk/src/internal/wasm/ucs03-zkgm-packet.d.ts

@@ -0,0 +1,49 @@
+/* tslint:disable */
+/* eslint-disable */
+export function decode_packet(packet: Uint8Array): any;
+export function encode_packet(packet: any): any;
+
+export type InitInput = RequestInfo | URL | Response | BufferSource | WebAssembly.Module;
+
+export interface InitOutput {
+  readonly memory: WebAssembly.Memory;
+  readonly decode_packet: (a: number, b: number, c: number) => void;
+  readonly encode_packet: (a: number, b: number) => void;
+  readonly allocate: (a: number) => number;
+  readonly deallocate: (a: number) => void;
+  readonly interface_version_8: () => void;
+  readonly requires_cosmwasm_1_1: () => void;
+  readonly requires_cosmwasm_1_2: () => void;
+  readonly requires_cosmwasm_1_3: () => void;
+  readonly requires_cosmwasm_1_4: () => void;
+  readonly requires_cosmwasm_2_0: () => void;
+  readonly requires_iterator: () => void;
+  readonly requires_staking: () => void;
+  readonly requires_stargate: () => void;
+  readonly commit_hash: (a: number) => void;
+  readonly __wbindgen_export_0: (a: number) => void;
+  readonly __wbindgen_export_1: (a: number, b: number) => number;
+  readonly __wbindgen_export_2: (a: number, b: number, c: number, d: number) => number;
+  readonly __wbindgen_add_to_stack_pointer: (a: number) => number;
+}
+
+export type SyncInitInput = BufferSource | WebAssembly.Module;
+/**
+* Instantiates the given `module`, which can either be bytes or
+* a precompiled `WebAssembly.Module`.
+*
+* @param {{ module: SyncInitInput }} module - Passing `SyncInitInput` directly is deprecated.
+*
+* @returns {InitOutput}
+*/
+export function initSync(module: { module: SyncInitInput } | SyncInitInput): InitOutput;
+
+/**
+* If `module_or_path` is {RequestInfo} or {URL}, makes a request and
+* for everything else, calls `WebAssembly.instantiate` directly.
+*
+* @param {{ module_or_path: InitInput | Promise<InitInput> }} module_or_path - Passing `InitInput` directly is deprecated.
+*
+* @returns {Promise<InitOutput>}
+*/
+export default function __wbg_init (module_or_path?: { module_or_path: InitInput | Promise<InitInput> } | InitInput | Promise<InitInput>): Promise<InitOutput>;