Merge pull request #104 from casesandberg/fix/9-19-tweaks

9/19 Tweaks

packages/api-helpers/client/index.ts

@@ -232,7 +232,7 @@ export async function getMarketComments({
  return apiHandler<{ comments: Array<CommentWithReactions> }>(
  `${process.env.NEXT_PUBLIC_API_URL}/v1/markets/${marketId}/comments`,
  {
- next: { tags: ['comments'] },
+ next: { tags: [`${marketId}:comments`] },
  }
  )
 }

packages/comments/components/CommentItem.tsx

@@ -30,6 +30,7 @@ import { EmojiPicker, EmojiReactionList } from '@play-money/ui/emoji'
 import { toast } from '@play-money/ui/use-toast'
 import { cn } from '@play-money/ui/utils'
 import { UserLink } from '@play-money/users/components/UserLink'
+import { formatDistanceToNowShort } from '../../ui/src/helpers'
 import { CreateCommentForm } from './CreateCommentForm'
 
 export function CommentItem({
@@ -84,19 +85,19 @@ export function CommentItem({
  <div
  id={comment.id}
  className={cn(
- isHighlighted && 'bg-primary/10 ring-2 ring-primary ring-offset-2 dark:ring-offset-black',
+ isHighlighted && 'bg-primary/10 ring-2 ring-primary ring-offset-2 ring-offset-background',
  'group flex flex-row gap-4 rounded-md px-6 py-2 hover:bg-muted/50',
  (isReplyOpen || isPortalOpen) && 'bg-muted/50'
  )}
  >
  <UserAvatar user={comment.author} className="mt-2" />
 
  <Collapsible open={isReplyOpen} onOpenChange={setIsReplyOpen} className="w-full">
- <div className="flex flex-row items-center gap-4">
+ <div className="flex flex-row items-center gap-2">
  <UserLink user={comment.author} className="truncate" hideUsername />
 
  <div className="flex-shrink-0 text-sm text-muted-foreground">
- {formatDistance(comment.createdAt, new Date(), { addSuffix: true })}
+ {formatDistanceToNowShort(comment.createdAt)}
  </div>
 
  {comment.edited && <div className="flex-shrink-0 text-sm text-muted-foreground">(edited)</div>}

packages/comments/components/CommentsList.tsx

@@ -80,7 +80,7 @@ export function CommentsList({
  onEdit={handleEdit(comment.id)}
  onDelete={handleDelete(comment.id)}
  />
- <div className="ml-12">
+ <div className="ml-6 sm:ml-12">
  {comment.replies.map((reply) => (
  <CommentItem
  key={reply.id}

packages/comments/components/CreateCommentForm.tsx

@@ -48,7 +48,7 @@ export function CreateCommentForm({
  return (
  <Form {...form}>
  <form onSubmit={form.handleSubmit(handleSubmit)} className="space-y-4">
- <Card className="focus-within:ring-2 focus-within:ring-primary focus-within:ring-offset-2">
+ <Card className="ring-offset-background focus-within:ring-2 focus-within:ring-primary focus-within:ring-offset-2">
  <FormField
  control={form.control}
  name="content"

packages/comments/components/EditorExtensions.tsx

@@ -96,7 +96,7 @@ export function MentionChip(props: NodeViewProps) {
  return user ? (
  <NodeViewWrapper
  as={props.editor.isEditable ? 'span' : Link}
- className="inline-flex items-center gap-1 rounded-md border border-primary bg-primary/10 px-1 font-normal text-primary-foreground"
+ className="inline-flex items-center gap-1 rounded-md border border-primary bg-primary/10 px-1 font-normal text-primary-foreground dark:text-secondary-foreground"
  href={`/${user.username}`}
  style={{ verticalAlign: 'text-bottom', lineHeight: 1.1, textDecoration: 'none' }}
  >

packages/markets/components/CreateMarketForm.stories.ts

@@ -9,4 +9,19 @@ const meta = {
 export default meta
 type Story = StoryObj<typeof meta>
 
-export const Default: Story = {}
+export const Default: Story = {
+ args: {
+ colors: [
+ '#f44336',
+ '#f44336',
+ '#f44336',
+ '#f44336',
+ '#f44336',
+ '#f44336',
+ '#f44336',
+ '#f44336',
+ '#f44336',
+ '#f44336',
+ ],
+ },
+}

packages/markets/components/CreateMarketForm.tsx

@@ -33,23 +33,14 @@ const CREATE_MARKET_FORM_KEY = 'create-market-form'
 
 const COLORS = [
  '#f44336',
- '#e91e63',
  '#9c27b0',
- '#673ab7',
  '#3f51b5',
  '#2196f3',
- '#03a9f4',
- '#00bcd4',
  '#009688',
- '#4caf50',
  '#8bc34a',
- '#cddc39',
- '#ffeb3b',
  '#ffc107',
  '#ff9800',
- '#ff5722',
  '#795548',
- '#9e9e9e',
  '#607d8b',
 ]
 
@@ -66,8 +57,14 @@ const marketCreateFormSchema = MarketSchema.pick({
 )
 type MarketCreateFormValues = z.infer<typeof marketCreateFormSchema>
 
-export function CreateMarketForm({ onSuccess }: { onSuccess?: () => Promise<void> }) {
- const [SHUFFLED_COLORS] = useState(_.shuffle(COLORS))
+export function CreateMarketForm({
+ colors = COLORS,
+ onSuccess,
+}: {
+ colors?: Array<string>
+ onSuccess?: () => Promise<void>
+}) {
+ const [SHUFFLED_COLORS] = useState(_.shuffle(colors))
  const router = useRouter()
  const tzName = /\((?<tz>[A-Za-z\s].*)\)/.exec(new Date().toString())?.groups?.tz ?? null
 

packages/markets/components/MarketComments.tsx

@@ -8,7 +8,7 @@ export async function MarketComments({ marketId }: { marketId: string }) {
 
  const handleRevalidate = async () => {
  'use server'
- revalidateTag('comments')
+ revalidateTag(`${marketId}:comments`)
  }
 
  return <CommentsList comments={comments} entity={{ type: 'MARKET', id: marketId }} onRevalidate={handleRevalidate} />

packages/markets/components/MarketGraph.tsx

@@ -5,6 +5,7 @@ import { LineChart, Line, ResponsiveContainer, YAxis, XAxis, CartesianGrid, Tool
 import { useMarketGraph } from '@play-money/api-helpers/client/hooks'
 import { Card } from '@play-money/ui/card'
 import { ExtendedMarket } from '../types'
+import { formatProbability } from './MarketProbabilityDetail'
 
 function CustomizedXAxisTick({ x, y, payload }: { x: number; y: number; payload: { value: string } }) {
  return (
@@ -30,7 +31,10 @@ function CustomizedYAxisTick({ x, y, payload }: { x: number; y: number; payload:
 
 export function MarketGraph({ market, activeOptionId }: { market: ExtendedMarket; activeOptionId: string }) {
  const { data: graph } = useMarketGraph({ marketId: market.id })
- const activeOptionIndex = market.options.findIndex((o) => o.id === activeOptionId)
+ const createdOrderOptions = market.options.sort(
+ (a, b) => new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime()
+ )
+ const activeOptionIndex = createdOrderOptions.findIndex((o) => o.id === activeOptionId)
 
  return (
  <Card className="h-40">
@@ -44,11 +48,16 @@ export function MarketGraph({ market, activeOptionId }: { market: ExtendedMarket
  return (
  <Card className="p-1 font-mono text-xs">
  <div>{format(data.startAt, 'MMM d, yyyy')}</div>
- {market.options.map((option, i) => (
- <div key={option.id} style={{ color: option.color }}>
- {option.name}: {data.options[i].probability}%
- </div>
- ))}
+ {createdOrderOptions.map((option, i) => {
+ const dataOption = data.options.find(
+ (o: { id: string; proability: number }) => o.id === option.id
+ )
+ return (
+ <div key={option.id} style={{ color: option.color }}>
+ {option.name}: {formatProbability(dataOption.probability)}
+ </div>
+ )
+ })}
  </Card>
  )
  }
@@ -75,7 +84,7 @@ export function MarketGraph({ market, activeOptionId }: { market: ExtendedMarket
  tick={CustomizedYAxisTick}
  tickFormatter={(value, i) => (value !== 0 && value !== 100 ? `${value}%` : '')}
  />
- {market.options.map((option, i) => (
+ {createdOrderOptions.map((option, i) => (
  <Line
  key={option.id}
  type="step"
@@ -92,8 +101,13 @@ export function MarketGraph({ market, activeOptionId }: { market: ExtendedMarket
  <Line
  type="step"
  dot={false}
- dataKey={(data) => data.options[activeOptionIndex].probability}
- stroke={market.options[activeOptionIndex].color}
+ dataKey={(data) => {
+ const activeOption = data.options.find(
+ (option: { id: string; proability: number }) => option.id === activeOptionId
+ )
+ return activeOption.probability
+ }}
+ stroke={createdOrderOptions[activeOptionIndex].color}
  strokeWidth={2.5}
  strokeLinejoin="round"
  animationDuration={750}

packages/markets/components/MarketPageSidebar.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import React from 'react'
-import { isMarketResolved } from '../lib/helpers'
+import { isMarketResolved, isMarketTradable } from '../lib/helpers'
 import { ExtendedMarket } from '../types'
 import { MarketTradePanel } from './MarketTradePanel'
 import { RelatedMarkets } from './RelatedMarkets'
@@ -19,6 +19,7 @@ export function MarketPageSidebar({
  <div className="space-y-8">
  <MarketTradePanel
  market={market}
+ isTradable={isMarketTradable(market)}
  isResolved={isMarketResolved(market)}
  activeOptionId={activeOptionId}
  onTradeComplete={onTradeComplete}

packages/markets/components/MarketProbabilityDetail.tsx

@@ -3,7 +3,7 @@ import { MarketOption } from '@play-money/database'
 import { Progress } from '@play-money/ui/progress'
 import { cn } from '@play-money/ui/utils'
 
-function formatProbability(probability: number | null) {
+export function formatProbability(probability: number | null) {
  if (probability === null) {
  return ''
  }

packages/markets/components/MarketTradePanel.tsx

@@ -1,5 +1,6 @@
 'use client'
 
+import { CircleOffIcon } from 'lucide-react'
 import React from 'react'
 import { mutate } from 'swr'
 import {
@@ -8,7 +9,6 @@ import {
  MY_BALANCE_PATH,
  useMarketBalance,
 } from '@play-money/api-helpers/client/hooks'
-import { CurrencyDisplay } from '@play-money/finance/components/CurrencyDisplay'
 import { useSearchParam } from '@play-money/ui'
 import { Card, CardContent, CardHeader } from '@play-money/ui/card'
 import { Combobox } from '@play-money/ui/combobox'
@@ -23,11 +23,13 @@ import { useSidebar } from './SidebarContext'
 
 export function MarketTradePanel({
  market,
+ isTradable = true,
  isResolved = false,
  activeOptionId,
  onTradeComplete,
 }: {
  market: ExtendedMarket
+ isTradable?: boolean
  isResolved: boolean
  activeOptionId: string
  onTradeComplete?: () => void
@@ -53,7 +55,7 @@ export function MarketTradePanel({
 
  return (
  <div className="space-y-4">
- {!isResolved ? (
+ {isTradable ? (
  <Card className={cn(effect && 'animate-slide-in-right')} onAnimationEnd={resetEffect}>
  <Tabs defaultValue="buy">
  <CardHeader className="flex items-start bg-muted md:p-3">
@@ -88,6 +90,11 @@ export function MarketTradePanel({
  </CardContent>
  </Tabs>
  </Card>
+ ) : !isResolved ? (
+ <Card className="flex flex-col items-center justify-center gap-4 p-4 sm:h-64">
+ <CircleOffIcon className="size-8 stroke-[1.5px] text-muted-foreground" />
+ <div className="text-balance text-center text-sm uppercase text-muted-foreground">Trading closed</div>
+ </Card>
  ) : (
  <MarketLeaderboardPanel market={market} />
  )}

packages/markets/lib/getMarketTransactionsTimeSeries.ts

@@ -129,7 +129,7 @@ export async function getMarketTransactionsTimeSeries({
  endAt: bucket.endAt,
  options: bucket.options.map((option) => ({
  id: option.id,
- probability: option.probability.toNumber(),
+ probability: Decimal.max(option.probability, 0).toNumber(),
  })),
  }))
 

packages/markets/lib/helpers.ts

@@ -7,7 +7,7 @@ export function canResolveMarket({ market, userId }: { market: Market; userId?:
 
 export function isMarketTradable(market: Market): boolean {
  const now = new Date()
- return !market.resolvedAt && (!market.closeDate || market.closeDate > now)
+ return !market.resolvedAt && (!market.closeDate || new Date(market.closeDate) > now)
 }
 
 export function isMarketResolved(market: ExtendedMarket): boolean {

packages/ui/src/components/UserAvatar.tsx

@@ -8,6 +8,7 @@ const userAvatarVariants = cva('', {
  default: 'h-8 w-8',
  sm: 'h-4 w-4',
  lg: 'h-16 w-16',
+ xl: 'h-32 w-32',
  },
  },
  defaultVariants: {
@@ -29,7 +30,7 @@ export function UserAvatar({
  <Avatar className={cn(userAvatarVariants({ size, className }))}>
  <AvatarImage
  alt={`@${user.username}`}
- className={cn(imgClassName)}
+ className={cn('object-cover', imgClassName)}
  src={user.avatarUrl ?? `https://api.dicebear.com/8.x/initials/svg?seed=${user.username}&scale=75`}
  />
  <AvatarFallback />

packages/ui/src/components/ui/badge.tsx

@@ -3,7 +3,7 @@ import * as React from 'react'
 import { cn } from '../../lib/utils'
 
 const badgeVariants = cva(
- 'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+ 'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 ring-offset-background',
  {
  variants: {
  variant: {

packages/ui/src/components/ui/editor.tsx

@@ -85,7 +85,7 @@ function Editor({
  useEffect(
  function handleResetEdgeCase() {
  // Fix for react-hook-form resetting the value to '<p></p>' when the form is reset
- if (editor && value === '<p></p>' && value !== editor.getHTML()) {
+ if (editor && value && value !== editor.getHTML()) {
  editor.commands.setContent(value)
  }
  },

packages/ui/src/helpers.ts

@@ -15,6 +15,7 @@ export function formatDistanceToNowShort(date: Date | number): string {
  .replace(/\sminutes?/, 'm')
  .replace(/\sseconds?/, 's')
  .replace(/^in\s?/, '')
+ .replace(/^about\s?/, '')
  .replace(/\sago/, '')
  .trim()
 }

packages/users/components/SettingsProfileForm.tsx

@@ -85,6 +85,7 @@ export function SettingsProfileForm({
  <Avatar className="size-32">
  <AvatarImage
  alt={`@${user?.username}`}
+ className="object-cover"
  src={value || `https://api.dicebear.com/8.x/initials/svg?seed=${user?.username}&scale=75`}
  />
  <AvatarFallback />

packages/users/lib/getUserTotalTimeSeries.ts

@@ -114,11 +114,11 @@ export async function getUserTotalTimeSeries({
  bucket.balance = bucket.balance.add(entry.amount)
 
  if (entry.transaction.type === 'LIQUIDITY_WITHDRAWAL' || entry.transaction.type === 'LIQUIDITY_RETURNED') {
- bucket.liquidity = bucket.liquidity.sub(entry.amount)
+ bucket.liquidity = Decimal.max(bucket.liquidity.sub(entry.amount), 0) // Stop negative numbers
  }
 
  if (entry.transaction.type === 'TRADE_SELL' || entry.transaction.type === 'TRADE_WIN') {
- bucket.markets = bucket.markets.sub(entry.amount)
+ bucket.markets = Decimal.max(bucket.markets.sub(entry.amount), 0) // Stop negative numbers
  }
  }
  })