Merge pull request #76 from getwax/wax-36-external-bundlers

inpage: Support external bundlers

demos/inpage/.eslintrc.cjs

@@ -118,5 +118,6 @@ module.exports = {
     'no-await-in-loop': 'off',
     'no-continue': 'off',
     'no-constant-condition': 'off',
+    'no-underscore-dangle': 'off',
   },
 };

demos/inpage/README.md

@@ -20,6 +20,44 @@ The dev server will run a hardhat-based testnet for you by default. If you'd
 like to use an external network, configure your `rpcUrl` in `demo/config.ts` and
 the dev server will skip running a local node.
 
+### Use the Demo with an External Bundler
+
+In `demo/config.ts`, set `bundlerRpcUrl` to your bundler's rpc url.
+
+If you don't have access to an existing external bundler, one option for running
+your own is
+[`eth-infinitism/bundler`](https://github.com/eth-infinitism/bundler).
+
+1. Set `bundlerRpcUrl` above to `http://127.0.0.1:3000`
+2. Clone [`eth-infinitism/bundler`](https://github.com/eth-infinitism/bundler)
+3. Run `yarn && yarn preprocess`
+4. Set `packages/bundler/localconfig/mnemonic.txt` to:
+
+```
+test test test test test test test test test test test absent
+```
+
+5. Set `beneficiary` in `packages/bundler/localconfig/bundler.config.json` to:
+
+```
+0xe8250207B79D7396631bb3aE38a7b457261ae0B6
+```
+
+Send some ETH to this address.
+
+6. Get the entry point address using these commands in the dev console of the
+   demo:
+
+```ts
+let contracts = await waxInPage.getContracts();
+await contracts.entryPoint.getAddress();
+```
+
+7. Set `entryPoint` in `packages/bundler/localconfig/bundler.config.json` to
+   that address.
+
+8. Run `yarn run bundler --unsafe`.
+
 ## Use the Library (as an Npm Module)
 
 ```sh
@@ -37,25 +75,29 @@ yet.)
 Then:
 
 ```ts
-import WaxInPage from '@getwax/inpage';
+import WaxInPage from "@getwax/inpage";
 
 const wax = new WaxInPage({
-  rpcUrl: '<your rpc url>', // eg for hardhat use http://127.0.0.1:8545
+  rpcUrl: "<your rpc url>", // eg for hardhat use http://127.0.0.1:8545
 });
 
-console.log(await wax.ethereum.request({
-  method: 'eth_requestAccounts',
-}));
+console.log(
+  await wax.ethereum.request({
+    method: "eth_requestAccounts",
+  }),
+);
 
 // Alternatively...
 
 WaxInPage.global({
-  rpcUrl: '<your rpc url>', // eg for hardhat use http://127.0.0.1:8545
+  rpcUrl: "<your rpc url>", // eg for hardhat use http://127.0.0.1:8545
 });
 
-console.log(await ethereum.request({
-  method: 'eth_requestAccounts',
-}));
+console.log(
+  await ethereum.request({
+    method: "eth_requestAccounts",
+  }),
+);
 ```
 
 ## Use the Libary (as a Script)
@@ -89,10 +131,10 @@ Now you can use `window.ethereum` and `window.waxInPage`, eg:
 
 ```ts
 (async () => {
-
-  console.log(await ethereum.request({
-    method: 'eth_requestAccounts',
-  }));
-
+  console.log(
+    await ethereum.request({
+      method: "eth_requestAccounts",
+    }),
+  );
 })();
 ```

demos/inpage/demo/ConfigType.ts

@@ -1,5 +1,7 @@
 type ConfigType = {
+  logRequests?: boolean;
   rpcUrl: string;
+  bundlerRpcUrl?: string;
   pollingInterval?: number;
   addFundsEthAmount?: string;
 };

demos/inpage/demo/config.template.ts

@@ -10,7 +10,13 @@
 import ConfigType from './ConfigType';
 
 const config: ConfigType = {
+  logRequests: true,
   rpcUrl: 'http://127.0.0.1:8545',
+
+  // Uncomment this with the url of a bundler to enable using an external
+  // bundler (sometimes this is the same as rpcUrl). Otherwise, a bundler will
+  // be simulated inside the library.
+  // bundlerRpcUrl: '',
 };
 
 export default config;

demos/inpage/demo/main.tsx

@@ -11,6 +11,7 @@ WaxInPage.addStylesheet();
 
 const waxInPage = new WaxInPage({
   rpcUrl: config.rpcUrl,
+  bundlerRpcUrl: config.bundlerRpcUrl,
 });
 
 waxInPage.attachGlobals();
@@ -28,6 +29,10 @@ if (config.pollingInterval !== undefined) {
   });
 }
 
+waxInPage.setConfig({
+  logRequests: config.logRequests,
+});
+
 const demoContext = new DemoContext(waxInPage);
 
 ReactDOM.createRoot(document.getElementById('root')!).render(