From ea83d737040a3b6f2bbd8883d89a9d832caa70dd Mon Sep 17 00:00:00 2001
From: Elliot Braem <16282460+elliotBraem@users.noreply.github.com>
Date: Tue, 19 Mar 2024 23:14:56 -0600
Subject: [PATCH] Implements infinite scroll (#469)

* implements infinite scroll

* fix card link height

* fix horizontal scroll and clean up

* remove hidden

* fix donation calculation
---
 apps/potlock/widget/Project/Card.jsx        | 255 ++++----
 apps/potlock/widget/Project/ListPage.jsx    |   3 +-
 apps/potlock/widget/Project/ListSection.jsx | 635 +-------------------
 3 files changed, 121 insertions(+), 772 deletions(-)

diff --git a/apps/potlock/widget/Project/Card.jsx b/apps/potlock/widget/Project/Card.jsx
index 692288cc..2f45978f 100644
--- a/apps/potlock/widget/Project/Card.jsx
+++ b/apps/potlock/widget/Project/Card.jsx
@@ -27,13 +27,18 @@ let DonateSDK =
   }));
 DonateSDK = DonateSDK({ env: props.env });
 
-// console.log("props in Card: ", props);
+const CardLink = styled("Link")`
+  &:hover {
+    text-decoration: none;
+  }
+`;
 
-const Card = styled.a`
+const Card = styled.div`
   display: flex;
   flex-direction: column;
   max-width: 400px;
   width: 100%;
+  height: 100%;
   overflow: hidden;
   border-radius: 12px;
   background: white;
@@ -41,10 +46,8 @@ const Card = styled.a`
   border: 1px solid #dbdbdb;
   margin-left: auto;
   margin-right: auto;
-  // height: 500px;
   transition: all 300ms;
-  :hover {
-    text-decoration: none;
+  &:hover {
     transform: translateY(-1rem);
   }
 `;
@@ -392,9 +395,9 @@ const [totalAmountNear, totalDonors] = useMemo(() => {
     if (!donors.includes(donation.donor_id)) {
       donors.push(donation.donor_id);
     }
-    if (donation.ft_id === "near" || donation.base_currency === "near") {
-      totalDonationAmountNear = totalDonationAmountNear.plus(new Big(donation.total_amount));
-    }
+    // if (donation.ft_id === "near" || donation.base_currency === "near") {
+    totalDonationAmountNear = totalDonationAmountNear.plus(new Big(donation.total_amount));
+    // }
   }
   return [totalDonationAmountNear.toString(), donors.length];
 }, [donationsForProject]);
@@ -436,152 +439,108 @@ const tags = getTagsFromSocialProfileData(profile);
 
 return (
   <>
-    <Card href={projectUrl} key={projectId}>
-      <HeaderContainer className="pt-0 position-relative">
-        <BackgroundImageContainer>
-          {profile.backgroundImage?.nft ? (
-            <Widget
-              src="mob.near/widget/Image"
-              props={{
-                image: profile.backgroundImage,
-                alt: "background",
-                className: "position-absolute w-100",
-                style: backgroundImageStyle,
-                fallbackUrl:
-                  "https://ipfs.near.social/ipfs/bafkreih4i6kftb34wpdzcuvgafozxz6tk6u4f5kcr2gwvtvxikvwriteci",
-              }}
-            />
+    <CardLink href={projectUrl} key={projectId}>
+      <Card>
+        <HeaderContainer className="pt-0 position-relative">
+          <BackgroundImageContainer>
+            {profile.backgroundImage?.nft ? (
+              <Widget
+                src="mob.near/widget/Image"
+                props={{
+                  image: profile.backgroundImage,
+                  alt: "background",
+                  className: "position-absolute w-100",
+                  style: backgroundImageStyle,
+                  fallbackUrl:
+                    "https://ipfs.near.social/ipfs/bafkreih4i6kftb34wpdzcuvgafozxz6tk6u4f5kcr2gwvtvxikvwriteci",
+                }}
+              />
+            ) : (
+              <img
+                className="position-absolute w-100"
+                style={backgroundImageStyle}
+                src={getImageSrc(profile.backgroundImage)}
+                alt="background"
+              />
+            )}
+          </BackgroundImageContainer>
+          <ProfileImageContainer class="profile-picture d-inline-block">
+            {profile.image?.nft ? (
+              <Widget
+                src="mob.near/widget/Image"
+                props={{
+                  image: profile.image,
+                  alt: "avatar",
+                  className: "rounded-circle w-100 img-thumbnail d-block",
+                  style: profileImageStyle,
+                  fallbackUrl:
+                    "https://ipfs.near.social/ipfs/bafkreih4i6kftb34wpdzcuvgafozxz6tk6u4f5kcr2gwvtvxikvwriteci",
+                }}
+              />
+            ) : (
+              <img
+                className="rounded-circle w-100 img-thumbnail d-block"
+                style={profileImageStyle}
+                src={getImageSrc(profile.image)}
+                alt="avatar"
+              />
+            )}
+          </ProfileImageContainer>
+        </HeaderContainer>
+        <Info>
+          <Title>{name}</Title>
+          <SubTitle>
+            {description.length > MAX_DESCRIPTION_LENGTH
+              ? description.slice(0, MAX_DESCRIPTION_LENGTH) + "..."
+              : description}
+          </SubTitle>
+          {!tags.length ? (
+            "No tags"
           ) : (
-            <img
-              className="position-absolute w-100"
-              style={backgroundImageStyle}
-              src={getImageSrc(profile.backgroundImage)}
-              alt="background"
-            />
+            <Tags>
+              {tags.map((tag, tagIndex) => (
+                <Tag key={tagIndex}>{tag}</Tag>
+              ))}
+            </Tags>
           )}
-        </BackgroundImageContainer>
-        <ProfileImageContainer
-          class="profile-picture d-inline-block"
-          // profileImageTranslateYPx={props.profileImageTranslateYPx}
-          // profileImageTranslateYPxMobile={props.profileImageTranslateYPxMobile}
-        >
-          {profile.image?.nft ? (
-            <Widget
-              src="mob.near/widget/Image"
-              props={{
-                image: profile.image,
-                alt: "avatar",
-                className: "rounded-circle w-100 img-thumbnail d-block",
-                style: profileImageStyle,
-                fallbackUrl:
-                  "https://ipfs.near.social/ipfs/bafkreih4i6kftb34wpdzcuvgafozxz6tk6u4f5kcr2gwvtvxikvwriteci",
+        </Info>
+        <DonationsInfoContainer>
+          <DonationsInfoItem>
+            <Amount>
+              {totalAmountNear ? yoctosToUsdWithFallback(totalAmountNear, true) : "-"}
+            </Amount>
+            <AmountDescriptor>Raised</AmountDescriptor>
+          </DonationsInfoItem>
+          {payoutDetails && (
+            <DonationsInfoItem>
+              <Amount>{payoutDetails.donorCount}</Amount>
+              <AmountDescriptor>
+                {payoutDetails.donorCount === 1 ? "Donor" : "Donors"}
+              </AmountDescriptor>
+            </DonationsInfoItem>
+          )}
+          {props.allowDonate && context.accountId && (
+            <DonationButton
+              onClick={(e) => {
+                e.preventDefault();
+                openDonateModal();
               }}
-            />
-          ) : (
-            <img
-              className="rounded-circle w-100 img-thumbnail d-block"
-              style={profileImageStyle}
-              src={getImageSrc(profile.image)}
-              alt="avatar"
-            />
+              disabled={!context.accountId}
+            >
+              {props.requireVerification ? "Verify to donate" : "Donate"}
+            </DonationButton>
           )}
-        </ProfileImageContainer>
-      </HeaderContainer>
-      <Info>
-        <Title>{name}</Title>
-        <SubTitle>
-          {description.length > MAX_DESCRIPTION_LENGTH
-            ? description.slice(0, MAX_DESCRIPTION_LENGTH) + "..."
-            : description}
-        </SubTitle>
-        {!tags.length ? (
-          "No tags"
-        ) : (
-          <Tags>
-            {tags.map((tag, tagIndex) => (
-              <Tag key={tagIndex}>{tag}</Tag>
-            ))}
-          </Tags>
-        )}
-      </Info>
-      <DonationsInfoContainer>
-        <DonationsInfoItem>
-          <Amount>{totalAmountNear ? yoctosToUsdWithFallback(totalAmountNear, true) : "-"}</Amount>
-          <AmountDescriptor>Raised</AmountDescriptor>
-        </DonationsInfoItem>
+        </DonationsInfoContainer>
         {payoutDetails && (
-          <DonationsInfoItem>
-            <Amount>{payoutDetails.donorCount}</Amount>
-            <AmountDescriptor>
-              {payoutDetails.donorCount === 1 ? "Donor" : "Donors"}
-            </AmountDescriptor>
-          </DonationsInfoItem>
-        )}
-        {props.allowDonate && context.accountId && (
-          <DonationButton
-            onClick={(e) => {
-              e.preventDefault();
-              openDonateModal();
-            }}
-            disabled={!context.accountId}
-          >
-            {props.requireVerification ? "Verify to donate" : "Donate"}
-          </DonationButton>
+          <MatchingSection>
+            <MatchingTitle>Estimated matched amount</MatchingTitle>
+            <MatchingAmount>
+              {yoctosToNear(payoutDetails.matchingAmount, true) || "- N"}
+            </MatchingAmount>
+          </MatchingSection>
         )}
-        {/* <Widget
-        src={`${ownerId}/widget/Components.Button`}
-        props={{
-          type: "secondary",
-          text: "Donate",
-          onClick: () => {
-            props.openDonateToProjectModal(projectId);
-          },
-        }}
-      /> */}
-        {/* <DonationsInfoItem>
-        <Title>{totalDonors || totalDonors === 0 ? totalDonors : "-"}</Title>
-        <SubTitle>{totalDonors === 1 ? "Donor" : "Donors"}</SubTitle>
-      </DonationsInfoItem> */}
-      </DonationsInfoContainer>
-      {payoutDetails && (
-        <MatchingSection>
-          <MatchingTitle>Estimated matched amount</MatchingTitle>
-          <MatchingAmount>
-            {yoctosToNear(payoutDetails.matchingAmount, true) || "- N"}
-          </MatchingAmount>
-        </MatchingSection>
-      )}
-      {/* {props.allowDonate && (
-      <Widget
-        src={`${ownerId}/widget/Cart.AddToCart`}
-        props={{
-          ...props,
-          projectId,
-          style: {
-            borderRadius: "0px 0px 6px 6px",
-            boxShadow: "0px",
-            border: "0px",
-          },
-          stopPropagation: true,
-          showModal: false,
-        }}
-      />
-    )} */}
-      {/* {props.requireVerification && (
-      <Widget
-        src={`${ownerId}/widget/Pots.ButtonVerifyToDonate`}
-        props={{
-          ...props,
-          style: {
-            borderRadius: "0px 0px 6px 6px",
-            boxShadow: "0px",
-            border: "0px",
-          },
-          href: NADA_BOT_URL,
-        }}
-      />
-    )} */}
-    </Card>
+      </Card>
+    </CardLink>
     {state.donateModal.isOpen && (
       <Widget
         src={`${ownerId}/widget/Project.ModalDonation`}
diff --git a/apps/potlock/widget/Project/ListPage.jsx b/apps/potlock/widget/Project/ListPage.jsx
index 033dcd56..4939fc1d 100644
--- a/apps/potlock/widget/Project/ListPage.jsx
+++ b/apps/potlock/widget/Project/ListPage.jsx
@@ -30,7 +30,7 @@ const CardSkeletonContainer = styled.div`
   border: 1px solid #dbdbdb;
   margin-left: auto;
   margin-right: auto;
-  overflow: hidden;
+
   animation-name: ${loadingSkeleton};
   animation-duration: 1s;
   animation-iteration-count: infinite;
@@ -263,6 +263,7 @@ const ProjectsContainer = styled.div`
   flex-direction: column;
   align-items: center;
   width: 100%;
+  overflow-y: hidden;
   // padding: 0px 64px 96px 64px;
   // background: #fafafa;
 
diff --git a/apps/potlock/widget/Project/ListSection.jsx b/apps/potlock/widget/Project/ListSection.jsx
index 64352688..3f65b207 100644
--- a/apps/potlock/widget/Project/ListSection.jsx
+++ b/apps/potlock/widget/Project/ListSection.jsx
@@ -1,23 +1,9 @@
-const {
-  ownerId,
-  // removeProjectsFromCart,
-  // addProjectsToCart,
-  // setIsCartModalOpen,
-  tab,
-  shouldShuffle,
-  // setAmount,
-  // setProjectId,
-  // setNote,
-  // setReferrerId,
-  // setCurrency,
-  // donnorProjectId,
-  // amount,
-  // referrerId,
-  // currency,
-  // note,
-} = props;
+const { tab, shouldShuffle } = props;
 const responsive = props.responsive || [];
-// console.log("props in list section: ", props);
+
+const { Feed } = VM.require("devs.near/widget/Feed") || {
+  Feed: () => <></>,
+};
 
 const items = useMemo(() => {
   if (shouldShuffle) {
@@ -26,483 +12,21 @@ const items = useMemo(() => {
   return props.items;
 }, [props.items, shouldShuffle]);
 
-const sortList = [
-  "Newest to Oldest",
-  "Oldest to Newest",
-  "Most to Least Donations",
-  "Least to Most Donations",
-];
-
-const SORT_FILTERS = {
-  ALL: "All",
-  NEW_TO_OLD: "Newest to Oldest",
-  OLD_TO_NEW: "Oldest to Newest",
-  MOST_TO_LEAST_DONATIONS: "Most to Least Donations",
-  LEAST_TO_MOST_DONATIONS: "Least to Most Donations",
-};
-
 const PAGE_SIZE = 9;
 
-const featuredProjectIds = ["magicbuild.near", "potlock.near", "yearofchef.near"];
-const featuredProjects = useMemo(
-  () => props.items.filter((project) => featuredProjectIds.includes(project.id)),
-  props.items
-);
-
-const [allProjects, setAllProjects] = useState(items);
-const [filteredProjects, setFilteredProjects] = useState(items);
-const [searchTerm, setSearchTerm] = useState("");
-
-// const [elements, setElements] = useState(
-//   props.items.slice(0, PAGE_SIZE).map((item) => props.renderItem(item))
-// );
-
-// const loadMore = () => {
-//   const newElements = props.items
-//     .slice(elements.length, elements.length + PAGE_SIZE)
-//     .map(props.renderItem);
-//   setElements([...elements, ...newElements]);
-// };
-
-// const [page, setPage] = useState(1);
-// const [lastNumberOfProject, setLastNumberOfProject] = useState(PAGE_SIZE);
-// const donationContractId = "donate.potlock.near";
-// const [totalProjects, setTotalProjects] = useState(props.items);
-// const [displayProject, setDisplayProject] = useState([]);
-// const [lastNumberOfProject, setLastNumberOfProject] = useState(0);
-// console.log("lastNumberOfProject", lastNumberOfProject);
-// const [searchTerm, setSearchTerm] = useState(null);
-// const [tagSelected, setTagSelected] = useState([]);
-// const [featuredProjects, setFeaturedProjects] = useState([
-//   {
-//     id: "magicbuild.near",
-//     status: "Approved",
-//     submitted_ms: 1698226284754,
-//     updated_ms: 1698226284754,
-//     review_notes: null,
-//   },
-//   {
-//     id: "potlock.near",
-//     status: "Approved",
-//     submitted_ms: 1698437495305,
-//     updated_ms: 1698437495305,
-//     review_notes: null,
-//   },
-//   {
-//     id: "yearofchef.near",
-//     status: "Approved",
-//     submitted_ms: 1703055390614,
-//     updated_ms: 1703055390614,
-//     review_notes: null,
-//   },
-// ]);
-// const [tagsList, setTagsList] = useState([
-//   {
-//     label: "Desci",
-//     value: "de-sci",
-//     selected: false,
-//   },
-//   {
-//     label: "Open Source",
-//     value: "open-source",
-//     selected: false,
-//   },
-//   {
-//     label: "Non Profit",
-//     value: "non-profit",
-//     selected: false,
-//   },
-//   {
-//     label: "Social Impact",
-//     value: "social-impact",
-//     selected: false,
-//   },
-//   {
-//     label: "Climate",
-//     value: "climate",
-//     selected: false,
-//   },
-//   {
-//     label: "Public Good",
-//     value: "public-good",
-//     selected: false,
-//   },
-//   {
-//     label: "Community",
-//     value: "community",
-//     selected: false,
-//   },
-//   {
-//     label: "Education",
-//     value: "education",
-//     selected: false,
-//   },
-// ]);
-// const handleTag = (key) => {
-//   // console.log(tagsList[key].value);
-//   const tags = tagsList;
-//   tags[key].selected = !tagsList[key].selected;
-//   const dataArr = props.items;
-//   let tagSelected = [];
-//   tagsList.forEach((tag) => {
-//     if (tag.selected) {
-//       tagSelected.push(tag.value);
-//     }
-//   });
-//   let projectFilterBySearch = [];
-//   dataArr.forEach((item) => {
-//     const data = Social.getr(`${item.id}/profile`);
-//     tagSelected.forEach((tag) => {
-//       if (data.category == tag) {
-//         projectFilterBySearch.push(item);
-//       }
-//     });
-//   });
-//   if (tagSelected.length == 0) {
-//     setTotalProjects(dataArr);
-//   } else {
-//     setTotalProjects(projectFilterBySearch);
-//   }
-//   // console.log("tagsList", tagSelected);
-//   setTagSelected(tagSelected);
-
-//   setDisplayProject([]);
-//   setLastNumberOfProject(0);
-
-//   setTagsList(tags);
-// };
-// if (!totalProjects) return "loading";
-
-// const loadPotProjects = () => {
-//   setDisplayProject(totalProjects.map((item) => props.renderItem(item)));
-// };
-
-// const loadProjects = () => {
-//   setLastNumberOfProject(lastNumberOfProject + 9);
-//   setDisplayProject(
-//     totalProjects.slice(0, lastNumberOfProject + 9).map((item) => (
-//       <Widget
-//         src={`${ownerId}/widget/Components.ProjectCard`}
-//         props={{
-//           ...props,
-//           ...item,
-//           ownerId: ownerId,
-//           showModal: true,
-//           isExistedInCart: props.cart && !!props.cart[item.id],
-//           donnorProjectId: donnorProjectId,
-//           amount: amount,
-//           referrerId: referrerId,
-//           currency: currency,
-//           note: note,
-//           removeProjectsFromCart: (projectId) => {
-//             removeProjectsFromCart(projectId);
-//           },
-//           addProjectsToCart: (project) => {
-//             addProjectsToCart(project);
-//           },
-//           setIsCartModalOpen: (isOpen) => {
-//             setIsCartModalOpen(isOpen);
-//           },
-//           setAmount: (value) => {
-//             setAmount(value);
-//           },
-//           setProjectId: (id) => {
-//             setProjectId(id);
-//           },
-//           setNote: (note) => {
-//             setNote(note);
-//           },
-//           setReferrerId: (ref) => {
-//             setReferrerId(ref);
-//           },
-//           setCurrency: (cur) => {
-//             setCurrency(cur);
-//           },
-//           totalAmount: (donations) => totalAmount(donations),
-//         }}
-//         key={key}
-//       />
-//     ))
-//   );
-// };
-
-// const totalAmount = (donations) => {
-//   if (!donations) return 0;
-//   let totalDonationAmount = new Big(0);
-//   for (const donation of donations) {
-//     totalDonationAmount = totalDonationAmount.plus(new Big(donation.total_amount));
-//   }
-//   return props.nearToUsd
-//     ? (props.nearToUsd * totalDonationAmount.div(1e24).toNumber()).toFixed(2)
-//     : totalDonationAmount.div(1e24).toNumber().toFixed(2);
-// };
-
-// const sortHighestToLowest = (projects) => {
-//   const sort = (a, b) => {
-//     return parseFloat(b.total) - parseFloat(a.total);
-//   };
-//   const projectLength = projects.length;
-
-//   for (let i = 0; i < projectLength - 1; i++) {
-//     for (let j = 0; j < projectLength - 1 - i; j++) {
-//       if (sort(projects[j], projects[j + 1]) > 0) {
-//         const temp = projects[j];
-//         projects[j] = projects[j + 1];
-//         projects[j + 1] = temp;
-//       }
-//     }
-//   }
-
-//   setTotalProjects(projects);
-//   setDisplayProject([]);
-//   setLastNumberOfProject(0);
-// };
-
-// const sortLowestToHighest = (projects) => {
-//   const sort = (a, b) => {
-//     return parseFloat(b.total) - parseFloat(a.total);
-//   };
-//   const projectLength = projects.length;
-
-//   for (let i = 0; i < projectLength - 1; i++) {
-//     for (let j = 0; j < projectLength - 1 - i; j++) {
-//       if (sort(projects[j], projects[j + 1]) < 0) {
-//         const temp = projects[j];
-//         projects[j] = projects[j + 1];
-//         projects[j + 1] = temp;
-//       }
-//     }
-//   }
-
-//   setTotalProjects(projects);
-//   setDisplayProject([]);
-//   setLastNumberOfProject(0);
-// };
-
-// const sortNewToOld = (projects) => {
-//   const projectLength = projects.length;
-
-//   for (let i = 0; i < projectLength - 1; i++) {
-//     for (let j = 0; j < projectLength - i - 1; j++) {
-//       if (projects[j].submitted_ms < projects[j + 1].submitted_ms) {
-//         const temp = projects[j];
-//         projects[j] = projects[j + 1];
-//         projects[j + 1] = temp;
-//       }
-//     }
-//   }
-//   setTotalProjects(projects);
-//   setDisplayProject([]);
-//   setLastNumberOfProject(0);
-// };
-
-// const sortOldToNew = (projects) => {
-//   const projectLength = projects.length;
-
-//   for (let i = 0; i < projectLength - 1; i++) {
-//     for (let j = 0; j < projectLength - i - 1; j++) {
-//       if (projects[j].submitted_ms > projects[j + 1].submitted_ms) {
-//         const temp = projects[j];
-//         projects[j] = projects[j + 1];
-//         projects[j + 1] = temp;
-//       }
-//     }
-//   }
-//   setTotalProjects(projects);
-//   setDisplayProject([]);
-//   setLastNumberOfProject(0);
-// };
-
-// const searchByWordsPots = (projects, searchTerm) => {
-//   let findId = [];
-//   const dataArr = props.items;
-//   const allData = [];
-//   dataArr.forEach((item) => {
-//     const data = props.itemsAll[item.id];
-//     allData.push(data);
-//     if (data) {
-//       if (
-//         data.pot_description.toLowerCase().includes(searchTerm.toLowerCase()) ||
-//         data.pot_name.toLowerCase().includes(searchTerm.toLowerCase())
-//       ) {
-//         findId.push(item.id);
-//       }
-//     }
-//   });
-//   let projectFilterBySearch = [];
-//   dataArr.forEach((project) => {
-//     findId.forEach((id) => {
-//       if (project.id == id) {
-//         projectFilterBySearch.push(project);
-//       }
-//     });
-//   });
-//   setTotalProjects(projectFilterBySearch);
-//   setDisplayProject([]);
-//   setLastNumberOfProject(0);
-// };
-// const searchByWordsPot = (projects, searchTerm) => {
-//   let findId = [];
-//   const dataArr = props.items;
-//   let alldata = [];
-//   dataArr.forEach((item) => {
-//     const data = Social.getr(`${item.project_id}/profile`);
-//     alldata.push(data);
-//     if (data) {
-//       if (
-//         data.description.toLowerCase().includes(searchTerm.toLowerCase()) ||
-//         data.name.toLowerCase().includes(searchTerm.toLowerCase())
-//       ) {
-//         findId.push(item.project_id);
-//       }
-//     }
-//   });
-//   let projectFilterBySearch = [];
-//   dataArr.forEach((project) => {
-//     const data = Social.getr(`${project.project_id}/profile`);
-//     findId.forEach((id) => {
-//       if (tagSelected.length > 0) {
-//         if (data.category == tagSelected[0]) {
-//           if (project.project_id == id) {
-//             projectFilterBySearch.push(project);
-//           }
-//         }
-//       } else {
-//         if (project.project_id == id) {
-//           projectFilterBySearch.push(project);
-//         }
-//       }
-//     });
-//   });
-
-//   setTotalProjects(projectFilterBySearch);
-//   setDisplayProject([]);
-//   setLastNumberOfProject(0);
-// };
-// const searchByWords = (projects, searchTerm) => {
-//   let findId = [];
-//   const dataArr = props.items;
-//   let alldata = [];
-//   dataArr.forEach((item) => {
-//     const data = Social.getr(`${item.id}/profile`);
-//     alldata.push(data);
-//     if (data) {
-//       if (
-//         data.description.toLowerCase().includes(searchTerm.toLowerCase()) ||
-//         data.name.toLowerCase().includes(searchTerm.toLowerCase())
-//       ) {
-//         findId.push(item.id);
-//       }
-//     }
-//   });
-//   let projectFilterBySearch = [];
-//   dataArr.forEach((project) => {
-//     const data = Social.getr(`${project.id}/profile`);
-//     findId.forEach((id) => {
-//       if (tagSelected.length > 0) {
-//         if (data.category == tagSelected[0]) {
-//           if (project.id == id) {
-//             projectFilterBySearch.push(project);
-//           }
-//         }
-//       } else {
-//         if (project.id == id) {
-//           projectFilterBySearch.push(project);
-//         }
-//       }
-//     });
-//   });
-
-//   setTotalProjects(projectFilterBySearch);
-//   setDisplayProject([]);
-//   setLastNumberOfProject(0);
-// };
-
-// useEffect(() => {
-//   const newTotalProjects = [];
-//   const promises = totalProjects.map((project) => {
-//     return Near.asyncView(donationContractId, "get_donations_for_recipient", {
-//       recipient_id: project.id,
-//     }).then((res) => {
-//       const total = totalAmount(res);
-//       newTotalProjects.push({ ...project, total });
-//     });
-//   });
-//   Promise.all(promises).then(() => {
-//     setTotalProjects(newTotalProjects);
-//   });
-// }, []);
-
-// const handleSortChange = (sortType) => {
-//   switch (sortType) {
-//     case "Newest to Oldest":
-//       sortNewToOld(totalProjects);
-//       break;
-//     case "Oldest to Newest":
-//       sortOldToNew(totalProjects);
-//       break;
-//     case "Most to Least Donations":
-//       sortHighestToLowest(totalProjects);
-//       break;
-//     case "Least to Most Donations":
-//       sortLowestToHighest(totalProjects);
-//       break;
-//   }
-// };
-
-const searchProjects = (searchTerm) => {
-  // filter projects that match the search term (just id for now)
-  const filteredProjects = allProjects.filter((project) => {
-    const { id, status } = project;
-    const searchFields = [id, status];
-    return searchFields.some((field) => field.toLowerCase().includes(searchTerm.toLowerCase()));
-  });
-  return filteredProjects;
-};
-
-const sortProjects = (sortVal) => {
-  if (sortVal === SORT_FILTERS.ALL) {
-    return searchApplications(searchTerm);
-  } else if (sortVal === SORT_FILTERS.NEW_TO_OLD) {
-    const sorted = { ...allProjects };
-    sorted.sort((a, b) => b.submitted_ms - a.submitted_ms);
-    return sorted;
-  } else if (sortVal === SORT_FILTERS.OLD_TO_NEW) {
-    const sorted = { ...allProjects };
-    sorted.sort((a, b) => a.submitted_ms - b.submitted_ms);
-    return sorted;
-  } else if (sortVal === SORT_FILTERS.MOST_TO_LEAST_DONATIONS) {
-    const sorted = { ...allProjects };
-    sorted.sort((a, b) => b.total - a.total);
-    return sorted;
-  } else if (sortVal === SORT_FILTERS.LEAST_TO_MOST_DONATIONS) {
-    const sorted = { ...allProjects };
-    sorted.sort((a, b) => a.total - b.total);
-    return sorted;
-  }
-  return filtered;
-};
-
-const Container = styled.div`
-  display: flex;
-  flex-direction: column;
+const Grid = styled.div`
+  display: grid;
   width: 100%;
-  gap: 48px;
+
   padding-top: 20px;
-  // @media screen and (min-width: 740px) and (max-width: 1400px) {
-  //   ${props.tab !== "pot" && "padding-top: 120px;"}
-  // }
-  @media screen and (max-width: 739px) {
-    ${props.tab !== "pot" && "padding-top: 40px;"}
-  }
-`;
+  padding-bottom: 32px;
 
-const ProjectList = styled.div`
-  display: grid;
   gap: 31px;
+
   // For mobile devices (1 column)
   @media screen and (max-width: 739px) {
     grid-template-columns: repeat(1, 1fr);
+    ${props.tab !== "pot" && "padding-top: 40px;"}
   }
 
   // For tablet devices (2 columns)
@@ -524,139 +48,4 @@ const ProjectList = styled.div`
   )}
 `;
 
-const Header = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-  width: 100%;
-`;
-
-const Title = styled.div`
-  color: #292929;
-  font-size: 14px;
-  font-style: normal;
-  font-weight: 500;
-  line-height: 24px;
-  letter-spacing: 1.12px;
-  text-transform: uppercase;
-`;
-
-const TagsWrapper = styled.div`
-  display: flex;
-  width: 100%;
-  align-items: center;
-  gap: 12px;
-  flex-wrap: wrap;
-  font-size: 14px;
-  font-style: normal;
-  font-weight: 600;
-  line-height: 24px;
-  color: #292929;
-`;
-
-const Tag = styled.div`
-  display: flex;
-  padding: 8px;
-  justify-content: center;
-  align-items: center;
-  gap: 8px;
-  border-radius: 4px;
-  background: #fff;
-  box-shadow: 0px -1px 0px 0px #c7c7c7 inset, 0px 0px 0px 0.5px #c7c7c7;
-  border: 1px solid #c7c7c7;
-  &:hover {
-    background: #fef6ee;
-  }
-`;
-
-const OnBottom = styled.div`
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 20px 0;
-`;
-
-// const elements = props.items.slice(page * PAGE_SIZE, (page + 1) * PAGE_SIZE).map(props.renderItem);
-
-return (
-  <>
-    {/* {tab != "pots" && tab != "pot" && (
-      <Container>
-        <Header>
-          <Title>Featured projects</Title>
-        </Header>
-
-        <ProjectList>{featuredProjects.map(props.renderItem)}</ProjectList>
-        <OnBottom></OnBottom>
-      </Container>
-    )} */}
-    <Container style={{ paddingBottom: "32px" }}>
-      {/* <Header>
-        <Title>
-          all {tab == "pots" ? "pots" : "projects"}
-          <span style={{ color: "#DD3345", marginLeft: "8px", fontWeight: 600 }}>
-            {props.items.length}
-          </span>
-        </Title>
-        <Widget
-          src={`${ownerId}/widget/Project.SearchBar`}
-          props={{
-            title: "Sort",
-            tab: tab,
-            numItems: filteredProjects.length,
-            itemName: tab == "pots" ? "pot" : "project",
-            sortList: Object.values(SORT_FILTERS),
-            setSearchTerm: (value) => {
-              const results = searchProjects(value);
-              setFilteredProjects(results);
-            },
-            handleSortChange: (filter) => {
-              const sorted = sortProjects(filter);
-              handleSortChange(filter);
-            },
-          }}
-        />
-        {tab != "pots" && tab != "pot" && (
-          <TagsWrapper>
-            Tags:
-            {tagsList.map((tag, key) => (
-              <Tag
-                key={key}
-                onClick={() => handleTag(key)}
-                className={`${
-                  tag.selected && "gap-2 bg-[#FEF6EE]"
-                } p-2 rounded border text-sm flex items-center  cursor-pointer`}
-              >
-                {tag.selected && (
-                  <svg
-                    width="12"
-                    height="10"
-                    viewBox="0 0 12 10"
-                    fill="none"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M3.86204 7.58116L1.08204 4.80117L0.135376 5.74116L3.86204 9.46783L11.862 1.46783L10.922 0.527832L3.86204 7.58116Z"
-                      fill="#F4B37D"
-                    ></path>
-                  </svg>
-                )}
-                {tag.label}
-              </Tag>
-            ))}
-          </TagsWrapper>
-        )}
-      </Header> */}
-      <ProjectList>{items.map(props.renderItem)}</ProjectList>
-      {/* <InfiniteScroll
-        // loadMore={tab == "pots" || tab == "pot" ? loadPotProjects : loadProjects}
-        loadMore={loadMore}
-        hasMore={props.items.length > elements.length}
-        // useWindow={false}
-      >
-        <ProjectList>{elements}</ProjectList>
-      </InfiniteScroll> */}
-    </Container>
-  </>
-);
+return <Feed items={items} Item={props.renderItem} Layout={Grid} perPage={PAGE_SIZE} />;