Improve DX when working with WASM dependencies (#299)

nucypher · Oct 5, 2023 · c34bccf · c34bccf
2 parents 9bcadf5 + 15ea563
commit c34bccf
Show file tree

Hide file tree

Showing 71 changed files with 1,479 additions and 4,236 deletions.
diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
@@ -7,7 +7,7 @@ jobs:
     runs-on: ${{ matrix.os }}
     strategy:
       matrix:
-        node: [ '16.x' ]
+        node: [ '16.x', '18.x' ]
         os: [ ubuntu-latest ]
 
     steps:

diff --git a/examples/README.md b/examples/README.md
@@ -1,3 +1,4 @@
 # Integration examples
 
-This directory contains a set of examples showing how to integrate `@nucypher/*` into your application.
+This directory contains a set of examples showing how to integrate `@nucypher/*`
+into your application.
diff --git a/examples/nextjs/.eslintrc.json b/examples/nextjs/.eslintrc.json
@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}
diff --git a/examples/nextjs/.gitignore b/examples/nextjs/.gitignore
@@ -0,0 +1,35 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
diff --git a/examples/nextjs/README.md b/examples/nextjs/README.md
@@ -0,0 +1,10 @@
+# `nextjs` integration example
+
+Shows how to use `@nucypher/pre` in Next.js.
+
+## Usage
+
+```bash
+pnpm install
+pnpm dev
+```
diff --git a/examples/nextjs/next.config.js b/examples/nextjs/next.config.js
@@ -0,0 +1,4 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {};
+
+module.exports = nextConfig;
diff --git a/examples/nextjs/package.json b/examples/nextjs/package.json
@@ -0,0 +1,29 @@
+{
+  "private": true,
+  "scripts": {
+    "build": "next build",
+    "check": "pnpm lint && pnpm type-check && pnpm build",
+    "dev": "next dev",
+    "lint": "next lint",
+    "start": "next start",
+    "type-check": "tsc -p tsconfig.build.json"
+  },
+  "dependencies": {
+    "@nucypher/shared": "workspace:*",
+    "@types/node": "20.6.3",
+    "@types/react": "18.2.22",
+    "@types/react-dom": "18.2.7",
+    "eslint": "8.49.0",
+    "eslint-config-next": "13.5.2",
+    "ethers": "^5.7.2",
+    "next": "13.5.2",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "typescript": "5.2.2"
+  },
+  "peerDependencies": {
+    "@nucypher/shared": "workspace:*",
+    "ethers": "^5.7.2",
+    "typescript": "5.2.2"
+  }
+}
diff --git a/examples/nextjs/src/app/layout.tsx b/examples/nextjs/src/app/layout.tsx
@@ -0,0 +1,21 @@
+import type { Metadata } from 'next';
+import { Inter } from 'next/font/google';
+
+const inter = Inter({ subsets: ['latin'] });
+
+export const metadata: Metadata = {
+  title: 'Create Next App',
+  description: 'Generated by create next app',
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en">
+      <body className={inter.className}>{children}</body>
+    </html>
+  );
+}
diff --git a/examples/react-craco/src/App.tsx → examples/nextjs/src/app/page.tsx b/examples/react-craco/src/App.tsx → examples/nextjs/src/app/page.tsx
@@ -1,49 +1,65 @@
-import { ethers } from "ethers";
-import { useEffect, useState } from "react";
+'use client';
+import {
+  Alice,
+  Bob,
+  EnactedPolicy,
+  getPorterUri,
+  initialize,
+  SecretKey,
+  toHexString,
+} from '@nucypher/shared';
+import {ethers} from 'ethers';
+import {useEffect, useState} from 'react';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+declare const window: any;
 
 function App() {
-  // eslint-disable-next-line  @typescript-eslint/no-explicit-any
-  const [nucypher, setNucypher] = useState<any>();
-  const [provider, setProvider] = useState<ethers.providers.Web3Provider | undefined>();
-  const [alice, setAlice] = useState<typeof Alice | undefined>();
-  const [bob, setBob] = useState<typeof Bob | undefined>();
-  const [policy, setPolicy] = useState<typeof EnactedPolicy>();
-
-  const loadNucypher = async () => {
-    const nucypherModule = await import("@nucypher/shared");
-    setNucypher(nucypherModule);
+  const [isInit, setIsInit] = useState<boolean>(false);
+  const [provider, setProvider] = useState<
+    ethers.providers.Web3Provider | undefined
+  >();
+  const [alice, setAlice] = useState<Alice | undefined>();
+  const [bob, setBob] = useState<Bob | undefined>();
+  const [policy, setPolicy] = useState<EnactedPolicy>();
+
+  const initNucypher = async () => {
+    await initialize();
+    setIsInit(true);
   };
 
   const loadWeb3Provider = async () => {
     if (!window.ethereum) {
-      console.error("You need to connect to the MetaMask extension");
+      console.error('You need to connect to the MetaMask extension');
     }
-    const provider = new ethers.providers.Web3Provider(window.ethereum, "any");
-
-    const { chainId } = await provider.getNetwork();
-    if (![137, 80001].includes(chainId)) {
-      console.error("You need to connect to the Mumbai or Polygon network");
+    const provider = new ethers.providers.Web3Provider(window.ethereum, 'any');
+
+    const {chainId} = await provider.getNetwork();
+    if (chainId !== 80001) {
+      // Switch to Matic Mumbai testnet
+      await window.ethereum.request({
+        method: 'wallet_switchEthereumChain',
+        params: [{chainId: '0x13881'}],
+      });
     }
 
-    await provider.send("eth_requestAccounts", []);
+    await provider.send('eth_requestAccounts', []);
     setProvider(provider);
   };
 
   useEffect(() => {
-    loadNucypher();
+    initNucypher();
     loadWeb3Provider();
   }, []);
 
-  if (!nucypher || !provider) {
+  if (!isInit || !provider) {
     return <div>Loading...</div>;
   }
 
-  const { Alice, Bob, EnactedPolicy, getPorterUri, SecretKey, toHexString } = nucypher;
+  console.log({Alice, Bob, getPorterUri, SecretKey, toHexString});
 
   const makeAlice = () => {
-    const alice = Alice.fromSecretKey(
-      SecretKey.random()
-    );
+    const alice = Alice.fromSecretKey(SecretKey.random());
     setAlice(alice);
   };
 
@@ -52,9 +68,9 @@ function App() {
     setBob(bob);
   };
 
-  const makeRemoteBob = (bob: typeof Bob) => {
-    const { decryptingKey, verifyingKey } = bob;
-    return { decryptingKey, verifyingKey };
+  const makeRemoteBob = (bob: Bob) => {
+    const {decryptingKey, verifyingKey} = bob;
+    return {decryptingKey, verifyingKey};
   };
 
   const makeCharacters = () => {
@@ -66,12 +82,12 @@ function App() {
 
   const runExample = async () => {
     if (!provider) {
-      console.error("You need to connect to the MetaMask extension");
+      console.error('You need to connect to your wallet first');
       return;
     }
 
     if (!alice || !bob) {
-      console.error("You need to create Alice and Bob");
+      console.error('You need to create Alice and Bob');
       return;
     }
 
@@ -86,17 +102,17 @@ function App() {
       threshold,
       shares,
       startDate,
-      endDate
+      endDate,
     };
 
     const policy = await alice.grant(
       provider,
       provider.getSigner(),
-      getPorterUri("tapir"), // Testnet porter
-      policyParams
+      getPorterUri('tapir'), // Testnet porter
+      policyParams,
     );
 
-    console.log("Policy created");
+    console.log('Policy created');
     setPolicy(policy);
   };
 
@@ -110,15 +126,17 @@ function App() {
             <div>
               {alice && (
                 <span>
-                    Alice: {`0x${toHexString(alice.verifyingKey.toCompressedBytes())}`}
-                  </span>
+                  Alice:{' '}
+                  {`0x${toHexString(alice.verifyingKey.toCompressedBytes())}`}
+                </span>
               )}
             </div>
             <div>
               {bob && (
                 <span>
-                    Bob: {`0x${toHexString(bob.verifyingKey.toCompressedBytes())}`}
-                  </span>
+                  Bob:{' '}
+                  {`0x${toHexString(bob.verifyingKey.toCompressedBytes())}`}
+                </span>
               )}
             </div>
           </div>

diff --git a/examples/react-craco/tsconfig.build.json → examples/nextjs/tsconfig.build.json b/examples/react-craco/tsconfig.build.json → examples/nextjs/tsconfig.build.json
@@ -8,7 +8,7 @@
   },
   "references": [
     {
-      "path": "../../packages/shared/tsconfig.build.json"
+      "path": "../../packages/shared/tsconfig.es.json"
     }
   ]
 }
diff --git a/examples/nextjs/tsconfig.json b/examples/nextjs/tsconfig.json
@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}
diff --git a/examples/nodejs/package.json b/examples/nodejs/package.json
@@ -6,7 +6,7 @@
   "scripts": {
     "check": "pnpm type-check",
     "start": "ts-node src/index.ts",
-    "type-check": "tsc -p tsconfig.build.json"
+    "type-check": "tsc"
   },
   "dependencies": {
     "@nucypher/shared": "workspace:*",

diff --git a/examples/nodejs/src/index.ts b/examples/nodejs/src/index.ts
@@ -1,4 +1,11 @@
-import {Alice, Bob, getPorterUri, SecretKey, toBytes} from '@nucypher/shared';
+import {
+  Alice,
+  Bob,
+  getPorterUri,
+  initialize,
+  SecretKey,
+  toBytes,
+} from '@nucypher/shared';
 import { ethers } from 'ethers';
 
 const makeAlice = () => {
@@ -26,6 +33,8 @@ const makeRemoteBob = () => {
 const getRandomLabel = () => `label-${new Date().getTime()}`;
 
 const runExample = async () => {
+  await initialize();
+
   const provider = ethers.Wallet.createRandom();
 
   const remoteBob = makeRemoteBob();

diff --git a/examples/nodejs/tsconfig.build.json → examples/nodejs/tsconfig.json b/examples/nodejs/tsconfig.build.json → examples/nodejs/tsconfig.json
@@ -8,7 +8,7 @@
   },
   "references": [
     {
-      "path": "../../packages/shared/tsconfig.build.json"
+      "path": "../../packages/shared/tsconfig.cjs.json"
     }
   ]
 }
diff --git a/examples/react-craco/craco.config.js b/examples/react-craco/craco.config.js