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>
+        )
+      }
     },
   },
   {

app/trade/[base]/components/new-order/deposit-warning.tsx

@@ -0,0 +1,56 @@
+import { Token, useBackOfQueueWallet, useStatus } from "@renegade-fi/react"
+import { AlertTriangle } from "lucide-react"
+
+import {
+  ResponsiveTooltip,
+  ResponsiveTooltipContent,
+  ResponsiveTooltipTrigger,
+} from "@/components/ui/responsive-tooltip"
+
+import { useMediaQuery } from "@/hooks/use-media-query"
+import { ORDER_FORM_DEPOSIT_WARNING } from "@/lib/constants/tooltips"
+import { cn } from "@/lib/utils"
+
+export function DepositWarning({
+  className,
+  ticker,
+}: {
+  className?: string
+  ticker: string
+}) {
+  const status = useStatus()
+  const isDesktop = useMediaQuery("(min-width: 1024px)")
+  const { data: hasBalances } = useBackOfQueueWallet({
+    query: {
+      select: (data) => {
+        const baseToken = Token.findByTicker(ticker)
+        const quoteToken = Token.findByTicker("USDC")
+        return data.balances.some(
+          (balance) =>
+            balance.amount > BigInt(0) &&
+            (balance.mint === baseToken.address ||
+              balance.mint === quoteToken.address),
+        )
+      },
+    },
+  })
+  if (hasBalances || status !== "in relayer") return null
+
+  return (
+    <div className="flex w-full items-center justify-center rounded-md bg-[#2A1700] p-3 text-center">
+      <ResponsiveTooltip>
+        <ResponsiveTooltipTrigger
+          onClick={(e) => isDesktop && e.preventDefault()}
+        >
+          <div className={cn("flex items-center gap-2", className)}>
+            <AlertTriangle className="h-4 w-4" />
+            <span>Insufficient funds to place orders</span>
+          </div>
+        </ResponsiveTooltipTrigger>
+        <ResponsiveTooltipContent>
+          <p>{ORDER_FORM_DEPOSIT_WARNING({ ticker })}</p>
+        </ResponsiveTooltipContent>
+      </ResponsiveTooltip>
+    </div>
+  )
+}

app/trade/[base]/components/new-order/new-order-form.tsx

@@ -1,14 +1,15 @@
 import * as React from "react"
 
 import { zodResolver } from "@hookform/resolvers/zod"
-import { Token, useStatus } from "@renegade-fi/react"
+import { Token, useBackOfQueueWallet, useStatus } from "@renegade-fi/react"
 import { ArrowRightLeft, ChevronDown } from "lucide-react"
 import { useForm } from "react-hook-form"
 import { z } from "zod"
 
 import { setBase, setIsUSDCDenominated } from "@/app/trade/[base]/actions"
 import { ConnectButton } from "@/app/trade/[base]/components/connect-button"
 import { AmountShortcutButton } from "@/app/trade/[base]/components/new-order/amount-shortcut-button"
+import { DepositWarning } from "@/app/trade/[base]/components/new-order/deposit-warning"
 import { FeesSection } from "@/app/trade/[base]/components/new-order/fees-sections"
 import { MaxOrdersWarning } from "@/app/trade/[base]/components/new-order/max-orders-warning"
 import { NoBalanceSlotWarning } from "@/app/trade/[base]/components/new-order/no-balance-slot-warning"
@@ -137,6 +138,21 @@ export function NewOrderForm({
     return unbind
   }, [form])
 
+  const { data: hasBalances } = useBackOfQueueWallet({
+    query: {
+      select: (data) => {
+        const baseToken = Token.findByTicker(base)
+        const quoteToken = Token.findByTicker("USDC")
+        return data.balances.some(
+          (balance) =>
+            balance.amount > BigInt(0) &&
+            (balance.mint === baseToken.address ||
+              balance.mint === quoteToken.address),
+        )
+      },
+    },
+  })
+
   function handleSubmit(values: z.infer<typeof formSchema>) {
     if (parseFloat(priceInUsd) < 1) {
       form.setError("amount", {
@@ -280,13 +296,21 @@ export function NewOrderForm({
           isSell={form.getValues("isSell")}
           ticker={base}
         />
+        <div>
+          <DepositWarning
+            className="text-sm text-orange-400"
+            ticker={base}
+          />
+        </div>
+
         {status === "in relayer" ? (
           <div className="hidden lg:block">
             <ResponsiveTooltip>
               <ResponsiveTooltipTrigger className="!pointer-events-auto w-full">
                 <Button
                   className="flex w-full font-serif text-2xl font-bold tracking-tighter lg:tracking-normal"
                   disabled={
+                    !hasBalances ||
                     !form.formState.isValid ||
                     isMaxOrders ||
                     (maintenanceMode?.enabled &&
@@ -352,6 +376,7 @@ export function NewOrderForm({
           <Button
             className="flex-1 font-extended text-lg"
             disabled={
+              !hasBalances ||
               !form.formState.isValid ||
               isMaxOrders ||
               (maintenanceMode?.enabled &&

lib/constants/tooltips.ts

@@ -27,3 +27,5 @@ export const TRANSFER_DIALOG_BRIDGE_TOOLTIP =
   "Renegade only supports deposits on the Arbitrum network."
 export const TRANSFER_DIALOG_L1_BALANCE_TOOLTIP =
   "Bridge to Arbitrum to deposit."
+export const ORDER_FORM_DEPOSIT_WARNING = ({ ticker }: { ticker: string }) =>
+  `Deposit ${ticker} or USDC to your wallet to place an order.`