From 01e51694fedcd8e8f5d879dfa3fdc73f6fb4b162 Mon Sep 17 00:00:00 2001
From: Rashmi-278 <rashmiabbigeri@gmail.com>
Date: Fri, 24 May 2024 22:07:02 +0530
Subject: [PATCH] add ens daouri text record

---
 daostar-website/src/App.js                    |  10 +-
 .../components/ENSCard/AttestationCard.css    |  70 ----------
 .../src/components/ENSCard/AttestationCard.js | 124 ------------------
 .../src/components/ENSCard/ENSCard.js         |  39 ++++++
 .../src/components/ExplorePage/ExplorePage.js |  10 +-
 .../ExplorePage/queries/registrations.js      |  14 +-
 6 files changed, 63 insertions(+), 204 deletions(-)
 delete mode 100644 daostar-website/src/components/ENSCard/AttestationCard.css
 delete mode 100644 daostar-website/src/components/ENSCard/AttestationCard.js
 create mode 100644 daostar-website/src/components/ENSCard/ENSCard.js

diff --git a/daostar-website/src/App.js b/daostar-website/src/App.js
index aadcd0d..0dbe2bb 100644
--- a/daostar-website/src/App.js
+++ b/daostar-website/src/App.js
@@ -279,9 +279,10 @@ function App() {
     variables: {
       "where": {
         "value_not": null,
-        "key_starts_with_nocase": "com.github",
-        "key_ends_with_nocase": "com.github"
-      }
+        "key_starts_with_nocase": "daouri",
+        "key_ends_with_nocase": "daouri"
+      },
+      "first": 5
     },
   });
   const {
@@ -346,6 +347,8 @@ function App() {
     const EASOptimismAttestations =
     EASOptimismData?.attestations || [];
 
+    const ENSTextRecords =
+    ENSQueryResData?.textChangeds || [];
   // 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
@@ -418,6 +421,7 @@ function App() {
                   osmosisInstances={osmosisInstances}
                   stargazeInstances={stargazeInstances}
                   easAttestations={EASAttestations}
+                  ENSTextRecords={ENSTextRecords}
                 />
               }
             />
diff --git a/daostar-website/src/components/ENSCard/AttestationCard.css b/daostar-website/src/components/ENSCard/AttestationCard.css
deleted file mode 100644
index 85e73a9..0000000
--- a/daostar-website/src/components/ENSCard/AttestationCard.css
+++ /dev/null
@@ -1,70 +0,0 @@
-.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;
-}
\ No newline at end of file
diff --git a/daostar-website/src/components/ENSCard/AttestationCard.js b/daostar-website/src/components/ENSCard/AttestationCard.js
deleted file mode 100644
index f8a849c..0000000
--- a/daostar-website/src/components/ENSCard/AttestationCard.js
+++ /dev/null
@@ -1,124 +0,0 @@
-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,
-   key,
-   value,
-   
-  }) => {
-    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";
-
-    let decodedDataArray = Array.isArray(decodedData) ? decodedData : [decodedData];
-    function ensureArray(data) {
-      if (!data) return []; // Return an empty array if data is falsy (e.g., undefined or null)
-      return Array.isArray(data) ? data : [data];
-    }
-    
-    decodedDataArray = ensureArray(decodedData);
-
-    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 />
-        <div className="card-metadata">
-  <h6>Decoded Data:</h6>
-  {decodedDataArray.map((item, index) => {
-    let value;
-    if (item.name === 'networkID') {
-      // Convert hex to decimal for networkID
-      value = parseInt(item.value?.value?.hex ?? item.value?.value, 16).toString();
-    } else {
-      // For other items, use the original logic to determine the value
-      value = item.value?.value?.hex ?? item.value?.value ?? 'N/A';
-    }
-    return (
-      <p key={index} className="bp4-text-large" style={{ marginBottom: '10px' }}>
-        <strong>{item.name}:</strong> {value}
-      </p>
-    );
-  })}
-</div>
-
-      </Fragment>
-      </Card>
-    );
-  };
-  
-  export default DisplayAttestation;
\ No newline at end of file
diff --git a/daostar-website/src/components/ENSCard/ENSCard.js b/daostar-website/src/components/ENSCard/ENSCard.js
new file mode 100644
index 0000000..8f07011
--- /dev/null
+++ b/daostar-website/src/components/ENSCard/ENSCard.js
@@ -0,0 +1,39 @@
+import React, { Fragment } from 'react';
+import { Card, Divider } from '@blueprintjs/core';
+import '../AttestationCard/AttestationCard.css';
+
+const DisplayENSTextRecord = ({
+  id,
+  key,
+  value,
+  resolver
+}) => {
+  const daoName = resolver?.domain?.name ?? "Unknown DAO";
+  const daoAddress = resolver?.domain?.resolvedAddress?.id ?? "Unknown DAO";
+  const daoURI = value ? value : "https://daostar.org/registration";
+
+  return (
+    <Card className='wizard-card attestation-card'>
+      <Fragment>
+        <h3>{daoName}</h3>
+        <Divider />
+        <div className="card-metadata">
+          <p className="bp4-text-small wizard-no-margin">
+            <span className="bp4-text-muted">ENS ID: </span>
+            {id}
+          </p>
+          <p className="bp4-text-small wizard-no-margin">
+            <span className="bp4-text-muted">DAO Address: </span>
+            {daoAddress}
+          </p>
+          <p className="bp4-text-small wizard-no-margin">
+            <span className="bp4-text-muted">DAO URI: </span>
+            {daoURI}
+          </p>
+        </div>
+      </Fragment>
+    </Card>
+  );
+};
+
+export default DisplayENSTextRecord;
diff --git a/daostar-website/src/components/ExplorePage/ExplorePage.js b/daostar-website/src/components/ExplorePage/ExplorePage.js
index 8f11825..861c05c 100644
--- a/daostar-website/src/components/ExplorePage/ExplorePage.js
+++ b/daostar-website/src/components/ExplorePage/ExplorePage.js
@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from "react";
 import RegistrationCard from "../RegistrationCard/RegistrationCard";
 import AttestationCard from "../AttestationCard/AttestationCard";
+import ENSCard from "../ENSCard/ENSCard";
 import "./ExplorePage.css";
 import { InputGroup, Button } from "@blueprintjs/core";
 import { filterEASbyId } from "../FilterRegistrations/Filter_Registrations_By_Id";
@@ -61,6 +62,7 @@ const NetworkButtons = [
   { text: "Osmosis", filter: "osmosis" },
   { text: "Stargaze", filter: "stargaze" },
   { text: "EAS", filter: "easAttestations" },
+  { text: "ENS", filter: "ensTextRecords"}
 
 ];
 NetworkButtons.sort((a, b) => a.text.localeCompare(b.text));
@@ -70,7 +72,8 @@ const ExplorePage = ({
   junosInstances,
   osmosisInstances,
   stargazeInstances,
-  easAttestations
+  easAttestations,
+  ENSTextRecords
 }) => {
   const [filterVal, setFilterVal] = useState("");
   const onChangeFilter = (e) => setFilterVal(e.target.value);
@@ -156,6 +159,11 @@ const ExplorePage = ({
         .map((attestation, i) => (
           <AttestationCard key={i} {...attestation} />
         ));
+      case "ensTextRecords":
+          return ENSTextRecords
+          .map((textRecord, i) => (
+            <ENSCard key={i} {...textRecord} />
+          ));
       default:
         return (
           <>
diff --git a/daostar-website/src/components/ExplorePage/queries/registrations.js b/daostar-website/src/components/ExplorePage/queries/registrations.js
index 4c2dc39..b64dd7b 100644
--- a/daostar-website/src/components/ExplorePage/queries/registrations.js
+++ b/daostar-website/src/components/ExplorePage/queries/registrations.js
@@ -105,17 +105,19 @@ const ATTESTATIONS_BY_SCHEMA = gql`
 
 
 const ENS_QUERY = gql `
-query TextChangeds($where: TextChanged_filter) @api(contextKey: "apiName"){
-  textChangeds(where: $where) {
+query TextChangeds($where: TextChanged_filter, $first: Int)  @api(contextKey: "apiName"){
+  textChangeds(where: $where, first: $first) {
     id
     key
     value
     resolver {
-      addr {
-        id
+        domain {
+          name
+          resolvedAddress {
+            id
+          }
+        }
       }
-      address
-    }
   }
 }
 `;