fix: add ref to control player url

.env.example

@@ -5,7 +5,7 @@ NEXT_PUBLIC_VERCEL_ENV = development
 NEXT_PUBLIC_URL = 'http://localhost:3000'
 NEXT_PUBLIC_MOD_PROTOCOL_API_URL = 'https://api.modprotocol.org/api'
 
-# The following are sensative data and should
+# The following are sensitive data and should
 # be stored in a .env.development.local file
 # for local development, and are hosted in Vercel
 # for production use cases
@@ -14,12 +14,12 @@ APP_MNENOMIC = 'candy maple cake sugar honey ... potato blue'
 NEYNAR_API_KEY = ''
 SUPABASE_SERVICE_KEY = ''
 YOUTUBE_API_KEY = ''
-# These are sepecific to the environment
+# These are specific to the environment
 # and so need to be configured locally
-# but are not sensative data
+# but are not sensitive data
 NEXT_PUBLIC_APP_FID = '123'
 NEXT_PUBLIC_SUPABASE_URL = ''
 NEXT_PUBLIC_SUPABASE_ANON_KEY = ''
 NEXT_PUBLIC_PRIVY_API_KEY = ''
 NEXT_PUBLIC_ALCHEMY_API_KEY = ''
-NEXT_PUBLIC_SEGMENT_WRITE_KEY = ''
+NEXT_PUBLIC_SEGMENT_WRITE_KEY = ''

.nvmrc

@@ -1 +1 @@
-v20.13.1
+v20.18.1

README.md

@@ -19,7 +19,7 @@ a protocol for decentralized social apps: https://www.farcaster.xyz
   a. get a Neynar API key https://docs.neynar.com/docs -> `NEYNAR_API_KEY` <br>
   b. get an Alchemy API key https://www.alchemy.com -> `NEXT_PUBLIC_ALCHEMY_API_KEY` <br>
   c. get your Farcaster account FID and mnemonic -> `NEXT_PUBLIC_APP_FID` + `APP_MNENOMIC`<br>
-  d. launch local copy of Supabase with `supabase start`, use the info provided -> <br>
+  d. launch local copy of Supabase with `supabase start` (in the root directory of this repo), use the info provided -> <br>
  `API URL`:`NEXT_PUBLIC_SUPABASE_URL` + `anon key`:`NEXT_PUBLIC_SUPABASE_ANON_KEY`
 
 ## Contributing and making Fidgets
@@ -35,17 +35,17 @@ The Nounspace App follows the Atomic Design Pattern
 
 `src/common/ui` contains all of the display components for all other layers of the atomic design. `src/common/ui/components` are a mixture of Molecules and Organisms that were imported from `herocast`, they still need to be split into their appropriate folders (`src/common/ui/molecules` & `src/common/ui/organisms`).
 
-`src/common/data` contains the access to datastreams, in the form of database connections and API's
+`src/common/data` contains access to datastreams, in the form of database connections and API's
 
 `src/common/lib` contains useful functions for accessing formatted data, along with helpers functions inside the `utils` directory.
 
 `src/styles` contains information for managing website styling
 
-`src/constants` contains all static information that is the needed to run the app. This includes actual constants, along with some global types
+`src/constants` contains all static information that is needed to run the app. This includes actual constants, along with some global types
 
 ### Refactoring
 
-This file structure is adapted from `herocast`, and not all files have been cleaned up properly. If you find files or data that is placed in the wrong location, please refactor it. For example, there are some constants that are not placed in the `src/constants` directory, and instead are in the other files
+This file structure is adapted from `herocast`, and not all files have been cleaned up properly. If you find files or data that are placed in the wrong location, please refactor it. For example, there are some constants that are not placed in the `src/constants` directory, and instead are in the other files
 
 
 ### DB scheme: accounts

package.json

@@ -1,6 +1,6 @@
 {
   "name": "Nounspace",
-  "version": "0.0.16",
+  "version": "0.0.17",
   "license": "",
   "private": true,
   "scripts": {
@@ -45,7 +45,6 @@
     "@heroicons/react": "^2.0.18",
     "@hookform/resolvers": "^3.3.4",
     "@internationalized/date": "^3.5.4",
-    "@lifi/widget": "^3.4.4",
     "@mod-protocol/core": "^0.2.1",
     "@mod-protocol/mod-registry": "^0.2.2",
     "@mod-protocol/react": "^0.2.0",
@@ -95,13 +94,15 @@
     "@webscopeio/react-textarea-autocomplete": "^4.9.2",
     "@xmtp/frames-validator": "^0.6.0",
     "@xmtp/proto": "^3.61.1",
+    "alchemy-sdk": "^3.5.0",
     "axios": "^1.6.7",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
     "cmdk": "^0.2.1",
     "command-score": "^0.1.2",
     "encoding": "^0.1.13",
     "esbuild": "^0.21.5",
+    "ethers": "^6.13.4",
     "fast-json-stable-stringify": "^2.1.0",
     "focus-trap-react": "^10.2.1",
     "framer-motion": "^11.3.30",
@@ -114,6 +115,7 @@
     "linkify-react": "^4.1.1",
     "linkifyjs": "^4.1.3",
     "lodash": "^4.17.21",
+    "lucide-react": "^0.469.0",
     "moment": "^2.30.1",
     "mutative": "^1.0.3",
     "neverthrow": "^6.2.2",

src/app/explore/ExploreCard.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+import React from "react";
+import Link from "next/link";
+import Image from "next/image";
+import { AnalyticsEvent } from "@/common/providers/AnalyticsProvider"; // Import analytics
+import { trackAnalyticsEvent } from "@/common/lib/utils/analyticsUtils";
+
+const ExploreCard = ({ post }) => {
+  return (
+    <Link
+      onClick={() => {
+        trackAnalyticsEvent(AnalyticsEvent.CLICK_EXPLORE_CARD, {
+          slug: post.slug,
+        });
+      }}
+      href={`/s/${post.slug}`}
+      className="block border border-gray-300 rounded-lg overflow-hidden bg-[#FCFFF4] hover:shadow-md transition-all duration-100 ease-out hover:-translate-y-1"
+    >
+      <div className="h-36 w-full bg-gray-200 overflow-hidden relative">
+        <Image
+          src={post.image}
+          alt={post.title}
+          fill
+          className="object-cover object-center"
+        />
+      </div>
+      <div className="p-3">
+        <h2 className="text-lg font-bold">@{post.title}</h2>
+      </div>
+    </Link>
+  );
+};
+
+export default ExploreCard;

src/app/explore/Tokens.tsx

@@ -0,0 +1,167 @@
+import React from "react";
+import { formatDistanceToNow } from "date-fns";
+import {
+  ChartNoAxesColumn,
+  ChartNoAxesColumnDecreasing,
+  ChartNoAxesColumnIncreasing,
+  CircleDollarSign,
+  Clock,
+  Flame,
+  User,
+} from "lucide-react";
+import Image from "next/image";
+import Link from "next/link";
+import { Address } from "viem";
+
+export interface Token {
+  name: string;
+  address: Address;
+  symbol: string;
+  imageUrl?: string;
+  deployer: {
+    username: string;
+    avatarUrl: string;
+    followers: number;
+    score: number;
+  };
+  deployedAt: string;
+  marketCap: number;
+  volumeLastHour: number;
+  priceChange: number;
+}
+
+export function TokensGrid({ tokens }: { tokens: Token[] }) {
+  return (
+    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3 gap-4 mt-6">
+      {tokens.map((token) => (
+        <TokenCard key={token.address} token={token} />
+      ))}
+    </div>
+  );
+}
+
+export function TokenCard({ token }: { token: Token }) {
+  const timeAgo = formatDistanceToNow(new Date(token.deployedAt), {
+    addSuffix: true,
+  });
+
+  return (
+    <div className="ease-out flex flex-col justify-between bg-white dark:bg-gray-800 rounded-xl shadow-md dark:shadow-lg overflow-hidden hover:shadow-lg transition-shadow duration-300">
+      <Link
+        href={`/t/base/${token.address}`}
+        className="block"
+        target="_blank"
+        prefetch={false}
+      >
+        <div className="relative h-48">
+          <Image
+            key={token.name}
+            src={token?.imageUrl || token.deployer?.avatarUrl || ""}
+            alt={token.name}
+            className="w-full h-full object-cover"
+            width={500}
+            height={500}
+          />
+          <div className="absolute top-4 right-4 bg-black/70 dark:bg-gray-700 px-3 py-1 rounded-full">
+            <span className="text-white dark:text-gray-200 font-medium">
+              {token.symbol}
+            </span>
+          </div>
+        </div>
+
+        <div className="p-6">
+          <div className="flex items-center justify-between mb-4">
+            <h3 className="text-xl font-bold text-gray-900 dark:text-gray-100">
+              {token.name}
+            </h3>
+            <div className="flex items-center space-x-1">
+              {token.priceChange === 0 ? (
+                <ChartNoAxesColumn className="w-5 h-5 text-gray-900 dark:text-gray-100" />
+              ) : token.priceChange < 0 ? (
+                <ChartNoAxesColumnDecreasing className="w-5 h-5 text-red-500 dark:text-red-400" />
+              ) : (
+                <ChartNoAxesColumnIncreasing className="w-5 h-5 text-green-500 dark:text-green-400" />
+              )}
+              <span className="font-semibold text-muted-foreground">
+                {token.priceChange.toLocaleString(undefined, {
+                  minimumFractionDigits: 2,
+                  maximumFractionDigits: 2,
+                })}
+                %
+              </span>
+            </div>
+            {/* <div className="flex items-center space-x-1"> */}
+            {/* <Trophy className="w-4 h-4 text-yellow-500 dark:text-yellow-400" />
+              <span className="font-semibold text-gray-900 dark:text-gray-100">
+                {token.deployer.score}
+              </span> */}
+            {/* </div> */}
+          </div>
+        </div>
+      </Link>
+
+      <div className="px-6 pb-6">
+        {token.deployer.username == "Unknown" ? (
+          <p className="text-sm font-medium text-gray-900 dark:text-gray-100">
+            Anon deployer
+          </p>
+        ) : (
+          <div className="flex justify-between items-center mb-4">
+            <div className="flex items-center hover:opacity-80 cursor-pointer">
+              <Image
+                src={token.deployer?.avatarUrl || ""}
+                alt={token.deployer.username}
+                className="w-8 h-8 rounded-full mr-2 object-cover bg-gray-400"
+                width={32}
+                height={32}
+              />
+              <div>
+                <p className="text-sm font-medium text-gray-900 dark:text-gray-100">
+                  @{token.deployer.username}
+                </p>
+                <p className="text-xs text-muted-foreground">
+                  {token.deployer.followers.toLocaleString()} followers
+                </p>
+              </div>
+            </div>
+            <div className="flex items-center space-x-1">
+              <User className="w-4 h-4 text-muted-foreground" />
+              <span className="text-muted-foreground">
+                {token.deployer.score}
+              </span>
+            </div>
+          </div>
+        )}
+
+        <div className="flex items-end justify-between text-sm text-muted-foreground">
+          <div className="flex items-center">
+            <Clock className="w-4 h-4 mr-1 text-muted-foreground" />
+            <span>{timeAgo}</span>
+          </div>
+          <div className="flex flex-col items-end">
+            <div className="flex items-center">
+              <Flame className="w-4 h-4 mr-1 text-muted-foreground" />
+              <span>
+                $
+                {token.volumeLastHour.toLocaleString(undefined, {
+                  minimumFractionDigits: 2,
+                  maximumFractionDigits: 2,
+                })}
+              </span>
+            </div>
+            <div className="flex items-center">
+              <CircleDollarSign className="w-4 h-4 mr-1 text-muted-foreground" />
+              <span>
+                $
+                {token.marketCap.toLocaleString(undefined, {
+                  minimumFractionDigits: 2,
+                  maximumFractionDigits: 2,
+                })}
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/pages/explore/[slug].tsx → src/app/explore/[slug]/page.tsx

@@ -5,7 +5,6 @@ import {
   getAllSlugs,
   getMarkdownFileBySlug,
 } from "@/common/data/explore/loadExploreMarkdown";
-import { GetStaticProps, InferGetStaticPropsType } from "next/types";
 import { isNull, isObject, isUndefined, map } from "lodash";
 import Image from "next/image";
 
@@ -33,47 +32,31 @@ function isExplorePost(maybe: unknown): maybe is ExplorePost {
   );
 }
 
-export async function getStaticPaths() {
+export async function generateStaticParams() {
   const slugs = await getAllSlugs();
-  return {
-    paths: map(slugs, (s) => ({
-      params: {
-        slug: s,
-      },
-    })),
-    fallback: false,
-  };
+  return map(slugs, (s) => ({ slug: s }));
 }
 
-export const getStaticProps = (async ({ params }) => {
-  const post = await getMarkdownFileBySlug(params!.slug as string);
+const getPostOrSlug = async (
+  slug: string,
+): Promise<ExplorePost | SlugOnlyPost> => {
+  const post = await getMarkdownFileBySlug(slug);
   if (isNull(post)) {
     return {
-      props: {
-        post: {
-          slug: params!.slug as string,
-        },
-      },
+      slug,
     };
   }
+
   const processedContent = await remark().use(html).process(post.content);
   const contentHtml = processedContent.toString();
-
   return {
-    props: {
-      post: {
-        ...post,
-        contentHtml,
-      },
-    },
+    ...post,
+    contentHtml,
   };
-}) satisfies GetStaticProps<{
-  post: ExplorePost | SlugOnlyPost;
-}>;
+};
 
-export default function Post({
-  post,
-}: InferGetStaticPropsType<typeof getStaticProps>) {
+export default async function Post({ params }) {
+  const post = await getPostOrSlug(params!.slug as string);
   if (isExplorePost(post)) {
     return (
       <div>