From 0ba3464de6e7d1def22c9fc0b22963ba0bdfd724 Mon Sep 17 00:00:00 2001 From: Walodja1987 Date: Wed, 26 Jul 2023 17:20:08 +0200 Subject: [PATCH] Fix YOUR OPEN ORDERS issue https://www.loom.com/share/f76a3adab9184e18a6da69344ccb95de --- .github/ISSUE_TEMPLATE/bug.md | 2 +- packages/diva-app/src/Redux/appSlice.ts | 1 + .../diva-app/src/component/PoolsTable.tsx | 11 +-- .../src/component/Trade/CreateOrder.tsx | 15 ++-- .../src/component/Trade/OptionOrders.tsx | 77 +++++-------------- .../src/component/Trade/Orders/BuyOrder.tsx | 4 - .../src/component/Trade/Orders/SellOrder.tsx | 4 - 7 files changed, 29 insertions(+), 85 deletions(-) diff --git a/.github/ISSUE_TEMPLATE/bug.md b/.github/ISSUE_TEMPLATE/bug.md index 24a461d6f..f91e70c52 100644 --- a/.github/ISSUE_TEMPLATE/bug.md +++ b/.github/ISSUE_TEMPLATE/bug.md @@ -18,7 +18,7 @@ assignees: "" 3. App crashes (see screenshot) --> -## Screenshots / Sreen recording +## Screenshots / Screen recording diff --git a/packages/diva-app/src/Redux/appSlice.ts b/packages/diva-app/src/Redux/appSlice.ts index 2e99f0ede..ef9945794 100644 --- a/packages/diva-app/src/Redux/appSlice.ts +++ b/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] diff --git a/packages/diva-app/src/component/PoolsTable.tsx b/packages/diva-app/src/component/PoolsTable.tsx index c3de65eec..00f983da9 100644 --- a/packages/diva-app/src/component/PoolsTable.tsx +++ b/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( diff --git a/packages/diva-app/src/component/Trade/CreateOrder.tsx b/packages/diva-app/src/component/Trade/CreateOrder.tsx index be162241c..d88aed956 100644 --- a/packages/diva-app/src/component/Trade/CreateOrder.tsx +++ b/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 { diff --git a/packages/diva-app/src/component/Trade/OptionOrders.tsx b/packages/diva-app/src/component/Trade/OptionOrders.tsx index 6c4e7cf7e..8bfbe02c7 100644 --- a/packages/diva-app/src/component/Trade/OptionOrders.tsx +++ b/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) => { diff --git a/packages/diva-app/src/component/Trade/Orders/BuyOrder.tsx b/packages/diva-app/src/component/Trade/Orders/BuyOrder.tsx index 5da1f9d57..b84aee1af 100644 --- a/packages/diva-app/src/component/Trade/Orders/BuyOrder.tsx +++ b/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)) diff --git a/packages/diva-app/src/component/Trade/Orders/SellOrder.tsx b/packages/diva-app/src/component/Trade/Orders/SellOrder.tsx index 46953bc2d..d56f8bec2 100644 --- a/packages/diva-app/src/component/Trade/Orders/SellOrder.tsx +++ b/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))