Update beep-boop via integrating p2panda-js-0.2.0

package.json

@@ -32,7 +32,7 @@
   "dependencies": {
     "@open-rpc/client-js": "^1.6.2",
     "debug": "^4.3.1",
-    "p2panda-js": "^0.1.0",
+    "p2panda-js": "^0.2.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-router": "^5.2.0",
@@ -51,6 +51,7 @@
     "@typescript-eslint/eslint-plugin": "^4.15.1",
     "@typescript-eslint/parser": "^4.15.1",
     "babel-loader": "^8.2.2",
+    "copy-webpack-plugin": "^9.1.0",
     "core-js": "^3.9.0",
     "css-loader": "^5.2.0",
     "eslint": "^7.20.0",

src/App.tsx

@@ -1,13 +1,12 @@
 import React, { useEffect, useState } from 'react';
-import p2panda from 'p2panda-js';
+import { createKeyPair, Session, wasm } from 'p2panda-js';
 
 import { BambooLog } from '~/components/BambooLog';
 import { Chatlog } from '~/components/Chatlog';
 import { ENDPOINT, CHAT_SCHEMA } from '~/configs';
-import { Instance, Session } from '~/p2panda-api';
 import { Instructions } from '~/components/Instructions';
 
-import type { EntryRecord } from '~/p2panda-api/types';
+import type { EntryRecord } from 'p2panda-js';
 
 import '~/styles.css';
 
@@ -44,21 +43,21 @@ const App = (): JSX.Element => {
   useEffect(() => {
     // Generate or load key pair on initial page load
     const asyncEffect = async () => {
-      const { KeyPair } = await p2panda;
       let privateKey = window.localStorage.getItem('privateKey');
       if (!privateKey) {
-        const keyPair = new KeyPair();
+        const keyPair = await createKeyPair();
         privateKey = keyPair.privateKey();
         window.localStorage.setItem('privateKey', privateKey);
       }
+      const { KeyPair } = await wasm;
       setKeyPair(KeyPair.fromPrivateKey(privateKey));
     };
     asyncEffect();
   }, []);
 
   // Publish entries and refresh chat log to get the new message in the log
   const handlePublish = async (message: string) => {
-    await Instance.create(
+    await session.create(
       {
         message,
         date: new Date().toISOString(),

src/components/BambooLog/LogEntry.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import type { EntryRecord } from '~/p2panda-api/types';
+import type { EntryRecord } from 'p2panda-js';
 
 type Props = {
   entry: EntryRecord;

src/components/BambooLog/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { LogEntry } from '~/components/BambooLog/LogEntry';
 
-import type { EntryRecord } from '~/p2panda-api/types';
+import type { EntryRecord } from 'p2panda-js';
 
 type Props = {
   log: EntryRecord[];

src/components/Chatlog/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { PublishEntry } from '~/components/Chatlog/PublishEntry';
 
-import type { EntryRecord } from '~/p2panda-api/types';
+import type { EntryRecord } from 'p2panda-js';
 
 type Props = {
   log: EntryRecord[];

src/components/Instructions.tsx

@@ -1,11 +1,9 @@
 import React, { useEffect } from 'react';
 
 import { ENDPOINT, CHAT_SCHEMA } from '~/configs';
-import { Session } from '~/p2panda-api';
+import { Session, EntryRecord } from 'p2panda-js';
 import { SyntaxHighlighter } from '~/syntaxHighlighter';
 
-import type { EntryRecord } from '~/p2panda-api/types';
-
 type Props = {
   keyPair: Session['p2panda']['KeyPair'];
   session: Session;
@@ -40,8 +38,7 @@ export const Instructions = ({
       <div>
         <h2>Make a key pair</h2>
         <SyntaxHighlighter>
-          {`const { KeyPair } = await p2panda;
-const keyPair = new KeyPair();
+          {`const keyPair = await createKeyPair();
 const publicKey = keyPair.publicKey();
 // => ${publicKey}
 const privateKey = keyPair.privateKey();
@@ -73,7 +70,7 @@ ${session ? `// => ${session}` : ''}`}
         <SyntaxHighlighter>{`const fields = {
   message: '${currentMessage}'
 };
-const entry = await Instance.create(
+const entry = await session.create(
   fields,
   { schema: CHAT_SCHEMA, session, keyPair },
 );`}</SyntaxHighlighter>
@@ -93,7 +90,7 @@ const entry = await Instance.create(
           below.
         </p>
         <SyntaxHighlighter>
-          {`const entries = await Instance.query({}, {
+          {`const entries = await session.query({
   schema: CHAT_SCHEMA,
   session
 });