Skip to content

Commit

Permalink
Toggle button for Order Line Visibility (blockworks-foundation#62)
Browse files Browse the repository at this point in the history
* Toggle button for Order Line Visibility

Allow users to toggle order line visibility on and off.  Should be useful if you have a lot of orders on the books.

* Updated const

Button updated to const.

* Remove event not used

Event in addEventListener never used, and removed.
  • Loading branch information
ImpossiblePairs authored Oct 28, 2021
1 parent f2c484d commit 8beab41
Showing 1 changed file with 51 additions and 31 deletions.
82 changes: 51 additions & 31 deletions components/TradingView/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,7 @@ const TVChartContainer = () => {
const [moveInProgress, toggleMoveInProgress] = useState(false)
const [orderInProgress, toggleOrderInProgress] = useState(false)
const [priceReset, togglePriceReset] = useState(false)
const [showOrderLines, toggleShowOrderLines] = useState(true)
const mangoClient = useMangoStore.getState().connection.client

// @ts-ignore
Expand Down Expand Up @@ -146,6 +147,21 @@ const TVChartContainer = () => {
const tvWidget = new widget(widgetOptions)
tvWidgetRef.current = tvWidget
setLines(deleteLines())

tvWidgetRef.current.onChartReady(function () {
const button = tvWidgetRef.current.createButton()
button.textContent = 'OL'
button.style.color = theme === 'Dark' || theme === 'Mango' ? 'rgb(242, 201, 76)' : 'rgb(255, 156, 36)'
button.setAttribute('title', 'Toggle order line visibility')
button.addEventListener('click', function () {
toggleShowOrderLines((showOrderLines) => !showOrderLines)
if (button.style.color === 'rgb(255, 156, 36)' || button.style.color === 'rgb(242, 201, 76)') {
button.style.color = theme === 'Dark' || theme === 'Mango' ? 'rgb(138, 138, 138)' : 'rgb(138, 138, 138)'
} else {
button.style.color = theme === 'Dark' || theme === 'Mango' ? 'rgb(242, 201, 76)' : 'rgb(255, 156, 36)'
}
})
})
//eslint-disable-next-line
}, [selectedMarketConfig, theme, isMobile])

Expand Down Expand Up @@ -483,43 +499,47 @@ const TVChartContainer = () => {
}

useInterval(() => {
if (
selectedMarginAccount &&
connected &&
!moveInProgress &&
!orderInProgress &&
openOrders?.length > 0
) {
let matches = 0
let openOrdersInSelectedMarket = 0
lines?.forEach((value, key) => {
openOrders?.map(({ order }) => {
if (order.orderId == key) {
matches += 1
}
if (showOrderLines) {
if (
selectedMarginAccount &&
connected &&
!moveInProgress &&
!orderInProgress &&
openOrders?.length > 0
) {
let matches = 0
let openOrdersInSelectedMarket = 0
lines?.forEach((value, key) => {
openOrders?.map(({ order }) => {
if (order.orderId == key) {
matches += 1
}
})
})
})

openOrders?.map(({ market }) => {
if (market.config.name == selectedMarketName) {
openOrdersInSelectedMarket += 1
}
})
openOrders?.map(({ market }) => {
if (market.config.name == selectedMarketName) {
openOrdersInSelectedMarket += 1
}
})

if (
lines?.size != openOrdersInSelectedMarket ||
matches != openOrdersInSelectedMarket ||
(lines?.size > 0 && lines?.size != matches) ||
(lines?.size > 0 && !selectedMarginAccount) ||
priceReset
) {
if (priceReset) {
togglePriceReset(false)
if (
lines?.size != openOrdersInSelectedMarket ||
matches != openOrdersInSelectedMarket ||
(lines?.size > 0 && lines?.size != matches) ||
(lines?.size > 0 && !selectedMarginAccount) ||
priceReset
) {
if (priceReset) {
togglePriceReset(false)
}
setLines(deleteLines())
setLines(drawLines())
}
} else if (lines?.size > 0 && !moveInProgress && !orderInProgress) {
setLines(deleteLines())
setLines(drawLines())
}
} else if (lines?.size > 0 && !moveInProgress && !orderInProgress) {
} else if (lines?.size > 0) {
setLines(deleteLines())
}
}, [100])
Expand Down

0 comments on commit 8beab41

Please sign in to comment.