{label}
+ {badge && ( +
+
+ {badge.toLocaleString()}
+
+
+ )}
,
@@ -81,6 +85,10 @@ export const ArcadeTabs = ({
"guilds",
"items",
"holders",
+ "prediction-activity",
+ "prediction-holders",
+ "prediction-comments",
+ "prediction-positions",
],
onTabClick,
variant,
@@ -105,7 +113,12 @@ export const ArcadeTabs = ({
const tabWidths = new Map();
hiddenRef.current.childNodes.forEach((node) => {
const element = node as HTMLDivElement;
- const tab = element.textContent?.toLowerCase();
+ const tabElement =
+ element.getAttribute("aria-controls")?.split("-") || [];
+ tabElement.splice(0, 3);
+
+ const tab = tabElement.join("-");
+
if (tab) {
const visible = order.includes(tab as TabValue);
tabWidths.set(tab as TabValue, { width: element.offsetWidth, visible });
@@ -297,6 +310,14 @@ const Tab = ({
return (
},
);
+const PredictionActivityNavButton = React.forwardRef<
+ HTMLButtonElement,
+ NavButtonProps
+>(({ value, active, size, onClick, item, isMobile }, ref) => {
+ if (isMobile) {
+ return (
+
+
+
+
+ );
+ }
+
+ if (item) {
+ return (
+
+
+
+
+ );
+ }
+
+ if (item) {
+ return (
+
+
+
+
+ );
+ }
+
+ if (item) {
+ return (
+
+
+
+
+ );
+ }
+
+ if (item) {
+ return (
+
diff --git a/client/src/components/prediction/activity-feed.tsx b/client/src/components/prediction/activity-feed.tsx
new file mode 100644
index 00000000..33db7d11
--- /dev/null
+++ b/client/src/components/prediction/activity-feed.tsx
@@ -0,0 +1,61 @@
+import { cn } from "@cartridge/ui";
+import React, { HTMLAttributes } from "react";
+import { UserAvatar } from "../user/avatar";
+
+interface Props extends HTMLAttributes {
+ username: string;
+ total: number;
+ itemName: string;
+ timestamp: string;
+}
+
+export const PredictionActivityFeed = React.forwardRef(
+ ({ username, total, itemName, timestamp, className, ...props }, ref) => {
+ return (
+ {
+ name: string;
+ percentage: string;
+ percentageChange: string;
+}
+
+export const BuyCard = React.forwardRef(
+ ({ className, name, percentage, percentageChange }, ref) => {
+ return (
+
+>(({ className }, ref) => {
+ return (
+ ;
+}
+
+export interface PredictionPageProps {
+ players?: Player[];
+}
+
+export function MarketChart({ players }: PredictionPageProps) {
+ const chartRef = useRef>(null);
+
+ // Default players if none provided
+ const defaultPlayers: Player[] = [
+ { name: "bal7hazar", color: "#60A5FA", baseValue: 20, variance: 4 },
+ { name: "clicksave", color: "#FB923C", baseValue: 11, variance: 3 },
+ { name: "flipper", color: "#4ADE80", baseValue: 7, variance: 3 },
+ ];
+
+ const activePlayers = players || defaultPlayers;
+
+ // Generate 7 days of mock data ending with today
+ const generateMockData = useCallback((): ChartData[] => {
+ const data: ChartData[] = [];
+ const today = new Date();
+
+ for (let i = 6; i >= 0; i--) {
+ const date = new Date(today);
+ date.setDate(date.getDate() - i);
+ const day = date.getDate();
+
+ const playerData: Record = {};
+ activePlayers.forEach((player) => {
+ playerData[player.name] =
+ player.baseValue + (Math.random() - 0.5) * 2 * player.variance;
+ });
+
+ data.push({
+ day,
+ playerData,
+ });
+ }
+
+ return data;
+ }, [activePlayers]);
+
+ const chartData = useMemo(() => {
+ const mockData = generateMockData();
+
+ return {
+ labels: mockData.map((d) => d.day.toString()),
+ datasets: activePlayers.map((player) => ({
+ label: player.name,
+ data: mockData.map((d) => d.playerData[player.name]),
+ borderColor: player.color,
+ backgroundColor: player.color,
+ borderWidth: 1,
+ pointRadius: (ctx: ScriptableContext<"line">) => {
+ // Only show point at the last data point
+ return ctx.dataIndex === ctx.dataset.data.length - 1 ? 3 : 0;
+ },
+ pointHoverRadius: 6,
+ fill: false,
+ })),
+ };
+ }, [activePlayers, generateMockData]);
+
+ const options = useMemo((): ChartOptions<"line"> => {
+ return {
+ responsive: true,
+ maintainAspectRatio: false,
+ plugins: {
+ legend: {
+ display: false, // We'll create custom legend
+ },
+ tooltip: {
+ backgroundColor: "#1F2937",
+ titleColor: "#F9FAFB",
+ bodyColor: "#F9FAFB",
+ borderColor: "#374151",
+ borderWidth: 1,
+ callbacks: {
+ label: (context) => {
+ return `${context.dataset.label}: ${context.parsed.y.toFixed(1)}%`;
+ },
+ },
+ },
+ },
+ scales: {
+ x: {
+ grid: {
+ display: false,
+ color: "rgba(255, 255, 255, 0.1)",
+ },
+ border: {
+ display: false,
+ },
+ ticks: {
+ color: "#505050",
+ font: {
+ size: 12,
+ },
+ },
+ },
+ y: {
+ position: "right",
+ min: 0,
+ max: 28,
+ grid: {
+ display: false,
+ color: "rgba(255, 255, 255, 0.1)",
+ },
+ border: {
+ display: false,
+ },
+ ticks: {
+ color: "#505050",
+ font: {
+ size: 12,
+ },
+ callback: (value) => `${value}%`,
+ stepSize: 7,
+ },
+ },
+ },
+ interaction: {
+ intersect: false,
+ mode: "index",
+ },
+ };
+ }, []);
+
+ // Handle chart resize
+ useEffect(() => {
+ const handleResize = () => {
+ if (chartRef.current) {
+ chartRef.current.resize();
+ }
+ };
+
+ window.addEventListener("resize", handleResize);
+ return () => window.removeEventListener("resize", handleResize);
+ }, []);
+
+ return (
+ <>
+ {/* Legend */}
+ & CommentRowProps
+>(({ className, name, comment, timestamp, ...props }, ref) => {
+ return (
+
+>(({ className, ...props }, ref) => {
+ const location = useLocation();
+ const navigate = useNavigate();
+
+ const handleClose = useCallback(() => {
+ let pathname = location.pathname;
+ pathname = pathname.replace(/\/tab\/prediction-[^/]+$/, "");
+ pathname = pathname.replace(/\/prediction$/, "");
+ navigate(pathname || "/");
+ }, [location, navigate]);
+
+ return (
+
+>(({ className, ...props }, ref) => {
+ return (
+ & THolders
+>(({ className, ownerName, shares, percentHeld, order, ...props }, ref) => {
+ return (
+
+>(({ className, ...props }, ref) => {
+ return (
+ & PredictionPositionCardProps
+>(
+ (
+ {
+ description,
+ username,
+ userAvatarClassName,
+ balanceTokenIcon,
+ balanceTokenAmount,
+ earnTokenIcon,
+ earnTokenAmount,
+ className,
+ ...props
+ },
+ ref,
+ ) => {
+ return (
+ ;
+
+export const PredictionCommentsScene = () => {
+ const [comments, setComments] = useState>(MOCKDATA);
+ const { address } = useAddress();
+ const { username } = useUsername({ address });
+
+ const handleAddComment = useCallback(
+ (newComment: CommentRowProps) => {
+ setComments([newComment, ...comments]);
+ },
+ [comments],
+ );
+
+ return (
+ ;
+
+export const PredictionHoldersScene = () => {
+ return (
+
+
+ );
+}
diff --git a/client/src/components/predict/index.tsx b/client/src/components/predict/index.tsx
index 45c489f7..87343176 100644
--- a/client/src/components/predict/index.tsx
+++ b/client/src/components/predict/index.tsx
@@ -16,7 +16,9 @@ export const Predict = () => {
return (
+
+
+
{Array.from(
- [1, 2, 3, 4].map((i) =>
);
diff --git a/client/src/components/predict/predict-card.tsx b/client/src/components/predict/predict-card.tsx
index 56f57c76..0a95d4ec 100644
--- a/client/src/components/predict/predict-card.tsx
+++ b/client/src/components/predict/predict-card.tsx
@@ -8,6 +8,8 @@ import {
Thumbnail,
} from "@cartridge/ui";
import { UserAvatar } from "../user/avatar";
+import { useNavigate } from "react-router-dom";
+import { useProject } from "@/hooks/project";
export interface PredictCardProps {
image: string;
@@ -42,9 +44,21 @@ export const PredictCard = React.forwardRef<
},
ref,
) => {
+ const navigate = useNavigate();
+ const { game } = useProject();
+
+ const handleClick = () => {
+ if (!game) return navigate("/");
+
+ const gameName = game.name.toLowerCase().replace(/ /g, "-");
+ const predictionPath = `/game/${gameName}/prediction/tab/prediction-activity`;
+ navigate(predictionPath);
+ };
+
return (
+
+ );
+ },
+);
diff --git a/client/src/components/prediction/buy-card.tsx b/client/src/components/prediction/buy-card.tsx
new file mode 100644
index 00000000..40b557ba
--- /dev/null
+++ b/client/src/components/prediction/buy-card.tsx
@@ -0,0 +1,47 @@
+import { Button, cn, DoubleWedgeIcon, Thumbnail } from "@cartridge/ui";
+import { UserAvatar } from "../user/avatar";
+import React, { HTMLAttributes } from "react";
+
+interface Props extends HTMLAttributes
+
+
+
+
+ bought
+
+ {username}
+
+ 
+
+
+ shares of
+
+
+
+ {total}
+
+
+
+
+ + {itemName} +
+
+
+ + {timestamp} +
+
+
+ );
+ },
+);
diff --git a/client/src/components/prediction/buy-section.tsx b/client/src/components/prediction/buy-section.tsx
new file mode 100644
index 00000000..5aa394c3
--- /dev/null
+++ b/client/src/components/prediction/buy-section.tsx
@@ -0,0 +1,47 @@
+import React, { HTMLAttributes } from "react";
+import { BuyCard } from "./buy-card";
+import { cn } from "@cartridge/ui";
+
+const MOCKDATA = [
+ {
+ name: "bal7hazar",
+ percentage: "21%",
+ percentageChange: "-2.3%",
+ },
+ {
+ name: "clicksave",
+ percentage: "12%",
+ percentageChange: "-1.1%",
+ },
+ {
+ name: "flipper",
+ percentage: "8%",
+ percentageChange: "-0.5%",
+ },
+ {
+ name: "gamer123",
+ percentage: "5%",
+ percentageChange: "-0.2%",
+ },
+ {
+ name: "proplayer",
+ percentage: "4%",
+ percentageChange: "-0.1%",
+ },
+];
+
+export const BuySection = React.forwardRef<
+ HTMLDivElement,
+ HTMLAttributes
+
+ {name}
+
+
+
+
+
+
+
+ {percentageChange}
++ {percentage} +
+
+ {MOCKDATA.map((item, index) => (
+
+ );
+});
diff --git a/client/src/components/prediction/chart.tsx b/client/src/components/prediction/chart.tsx
new file mode 100644
index 00000000..57cf5ea6
--- /dev/null
+++ b/client/src/components/prediction/chart.tsx
@@ -0,0 +1,205 @@
+import { useRef, useMemo, useEffect, useCallback } from "react";
+import {
+ Chart as ChartJS,
+ CategoryScale,
+ LinearScale,
+ PointElement,
+ LineElement,
+ Tooltip,
+ Legend,
+ ChartOptions,
+ ScriptableContext,
+} from "chart.js";
+import { Line } from "react-chartjs-2";
+import { UserAvatar } from "../user/avatar";
+
+// Register Chart.js components
+ChartJS.register(
+ CategoryScale,
+ LinearScale,
+ PointElement,
+ LineElement,
+ Tooltip,
+ Legend,
+);
+
+export interface Player {
+ name: string;
+ color: string;
+ baseValue: number; // Base percentage value around which to randomize
+ variance: number; // Amount of randomization (+/-)
+}
+
+interface ChartData {
+ day: number;
+ playerData: Record
+ {activePlayers.map((player) => (
+
+
+ {/* Chart Container */}
+
+
+
+ ))}
+
+
+
+ );
+}
diff --git a/client/src/components/prediction/comment-row.tsx b/client/src/components/prediction/comment-row.tsx
new file mode 100644
index 00000000..462c6ab0
--- /dev/null
+++ b/client/src/components/prediction/comment-row.tsx
@@ -0,0 +1,45 @@
+import { cn, Thumbnail } from "@cartridge/ui";
+import React, { HTMLAttributes } from "react";
+import { UserAvatar } from "../user/avatar";
+
+export interface CommentRowProps {
+ name: string;
+ comment: string;
+ timestamp: string;
+}
+
+export const CommentRow = React.forwardRef<
+ HTMLDivElement,
+ HTMLAttributes
+
+ );
+});
diff --git a/client/src/components/prediction/header.tsx b/client/src/components/prediction/header.tsx
new file mode 100644
index 00000000..3950bffd
--- /dev/null
+++ b/client/src/components/prediction/header.tsx
@@ -0,0 +1,89 @@
+import { Button, ClockIcon, cn, Thumbnail, TimesIcon } from "@cartridge/ui";
+import { UserAvatar } from "../user/avatar";
+import React, { HTMLAttributes, useCallback } from "react";
+import { useLocation, useNavigate } from "react-router-dom";
+
+export const PredictionHeader = React.forwardRef<
+ HTMLDivElement,
+ HTMLAttributes
+
+
+
+
+
+ {name}
+{comment}
+
+
+ + {timestamp} +
+
+
+ );
+});
+
+function CloseButton({ handleClose }: { handleClose: () => void }) {
+ return (
+
+ );
+}
diff --git a/client/src/components/prediction/holder-label.tsx b/client/src/components/prediction/holder-label.tsx
new file mode 100644
index 00000000..d17f410a
--- /dev/null
+++ b/client/src/components/prediction/holder-label.tsx
@@ -0,0 +1,40 @@
+import { cn } from "@cartridge/ui";
+import React, { HTMLAttributes } from "react";
+
+export const HolderLabel = React.forwardRef<
+ HTMLDivElement,
+ HTMLAttributes
+
+
+
+
+
+ + Blitz Edition Season 1 +
+
+
+
+
+
+
+ + 8,800 TVL +
+
+
+
+
+
+ Created by
+
+
+ flipper
+
+
+
+
+
+ 2d 12h 5m
+
+
+ );
+});
diff --git a/client/src/components/prediction/holder-row.tsx b/client/src/components/prediction/holder-row.tsx
new file mode 100644
index 00000000..db0e573f
--- /dev/null
+++ b/client/src/components/prediction/holder-row.tsx
@@ -0,0 +1,47 @@
+import { cn } from "@cartridge/ui";
+import React, { HTMLAttributes } from "react";
+import { UserAvatar } from "../user/avatar";
+
+export interface THolders {
+ order?: number;
+ ownerName: string;
+ shares: number;
+ percentHeld: number;
+}
+
+export const HolderRow = React.forwardRef<
+ HTMLDivElement,
+ HTMLAttributes
+
+
+
+ #
+
+
+
+ Owner
+
+
+
+
+
+ Shares
+
+
+
+
+
+ % Held
+
+
+
+
+ );
+});
diff --git a/client/src/components/prediction/index.ts b/client/src/components/prediction/index.ts
new file mode 100644
index 00000000..93e16c3e
--- /dev/null
+++ b/client/src/components/prediction/index.ts
@@ -0,0 +1,4 @@
+export * from "./buy-card";
+export * from "./buy-section";
+export * from "./chart";
+export * from "./prediction-tabs";
diff --git a/client/src/components/prediction/positions-label.tsx b/client/src/components/prediction/positions-label.tsx
new file mode 100644
index 00000000..d9d0eacf
--- /dev/null
+++ b/client/src/components/prediction/positions-label.tsx
@@ -0,0 +1,32 @@
+import { cn } from "@cartridge/ui";
+import React, { HTMLAttributes } from "react";
+
+export const PositionsLabel = React.forwardRef<
+ HTMLDivElement,
+ HTMLAttributes
+
+ {order}.
+
+
+ {ownerName}
+
+
+
+
+
+
+ {shares}
+
+
+ {percentHeld}%
+
+
+ );
+});
diff --git a/client/src/components/prediction/positions-row.tsx b/client/src/components/prediction/positions-row.tsx
new file mode 100644
index 00000000..804eec5a
--- /dev/null
+++ b/client/src/components/prediction/positions-row.tsx
@@ -0,0 +1,87 @@
+import { Thumbnail } from "@cartridge/ui";
+import { UserAvatar } from "../user/avatar";
+import { cn } from "@/lib/utils";
+import React from "react";
+
+export interface PredictionPositionCardProps {
+ description: string;
+
+ // User Info
+ username: string;
+ userAvatarClassName: string;
+
+ // Balance Token/Asset Info
+ balanceTokenIcon: string;
+ balanceTokenAmount: string | number;
+
+ // To Earn Token/Asset Info
+ earnTokenIcon: string;
+ earnTokenAmount: string | number;
+}
+
+export const PredictionPositionCard = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes
+
+
+
+
+ Market
+
+
+
+ Balance
+
+
+
+ To Earn
+
+
+
+ );
+ },
+);
diff --git a/client/src/components/prediction/prediction-tabs.tsx b/client/src/components/prediction/prediction-tabs.tsx
new file mode 100644
index 00000000..46f17571
--- /dev/null
+++ b/client/src/components/prediction/prediction-tabs.tsx
@@ -0,0 +1,61 @@
+import { TabsContent } from "@cartridge/ui";
+import { ArcadeTabs, TabValue } from "../modules";
+import { PredictionActivityScene } from "../scenes/prediction-activity";
+import { PredictionHoldersScene } from "../scenes/prediction-holders";
+import { PredictionCommentsScene } from "../scenes/prediction-comments";
+import { PredictionPositionsScene } from "../scenes/prediction-positions";
+
+export interface PredictionTabsProps {
+ defaultValue?: TabValue;
+ onTabClick?: (tab: TabValue) => void;
+}
+
+export function PredictionTabs({
+ defaultValue = "prediction-activity",
+ onTabClick,
+}: PredictionTabsProps) {
+ const order: TabValue[] = [
+ "prediction-activity",
+ "prediction-holders",
+ "prediction-comments",
+ "prediction-positions",
+ ];
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+ {username}
++ {description} +
+
+
+
+ + {balanceTokenAmount.toLocaleString()} +
+
+
+ + {earnTokenAmount.toLocaleString()} +
+
+
+
+
+ );
+}
diff --git a/client/src/components/scenes/prediction-activity.tsx b/client/src/components/scenes/prediction-activity.tsx
new file mode 100644
index 00000000..cebaf2c3
--- /dev/null
+++ b/client/src/components/scenes/prediction-activity.tsx
@@ -0,0 +1,18 @@
+import { PredictionActivityFeed } from "../prediction/activity-feed";
+
+const MOCKDATA = {
+ username: "fortunaragem",
+ total: 100,
+ itemName: "shinobi",
+ timestamp: "2 days ago",
+};
+
+export const PredictionActivityScene = () => {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+ {Array.from({ length: 5 }).map((_, index) => (
+
+ );
+};
diff --git a/client/src/components/scenes/prediction-comments.tsx b/client/src/components/scenes/prediction-comments.tsx
new file mode 100644
index 00000000..0fdc93e5
--- /dev/null
+++ b/client/src/components/scenes/prediction-comments.tsx
@@ -0,0 +1,81 @@
+import { Button, Input } from "@cartridge/ui";
+import { CommentRow, CommentRowProps } from "../prediction/comment-row";
+import { useCallback, useState } from "react";
+import { useUsername } from "@/hooks/account";
+import { useAddress } from "@/hooks/address";
+
+const MOCKDATA = [
+ {
+ name: "tedison",
+ comment: "clicksave's got it in the bag",
+ timestamp: "2s ago",
+ },
+ {
+ name: "glihm",
+ comment: "clicksave's got it in the bag",
+ timestamp: "2s ago",
+ },
+ {
+ name: "kariy",
+ comment: "clicksave's got it in the bag",
+ timestamp: "2s ago",
+ },
+ {
+ name: "ashe",
+ comment: "clicksave's got it in the bag",
+ timestamp: "2s ago",
+ },
+ {
+ name: "flipper",
+ comment: "clicksave's got it in the bag",
+ timestamp: "2s ago",
+ },
+] satisfies Array
+
+
+ {comments.map((comment, index) => (
+
+ );
+};
diff --git a/client/src/components/scenes/prediction-holders.tsx b/client/src/components/scenes/prediction-holders.tsx
new file mode 100644
index 00000000..f0209e87
--- /dev/null
+++ b/client/src/components/scenes/prediction-holders.tsx
@@ -0,0 +1,54 @@
+import { HolderLabel } from "../prediction/holder-label";
+import { HolderRow, THolders } from "../prediction/holder-row";
+
+const MOCKDATA = [
+ {
+ ownerName: "tedison",
+ shares: 100,
+ percentHeld: 20,
+ },
+ {
+ ownerName: "fortunaregem",
+ shares: 100,
+ percentHeld: 14,
+ },
+ {
+ ownerName: "bal7hazar",
+ shares: 100,
+ percentHeld: 12,
+ },
+ {
+ ownerName: "tarrence",
+ shares: 100,
+ percentHeld: 8,
+ },
+ {
+ ownerName: "raschel0x",
+ shares: 100,
+ percentHeld: 4,
+ },
+ {
+ ownerName: "load69",
+ shares: 100,
+ percentHeld: 2,
+ },
+ {
+ ownerName: "clicksave",
+ shares: 100,
+ percentHeld: 1,
+ },
+] satisfies Array
+
+ );
+};
diff --git a/client/src/components/scenes/prediction-positions.tsx b/client/src/components/scenes/prediction-positions.tsx
new file mode 100644
index 00000000..3e5aba66
--- /dev/null
+++ b/client/src/components/scenes/prediction-positions.tsx
@@ -0,0 +1,51 @@
+import { PositionsLabel } from "../prediction/positions-label";
+import { PredictionPositionCard } from "../prediction/positions-row";
+
+const MOCKDATA = [
+ {
+ description: "to win Season 1 of Blitz Eternum",
+
+ // User Info
+ username: "bal7hazar",
+ userAvatarClassName: "",
+
+ // Balance Token/Asset Info
+ balanceTokenIcon:
+ "https://imagedelivery.net/0xPAQaDtnQhBs8IzYRIlNg/a3bfe959-50c4-4f89-0aef-b19207d82a00/logo",
+ balanceTokenAmount: 902,
+
+ // To Earn Token/Asset Info
+ earnTokenIcon:
+ "https://imagedelivery.net/0xPAQaDtnQhBs8IzYRIlNg/a3bfe959-50c4-4f89-0aef-b19207d82a00/logo",
+ earnTokenAmount: 6300,
+ },
+ {
+ description: "to win Season 1 of Blitz Eternum",
+
+ // User Info
+ username: "clicksave",
+ userAvatarClassName: "",
+
+ // Balance Token/Asset Info
+ balanceTokenIcon:
+ "https://imagedelivery.net/0xPAQaDtnQhBs8IzYRIlNg/a3bfe959-50c4-4f89-0aef-b19207d82a00/logo",
+ balanceTokenAmount: 902,
+
+ // To Earn Token/Asset Info
+ earnTokenIcon:
+ "https://imagedelivery.net/0xPAQaDtnQhBs8IzYRIlNg/a3bfe959-50c4-4f89-0aef-b19207d82a00/logo",
+ earnTokenAmount: 6300,
+ },
+];
+
+export const PredictionPositionsScene = () => {
+ return (
+
+ {MOCKDATA.map((holder, index) => (
+
+
+
+ );
+};
diff --git a/client/src/hooks/project.ts b/client/src/hooks/project.ts
index 5782d2a8..af9c374f 100644
--- a/client/src/hooks/project.ts
+++ b/client/src/hooks/project.ts
@@ -34,7 +34,7 @@ export const useProject = () => {
tab: string;
}>();
- const [searchParams, _] = useSearchParams();
+ const [searchParams] = useSearchParams();
const filter = useMemo(() => {
return searchParams.get("filter");
diff --git a/client/src/main.tsx b/client/src/main.tsx
index fae9c2ef..c86e1bb5 100644
--- a/client/src/main.tsx
+++ b/client/src/main.tsx
@@ -17,6 +17,9 @@ createRoot(document.getElementById("root")!).render(