feat(wallet-connection): Connect dapp directly to wallet UI

docs/env.md

@@ -122,6 +122,18 @@ for the Prometheus scrape endpoint to export telemetry.
 
 Lifetime: until we decide not to support Prometheus for metrics export
 
+## SOLO_BRIDGE_TARGET
+
+Affects: solo
+
+This enables a proxy so that the solo bridge interface (/wallet-bridge.html) is backed by the smart wallet (/wallet/bridge.html). Dapps designed for the solo bridge can enable this until they connect to the smart wallet directly.
+
+```
+BRIDGE_TARGET=http://localhost:3001 make BASE_PORT=8002 scenario3-run
+```
+
+Lifetime: smart wallet transition period
+
 ## SOLO_LMDB_MAP_SIZE
 
 Affects: solo

packages/casting/README.md

@@ -13,7 +13,7 @@ An example of following an on-chain mailbox in code (using this package) is:
 ```js
 // First, obtain a Hardened JS environment via Endo.
 import '@endo/init/pre-remoting.js'; // needed only for the next line
-import '@agoric/castingSpec/node-fetch-shim.js'; // needed for Node.js
+import '@agoric/casting/node-fetch-shim.js'; // needed for Node.js
 import '@endo/init';
 
 import {

packages/solo/package.json

@@ -45,6 +45,7 @@
     "deterministic-json": "^1.0.5",
     "esm": "agoric-labs/esm#Agoric-built",
     "express": "^4.17.1",
+    "http-proxy-middleware": "^2.0.6",
     "import-meta-resolve": "^1.1.1",
     "minimist": "^1.2.0",
     "morgan": "^1.9.1",

packages/solo/public/wallet-bridge.html

@@ -154,11 +154,16 @@
         });
       };
 
-      // Start the flow of messages.
-      if (window.parent !== window) {
-        window.parent.postMessage({ type: 'walletBridgeLoaded' }, '*');
-      }
-      retryWebSocket();
+      // This ensures the message wont be posted until after the iframe's
+      // "onLoad" event fires so we can rely on the consistent ordering of
+      // events in the WalletConnection component.
+      window.addEventListener('load', () => {
+        // Start the flow of messages.
+        if (window.parent !== window) {
+          window.parent.postMessage({ type: 'walletBridgeLoaded' }, '*');
+        }
+        retryWebSocket();
+      });
     </script>
   </body>
 </html>

packages/solo/src/web.js

@@ -1,9 +1,11 @@
-/* global setTimeout clearTimeout setInterval clearInterval */
+/* global setTimeout clearTimeout setInterval clearInterval process */
 // Start a network service
 import path from 'path';
 import http from 'http';
 import { createConnection } from 'net';
+import { existsSync as existsSyncAmbient } from 'fs';
 import express from 'express';
+import { createProxyMiddleware } from 'http-proxy-middleware';
 import WebSocket from 'ws';
 import anylogger from 'anylogger';
 import morgan from 'morgan';
@@ -71,6 +73,7 @@ export async function makeHTTPListener(
   walletHtmlDir = '',
   validateAndInstallBundle,
   connections,
+  { env = process.env, existsSync = existsSyncAmbient } = {},
 ) {
   // Enrich the inbound command with some metadata.
   const inboundCommand = (
@@ -126,13 +129,36 @@ export async function makeHTTPListener(
   app.use(express.json({ limit: maximumBundleSize })); // parse application/json
   const server = http.createServer(app);
 
+  // Proxy to another wallet bridge
+  const { SOLO_BRIDGE_TARGET: bridgeTarget } = env;
+  if (bridgeTarget) {
+    app.use(
+      ['/wallet-bridge.html', '/wallet'],
+      createProxyMiddleware({
+        target: bridgeTarget,
+        pathRewrite: {
+          '^/wallet-bridge.html': '/wallet/bridge.html',
+        },
+        // changeOrigin: true,
+      }),
+    );
+  }
+
   // serve the static HTML for the UI
   const htmldir = path.join(basedir, 'html');
   log(`Serving static files from ${htmldir}`);
   app.use(express.static(htmldir));
   app.use(express.static(new URL('../public', import.meta.url).pathname));
 
-  if (walletHtmlDir) {
+  if (walletHtmlDir && !bridgeTarget) {
+    // Transition localStorage based bridge
+    if (existsSync(path.join(walletHtmlDir, 'bridge.html'))) {
+      console.log('redirecting wallet bridge');
+      app.get('/wallet-bridge.html', (req, res) =>
+        res.redirect('/wallet/bridge.html'),
+      );
+    }
+
     // Serve the wallet directory.
     app.use('/wallet', express.static(walletHtmlDir));
 

packages/wallet/api/src/wallet.js

@@ -335,7 +335,11 @@ export function buildRootObject(vatPowers) {
       },
       getDepositFacetId: walletAdmin.getDepositFacetId,
       getAdminFacet() {
-        return Far('adminFacet', { ...walletAdmin, ...notifiers });
+        return Far('adminFacet', {
+          ...walletAdmin,
+          ...notifiers,
+          getScopedBridge: wallet.getScopedBridge,
+        });
       },
       getIssuer: walletAdmin.getIssuer,
       getIssuers: walletAdmin.getIssuers,

packages/wallet/ui/config-overrides/index.js

@@ -1,5 +1,52 @@
+// cribbed from https://www.npmjs.com/package/react-app-rewire-multiple-entry
+/* global __dirname, require, module */
+
+const path = require('path');
+const HtmlWebPackPlugin = require('html-webpack-plugin');
+const multiEntry = require('react-app-rewire-multiple-entry');
+
+const bridgeTemplate = path.resolve(
+  path.join(__dirname, '..', 'public', 'bridge.html'),
+);
+
+const multipleEntry = multiEntry([
+  {
+    template: 'public/index.html',
+    entry: 'src/index.jsx',
+  },
+  {
+    template: 'public/bridge.html',
+    entry: 'src/bridge.jsx',
+  },
+]);
+
 module.exports = function override(config, _env) {
   config.resolve.fallback = { path: false, crypto: false };
   config.ignoreWarnings = [/Failed to parse source map/];
+
+  const htmlWebpackPlugin = config.plugins.find(
+    plugin => plugin.constructor.name === 'HtmlWebpackPlugin',
+  );
+  if (!htmlWebpackPlugin) {
+    throw new Error("Can't find HtmlWebpackPlugin");
+  }
+
+  multipleEntry.addMultiEntry(config);
+
+  const bridgeKeys = Object.keys(config.entry).filter(k =>
+    k.startsWith('bridge'),
+  );
+  const opts = {
+    ...htmlWebpackPlugin.userOptions,
+    template: bridgeTemplate,
+    filename: './bridge.html',
+    chunks: bridgeKeys,
+  };
+  htmlWebpackPlugin.userOptions = {
+    ...htmlWebpackPlugin.userOptions,
+    excludeChunks: bridgeKeys,
+  };
+  const plug2 = new HtmlWebPackPlugin(opts);
+  config.plugins.push(plug2);
   return config;
 };

packages/wallet/ui/jsconfig.json

@@ -1,5 +1,6 @@
 {
   "compilerOptions": {
+    "jsx": "react",
     "target": "esnext",
     "module": "esnext",
     "noEmit": true,

packages/wallet/ui/package.json

@@ -36,6 +36,7 @@
     "eslint-plugin-react-hooks": "^4.3.0",
     "process": "^0.11.10",
     "react": "^16.8.0",
+    "react-app-rewire-multiple-entry": "^2.2.3",
     "react-app-rewired": "^2.2.1",
     "react-dom": "^16.8.0",
     "react-router-dom": "^5.3.0",

packages/wallet/ui/public/bridge.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8" />
+    <script src="%PUBLIC_URL%/lockdown.umd.js"></script>
+    <title>Agoric Wallet Bridge</title>
+</head>
+
+<body style="overflow-x: hidden; overflow-y: scroll">
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+</body>
+
+</html>

packages/wallet/ui/src/bridge.jsx

@@ -0,0 +1,135 @@
+// @ts-check
+/* eslint-disable import/no-extraneous-dependencies */
+import '@endo/eventual-send/shim';
+import './lockdown.js';
+
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+Error.stackTraceLimit = Infinity;
+
+/** ISSUE: where are these defined? */
+const BridgeProtocol = /** @type {const} */ ({
+  loaded: 'walletBridgeLoaded',
+  opened: 'walletBridgeOpened',
+});
+
+const checkParentWindow = () => {
+  const me = window;
+  const { parent } = window;
+  if (me === parent) {
+    throw Error('window.parent === parent!!!');
+  }
+};
+
+/**
+ * Install a dApp "connection" where messages posted from
+ * the dApp are forwarded to localStorage and vice versa.
+ *
+ * @param {{
+ *   addEventListener: typeof window.addEventListener,
+ *   parentPost: typeof window.postMessage,
+ *   t0: number,
+ * }} io
+ */
+const installDappConnection = ({ addEventListener, parentPost, t0 }) => {
+  checkParentWindow();
+
+  /** @type { string } */
+  let origin;
+
+  /** @type {(key: string, value: string) => void} */
+  let setItem;
+  /** @type {string[]} */
+  const buffer = [];
+
+  console.debug('bridge: installDappConnection');
+
+  parentPost({ type: BridgeProtocol.loaded }, '*');
+  parentPost({ type: BridgeProtocol.opened }, '*');
+
+  let outIx = 0; // TODO: persist index in storage
+  /** @param {Record<string, any>} payload */
+
+  const { stringify, parse } = JSON;
+
+  addEventListener('message', ev => {
+    if (!ev.data?.type?.startsWith('CTP_')) {
+      return;
+    }
+
+    if (origin === undefined) {
+      // First-come, first-serve.
+      origin = ev.origin;
+    }
+    if (setItem) {
+      console.debug('bridge: message from dapp->localStorage', origin, ev.data);
+      setItem(stringify(['out', origin, t0, outIx]), stringify(ev.data));
+    } else {
+      console.debug('bridge: message from dapp->buffer', origin, ev.data);
+      buffer.push(harden(ev.data));
+    }
+  });
+
+  return harden({
+    /** @param {typeof window.localStorage} storage */
+    connectStorage: storage => {
+      addEventListener('storage', ev => {
+        if (!ev.key || !ev.newValue) {
+          return;
+        }
+        const [tag, targetOrigin, targetT, _keyIx] = JSON.parse(ev.key); // or throw
+        if (tag !== 'in' || targetOrigin !== origin || targetT !== t0) {
+          return;
+        }
+        const payload = parse(ev.newValue); // or throw
+        storage.removeItem(ev.key);
+        console.debug('bridge: storage -> message to dapp', origin, payload);
+        parentPost(payload, '*');
+      });
+      setItem = (key, value) => {
+        storage.setItem(key, value);
+        outIx += 1;
+      };
+      if (buffer.length) {
+        console.debug('sending', buffer.length, 'queued messages from', origin);
+        while (buffer.length) {
+          setItem(
+            stringify(['out', origin, t0, outIx]),
+            stringify(buffer.shift()),
+          );
+        }
+      }
+    },
+  });
+};
+
+const conn = installDappConnection({
+  addEventListener: window.addEventListener,
+  parentPost: (payload, origin) => window.parent.postMessage(payload, origin),
+  t0: Date.now(),
+});
+
+const signalBridge = () => {
+  if ('requestStorageAccess' in document) {
+    document
+      .requestStorageAccess()
+      .then(() => {
+        console.debug('bridge: storage access granted');
+        conn.connectStorage(window.localStorage);
+      })
+      .catch(whyNot =>
+        console.error('bridge: requestStorageAccess rejected with', whyNot),
+      );
+  } else {
+    console.debug('bridge: SKIP document.requestStorageAccess');
+    conn.connectStorage(window.localStorage);
+  }
+};
+
+ReactDOM.render(
+  <button id="signalBridge" onClick={signalBridge}>
+    Signal Bridge
+  </button>,
+  document.getElementById('root'),
+);

packages/wallet/ui/src/components/Offer.jsx

@@ -43,8 +43,9 @@ const OfferWithoutContext = ({
   const {
     instancePetname,
     instanceHandleBoardId,
-    requestContext: { date, dappOrigin, origin = 'unknown origin' } = {},
+    requestContext: { dappOrigin, origin = 'unknown origin' } = {},
     id,
+    meta: { creationStamp: date },
   } = offer;
   let status = offer.status || 'proposed';