Token card

packages/client/src/pages/discover/Navigation.tsx

@@ -0,0 +1,30 @@
+import FlexSeparator from "../../shared/components/FlexSeparator.tsx";
+
+export default function Navigation() {
+  return (
+    <div className="flex flex-col">
+      <div className="flex">
+        <h1 className="text-foreground/50">
+          Watchlist
+        </h1>
+        <FlexSeparator size="md" />
+        <h1>Tokens</h1>
+      </div>
+      <FlexSeparator size="sm" />
+      <div className="flex text-xs gap-x-4 text-foreground/50 items-center">
+        <p className="bg-foreground/10 px-4 py-1 rounded-xl whitespace-nowrap text-foreground">
+          Most Traded
+        </p>
+        {navigationList.map((navigateItem, key) => (
+          <p className="whitespace-nowrap" key={key}>{navigateItem}</p>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+const navigationList = [
+  "Market Cap",
+  "Price",
+  "24H change",
+];

packages/client/src/pages/discover/TokenCard.tsx

@@ -0,0 +1,58 @@
+import FlexSeparator from "../../shared/components/FlexSeparator.tsx";
+import Icon from "../../shared/components/Icon.tsx";
+import { formatAddress } from "../../shared/lib/utils.ts";
+
+export default function TokenCard() {
+  return (
+    <div className="flex flex-col gap-y-2 border border-border p-2 rounded-sm">
+      <div className="flex gap-x-2 items-start pb-2 border-b border-border">
+        <img
+          src={tokenData.imageUrl}
+          alt={tokenData.name}
+          className="w-1/4 object-cover aspect-square"
+        />
+        <div className="flex flex-col">
+          <div className="flex text-sm">
+            <h1>{tokenData.name}</h1>
+            <FlexSeparator size="sm" />
+            <p className="bg-gradient-to-br from-purple-200 via-pink-500 to-red-500 bg-clip-text text-transparent font-bold">
+              {tokenData.ticker}
+            </p>
+          </div>
+          <FlexSeparator size="xs" />
+          <p className="text-xs text-foreground/50">
+            {tokenData.description?.length > 100
+              ? `${tokenData.description.slice(0, 100)}...`
+              : tokenData.description}
+          </p>
+        </div>
+      </div>
+      <div className="text-sm flex">
+        <p>$450k</p>
+        <FlexSeparator size="full" />
+        <p className="flex items-center gap-x-1">
+          <Icon name="Clock" className="size-3" />
+          5h
+        </p>
+
+        <FlexSeparator size="sm" />
+        <p className="flex items-center gap-x-1">
+          <Icon name="ArrowLeftRight" className="size-3" />
+          2,323
+        </p>
+      </div>
+    </div>
+  );
+}
+
+const tokenData = {
+  name: "KhareedLoYarr",
+  createdBy: "0x9B28C43d4526202c316b9ab0ECCB757C4D9c5155",
+  ticker: "KLYRR",
+  marketCap: "2.2M",
+  price: "0.2",
+  description:
+    "Find & Download Free Graphic Resources for Random Nft Vectors, Stock Photos & PSD files.  Free for commercial use  High Quality Images. Find & Download the most popular Random Nft Photos on Freepik  Free for commercial use  High Quality Images.",
+  imageUrl:
+    "https://i.ytimg.com/vi/LW1i-axSoYE/hq720.jpg?sqp=-oaymwEhCK4FEIIDSFryq4qpAxMIARUAAAAAGAElAADIQj0AgKJD&rs=AOn4CLA6NX3F_tN3cSQg084sPFcPOFS1ew",
+};

packages/client/src/pages/discover/Tokens.tsx

@@ -0,0 +1,9 @@
+import TokenCard from "./TokenCard.tsx";
+
+export default function Tokens() {
+  return (
+    <div>
+      <TokenCard />
+    </div>
+  );
+}

packages/client/src/pages/discover/page.tsx

@@ -4,6 +4,8 @@ import FlexSeparator from "../../shared/components/FlexSeparator.tsx";
 import Header from "../../shared/components/Header.tsx";
 import LoginBanner from "../../shared/components/LoginBanner.tsx";
 import RiskWarningBanner from "../../shared/components/RiskWarningBanner.tsx";
+import Navigation from "./Navigation.tsx";
+import Tokens from "./Tokens.tsx";
 
 export default function () {
   // const { authenticated } = usePrivy();
@@ -17,6 +19,11 @@ export default function () {
       <Header />
 
       <LoginBanner />
+
+      <Navigation />
+
+      <FlexSeparator size="lg" />
+      <Tokens />
     </div>
   );
 }

packages/client/src/shared/components/LoginBanner.tsx

@@ -3,10 +3,10 @@ import Link from "./Link.tsx";
 
 export default function LoginBanner() {
   return (
-    <div className="flex flex-col -translate-y-4">
+    <div className="flex flex-col -translate-y-4 border-b border-border pb-4">
       <div className="flex items-end">
-        <h1 className="text-2xl font-semibold">
-          Back to the Fun <br /> Side of Crypto
+        <h1 className="text-xl font-semibold">
+          Back to the Fun Side <br /> of Crypto
         </h1>
         <FlexSeparator size="full" />
         <img

packages/client/src/shared/lib/utils.ts

@@ -9,3 +9,29 @@ export function parseFormEventData(event: FormSubmitEvent) {
 export function chooseRandomFromArray<T>(array: T[]) {
   return array[Math.floor(Math.random() * array.length)];
 }
+
+export function formatAddress(address: string) {
+  return (
+    address.slice(0, 5 + 2) +
+    "..." +
+    address.slice(address.length - 5, address.length)
+  );
+}
+
+export function getImageDominantRgb(
+  src: string,
+): Promise<Uint8ClampedArray> {
+  return new Promise((resolve) => {
+    const context = document.createElement("canvas").getContext("2d");
+    context!.imageSmoothingEnabled = true;
+
+    let img = new Image();
+    img.src = src;
+    img.crossOrigin = "";
+
+    img.onload = () => {
+      context!.drawImage(img, 0, 0, 1, 1);
+      resolve(context!.getImageData(0, 0, 1, 1).data.slice(0, 3));
+    };
+  });
+}