From 8f5056c326b1e6632a7b32deb734efd2a4c499de Mon Sep 17 00:00:00 2001
From: Martin <martin.moguillansky@gmail.com>
Date: Fri, 22 Nov 2024 19:00:38 -0300
Subject: [PATCH] feat: UI improvement - vouches info

---
 .../[pohid]/[chain]/[request]/ActionBar.tsx   |  7 ++--
 src/app/[pohid]/[chain]/[request]/page.tsx    | 34 ++++++++++++++-----
 src/contracts/apis/APIPoH.ts                  | 19 +++++++++++
 3 files changed, 49 insertions(+), 11 deletions(-)

diff --git a/src/app/[pohid]/[chain]/[request]/ActionBar.tsx b/src/app/[pohid]/[chain]/[request]/ActionBar.tsx
index 5c6857c..e70bd61 100644
--- a/src/app/[pohid]/[chain]/[request]/ActionBar.tsx
+++ b/src/app/[pohid]/[chain]/[request]/ActionBar.tsx
@@ -103,6 +103,7 @@ export default withClientConnected<ActionBarProps>(function ActionBar({
   const errorRef = useRef(false);
   const offChainRef = useRef(false);
   const [action, setAction] = useState(ActionType.NONE);
+  const [canAdvance, setCanAdvance] = useState(true);
   const [didIVouchFor, setDidIVouchFor] = useState(false);
   const [isVouchOnchain, setIsVouchOnchain] = useState(false);
 
@@ -205,7 +206,7 @@ export default withClientConnected<ActionBarProps>(function ActionBar({
         onFail() {
           !errorRef.current && toast.error("Advance is not possible");
           errorRef.current = true;
-          //setAction(ActionType.VOUCH);
+          setCanAdvance(false);
         },
       }),
       [loading],
@@ -240,6 +241,7 @@ export default withClientConnected<ActionBarProps>(function ActionBar({
 
   useEffect(() => {
     if (action === ActionType.ADVANCE && !revocation) {
+      setCanAdvance(true);
       prepareAdvance({
         args: [
           requester,
@@ -267,6 +269,7 @@ export default withClientConnected<ActionBarProps>(function ActionBar({
     revocation,
     chain,
     userChainId,
+    canAdvance,
   ]);
 
   useEffect(() => {
@@ -405,7 +408,7 @@ export default withClientConnected<ActionBarProps>(function ActionBar({
                 />
               ) : null}
               <button
-                disabled={pending || userChainId !== chain.id}
+                disabled={pending || userChainId !== chain.id || !canAdvance}
                 className="btn-main mb-2"
                 onClick={advance}
               >
diff --git a/src/app/[pohid]/[chain]/[request]/page.tsx b/src/app/[pohid]/[chain]/[request]/page.tsx
index 449a2c9..d0c8db7 100644
--- a/src/app/[pohid]/[chain]/[request]/page.tsx
+++ b/src/app/[pohid]/[chain]/[request]/page.tsx
@@ -54,12 +54,8 @@ export default async function Request({ params }: PageProps) {
     contractData.arbitrationInfo.extraData,
   );
 
-  const onChainVouches = request.claimer.vouchesReceived.map(
-    (v) => v.from.id as Address,
-  );
+  let onChainVouches: Array<Address> = [];
 
-  // This are vouches to be read directly from supabase, ie, vouches still not processed
-  // (only necessary before advance state in vouching status)
   const offChainVouches: {
     voucher: Address;
     expiration: number;
@@ -67,9 +63,23 @@ export default async function Request({ params }: PageProps) {
   }[] = [];
 
   if (request.status.id === "vouching") {
+    onChainVouches = request.claimer.vouchesReceived.map(
+      (v) => v.from.id as Address,
+    );
     offChainVouches.push(
       ...(await getOffChainVouches(chain.id, request.claimer.id, pohId)),
     );
+
+    // If offChain voucher has been registered before, it will appear at subgraph,
+    // so we remove it from onChain since the contract has no data of it
+    onChainVouches = onChainVouches.filter(
+      (onChainVoucher) =>
+        offChainVouches.filter((voucher) => voucher.voucher === onChainVoucher)
+          .length === 0,
+    );
+  } else {
+    // For any other request status there are registered vouches for this request
+    onChainVouches = request.vouches.map((v) => v.voucher.id as Address);
   }
 
   const hasExpired = () => {
@@ -456,7 +466,7 @@ export default async function Request({ params }: PageProps) {
               )}
               {vourchesForData.find((v) => v) && (
                 <div className="text-secondaryText mt-8 flex flex-col">
-                  Vouched for
+                  This PoHID vouched for
                   <div className="flex flex-wrap gap-2">
                     {vourchesForData.map(async (vouch, idx) => {
                       const vouchLocal = await Promise.resolve(vouch);
@@ -482,14 +492,20 @@ export default async function Request({ params }: PageProps) {
             <div className="w-full flex-wrap justify-between gap-2 md:flex-row md:items-center">
               {vouchersData.find((v) => v) && (
                 <div className="text-secondaryText mt-8 flex flex-col">
-                  Vouched by
+                  {request.status.id === "vouching"
+                    ? "Available vouches for this PoHID"
+                    : "Vouched for this request"}
                   <div className="flex flex-wrap gap-2">
                     {vouchersData.map(async (vouch, idx) => {
                       const vouchLocal = await Promise.resolve(vouch);
                       return (
                         <Vouch
                           isActive={vouchLocal.vouchStatus?.isValid}
-                          reason={vouchLocal.vouchStatus?.reason}
+                          reason={
+                            request.status.id === "vouching"
+                              ? vouchLocal.vouchStatus?.reason
+                              : undefined
+                          }
                           name={vouchLocal.name}
                           photo={vouchLocal.photo}
                           idx={idx}
@@ -497,7 +513,7 @@ export default async function Request({ params }: PageProps) {
                           pohId={vouchLocal.pohId}
                           address={vouchLocal.voucher}
                           isOnChain={vouchLocal.isOnChain}
-                          reducedTooltip={false}
+                          reducedTooltip={request.status.id !== "vouching"}
                         />
                       );
                     })}
diff --git a/src/contracts/apis/APIPoH.ts b/src/contracts/apis/APIPoH.ts
index 313ef94..87e54c6 100644
--- a/src/contracts/apis/APIPoH.ts
+++ b/src/contracts/apis/APIPoH.ts
@@ -146,4 +146,23 @@ export class APIPoH {
       });
     }
   }
+
+  public static async isValidVouch(
+    _chainId: SupportedChainId,
+    _voucher: Address,
+    _pohId: Address,
+    _address: Address,
+  ): Promise<boolean> {
+    const apiReader = APIPoH.getApiReader(_chainId);
+    let out: boolean = false;
+    try {
+      out = await apiReader.get("vouches", [_voucher, _pohId, _address]);
+      return out;
+    } catch (error) {
+      throw new Error({
+        statusCode: 520,
+        title: "Error while reading ProofOfHumanity",
+      });
+    }
+  }
 }