chore: dependency updates (#448)

src/Router.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import {
-  Switch,
+  Routes,
   Route,
-  useHistory,
+  useNavigate,
 } from 'react-router-dom';
 import {  HomeFilled } from '@ant-design/icons';
 import { Layout, Button, Space } from 'antd';
@@ -15,38 +15,26 @@ import Welcome from './screens/Welcome';
 import Debug from './screens/Debug';
 
 const AppRouter: React.FC = () => {
-  const history = useHistory();
+  const navigate = useNavigate();
   return (
     <>
       <Space>
         <Button
-          onClick={() => history.push('/')}
+          onClick={() => navigate('/')}
           icon={<HomeFilled />}
         >
           Home
         </Button>
       </Space>
       <Layout.Content style={{ padding: '25px', maxWidth: '800px', width: '100%', margin: 'auto' }}>
-        <Switch>
-          <Route path="/debug">
-            <Debug />
-          </Route>
-          <Route path="/welcome">
-            <Welcome />
-          </Route>
-          <Route path="/key">
-            <SetupKey />
-          </Route>
-          <Route path="/receive">
-            <Decrypt />
-          </Route>
-          <Route path="/send">
-            <Encrypt />
-          </Route>
-          <Route path="/">
-            <Intro />
-          </Route>
-        </Switch>
+        <Routes>
+          <Route path="/debug" element={<Debug />} />
+          <Route path="/welcome" element={<Welcome />} />
+          <Route path="/key" element={<SetupKey />} />
+          <Route path="/receive" element={<Decrypt />} />
+          <Route path="/send" element={<Encrypt />} />
+          <Route path="/" element={<Intro />} />
+        </Routes>
       </Layout.Content>
     </>
   );

src/contexts/Decryption.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useCallback, useContext, createContext, useEffect } from 'react';
-import * as openpgp from 'openpgp';
+import { readMessage, readKey, decrypt as pgpDecrypt, readPrivateKeys, readPrivateKey, generateKey } from 'openpgp';
 import GithubContext from './Github';
 import FileType from '../types/File';
 import { createFile } from '../helpers/files';
@@ -31,15 +31,17 @@ const DecryptionContext = createContext<DecryptionContextType>({
 });
 
 const decrypt = async (privateKey: string, keys: string[], content: string) => {
-  const armoredKeys = await Promise.all(keys.map(openpgp.key.readArmored));
-  const message = await openpgp.message.readArmored(content);
-  const encrypted = await openpgp.decrypt({
+  const armoredKeys = await Promise.all(
+    keys.map(key => readKey({ armoredKey: key })),
+  );
+  const message = await readMessage({ armoredMessage: content });
+  const encrypted = await pgpDecrypt({
     message,
-    privateKeys: [...(await openpgp.key.readArmored(privateKey)).keys],
-    publicKeys: armoredKeys.reduce<any>((output, key: any) => [...output, ...key.keys], []),
+    decryptionKeys: await readPrivateKeys({ armoredKeys: privateKey }),
+    verificationKeys: armoredKeys.reduce<any>((output, key: any) => [...output, ...key], []),
   });
   const { data } = encrypted;
-  const blob = new Blob([data], {
+  const blob = new Blob([data as any], {
     type: 'text/text',
   });
   return blob;
@@ -65,8 +67,8 @@ const DecryptionProvider: React.FC = ({
       const currentRawKey = localStorage.getItem('key');
       if (currentRawKey) {
         setPrivateKey(currentRawKey);
-        const key = await openpgp.key.readArmored(currentRawKey);
-        setPublicKey(key.keys[0].toPublic().armor());
+        const key = await readPrivateKey({ armoredKey: currentRawKey });
+        setPublicKey(key.toPublic().armor());
       }
     };
 
@@ -80,14 +82,14 @@ const DecryptionProvider: React.FC = ({
   };
 
   const createKey = async () => {
-    const key = await openpgp.generateKey({
-      userIds: [{ name: 'unknown unknown', email: 'unknown@unknown.foo'}],
+    const key = await generateKey({
+      userIDs: [{ name: 'unknown unknown', email: 'unknown@unknown.foo'}],
       curve: 'ed25519',
     });
 
-    setPrivateKey(key.privateKeyArmored);
-    setPublicKey(key.publicKeyArmored);
-    localStorage.setItem('key', key.privateKeyArmored);
+    setPrivateKey(key.privateKey);
+    setPublicKey(key.publicKey);
+    localStorage.setItem('key', key.privateKey);
   }
 
   const addFile = useCallback(async (file: File) => {

src/contexts/Encryption.tsx

@@ -19,15 +19,16 @@ const EncryptionContext = createContext<EncryptionContextType>({
 });
 
 const encrypt = async (keys: string[], content: string) => {
-  const armoredKeys = await Promise.all(keys.map(openpgp.key.readArmored));
-  const message = openpgp.message.fromText(content);
+  const armoredKeys = await Promise.all(
+    keys.map(key => openpgp.readKeys({ armoredKeys: key })),
+  );
+  const message = await openpgp.createMessage({ text: content });
   const encrypted = await openpgp.encrypt({
     message,
-    armor: true,
-    publicKeys: armoredKeys.reduce<any>((output, key: any) => [...output, ...key.keys], []),
+    encryptionKeys: armoredKeys.reduce<any>((output, key: any) => [...output, ...key], []),
   });
-  const { data } = encrypted;
-  const blob = new Blob([data], {
+  const data = encrypted;
+  const blob = new Blob([data as any], {
     type: 'text/text',
   });
   return blob;

src/screens/Intro.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useHistory } from 'react-router';
+import { useNavigate } from 'react-router';
 import Welcome from './Welcome';
 import {
   Button,
@@ -18,14 +18,14 @@ const Thumb: React.FC = ({
   link,
   className,
 }) => {
-  const history = useHistory();
+  const navigate = useNavigate();
   return (
     <Button
       size="large"
       icon={<Icon />}
       type="link"
       className={className}
-      onClick={() => history.push(link)}
+      onClick={() => navigate(link)}
     >
       {title}
     </Button>