Add Irys Arweave bundler usage to taco-demo (#503)

demos/taco-demo/README.md

@@ -13,8 +13,8 @@ pnpm start
 
 ## Usage
 
-In order to run this demo will need a browser wallet with an account funded with some
-$MATIC.
+In order to run this demo will need a browser wallet with an account funded with
+some $MATIC.
 
 In order to connect with the network, the demo uses a public instances of
 [Porter](https://docs.threshold.network/app-development/threshold-access-control-tac/porter).
@@ -26,12 +26,13 @@ production _just yet_.
 
 ### Lynx Testnet
 
-The current release of `@nucypher/taco` supports Ursulas working on Lynx (bleeding-edge) test
-network and contracts deployed on Polygon Amoy testnet.
+The current release of `@nucypher/taco` supports Ursulas working on Lynx
+(bleeding-edge) test network and contracts deployed on Polygon Amoy testnet.
 
 ## References
 
-Please find developer documentation [here](https://docs.threshold.network/app-development/threshold-access-control-tac).
+Please find developer documentation
+[here](https://docs.threshold.network/app-development/threshold-access-control-tac).
 
 This dApp is based on
 [`useDapp` example](https://github.com/EthWorks/useDapp/tree/master/packages/example).

demos/taco-demo/package.json

@@ -12,6 +12,7 @@
     "type-check": "tsc --noEmit"
   },
   "dependencies": {
+    "@irys/sdk": "^0.1.16",
     "@nucypher/taco": "^0.2.4",
     "@usedapp/core": "^1.2.13",
     "buffer": "^6.0.3",
@@ -28,12 +29,15 @@
     "@types/react-copy-to-clipboard": "^5.0.7",
     "@types/react-dom": "^18.2.18",
     "copy-webpack-plugin": "^12.0.2",
+    "crypto-browserify": "^3.12.0",
     "esbuild-loader": "^2.20.0",
     "html-webpack-plugin": "^5.5.0",
+    "process": "^0.11.10",
     "react-refresh": "^0.14.0",
     "rimraf": "^5.0.5",
     "stream-browserify": "^3.0.0",
     "typescript": "^4.8.3",
+    "vm-browserify": "^1.1.2",
     "webpack": "^5.90.3",
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^4.11.1"

demos/taco-demo/src/App.tsx

@@ -6,6 +6,7 @@ import {
   getPorterUri,
   initialize,
   ThresholdMessageKit,
+  toHexString,
 } from '@nucypher/taco';
 import { useEthers } from '@usedapp/core';
 import { ethers } from 'ethers';
@@ -16,6 +17,7 @@ import { Decrypt } from './Decrypt';
 import { Encrypt } from './Encrypt';
 import { Spinner } from './Spinner';
 import { DEFAULT_DOMAIN, DEFAULT_RITUAL_ID } from './config';
+import { downloadData, getWebIrys, uploadData } from './irys';
 
 const chainIdForDomain = {
   [domains.DEVNET]: 80002,
@@ -29,14 +31,14 @@ export default function App() {
 
   const [loading, setLoading] = useState(false);
   const [condition, setCondition] = useState<conditions.condition.Condition>();
-  const [encryptedMessage, setEncryptedMessage] =
-    useState<ThresholdMessageKit>();
+  const [encryptedMessageId, setEncryptedMessageIdId] = useState<string>();
   const [decryptedMessage, setDecryptedMessage] = useState<string>();
   const [decryptionErrors, setDecryptionErrors] = useState<string[]>([]);
   const [ritualId, setRitualId] = useState<number>(DEFAULT_RITUAL_ID);
   const [domain, setDomain] = useState<string>(DEFAULT_DOMAIN);
 
   const chainId = chainIdForDomain[domain];
+  const provider = new ethers.providers.Web3Provider(window.ethereum);
 
   useEffect(() => {
     initialize();
@@ -51,7 +53,6 @@ export default function App() {
 
     await switchNetwork(chainId);
 
-    const provider = new ethers.providers.Web3Provider(window.ethereum);
     const encryptedMessage = await encrypt(
       provider,
       domain,
@@ -61,19 +62,27 @@ export default function App() {
       provider.getSigner(),
     );
 
-    setEncryptedMessage(encryptedMessage);
+    const encryptedMessageHex = toHexString(encryptedMessage.toBytes());
+    const webIrys = await getWebIrys(provider);
+    const receiptId = await uploadData(webIrys, encryptedMessageHex);
+
+    setEncryptedMessageIdId(receiptId);
     setLoading(false);
   };
 
-  const decryptMessage = async (encryptedMessage: ThresholdMessageKit) => {
+  const decryptMessage = async (encryptedMessageId: string) => {
     if (!condition) {
       return;
     }
     setLoading(true);
     setDecryptedMessage('');
     setDecryptionErrors([]);
 
-    const provider = new ethers.providers.Web3Provider(window.ethereum);
+    const encryptedMessageHex = await downloadData(encryptedMessageId) as string;
+    const encryptedMessage = ThresholdMessageKit.fromBytes(
+      Buffer.from(encryptedMessageHex, 'hex'),
+    );
+
     const decryptedMessage = await decrypt(
       provider,
       domain,
@@ -148,11 +157,11 @@ export default function App() {
       <Encrypt
         enabled={!!condition}
         encrypt={encryptMessage}
-        encryptedMessage={encryptedMessage!}
+        encryptedMessageId={encryptedMessageId!}
       />
 
       <Decrypt
-        enabled={!!encryptedMessage}
+        enabled={!!encryptedMessageId}
         decrypt={decryptMessage}
         decryptedMessage={decryptedMessage}
         decryptionErrors={decryptionErrors}

demos/taco-demo/src/ConditionBuilder.tsx

@@ -59,7 +59,11 @@ export const ConditionBuilder = ({
 
   const onCreateCondition = (e: any) => {
     e.preventDefault();
-    setConditions(conditions.ConditionFactory.conditionFromProps(JSON.parse(conditionString)));
+    setConditions(
+      conditions.ConditionFactory.conditionFromProps(
+        JSON.parse(conditionString),
+      ),
+    );
   };
 
   return (

demos/taco-demo/src/Decrypt.tsx

@@ -1,9 +1,8 @@
-import { ThresholdMessageKit } from '@nucypher/taco';
 import React, { useState } from 'react';
 
 interface Props {
   enabled: boolean;
-  decrypt: (encryptedMessage: ThresholdMessageKit) => void;
+  decrypt: (encryptedMessageId: string) => void;
   decryptedMessage?: string | undefined;
   decryptionErrors: string[];
 }
@@ -14,19 +13,17 @@ export const Decrypt = ({
   decryptionErrors,
   enabled,
 }: Props) => {
-  const [encryptedMessage, setEncryptedMessage] = useState('');
+  const [encryptedMessageId, setEncryptedMessageId] = useState('');
 
   if (!enabled) {
     return <></>;
   }
 
   const onDecrypt = () => {
-    if (!encryptedMessage) {
+    if (!encryptedMessageId) {
       return;
     }
-    const mkBytes = Buffer.from(encryptedMessage, 'base64');
-    const mk = ThresholdMessageKit.fromBytes(mkBytes);
-    decrypt(mk);
+    decrypt(encryptedMessageId);
   };
 
   const DecryptedMessage = () => {
@@ -64,9 +61,9 @@ export const Decrypt = ({
     <div>
       <h2>Step 3 - Decrypt Encrypted Message</h2>
       <input
-        value={encryptedMessage}
-        placeholder="Enter encrypted message"
-        onChange={(e) => setEncryptedMessage(e.currentTarget.value)}
+        value={encryptedMessageId}
+        placeholder="Enter encrypted message id"
+        onChange={(e) => setEncryptedMessageId(e.currentTarget.value)}
       />
       <button onClick={onDecrypt}>Decrypt</button>
       {DecryptedMessage()}

demos/taco-demo/src/Encrypt.tsx

@@ -1,14 +1,13 @@
-import { ThresholdMessageKit } from '@nucypher/taco';
 import React, { useState } from 'react';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 
 interface Props {
   enabled: boolean;
-  encryptedMessage?: ThresholdMessageKit;
+  encryptedMessageId?: string;
   encrypt: (value: string) => void;
 }
 
-export const Encrypt = ({ encrypt, encryptedMessage, enabled }: Props) => {
+export const Encrypt = ({ encrypt, encryptedMessageId, enabled }: Props) => {
   if (!enabled) {
     return <></>;
   }
@@ -17,21 +16,17 @@ export const Encrypt = ({ encrypt, encryptedMessage, enabled }: Props) => {
 
   const onClick = () => encrypt(plaintext);
 
-  const EncryptedMessageContent = () => {
-    if (!encryptedMessage) {
+  const EncryptedMessageIdContent = () => {
+    if (!encryptedMessageId) {
       return <></>;
     }
 
-    const encodedCiphertext = Buffer.from(encryptedMessage.toBytes()).toString(
-      'base64',
-    );
-
     return (
       <>
         <div>
-          <h3>Encrypted ciphertext:</h3>
-          <pre className="ciphertext">{encodedCiphertext}</pre>
-          <CopyToClipboard text={encodedCiphertext}>
+          <h3>Encrypted message id:</h3>
+          <pre className="encryptedMessageId">{encryptedMessageId}</pre>
+          <CopyToClipboard text={encryptedMessageId}>
             <button>Copy to clipboard</button>
           </CopyToClipboard>
         </div>
@@ -48,7 +43,7 @@ export const Encrypt = ({ encrypt, encryptedMessage, enabled }: Props) => {
         onChange={(e) => setPlaintext(e.currentTarget.value)}
       />
       <button onClick={onClick}>Encrypt</button>
-      {EncryptedMessageContent()}
+      {EncryptedMessageIdContent()}
     </div>
   );
 };

demos/taco-demo/src/config.ts

@@ -2,3 +2,9 @@ import { domains } from '@nucypher/taco';
 
 export const DEFAULT_RITUAL_ID = parseInt(process.env.DEFAULT_RITUAL_ID || '0');
 export const DEFAULT_DOMAIN = process.env.DEFAULT_DOMAIN || domains.TESTNET;
+
+// Node 2 is free
+export const IRYS_NODE_URL =
+  process.env.IRYS_NODE_URL || 'https://node2.irys.xyz';
+// Devnet RPC URLs change often, use a recent one from https://chainlist.org/chain/80002
+export const RPC_URL = 'https://rpc-amoy.polygon.technology/';

demos/taco-demo/src/irys.ts

@@ -0,0 +1,25 @@
+import { WebIrys } from '@irys/sdk';
+import { providers } from 'ethers';
+
+import { IRYS_NODE_URL, RPC_URL } from './config';
+
+export const getWebIrys = async (provider: providers.Provider) => {
+  const token = 'matic';
+  const wallet = { rpcUrl: RPC_URL, name: 'ethersv5', provider };
+  const webIrys = new WebIrys({ url: IRYS_NODE_URL, token, wallet });
+  await webIrys.ready();
+  return webIrys;
+};
+
+export const uploadData = async (webIrys: WebIrys, data: unknown): Promise<string> => {
+  const dataToUpload = JSON.stringify(data);
+  const receipt = await webIrys.upload(dataToUpload);
+  console.log(`Data uploaded ==> https://gateway.irys.xyz/${receipt.id}`);
+  return receipt.id;
+};
+
+export const downloadData = async (receiptId: string): Promise<unknown> => {
+  const response = await fetch(`https://gateway.irys.xyz/${receiptId}`);
+  const dataJson = await response.text();
+  return JSON.parse(dataJson);
+};

demos/taco-demo/tsconfig.json

@@ -6,11 +6,11 @@
     "noEmit": true,
     "resolveJsonModule": true,
     "esModuleInterop": true,
-    "skipLibCheck": true
+    "skipLibCheck": true,
   },
   "references": [
     {
-      "path": "../../packages/taco/tsconfig.es.json"
-    }
-  ]
+      "path": "../../packages/taco/tsconfig.es.json",
+    },
+  ],
 }

demos/taco-demo/webpack.config.js

@@ -26,15 +26,16 @@ module.exports = {
     }),
     new webpack.ProvidePlugin({
       Buffer: ['buffer', 'Buffer'],
+      process: 'process/browser.js',
     }),
     new webpack.DefinePlugin({
       process: {
         env: {
           DEFAULT_RITUAL_ID: JSON.stringify(process.env.DEFAULT_RITUAL_ID),
           DEFAULT_DOMAIN: JSON.stringify(process.env.DEFAULT_DOMAIN),
         },
-      }
-    })
+      },
+    }),
   ].filter(Boolean),
   module: {
     rules: [
@@ -56,8 +57,9 @@ module.exports = {
   resolve: {
     extensions: ['.tsx', '.ts', '.js'],
     fallback: {
-      // stream: require.resolve('stream-browserify'),
-      // buffer: require.resolve('buffer/'),
+      stream: require.resolve('stream-browserify'),
+      vm: require.resolve('vm-browserify'),
+      crypto: require.resolve('crypto-browserify'),
     },
   },
   output: {