wip(webapp): place orders

bitcashorg · Feb 8, 2024 · 7454403 · 7454403
1 parent 6a2ce8d
commit 7454403
Show file tree

Hide file tree

Showing 5 changed files with 89 additions and 48 deletions.
diff --git a/apps/webapp/components/auction/auction-bids.tsx b/apps/webapp/components/auction/auction-bids.tsx
@@ -7,45 +7,54 @@ import {
   TableBody,
   Table
 } from '@/components/ui/table'
+import { useDepositAndPlaceOrder } from '@/hooks/use-place-order'
 import { ProjectWithAuction } from '@/lib/projects'
+import { toSmallestUnit } from '@/lib/utils'
 import { useState } from 'react'
 
 export function AuctionBids({ project }: AuctionBidsProps) {
-  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault()
-    // Form submission logic
+  const { placeOrder, data, isPending, error } = useDepositAndPlaceOrder()
+  console.log('AuctionBids', { data, isPending, error })
+  const handleSubmit = () => {
+    placeOrder({
+      auctionId: project.auctionId,
+      minBuyAmounts: [toSmallestUnit(1, 6).toNumber()],
+      prevSellOrders: [],
+      allowListCallData: '',
+      value: toSmallestUnit(1, 6).toString()
+    })
   }
 
   return (
     <div>
-      <form >
-        <Table>
-          <TableHeader>
-            <TableRow>
-              <TableHead className="bg-red-600">Max Price</TableHead>
-              <TableHead className="bg-green-600">Bid Amount</TableHead>
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead className="bg-red-600">Max Price</TableHead>
+            <TableHead className="bg-green-600">Bid Amount</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {[...Array(5)].map((_, index) => (
+            <TableRow key={index}>
+              <TableCell className="bg-green-500">
+                <CurrencyInput placeholder="0.00" name={`maxPrice${index}`} />
+              </TableCell>
+              <TableCell className="bg-green-500">
+                <CurrencyInput placeholder="0.00" name={`tokens${index}`} />
+              </TableCell>
             </TableRow>
-          </TableHeader>
-          <TableBody>
-            {[...Array(5)].map((_, index) => (
-              <TableRow key={index}>
-                <TableCell className="bg-green-500">
-                  <CurrencyInput placeholder="0.00" name={`maxPrice${index}`} />
-                </TableCell>
-                <TableCell className="bg-green-500">
-                  <CurrencyInput placeholder="0.00" name={`tokens${index}`} />
-                </TableCell>
-              </TableRow>
-            ))}
-          </TableBody>
-        </Table>
-        <button
-          type="submit"
-          className="w-full px-4 py-2 mt-4 font-bold text-white bg-blue-500 rounded hover:bg-blue-700"
-        >
-          Submit Bids
-        </button>
-      </form>
+          ))}
+        </TableBody>
+      </Table>
+      <button
+        onClick={() => handleSubmit()}
+        type="submit"
+        className="w-full px-4 py-2 mt-4 font-bold text-white bg-blue-500 rounded hover:bg-blue-700"
+      >
+        Submit Bids
+      </button>
+
       <div className="mt-4">
         <p>{textValues.currentBid}</p>
         <p>{textValues.currentCost}</p>

diff --git a/apps/webapp/components/auction/auction-debug.tsx b/apps/webapp/components/auction/auction-debug.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import { AuctionData, useAuctionData } from '@/hooks/use-auction-data'
-import { isAddress } from 'viem'
+import { hexToNumber, isAddress, isHex } from 'viem'
 
 export function AuctionDebug({ auctionId }: { auctionId: number }) {
   const { data: auction } = useAuctionData(auctionId)
@@ -27,14 +27,19 @@ const formatTokenAmount = (amount = '', decimals = 6) => {
 
 const convertToYamlText = (data: AuctionData): JSX.Element[] => {
   return Object.entries(data).map(([key, value]) => {
+    // console.log(key, value)
     if (value instanceof Date) {
       value = value.toLocaleString()
     } else if (
       typeof value === 'string' &&
-      !isNaN(Number(value)) &&
-      !isAddress(value)
+      // !isNaN(Number(value)) &&
+      !isAddress(value) &&
+      !isHex(value)
     ) {
       value = formatTokenAmount(value)
+    } else if (isHex(value) && !isAddress(value)) {
+      console.log('isHex', key, value)
+      value = hexToNumber(value)
     }
 
     return isAddress(value) ? (

diff --git a/apps/webapp/hooks/use-auction-data.ts b/apps/webapp/hooks/use-auction-data.ts
@@ -13,6 +13,7 @@ export function useAuctionData(auctionId: number) {
   })
 
   const data = rawData ? mapArrayToAuctionData(rawData) : undefined
+  Array.isArray(rawData) && console.log('initialAuctionOrder', rawData[4])
 
   return { data, isError, isLoading }
 }
@@ -25,7 +26,7 @@ function mapArrayToAuctionData(data: unknown): AuctionData | undefined {
     biddingToken: data[1],
     orderCancellationEndDate: new Date(Number(data[2]) * 1000),
     auctionEndDate: new Date(Number(data[3]) * 1000),
-    initialAuctionOrder: data[4],
+    initialAuctionOrder: data[4].toString(),
     minimumBiddingAmountPerOrder: data[5].toString(),
     interimSumBidAmount: data[6].toString(),
     interimOrder: data[7],

diff --git a/apps/webapp/hooks/use-place-order.ts b/apps/webapp/hooks/use-place-order.ts
@@ -9,20 +9,30 @@ interface DepositAndPlaceOrderParams {
   value: string // Amount of USD Cred to send in the transaction
 }
 
-export function useDepositAndPlaceOrder({
-  auctionId,
-  minBuyAmounts,
-  prevSellOrders,
-  allowListCallData,
-  value
-}: DepositAndPlaceOrderParams) {
-  // const write = useWriteContract({
-  //   ...TestnetDepositOrder,
-  //   functionName: 'depositAndPlaceOrder',
-  //   args: [auctionId, minBuyAmounts, prevSellOrders, allowListCallData]
-  // })
+export function useDepositAndPlaceOrder() {
+  const { writeContract, ...tanstack } = useWriteContract()
+  console.log('tanstack', tanstack)
 
-  const placeOrder = () => {}
+  const placeOrder = async ({
+    auctionId,
+    minBuyAmounts,
+    prevSellOrders,
+    allowListCallData,
+    value
+  }: DepositAndPlaceOrderParams) => {
+    console.log('placing order....', {
+      auctionId,
+      minBuyAmounts,
+      prevSellOrders,
+      allowListCallData,
+      value
+    })
+    writeContract({
+      ...TestnetDepositOrder,
+      functionName: 'depositAndPlaceOrder',
+      args: [auctionId, minBuyAmounts, prevSellOrders, allowListCallData]
+    })
+  }
 
-  return { data: [], isError: false, isLoading: false, placeOrder }
+  return { ...tanstack, placeOrder }
 }
diff --git a/apps/webapp/lib/utils.ts b/apps/webapp/lib/utils.ts
@@ -2,6 +2,7 @@ import { clsx, type ClassValue } from 'clsx'
 import { customAlphabet } from 'nanoid'
 import { twMerge } from 'tailwind-merge'
 import { Address } from 'viem'
+import BN from 'bn.js'
 
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs))
@@ -78,3 +79,18 @@ export function formatAddress(address: Address) {
     return address
   }
 }
+
+// Function to convert token amount to its smallest unit, considering the token's decimals
+export function toSmallestUnit(
+  value: string | number,
+  decimals: number = 18
+): BN {
+  // Create a BN instance for the base (10)
+  const ten = new BN(10)
+  // Create a BN instance for the number of decimals the token uses
+  const base = ten.pow(new BN(decimals))
+  // Convert the human-readable amount to a base unit amount
+  const amountInBaseUnit = new BN(value).mul(base)
+
+  return amountInBaseUnit
+}