From 047784853c17511b5448a15045be461cda6e9359 Mon Sep 17 00:00:00 2001
From: Otto Allmendinger <otto@bitgo.com>
Date: Wed, 8 Jan 2025 14:37:00 +0100
Subject: [PATCH] feat: add wasm miniscript to web demo

Issue: BTC-1722
---
 modules/web-demo/package.json                 |  1 +
 modules/web-demo/src/App.tsx                  |  7 ++++++
 .../web-demo/src/components/Navbar/index.tsx  |  6 +++++
 .../src/components/WasmMiniscript/index.tsx   | 25 +++++++++++++++++++
 modules/web-demo/tsconfig.json                |  3 +++
 modules/web-demo/webpack/base.config.js       |  4 +++
 6 files changed, 46 insertions(+)
 create mode 100644 modules/web-demo/src/components/WasmMiniscript/index.tsx

diff --git a/modules/web-demo/package.json b/modules/web-demo/package.json
index f577a8d531..ca4e62e8f8 100644
--- a/modules/web-demo/package.json
+++ b/modules/web-demo/package.json
@@ -25,6 +25,7 @@
   },
   "dependencies": {
     "@bitgo/key-card": "^0.23.43",
+    "@bitgo/abstract-utxo": "^9.10.0",
     "@bitgo/sdk-api": "^1.57.6",
     "@bitgo/sdk-coin-ada": "^4.5.3",
     "@bitgo/sdk-coin-algo": "^2.1.55",
diff --git a/modules/web-demo/src/App.tsx b/modules/web-demo/src/App.tsx
index 9e5395a1f6..233f29f071 100644
--- a/modules/web-demo/src/App.tsx
+++ b/modules/web-demo/src/App.tsx
@@ -7,6 +7,9 @@ const BGComponent = lazy(() => import('@components/BitGoJS'));
 const BGApiComponent = lazy(() => import('@components/BitGoAPI'));
 const CoinsComponent = lazy(() => import('@components/Coins'));
 const KeyCardComponent = lazy(() => import('@components/KeyCard'));
+const WasmMiniscriptComponent = lazy(
+  () => import('@components/WasmMiniscript'),
+);
 const EcdsaChallengeComponent = lazy(
   () => import('@components/EcdsaChallenge'),
 );
@@ -24,6 +27,10 @@ const App = () => {
             <Route path="/bitgo-api" element={<BGApiComponent />} />
             <Route path="/coins" element={<CoinsComponent />} />
             <Route path="/keycard" element={<KeyCardComponent />} />
+            <Route
+              path="/wasm-miniscript"
+              element={<WasmMiniscriptComponent />}
+            />
             <Route
               path="/ecdsachallenge"
               element={<EcdsaChallengeComponent />}
diff --git a/modules/web-demo/src/components/Navbar/index.tsx b/modules/web-demo/src/components/Navbar/index.tsx
index e54909e43f..8cda531e5c 100644
--- a/modules/web-demo/src/components/Navbar/index.tsx
+++ b/modules/web-demo/src/components/Navbar/index.tsx
@@ -38,6 +38,12 @@ const Navbar = () => {
       >
         Key Card
       </NavItem>
+      <NavItem
+        activeRoute={pathname === '/wasm-miniscript'}
+        onClick={() => navigate('/wasm-miniscript')}
+      >
+        Wasm Miniscript
+      </NavItem>
       <NavItem
         activeRoute={pathname === '/ecdsachallenge'}
         onClick={() => navigate('/ecdsachallenge')}
diff --git a/modules/web-demo/src/components/WasmMiniscript/index.tsx b/modules/web-demo/src/components/WasmMiniscript/index.tsx
new file mode 100644
index 0000000000..7bf8ba1e57
--- /dev/null
+++ b/modules/web-demo/src/components/WasmMiniscript/index.tsx
@@ -0,0 +1,25 @@
+import React, { useState } from 'react';
+
+import * as AbstractUtxo from '@bitgo/abstract-utxo';
+
+const defaultDescriptor =
+  'wpkh(xpub661MyMwAqRbcFQpwd6c6aaioiXWuygdeknqE8v6PSNusNjwZypj1uXTVNysfsFPEDL6X3yS1kL6JeWyy9bAiR97Gz8KD9Z1W54uBw9U9j2t/*)';
+
+export default function () {
+  const [descriptorString] = useState(defaultDescriptor);
+
+  const descriptor = AbstractUtxo.descriptor.Descriptor.fromString(
+    descriptorString,
+    'derivable',
+  );
+  return (
+    <div>
+      <pre>{descriptor.toString()}</pre>
+      <pre>
+        {Buffer.from(descriptor.atDerivationIndex(0).scriptPubkey()).toString(
+          'hex',
+        )}
+      </pre>
+    </div>
+  );
+}
diff --git a/modules/web-demo/tsconfig.json b/modules/web-demo/tsconfig.json
index 9b1de98fda..77b71afd3e 100644
--- a/modules/web-demo/tsconfig.json
+++ b/modules/web-demo/tsconfig.json
@@ -36,6 +36,9 @@
     {
       "path": "../bitgo"
     },
+    {
+      "path": "../abstract-utxo"
+    },
     {
       "path": "../key-card"
     },
diff --git a/modules/web-demo/webpack/base.config.js b/modules/web-demo/webpack/base.config.js
index 3535f50e6f..56d538d6e2 100644
--- a/modules/web-demo/webpack/base.config.js
+++ b/modules/web-demo/webpack/base.config.js
@@ -88,6 +88,10 @@ const rules = [
       emitFile: false,
     },
   },
+  {
+    test: /miniscript.*\.wasm$/,
+    type: 'webassembly/sync',
+  },
 ];
 
 const devRules = [