[dApps] API and Data

_data/pages/dapps.yml

@@ -8,28 +8,10 @@ breadcrumbs: false
 page_last_updated: true
 blocks:
   - type: hero
+    variant: block_explorers
+    title: Hundreds of dApps, Services & Wallets
+    description: Immerse yourself in the Starknet Ecosystem by discovering projects, jobs, metrics and learning resources.
+  - type: dapps
     variant: dapps
     title: dApps
-    description: Discover apps in the Starknet ecosystem across NFTs, Gaming, Defi,
-      DAOs and more.
-  - type: card_list
-    card_list_items:
-      - title: Starknet-ecosystem
-        description: Immerse yourself in the Starknet Ecosystem by discovering projects,
-          jobs, metrics and learning resources.
-        website_url: https://www.starknet-ecosystem.com
-        twitter: https://twitter.com/StarkNetEco
-        link_url: https://www.starknet-ecosystem.com
-        image: /assets/sn-ecosystem.jpg
-      - title: Dappland
-        description: Discover and rate the best apps on Starknet.
-        link_url: https://www.dappland.com
-        website_url: https://www.dappland.com
-        twitter: https://twitter.com/argentHQ
-        image: /assets/dappland.jpg
-      - website_url: https://www.ethereum-ecosystem.com/blockchains/starknet
-        title: Ethereum Ecosystem
-        description: Discover the best of Ethereum and its layer 2s. All in one place.
-        image: /assets/logo.webp
-        twitter: https://twitter.com/web3xplore
-    randomize: true
+    description: ""

workspaces/cms-config/src/blocks.ts

@@ -335,6 +335,17 @@ export const blocks = [
       },
     ],
   },
+  {
+    name: "dapps",
+    label: "Dapps",
+    widget: "object",
+    fields: [
+      {
+        name: "type",
+        widget: "hidden",
+      },
+    ],
+  },
   {
     name: "community_events",
     label: "Community events block",

workspaces/cms-data/src/pages.ts

@@ -6,6 +6,7 @@ import {
   getShuffledArray,
 } from "@starknet-io/cms-utils/src/index";
 import type { Meta } from "@starknet-io/cms-utils/src/index";
+import { Project } from "./starknet-db-projects-dapps";
 
 export interface MarkdownBlock {
   readonly type: "markdown";
@@ -256,13 +257,17 @@ export interface HeadingContainerBlock {
   readonly heading_variant: HeadingVariant;
   readonly blocks: readonly Block[];
 }
-
+export interface DappsBlock {
+  readonly type: "dapps";
+  readonly blocks?: readonly Project[];
+}
 export type TopLevelBlock =
   | Block
   | FlexLayoutBlock
   | GroupBlock
   | Container
-  | HeadingContainerBlock;
+  | HeadingContainerBlock
+  | DappsBlock;
 
 export interface Page extends Meta {
   readonly id: string;

workspaces/cms-data/src/starknet-db-projects-dapps.ts

@@ -0,0 +1,52 @@
+import { getJSON } from "@starknet-io/cms-utils/src/index";
+export interface Project {
+  readonly id: string;
+  readonly name: string;
+  readonly shortName: string;
+  readonly description: string;
+  readonly image: string;
+  readonly network: {
+    readonly website?: string;
+    readonly github?: string;
+    readonly twitter?: string;
+    readonly twitterImage?: string;
+    readonly twitterBanner?: string;
+    readonly medium?: string;
+    readonly discord?: string;
+    readonly telegram?: string;
+  };
+  readonly tags: string[];
+  readonly socialMetrics: {
+    readonly twitterFollower: number;
+    readonly twitterCount: number;
+    readonly tweetWithStarknet: number;
+    readonly socialActivity: number;
+    readonly date: number;
+  };
+  readonly isLive: boolean;
+  readonly isHidden: boolean;
+  readonly isTestnetLive: boolean;
+}
+export interface TagObject {
+  label: string;
+  slug: string;
+}
+export interface DappsProps {
+  readonly list: Project[];
+  readonly categories: TagObject[];
+}
+export async function getStarknetDappsDbProjects(
+  context: EventContext<{}, any, Record<string, unknown>>
+): Promise<DappsProps> {
+  try {
+    const sections = await getJSON(
+      "data/starknet-db-projects-dapps/starknet-db-projects-dapps",
+      context
+    );
+    return sections;
+  } catch (cause) {
+    throw new Error("getStarknetDappsDbProjects failed!", {
+      cause,
+    });
+  }
+}

workspaces/cms-scripts/src/index.ts

@@ -1,8 +1,9 @@
 import fs from "fs/promises";
 import * as path from "path";
-
+import { ApiResponse } from "./types";
+import { Project } from "../../cms-data/src/starknet-db-projects-dapps";
 process.chdir(path.resolve(__dirname, "../../.."));
-
+import slugify from "slugify";
 import { write, yaml } from "./utils";
 import { locales } from "@starknet-io/cms-data/src/i18n/config";
 import { MainMenu } from "./main-menu";
@@ -22,7 +23,7 @@ import {
   updateBlocks,
 } from "./data";
 import { translateFile } from "./crowdin";
-
+import fetch from "node-fetch";
 const createRoadmapDetails = async () => {
   await fs.mkdir(`public/data/roadmap-details`, { recursive: true });
   for (const locale of locales) {
@@ -301,7 +302,70 @@ await write(
   `public/data/featured-sections/featured-sections.json`,
   featuredSections
 );
+const fetchProjects = async () => {
+  try {
+    return await fetch("https://api.starknet-db.com/projects?size=10000").then(
+      (response) => response.json() as unknown as ApiResponse
+    );
+  } catch (error) {
+    console.error("Error fetching projects from api.starknet-db:", error);
+    throw error;
+  }
+};
+const dAppsData: ApiResponse = await fetchProjects();
+export interface TagObject {
+  label: string;
+  slug: string;
+}
+const blackListTags = [
+  "all",
+  "governance",
+  "pfp",
+  "green finance",
+  "cairo",
+  "formal-verification",
+  "dex, wallet, multi-chain, cross-chain, okx, bridge, blockchain",
+  "staking",
+  "access node",
+  "data",
+  "starkware",
+];
+
+const slugifyTags = (objects: Project[]): Project[] => {
+  return objects.map((obj) => {
+    const newObj: Project = {
+      ...obj,
+      tags: obj.tags.map((tag) => slugify(tag, "_")),
+    };
+    return newObj;
+  });
+};
+
+const extractTags = (projects: Project[]): TagObject[] => {
+  const tagsSet = new Set<string>();
+  projects.forEach((project) => {
+    project.tags.forEach((tag: string) => tagsSet.add(tag.toLowerCase()));
+  });
+  // const tagArray = Array.from(tagsSet);
+  const filteredArray = Array.from(tagsSet).filter(
+    (item) => !blackListTags.includes(item)
+  );
+
+  return filteredArray.map((tag) => ({
+    label: tag,
+    slug: slugify(tag, "_"),
+  }));
+};
+const slugifyDApps = slugifyTags(dAppsData.content);
+const categories = extractTags(dAppsData.content).sort((a, b) =>
+  a.label > b.label ? 1 : b.label > a.label ? -1 : 0
+);
 
+await fs.mkdir("public/data/starknet-db-projects-dapps", { recursive: true });
+await write(
+  `public/data/starknet-db-projects-dapps/starknet-db-projects-dapps.json`,
+  { list: slugifyDApps, categories }
+);
 await createRoadmapDetails();
 await createAnnouncementDetails();
 await createSharedData();

workspaces/cms-scripts/src/types.ts

@@ -0,0 +1,30 @@
+import { Project } from "../../cms-data/src/starknet-db-projects-dapps";
+
+export type ApiResponse = {
+  content: Project[];
+  pageable: {
+    sort: {
+      empty: boolean;
+      sorted: boolean;
+      unsorted: boolean;
+    };
+    offset: number;
+    pageSize: number;
+    pageNumber: number;
+    paged: boolean;
+    unpaged: boolean;
+  };
+  last: boolean;
+  totalElements: number;
+  totalPages: number;
+  size: number;
+  number: number;
+  sort: {
+    empty: boolean;
+    sorted: boolean;
+    unsorted: boolean;
+  };
+  first: boolean;
+  numberOfElements: number;
+  empty: boolean;
+};

workspaces/website/package.json

@@ -24,6 +24,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-streaming": "^0.3.10",
+    "slugify": "^1.6.6",
     "vite": "^4.3.9",
     "vite-node": "0.30.1",
     "vite-plugin-ssr": "^0.4.131",

workspaces/website/src/blocks/Block.tsx

@@ -22,6 +22,8 @@ import VideoSectionBlock from "./VideoSectionBlock";
 import { NewsletterCard } from "@ui/Card/NewsletterCard";
 import { YoutubePlayer } from "@ui/YoutubePlayer/YoutubePlayer";
 import NavbarStickyBanner from "../pages/(components)/NavbarStickyBanner/NavbarStickyBanner";
+import DappsPage from "src/pages/starknet-db-projects-dapps/(components)/DappsPage";
+import { getStarknetDappsDbProjects } from "@starknet-io/cms-data/src/starknet-db-projects-dapps";
 import DisplayCardItems from "./DisplayCardItems";
 
 export enum BlockPlacements {
@@ -48,6 +50,7 @@ export function Block({
 }: Props): JSX.Element | null {
   switch (placement) {
     case BlockPlacements.DEFAULT:
+      const pageContext = usePageContext();
       switch (block.type) {
         case "basic_card":
           return <BasicCard {...block} locale={locale} />;
@@ -172,9 +175,13 @@ export function Block({
               darkTextColor={block.darkTextColor}
             />
           );
+        case "dapps":
+          const data = useAsync(["getBlockExplorers", locale], () =>
+            getStarknetDappsDbProjects(pageContext.context)
+          );
+          return <DappsPage list={data.list} categories={data.categories} />;
 
         case "home_hero":
-          const pageContext = usePageContext();
           const homeSEO = useAsync(["getBlockExplorers", locale], () =>
             getHomeSEO(locale, pageContext.context)
           );

workspaces/website/src/hooks/useQueryString.ts

@@ -0,0 +1,22 @@
+import { useEffect, useState } from "react";
+
+export interface QueryParams {
+  [key: string]: string;
+}
+
+const useQueryString = () => {
+  const [queryString, setQueryString] = useState<QueryParams>({});
+
+  const url = new URL(window.location.href);
+  useEffect(() => {
+    const queryString = url.search;
+    const searchParams = new URLSearchParams(queryString);
+
+    const paramsObject = Object.fromEntries(searchParams.entries());
+    setQueryString(paramsObject);
+  }, [url.pathname]);
+
+  return queryString;
+};
+
+export default useQueryString;