feat(web-demo): add wasm-miniscript to web demo

Issue: BTC-1722

Author: OttoAllmendinger

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 />}

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')}

modules/web-demo/src/components/WasmMiniscript/index.tsx

@@ -0,0 +1,25 @@
+import React, { useState } from 'react';
+import { Descriptor } from '@bitgo/wasm-miniscript';
+
+// these two lines are necessary to load the wasm module
+// eslint-disable-next-line import/no-internal-modules
+import * as wasm from '@bitgo/wasm-miniscript/dist/wasm/wasm_miniscript';
+void wasm;
+
+const defaultDescriptor =
+  'wpkh(xpub661MyMwAqRbcFQpwd6c6aaioiXWuygdeknqE8v6PSNusNjwZypj1uXTVNysfsFPEDL6X3yS1kL6JeWyy9bAiR97Gz8KD9Z1W54uBw9U9j2t/*)';
+
+export default function () {
+  const [descriptorString] = useState(defaultDescriptor);
+  const descriptor = Descriptor.fromString(descriptorString, 'derivable');
+  return (
+    <div>
+      <pre>{descriptor.toString()}</pre>
+      <pre>
+        {Buffer.from(descriptor.atDerivationIndex(0).scriptPubkey()).toString(
+          'hex',
+        )}
+      </pre>
+    </div>
+  );
+}