orders: improve visibility of unfillable orders

app/orders/columns.tsx

@@ -1,4 +1,4 @@
-import { OrderState, Token } from "@renegade-fi/react"
+import { OrderState, Token, useBackOfQueueWallet } from "@renegade-fi/react"
 import { ColumnDef, RowData } from "@tanstack/react-table"
 import { ChevronDown, ChevronUp, ChevronsUpDown } from "lucide-react"
 import { formatUnits } from "viem/utils"
@@ -105,12 +105,25 @@ export const columns: ColumnDef<ExtendedOrderMetadata>[] = [
  id: "status",
  accessorKey: "state",
  header: () => <div>Status</div>,
- cell: ({ row }) => {
- return (
- <div className="whitespace-nowrap">
- {formatOrderState[row.getValue<OrderState>("status")]}
- </div>
- )
+ cell: function Cell({ row }) {
+ const { data: isCapitalized } = useBackOfQueueWallet({
+ query: {
+ select: (data) =>
+ data.balances.some(
+ (balance) =>
+ balance.mint ===
+ (row.original.data.side === "Buy"
+ ? row.original.data.quote_mint
+ : row.original.data.base_mint) &&
+ balance.amount > BigInt(0),
+ ),
+ },
+ })
+ let status: string = formatOrderState[row.getValue<OrderState>("status")]
+ if (!isCapitalized && status === "Open") {
+ status = "Undercapitalized"
+ }
+ return <div className="whitespace-nowrap">{status}</div>
  },
  filterFn: (row, _, filterValue) => {
  if (filterValue === "open") {
@@ -259,7 +272,7 @@ export const columns: ColumnDef<ExtendedOrderMetadata>[] = [
  return row.fills.reduce((acc, fill) => acc + fill.amount, BigInt(0))
  },
  header: () => <div className="w-[100px]">Filled</div>,
- cell: ({ row }) => {
+ cell: function Cell({ row }) {
  const filledAmount = row.getValue<bigint>("filled")
  const totalAmount = row.getValue<bigint>("amount")
  const percentageFilled =
@@ -272,28 +285,43 @@ export const columns: ColumnDef<ExtendedOrderMetadata>[] = [
  Number(filledAmount),
  Number(totalAmount),
  )
- return (
- <>
- {!row.original.fills.length &&
- row.original.state !== OrderState.Cancelled ? (
- <div className="whitespace-nowrap">
- Finding counterparties
- <AnimatedEllipsis />
- </div>
- ) : (
- <div className="flex items-center justify-between gap-2">
- {percentageFilledNumber ? (
- <Progress value={percentageFilledNumber} />
- ) : (
- <></>
- )}
- <div className="ml-auto text-right text-sm">
- {percentageFilledLabel}
- </div>
+ const { data: isCapitalized } = useBackOfQueueWallet({
+ query: {
+ select: (data) =>
+ data.balances.some(
+ (balance) =>
+ balance.mint ===
+ (row.original.data.side === "Buy"
+ ? row.original.data.quote_mint
+ : row.original.data.base_mint) &&
+ balance.amount > BigInt(0),
+ ),
+ },
+ })
+ if (
+ row.original.fills.length ||
+ row.original.state === OrderState.Cancelled
+ ) {
+ return (
+ <div className="flex items-center justify-between gap-2">
+ {percentageFilledNumber ? (
+ <Progress value={percentageFilledNumber} />
+ ) : (
+ <></>
+ )}
+ <div className="ml-auto text-right text-sm">
+ {percentageFilledLabel}
  </div>
- )}
- </>
- )
+ </div>
+ )
+ } else if (isCapitalized) {
+ return (
+ <div className="whitespace-nowrap">
+ Finding counterparties
+ <AnimatedEllipsis />
+ </div>
+ )
+ }
  },
  },
  {

components/dialogs/order-stepper/desktop/new-order-stepper.tsx

@@ -1,19 +1,10 @@
 import * as React from "react"
 
-import { VisuallyHidden } from "@radix-ui/react-visually-hidden"
-
 import { NewOrderFormProps } from "@/app/trade/[base]/components/new-order/new-order-form"
 
 import { DefaultStep } from "@/components/dialogs/order-stepper/desktop/steps/default"
 import { SuccessStepWithoutSavings } from "@/components/dialogs/order-stepper/desktop/steps/success-without-savings"
-import {
- Dialog,
- DialogContent,
- DialogDescription,
- DialogHeader,
- DialogTitle,
- DialogTrigger,
-} from "@/components/ui/dialog"
+import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog"
 
 export interface NewOrderConfirmationProps extends NewOrderFormProps {
  onSuccess?: () => void

components/dialogs/order-stepper/desktop/steps/default.tsx

@@ -1,7 +1,12 @@
 import React from "react"
 
 import { VisuallyHidden } from "@radix-ui/react-visually-hidden"
-import { Token, UpdateType, useCreateOrder } from "@renegade-fi/react"
+import {
+ Token,
+ UpdateType,
+ useBackOfQueueWallet,
+ useCreateOrder,
+} from "@renegade-fi/react"
 import { Loader2 } from "lucide-react"
 import { toast } from "sonner"
 
@@ -14,9 +19,11 @@ import {
  NewOrderConfirmationProps,
  useStepper,
 } from "@/components/dialogs/order-stepper/desktop/new-order-stepper"
+import { TransferDialog } from "@/components/dialogs/transfer/transfer-dialog"
 import { TokenIcon } from "@/components/token-icon"
 import { Button } from "@/components/ui/button"
 import {
+ DialogClose,
  DialogDescription,
  DialogFooter,
  DialogHeader,
@@ -40,7 +47,7 @@ import { formatNumber, safeParseUnits } from "@/lib/format"
 import { decimalCorrectPrice } from "@/lib/utils"
 
 export function DefaultStep(props: NewOrderConfirmationProps) {
- const { onNext, setTaskId } = useStepper()
+ const { onNext, setTaskId, setOpen } = useStepper()
 
  const baseToken = Token.findByTicker(props.base)
  const quoteToken = Token.findByTicker("USDC")
@@ -76,6 +83,82 @@ export function DefaultStep(props: NewOrderConfirmationProps) {
  },
  })
 
+ const { data: hasBalances } = useBackOfQueueWallet({
+ query: {
+ select: (data) =>
+ data.balances.some((balance) => balance.amount > BigInt(0)),
+ },
+ })
+ const parsedAmount = safeParseUnits(props.amount, baseToken.decimals)
+ const formattedAmount = formatNumber(
+ parsedAmount instanceof Error ? BigInt(0) : parsedAmount,
+ baseToken.decimals,
+ true,
+ )
+
+ if (!hasBalances) {
+ return (
+ <>
+ <DialogHeader className="space-y-4 px-6 pt-6">
+ <DialogTitle className="font-extended">Funds Required</DialogTitle>
+ <VisuallyHidden>
+ <DialogDescription>
+ Deposit {props.isSell ? props.base : "USDC"} to place this order.
+ </DialogDescription>
+ </VisuallyHidden>
+ </DialogHeader>
+ <ScrollArea className="max-h-[70vh]">
+ <div className="space-y-6 p-6">
+ <div className="space-y-3">
+ <div className="text-muted-foreground">
+ {props.isSell ? "Sell" : "Buy"}
+ </div>
+ <div className="flex items-center justify-between">
+ <div className="font-serif text-3xl font-bold">
+ {formattedAmount} {props.base}
+ </div>
+ <TokenIcon ticker={props.base} />
+ </div>
+ </div>
+ <div className="space-y-3">
+ <div className="text-muted-foreground">
+ {props.isSell ? "For" : "With"}
+ </div>
+ <div className="flex items-center justify-between">
+ <div className="font-serif text-3xl font-bold">USDC</div>
+ <TokenIcon ticker="USDC" />
+ </div>
+ </div>
+ <Separator />
+ <div className="flex w-full items-center justify-center rounded-md bg-[#2A1700] p-3 text-center">
+ <div className="flex items-center gap-2">
+ <div className="h-2 w-2 rounded-full bg-[var(--color-yellow)]" />
+ <span className="text-sm text-orange-400">
+ You must fund your account before placing an order.
+ </span>
+ </div>
+ </div>
+ </div>
+ </ScrollArea>
+ <DialogFooter>
+ <TransferDialog
+ mint={props.isSell ? baseToken.address : quoteToken.address}
+ >
+ <Button
+ autoFocus
+ className="flex-1 border-x-0 border-b-0 border-t font-extended text-2xl"
+ size="xl"
+ variant="outline"
+ onClick={() => setOpen(false)}
+ >
+ Deposit {props.isSell ? props.base : "USDC"}
+ </Button>
+ </TransferDialog>
+ </DialogFooter>
+ </>
+ )
+ }
+
  return (
  <>
  <DialogHeader className="space-y-4 px-6 pt-6">