order form: prevent order placement if no base or quote token balance

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.`