Skip to content

Commit

Permalink
ui(orderbook): add delay hint to highlighted offer toggle
Browse files Browse the repository at this point in the history
  • Loading branch information
theborakompanioni committed May 7, 2024
1 parent 7aef192 commit 170b59d
Show file tree
Hide file tree
Showing 2 changed files with 14 additions and 13 deletions.
26 changes: 13 additions & 13 deletions src/components/Orderbook.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { ReactElement, ChangeEvent, useCallback, useEffect, useMemo, useState } from 'react'
import { ReactElement, useCallback, useEffect, useMemo, useState } from 'react'
import { Table, Header, HeaderRow, HeaderCell, Body, Row, Cell } from '@table-library/react-table-library/table'
import { usePagination } from '@table-library/react-table-library/pagination'
import { useSort, HeaderCellSort, SortToggleType } from '@table-library/react-table-library/sort'
Expand All @@ -16,6 +16,7 @@ import TablePagination from './TablePagination'
import { factorToPercentage, isAbsoluteOffer, isRelativeOffer } from '../utils'
import { isDevMode } from '../constants/debugFeatures'
import styles from './Orderbook.module.css'
import ToggleSwitch from './ToggleSwitch'

const TABLE_THEME = {
Table: `
Expand Down Expand Up @@ -352,13 +353,13 @@ export function Orderbook({ entries, refresh, nickname }: OrderbookProps) {
[tableData],
)

const ownOffers = useMemo(() => {
return nickname ? entries.filter((it) => it.counterparty === nickname) : []
}, [nickname, entries])

useEffect(() => {
if (!nickname || !isHighlightOwnOffers) {
setHighlightedOrders([])
} else {
setHighlightedOrders(entries.filter((it) => it.counterparty === nickname))
}
}, [entries, nickname, isHighlightOwnOffers])
setHighlightedOrders(isHighlightOwnOffers ? ownOffers : [])
}, [ownOffers, isHighlightOwnOffers])

return (
<div className={styles.orderbookContainer}>
Expand Down Expand Up @@ -424,13 +425,12 @@ export function Orderbook({ entries, refresh, nickname }: OrderbookProps) {
<>
{nickname && (
<div className="mb-3 ps-3 ps-md-0 pt-3 pt-lg-0">
<rb.Form.Check
type="checkbox"
id="highlight-own-offers"
<ToggleSwitch
label={t('orderbook.label_highlight_own_orders')}
onChange={(e: ChangeEvent<HTMLInputElement>) => {
setIsHighlightOwnOffers(e.target.checked)
}}
subtitle={ownOffers.length === 0 ? t('orderbook.text_highlight_own_orders_subtitle') : undefined}
toggledOn={isHighlightOwnOffers}
onToggle={(isToggled) => setIsHighlightOwnOffers(isToggled)}
disabled={isLoadingRefresh}
/>
</div>
)}
Expand Down
1 change: 1 addition & 0 deletions src/i18n/locales/en/translation.json
Original file line number Diff line number Diff line change
Expand Up @@ -606,6 +606,7 @@
"placeholder_search": "Search",
"text_orderbook_filter_count": "{{ filterCount }} entries match given search criteria",
"label_highlight_own_orders": "Highlight my offers",
"text_highlight_own_orders_subtitle": "It might take some time for your offer and your bond to appear in your local orderbook.",
"table": {
"heading_type": "Type",
"heading_counterparty": "Counterparty",
Expand Down

0 comments on commit 170b59d

Please sign in to comment.