Merge pull request #5340 from BitGo/BTC-1722.add-wasm-miniscript-to-web-demo

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

Author: OttoAllmendinger

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",

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 * 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>
+  );
+}

modules/web-demo/tsconfig.json

@@ -36,6 +36,9 @@
     {
       "path": "../bitgo"
     },
+    {
+      "path": "../abstract-utxo"
+    },
     {
       "path": "../key-card"
     },

modules/web-demo/webpack/base.config.js

@@ -88,6 +88,10 @@ const rules = [
       emitFile: false,
     },
   },
+  {
+    test: /miniscript.*\.wasm$/,
+    type: 'webassembly/sync',
+  },
 ];
 
 const devRules = [

webpack/bitgojs.config.js

@@ -59,6 +59,7 @@ module.exports = {
   experiments: {
     backCompat: false,
     asyncWebAssembly: true,
+    syncWebAssembly: true,
   },
   optimization: {
     minimizer: [