Merge branch 'dev' into mainnet

api/src/types/fragments.js

@@ -22,6 +22,12 @@ export const appBundleFragment = `
     Index_updatedAt: updatedAt
     Index_deletedAt: deletedAt
   }
+  ... on Article {
+    Article_id: id
+    Article_title: title
+    Article_url: url
+    Article_createdAt: createdAt
+  }
   ... on WebPage {
     WebPage_title: title
     WebPage_favicon: favicon

web-app/src/app/landing.css

@@ -817,6 +817,9 @@ html#landing {
   .w-12 {
     width: 3rem;
   }
+  .w-2\/3 {
+    width: 66.666667%;
+  }
   .w-4 {
     width: 1rem;
   }
@@ -1522,6 +1525,10 @@ html#landing {
       width: 75%;
     }
 
+    .md\:w-2\/3 {
+      width: 66.666667%;
+    }
+
     .md\:flex-row {
       flex-direction: row;
     }

web-app/src/app/page.tsx

@@ -4,16 +4,16 @@ import AppHeader from "@/components/new/AppHeader";
 import BigTextSection from "@/components/sections/landing/BigText";
 import FooterSection from "@/components/sections/landing/Footer";
 import HeroSection from "@/components/sections/landing/Hero";
+import HowItWorksSection from "@/components/sections/landing/HowItWorks";
 import PartnersSection from "@/components/sections/landing/Partners";
 import SubscribeSection from "@/components/sections/landing/Subscribe";
+import TestimonialsSection from "@/components/sections/landing/Testimonials";
+import UseCasesSection from "@/components/sections/landing/UseCases";
 import { AuthStatus, useAuth } from "@/context/AuthContext";
 import { useRouter } from "next/navigation";
 import { Suspense, useEffect } from "react";
 import "./globals.css";
 import "./landing.css";
-import HowItWorksSection from "@/components/sections/landing/HowItWorks";
-import UseCasesSection from "@/components/sections/landing/UseCases";
-import TestimonialsSection from "@/components/sections/landing/Testimonials";
 
 const Landing = () => {
   const router = useRouter();

web-app/src/components/sections/landing/HowItWorks/data.ts

@@ -49,7 +49,8 @@ await index.addItem(doc.id);
     "did:ens:mainnet:index.eth",
   ],
   members: [
-    "did:ens:mainnet:seref.eth"
+    "did:ens:mainnet:seref.eth",
+    "did:ens:mainnet:agent.eth"
   ],
 });
 

web-app/src/components/sections/landing/UseCases/index.tsx

@@ -107,11 +107,8 @@ const UseCasesSection = () => {
 
   return (
     <section className="relative" id="UseCases">
-      <div
-        className="pt-12 md:pt-16 md:px-8 md:container m-auto h-[368dvh] md:h-[300dvh] md:flex  md:flex-row"
-        ref={containerRef}
-      >
-        <div className="px-4 w-full md:w-1/2 flex flex-col" id="UseCasesLeft">
+      <div className="pt-12 md:pt-16 md:px-8 md:container m-auto">
+        <div className="px-4 md:w-2/3">
           <h1 className="font-secondary pb-8 text-highlightBlue text-4xl md:text-5xl font-bold">
             Index in Action
           </h1>
@@ -120,6 +117,14 @@ const UseCasesSection = () => {
             possible, ranging from science, journalism, e-commerce, social and
             many more. Here are four examples that we are most excited about:
           </p>
+        </div>
+      </div>
+
+      <div
+        className="pt-12 md:pt-16 md:px-8 md:container m-auto h-[368dvh] md:h-[300dvh] md:flex md:flex-row"
+        ref={containerRef}
+      >
+        <div className="px-4 w-full md:w-1/2 flex flex-col" id="UseCasesLeft">
           <div id="block1" className="h-[75dvh] flex flex-row items-center">
             <div className="flex flex-col gap-4">
               <h2 className="text-3xl font-secondary font-bold">

web-app/src/components/site/index-details/ArticleItem/index.tsx

@@ -0,0 +1,116 @@
+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 { ArticleIndexNodeItem, DefaultIndexNodeItem } from "types/entity";
+
+export interface ArticleItemProps {
+  item: ArticleIndexNodeItem;
+  onChange?(val: DefaultIndexNodeItem[]): void;
+  search?: boolean;
+  handleRemove?(): void;
+}
+
+const ArticleItem: React.FC<ArticleItemProps> = ({
+  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={node.url} target="_blank">
+                <Text
+                  className={Freizeit.className}
+                  style={{
+                    fontSize: "16px",
+                  }}
+                  fontWeight={700}
+                  dangerouslySetInnerHTML={{
+                    __html: sanitize(shortStr(node?.title)),
+                  }}
+                />
+              </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={node.url}
+              target="_blank"
+              style={{
+                color: "#475569",
+              }}
+            >
+              {node.url}
+            </a>
+            {" • "}
+          </Text>
+
+          <Text size="sm" theme="gray5">
+            {node?.createdAt
+              ? `Published ${moment(new Date(node.createdAt)).fromNow()}`
+              : ""}
+          </Text>
+        </Col>
+      </FlexRow>
+    </div>
+  );
+};
+export default ArticleItem;

web-app/src/components/site/index-details/IndexItemList/index.tsx

@@ -9,6 +9,7 @@ import {
   IndexItem,
   IndexTeamNodeItem,
   IndexWebPageItem,
+  ArticleIndexNodeItem,
 } from "types/entity";
 
 import NoLinks from "../../indexes/NoLinks";
@@ -17,6 +18,7 @@ import TeamItem from "../TeamItem";
 import IndexIndexItem from "../IndexIndexItem";
 import DefaultIndexItem from "../DefaultIndexItem";
 import CastItem from "../CastItem";
+import ArticleItem from "../ArticleItem";
 
 export interface IndexItemListProps {
   search: string;
@@ -31,6 +33,7 @@ const MemoTeamItem = memo(TeamItem);
 const MemoIndexItem = memo(IndexIndexItem);
 const MemoDefaultIndexItem = memo(DefaultIndexItem);
 const MemoCastItem = memo(CastItem);
+const MemoArticleItem = memo(ArticleItem);
 
 const IndexItemList: FC<IndexItemListProps> = ({
   search,
@@ -62,6 +65,16 @@ const IndexItemList: FC<IndexItemListProps> = ({
       );
     }
 
+    if (item.type === "Article") {
+      return (
+        <MemoArticleItem
+          handleRemove={() => removeItem(item)}
+          search={!!search}
+          item={item as ArticleIndexNodeItem}
+        />
+      );
+    }
+
     if (item.type === "Index") {
       return (
         <MemoIndexItem

web-app/src/components/site/modal/EditProfileModal/index.tsx

@@ -61,11 +61,15 @@ const EditProfileModal = ({ ...modalProps }: EditProfileModalProps) => {
         const profileData = {
           name: values.name,
           bio: values.bio,
-          avatar: (avatar || userProfile.avatar).replace(
+          avatar: undefined,
+        };
+
+        if (avatar || userProfile.avatar) {
+          profileData.avatar = (avatar || userProfile.avatar).replace(
             `${appConfig.ipfsProxy}/`,
             "",
-          ),
-        };
+          );
+        }
 
         await dispatch(updateProfile({ profile: profileData, api })).unwrap();
         toast.success("Profile updated successfully");

web-app/src/types/entity.ts

@@ -74,6 +74,12 @@ export type CastIndexNode = {
     username: string;
   };
 };
+export type ArticleIndexNode = {
+  id: string;
+  title: string;
+  url: string;
+  createdAt: string;
+};
 
 export type IndexWebPageItem = {
   id: string;
@@ -105,11 +111,18 @@ export type CastIndexNodeItem = {
   node: CastIndexNode;
 };
 
+export type ArticleIndexNodeItem = {
+  id: string;
+  type: string;
+  node: ArticleIndexNode;
+};
+
 export type IndexItem =
   | IndexWebPageItem
   | IndexTeamNodeItem
   | IndexIndexNodeItem
   | DefaultIndexNodeItem
+  | ArticleIndexNodeItem
   | CastIndexNodeItem;
 
 export type IndexLink = {