Fix 0x orders refresh

packages/diva-app/src/Models/orderbook.ts

@@ -22,7 +22,7 @@ export interface OrderbookPriceRequest {
   poolInfo: PoolInfoType[]
 }
 
-interface OrderbookPriceResponse {
+export interface OrderbookPriceResponse {
   order?: {
     maker: string // maker address of order
     taker: string // taker address of order

packages/diva-app/src/Redux/TradeOption.ts

@@ -1,11 +1,12 @@
 import { createSlice, PayloadAction } from '@reduxjs/toolkit'
+import { OrderbookPriceResponse } from '../Models/orderbook'
 
 interface TradeOptionState {
   allOptions: []
   allOptionsLiquidity: []
   userAccount: string
-  responseBuy: []
-  responseSell: []
+  responseBuy: OrderbookPriceResponse[]
+  responseSell: OrderbookPriceResponse[]
   optionSellOrdersTotal: number
   optionBuyOrdersTotal: number
 }
@@ -24,11 +25,17 @@ export const tradeOptionSlice = createSlice({
   name: 'option',
   initialState,
   reducers: {
-    setResponseBuy: (state, action: PayloadAction<[]>) => {
+    setResponseBuy: (
+      state,
+      action: PayloadAction<OrderbookPriceResponse[]>
+    ) => {
       state.responseBuy = action.payload
     },
 
-    setResponseSell: (state, action: PayloadAction<[]>) => {
+    setResponseSell: (
+      state,
+      action: PayloadAction<OrderbookPriceResponse[]>
+    ) => {
       state.responseSell = action.payload
     },
 

packages/diva-app/src/component/Trade/CreateOrder.tsx

@@ -1,23 +1,17 @@
 import React, { useState, useEffect } from 'react'
 import 'styled-components'
-import styled from 'styled-components'
-import { makeStyles } from '@mui/styles'
 import Tabs from '@mui/material/Tabs'
 import Tab from '@mui/material/Tab'
-import {
-  setMetamaskAccount,
-  setResponseBuy,
-  setResponseSell,
-} from '../../Redux/TradeOption'
+import { setResponseBuy, setResponseSell } from '../../Redux/TradeOption'
 import { get0xOpenOrders } from '../../DataService/OpenOrders'
 import { Pool } from '../../lib/queries'
 import { useDispatch } from 'react-redux'
 import { getUnderlyingPrice } from '../../lib/getUnderlyingPrice'
-import { useAppSelector } from '../../Redux/hooks'
 import { Card, useTheme } from '@mui/material'
 import BuyOrder from './Orders/BuyOrder'
 import { TabContext, TabPanel } from '@mui/lab'
 import SellOrder from './Orders/SellOrder'
+import { OrderbookPriceResponse } from '../../Models/orderbook'
 
 export default function CreateOrder(props: {
   option: Pool
@@ -26,22 +20,15 @@ export default function CreateOrder(props: {
   chainId: number
   provider: any
 }) {
-  //const op = useSelector((state) => state.tradeOption.option)
   const option = props.option
   const dispatch = useDispatch()
-  /* const classes = useStyles() */
   const theme = useTheme()
-  /* const dividerClass = useDividerStyle()
-  const tabsClass = useTabsBorder() */
   const [value, setValue] = useState('buyorder')
-  const [orderType, setOrderTypeValue] = useState(0)
-  const [priceType, setPriceTypeValue] = useState(0)
   const [usdPrice, setUsdPrice] = useState('')
-  let responseBuy = useAppSelector((state) => state.tradeOption.responseBuy)
-  let responseSell = useAppSelector((state) => state.tradeOption.responseSell)
+
   useEffect(() => {
     getExistingOrders()
-  }, [orderType, priceType])
+  }, [])
 
   const handleChange = (event: any, newValue: string) => {
     setValue(newValue)
@@ -74,14 +61,14 @@ export default function CreateOrder(props: {
 
   const getExistingOrders = async () => {
     //updates orders components
-    responseSell = await get0xOpenOrders(
+    const responseSell: OrderbookPriceResponse[] = await get0xOpenOrders(
       props.tokenAddress,
       option.collateralToken.id,
       props.chainId,
       props.provider,
       props.exchangeProxy
     )
-    responseBuy = await get0xOpenOrders(
+    const responseBuy: OrderbookPriceResponse[] = await get0xOpenOrders(
       option.collateralToken.id,
       props.tokenAddress,
       props.chainId,
@@ -98,15 +85,18 @@ export default function CreateOrder(props: {
 
   useEffect(() => {
     getUnderlyingPrice(option.referenceAsset).then((data) => {
+      console.log('data', data)
       if (data != null || data != undefined) {
         setUsdPrice(data)
       } else {
         //handle undefined object return
-        console.warn('Please handle me i am undefined')
+        console.warn('Please handle me, I am undefined')
       }
     })
   }, [option.referenceAsset])
 
+  // @todo Card component seems redundant here. Moving Tabs into TabPanel components seems to achieve
+  // the same outcome with a bit of additional styling
   return (
     <>
       <TabContext value={value}>

packages/diva-app/src/component/Trade/Orders/BuyOrder.tsx

@@ -148,8 +148,6 @@ const BuyOrder = (props: {
   const dispatch = useAppDispatch()
   const params: { tokenType: string } = useParams()
   const isLong = window.location.pathname.split('/')[2] === 'long'
-  let responseBuy = useAppSelector((state) => state.tradeOption.responseBuy)
-  const responseSell = useAppSelector((state) => state.tradeOption.responseSell)
 
   useEffect(() => {
     const init = async () => {
@@ -401,10 +399,19 @@ const BuyOrder = (props: {
     }
   }
 
-  // This will fetch the SELL LIMIT orders to perform the BUY MARKET operation
+  // Get SELL LIMIT orders which the user is going to fill during the BUY MARKET operation
   const getSellLimitOrders = async () => {
     const orders: any = []
-    responseSell.forEach((data: any) => {
+
+    const rSell: any = await get0xOpenOrders(
+      takerToken, // position token
+      makerToken, // collateral token
+      props.chainId,
+      props.provider,
+      props.exchangeProxy
+    )
+
+    rSell.forEach((data: any) => {
       const order = JSON.parse(JSON.stringify(data.order))
 
       const takerAmount = BigNumber.from(order.takerAmount) // collateral token
@@ -435,18 +442,16 @@ const BuyOrder = (props: {
   // TODO: Outsource this function into OpenOrders.ts, potentially integrate into getUserOrders function
   const getTotalBuyLimitOrderAmountUser = async (maker) => {
     let existingOrdersAmount = ZERO
-    if (responseBuy.length == 0) {
-      // Double check whether any limit orders exist
-      const rBuy: any = await get0xOpenOrders(
-        makerToken,
-        takerToken,
-        props.chainId,
-        props.provider,
-        props.exchangeProxy
-      )
-      responseBuy = rBuy
-    }
-    responseBuy.forEach((data: any) => {
+
+    const rBuy: any = await get0xOpenOrders(
+      makerToken, // collateral token
+      takerToken, // position token
+      props.chainId,
+      props.provider,
+      props.exchangeProxy
+    )
+
+    rBuy.forEach((data: any) => {
       const order = data.order
 
       if (order.maker == maker) {
@@ -482,11 +487,9 @@ const BuyOrder = (props: {
         setAllowance(val.allowance)
 
         // Get SELL LIMIT orders which the user is going to fill during the BUY MARKET operation
-        if (responseSell.length > 0) {
-          getSellLimitOrders().then((orders) => {
-            setExistingSellLimitOrders(orders)
-          })
-        }
+        getSellLimitOrders().then((orders) => {
+          setExistingSellLimitOrders(orders)
+        })
 
         // Get the user's (maker) existing BUY LIMIT orders which block some of the user's allowance
         getTotalBuyLimitOrderAmountUser(userAddress).then((amount) => {
@@ -496,7 +499,7 @@ const BuyOrder = (props: {
         })
       })
     }
-  }, [responseBuy, responseSell, userAddress, Web3Provider, checked])
+  }, [userAddress, Web3Provider, checked])
 
   //to calculate the total no of order quantity
   /*  useEffect(() => {

packages/diva-app/src/component/Trade/Orders/SellOrder.tsx

@@ -144,8 +144,6 @@ const SellOrder = (props: {
   const dispatch = useAppDispatch()
   const params: { tokenType: string } = useParams()
   const isLong = window.location.pathname.split('/')[2] === 'long'
-  const responseBuy = useAppSelector((state) => state.tradeOption.responseBuy)
-  let responseSell = useAppSelector((state) => state.tradeOption.responseSell)
 
   useEffect(() => {
     const init = async () => {
@@ -394,10 +392,19 @@ const SellOrder = (props: {
     }
   }
 
-  // This will fetch the BUY LIMIT orders to perform the SELL MARKET operation
+  // Get BUY LIMIT orders which the user is going to fill during the SELL MARKET operation
   const getBuyLimitOrders = async () => {
     const orders: any = []
-    responseBuy.forEach((data: any) => {
+
+    const rBuy: any = await get0xOpenOrders(
+      takerToken, // collateral token
+      makerToken, // position token
+      props.chainId,
+      props.provider,
+      props.exchangeProxy
+    )
+
+    rBuy.forEach((data: any) => {
       const order = JSON.parse(JSON.stringify(data.order))
 
       const takerAmount = BigNumber.from(order.takerAmount) // position token
@@ -430,18 +437,16 @@ const SellOrder = (props: {
   // TODO: Outsource this function into OpenOrders.ts, potentially integrate into getUserOrders function
   const getTotalSellLimitOrderAmountUser = async (maker) => {
     let existingOrdersAmount = ZERO
-    if (responseSell.length == 0) {
-      // Double check whether any limit orders exist
-      const rSell: any = await get0xOpenOrders(
-        makerToken,
-        takerToken,
-        props.chainId,
-        props.provider,
-        props.exchangeProxy
-      )
-      responseSell = rSell
-    }
-    responseSell.forEach((data: any) => {
+
+    const rSell: any = await get0xOpenOrders(
+      makerToken, // position token
+      takerToken, // collateral token
+      props.chainId,
+      props.provider,
+      props.exchangeProxy
+    )
+
+    rSell.forEach((data: any) => {
       const order = data.order
 
       if (order.maker == maker) {
@@ -477,11 +482,9 @@ const SellOrder = (props: {
         setAllowance(val.allowance)
 
         // Get BUY LIMIT orders which the user is going to fill during the SELL MARKET operation
-        if (responseBuy.length > 0) {
-          getBuyLimitOrders().then((orders) => {
-            setExistingBuyLimitOrders(orders)
-          })
-        }
+        getBuyLimitOrders().then((orders) => {
+          setExistingBuyLimitOrders(orders)
+        })
 
         // Get the user's (taker) existing SELL LIMIT orders which block some of the user's allowance
         getTotalSellLimitOrderAmountUser(userAddress).then((amount) => {
@@ -491,7 +494,7 @@ const SellOrder = (props: {
         })
       })
     }
-  }, [responseBuy, responseSell, userAddress, Web3Provider, checked])
+  }, [userAddress, Web3Provider, checked])
 
   // useEffect function to fetch average price for the SELL MARKET order
   useEffect(() => {