weekly promotion of develop to main

.github/workflows/web4-deploy-production.yml

@@ -1,4 +1,4 @@
-name: Deploy to production
+name: Deploy web4 contract to production
 on:
   push:
     branches: [main]

.github/workflows/web4-deploy-staging.yml

@@ -1,4 +1,4 @@
-name: Deploy to staging
+name: Deploy web4 contract to staging
 on:
   pull_request:
     paths:

.github/workflows/web4-test.yml

@@ -1,4 +1,4 @@
-name: Test
+name: Test web4 contract
 on:
   workflow_call:
 

.github/workflows/web4-undeploy-staging.yml

@@ -1,4 +1,4 @@
-name: Undeploy staging
+name: Undeploy web4 contract from staging
 on:
   pull_request:
     types: [closed]

apps/new/widget/lib/projects.jsx

@@ -103,8 +103,30 @@ const getProjectIdFromPath = (id) => {
   return (id ?? "").split("/")[2] ?? null;
 };
 
+const fetchCatalogProjects = () => {
+  const indexer = "https://nearcatalog.xyz/wp-json/nearcatalog/v1";
+  return asyncFetch(indexer + "/projects").then((response) => {
+    if (!response.body) {
+      return {};
+    }
+    return response.body;
+  });
+};
+
+const fetchCatalogProject = (id) => {
+  const indexer = "https://nearcatalog.xyz/wp-json/nearcatalog/v1";
+  const query = "";
+  query = fetch(indexer + "/project?pid=" + id);
+  if (!query.body) {
+    return {};
+  }
+  return query.body.profile;
+};
+
 return {
   fetchProjects,
+  fetchCatalogProjects,
+  fetchCatalogProject,
   getProjectMeta,
   getProjectIdFromPath,
   getTagsInArray,

apps/new/widget/page/projects/CardSkeleton.jsx

@@ -0,0 +1,125 @@
+const CardSkeletonContainer = styled.div`
+  @keyframes loadingSkeleton {
+    0% {
+      opacity: 0.8;
+    }
+    50% {
+      opacity: 0.3;
+    }
+    100% {
+      opacity: 0.6;
+    }
+  }
+
+  display: flex;
+  flex-direction: column;
+  height: 447px;
+  width: 100%;
+  max-width: 400px;
+  border-radius: 12px;
+  background: var(--bg-color, #23242b);
+  color: var(--text-color, #fff);
+  margin-left: auto;
+  margin-right: auto;
+  overflow: hidden;
+  animation-name: loadingSkeleton;
+  animation-duration: 1s;
+  animation-iteration-count: infinite;
+`;
+
+const HeaderSkeleton = styled.div`
+  display: block;
+  width: 100%;
+  height: 168px;
+  background: #eee;
+`;
+
+const ProfileImageSkeleton = styled.div`
+  background: #e0e0e0;
+  margin-left: 32px;
+  transform: translateY(148px);
+  width: 40px;
+  height: 40px;
+  position: absolute;
+  border-radius: 999px;
+`;
+
+const TitleSkeleton = styled.div`
+  width: 120px;
+  height: 24px;
+  background: #eee;
+  margin-left: 24px;
+  margin-top: 24px;
+`;
+
+const DescriptionSkeleton = styled.div`
+  width: 83%;
+  height: 48px;
+  background: #eee;
+  margin-left: 24px;
+  margin-top: 24px;
+`;
+
+const TagSkeleton = styled.div`
+  background: #eee;
+  border-radius: 4px;
+  height: 34px;
+  width: 110px;
+  margin: 24px;
+`;
+
+const FooterItemSkeleton = styled.div`
+  width: 150px;
+  height: 40px;
+  background: #eee;
+
+  @media screen and (max-width: 390px) {
+    width: 100px;
+  }
+`;
+
+const DonationsInfoContainerSkeleton = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 24px;
+  width: 100%;
+  border-top: 1px #f0f0f0 solid;
+`;
+
+const DonationsInfoItemSkeleton = styled.div`
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+  align-items: center;
+`;
+
+const CardSkeleton = ({ variant }) => {
+  return varaint === "potlock" ? (
+    <CardSkeletonContainer>
+      <HeaderSkeleton />
+      <ProfileImageSkeleton />
+      <TitleSkeleton />
+      <DescriptionSkeleton />
+      <TagSkeleton />
+      <DonationsInfoContainerSkeleton>
+        <DonationsInfoItemSkeleton>
+          <FooterItemSkeleton />
+        </DonationsInfoItemSkeleton>
+        <DonationsInfoItemSkeleton>
+          <FooterItemSkeleton />
+        </DonationsInfoItemSkeleton>
+      </DonationsInfoContainerSkeleton>
+    </CardSkeletonContainer>
+  ) : (
+    <CardSkeletonContainer>
+      <HeaderSkeleton />
+      <TitleSkeleton />
+      <DescriptionSkeleton />
+      <TagSkeleton />
+    </CardSkeletonContainer>
+  );
+};
+
+return { CardSkeleton };

apps/new/widget/page/projects/CatalogImport.jsx

@@ -0,0 +1,139 @@
+const { Feed } = VM.require("${alias_devs}/widget/Feed") || {
+  Feed: () => <></>,
+};
+
+const { CardSkeleton } = VM.require(
+  "${alias_new}/widget/page.projects.CardSkeleton",
+) || {
+  CardSkeleton: () => <></>,
+};
+
+const { fetchCatalogProjects } = VM.require(
+  "${alias_new}/widget/lib.projects",
+) || {
+  fetchCatalogProjects: () => {},
+};
+
+const projects = useCache(() => {
+  return fetchCatalogProjects();
+}, ["near-catalog-projects"]);
+
+const [filteredProjects, setFilteredProjects] = useState({});
+
+useEffect(() => {
+  if (projects) {
+    setFilteredProjects(projects);
+  }
+}, [projects]);
+
+const [searchTerm, setSearch] = useState(null);
+
+const Search = useMemo(() => {
+  return (
+    <Widget
+      src={"${alias_new}/widget/page.projects.SearchBar"}
+      props={{
+        title: sort,
+        numItems: filteredProjects.length,
+        term: searchTerm,
+        itemName: "project",
+        onSearch: (value) => {
+          setSearch(value);
+
+          if (searchTerm === value) return;
+          if (searchTerm === "") return;
+
+          const filtered = {};
+          Object.keys(projects).forEach((projectId) => {
+            if (
+              projects[projectId].profile.name
+                .toLowerCase()
+                .includes(value.toLowerCase())
+            ) {
+              filtered[projectId] = projects[projectId];
+            }
+
+            if (
+              projects[projectId].profile.tagline
+                .toLowerCase()
+                .includes(value.toLowerCase())
+            ) {
+              filtered[projectId] = projects[projectId];
+            }
+
+            const tags = Object.values(projects[projectId].profile.tags);
+            if (
+              tags.some((tag) =>
+                tag.toLowerCase().includes(value.toLowerCase()),
+              )
+            ) {
+              filtered[projectId] = projects[projectId];
+            }
+          });
+          setFilteredProjects(filtered);
+        },
+      }}
+    />
+  );
+}, [projects, searchTerm]);
+
+const ProjectsGrid = styled.div`
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 1.5rem;
+  @media screen and (max-width: 768px) {
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+  }
+  max-width: 100%;
+`;
+
+const [selectedProjectId, setSelectedProjectId] = useState(null);
+
+if (selectedProjectId) {
+  return (
+    <Widget
+      src="${alias_new}/widget/page.projects.Editor"
+      loading=""
+      props={{
+        catalogProjectId: selectedProjectId,
+      }}
+    />
+  );
+}
+
+return (
+  <div className="d-flex flex-column gap-4 p-4">
+    {Search}
+    {projects === null ? (
+      <>
+        <div className="bg-secondary text-white p-3 h6 rounded-3">
+          Loading projects...
+        </div>
+      </>
+    ) : (
+      <>
+        {Object.keys(filteredProjects).length === 0 && (
+          <div className="bg-secondary text-white p-3 h6 rounded-3">
+            {searchTerm
+              ? `No projects were found for your search query "${searchTerm}".`
+              : "Network issue: Couldn't fetch any projects, please try again later."}
+          </div>
+        )}
+      </>
+    )}
+    <Feed
+      items={Object.keys(filteredProjects).map((projectId) => ({ projectId }))}
+      Item={({ projectId }) => (
+        <Widget
+          src={"${alias_new}/widget/page.projects.CatalogProjectCard"}
+          loading={<CardSkeleton varaint={"catalog"} />}
+          props={{
+            project: filteredProjects[projectId],
+            setSelectedProjectId: setSelectedProjectId,
+          }}
+        />
+      )}
+      Layout={ProjectsGrid}
+    />
+  </div>
+);