Prediction Market

1"use client";
2// beui.dev/components/blocks/prediction-market
3 
4import { Banknote, ChevronDown } from "lucide-react";
5import {
6  AnimatePresence,
7  animate,
8  motion,
9  useReducedMotion,
10} from "motion/react";
11import {
12  useCallback,
13  useEffect,
14  useId,
15  useMemo,
16  useRef,
17  useState,
18  type CSSProperties,
19} from "react";
20import { EASE_OUT } from "@/lib/ease";
21import { cn } from "@/lib/utils";
22import { StatefulButton, type ButtonState } from "./button/stateful";
23import { NumberTicker } from "./number-ticker";
24import { Tabs, TabsList, TabsTrigger } from "./tabs";
25 
26export type PredictionMarketMode = "buy" | "sell";
27 
28export type PredictionMarketOutcome = {
29  id: string;
30  label: string;
31  price: number;
32};
33 
34export type PredictionMarketOrderValue = {
35  mode: PredictionMarketMode;
36  outcomeId: string;
37  amount: string;
38};
39 
40export type PredictionMarketQuote = {
41  valid: boolean;
42  amount: number;
43  price: number;
44  shares: number;
45  payout: number;
46  error?: string;
47};
48 
49export type PredictionMarketClassNames = {
50  root?: string;
51  header?: string;
52  tabs?: string;
53  outcomes?: string;
54  amount?: string;
55  chips?: string;
56  footer?: string;
57  action?: string;
58};
59 
60export interface PredictionMarketProps {
61  outcomes?: PredictionMarketOutcome[];
62  value?: PredictionMarketOrderValue;
63  defaultValue?: Partial<PredictionMarketOrderValue>;
64  onValueChange?: (value: PredictionMarketOrderValue) => void;
65  onTrade?: (
66    order: PredictionMarketOrderValue,
67    quote: PredictionMarketQuote,
68  ) => void;
69  onSignIn?: () => void;
70  authenticated?: boolean;
71  orderTypeLabel?: string;
72  balance?: number;
73  positions?: Record<string, number>;
74  quickAmounts?: number[];
75  minTrade?: number;
76  className?: string;
77  classNames?: PredictionMarketClassNames;
78}
79 
80const DEFAULT_OUTCOMES: PredictionMarketOutcome[] = [
81  { id: "up", label: "Up", price: 0.09 },
82  { id: "down", label: "Down", price: 0.91 },
83];
84 
85const MODES: { id: PredictionMarketMode; label: string }[] = [
86  { id: "buy", label: "Buy" },
87  { id: "sell", label: "Sell" },
88];
89 
90const DEFAULT_QUICK_AMOUNTS = [10, 50, 100, 500];
91const DIGIT_TRANSITION = { duration: 0.18, ease: EASE_OUT } as const;
92type AmountInputStyle = CSSProperties & { "--amount-chars": string };
93 
94function useControllableOrder({
95  value,
96  defaultValue,
97  outcomes,
98  onValueChange,
99}: {
100  value?: PredictionMarketOrderValue;
101  defaultValue?: Partial<PredictionMarketOrderValue>;
102  outcomes: PredictionMarketOutcome[];
103// … truncated