Fix/BITP-10 - Special characters translate in certificate subject, add state in verification result

src/components/DirectoryPreview.tsx

@@ -1,15 +1,16 @@
-import { Card, List } from "antd";
+import { Button, Card, List } from "antd";
 import Wrapper from "./Wrapper";
 import { useVerification } from "../providers/VerificationProvider";
 import { useTranslation } from "react-i18next";
 import { IPFSCid } from "../models/ReadDirectory";
 import { ArrowRightCircle } from "iconoir-react";
 import { Icon } from "react-extension-icons";
+import { CloseOutlined } from "@ant-design/icons";
 
 function DirectoryPreview() {
   const { t } = useTranslation();
 
-  const { directoryResponse, onInputChange, isLoading, error } =
+  const { directoryResponse, onInputChange, isLoading, error, reset } =
     useVerification();
 
   return (
@@ -23,6 +24,14 @@ function DirectoryPreview() {
               backgroundColor: "rgba(255, 255, 255, 0.9)",
             }}
             bordered={false}
+            extra={
+              <Button
+                type="text"
+                shape="circle"
+                icon={<CloseOutlined />}
+                onClick={() => reset()}
+              />
+            }
           >
             <h2 className="text-center mb-4">{t("directory.title")}</h2>
             <List loading={isLoading}>

src/components/Results.tsx

@@ -24,6 +24,7 @@ import { PropsWithChildren } from "react";
 import { useTranslation } from "react-i18next";
 import { useVerification } from "../providers/VerificationProvider";
 import {
+  decodeString,
   formatBytes,
   getNetworkTranslation,
   getTxHashURL,
@@ -257,7 +258,7 @@ function Results() {
                     <>
                       <Divider />
                       <Field label={t("results.authenticity.common-name")}>
-                        {signature.subject?.CN}
+                        {decodeString(signature.subject?.CN)}
                       </Field>
                     </>
                   )}
@@ -267,39 +268,39 @@ function Results() {
                       <Field
                         label={t("results.authenticity.organization-unit")}
                       >
-                        {signature.subject?.OU}
+                        {decodeString(signature.subject?.OU)}
                       </Field>
                     </>
                   )}
                   {signature.subject?.O && (
                     <>
                       <Divider />
                       <Field label={t("results.authenticity.organization")}>
-                        {signature.subject?.O}
+                        {decodeString(signature.subject?.O)}
                       </Field>
                     </>
                   )}
                   {signature.subject?.L && (
                     <>
                       <Divider />
                       <Field label={t("results.authenticity.location")}>
-                        {signature.subject?.L}
+                        {decodeString(signature.subject?.L)}
                       </Field>
                     </>
                   )}
-                  {signature.subject?.S && (
+                  {signature.subject?.ST && (
                     <>
                       <Divider />
                       <Field label={t("results.authenticity.state")}>
-                        {signature.subject?.S}
+                        {decodeString(signature.subject?.ST)}
                       </Field>
                     </>
                   )}
                   {signature.subject?.C && (
                     <>
                       <Divider />
                       <Field label={t("results.authenticity.country")}>
-                        {signature.subject?.C}
+                        {decodeString(signature.subject?.C)}
                       </Field>
                     </>
                   )}
@@ -339,47 +340,47 @@ function Results() {
           <>
             <Divider />
             <Field label={t("results.encryption.common-name")}>
-              {encryptionDetails.subject?.CN}
+              {decodeString(encryptionDetails.subject?.CN)}
             </Field>
           </>
         )}
         {encryptionDetails?.subject?.OU && (
           <>
             <Divider />
             <Field label={t("results.encryption.organization-unit")}>
-              {encryptionDetails.subject?.OU}
+              {decodeString(encryptionDetails.subject?.OU)}
             </Field>
           </>
         )}
         {encryptionDetails?.subject?.O && (
           <>
             <Divider />
             <Field label={t("results.encryption.organization")}>
-              {encryptionDetails.subject?.O}
+              {decodeString(encryptionDetails.subject?.O)}
             </Field>
           </>
         )}
         {encryptionDetails?.subject?.L && (
           <>
             <Divider />
             <Field label={t("results.encryption.location")}>
-              {encryptionDetails.subject?.L}
+              {decodeString(encryptionDetails.subject?.L)}
             </Field>
           </>
         )}
-        {encryptionDetails?.subject?.S && (
+        {encryptionDetails?.subject?.ST && (
           <>
             <Divider />
             <Field label={t("results.encryption.state")}>
-              {encryptionDetails.subject?.S}
+              {decodeString(encryptionDetails.subject?.ST)}
             </Field>
           </>
         )}
         {encryptionDetails?.subject?.C && (
           <>
             <Divider />
             <Field label={t("results.encryption.country")}>
-              {encryptionDetails.subject?.C}
+              {decodeString(encryptionDetails.subject?.C)}
             </Field>
           </>
         )}
@@ -552,7 +553,7 @@ function Results() {
                 <br />
                 <p className="font-bold">{t("results.general.issuer")}</p>
                 <p className="text-gray-500 text-sm">
-                  {authenticityDetails?.subject?.CN ||
+                  {decodeString(authenticityDetails?.subject?.CN) ||
                     t("results.not-available")}
                 </p>
                 <br />

src/i18n/locales/es.json

@@ -29,7 +29,7 @@
         "label": "Código"
       },
       "secret": {
-        "description": "This key has Secret access control enabled. In order to use it, add the secret below.",
+        "description": "Esta clave tiene control de acceso habilitado para Secreto. Para usarla, añade el secreto a continuación.",
         "label": "Secreto"
       }
     },
@@ -124,6 +124,7 @@
         "bloock_chain": "Bloock Chain",
         "ethereum_goerli": "",
         "ethereum_mainnet": "Ethereum",
+        "ethereum_sepolia": "Ethereum Sepolia",
         "gnosis_chain": "Gnosis",
         "label": "Redes",
         "polygon_chain": "Polygon",

src/utils/utils.ts

@@ -148,3 +148,9 @@ export function readBlob(file: Blob): Promise<Uint8Array> {
     reader.readAsArrayBuffer(file);
   });
 }
+
+export const decodeString = (encodedStr?: string) => {
+  if (encodedStr) {
+    return decodeURIComponent(escape(encodedStr));
+  }
+};