From 6108968434968198ee5e78103f430a2f5554d79b Mon Sep 17 00:00:00 2001
From: Satyajeet Kolhapure
 <77279246+satyajeetkolhapure@users.noreply.github.com>
Date: Fri, 8 Nov 2024 17:10:36 +0000
Subject: [PATCH] feat(explorer): As a user, I want to see Expired and Revoked
 Attestations with a watermark on the Subject page (#794)

Co-authored-by: Alain Nicolas <alainncls@users.noreply.github.com>
---
 .../src/assets/watermarks/revoked-watermark.svg     |  7 +++++++
 .../components/AttestationCard/index.tsx            | 13 ++++++++++++-
 .../components/AttestationCard/interface.ts         |  1 +
 .../Attestations/components/CardView/index.tsx      |  1 +
 .../Attestations/components/CardView/interface.ts   |  1 +
 5 files changed, 22 insertions(+), 1 deletion(-)
 create mode 100644 explorer/src/assets/watermarks/revoked-watermark.svg

diff --git a/explorer/src/assets/watermarks/revoked-watermark.svg b/explorer/src/assets/watermarks/revoked-watermark.svg
new file mode 100644
index 00000000..7caa1907
--- /dev/null
+++ b/explorer/src/assets/watermarks/revoked-watermark.svg
@@ -0,0 +1,7 @@
+<svg viewBox="0 0 100 100" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
+  <rect x="0" y="0" width="100" height="100" fill="none" stroke="#f87171" strokeWidth="1" rx="4" ry="4" />
+  <line x1="1" y1="1" x2="99" y2="99" stroke="#f87171" strokeWidth="1" />
+  <text x="50" y="50" fill="#f87171" fontSize="5" textAnchor="middle" transform="rotate(45, 50, 50)" dy="-.3em">
+    Revoked
+  </text>
+</svg>
diff --git a/explorer/src/pages/Attestation/components/AttestationCard/index.tsx b/explorer/src/pages/Attestation/components/AttestationCard/index.tsx
index cbcbe001..56b0519c 100644
--- a/explorer/src/pages/Attestation/components/AttestationCard/index.tsx
+++ b/explorer/src/pages/Attestation/components/AttestationCard/index.tsx
@@ -23,6 +23,7 @@ export const AttestationCard: React.FC<IAttestationCardProps> = ({
   portalId,
   issuanceDate,
   expiryDate,
+  revoked,
 }) => {
   const {
     sdk,
@@ -102,9 +103,19 @@ export const AttestationCard: React.FC<IAttestationCardProps> = ({
   return (
     <div
       key={`${id}`}
-      className="group flex flex-col justify-between gap-4 border border-border-card dark:border-border-cardDark rounded-xl p-4 md:p-6 hover:bg-surface-secondary dark:hover:bg-surface-secondaryDark transition md:min-h-[20rem]"
+      className={`relative group flex flex-col justify-between gap-4 border border-border-card dark:border-border-cardDark rounded-xl p-4 md:p-6 hover:bg-surface-secondary dark:hover:bg-surface-secondaryDark transition md:min-h-[20rem] ${
+        (isExpired || revoked) && "bg-surface-darkGrey dark:bg-surface-darkGreyDark"
+      }`}
     >
       <div>
+        {revoked && (
+          <div
+            className="absolute inset-0 flex items-center justify-center text-red-500 text-4xl md:text-6xl font-bold opacity-50 pointer-events-none"
+            style={{ transform: "rotate(-45deg)" }}
+          >
+            Revoked
+          </div>
+        )}
         <div className="flex items-start gap-3 text-xl md:text-md font-semibold text-blackDefault dark:text-whiteDefault">
           <div className="w-[2.5rem] h-[2.5rem] md:w-[3rem] md:h-[3rem] flex items-center mr-2 justify-center">
             {displayLogo()}
diff --git a/explorer/src/pages/Attestation/components/AttestationCard/interface.ts b/explorer/src/pages/Attestation/components/AttestationCard/interface.ts
index bbdf149c..e0b03a76 100644
--- a/explorer/src/pages/Attestation/components/AttestationCard/interface.ts
+++ b/explorer/src/pages/Attestation/components/AttestationCard/interface.ts
@@ -4,4 +4,5 @@ export interface IAttestationCardProps {
   portalId: string;
   issuanceDate: number;
   expiryDate?: number;
+  revoked: boolean;
 }
diff --git a/explorer/src/pages/Attestations/components/CardView/index.tsx b/explorer/src/pages/Attestations/components/CardView/index.tsx
index 8a3267fd..a8e97393 100644
--- a/explorer/src/pages/Attestations/components/CardView/index.tsx
+++ b/explorer/src/pages/Attestations/components/CardView/index.tsx
@@ -15,6 +15,7 @@ export const CardView: React.FC<ICardViewProps> = ({ attestationsList }) => {
               portalId={attestation.portal.id}
               issuanceDate={attestation.attestedDate}
               expiryDate={attestation.expirationDate}
+              revoked={attestation.revoked}
             />
           );
         })}
diff --git a/explorer/src/pages/Attestations/components/CardView/interface.ts b/explorer/src/pages/Attestations/components/CardView/interface.ts
index 6c63b2bf..2b3695d4 100644
--- a/explorer/src/pages/Attestations/components/CardView/interface.ts
+++ b/explorer/src/pages/Attestations/components/CardView/interface.ts
@@ -9,5 +9,6 @@ export interface ICardViewProps {
     };
     attestedDate: number;
     expirationDate?: number;
+    revoked: boolean;
   }>;
 }