Merge branch 'dev' into mainnet

indexnetwork · Jul 16, 2024 · a733d4e · a733d4e
2 parents 537b66e + 387cbec
commit a733d4e
Show file tree

Hide file tree

Showing 4 changed files with 155 additions and 1 deletion.
diff --git a/api/src/types/fragments.js b/api/src/types/fragments.js
@@ -28,6 +28,15 @@ export const appBundleFragment = `
     Article_url: url
     Article_createdAt: createdAt
   }
+  ... on Attestation {
+    Attestation_id: id
+    Attestation_attestationID: attestationID
+    Attestation_attestedDate: attestedDate
+    Attestation_subject: subject
+    Attestation_schema: schema {
+      name
+    }
+  }
   ... on WebPage {
     WebPage_title: title
     WebPage_favicon: favicon

diff --git a/web-app/src/components/site/index-details/AttestationItem/index.tsx b/web-app/src/components/site/index-details/AttestationItem/index.tsx
@@ -0,0 +1,118 @@
+import Freizeit from "@/fonts/loader";
+import { shortStr } from "@/utils/helper";
+import Button from "components/base/Button";
+import IconContextMenu from "components/base/Icon/IconContextMenu";
+import Text from "components/base/Text";
+import Col from "components/layout/base/Grid/Col";
+import FlexRow from "components/layout/base/Grid/FlexRow";
+import IndexDetailItemPopup from "components/site/popup/IndexDetailItemPopup";
+import { useRole } from "hooks/useRole";
+import moment from "moment";
+import React from "react";
+import sanitize from "sanitize-html";
+import { AttestationIndexNodeItem, DefaultIndexNodeItem } from "types/entity";
+
+export interface AttestationItemProps {
+  item: AttestationIndexNodeItem;
+  onChange?(val: DefaultIndexNodeItem[]): void;
+  search?: boolean;
+  handleRemove?(): void;
+}
+
+const AttestationItem: React.FC<AttestationItemProps> = ({
+  item,
+  search = false,
+  handleRemove,
+}) => {
+  const { node } = item;
+
+  const { isCreator } = useRole();
+
+  return (
+    <div className="index-detail-list-item-wrapper">
+      <FlexRow className="index-detail-list-item py-3">
+        <Col xs={12}>
+          <FlexRow wrap={false} style={{ height: "24px" }}>
+            <Col className="idxflex-grow-1">
+              <img
+                className="mt-0 mr-3"
+                src={"/images/article.svg"}
+                alt="favicon"
+                width={16}
+                height={16}
+                onError={(e: React.SyntheticEvent<HTMLImageElement, Event>) => {
+                  const target = e.target as HTMLImageElement;
+                  target.onerror = null; // Prevents infinite loop in case fallback image also fails
+                  target.src = "/images/article.svg";
+                }}
+                style={{
+                  verticalAlign: "middle",
+                }}
+              />
+              <a
+                href={`https://explorer.ver.ax/linea/attestations/${node.attestationID}`}
+                target="_blank"
+              >
+                <Text
+                  className={Freizeit.className}
+                  style={{
+                    fontSize: "16px",
+                  }}
+                  fontWeight={700}
+                  dangerouslySetInnerHTML={{
+                    __html: sanitize(shortStr(node?.schema.name)),
+                  }}
+                />
+              </a>
+            </Col>
+            {!search && isCreator ? (
+              <Col className="idxflex-shrink-0 index-detail-list-item-buttons ml-3">
+                <FlexRow>
+                  <Col></Col>
+                  <Col>
+                    <IndexDetailItemPopup onDelete={handleRemove}>
+                      <Button size="xs" iconButton theme="clear" borderless>
+                        <IconContextMenu />
+                      </Button>
+                    </IndexDetailItemPopup>
+                  </Col>
+                </FlexRow>
+              </Col>
+            ) : (
+              <Col className="idxflex-shrink-0 index-detail-list-item-buttons ml-3">
+                <FlexRow>
+                  <Col></Col>
+                  <Col>
+                    <IndexDetailItemPopup onDelete={handleRemove} />
+                  </Col>
+                </FlexRow>
+              </Col>
+            )}
+          </FlexRow>
+        </Col>
+        <Col xs={12} className="mt-2">
+          <Text size="sm" theme="gray5">
+            {item.type}
+            {" • "}
+            <a
+              href={`https://explorer.ver.ax/linea/attestations/${node.attestationID}`}
+              target="_blank"
+              style={{
+                color: "#475569",
+              }}
+            >
+              {shortStr(node.subject, 60)}
+            </a>
+          </Text>
+          {" • "}
+          <Text size="sm" theme="gray5">
+            {node?.attestedDate
+              ? `Attested ${moment(new Date(node.attestedDate)).fromNow()}`
+              : ""}
+          </Text>
+        </Col>
+      </FlexRow>
+    </div>
+  );
+};
+export default AttestationItem;
diff --git a/web-app/src/components/site/index-details/IndexItemList/index.tsx b/web-app/src/components/site/index-details/IndexItemList/index.tsx
@@ -19,6 +19,7 @@ import IndexIndexItem from "../IndexIndexItem";
 import DefaultIndexItem from "../DefaultIndexItem";
 import CastItem from "../CastItem";
 import ArticleItem from "../ArticleItem";
+import AttestationItem from "../AttestationItem";
 
 export interface IndexItemListProps {
   search: string;
@@ -34,6 +35,7 @@ const MemoIndexItem = memo(IndexIndexItem);
 const MemoDefaultIndexItem = memo(DefaultIndexItem);
 const MemoCastItem = memo(CastItem);
 const MemoArticleItem = memo(ArticleItem);
+const MemoAttestationItem = memo(AttestationItem);
 
 const IndexItemList: FC<IndexItemListProps> = ({
   search,
@@ -85,6 +87,16 @@ const IndexItemList: FC<IndexItemListProps> = ({
       );
     }
 
+    if (item.type === "Attestation") {
+      return (
+        <MemoAttestationItem
+          handleRemove={() => removeItem(item)}
+          search={!!search}
+          item={item as IndexIndexNodeItem}
+        />
+      );
+    }
+
     if (item.type === "Cast") {
       return (
         <MemoCastItem

diff --git a/web-app/src/types/entity.ts b/web-app/src/types/entity.ts
@@ -80,6 +80,15 @@ export type ArticleIndexNode = {
   url: string;
   createdAt: string;
 };
+export type AttestationIndexNode = {
+  id: string;
+  attestationId: string;
+  attestedDate: string;
+  subject: string;
+  schema: {
+    name: string;
+  };
+};
 
 export type IndexWebPageItem = {
   id: string;
@@ -110,6 +119,11 @@ export type CastIndexNodeItem = {
   type: string;
   node: CastIndexNode;
 };
+export type AttestationIndexNodeItem = {
+  id: string;
+  type: string;
+  node: AttestationIndexNode;
+};
 
 export type ArticleIndexNodeItem = {
   id: string;
@@ -123,7 +137,8 @@ export type IndexItem =
   | IndexIndexNodeItem
   | DefaultIndexNodeItem
   | ArticleIndexNodeItem
-  | CastIndexNodeItem;
+  | CastIndexNodeItem
+  | AttestationIndexNodeItem;
 
 export type IndexLink = {
   id?: string;