@orvui/vue 0.0.0-stage → 0.1.1

package/src/blocks/prediction-market/src/PredictionMarket.vue

@@ -0,0 +1,277 @@
+<script setup lang="ts">
+import { Banknote, ChevronDown } from "lucide-vue-next";
+import { cn } from "../../../lib/utils";
+import { StatefulButton } from "../../../motion/button";
+import { NumberTicker } from "../../../motion/number";
+import { Tabs, TabsList, TabsTrigger } from "../../../motion/tabs";
+import {
+  formatCents,
+  formatCompactCurrency,
+  formatCurrency,
+  parseAmount,
+} from "./utils";
+import { useMarketOrder } from "./use-market-order";
+import type { PredictionMarketClassNames } from "./source-types";
+import type {
+  PredictionMarketMode,
+  PredictionMarketOrderValue,
+  PredictionMarketOutcome,
+  PredictionMarketQuote,
+} from "./types";
+import AnimatedAmountInput from "./AnimatedAmountInput.vue";
+export type {
+  PredictionMarketMode,
+  PredictionMarketOrderValue,
+  PredictionMarketOutcome,
+  PredictionMarketQuote,
+} from "./types";
+const props = withDefaults(
+  defineProps<{
+    outcomes?: PredictionMarketOutcome[];
+    modelValue?: PredictionMarketOrderValue;
+    defaultValue?: Partial<PredictionMarketOrderValue>;
+    authenticated?: boolean;
+    orderTypeLabel?: string;
+    balance?: number;
+    positions?: Record<string, number>;
+    quickAmounts?: number[];
+    minTrade?: number;
+    classNames?: PredictionMarketClassNames;
+  }>(),
+  {
+    outcomes: () => [
+      { id: "up", label: "Up", price: 0.09 },
+      { id: "down", label: "Down", price: 0.91 },
+    ],
+    authenticated: true,
+    orderTypeLabel: "Market",
+    balance: 500,
+    positions: () => ({ up: 24, down: 16 }),
+    quickAmounts: () => [10, 50, 100, 500],
+    minTrade: 1,
+  },
+);
+const emit = defineEmits<{
+  "update:modelValue": [value: PredictionMarketOrderValue];
+  valueChange: [value: PredictionMarketOrderValue];
+  trade: [order: PredictionMarketOrderValue, quote: PredictionMarketQuote];
+  signIn: [];
+}>();
+const {
+  order,
+  selected,
+  quote,
+  reduce,
+  id,
+  amount,
+  status,
+  actionState,
+  inputSize,
+  payoutSize,
+  patch,
+  max,
+  submit,
+} = useMarketOrder(props, {
+  change(value) {
+    emit("update:modelValue", value);
+    emit("valueChange", value);
+  },
+  trade(order, quote) {
+    emit("trade", order, quote);
+  },
+  signIn() {
+    emit("signIn");
+  },
+});
+const isNo = (outcome: PredictionMarketOutcome) =>
+  ["no", "down"].includes(outcome.label.toLowerCase());
+</script>
+<template>
+  <div
+    :class="
+      cn(
+        'w-full max-w-[400px] overflow-hidden rounded-3xl border border-border bg-background',
+        classNames?.root,
+      )
+    "
+  >
+    <div :class="cn('border-b border-border/80 px-4 pt-4', classNames?.header)">
+      <div class="flex items-end justify-between gap-4">
+        <Tabs
+          :model-value="order.mode"
+          variant="underline"
+          :class="cn('shrink-0', classNames?.tabs)"
+          @update:model-value="
+            patch({ mode: $event as PredictionMarketMode, amount: '' })
+          "
+          ><TabsList class="gap-5 border-b-0 bg-transparent p-0"
+            ><TabsTrigger
+              v-for="mode in ['buy', 'sell'] as const"
+              :key="mode"
+              :value="mode"
+              class="px-0 pb-3 pt-0 text-2xl font-semibold"
+              indicator-class-name="h-0.5 bg-foreground"
+              >{{ mode === "buy" ? "Buy" : "Sell" }}</TabsTrigger
+            ></TabsList
+          ></Tabs
+        ><button
+          type="button"
+          :disabled="status === 'placing'"
+          class="mb-3 inline-flex items-center gap-2 text-xl font-semibold text-foreground transition-opacity disabled:opacity-50"
+        >
+          {{ orderTypeLabel }}<ChevronDown class="h-5 w-5" />
+        </button>
+      </div>
+    </div>
+    <div class="space-y-4 p-3">
+      <Tabs
+        :model-value="selected?.id"
+        variant="pill"
+        :class="classNames?.outcomes"
+        @update:model-value="patch({ outcomeId: $event })"
+        ><TabsList class="grid w-full grid-cols-2 gap-2 p-1.5"
+          ><TabsTrigger
+            v-for="outcome in outcomes"
+            :key="outcome.id"
+            :value="outcome.id"
+            :indicator-class-name="
+              isNo(outcome)
+                ? 'bg-red-500/10 dark:bg-red-500/15'
+                : 'bg-emerald-500/20'
+            "
+            :class="
+              cn(
+                'h-14 w-full rounded-[1.35rem] px-0 py-0 text-base font-semibold active:scale-[0.99]',
+                isNo(outcome)
+                  ? outcome.id === selected?.id
+                    ? 'text-red-300 dark:text-red-300'
+                    : 'text-red-300/55 dark:text-red-300/50'
+                  : outcome.id === selected?.id
+                    ? 'text-emerald-400 dark:text-emerald-300'
+                    : 'text-muted-foreground',
+              )
+            "
+            >{{ outcome.label }} {{ formatCents(outcome.price) }}</TabsTrigger
+          ></TabsList
+        ></Tabs
+      >
+      <div
+        ref="amount"
+        :class="cn('rounded-3xl bg-card p-4', classNames?.amount)"
+      >
+        <div
+          class="flex min-h-24 flex-col items-center justify-center gap-5 text-center"
+        >
+          <label :for="id" class="text-xl font-medium text-foreground mr-6">{{
+            order.mode === "buy" ? "Amount" : "Shares"
+          }}</label>
+          <div class="w-full min-w-0">
+            <AnimatedAmountInput
+              :id="id"
+              :mode="order.mode"
+              :value="order.amount"
+              :disabled="status === 'placing'"
+              :input-size="inputSize"
+              :reduce="reduce"
+              @change="patch({ amount: $event })"
+            />
+          </div>
+        </div>
+        <div
+          :class="
+            cn('mt-8 flex flex-wrap justify-center gap-2', classNames?.chips)
+          "
+        >
+          <button
+            v-for="increment in quickAmounts"
+            :key="increment"
+            type="button"
+            :disabled="status === 'placing'"
+            class="h-9 rounded-xl bg-background px-3.5 text-sm font-semibold text-foreground transition-[background-color,transform] duration-150 active:scale-95 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50"
+            @click="
+              patch({ amount: String(parseAmount(order.amount) + increment) })
+            "
+          >
+            +{{
+              order.mode === "buy"
+                ? formatCompactCurrency(increment)
+                : increment
+            }}</button
+          ><button
+            type="button"
+            :disabled="status === 'placing'"
+            class="h-9 rounded-xl bg-background px-3.5 text-sm font-semibold text-foreground transition-[background-color,transform] duration-150 active:scale-95 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50"
+            @click="max"
+          >
+            Max
+          </button>
+        </div>
+      </div>
+    </div>
+    <div
+      v-if="authenticated"
+      :class="cn('border-t border-border/80 px-4 py-4', classNames?.footer)"
+    >
+      <div class="mb-4 flex items-end justify-between gap-3">
+        <div class="min-w-0 shrink">
+          <div
+            class="flex items-center gap-2 text-xl font-semibold text-foreground"
+          >
+            {{ order.mode === "buy" ? "To win" : "To receive"
+            }}<Banknote class="h-5 w-5 text-emerald-500" />
+          </div>
+          <p class="text-sm font-medium text-muted-foreground">
+            Avg. Price {{ formatCents(quote.price) }}
+          </p>
+        </div>
+        <NumberTicker
+          :value="quote.payout * 100"
+          :start-on-view="false"
+          :duration="0.45"
+          :stagger="0"
+          blur
+          :class="
+            cn(
+              'ml-auto min-w-0 shrink-0 justify-end whitespace-nowrap text-right font-semibold leading-none tracking-tight text-emerald-500 tabular-nums transition-[font-size] duration-200',
+              payoutSize,
+            )
+          "
+          :format="(cents) => formatCurrency(cents / 100)"
+        />
+      </div>
+      <StatefulButton
+        :state="actionState"
+        variant="primary"
+        size="lg"
+        :press-scale="0.98"
+        loading-text="Trading"
+        success-text="Trade filled"
+        :error-text="quote.error ?? 'Enter an amount'"
+        :class="
+          cn(
+            'h-12 w-full rounded-2xl text-base font-semibold',
+            classNames?.action,
+          )
+        "
+        @click="submit"
+        >Trade</StatefulButton
+      >
+    </div>
+    <div v-else class="px-4 pb-5">
+      <StatefulButton
+        state="idle"
+        variant="primary"
+        size="lg"
+        :press-scale="0.98"
+        :class="
+          cn(
+            'h-14 w-full rounded-2xl text-base font-semibold',
+            classNames?.action,
+          )
+        "
+        @click="submit"
+        >Connect</StatefulButton
+      >
+    </div>
+  </div>
+</template>

package/src/blocks/prediction-market/src/PredictionMarketCard.vue

@@ -0,0 +1,212 @@
+<script setup lang="ts">
+import { computed, useId } from "vue";
+import { motion } from "motion-v";
+import { Bookmark } from "lucide-vue-next";
+import { cn } from "../../../lib/utils";
+import { Tooltip } from "../../../motion/tooltip";
+import { RenderNode, useControllable, type Content } from "../../shared";
+import { useReducedMotion } from "../../../lib/composables";
+import { EASE_OUT, SPRING_PRESS } from "../../../lib/ease";
+import { historyPoints, probability } from "./utils";
+import MarketOddsButton from "./MarketOddsButton.vue";
+export interface PredictionMarketCardOutcome {
+  id: string;
+  label: string;
+  probability: number;
+  icon?: Content;
+  color?: string;
+}
+export interface PredictionMarketCardSelection {
+  outcomeId: string;
+  side: "yes" | "no";
+}
+const props = withDefaults(
+  defineProps<{
+    title: string;
+    icon?: Content;
+    category?: string;
+    volume: string;
+    volumeHistory?: number[];
+    status?: string;
+    live?: boolean;
+    outcomes: PredictionMarketCardOutcome[];
+    bookmarked?: boolean;
+    defaultBookmarked?: boolean;
+  }>(),
+  {
+    bookmarked: undefined,
+    volumeHistory: () => [],
+    defaultBookmarked: false,
+    live: false,
+  },
+);
+const emit = defineEmits<{
+  outcomeClick: [selection: PredictionMarketCardSelection];
+  "update:bookmarked": [bookmarked: boolean];
+  bookmarkChange: [bookmarked: boolean];
+}>();
+const saved = useControllable(
+    () => props.bookmarked,
+    props.defaultBookmarked,
+    (value) => {
+      emit("update:bookmarked", value);
+      emit("bookmarkChange", value);
+    },
+  ),
+  reduce = useReducedMotion(),
+  titleId = useId(),
+  chartId = useId(),
+  points = computed(() => historyPoints(props.volumeHistory));
+</script>
+<template>
+  <article
+    :aria-labelledby="titleId"
+    class="flex h-full w-full min-w-0 flex-col overflow-hidden rounded-3xl bg-card text-foreground"
+  >
+    <header class="flex shrink-0 items-center gap-3 px-4 py-3">
+      <div
+        v-if="icon"
+        aria-hidden="true"
+        class="flex size-12 shrink-0 items-center justify-center overflow-hidden rounded-full border border-border bg-background text-foreground"
+      >
+        <RenderNode :node="icon" />
+      </div>
+      <div class="min-w-0 flex-1">
+        <h3
+          :id="titleId"
+          class="break-words font-display text-base font-medium leading-snug tracking-tight"
+        >
+          {{ title }}
+        </h3>
+        <p
+          class="mt-1 flex flex-wrap items-center gap-1.5 text-xs text-muted-foreground"
+        >
+          <span
+            v-if="status"
+            :class="
+              cn('inline-flex items-center gap-1.5', live && 'text-rose-500')
+            "
+            ><span
+              v-if="live"
+              aria-hidden="true"
+              class="size-1.5 rounded-full bg-current"
+            />{{ status }}</span
+          ><span v-if="status && category" aria-hidden="true">·</span
+          ><span v-if="category">{{ category }}</span>
+        </p>
+      </div>
+    </header>
+    <div
+      class="mx-2 mb-2 flex flex-1 flex-col rounded-3xl bg-background px-4 py-3"
+    >
+      <div class="flex flex-1 flex-col justify-center gap-3">
+        <div
+          v-for="(outcome, index) in outcomes"
+          :key="outcome.id"
+          class="space-y-1"
+        >
+          <div class="flex min-h-10 items-center gap-2">
+            <span
+              v-if="outcome.icon"
+              aria-hidden="true"
+              class="flex size-8 shrink-0 items-center justify-center overflow-hidden rounded-full bg-muted"
+              ><RenderNode :node="outcome.icon" /></span
+            ><span class="min-w-0 flex-1 break-words text-sm font-medium">{{
+              outcome.label
+            }}</span
+            ><Tooltip
+              content="Potential payout per $1 if this outcome wins, including your stake. Before fees; based on the displayed price."
+              class="w-44 whitespace-normal text-center leading-relaxed"
+              ><button
+                type="button"
+                :aria-label="`Potential payout for ${outcome.label}`"
+                class="shrink-0 rounded-md py-2 text-sm tabular-nums text-muted-foreground focus-visible:outline-2 focus-visible:outline-ring"
+              >
+                {{
+                  probability(outcome.probability) > 0
+                    ? `${(1 / probability(outcome.probability)).toFixed(1)}×`
+                    : "—"
+                }}
+              </button></Tooltip
+            ><MarketOddsButton
+              :positive="index % 2 === 0"
+              :outcome="outcome"
+              @click="
+                emit('outcomeClick', { outcomeId: outcome.id, side: 'yes' })
+              "
+            />
+          </div>
+          <div
+            aria-hidden="true"
+            class="h-0.5 w-24 overflow-hidden rounded-full"
+          >
+            <motion.div
+              :initial="false"
+              :animate="{ scaleX: probability(outcome.probability) }"
+              :transition="
+                reduce ? { duration: 0 } : { duration: 0.25, ease: EASE_OUT }
+              "
+              class="h-full origin-left rounded-full bg-emerald-300/70 dark:bg-emerald-400/40"
+              :style="
+                outcome.color ? { backgroundColor: outcome.color } : undefined
+              "
+            />
+          </div>
+        </div>
+      </div>
+      <footer
+        class="mt-2 flex shrink-0 items-center gap-2 text-xs text-muted-foreground"
+      >
+        <svg
+          v-if="points"
+          aria-hidden="true"
+          viewBox="0 0 48 22"
+          class="h-5 w-12 shrink-0 text-emerald-500 dark:text-emerald-400"
+          fill="none"
+        >
+          <defs>
+            <linearGradient :id="chartId" x1="0" y1="0" x2="0" y2="1">
+              <stop
+                offset="0%"
+                stop-color="currentColor"
+                :stop-opacity="0.22"
+              />
+              <stop offset="100%" stop-color="currentColor" :stop-opacity="0" />
+            </linearGradient>
+          </defs>
+          <polygon
+            :points="`2,22 ${points} 46,22`"
+            :fill="`url(#${chartId})`"
+          />
+          <polyline
+            :points="points"
+            stroke="currentColor"
+            :stroke-width="1.75"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          /></svg
+        ><span class="shrink-0">{{ volume }} vol.</span
+        ><motion.button
+          type="button"
+          :aria-label="`Bookmark ${title}`"
+          :aria-pressed="saved"
+          :while-press="reduce ? undefined : { scale: 0.85 }"
+          :transition="SPRING_PRESS"
+          :class="
+            cn(
+              'ml-auto flex size-9 shrink-0 items-center justify-center rounded-xl transition-colors hover:bg-muted focus-visible:outline-2 focus-visible:outline-ring',
+              saved && 'text-foreground',
+            )
+          "
+          @click="saved = !saved"
+          ><motion.span
+            :animate="{ scale: saved && !reduce ? [1, 1.2, 1] : 1 }"
+            :transition="{ duration: 0.22, ease: EASE_OUT }"
+            ><Bookmark
+              aria-hidden="true"
+              :class="cn('size-4', saved && 'fill-current')" /></motion.span
+        ></motion.button>
+      </footer>
+    </div>
+  </article>
+</template>

package/src/blocks/prediction-market/src/api-types.ts

@@ -0,0 +1,7 @@
+// Vue public prop types, derived from the actual components.
+export type PredictionMarketCardProps = InstanceType<
+  (typeof import("./PredictionMarketCard.vue"))["default"]
+>["$props"];
+export type PredictionMarketProps = InstanceType<
+  (typeof import("./PredictionMarket.vue"))["default"]
+>["$props"];

package/src/blocks/prediction-market/src/source-types.ts

@@ -0,0 +1,10 @@
+export type PredictionMarketClassNames = {
+  root?: string;
+  header?: string;
+  tabs?: string;
+  outcomes?: string;
+  amount?: string;
+  chips?: string;
+  footer?: string;
+  action?: string;
+};

package/src/blocks/prediction-market/src/types.ts

@@ -0,0 +1,22 @@
+export type PredictionMarketMode = "buy" | "sell";
+
+export type PredictionMarketOutcome = {
+  id: string;
+  label: string;
+  price: number;
+};
+
+export type PredictionMarketOrderValue = {
+  mode: PredictionMarketMode;
+  outcomeId: string;
+  amount: string;
+};
+
+export type PredictionMarketQuote = {
+  valid: boolean;
+  amount: number;
+  price: number;
+  shares: number;
+  payout: number;
+  error?: string;
+};

package/src/blocks/prediction-market/src/use-market-order.ts

@@ -0,0 +1,129 @@
+import { computed, onBeforeUnmount, ref, useId } from "vue";
+import { animate } from "motion-v";
+import { useControllable } from "../../shared";
+import { useReducedMotion } from "../../../lib/composables";
+import { EASE_OUT } from "../../../lib/ease";
+import { amountInputSize, buildQuote, payoutTickerSize } from "./utils";
+import type {
+  PredictionMarketOrderValue as Order,
+  PredictionMarketOutcome as Outcome,
+  PredictionMarketQuote as Quote,
+} from "./types";
+export function useMarketOrder(
+  props: {
+    modelValue?: Order;
+    defaultValue?: Partial<Order>;
+    outcomes: Outcome[];
+    positions: Record<string, number>;
+    balance: number;
+    minTrade: number;
+    authenticated: boolean;
+  },
+  events: {
+    change: (value: Order) => void;
+    trade: (order: Order, quote: Quote) => void;
+    signIn: () => void;
+  },
+) {
+  const order = useControllable(
+    () => props.modelValue,
+    {
+      mode: "buy" as const,
+      outcomeId: props.outcomes[0]?.id ?? "",
+      amount: "",
+      ...props.defaultValue,
+    },
+    events.change,
+  );
+  const selected = computed(
+    () =>
+      props.outcomes.find((outcome) => outcome.id === order.value.outcomeId) ??
+      props.outcomes[0],
+  );
+  const position = computed(
+    () => props.positions[selected.value?.id ?? ""] ?? 0,
+  );
+  const quote = computed(() =>
+    buildQuote({
+      order: order.value,
+      outcome: selected.value ?? { id: "", label: "", price: 0 },
+      balance: props.balance,
+      position: position.value,
+      minTrade: props.minTrade,
+    }),
+  );
+  const status = ref<"idle" | "placing" | "filled">("idle"),
+    reduce = useReducedMotion(),
+    id = useId(),
+    amount = ref<HTMLElement>();
+  const actionState = computed(() =>
+    status.value === "placing"
+      ? "loading"
+      : status.value === "filled"
+        ? "success"
+        : quote.value.valid
+          ? "idle"
+          : "error",
+  );
+  const inputSize = computed(() => amountInputSize(order.value.amount)),
+    payoutSize = computed(() => payoutTickerSize(quote.value.payout));
+  let timer: ReturnType<typeof setTimeout> | undefined,
+    shake: ReturnType<typeof animate> | undefined;
+  function patch(value: Partial<Order>) {
+    clearTimeout(timer);
+    status.value = "idle";
+    order.value = { ...order.value, ...value };
+  }
+  function max() {
+    patch({
+      amount:
+        order.value.mode === "buy"
+          ? String(Math.floor(props.balance))
+          : position.value.toFixed(position.value % 1 === 0 ? 0 : 2),
+    });
+  }
+  function submit() {
+    if (!props.authenticated) {
+      events.signIn();
+      return;
+    }
+    if (!quote.value.valid) {
+      if (amount.value && !reduce.value) {
+        shake?.stop();
+        shake = animate(
+          amount.value,
+          { x: [0, -5, 5, -3, 3, -1, 0] },
+          { duration: 0.38, ease: EASE_OUT },
+        );
+      }
+      return;
+    }
+    if (status.value === "placing") return;
+    status.value = "placing";
+    const payload = { ...order.value },
+      valuation = { ...quote.value };
+    timer = setTimeout(() => {
+      status.value = "filled";
+      events.trade(payload, valuation);
+    }, 650);
+  }
+  onBeforeUnmount(() => {
+    clearTimeout(timer);
+    shake?.stop();
+  });
+  return {
+    order,
+    selected,
+    quote,
+    reduce,
+    id,
+    amount,
+    status,
+    actionState,
+    inputSize,
+    payoutSize,
+    patch,
+    max,
+    submit,
+  };
+}