EAS Attestations Displayed

daostar-website/src/App.js

@@ -244,7 +244,18 @@ function App() {
     data: arbitrumData,
   } = arbitrumRes;
 
-
+  const EASOptimismGoerliRes = useQuery(queries.ATTESTATIONS_BY_SCHEMA, {
+    context: { apiName: "easOptimismGoerli" },
+    variables: { 
+      schemaId: "0x5e7633bad97b4b8e8248b93aa8f9bfa6b905f7eeb70a8b2053b460f0a2d44f1f", 
+    },
+  });
+  const {
+    loading: EASOptimismGoerliLoading,
+    error: EASOptimismGoerliError,
+    data: EASOptimismGoerliData,
+  } = EASOptimismGoerliRes;
+  console.log(EASOptimismGoerliData)
 
   if (
     error ||
@@ -296,6 +307,9 @@ function App() {
   const chapelRegistrations =
     chapelData?.registrationNetwork?.registrations || [];
 
+  const EASOptimismGoerliAttestations =
+    EASOptimismGoerliData?.attestations || [];
+
   // This object clones and modifies the mainnetV0 registration instances to change the network ID to "ethereum"
   // So that when we click on an old registration instance card we are able to view and edit its proprties
   // this allows to query mainnetV0 subgraph link
@@ -366,6 +380,7 @@ function App() {
                   junosInstances={daodaoInstances}
                   osmosisInstances={osmosisInstances}
                   stargazeInstances={stargazeInstances}
+                  easOptimismGoerli={EASOptimismGoerliAttestations}
                 />
               }
             />

daostar-website/src/components/AttestationCard/AttestationCard.css

@@ -0,0 +1,70 @@
+.attestation-card {
+    position: relative;
+    width: 100%;
+    min-height: 100px;
+}
+
+.attestation-card h3 {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+}
+
+.card-metadata {
+    padding: 12px 24px;
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+}
+
+.card-metadata p {
+    line-height: 1.5;
+}
+
+.card-metadata h6 {
+    font-weight: 400;
+    color: #9c9c9c;
+    margin: 0;
+
+}
+
+.card-metadata-value {
+    max-width: 65%;
+    text-overflow: ellipsis;
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+    white-space: nowrap;
+    display: inline-block;
+    vertical-align: bottom;
+}
+
+.card-metadata-item svg {
+    position: relative;
+    top: -4px;
+    left: 4px;
+}
+
+.card-metadata-row {
+    margin: 18px 24px 0 0;
+    display: flex;
+    justify-content: space-between;
+}
+
+a.card-link {
+    border-bottom: 0;
+}
+
+.card-link .bp4-card {
+    border: 1px solid var(--card-border);
+}
+
+.card-link .bp4-card:hover {
+    background-color: #3b3b3b;
+    color: inherit;
+    border: 1px solid var(--card-border-hover);
+}
+
+.edit-reg-btn {
+    position: absolute;
+    top: 20px;
+    right: 24px;
+}

daostar-website/src/components/AttestationCard/AttestationCard.js

@@ -0,0 +1,118 @@
+import React, { useState, Fragment } from 'react';
+import { Button, Card, Divider, FormGroup, Spinner } from '@blueprintjs/core';
+import EtherscanLink from "../RegistrationCard/DisplayRegistration/EtherscanLink/EtherscanLink";
+import './AttestationCard.css'
+import { Link } from 'react-router-dom';
+
+const DisplayAttestation = ({
+    id,
+    data,
+    decodedDataJson,
+    recipient,
+    attester,
+    time,
+    expirationTime,
+    revocable,
+    revoked,
+    schemaId,
+    ipfsHash,
+    isOffchain,
+    onClickEdit,
+    standalone
+  }) => {
+    const decodedData = JSON.parse(decodedDataJson);
+
+    const renderEtherscanLink = (address) => (
+      <EtherscanLink address={address} />
+    );
+
+    const formatTime = (timestamp) => {
+      return new Date(timestamp * 1000).toLocaleString();
+    };
+
+    //Extract DAO Name
+    const daoName = decodedData.find(item => item.name === "daoName")?.value.value || "Unknown DAO";
+    const daoURI = decodedData.find(item => item.name === "daoURI")?.value.value || "https://daostar.org/registration";
+
+
+    return (
+    <Card
+        className='wizard-card attestation-card'
+    >
+      <Fragment>
+        <h3>{daoName}</h3>
+
+        {standalone === true && (
+          <Button
+            className="edit-reg-btn"
+            icon="edit"
+            text="Edit"
+            onClick={onClickEdit}
+          />
+        )}
+        <Divider />
+        <div className="card-metadata">
+        <p className="bp4-text-small wizard-no-margin">
+            <span className="bp4-text-muted">Attestation ID: </span>
+            {id}
+          </p>
+          <p className="bp4-text-small wizard-no-margin">
+            <span className="bp4-text-muted">Recipient Address: </span>
+            {renderEtherscanLink(recipient)}
+          </p>
+          <p className="bp4-text-small wizard-no-margin">
+            <span className="bp4-text-muted">Attester Address: </span>
+            {renderEtherscanLink(attester)}
+          </p>
+          <p className="bp4-text-small wizard-no-margin">
+            <span className="bp4-text-muted">Time: </span>
+            <span className="card-metadata-value">{formatTime(time)}</span>
+          </p>
+          <p className="bp4-text-small wizard-no-margin">
+            <span className="bp4-text-muted">Expiration Time: </span>
+            <span className="card-metadata-value">{expirationTime ? formatTime(expirationTime) : 'None'}</span>
+          </p>
+          <p className="bp4-text-small wizard-no-margin">
+            <span className="bp4-text-muted">Revocable: </span>
+            <span className="card-metadata-value">{revocable ? 'Yes' : 'No'}</span>
+          </p>
+          <p className="bp4-text-small wizard-no-margin">
+            <span className="bp4-text-muted">Revoked: </span>
+            <span className="card-metadata-value">{revoked ? 'Yes' : 'No'}</span>
+          </p>
+          <p className="bp4-text-small wizard-no-margin">
+            <span className="bp4-text-muted">Schema ID: </span>
+            {schemaId}
+          </p>
+          <p className="bp4-text-small wizard-no-margin">
+            <span className="bp4-text-muted">IPFS Hash: </span>
+            {ipfsHash}
+          </p>
+
+          <p className="bp4-text-small wizard-no-margin">
+            <span className="bp4-text-muted">Offchain: </span>
+            <span className="card-metadata-value">{isOffchain ? 'Yes' : 'No'}</span>
+          </p>
+          <Divider style={{ marginTop: '5px', marginBottom: '5px'}}/>
+          <p className="bp4-text-small wizard-no-margin">
+            <span className="bp4-text-muted">DAO URI: </span>
+            <Link target='_blank'  to={daoURI}>{daoURI}</Link>
+          </p>
+        </div>
+        <Divider />
+        {decodedData && (
+          <div className="card-metadata">
+            <h6>Decoded Data:</h6>
+            {decodedData.map((item, index) => (
+              <p key={index} className="bp4-text-large">
+                <strong>{item.name}:</strong> {item.value.value}
+              </p>
+            ))}
+          </div>
+        )}
+      </Fragment>
+      </Card>
+    );
+  };
+
+  export default DisplayAttestation;

daostar-website/src/components/ExplorePage/ExplorePage.js

@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from "react";
 import RegistrationCard from "../RegistrationCard/RegistrationCard";
+import AttestationCard from "../AttestationCard/AttestationCard";
 import "./ExplorePage.css";
 import { InputGroup, Button } from "@blueprintjs/core";
 
@@ -43,6 +44,8 @@ const NetworkButtons = [
   { text: "Optimism-Goerli", filter: "optimism-goerli" },
   { text: "Osmosis", filter: "osmosis" },
   { text: "Stargaze", filter: "stargaze" },
+  { text: "EAS", filter: "easOptimismGoerli" },
+
 ];
 NetworkButtons.sort((a, b) => a.text.localeCompare(b.text));
 
@@ -51,6 +54,7 @@ const ExplorePage = ({
   junosInstances,
   osmosisInstances,
   stargazeInstances,
+  easOptimismGoerli
 }) => {
   const [filterVal, setFilterVal] = useState("");
   const onChangeFilter = (e) => setFilterVal(e.target.value);
@@ -130,6 +134,11 @@ const ExplorePage = ({
           .map((registration, i) => (
             <RegistrationCard key={i} {...registration} />
           ));
+      case "easOptimismGoerli":
+        return easOptimismGoerli
+        .map((attestation, i) => (
+          <AttestationCard key={i} {...attestation} />
+        ));
       default:
         return (
           <>

daostar-website/src/components/ExplorePage/queries/registrations.js

@@ -1,5 +1,5 @@
 import { gql } from '@apollo/client'
-
+// This is the only queries file being used
 const REGISTRATIONS = gql`
     query Registrations($id: String) @api(contextKey: "apiName") {
         registrationNetwork(id: $id) {
@@ -76,4 +76,29 @@ const REGISTRATION = gql`
     }
 `
 
-export default { REGISTRATIONS, REGISTRATION, REGISTRATIONSOLD }
+const ATTESTATIONS_BY_SCHEMA = gql`
+ query AttestationsBySchema($schemaId: String!) @api(contextKey: "apiName") {
+    attestations(where: {
+      schemaId: { equals: $schemaId },
+    }) {
+      id
+      data
+      decodedDataJson
+      recipient
+      attester
+      time
+      timeCreated
+      expirationTime
+      revocationTime
+      refUID
+      revocable
+      revoked
+      txid
+      schemaId
+      ipfsHash
+      isOffchain
+    }
+  }
+`;
+
+export default { REGISTRATIONS, REGISTRATION, REGISTRATIONSOLD, ATTESTATIONS_BY_SCHEMA }

daostar-website/src/index.js

@@ -37,7 +37,8 @@ const client = new ApolloClient({
                 chapel:`https://api.thegraph.com/subgraphs/name/rashmi-278/daostar-bnb-bruno`,
                 optimism: `https://api.thegraph.com/subgraphs/name/rashmi-278/daostar-optimism`,
                 ethereum: "https://api.thegraph.com/subgraphs/name/rashmi-278/daostar-ethereum-mainnet-v0",
-                arbitrum: "https://api.thegraph.com/subgraphs/name/crazyyuan/daostar-arbitrum"
+                arbitrum: "https://api.thegraph.com/subgraphs/name/crazyyuan/daostar-arbitrum",
+                easOptimismGoerli:"https://optimism-goerli-bedrock.easscan.org/graphql"
             },
             //defaultEndpoint: 'https://api.thegraph.com/subgraphs/name/ipatka/daostar',
             httpSuffix: "",