Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added the alerts for the Sell Market Part. #772

Open
wants to merge 14 commits into
base: main
Choose a base branch
from
+204 −60
Open

Added the alerts for the Sell Market Part. #772

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
add7827
Added the alerts for the Sell Market Part.
ashiskumar-1999 Feb 6, 2023
e68ce1a
Fixed the approve button disable on empty amount field & manage all t…
ashiskumar-1999 Feb 10, 2023
66b6f35
Update SellOrder.tsx
ashiskumar-1999 Feb 14, 2023
c14d4b4
Fixed the alert notifications.
ashiskumar-1999 Feb 20, 2023
3793e24
Merge branch 'main' into Orange-Alert-for-BUY/SELL-Order
ashiskumar-1999 Mar 25, 2023
689cd11
Added the alert notification for the Buy Order Part.
ashiskumar-1999 Mar 25, 2023
25d5b80
Merge branch 'main' into Orange-Alert-for-BUY/SELL-Order
ashiskumar-1999 Apr 6, 2023
1b27894
Merge branch 'main' into Orange-Alert-for-BUY/SELL-Order
ashiskumar-1999 Apr 11, 2023
21a7bd9
Merge branch 'main' into Orange-Alert-for-BUY/SELL-Order
ashiskumar-1999 Apr 12, 2023
05e4e8f
Addressed the comments mentioned in the loom.
ashiskumar-1999 Apr 30, 2023
673ae47
Fixed the issue of blank page while there is no orders in the orderbook.
ashiskumar-1999 May 22, 2023
f53127c
Fixed the issues the BuyLimit part.
ashiskumar-1999 Jun 3, 2023
e53a543
Merge branch 'main' into Orange-Alert-for-BUY/SELL-Order
Walodja1987 Jul 19, 2023
68e127c
Merge branch 'main' into Orange-Alert-for-BUY/SELL-Order
Walodja1987 Jul 21, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
130 changes: 105 additions & 25 deletions packages/diva-app/src/component/Trade/Orders/BuyOrder.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -117,7 +117,8 @@ const BuyOrder = (props: {
const [avgExpectedRate, setAvgExpectedRate] = useState(ZERO) //Price Per long/short Token
const [balanceAlert, setBalanceAlert] = useState(false) //Alert message for insufficient balance
const [orderBookAlert, setOrderBookAlert] = useState(false) //Alert message for no Asks in BuyMarket
/* const [amountExceedAlert, setAmountExceedAlert] = useState(false) */ // Alert message for Amount Exceed
const [amountExceedAlert, setAmountExceedAlert] = useState(false) // Alert message for Amount Exceed
const [quantityExceedAlert, setQuantityExceedAlert] = useState(false)
const [totalQuantity, setTotalQuantity] = useState(0)
const [isApproved, setIsApproved] = useState(false)
const [fillLoading, setFillLoading] = React.useState(false)
Expand Down Expand Up @@ -499,15 +500,15 @@ const BuyOrder = (props: {
}, [responseBuy, responseSell, userAddress, Web3Provider, checked])

//to calculate the total no of order quantity
/* useEffect(() => {
useEffect(() => {
const QuantitiesOrderBook = existingSellLimitOrders.map((order) =>
Number(formatUnits(order.makerAmount, decimals))
)
let sumOfQuantity = 0
QuantitiesOrderBook.forEach((quantity) => (sumOfQuantity += quantity))
setTotalQuantity(sumOfQuantity)
}, [numberOfOptions]) */

}, [numberOfOptions])
console.log('totalQuantity', totalQuantity)
//useEffect function to fetch the average price for the BUY MARKET order
useEffect(() => {
if (!checked) {
Expand Down Expand Up @@ -706,26 +707,101 @@ const BuyOrder = (props: {
// Alert message for Insuffcientbalance & No Asks on OrderBook
useEffect(() => {
if (numberOfOptions != '') {
if (youPay.gt(collateralBalance) && youPay.lte(remainingAllowance)) {
setBalanceAlert(true)
// Convert user input into BigNumber
const nbrOfOptionsBalance = parseUnits(numberOfOptions, decimals)
const totalAmountPrice = nbrOfOptionsBalance.mul(avgExpectedRate)
const maxAmount =
checked && pricePerOption.gt(ZERO)
? collateralBalance.mul(collateralTokenUnit).div(pricePerOption)
: !avgExpectedRate.eq(0) &&
collateralBalance.mul(collateralTokenUnit).div(avgExpectedRate)

if (youPay.gt(collateralBalance)) {
if (youPay.lte(remainingAllowance)) {
setBalanceAlert(true)
} else {
setAmountExceedAlert(true)
}
} else {
setAmountExceedAlert(false)
setBalanceAlert(false)
}
if (!checked && avgExpectedRate.eq(0)) {
setOrderBookAlert(true)
} else {
if (!checked) {
if (avgExpectedRate.eq(0)) {
setOrderBookAlert(true)
} else {
if (Number(numberOfOptions) > totalQuantity) {
if (
nbrOfOptionsBalance.gt(maxAmount) &&
totalAmountPrice.lte(remainingAllowance)
) {
setBalanceAlert(true)
setAmountExceedAlert(false)
setQuantityExceedAlert(true)
} else if (
nbrOfOptionsBalance.lte(maxAmount) &&
totalAmountPrice.lte(remainingAllowance)
) {
setAmountExceedAlert(false)
setQuantityExceedAlert(true)
} else if (
nbrOfOptionsBalance.gt(maxAmount) &&
totalAmountPrice.gt(remainingAllowance)
) {
setQuantityExceedAlert(false)
setAmountExceedAlert(true)
} else if (
nbrOfOptionsBalance.lte(maxAmount) &&
totalAmountPrice.gt(remainingAllowance)
) {
setAmountExceedAlert(false)
setQuantityExceedAlert(true)
} else {
setQuantityExceedAlert(false)
setAmountExceedAlert(false)
}
} else if (Number(numberOfOptions) <= totalQuantity) {
if (
nbrOfOptionsBalance.gt(maxAmount) &&
totalAmountPrice.gt(remainingAllowance)
) {
setQuantityExceedAlert(false)
setAmountExceedAlert(true)
} else if (
nbrOfOptionsBalance.gt(maxAmount) &&
totalAmountPrice.lte(remainingAllowance)
) {
setQuantityExceedAlert(false)
setBalanceAlert(true)
} else {
setQuantityExceedAlert(false)
setAmountExceedAlert(false)
}
} else {
setQuantityExceedAlert(false)
setAmountExceedAlert(false)
setOrderBookAlert(false)
}
}
} else if (Number(maxAmount) != 0) {
if (
nbrOfOptionsBalance.gt(maxAmount) &&
totalAmountPrice.gt(remainingAllowance)
) {
setAmountExceedAlert(true)
} else {
setAmountExceedAlert(false)
}
setQuantityExceedAlert(false)
setOrderBookAlert(false)
} /*
if (
youPay.gt(collateralBalance) ||
(!checked && Number(numberOfOptions) > totalQuantity)
) {
setAmountExceedAlert(true)
} else {
setAmountExceedAlert(false)
} */
}
} else {
setQuantityExceedAlert(false)
setAmountExceedAlert(false)
setOrderBookAlert(false)
setBalanceAlert(false)
}
}, [numberOfOptions, youPay, avgExpectedRate, checked])
}, [numberOfOptions, youPay, avgExpectedRate, checked, pricePerOption])

const createBtnDisabled =
!isApproved ||
Expand All @@ -734,7 +810,8 @@ const BuyOrder = (props: {
const fillBtnDisabled =
!isApproved ||
orderBtnDisabled ||
collateralBalance.sub(youPay).sub(feeAmount).lt(0)
collateralBalance.sub(youPay).sub(feeAmount).lt(0) ||
(numberOfOptions !== '' && Number(numberOfOptions) > totalQuantity)
const approveBtnDisabled = isApproved || youPay.lte(0) // No collateralBalance.sub(youPay).lt(0) condition as a user should be able to approve any amount they want

return (
Expand Down Expand Up @@ -947,16 +1024,19 @@ const BuyOrder = (props: {
</Collapse>
<Collapse in={orderBookAlert} sx={{ mt: theme.spacing(2) }}>
<Alert severity="error" sx={{ mb: 2 }}>
No Asks in orderbook
No Bids in orderbook
</Alert>
</Collapse>
<Collapse in={quantityExceedAlert} sx={{ mt: theme.spacing(2) }}>
<Alert severity="error" sx={{ mb: 2 }}>
Exceeds Available Quantity
</Alert>
</Collapse>
{/*
<Collapse in={amountExceedAlert}>
<Alert severity="warning" sx={{ mb: 2 }}>
Amount to be approved exceeds{' '}
{checked ? 'Wallet Balance' : 'available quantities'}
Amount to be approved exceeds Wallet Balance
</Alert>
</Collapse> */}
</Collapse>
<Stack direction={'row'} spacing={1} mt={theme.spacing(1)}>
<LoadingButton
variant="contained"
Expand Down
134 changes: 99 additions & 35 deletions packages/diva-app/src/component/Trade/Orders/SellOrder.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -115,6 +115,9 @@ const SellOrder = (props: {
const [feeAmount, setFeeAmount] = React.useState(ZERO) // User input field
const [balanceAlert, setBalanceAlert] = useState(false) //Alert message for insufficient balance
const [orderBookAlert, setOrderBookAlert] = useState(false) //Alert message for no Asks in SellMarket
const [amountExceedAlert, setAmountExceedAlert] = useState(false) // Alert message for Amount Exceed
const [quantityExceedAlert, setQuantityExceedAlert] = useState(false)
const [totalQuantity, setTotalQuantity] = useState(0)
const [expiry, setExpiry] = React.useState(5)
const [avgExpectedRate, setAvgExpectedRate] = React.useState(ZERO)
const [isApproved, setIsApproved] = React.useState(false)
Expand Down Expand Up @@ -493,6 +496,16 @@ const SellOrder = (props: {
}
}, [responseBuy, responseSell, userAddress, Web3Provider, checked])

//to calculate the total no of order quantity
useEffect(() => {
const QuantitiesOrderBook = existingBuyLimitOrders.map((order) =>
Number(formatUnits(order.takerAmount, decimals))
)
let sumOfQuantity = 0
QuantitiesOrderBook.forEach((quantity) => (sumOfQuantity += quantity))
setTotalQuantity(sumOfQuantity)
}, [numberOfOptions])
console.log('totalQuantity', totalQuantity)
// useEffect function to fetch average price for the SELL MARKET order
useEffect(() => {
if (!checked) {
Expand Down Expand Up @@ -715,11 +728,80 @@ const SellOrder = (props: {
} else {
setBalanceAlert(false)
}
if (!checked && avgExpectedRate.eq(0)) {
setOrderBookAlert(true)
if (!checked) {
if (avgExpectedRate.eq(0)) {
setOrderBookAlert(true)
} else {
if (Number(numberOfOptions) > totalQuantity) {
if (
nbrOfOptionsBalance.gt(optionBalance) &&
nbrOfOptionsBalance.lte(remainingAllowance)
) {
setBalanceAlert(true)
setAmountExceedAlert(false)
setQuantityExceedAlert(true)
} else if (
nbrOfOptionsBalance.lte(optionBalance) &&
nbrOfOptionsBalance.lte(remainingAllowance)
) {
setAmountExceedAlert(false)
setQuantityExceedAlert(true)
} else if (
nbrOfOptionsBalance.gt(optionBalance) &&
nbrOfOptionsBalance.gt(remainingAllowance)
) {
setQuantityExceedAlert(false)
setAmountExceedAlert(true)
} else if (
nbrOfOptionsBalance.lte(optionBalance) &&
nbrOfOptionsBalance.gt(remainingAllowance)
) {
setAmountExceedAlert(false)
setQuantityExceedAlert(true)
} else {
setQuantityExceedAlert(false)
setAmountExceedAlert(false)
}
} else if (Number(numberOfOptions) <= totalQuantity) {
if (
nbrOfOptionsBalance.gt(optionBalance) &&
nbrOfOptionsBalance.gt(remainingAllowance)
) {
setQuantityExceedAlert(false)
setAmountExceedAlert(true)
} else if (
nbrOfOptionsBalance.gt(optionBalance) &&
nbrOfOptionsBalance.lte(remainingAllowance)
) {
setQuantityExceedAlert(false)
setBalanceAlert(true)
} else {
setQuantityExceedAlert(false)
setAmountExceedAlert(false)
}
} else {
setQuantityExceedAlert(false)
setAmountExceedAlert(false)
setOrderBookAlert(false)
}
}
} else {
if (
nbrOfOptionsBalance.gt(optionBalance) &&
nbrOfOptionsBalance.gt(remainingAllowance)
) {
setAmountExceedAlert(true)
} else {
setAmountExceedAlert(false)
}
setQuantityExceedAlert(false)
setOrderBookAlert(false)
}
} else {
setQuantityExceedAlert(false)
setAmountExceedAlert(false)
setOrderBookAlert(false)
setBalanceAlert(false)
}
}, [numberOfOptions, youReceive, avgExpectedRate, checked])

Expand All @@ -740,9 +822,11 @@ const SellOrder = (props: {
optionBalance
.sub(parseUnits(numberOfOptions, decimals))
.sub(feeAmount)
.lt(0))
.lt(0)) ||
(numberOfOptions !== '' && Number(numberOfOptions) > totalQuantity)
const approveBtnDisabled =
isApproved ||
numberOfOptions == '' ||
(numberOfOptions !== '' && !parseUnits(numberOfOptions, decimals).gt(0)) // No optionBalance.sub(numberOfOptions).lt(0) condition as a user should be able to approve any amount they want

return (
Expand Down Expand Up @@ -892,45 +976,25 @@ const SellOrder = (props: {
</Typography>
</Stack>
<Collapse in={balanceAlert} sx={{ mt: theme.spacing(2) }}>
<Alert
severity="error"
action={
<IconButton
aria-label="close"
color="inherit"
size="small"
onClick={() => {
setBalanceAlert(false)
}}
>
{'X'}
</IconButton>
}
sx={{ mb: 2 }}
>
<Alert severity="error" sx={{ mb: 2 }}>
Insufficient balance
</Alert>
</Collapse>
<Collapse in={orderBookAlert} sx={{ mt: theme.spacing(2) }}>
<Alert
severity="error"
action={
<IconButton
aria-label="close"
color="inherit"
size="small"
onClick={() => {
setOrderBookAlert(false)
}}
>
{'X'}
</IconButton>
}
sx={{ mb: 2 }}
>
<Alert severity="error" sx={{ mb: 2 }}>
No Bids in orderbook
</Alert>
</Collapse>
<Collapse in={quantityExceedAlert} sx={{ mt: theme.spacing(2) }}>
<Alert severity="error" sx={{ mb: 2 }}>
Exceeds Available Quantity
</Alert>
</Collapse>
<Collapse in={amountExceedAlert}>
<Alert severity="warning" sx={{ mb: 2 }}>
Amount to be approved exceeds Wallet Balance
</Alert>
</Collapse>
<Stack direction={'row'} spacing={1} mt={theme.spacing(1)}>
<LoadingButton
variant="contained"
Expand Down