use toast in place order

trade.renegade.fi/components/place-order-button.tsx

@@ -1,13 +1,14 @@
 "use client"
 
+import { v4 as uuidv4 } from "uuid"
 import { useMemo } from "react"
 import { useExchange } from "@/contexts/Exchange/exchange-context"
 import { useOrder } from "@/contexts/Order/order-context"
 import { Direction } from "@/contexts/Order/types"
 import { useRenegade } from "@/contexts/Renegade/renegade-context"
 import { ArrowForwardIcon } from "@chakra-ui/icons"
 import { Button, useDisclosure } from "@chakra-ui/react"
-import { Exchange } from "@renegade-fi/renegade-js"
+import { Exchange, Order, OrderId } from "@renegade-fi/renegade-js"
 import { useAccount as useAccountWagmi } from "wagmi"
 
 import { findBalanceByTicker } from "@/lib/utils"
@@ -16,6 +17,8 @@ import { useButton } from "@/hooks/use-button"
 import { useIsLocked } from "@/hooks/use-is-locked"
 import { CreateStepper } from "@/components/steppers/create-stepper/create-stepper"
 import { OrderStepper } from "@/components/steppers/order-stepper/order-stepper"
+import { renegade } from "@/app/providers"
+import { toast } from "sonner"
 
 export function PlaceOrderButton() {
   const { address } = useAccountWagmi()
@@ -32,7 +35,14 @@ export function PlaceOrderButton() {
   } = useDisclosure()
   const { getPriceData } = useExchange()
   const isLocked = useIsLocked()
-  const { baseTicker, quoteTicker, baseTokenAmount, direction } = useOrder()
+  const {
+    base,
+    baseTicker,
+    baseTokenAmount,
+    direction,
+    quote,
+    quoteTicker,
+  } = useOrder()
   const { accountId } = useRenegade()
 
   const priceReport = getPriceData(Exchange.Median, baseTicker, quoteTicker)
@@ -43,6 +53,23 @@ export function PlaceOrderButton() {
     signInText: "Sign in to Place Orders",
   })
 
+  const handlePlaceOrder = async () => {
+    if (!accountId) return
+    const id = uuidv4() as OrderId
+    const order = new Order({
+      id,
+      baseToken: base,
+      quoteToken: quote,
+      side: direction,
+      type: "midpoint",
+      amount: BigInt(baseTokenAmount),
+    })
+    renegade.task
+      .modifyOrPlaceOrder(accountId, order)
+      .then(() => toast.info("Order task added to queue"))
+      .catch(() => toast.error("Error placing order, please try again"))
+  }
+
   const hasInsufficientBalance = useMemo(() => {
     const baseBalance = findBalanceByTicker(balances, baseTicker)
     const quoteBalance = findBalanceByTicker(balances, quoteTicker)
@@ -69,9 +96,8 @@ export function PlaceOrderButton() {
   } else if (hasInsufficientBalance) {
     placeOrderButtonContent = "Insufficient Balance"
   } else {
-    placeOrderButtonContent = `Place Order for ${
-      baseTokenAmount || ""
-    } ${baseTicker}`
+    placeOrderButtonContent = `Place Order for ${baseTokenAmount || ""
+      } ${baseTicker}`
   }
   const isDisabled =
     accountId && (!baseTokenAmount || hasInsufficientBalance || isLocked)
@@ -91,9 +117,9 @@ export function PlaceOrderButton() {
           isDisabled
             ? { backgroundColor: "transparent" }
             : {
-                borderColor: "white.60",
-                color: "white",
-              }
+              borderColor: "white.60",
+              color: "white",
+            }
         }
         transform={baseTokenAmount ? "translateY(10px)" : "translateY(-10px)"}
         visibility={baseTokenAmount ? "visible" : "hidden"}
@@ -109,7 +135,9 @@ export function PlaceOrderButton() {
           } else if (isDisabled) {
             return
           } else {
-            onOpenPlaceOrder()
+            // TODO: Make sure task gets added to history section
+            handlePlaceOrder()
+            // onOpenPlaceOrder()
           }
         }}
         rightIcon={<ArrowForwardIcon />}