Merge branch 'main' into starknetAttestationServiceContract

krisoshea-eth · Jun 23, 2024 · 3e3caa1 · 3e3caa1
2 parents 2099084 + 5f4a929
commit 3e3caa1
Show file tree

Hide file tree

Showing 25 changed files with 8,501 additions and 823 deletions.
diff --git a/packages/nextjs/app/dashboard/attestation/[uid]/page.tsx b/packages/nextjs/app/dashboard/attestation/[uid]/page.tsx
@@ -0,0 +1,138 @@
+"use client";
+import React, { useState, useEffect } from "react";
+import { useRouter, useSearchParams } from "next/navigation";
+import { fetchAttestation, Attestation } from "~~/utils/utils";
+
+export default function AttestationPage({
+  params,
+}: {
+  params: { uid: string };
+}) {
+  const uid = params.uid;
+  const [attestation, setAttestation] = useState<Attestation | null>(null);
+
+  useEffect(() => {
+    console.log("UUID:", uid);
+    if (uid) {
+      fetchAttestation(uid)
+        .then((data) => {
+          console.log("Fetched data:", data);
+          setAttestation(data);
+        })
+        .catch((error) => {
+          console.error("Error fetching attestation:", error);
+        });
+    }
+  }, [uid]);
+
+  if (!attestation) {
+    return <div>Loading...</div>;
+  }
+
+  return (
+    <div className="attestation-container p-6 shadow-md 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">
+        <table className="min-w-full bg-white">
+          <tbody>
+            <tr className="border-b">
+              <td className="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-50">
+                Schema
+              </td>
+              <td className="px-4 py-2 text-sm text-gray-900">
+                {attestation.schema}
+              </td>
+            </tr>
+            <tr className="border-b">
+              <td className="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-50">
+                Is Endorsement
+              </td>
+              <td className="px-4 py-2 text-sm text-gray-900">
+                {attestation.isEndorsement ? "True" : "False"}
+              </td>
+            </tr>
+            <tr className="border-b">
+              <td className="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-50">
+                Name
+              </td>
+              <td className="px-4 py-2 text-sm text-gray-900">
+                {attestation.name}
+              </td>
+            </tr>
+            <tr className="border-b">
+              <td className="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-50">
+                Domain
+              </td>
+              <td className="px-4 py-2 text-sm text-gray-900">
+                {attestation.domain}
+              </td>
+            </tr>
+            <tr className="border-b">
+              <td className="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-50">
+                Context
+              </td>
+              <td className="px-4 py-2 text-sm text-gray-900">
+                {attestation.context}
+              </td>
+            </tr>
+            <tr className="border-b">
+              <td className="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-50">
+                IPFS Hash
+              </td>
+              <td className="px-4 py-2 text-sm text-gray-900">
+                <a href={attestation.ipfsHash} className="text-blue-500">
+                  {attestation.ipfsHash}
+                </a>
+              </td>
+            </tr>
+            <tr className="border-b">
+              <td className="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-50">
+                From
+              </td>
+              <td className="px-4 py-2 text-sm text-gray-900">
+                {attestation.from}
+              </td>
+            </tr>
+            <tr className="border-b">
+              <td className="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-50">
+                To
+              </td>
+              <td className="px-4 py-2 text-sm text-gray-900">
+                {attestation.to}
+              </td>
+            </tr>
+            <tr className="border-b">
+              <td className="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-50">
+                Created
+              </td>
+              <td className="px-4 py-2 text-sm text-gray-900">
+                {attestation.created}
+              </td>
+            </tr>
+            <tr className="border-b">
+              <td className="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-50">
+                Expiration
+              </td>
+              <td className="px-4 py-2 text-sm text-gray-900">
+                {attestation.expiration}
+              </td>
+            </tr>
+            <tr>
+              <td className="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-50">
+                Revoked
+              </td>
+              <td className="px-4 py-2 text-sm text-gray-900">
+                {attestation.revoked}
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}
diff --git a/packages/nextjs/app/dashboard/attestations/page.tsx b/packages/nextjs/app/dashboard/attestations/page.tsx
@@ -0,0 +1,145 @@
+"use client";
+import React, { useState, useEffect } from "react";
+import Link from "next/link";
+import { fetchAllAttestations, shortAddress } from "~~/utils/utils";
+import Modal from "~~/components/Modal";
+import CreateAttestationForm from "~~/components/forms/CreateAttestationForm";
+const Dashboard = () => {
+  const [attestations, setAttestations] = useState<any[]>([]);
+  const [stats, setStats] = useState<{
+    totalAtestations: number;
+    totalSchemas: number;
+    totalAttestors: number;
+  }>({
+    totalAtestations: 0,
+    totalSchemas: 0,
+    totalAttestors: 0,
+  });
+
+  const getAttestations = async () => {
+    try {
+      const attestationData = await fetchAllAttestations();
+    } catch (error) {
+      console.error("Error fetching attestations:", error);
+    }
+  };
+
+  const AttestationLink = ({ uid }: { uid: string }) => (
+    <Link href={`/dashboard/attestation/${uid}`} className="text-[#495FA9]">
+      {shortAddress(uid)}
+    </Link>
+  );
+
+  const DashboardStats = ({
+    totalAtestations,
+    totalSchemas,
+    totalAttestors,
+  }: {
+    totalAtestations: number;
+    totalSchemas: number;
+    totalAttestors: number;
+  }) => (
+    <div className="flex justify-around mb-6">
+      <div className="text-center">
+        <div className="text-3xl font-bold text-[#495FA9]">
+          {totalAtestations}
+        </div>
+        <div className="text-gray-600">Total Attestations</div>
+      </div>
+      <div className="text-center">
+        <div className="text-3xl font-bold text-[#495FA9]">{totalSchemas}</div>
+        <div className="text-gray-600">Total Schemas</div>
+      </div>
+      <div className="text-center">
+        <div className="text-3xl font-bold text-[#495FA9]">
+          {totalAttestors}
+        </div>
+        <div className="text-gray-600">Total Attestors</div>
+      </div>
+    </div>
+  );
+
+  useEffect(() => {
+    getAttestations();
+  }, []);
+  return (
+    <div>
+      <div className="p-4 bg-[#E9E9F6]">
+        <div className=" p-6 rounded-lg shadow-md">
+          <div className="flex justify-between items-center mb-6">
+            <div>
+              <h1 className="text-2xl font-bold text-[#495FA9]">
+                Attestation Scan
+              </h1>
+              <p className="text-gray-600">
+                Showing the most recent Solas Attestations.
+              </p>
+            </div>
+            <Modal
+              trigger={({ openModal }) => (
+                <button
+                  className="bg-[#F5A162] text-white px-4 py-2 rounded-lg"
+                  onClick={openModal}
+                >
+                  Make Attestation
+                </button>
+              )}
+            >
+              <CreateAttestationForm />
+            </Modal>
+          </div>
+          <DashboardStats
+            totalAtestations={stats.totalAtestations}
+            totalSchemas={stats.totalSchemas}
+            totalAttestors={stats.totalAttestors}
+          />
+          <div className="overflow-x-auto">
+            <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>
+                  <th className="px-4 py-2 text-[#495FA9]">Schema</th>
+                  <th className="px-4 py-2 text-[#495FA9]">From</th>
+                  <th className="px-4 py-2 text-[#495FA9]">To</th>
+                  <th className="px-4 py-2 text-[#495FA9]">Type</th>
+                  <th className="px-4 py-2 text-[#495FA9]">Age</th>
+                </tr>
+              </thead>
+              <tbody>
+                {attestations.map((attestation) => (
+                  <tr key={attestation.uid} className="border-b">
+                    <td className="px-4 py-2">
+                      <AttestationLink uid={attestation.uid} />
+                    </td>
+                    <td className="px-4 py-2 text-[#495FA9]">
+                      {attestation.schema}
+                    </td>
+                    <td className="px-4 py-2 text-[#495FA9]">
+                      {attestation.from}
+                    </td>
+                    <td className="px-4 py-2 text-[#495FA9]">
+                      {attestation.to}
+                    </td>
+                    <td className="px-4 py-2 text-[#495FA9]">
+                      {attestation.type}
+                    </td>
+                    <td className="px-4 py-2 text-[#495FA9]">
+                      {attestation.age}
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+          <div className="mt-4 text-center">
+            <a className="text-blue-600" href="/attestations">
+              View all attestations
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Dashboard;
diff --git a/packages/nextjs/app/dashboard/page.tsx b/packages/nextjs/app/dashboard/page.tsx
@@ -0,0 +1,18 @@
+"use client";
+import Link from "next/link";
+import React, { useState, useEffect } from "react";
+const Dashboard = () => {
+  return (
+    <div>
+      <div className="p-4">
+        <p>Welcome to Dashboard!</p>
+        <Link href="/dashboard/attestations">Attestations</Link>
+        <br></br>
+        <br></br>
+        <Link href="/dashboard/schemas">Schemas</Link>
+      </div>
+    </div>
+  );
+};
+
+export default Dashboard;
diff --git a/packages/nextjs/app/dashboard/schema/[uid]/page.tsx b/packages/nextjs/app/dashboard/schema/[uid]/page.tsx
@@ -0,0 +1,73 @@
+"use client";
+import React, { useState, useEffect } from "react";
+import { useRouter, useSearchParams } from "next/navigation";
+import { fetchSchema, Schema } from "~~/utils/utils";
+
+export default function AttestationPage({
+  params,
+}: {
+  params: { uid: string };
+}) {
+  const uid = params.uid;
+  const [schema, setSchema] = useState<Schema | null>(null);
+
+  useEffect(() => {
+    console.log("UUID:", uid);
+    if (uid) {
+      fetchSchema(uid)
+        .then((data) => {
+          console.log("Fetched data:", data);
+          setSchema(data);
+        })
+        .catch((error) => {
+          console.error("Error fetching schema:", error);
+        });
+    }
+  }, [uid]);
+
+  if (!schema) {
+    return <div>Loading...</div>;
+  }
+
+  return (
+    <div className="attestation-container p-6 shadow-md 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">
+          {schema.uid}
+        </span>
+      </div>
+      <div className="border rounded-md overflow-hidden">
+        <table className="min-w-full bg-white">
+          <tbody>
+            <tr className="border-b">
+              <td className="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-50">
+                UID
+              </td>
+              <td className="px-4 py-2 text-sm text-gray-900">
+                {schema.uid ? "True" : "False"}
+              </td>
+            </tr>
+
+            <tr className="border-b">
+              <td className="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-50">
+                Schema
+              </td>
+              <td className="px-4 py-2 text-sm text-gray-900">
+                {schema.schema}
+              </td>
+            </tr>
+            <tr className="border-b">
+              <td className="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-50">
+                Attestations
+              </td>
+              <td className="px-4 py-2 text-sm text-gray-900">
+                {schema.attestations ? "True" : "False"}
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}