diff --git a/ui/src/components/Actions.tsx b/ui/src/components/Actions.tsx index bccb7945..946dbf43 100644 --- 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 }) => { + 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 index d63c6250..4d05c45b 100644 --- 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 index 7ea4b1e1..a32b2727 100644 --- 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 ( <> @@ -31,7 +31,7 @@ const Home = () => { - + diff --git a/ui/src/redux/orders/orders.actions.ts b/ui/src/redux/orders/orders.actions.ts index a2ce9958..f521c71a 100644 --- 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