Dashboard: Add tokens section in explore

MananTank · MananTank · commit f29cbfdbed8b · 2025-08-07T22:42:11.000+05:30
diff --git a/apps/dashboard/src/@/analytics/report.ts b/apps/dashboard/src/@/analytics/report.ts
@@ -503,3 +503,16 @@ export function reportFundWalletSuccessful() {
 export function reportFundWalletFailed(params: { errorMessage: string }) {
   posthog.capture("fund wallet failed", params);
 }
+
+/**
+ * ### Why do we need to report this event?
+ * - To track the conversion rate of the users choosing to create a token from new flow from the explore page
+ *
+ * ### Who is responsible for this event?
+ * @MananTank
+ */
+export function reportExploreTokenCardClicked(params: {
+  assetType: "nft" | "coin";
+}) {
+  posthog.capture("explore token-card clicked", params);
+}
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/explore/page.tsx b/apps/dashboard/src/app/(app)/(dashboard)/explore/page.tsx
@@ -4,6 +4,7 @@ import { ContractRow } from "./components/contract-row";
 import { DeployUpsellCard } from "./components/upsells/deploy-your-own";
 import { PublishUpsellCard } from "./components/upsells/publish-submit";
 import { EXPLORE_PAGE_DATA } from "./data";
+import { TokensSection } from "./tokens-section";
 
 const title = "List of smart contracts for EVM Developers";
 const description =
@@ -22,7 +23,7 @@ export default async function ExplorePage() {
   return (
     <div className="flex flex-col">
       <div className="border-b py-10">
-        <div className="container">
+        <div className="container max-w-7xl">
           <h1 className="mb-2 font-bold text-3xl lg:text-5xl tracking-tighter">
             Explore
           </h1>
@@ -34,7 +35,11 @@ export default async function ExplorePage() {
         </div>
       </div>
 
-      <div className="container flex flex-col gap-4 py-10">
+      <div className="container max-w-7xl py-10">
+        <TokensSection />
+      </div>
+
+      <div className="container max-w-7xl flex flex-col gap-8 py-10">
         <div className="flex flex-col gap-14">
           {EXPLORE_PAGE_DATA.map((category, idx) => (
             <Fragment key={category.id}>
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/explore/tokens-section.tsx b/apps/dashboard/src/app/(app)/(dashboard)/explore/tokens-section.tsx
@@ -0,0 +1,98 @@
+"use client";
+
+import { CoinsIcon, ImageIcon } from "lucide-react";
+import Link from "next/link";
+import { reportExploreTokenCardClicked } from "@/analytics/report";
+import { GridPattern } from "@/components/ui/background-patterns";
+import { Badge } from "@/components/ui/badge";
+import { cn } from "@/lib/utils";
+
+export function TokensSection() {
+  return (
+    <div className="bg-card p-4 lg:p-8 border rounded-xl relative w-full overflow-hidden">
+      <GridPattern
+        width={30}
+        height={30}
+        x={-1}
+        y={-1}
+        strokeDasharray={"4 2"}
+        className="text-border dark:text-border/70"
+        style={{
+          maskImage:
+            "linear-gradient(to bottom right,transparent,transparent,white)",
+        }}
+      />
+
+      <div className="absolute top-4 right-4 lg:top-6 lg:right-6">
+        <Badge
+          variant="outline"
+          className="text-sm bg-background h-auto px-3 py-1"
+        >
+          New
+        </Badge>
+      </div>
+
+      <h2 className="font-semibold text-2xl tracking-tighter mb-1">
+        Recommended
+      </h2>
+      <p className="text-muted-foreground mb-6 text-sm lg:text-base">
+        Easily deploy tokens using with built in distribution mechanisms, <br />{" "}
+        fee recipient settings, and simple configuration of the contract and
+        assets.
+      </p>
+
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+        <CardLink
+          assetType="coin"
+          title="Coin"
+          description="Create an ERC-20 token to create cryptocurrencies"
+          href="/team/~/~project/tokens/create/token"
+          icon={<CoinsIcon className="size-5 text-muted-foreground" />}
+        />
+
+        <CardLink
+          assetType="nft"
+          title="NFT Collection"
+          description="Create an ERC-721 or ERC-1155 token to create digital assets "
+          href="/team/~/~project/tokens/create/nft"
+          icon={<ImageIcon className="size-5 text-muted-foreground" />}
+        />
+      </div>
+    </div>
+  );
+}
+
+function CardLink(props: {
+  title: string;
+  description: string;
+  href: string;
+  icon: React.ReactNode;
+  assetType: "nft" | "coin";
+}) {
+  return (
+    <div
+      className={cn(
+        "relative flex flex-col rounded-lg border p-4 cursor-pointer hover:border-active-border bg-background",
+      )}
+    >
+      <div className="mb-4 flex">
+        <div className="flex items-center justify-center rounded-full border p-2 bg-card">
+          {props.icon}
+        </div>
+      </div>
+
+      <h3 className="mb-0.5 font-semibold text-lg tracking-tight">
+        <Link
+          className="before:absolute before:inset-0"
+          href={props.href}
+          onClick={() => {
+            reportExploreTokenCardClicked({ assetType: props.assetType });
+          }}
+        >
+          {props.title}
+        </Link>
+      </h3>
+      <p className="text-muted-foreground text-sm">{props.description}</p>
+    </div>
+  );
+}
diff --git a/apps/dashboard/src/app/(app)/team/~/[[...paths]]/page.tsx b/apps/dashboard/src/app/(app)/team/~/[[...paths]]/page.tsx
@@ -5,7 +5,7 @@ import { AppFooter } from "@/components/footers/app-footer";
 import { DotsBackgroundPattern } from "@/components/ui/background-patterns";
 import { getClientThirdwebClient } from "@/constants/thirdweb-client.client";
 import { TeamHeader } from "../../components/TeamHeader/team-header";
-import { createTeamLink, TeamSelectorCard } from "./components/team-selector";
+import { createTeamLink, TeamSelectorCard } from "../_components/team-selector";
 
 export default async function Page(props: {
   params: Promise<{
diff --git a/apps/dashboard/src/app/(app)/team/~/_components/TeamAndProjectSelectorCard.stories.tsx b/apps/dashboard/src/app/(app)/team/~/_components/TeamAndProjectSelectorCard.stories.tsx
diff --git a/apps/dashboard/src/app/(app)/team/~/_components/TeamAndProjectSelectorCard.tsx b/apps/dashboard/src/app/(app)/team/~/_components/TeamAndProjectSelectorCard.tsx
@@ -16,7 +16,7 @@ export function ProjectAndTeamSelectorCard(props: {
     projects: PartialProject[];
   }[];
   client: ThirdwebClient;
-  description: React.ReactNode;
+  description: React.ReactNode | undefined;
   onSelect: (selected: { team: Team; project: PartialProject }) => void;
 }) {
   const teamAndProjects = props.teamAndProjects.filter(
@@ -31,10 +31,14 @@ export function ProjectAndTeamSelectorCard(props: {
         <div className="mb-2 self-start rounded-full border p-2">
           <BoxIcon className="size-5 text-muted-foreground" />
         </div>
-        <h1 className="mb-0.5 font-semibold text-xl tracking-tight">
-          Select a project
-        </h1>
-        <p className="text-muted-foreground text-sm">{props.description}</p>
+        <div className="space-y-0.5">
+          <h1 className="font-semibold text-xl tracking-tight">
+            Select a project
+          </h1>
+          {props.description && (
+            <p className="text-muted-foreground text-sm">{props.description}</p>
+          )}
+        </div>
       </div>
 
       <div
diff --git a/apps/dashboard/src/app/(app)/team/~/_components/project-selector.tsx b/apps/dashboard/src/app/(app)/team/~/_components/project-selector.tsx
@@ -5,7 +5,7 @@ import type { PartialProject } from "@/api/project/getProjectContracts";
 import type { Team } from "@/api/team/get-team";
 import { useAddContractToProject } from "@/hooks/project-contracts";
 import { useDashboardRouter } from "@/lib/DashboardRouter";
-import { ProjectAndTeamSelectorCard } from "../../../../../components/TeamAndProjectSelectorCard";
+import { ProjectAndTeamSelectorCard } from "./TeamAndProjectSelectorCard";
 
 export function SelectProjectForContract(props: {
   chainSlug: string;
@@ -78,3 +78,27 @@ export function ImportAndSelectProjectForContract(props: {
     />
   );
 }
+
+export function GenericProjectSelector(props: {
+  client: ThirdwebClient;
+  paths: string[] | undefined;
+  description: React.ReactNode | undefined;
+  teamAndProjects: {
+    team: Team;
+    projects: PartialProject[];
+  }[];
+}) {
+  const router = useDashboardRouter();
+  return (
+    <ProjectAndTeamSelectorCard
+      client={props.client}
+      description={props.description}
+      onSelect={(selection) => {
+        router.push(
+          `/team/${selection.team.slug}/${selection.project.slug}${props.paths?.length ? `/${props.paths.join("/")}` : ""}`,
+        );
+      }}
+      teamAndProjects={props.teamAndProjects}
+    />
+  );
+}
diff --git a/apps/dashboard/src/app/(app)/team/~/_components/team-selector.stories.tsx b/apps/dashboard/src/app/(app)/team/~/_components/team-selector.stories.tsx
diff --git a/apps/dashboard/src/app/(app)/team/~/_components/team-selector.tsx b/apps/dashboard/src/app/(app)/team/~/_components/team-selector.tsx
diff --git a/apps/dashboard/src/app/(app)/team/~/~/contract/[chain]/[contractAddress]/page.tsx b/apps/dashboard/src/app/(app)/team/~/~/contract/[chain]/[contractAddress]/page.tsx
@@ -17,7 +17,7 @@ import { TeamHeader } from "../../../../../components/TeamHeader/team-header";
 import {
   ImportAndSelectProjectForContract,
   SelectProjectForContract,
-} from "./components/project-selector";
+} from "../../../../_components/project-selector";
 
 export default async function Page(props: {
   params: Promise<{
diff --git a/apps/dashboard/src/app/(app)/team/~/~project/[[...paths]]/page.tsx b/apps/dashboard/src/app/(app)/team/~/~project/[[...paths]]/page.tsx
@@ -0,0 +1,76 @@
+import { getValidAccount } from "@/api/account/get-account";
+import { getAuthToken } from "@/api/auth-token";
+import { getProjects } from "@/api/project/projects";
+import { getTeams } from "@/api/team/get-team";
+import { AppFooter } from "@/components/footers/app-footer";
+import { DotsBackgroundPattern } from "@/components/ui/background-patterns";
+import { getClientThirdwebClient } from "@/constants/thirdweb-client.client";
+import { loginRedirect } from "@/utils/redirects";
+import { TeamHeader } from "../../../components/TeamHeader/team-header";
+import { GenericProjectSelector } from "../../_components/project-selector";
+
+export default async function Page(props: {
+  params: Promise<{
+    paths?: string[];
+  }>;
+}) {
+  const params = await props.params;
+  const pagePath = `/team/~/~${params.paths?.length ? `/${params.paths.join("/")}` : ""}`;
+
+  const [authToken, account, teams] = await Promise.all([
+    getAuthToken(),
+    await getValidAccount(pagePath),
+    getTeams(),
+  ]);
+
+  if (!authToken || !account || !teams) {
+    loginRedirect(pagePath);
+  }
+
+  const client = getClientThirdwebClient({
+    jwt: authToken,
+    teamId: undefined,
+  });
+
+  const teamAndAllProjects = await Promise.all(
+    teams.map(async (team) => {
+      return {
+        projects: await getProjects(team.slug).catch(() => []),
+        team,
+      };
+    }),
+  );
+
+  return (
+    <ProjectSelectionLayout>
+      <GenericProjectSelector
+        client={client}
+        paths={params.paths}
+        description={
+          params.paths?.[0] === "tokens"
+            ? "Select a project to continue with token creation"
+            : "Select a project to continue"
+        }
+        teamAndProjects={teamAndAllProjects}
+      />
+    </ProjectSelectionLayout>
+  );
+}
+
+function ProjectSelectionLayout(props: { children: React.ReactNode }) {
+  return (
+    <div className="relative flex min-h-dvh flex-col">
+      <div className="border-b bg-card">
+        <TeamHeader />
+      </div>
+
+      <div className="relative flex grow flex-col overflow-hidden">
+        <DotsBackgroundPattern />
+        <div className="container z-10 flex grow flex-col items-center justify-center py-20">
+          {props.children}
+        </div>
+      </div>
+      <AppFooter className="relative z-10" />
+    </div>
+  );
+}
