trade: use ERC20 decimals

trade.renegade.fi/app/(desktop)/[base]/[quote]/deposit.tsx

@@ -72,15 +72,15 @@ function DepositInner() {
               }}
               _placeholder={{ color: "whiteAlpha.400" }}
               outline="none !important"
-              onChange={(e) => setBaseTokenAmount(e.target.value)}
+              onChange={setBaseTokenAmount}
               onFocus={(e) =>
                 e.target.addEventListener("wheel", (e) => e.preventDefault(), {
                   passive: false,
                 })
               }
               placeholder="0.00"
               type="number"
-              value={baseTokenAmount || ""}
+              value={baseTokenAmount}
             />
             <HStack userSelect="none" onClick={onOpenTokenMenu}>
               <Text variant="trading-body-button">{baseTicker}</Text>
@@ -109,4 +109,4 @@ export function DepositBody() {
       <DepositInner />
     </DepositProvider>
   )
-}
+}

trade.renegade.fi/app/(desktop)/[base]/[quote]/trading.tsx

@@ -1,16 +1,15 @@
 "use client"
 
-import React, { createRef, useEffect, useRef, useState } from "react"
 import { OrderProvider, useOrder } from "@/contexts/Order/order-context"
 import { Direction } from "@/contexts/Order/types"
 import { ChevronDownIcon } from "@chakra-ui/icons"
 import { Flex, HStack, Input, Text, useDisclosure } from "@chakra-ui/react"
+import React, { createRef, useEffect, useRef, useState } from "react"
 
-import { useUSDPrice } from "@/hooks/use-usd-price"
 import { BlurredOverlay } from "@/components/modals/blurred-overlay"
 import { TokenSelectModal } from "@/components/modals/token-select-modal"
 import { PlaceOrderButton } from "@/components/place-order-button"
-import { toast } from "sonner"
+import { useUSDPrice } from "@/hooks/use-usd-price"
 
 interface SelectableProps {
   text: string
@@ -128,22 +127,12 @@ function TradingInner() {
               }}
               _placeholder={{ color: "whiteAlpha.400" }}
               outline="none !important"
-              onChange={(e) => setBaseTokenAmount(parseFloat(e.target.value))}
+              onChange={setBaseTokenAmount}
               onFocus={(e) =>
                 e.target.addEventListener("wheel", (e) => e.preventDefault(), {
                   passive: false,
                 })
               }
-              onKeyPress={(e) => {
-                if (e.key === ".") {
-                  toast.error("Please try again using an integer value", {
-                    description: "Decimal values are not allowed.",
-                  });
-                  e.preventDefault();
-                } else if (e.key === "-") {
-                  e.preventDefault();
-                }
-              }}
               placeholder="0.00"
               type="number"
               value={baseTokenAmount || ""}
@@ -208,4 +197,4 @@ function HelperText({ baseTicker }: { baseTicker: string }) {
       </Text>
     </HStack>
   )
-}
+}

trade.renegade.fi/app/api/fund/route.ts

@@ -13,9 +13,9 @@ import { privateKeyToAccount } from "viem/accounts"
 
 import { stylusDevnetEc2 } from "@/lib/chain"
 
+// TODO: Make sure mint works
 const abi = parseAbi([
-  "function transfer(address to, uint256 amount) returns (bool)",
-  "event Transfer(address indexed from, address indexed to, uint256 amount)",
+  "function mint(address _address, uint256 value) external"
 ])
 
 export async function GET(request: Request) {
@@ -52,7 +52,7 @@ export async function GET(request: Request) {
 
     const ethAmount = parseEther("0.1")
     const wethAmount = parseEther("10")
-    const usdcAmount = parseUnits("10000", 18)
+    const usdcAmount = parseUnits("100000", 18)
 
     const transactionCount = await publicClient.getTransactionCount({
       address: account.address,
@@ -79,7 +79,7 @@ export async function GET(request: Request) {
       account,
       address: Token.findAddressByTicker("WETH") as `0x${string}`,
       abi,
-      functionName: "transfer",
+      functionName: "mint",
       args: [recipient, wethAmount],
       nonce: transactionCount + 1,
     })
@@ -100,7 +100,7 @@ export async function GET(request: Request) {
       account,
       address: Token.findAddressByTicker("USDC") as `0x${string}`,
       abi,
-      functionName: "transfer",
+      functionName: "mint",
       args: [recipient, usdcAmount],
       nonce: transactionCount + 2,
     })

trade.renegade.fi/components/panels/orders-panel.tsx

@@ -1,6 +1,5 @@
 "use client"
 
-import React, { useMemo } from "react"
 import { useApp } from "@/contexts/App/app-context"
 import { useRenegade } from "@/contexts/Renegade/renegade-context"
 import { LockIcon, SmallCloseIcon, UnlockIcon } from "@chakra-ui/icons"
@@ -9,15 +8,16 @@ import { Order, OrderId, Token } from "@renegade-fi/renegade-js"
 import { useModal as useModalConnectKit } from "connectkit"
 import dayjs from "dayjs"
 import relativeTime from "dayjs/plugin/relativeTime"
+import React, { useMemo } from "react"
 import SimpleBar from "simplebar-react"
 import { toast } from "sonner"
 
-import { safeLocalStorageGetItem } from "@/lib/utils"
-import { GlobalOrder, useGlobalOrders } from "@/hooks/use-global-orders"
-import { useOrders } from "@/hooks/use-order"
+import { renegade } from "@/app/providers"
 import { Panel, expandedPanelWidth } from "@/components/panels/panels"
 import { LocalOrder } from "@/components/steppers/order-stepper/steps/confirm-step"
-import { renegade } from "@/app/providers"
+import { GlobalOrder, useGlobalOrders } from "@/hooks/use-global-orders"
+import { useOrders } from "@/hooks/use-order"
+import { formatAmount, safeLocalStorageGetItem } from "@/lib/utils"
 
 import "simplebar-react/dist/simplebar.min.css"
 
@@ -200,7 +200,7 @@ function OrdersPanel(props: OrdersPanelProps) {
           ({ amount, baseToken, orderId, quoteToken, side }) => (
             <Box key={orderId} width="100%">
               <SingleOrder
-                amount={amount.toString()}
+                amount={formatAmount(amount, baseToken)}
                 baseAddr={baseToken.address}
                 id={orderId}
                 quoteAddr={quoteToken.address}
@@ -288,7 +288,6 @@ function OrderBookPanel() {
       >
         {Object.values(globalOrders).map((counterpartyOrder) => {
           const title = formatTitle(orders, counterpartyOrder)
-          // const status = formatStatus(orders, counterpartyOrder, savedOrders)
           const status =
             counterpartyOrder.id in orders
               ? "ACTIVE"
@@ -432,7 +431,11 @@ const formatTitle = (orders: Record<OrderId, Order>, order: GlobalOrder) => {
       `0x${orders[order.id].quoteToken.address}`
     )
     const side = orders[order.id].side === "buy" ? "Buy" : "Sell"
-    return `${side} ${orders[order.id].amount} ${baseTicker} for ${quoteTicker}`
+    const formattedAmount = formatAmount(
+      orders[order.id].amount,
+      new Token({ address: orders[order.id].baseToken.address })
+    )
+    return `${side} ${formattedAmount} ${baseTicker} for ${quoteTicker}`
   }
   return `Unknown order hash: ${order.id.split("-")[0].toString()}`
 }
@@ -459,4 +462,4 @@ const formatTitle = (orders: Record<OrderId, Order>, order: GlobalOrder) => {
 
 //   // Default case for other states
 //   return counterpartyOrder.state.toUpperCase()
-// }
+// }

trade.renegade.fi/components/panels/wallets-panel.tsx

@@ -19,7 +19,7 @@ import { useModal as useModalConnectKit } from "connectkit"
 import SimpleBar from "simplebar-react"
 import { useAccount, useAccount as useAccountWagmi } from "wagmi"
 
-import { formatAmount } from "@/lib/utils"
+import { formatAmount, parseAmount } from "@/lib/utils"
 import { useBalance } from "@/hooks/use-balance"
 import { useTasks } from "@/hooks/use-tasks"
 import { useUSDPrice } from "@/hooks/use-usd-price"
@@ -33,7 +33,7 @@ import { toast } from "sonner"
 interface TokenBalanceProps {
   tokenAddr: string
   userAddr?: string
-  amount: string
+  amount: bigint
 }
 function TokenBalance(props: TokenBalanceProps) {
   const { tokenIcons } = useApp()
@@ -42,10 +42,19 @@ function TokenBalance(props: TokenBalanceProps) {
   const { accountId } = useRenegade()
   const { address } = useAccount()
 
+  const formattedAmount = formatAmount(
+    props.amount,
+    new Token({ address: props.tokenAddr })
+  )
   const ticker = Token.findTickerByAddress(`${props.tokenAddr}`)
-  const usdPrice = useUSDPrice(ticker, Number(props.amount))
+  const usdPrice = useUSDPrice(
+    ticker,
+    parseFloat(
+      formatAmount(props.amount, new Token({ address: props.tokenAddr }))
+    )
+  )
 
-  const isZero = props.amount === "0"
+  const isZero = props.amount === BigInt(0)
 
   return (
     <Flex
@@ -74,7 +83,7 @@ function TokenBalance(props: TokenBalanceProps) {
           lineHeight="1"
           opacity={isZero ? "40%" : undefined}
         >
-          {props.amount.toString()} {ticker}
+          {formattedAmount} {ticker}
         </Text>
         <Box
           color="white.40"
@@ -101,13 +110,9 @@ function TokenBalance(props: TokenBalanceProps) {
         cursor="pointer"
         onClick={() => {
           if (accountId && address) {
+            const token = new Token({ address: props.tokenAddr })
             renegade.task
-              .withdraw(
-                accountId,
-                new Token({ address: props.tokenAddr }),
-                BigInt(1),
-                address
-              )
+              .withdraw(accountId, token, parseAmount("1", token), address)
               .then(() =>
                 toast.message(
                   `Started to withdraw 1 ${Token.findTickerByAddress(
@@ -186,20 +191,19 @@ function RenegadeWalletPanel(props: RenegadeWalletPanelProps) {
   const balances = useBalance()
   const { accountId } = useRenegade()
 
-  const formattedBalances = useMemo(() => {
-    const nonzero = Object.entries(balances).map(([_, b]) => [
-      b.mint.address,
-      formatAmount(b.amount, new Token({ address: b.mint.address })),
-    ])
-    const placeholders = tokenMappings.tokens
+  const formattedBalances = useMemo<Array<[string, bigint]>>(() => {
+    const wethAddress = Token.findAddressByTicker("WETH").replace("0x", "")
+    const usdcAddress = Token.findAddressByTicker("USDC").replace("0x", "")
+
+    const nonzero: Array<[string, bigint]> = Object.entries(balances).map(
+      ([_, b]) => [b.mint.address, b.amount]
+    )
+    const placeholders: Array<[string, bigint]> = tokenMappings.tokens
       .filter((t) => !nonzero.some(([a]) => `0x${a}` === t.address))
-      .map((t) => [t.address.replace("0x", ""), "0"])
+      .map((t) => [t.address.replace("0x", ""), BigInt(0)])
 
     const combined = [...nonzero, ...placeholders]
 
-    const wethAddress = Token.findAddressByTicker("WETH").replace("0x", "")
-    const usdcAddress = Token.findAddressByTicker("USDC").replace("0x", "")
-
     combined.sort((a, b) => {
       if (a[0] === wethAddress) return -1
       if (b[0] === wethAddress) return 1

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

@@ -1,24 +1,24 @@
 "use client"
 
-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, Order, OrderId } from "@renegade-fi/renegade-js"
+import { useMemo } from "react"
 import { toast } from "sonner"
 import { v4 as uuidv4 } from "uuid"
 import { useAccount as useAccountWagmi } from "wagmi"
 
-import { findBalanceByTicker, safeLocalStorageGetItem, safeLocalStorageSetItem } from "@/lib/utils"
-import { useBalance } from "@/hooks/use-balance"
-import { useButton } from "@/hooks/use-button"
+import { renegade } from "@/app/providers"
 import { CreateStepper } from "@/components/steppers/create-stepper/create-stepper"
 import { OrderStepper } from "@/components/steppers/order-stepper/order-stepper"
-import { renegade } from "@/app/providers"
 import { LocalOrder } from "@/components/steppers/order-stepper/steps/confirm-step"
+import { useBalance } from "@/hooks/use-balance"
+import { useButton } from "@/hooks/use-button"
+import { findBalanceByTicker, formatAmount, parseAmount, safeLocalStorageGetItem, safeLocalStorageSetItem } from "@/lib/utils"
 
 export function PlaceOrderButton() {
   const { address } = useAccountWagmi()
@@ -42,22 +42,18 @@ export function PlaceOrderButton() {
     onOpenSignIn,
     signInText: "Sign in to Place Orders",
   })
-  const timestampMap = useMemo(() => {
-    const o = safeLocalStorageGetItem("timestampMap")
-    const parsed = o ? JSON.parse(o) : {}
-    return parsed
-  }, [])
 
   const handlePlaceOrder = async () => {
     if (!accountId) return
     const id = uuidv4() as OrderId
+    const parsedAmount = parseAmount(baseTokenAmount, base)
     const order = new Order({
       id,
       baseToken: base,
       quoteToken: quote,
       side: direction,
       type: "midpoint",
-      amount: BigInt(baseTokenAmount),
+      amount: parsedAmount,
     })
     renegade.task
       .placeOrder(accountId, order)
@@ -78,8 +74,6 @@ export function PlaceOrderButton() {
           `order-details-${accountId}`,
           JSON.stringify(newO)
         )
-        timestampMap[id] = order.timestamp
-        safeLocalStorageSetItem("timestampMap", JSON.stringify(timestampMap))
       })
       .then(() =>
         toast.message(
@@ -94,21 +88,15 @@ export function PlaceOrderButton() {
   }
 
   const hasInsufficientBalance = useMemo(() => {
-    const baseBalance = findBalanceByTicker(balances, baseTicker)
-    const quoteBalance = findBalanceByTicker(balances, quoteTicker)
+    const baseBalance = findBalanceByTicker(balances, baseTicker).amount
+    const quoteBalance = findBalanceByTicker(balances, quoteTicker).amount
+    const price = priceReport?.midpointPrice ? priceReport.midpointPrice * parseFloat(baseTokenAmount) : 0
     if (direction === Direction.SELL) {
-      return baseBalance.amount < baseTokenAmount
+      return baseBalance < parseAmount(baseTokenAmount, base)
     }
-    if (!priceReport?.midpointPrice) return false
-    return quoteBalance.amount < priceReport?.midpointPrice
-  }, [
-    balances,
-    baseTicker,
-    baseTokenAmount,
-    direction,
-    priceReport?.midpointPrice,
-    quoteTicker,
-  ])
+    // TODO: Check this
+    return parseFloat(formatAmount(quoteBalance, quote)) < price
+  }, [balances, base, baseTicker, baseTokenAmount, direction, priceReport?.midpointPrice, quote, quoteTicker])
 
   const isSignedIn = accountId !== undefined
   let placeOrderButtonContent: string
@@ -156,9 +144,7 @@ export function PlaceOrderButton() {
           } else if (isDisabled) {
             return
           } else {
-            // TODO: Make sure task gets added to history section
             handlePlaceOrder()
-            // onOpenPlaceOrder()
           }
         }}
         rightIcon={<ArrowForwardIcon />}
@@ -169,4 +155,4 @@ export function PlaceOrderButton() {
       {placeOrderIsOpen && <OrderStepper onClose={onClosePlaceOrder} />}
     </>
   )
-}
+}