transfer dialog: pay fees and render withdraw toast

app/components/task-toaster.tsx

@@ -20,57 +20,32 @@ import {
  isWithdrawTask,
 } from "@/lib/task"
 
-const DURATION_MS = 15_000 // 15 seconds
-
 export function TaskToaster() {
- const toastTimers = React.useRef<Map<string, NodeJS.Timeout>>(new Map())
  const seenStates = React.useRef<Map<string, string>>(new Map())
 
- const scheduleToastDismissal = React.useCallback((id: string) => {
- if (toastTimers.current.has(id)) {
- clearTimeout(toastTimers.current.get(id)!)
- }
- const timer = setTimeout(() => {
- toast.dismiss(id)
- toastTimers.current.delete(id)
- seenStates.current.delete(id)
- }, DURATION_MS)
- toastTimers.current.set(id, timer)
- }, [])
-
- React.useEffect(() => {
- const timers = toastTimers.current
- return () => {
- timers.forEach(clearTimeout)
- }
- }, [])
-
  useTaskHistoryWebSocket({
  onUpdate(task) {
  const currentState = `${task.id}-${task.state}`
  if (seenStates.current.get(task.id) === currentState) return
  seenStates.current.set(task.id, currentState)
 
  if (isWithdrawTask(task)) {
- processWithdrawTask(task, scheduleToastDismissal)
+ processWithdrawTask(task)
  } else if (
  isDepositTask(task) ||
  isPlaceOrderTask(task) ||
  isCancelOrderTask(task) ||
  isRefreshWalletTask(task)
  ) {
- processTask(task, scheduleToastDismissal)
+ processTask(task)
  }
  },
  })
 
  return null
 }
 
-function processTask(
- incomingTask: Task,
- scheduleToastDismissal: (id: string) => void,
-) {
+function processTask(incomingTask: Task) {
  const state = formatTaskState(incomingTask.state)
  const id = incomingTask.id
 
@@ -101,38 +76,48 @@ function processTask(
  icon: <Loader2 className="h-4 w-4 animate-spin text-black" />,
  })
  }
-
- scheduleToastDismissal(id)
 }
 
-function processWithdrawTask(
- incomingTask: Task,
- scheduleToastDismissal: (id: string) => void,
-) {
+function processWithdrawTask(incomingTask: Task) {
  if (isWithdrawTask(incomingTask)) {
  const state = formatTaskState(incomingTask.state)
  const id = incomingTask.id
 
  if (incomingTask.state === "Completed") {
  const message = generateCompletionToastMessage(incomingTask)
- toast.success(message, { id, description: state, icon: undefined })
+ toast.success(message, {
+ id,
+ description: state,
+ icon: undefined,
+ duration: 10000,
+ })
  } else if (incomingTask.state === "Failed") {
  const message = generateFailedToastMessage(incomingTask)
- toast.error(message, { id, icon: undefined })
+ toast.error(message, { id, icon: undefined, duration: 10000 })
  } else if (incomingTask.state === "Updating Validity Proofs") {
  const message = generateCompletionToastMessage(incomingTask)
- toast.success(message, { id, description: "Completed", icon: undefined })
+ toast.success(message, {
+ id,
+ description: "Completed",
+ icon: undefined,
+ duration: 10000,
+ })
  } else if (incomingTask.state === "Proving") {
- return
+ const message = generateStartToastMessage(incomingTask)
+ toast.success(message, {
+ id,
+ description: state,
+ icon: <Loader2 className="h-4 w-4 animate-spin text-black" />,
+ duration: 10000,
+ })
  } else {
  const message = generateStartToastMessage(incomingTask)
  toast.success(message, {
  id,
  description: state,
  icon: <Loader2 className="h-4 w-4 animate-spin text-black" />,
+ duration: 10000,
  })
  }
-
- scheduleToastDismissal(id)
  }
 }

components/dialogs/transfer/transfer-dialog.tsx

@@ -4,7 +4,13 @@ import { usePathname, useRouter } from "next/navigation"
 
 import { zodResolver } from "@hookform/resolvers/zod"
 import { VisuallyHidden } from "@radix-ui/react-visually-hidden"
-import { Token, UpdateType, useBalances, usePayFees } from "@renegade-fi/react"
+import {
+ Token,
+ UpdateType,
+ useBackOfQueueWallet,
+ useBalances,
+ usePayFees,
+} from "@renegade-fi/react"
 import { QueryClient, useQueryClient } from "@tanstack/react-query"
 import { Loader2 } from "lucide-react"
 import { useForm, useWatch } from "react-hook-form"
@@ -95,12 +101,22 @@ export function TransferDialog({
 
  const { payFees } = usePayFees()
  const feeOnZeroBalance = useFeeOnZeroBalance()
+ const { data: numFees } = useBackOfQueueWallet({
+ query: {
+ select: (data) =>
+ data.balances.filter(
+ (balance) =>
+ balance.protocol_fee_balance || balance.relayer_fee_balance,
+ ).length,
+ },
+ })
 
  React.useEffect(() => {
- if (open && feeOnZeroBalance) {
+ if (!open) return
+ if (feeOnZeroBalance || (numFees ?? 0) > 2) {
  payFees()
  }
- }, [open, payFees, feeOnZeroBalance])
+ }, [feeOnZeroBalance, numFees, open, payFees])
 
  if (isDesktop) {
  return (