809 your open orders bug

.github/ISSUE_TEMPLATE/bug.md

@@ -18,7 +18,7 @@ assignees: ""
 3. App crashes (see screenshot)
 -->
 
-## Screenshots / Sreen recording
+## Screenshots / Screen recording
 
 <!-- Screenshots and/or screen recordings really go a long way to explain
 something and help us to tackle the issue. (We use loom for this https://www.loom.com/) -->

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

@@ -316,6 +316,7 @@ export const fetchPositionTokens = createAsyncThunk(
 )
 
 const addPools = (_state: AppStateByChain, pools: Pool[], chainId?: number) => {
+  console.log('chainId', chainId)
   const newPools = pools.map((p) => p.id)
   const state = _state[chainId]
 

packages/diva-app/src/component/PoolsTable.tsx

@@ -5,8 +5,6 @@ import { LineSeries, XYPlot } from 'react-vis'
 import { useHistory } from 'react-router-dom'
 import { makeStyles } from '@mui/styles'
 import PoolCard from './PoolCard'
-import { setResponseBuy, setResponseSell } from '../Redux/TradeOption'
-import { useDispatch } from 'react-redux'
 import useTheme from '@mui/material/styles/useTheme'
 import { useCallback, useMemo } from 'react'
 
@@ -65,20 +63,13 @@ export default function PoolsTable({
 }: Props) {
   const history = useHistory()
   const classes = useStyles()
-  const dispatch = useDispatch()
   const theme = useTheme()
 
   const handleRowClickDefault = useCallback(
     (row) => {
-      // Invalidate cache responses before navigating to trades page.
-      // This ensures that the orderbook does not have empty rows included after switching from a market
-      // with non-empty orderbook rows
-      console.log('default function is staring')
-      dispatch(setResponseSell([]))
-      dispatch(setResponseBuy([]))
       history.push(`../../${row.id}`)
     },
-    [dispatch, history]
+    [history]
   )
 
   const renderLoading = useMemo(

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

@@ -2,7 +2,6 @@ import React, { useState, useEffect } from 'react'
 import 'styled-components'
 import Tabs from '@mui/material/Tabs'
 import Tab from '@mui/material/Tab'
-import { setResponseBuy, setResponseSell } from '../../Redux/TradeOption'
 import { get0xOpenOrders } from '../../DataService/OpenOrders'
 import { Pool } from '../../lib/queries'
 import { useDispatch } from 'react-redux'
@@ -59,6 +58,7 @@ export default function CreateOrder(props: {
     }
   }
 
+  // @todo remove as orders are no longer stored in Redux
   const getExistingOrders = async () => {
     //updates orders components
     const responseSell: OrderbookPriceResponse[] = await get0xOpenOrders(
@@ -75,17 +75,16 @@ export default function CreateOrder(props: {
       props.provider,
       props.exchangeProxy
     )
-    if (responseSell.length > 0) {
-      dispatch(setResponseSell(responseSell))
-    }
-    if (responseBuy.length > 0) {
-      dispatch(setResponseBuy(responseBuy))
-    }
+    // if (responseSell.length > 0) {
+    //   dispatch(setResponseSell(responseSell))
+    // }
+    // if (responseBuy.length > 0) {
+    //   dispatch(setResponseBuy(responseBuy))
+    // }
   }
 
   useEffect(() => {
     getUnderlyingPrice(option.referenceAsset).then((data) => {
-      console.log('data', data)
       if (data != null || data != undefined) {
         setUsdPrice(data)
       } else {

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

@@ -1,7 +1,6 @@
 import { useState, useEffect } from 'react'
 import { useAppSelector } from '../../Redux/hooks'
 import { useConnectionContext } from '../../hooks/useConnectionContext'
-import { setResponseBuy, setResponseSell } from '../../Redux/TradeOption'
 import 'styled-components'
 import styled from 'styled-components'
 import Typography from '@mui/material/Typography'
@@ -13,7 +12,6 @@ import TableContainer from '@mui/material/TableContainer'
 import TableHead from '@mui/material/TableHead'
 import TableRow from '@mui/material/TableRow'
 import Paper from '@mui/material/Paper'
-import Button from '@mui/material/Button'
 import DeleteIcon from '@mui/icons-material/Delete'
 import { get0xOpenOrders, getOrderDetails } from '../../DataService/OpenOrders'
 import { getDateTime } from '../../Util/Dates'
@@ -24,13 +22,14 @@ import { cancelLimitOrder } from '../../Orders/CancelLimitOrder'
 import { selectChainId, selectUserAddress } from '../../Redux/appSlice'
 import { useDispatch } from 'react-redux'
 import { LoadingButton } from '@mui/lab'
+import { OrderbookPriceResponse } from '../../Models/orderbook'
 
 const PageDiv = styled.div`
   width: 100%;
 `
 
 function mapOrderData(
-  records: [],
+  records: OrderbookPriceResponse[],
   option: Pool,
   optionTokenAddress: string,
   account: string
@@ -117,54 +116,35 @@ export default function OpenOrders(props: {
 }) {
   const option = props.option
   const optionTokenAddress = props.tokenAddress
-  let responseBuy = useAppSelector((state) => state.tradeOption.responseBuy)
-  let responseSell = useAppSelector((state) => state.tradeOption.responseSell)
-  const dispatch = useDispatch()
   const [orders, setOrders] = useState([])
   const chainId = useAppSelector(selectChainId)
   const { provider } = useConnectionContext()
   const address = useAppSelector(selectUserAddress)
-  // const [cancelLoading, setCancelLoading] = useState(false)
   const [cancelLoading, setCancelLoading] = useState(new Map())
 
   const componentDidMount = async () => {
     const orderBook: any = []
-    if (responseSell.length === 0) {
-      const rSell = await get0xOpenOrders(
-        optionTokenAddress,
-        option.collateralToken.id,
-        chainId,
-        provider,
-        props.exchangeProxy
-      )
-      if (rSell.length > 0) {
-        responseSell = rSell
-        dispatch(setResponseSell(responseSell))
-      }
-    }
 
-    if (responseBuy.length === 0) {
-      const rBuy = await get0xOpenOrders(
-        option.collateralToken.id,
-        optionTokenAddress,
-        chainId,
-        provider,
-        props.exchangeProxy
-      )
-      if (rBuy.length > 0) {
-        responseBuy = rBuy
-        dispatch(setResponseBuy(responseBuy))
-      }
-    }
-    const orderBookBuy = mapOrderData(
-      responseBuy,
-      option,
+    const rSell = await get0xOpenOrders(
       optionTokenAddress,
-      address
+      option.collateralToken.id,
+      chainId,
+      provider,
+      props.exchangeProxy
+    )
+
+    const rBuy = await get0xOpenOrders(
+      option.collateralToken.id,
+      optionTokenAddress,
+      chainId,
+      provider,
+      props.exchangeProxy
     )
 
+    const orderBookBuy = mapOrderData(rBuy, option, optionTokenAddress, address)
+
     const orderBookSell = mapOrderData(
-      responseSell,
+      rSell,
       option,
       optionTokenAddress,
       address
@@ -189,23 +169,9 @@ export default function OpenOrders(props: {
   }
 
   useEffect(() => {
-    if (responseBuy.length === 0 || responseSell.length === 0) {
-      componentDidMount()
-    }
+    componentDidMount()
   }, [])
 
-  useEffect(() => {
-    if (responseBuy.length > 0 || responseSell.length > 0) {
-      componentDidMount()
-    }
-    return () => {
-      if (responseBuy.length > 0 || responseSell.length > 0) {
-        dispatch(setResponseSell([]))
-        dispatch(setResponseBuy([]))
-      }
-    }
-  }, [responseBuy.length, responseSell.length])
-
   async function cancelOrder(order, chainId) {
     setCancelLoading((prevStates) => {
       const newStates = new Map(prevStates)
@@ -219,11 +185,6 @@ export default function OpenOrders(props: {
       .then(function (cancelOrderResponse: any) {
         if (cancelOrderResponse?.hash != null) {
           alert('Order successfully cancelled')
-          //need to invalidate orders since orderbook is updated
-          dispatch(setResponseSell([]))
-          dispatch(setResponseBuy([]))
-          responseBuy = []
-          responseSell = []
           //update orderbook & create orders widget
           componentDidMount()
           setCancelLoading((prevStates) => {

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

@@ -27,7 +27,6 @@ import { buylimitOrder } from '../../../Orders/BuyLimit'
 import ERC20_ABI from '../../../abi/ERC20ABI.json'
 import { useAppDispatch, useAppSelector } from '../../../Redux/hooks'
 import { selectUserAddress } from '../../../Redux/appSlice'
-import { setResponseBuy } from '../../../Redux/TradeOption'
 import { buyMarketOrder } from '../../../Orders/BuyMarket'
 import {
   calcBreakEven,
@@ -321,9 +320,6 @@ const BuyOrder = (props: {
       buylimitOrder(orderData)
         .then(async (response) => {
           if (response.status === 200) {
-            //need to invalidate cache order response since orderbook is updated
-            dispatch(setResponseBuy([]))
-
             // Wait for 2 secs for 0x to update orders, then handle order book display
             await new Promise((resolve) => setTimeout(resolve, 2000))
 

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

@@ -27,7 +27,6 @@ import { sellLimitOrder } from '../../../Orders/SellLimit'
 import ERC20_ABI from '../../../abi/ERC20ABI.json'
 import { useAppDispatch, useAppSelector } from '../../../Redux/hooks'
 import { selectUserAddress } from '../../../Redux/appSlice'
-import { setResponseSell } from '../../../Redux/TradeOption'
 import { sellMarketOrder } from '../../../Orders/SellMarket'
 import {
   calcBreakEven,
@@ -317,9 +316,6 @@ const SellOrder = (props: {
       sellLimitOrder(orderData)
         .then(async (response) => {
           if (response.status === 200) {
-            //need to invalidate cache order response since orderbook is updated
-            dispatch(setResponseSell([]))
-
             // Wait for 2 secs for 0x to update orders, then handle order book display
             await new Promise((resolve) => setTimeout(resolve, 2000))