From dccce0ceb900d298abcfd586fd32f699f4bb8900 Mon Sep 17 00:00:00 2001
From: Rojhat Toptamus <63258225+RojhatToptamus@users.noreply.github.com>
Date: Wed, 26 Jun 2024 17:49:15 +0300
Subject: [PATCH] fix decoding on ui (#10)

* fix decoding
---
 .../app/dashboard/attestation/[uid]/page.tsx  | 21 ++++++++++++-------
 .../app/dashboard/attestations/page.tsx       |  2 +-
 .../nextjs/app/dashboard/schemas/page.tsx     | 12 +++++------
 packages/nextjs/components/Footer.tsx         |  3 ---
 packages/nextjs/utils/utils.ts                | 20 ++++++++++++++++++
 5 files changed, 40 insertions(+), 18 deletions(-)

diff --git a/packages/nextjs/app/dashboard/attestation/[uid]/page.tsx b/packages/nextjs/app/dashboard/attestation/[uid]/page.tsx
index 6698f65..9652798 100644
--- a/packages/nextjs/app/dashboard/attestation/[uid]/page.tsx
+++ b/packages/nextjs/app/dashboard/attestation/[uid]/page.tsx
@@ -1,7 +1,7 @@
 "use client";
 import React, { useState, useEffect } from "react";
 import { useRouter, useSearchParams } from "next/navigation";
-import { Attestation, timeAgo } from "~~/utils/utils";
+import { Attestation, decodePendingWord, timeAgo } from "~~/utils/utils";
 import { useScaffoldReadContract } from "~~/hooks/scaffold-stark/useScaffoldReadContract";
 
 export default function AttestationPage({
@@ -27,16 +27,21 @@ export default function AttestationPage({
 
   useEffect(() => {
     if (isSuccess && fetchedAttestation) {
+      console.log("Fetched Attestation:", fetchedAttestation);
       // Check if fetchedAttestation is an object
       const rawAttestation = fetchedAttestation as any;
       const mappedAttestation: Attestation = {
-        attester: rawAttestation.attester.toString(),
+        attester: `0x` + rawAttestation.attester.toString(16),
         data: {
-          data: rawAttestation.data.data.toString(),
+          data: decodePendingWord(
+            rawAttestation.data.pending_word,
+            rawAttestation.data.pending_word_len,
+          ),
         },
-        recipient: rawAttestation.recipient.toString(),
+        recipient: `0x` + rawAttestation.recipient.toString(16),
         revocable: rawAttestation.revocable.toString(),
-        revocation_time: rawAttestation.revocation_time.toString(),
+        revocation_time:
+          rawAttestation.revocation_time.toString() === "0" ? "False" : "True",
         schema_uid: rawAttestation.schema_uid.toString(),
         time: timeAgo(rawAttestation.time.toString()),
         uid: rawAttestation.uid.toString(),
@@ -73,14 +78,14 @@ export default function AttestationPage({
               </p>
             </div>
           ) : (
-            <div className="attestation-container p-6 shadow-md rounded-lg bg-[#E9E9F6]">
+            <div className="attestation-container p-6  rounded-lg bg-[#E9E9F6]">
               <div className="mb-4">
                 <span className="block text-sm text-gray-600">UID:</span>
                 <span className="block text-lg font-semibold text-gray-600">
                   {attestation.uid}
                 </span>
               </div>
-              <div className="border rounded-md overflow-hidden">
+              <div className="border rounded-md overflow-hidden shadow-md">
                 <table className="min-w-full bg-white">
                   <tbody>
                     <tr className="border-b">
@@ -133,7 +138,7 @@ export default function AttestationPage({
                     </tr>
                     <tr className="border-b">
                       <td className="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-50">
-                        Expiration
+                        Revoked
                       </td>
                       <td className="px-4 py-2 text-sm text-gray-900">
                         {attestation.revocation_time}
diff --git a/packages/nextjs/app/dashboard/attestations/page.tsx b/packages/nextjs/app/dashboard/attestations/page.tsx
index 15663d9..1aa6646 100644
--- a/packages/nextjs/app/dashboard/attestations/page.tsx
+++ b/packages/nextjs/app/dashboard/attestations/page.tsx
@@ -136,7 +136,7 @@ const Attestations = () => {
                   </thead>
                   <tbody>
                     {attestations.map((schema, index) => (
-                      <tr key={index} className="border-b">
+                      <tr key={index} className="border-b text-center">
                         <td className="px-4 py-2">
                           <AttestationLink uid={schema.uid} />
                         </td>
diff --git a/packages/nextjs/app/dashboard/schemas/page.tsx b/packages/nextjs/app/dashboard/schemas/page.tsx
index 19f4eeb..0007304 100644
--- a/packages/nextjs/app/dashboard/schemas/page.tsx
+++ b/packages/nextjs/app/dashboard/schemas/page.tsx
@@ -102,8 +102,8 @@ const Schemas = () => {
             </div>
           ) : (
             <div>
-              <div className="overflow-x-auto shadow-md rounded-lg">
-                <table className="min-w-full bg-white border border-gray-200 ">
+              <div className="overflow-x-auto shadow-md rounded-lg ">
+                <table className="min-w-full bg-white border border-gray-200">
                   <thead>
                     <tr className="bg-gray-100 border-b">
                       <th className="px-4 py-2 text-[#495FA9]">UID</th>
@@ -115,11 +115,11 @@ const Schemas = () => {
                   </thead>
                   <tbody>
                     {schemas.map((schema, index) => (
-                      <tr key={index} className="border-b">
-                        <td className="px-4 py-2">
-                          <SchemaLink uid={schema.uid} />
+                      <tr key={index} className="border-b ">
+                        <td className="px-4 py-2 text-[#495FA9] text-center">
+                          {schema.uid.toString()}
                         </td>
-                        <td className="px-4 py-2 text-[#495FA9]">
+                        <td className="px-4 py-2 text-[#495FA9] text-center">
                           {schema.caller}
                         </td>
                         <td className="px-4 py-2 text-[#495FA9]">
diff --git a/packages/nextjs/components/Footer.tsx b/packages/nextjs/components/Footer.tsx
index e810159..93a9e47 100644
--- a/packages/nextjs/components/Footer.tsx
+++ b/packages/nextjs/components/Footer.tsx
@@ -18,9 +18,6 @@ import { getBlockExplorerLink } from "~~/utils/scaffold-stark";
  * Site footer
  */
 export const Footer = () => {
-  const nativeCurrencyPrice = useGlobalState(
-    (state) => state.nativeCurrencyPrice,
-  );
   const { targetNetwork } = useTargetNetwork();
   const isLocalNetwork = targetNetwork.id === devnet.id;
 
diff --git a/packages/nextjs/utils/utils.ts b/packages/nextjs/utils/utils.ts
index a10a352..6f8c72e 100644
--- a/packages/nextjs/utils/utils.ts
+++ b/packages/nextjs/utils/utils.ts
@@ -86,6 +86,26 @@ export const fetchAllAttestations = async () => {
   ];
 };
 
+export function decodePendingWord(
+  pendingWord: bigint,
+  pendingWordLen: bigint,
+): string {
+  // Convert the pending_word to a hexadecimal string
+  let hexString = pendingWord.toString(16);
+
+  // Pad the string to ensure we have all the bytes
+  hexString = hexString.padStart(Number(pendingWordLen) * 2, "0");
+
+  // Convert each byte (2 hex characters) to its ASCII representation
+  let decodedString = "";
+  for (let i = 0; i < hexString.length; i += 2) {
+    const byte = parseInt(hexString.substr(i, 2), 16);
+    decodedString += String.fromCharCode(byte);
+  }
+
+  return decodedString;
+}
+
 export const fetchTokenName = async (): Promise<any> => {
   try {
     const name = await contract.call("name");