feat: change local message replyStatus when send message

release-as: 0.10.1

packages/app/src/Claimer/index.tsx

@@ -89,6 +89,9 @@ const Claimer: React.FC = () => {
             }}
           />
           <Button
+            onClick={() =>
+              window.open('https://zcloaknetwork.medium.com/christmas-card-event-9fa41796f0e5')
+            }
             sx={{
               width: '181px',
               height: '39px',

packages/page-claims/src/button/ShareModal.tsx

@@ -10,6 +10,7 @@ import { Message } from '@zcloak/message/types';
 import { VerifiablePresentationBuilder } from '@zcloak/vc';
 
 import {
+  AppContext,
   Box,
   Button,
   Checkbox,
@@ -19,14 +20,15 @@ import {
   Stack
 } from '@credential/react-components';
 import { DidsContext, DidsModal, InputDid } from '@credential/react-dids';
-import { encryptMessageStep, sendMessage, Steps } from '@credential/react-dids/steps';
+import { encryptMessageStep, Steps } from '@credential/react-dids/steps';
 
 const ShareModal: React.FC<{
   credential: VerifiableCredential;
   open: boolean;
   onClose?: () => void;
 }> = ({ credential, onClose, open }) => {
   const { did: sender } = useContext(DidsContext);
+  const { sendMessage } = useContext(AppContext);
   const [receiver, setReceiver] = useState<Did | null>(null);
   const [encryptedMessage, setEncryptedMessage] = useState<Message<'Send_VP'>>();
   const [recaptchaToken, setRecaptchaToken] = useState<string>();

packages/page-ctype/src/create/SubmitClaim.tsx

@@ -12,9 +12,9 @@ import { Raw } from '@zcloak/vc';
 
 import { DEFAULT_ROOT_HASH_TYPE } from '@credential/app-config/vc';
 import { addPendingCredential } from '@credential/app-store/pending-credential';
-import { Button, NotificationContext, Recaptcha } from '@credential/react-components';
+import { AppContext, Button, NotificationContext, Recaptcha } from '@credential/react-components';
 import { DidsContext, DidsModal } from '@credential/react-dids';
-import { encryptMessageStep, sendMessage, Steps } from '@credential/react-dids/steps';
+import { encryptMessageStep, Steps } from '@credential/react-dids/steps';
 import { useToggle } from '@credential/react-hooks';
 
 const SubmitClaim: React.FC<{
@@ -25,6 +25,7 @@ const SubmitClaim: React.FC<{
 }> = ({ attester, contents, ctype, onDone }) => {
   const { did: sender } = useContext(DidsContext);
   const { notifyError } = useContext(NotificationContext);
+  const { sendMessage } = useContext(AppContext);
   const [open, toggleOpen] = useToggle();
   const [encryptedMessage, setEncryptedMessage] = useState<Message<'Request_Attestation'>>();
   const [recaptchaToken, setRecaptchaToken] = useState<string>();

packages/page-issue/src/SubmitVC.tsx

@@ -11,14 +11,15 @@ import { Message } from '@zcloak/message/types';
 import { Raw } from '@zcloak/vc';
 
 import { DEFAULT_ROOT_HASH_TYPE } from '@credential/app-config/vc';
-import { Button, CTypeContext, NotificationContext, Recaptcha } from '@credential/react-components';
-import { DidsContext, DidsModal } from '@credential/react-dids';
 import {
-  encryptMessageStep,
-  sendMessage,
-  signAndBuildVC,
-  Steps
-} from '@credential/react-dids/steps';
+  AppContext,
+  Button,
+  CTypeContext,
+  NotificationContext,
+  Recaptcha
+} from '@credential/react-components';
+import { DidsContext, DidsModal } from '@credential/react-dids';
+import { encryptMessageStep, signAndBuildVC, Steps } from '@credential/react-dids/steps';
 import { useToggle } from '@credential/react-hooks';
 
 interface Props {
@@ -32,6 +33,7 @@ function SubmitVC({ contents, ctype, holder, onDone }: Props) {
   const { did: sender } = useContext(DidsContext);
   const { serverCTypes } = useContext(CTypeContext);
   const { notifyError } = useContext(NotificationContext);
+  const { sendMessage } = useContext(AppContext);
   const [open, toggleOpen] = useToggle();
   const [encryptedMessage, setEncryptedMessage] = useState<Message<'Send_issuedVC'>>();
   const [recaptchaToken, setRecaptchaToken] = useState<string>();

packages/page-tasks/src/RequestDetails/Approve.tsx

@@ -20,12 +20,7 @@ import {
   Recaptcha
 } from '@credential/react-components';
 import { DidsContext, DidsModal, useDid } from '@credential/react-dids';
-import {
-  encryptMessageStep,
-  sendMessage,
-  signAndBuildVC,
-  Steps
-} from '@credential/react-dids/steps';
+import { encryptMessageStep, signAndBuildVC, Steps } from '@credential/react-dids/steps';
 import { useStopPropagation, useToggle } from '@credential/react-hooks';
 
 const Approve: React.FC<{
@@ -34,7 +29,7 @@ const Approve: React.FC<{
 }> = ({ task, type = 'button' }) => {
   const { did: attester } = useContext(DidsContext);
   const { serverCTypes } = useContext(CTypeContext);
-  const { setMessageStatus } = useContext(AppContext);
+  const { sendMessage } = useContext(AppContext);
   const [open, toggleOpen] = useToggle();
   const [encryptedMessage, setEncryptedMessage] =
     useState<Message<'Response_Approve_Attestation'>>();
@@ -103,10 +98,7 @@ const Approve: React.FC<{
                   label: 'Send message',
                   paused: true,
                   content: <Recaptcha onCallback={setRecaptchaToken} />,
-                  exec: () =>
-                    sendMessage(encryptedMessage, recaptchaToken).then(() =>
-                      setMessageStatus(task.id, 'approved')
-                    )
+                  exec: () => sendMessage(encryptedMessage, recaptchaToken)
                 }
               ]}
             />

packages/page-tasks/src/RequestDetails/Reject.tsx

@@ -18,15 +18,15 @@ import {
   Recaptcha
 } from '@credential/react-components';
 import { DidsContext, DidsModal, useDid } from '@credential/react-dids';
-import { encryptMessageStep, sendMessage, Steps } from '@credential/react-dids/steps';
+import { encryptMessageStep, Steps } from '@credential/react-dids/steps';
 import { useStopPropagation, useToggle } from '@credential/react-hooks';
 
 const Reject: React.FC<{
   type?: 'button' | 'menu';
   task: DecryptedTask;
 }> = ({ task, type = 'button' }) => {
   const { did: attester } = useContext(DidsContext);
-  const { setMessageStatus } = useContext(AppContext);
+  const { sendMessage } = useContext(AppContext);
   const [open, toggleOpen] = useToggle();
   const [encryptedMessage, setEncryptedMessage] =
     useState<Message<'Response_Reject_Attestation'>>();
@@ -93,10 +93,7 @@ const Reject: React.FC<{
                   label: 'Send message',
                   paused: true,
                   content: <Recaptcha onCallback={setRecaptchaToken} />,
-                  exec: () =>
-                    sendMessage(encryptedMessage, recaptchaToken).then(() =>
-                      setMessageStatus(task.id, 'reject')
-                    )
+                  exec: () => sendMessage(encryptedMessage, recaptchaToken)
                 }
               ]}
               submitText="Reject"

packages/react-components/src/AppProvider/AppProvider.tsx

@@ -6,11 +6,12 @@ import type { DecryptedMessage, Message, MessageType } from '@zcloak/message/typ
 import type { ServerMessage } from '@credential/react-dids/types';
 import type { MessageWithMeta } from '@credential/react-hooks/types';
 
+import { assert } from '@polkadot/util';
 import React, { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react';
 
 import { isSameUri } from '@zcloak/did/utils';
 import { DidUrl } from '@zcloak/did-resolver/types';
-import { decryptMessage } from '@zcloak/message';
+import { decryptMessage, verifyMessageEnvelope, verifyMessageSignature } from '@zcloak/message';
 
 import { MESSAGE_WS } from '@credential/app-config/endpoints';
 import { addVC } from '@credential/app-store';
@@ -24,7 +25,10 @@ interface State {
   messages: MessageWithMeta<MessageType>[];
   sentMessages: MessageWithMeta<MessageType>[];
   readMessage: (id: string) => Promise<void>;
-  setMessageStatus: (id: string, status: 'approved' | 'reject') => void;
+  sendMessage: <T extends MessageType>(
+    message?: Message<T>,
+    reCaptchaToken?: string | null
+  ) => Promise<void>;
   decrypt: <T extends MessageType>(message: Message<T>) => Promise<DecryptedMessage<T>>;
 }
 
@@ -153,21 +157,21 @@ function AppProvider({ children }: { children: React.ReactNode }) {
     resolver
       .getMessages({ receiver: didUrl })
       .then((data) => {
-        setServerMessages(data);
+        setServerMessages((serverMessages) => duplicateServerMessages(data.concat(serverMessages)));
 
         return data;
       })
       .then((messages) => {
         syncProvider.isReady.then((provider) => {
           provider.subscribe(didUrl, messages?.[0]?.rawData.createTime || 0, (messages) => {
             setServerMessages((serverMessages) =>
-              duplicateServerMessages([...messages, ...serverMessages])
+              duplicateServerMessages(messages.concat(serverMessages))
             );
           });
         });
       });
     resolver.getMessages({ sender: didUrl }).then((data) => {
-      setServerMessages((serverMessages) => duplicateServerMessages([...data, ...serverMessages]));
+      setServerMessages((serverMessages) => duplicateServerMessages(data.concat(serverMessages)));
     });
 
     return () => {
@@ -200,22 +204,46 @@ function AppProvider({ children }: { children: React.ReactNode }) {
     await resolver.readMessage(id);
   }, []);
 
-  const setMessageStatus = useCallback((id: string, status: 'approved' | 'reject') => {
-    setServerMessages((serverMessages) =>
-      serverMessages.map((message) =>
-        id === message.id
-          ? {
-              ...message,
-              replyStatus: status
-            }
-          : message
-      )
-    );
-  }, []);
+  const sendMessage = useCallback(
+    async <T extends MessageType>(message?: Message<T> | null, reCaptchaToken?: string | null) => {
+      assert(message, 'Not encrypted message found');
+
+      verifyMessageEnvelope(message);
+      await verifyMessageSignature(message, resolver);
+
+      const serverMessage = await resolver.postMessage(message, reCaptchaToken ?? undefined);
+
+      setServerMessages((serverMessages) => {
+        let messages = [serverMessage].concat(serverMessages);
+
+        if (serverMessage.rawData.reply) {
+          messages = messages.map((message) =>
+            message.id === serverMessage.rawData.reply
+              ? {
+                  ...message,
+                  replyStatus: ['Response_Approve_Attestation', 'Response_Accept_VP'].includes(
+                    serverMessage.rawData.msgType
+                  )
+                    ? 'approved'
+                    : ['Response_Reject_Attestation', 'Response_Reject_VP'].includes(
+                        serverMessage.rawData.msgType
+                      )
+                    ? 'reject'
+                    : message.replyStatus
+                }
+              : message
+          );
+        }
+
+        return duplicateServerMessages(messages);
+      });
+    },
+    []
+  );
 
   const value = useMemo(
-    () => ({ messages, sentMessages, readMessage, setMessageStatus, decrypt }),
-    [decrypt, messages, readMessage, sentMessages, setMessageStatus]
+    () => ({ messages, sentMessages, readMessage, sendMessage, decrypt }),
+    [decrypt, messages, readMessage, sentMessages, sendMessage]
   );
 
   return <AppContext.Provider value={value}>{children}</AppContext.Provider>;

packages/react-dids/src/instance/DidResolver.ts

@@ -122,7 +122,10 @@ export class CredentialDidResolver extends ArweaveDidResolver {
     }
   }
 
-  async postMessage(message: Message<MessageType>, reCaptchaToken?: string): Promise<void> {
+  async postMessage<T extends MessageType>(
+    message: Message<MessageType>,
+    reCaptchaToken?: string
+  ): Promise<ServerMessage<T>> {
     const res = await post(`${this.server}/message`, { ...message, token: reCaptchaToken });
 
     if (res?.code !== 200) {

packages/react-dids/src/steps/index.ts

@@ -4,6 +4,5 @@
 export * from './AddCTypeStep';
 export * from './EncryptMessageStep';
 export * from './SignStep';
-export * from './SendMessageStep';
 
 export { default as Steps } from './Steps';