Replace useMessage message API by useApp message

0xPolygonID · Oct 9, 2024 · f902135 · f902135
1 parent 81eee46
commit f902135
Show file tree

Hide file tree

Showing 23 changed files with 1,098 additions and 1,190 deletions.
diff --git a/ui/src/components/connections/ConnectionDeleteModal.tsx b/ui/src/components/connections/ConnectionDeleteModal.tsx
@@ -1,4 +1,4 @@
-import { Checkbox, Divider, Modal, Space, Typography, message } from "antd";
+import { App, Checkbox, Divider, Modal, Space, Typography } from "antd";
 import { CheckboxChangeEvent } from "antd/es/checkbox";
 import { useState } from "react";
 
@@ -21,8 +21,7 @@ export function ConnectionDeleteModal({
   const env = useEnvContext();
   const { identifier } = useIdentityContext();
   const { notifyChange } = useIssuerStateContext();
-
-  const [messageAPI, messageContext] = message.useMessage();
+  const { message } = App.useApp();
 
   const [revokeCredentials, setRevokeCredentials] = useState<boolean>(false);
   const [deleteCredentials, setDeleteCredentials] = useState<boolean>(false);
@@ -38,60 +37,52 @@ export function ConnectionDeleteModal({
             void notifyChange("revoke");
           }
 
-          void messageAPI.success(response.data.message);
+          void message.success(response.data.message);
         } else {
-          void messageAPI.error(response.error.message);
+          void message.error(response.error.message);
         }
       }
     );
   };
 
   return (
-    <>
-      {messageContext}
-
-      <Modal
-        cancelText={CLOSE}
-        centered
-        closable
-        closeIcon={<IconClose />}
-        maskClosable
-        okButtonProps={{ danger: true }}
-        okText={DELETE}
-        onCancel={onClose}
-        onOk={handleDeleteConnection}
-        open
-        title="Are you sure you want to delete this connection?"
-      >
-        <Typography.Text type="secondary">
-          Identity will be deleted from your connections.
-        </Typography.Text>
-        <Divider />
-        <Space direction="vertical">
-          <Typography.Text strong>Would you also like to:</Typography.Text>
-          <Checkbox
-            onChange={({ target: { checked } }: CheckboxChangeEvent) =>
-              setRevokeCredentials(checked)
-            }
-          >
-            <Typography.Text>Revoke all credentials for this connection.</Typography.Text>
-            <Typography.Paragraph type="secondary">
-              Revoking must be accompanied by publishing of issuer state in order for the action to
-              be effective.
-            </Typography.Paragraph>
-          </Checkbox>
-          <Checkbox
-            onChange={({ target: { checked } }: CheckboxChangeEvent) =>
-              setDeleteCredentials(checked)
-            }
-          >
-            <Typography.Text>Delete all credentials for this connection.</Typography.Text>
-            <Typography.Paragraph type="secondary">
-              Credential data will be deleted from the database.
-            </Typography.Paragraph>
-          </Checkbox>
-        </Space>
-      </Modal>
-    </>
+    <Modal
+      cancelText={CLOSE}
+      centered
+      closable
+      closeIcon={<IconClose />}
+      maskClosable
+      okButtonProps={{ danger: true }}
+      okText={DELETE}
+      onCancel={onClose}
+      onOk={handleDeleteConnection}
+      open
+      title="Are you sure you want to delete this connection?"
+    >
+      <Typography.Text type="secondary">
+        Identity will be deleted from your connections.
+      </Typography.Text>
+      <Divider />
+      <Space direction="vertical">
+        <Typography.Text strong>Would you also like to:</Typography.Text>
+        <Checkbox
+          onChange={({ target: { checked } }: CheckboxChangeEvent) => setRevokeCredentials(checked)}
+        >
+          <Typography.Text>Revoke all credentials for this connection.</Typography.Text>
+          <Typography.Paragraph type="secondary">
+            Revoking must be accompanied by publishing of issuer state in order for the action to be
+            effective.
+          </Typography.Paragraph>
+        </Checkbox>
+        <Checkbox
+          onChange={({ target: { checked } }: CheckboxChangeEvent) => setDeleteCredentials(checked)}
+        >
+          <Typography.Text>Delete all credentials for this connection.</Typography.Text>
+          <Typography.Paragraph type="secondary">
+            Credential data will be deleted from the database.
+          </Typography.Paragraph>
+        </Checkbox>
+      </Space>
+    </Modal>
   );
 }
diff --git a/ui/src/components/credentials/IssueCredential.tsx b/ui/src/components/credentials/IssueCredential.tsx
@@ -1,4 +1,4 @@
-import { Card, Space, message } from "antd";
+import { App, Card, Space } from "antd";
 import { useCallback, useEffect, useState } from "react";
 import { generatePath, useNavigate, useSearchParams } from "react-router-dom";
 
@@ -50,9 +50,8 @@ export function IssueCredential() {
   const env = useEnvContext();
   const { identifier } = useIdentityContext();
   const { notifyChange } = useIssuerStateContext();
-
+  const { message } = App.useApp();
   const navigate = useNavigate();
-  const [messageAPI, messageContext] = message.useMessage();
   const [searchParams] = useSearchParams();
 
   const schemaID = searchParams.get(SCHEMA_SEARCH_PARAM) || undefined;
@@ -150,12 +149,12 @@ export function IssueCredential() {
             setStep("summary");
           } else {
             setAuthQRCode({ error: authQRResponse.error, status: "failed" });
-            void messageAPI.error(authQRResponse.error.message);
+            void message.error(authQRResponse.error.message);
           }
 
-          void messageAPI.success("Credential link created");
+          void message.success("Credential link created");
         } else {
-          void messageAPI.error(linkResponse.error.message);
+          void message.error(linkResponse.error.message);
         }
       } else {
         notifyParseError(serializedCredentialForm.error);
@@ -201,9 +200,9 @@ export function IssueCredential() {
             void notifyChange("credential");
           }
 
-          void messageAPI.success("Credential issued");
+          void message.success("Credential issued");
         } else {
-          void messageAPI.error(response.error.message);
+          void message.error(response.error.message);
         }
       } else {
         notifyParseError(serializedCredentialForm.error);
@@ -223,96 +222,92 @@ export function IssueCredential() {
   }, [schemaID]);
 
   return (
-    <>
-      {messageContext}
-
-      <SiderLayoutContent
-        description="A credential is issued with assigned attribute values and can be issued directly to identifier or as a credential link containing a QR code."
-        showBackButton
-        showDivider
-        title={ISSUE_CREDENTIAL}
-      >
-        {(() => {
-          switch (step) {
-            case "issuanceMethod": {
-              return (
-                <IssuanceMethodForm
-                  initialValues={credentialFormInput.issuanceMethod}
-                  onChangeDid={onChangeDid}
-                  onSubmit={(values) => {
-                    setCredentialFormInput({ ...credentialFormInput, issuanceMethod: values });
-                    setStep("issueCredential");
-                  }}
-                />
-              );
-            }
-
-            case "issueCredential": {
-              return (
-                <Card className="issue-credential-card" title="Credential details">
-                  <Space direction="vertical">
-                    <IssueCredentialForm
-                      initialValues={credentialFormInput.issueCredential}
-                      isLoading={isLoading}
-                      onBack={() => {
-                        setStep("issuanceMethod");
-                      }}
-                      onSelectApiSchema={onSelectApiSchema}
-                      onSubmit={({
-                        apiSchema,
-                        jsonSchema,
-                        values,
-                      }: {
-                        apiSchema: ApiSchema;
-                        jsonSchema: JsonSchema;
-                        values: IssueCredentialFormData;
-                      }) => {
-                        const newCredentialFormInput: CredentialFormInput = {
-                          ...credentialFormInput,
-                          issueCredential: values,
-                        };
-
-                        setCredentialFormInput(newCredentialFormInput);
-
-                        const parsedForm = credentialFormParser.safeParse(newCredentialFormInput);
-
-                        if (parsedForm.success) {
-                          if (parsedForm.data.type === "credentialLink") {
-                            void createCredentialLink({
-                              credentialLinkIssuance: parsedForm.data,
-                              jsonSchema,
-                            });
-                          } else {
-                            void issueCredential({
-                              apiSchema,
-                              credentialIssuance: parsedForm.data,
-                              jsonSchema,
-                            });
-                          }
+    <SiderLayoutContent
+      description="A credential is issued with assigned attribute values and can be issued directly to identifier or as a credential link containing a QR code."
+      showBackButton
+      showDivider
+      title={ISSUE_CREDENTIAL}
+    >
+      {(() => {
+        switch (step) {
+          case "issuanceMethod": {
+            return (
+              <IssuanceMethodForm
+                initialValues={credentialFormInput.issuanceMethod}
+                onChangeDid={onChangeDid}
+                onSubmit={(values) => {
+                  setCredentialFormInput({ ...credentialFormInput, issuanceMethod: values });
+                  setStep("issueCredential");
+                }}
+              />
+            );
+          }
+
+          case "issueCredential": {
+            return (
+              <Card className="issue-credential-card" title="Credential details">
+                <Space direction="vertical">
+                  <IssueCredentialForm
+                    initialValues={credentialFormInput.issueCredential}
+                    isLoading={isLoading}
+                    onBack={() => {
+                      setStep("issuanceMethod");
+                    }}
+                    onSelectApiSchema={onSelectApiSchema}
+                    onSubmit={({
+                      apiSchema,
+                      jsonSchema,
+                      values,
+                    }: {
+                      apiSchema: ApiSchema;
+                      jsonSchema: JsonSchema;
+                      values: IssueCredentialFormData;
+                    }) => {
+                      const newCredentialFormInput: CredentialFormInput = {
+                        ...credentialFormInput,
+                        issueCredential: values,
+                      };
+
+                      setCredentialFormInput(newCredentialFormInput);
+
+                      const parsedForm = credentialFormParser.safeParse(newCredentialFormInput);
+
+                      if (parsedForm.success) {
+                        if (parsedForm.data.type === "credentialLink") {
+                          void createCredentialLink({
+                            credentialLinkIssuance: parsedForm.data,
+                            jsonSchema,
+                          });
                         } else {
-                          notifyParseError(parsedForm.error);
+                          void issueCredential({
+                            apiSchema,
+                            credentialIssuance: parsedForm.data,
+                            jsonSchema,
+                          });
                         }
-                      }}
-                      type={credentialFormInput.issuanceMethod.type}
-                    />
-                  </Space>
-                </Card>
-              );
-            }
-
-            case "summary": {
-              return (
-                isAsyncTaskDataAvailable(authQRCode) && (
-                  <Summary
-                    deepLink={authQRCode.data.deepLink}
-                    universalLink={authQRCode.data.universalLink}
+                      } else {
+                        notifyParseError(parsedForm.error);
+                      }
+                    }}
+                    type={credentialFormInput.issuanceMethod.type}
                   />
-                )
-              );
-            }
+                </Space>
+              </Card>
+            );
           }
-        })()}
-      </SiderLayoutContent>
-    </>
+
+          case "summary": {
+            return (
+              isAsyncTaskDataAvailable(authQRCode) && (
+                <Summary
+                  deepLink={authQRCode.data.deepLink}
+                  universalLink={authQRCode.data.universalLink}
+                />
+              )
+            );
+          }
+        }
+      })()}
+    </SiderLayoutContent>
   );
 }