Order creation and fetching completed (lite)

mehranhydary · Sep 10, 2024 · 580f7bf · 580f7bf
1 parent ca2866a
commit 580f7bf
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 10 deletions.
diff --git a/ui/src/components/Actions.tsx b/ui/src/components/Actions.tsx
@@ -1,10 +1,10 @@
 import { toast } from 'react-toastify'
 import styled from 'styled-components'
 
-const Actions = () => {
-	const onCreateOrderClick = () => {
+const Actions = ({ createOrder }: { createOrder: () => Promise<void> }) => {
+	const onCreateOrderClick = async () => {
 		console.log('Create order button clicked')
-
+		await createOrder()
 		toast.success('Order created')
 		// Add further logic to handle order creation here
 	}

diff --git a/ui/src/hooks/useOrders.ts b/ui/src/hooks/useOrders.ts
@@ -1,6 +1,10 @@
-import { useEffect } from 'react'
+import { useCallback, useEffect } from 'react'
 import { useDispatch, useSelector } from '@/redux/hooks'
-import { fetchOrdersAction, selectOrders } from '@/redux/orders'
+import {
+	createOrderAction,
+	fetchOrdersAction,
+	selectOrders,
+} from '@/redux/orders'
 
 export const useOrders = () => {
 	const dispatch = useDispatch()
@@ -10,5 +14,9 @@ export const useOrders = () => {
 		dispatch(fetchOrdersAction({}))
 	}, [dispatch])
 
-	return orders
+	const createOrder = useCallback(async () => {
+		await dispatch(createOrderAction({}))
+	}, [dispatch])
+
+	return { orders, createOrder }
 }
diff --git a/ui/src/pages/index.tsx b/ui/src/pages/index.tsx
@@ -9,7 +9,7 @@ import OrderTable from '@/components/OrderTable'
 import { useOrders } from '@/hooks/useOrders'
 
 const Home = () => {
-	const orders = useOrders()
+	const { orders, createOrder } = useOrders()
 	return (
 		<>
 			<Head>
@@ -31,7 +31,7 @@ const Home = () => {
 					<SellBox />
 					<BuyBox />
 				</SwapBox>
-				<Actions />
+				<Actions createOrder={createOrder} />
 				<OrderTable orders={orders} />
 			</Container>
 		</>

diff --git a/ui/src/redux/orders/orders.actions.ts b/ui/src/redux/orders/orders.actions.ts
@@ -1,6 +1,5 @@
 import { gql } from '@apollo/client'
 import { createAsyncThunk } from '@reduxjs/toolkit'
-import GET_ORDERS from '@/graphql/queries/getOrders.operator.graphql'
 import { GetOrders, GetOrdersVariables } from '@/types/operator'
 import { getGraphQLClient } from '@/graphql'
 
@@ -65,7 +64,21 @@ export const createOrderAction = createAsyncThunk(
 					}
 				}
 			`,
-			variables,
+			variables: {
+				input: {
+					trader: '0x071D9fe61cE306AEF04b7889780f889f444D7BF7',
+					tickToSellAt: 197949,
+					tokenInput: '0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48',
+					inputAmount: null,
+					outputAmount: '1',
+					tokenA: '0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48',
+					tokenB: '0x0000000000000000000000000000000000000000',
+					fee: '500',
+					tickSpacing: 10,
+					hooks: '0x0000000000000000000000000000000000000000',
+					permit2Signature: '',
+				},
+			},
 		})
 
 		return response.data.createOrder