feat: highlight own orders in orderbook

src/components/Earn.jsx

@@ -521,7 +521,11 @@ export default function Earn() {
       </rb.Row>
       <rb.Row className="mt-5 mb-3">
         <rb.Col className="d-flex justify-content-center">
-          <OrderbookOverlay show={isShowOrderbook} onHide={() => setIsShowOrderbook(false)} />
+          <OrderbookOverlay
+            show={isShowOrderbook}
+            onHide={() => setIsShowOrderbook(false)}
+            nickname={serviceInfo?.nickname}
+          />
           <rb.Button
             variant="outline-dark"
             className="border-0 mb-2 d-inline-flex align-items-center"

src/components/Orderbook.module.css

@@ -55,3 +55,7 @@
   padding: 0.1rem;
   border: none;
 }
+
+.highlighted td {
+  background-color: rgba(var(--bs-success-rgb), 0.33) !important;
+}

src/components/Orderbook.tsx

@@ -191,7 +191,7 @@ const OrderbookTable = ({ tableData }: OrderbookTableProps) => {
             {tableList.map((item) => {
               const order = toOrder(item)
               return (
-                <Row key={item.id} item={item}>
+                <Row key={item.id} item={item} className={item._highlighted ? styles.highlighted : ''}>
                   <Cell>{order.counterparty}</Cell>
                   <Cell>{order.orderId}</Cell>
                   <Cell>{renderOrderType(order.type, t)}</Cell>
@@ -223,13 +223,16 @@ const OrderbookTable = ({ tableData }: OrderbookTableProps) => {
 interface OrderbookProps {
   orders: ObwatchApi.Order[]
   refresh: (signal: AbortSignal) => Promise<void>
+  nickname?: string
 }
 
-export function Orderbook({ orders, refresh }: OrderbookProps) {
+export function Orderbook({ orders, refresh, nickname }: OrderbookProps) {
   const { t } = useTranslation()
   const settings = useSettings()
   const [search, setSearch] = useState('')
   const [isLoadingRefresh, setIsLoadingRefresh] = useState(false)
+  const [isHighlightOwnOffers, setIsHighlightOwnOffers] = useState(false)
+  const [highlightedOrders, setHighlightedOrders] = useState<ObwatchApi.Order[]>([])
 
   const tableData: TableTypes.Data = useMemo(() => {
     const searchVal = search.replace('.', '').toLowerCase()
@@ -251,17 +254,26 @@ export function Orderbook({ orders, refresh }: OrderbookProps) {
     const nodes = filteredOrders.map((order) => ({
       ...order,
       id: `${order.counterparty}_${order.orderId}`,
+      _highlighted: highlightedOrders.includes(order),
     }))
 
     return { nodes }
-  }, [orders, search])
+  }, [orders, search, highlightedOrders])
 
   const counterpartyCount = useMemo(() => new Set(orders.map((it) => it.counterparty)).size, [orders])
   const counterpartyCountFiltered = useMemo(
     () => new Set(tableData.nodes.map((it) => it.counterparty)).size,
     [tableData]
   )
 
+  useEffect(() => {
+    if (!nickname || !isHighlightOwnOffers) {
+      setHighlightedOrders([])
+    } else {
+      setHighlightedOrders(orders.filter((it) => it.counterparty === nickname))
+    }
+  }, [orders, nickname, isHighlightOwnOffers])
+
   return (
     <div className={styles.orderbookContainer}>
       <div className={styles.titleBar}>
@@ -318,18 +330,37 @@ export function Orderbook({ orders, refresh }: OrderbookProps) {
           </rb.Form.Group>
         </div>
       </div>
+
       <div className="px-md-3 pb-2">
         {orders.length === 0 ? (
           <rb.Alert variant="info">{t('orderbook.alert_empty_orderbook')}</rb.Alert>
         ) : (
-          <OrderbookTable tableData={tableData} />
+          <>
+            {nickname && (
+              <div className="mb-3">
+                <rb.Form.Check
+                  type="checkbox"
+                  id="highlight-own-offers"
+                  label={t('orderbook.label_highlight_own_orders')}
+                  onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                    setIsHighlightOwnOffers(e.target.checked)
+                  }}
+                />
+              </div>
+            )}
+            <OrderbookTable tableData={tableData} />
+          </>
         )}
       </div>
     </div>
   )
 }
 
-export function OrderbookOverlay({ show, onHide }: rb.OffcanvasProps) {
+type OrderbookOverlayProps = rb.OffcanvasProps & {
+  nickname?: string
+}
+
+export function OrderbookOverlay({ nickname, show, onHide }: OrderbookOverlayProps) {
   const { t } = useTranslation()
   const [alert, setAlert] = useState<(rb.AlertProps & { message: string }) | null>(null)
   const [isInitialized, setIsInitialized] = useState(false)
@@ -420,7 +451,7 @@ export function OrderbookOverlay({ show, onHide }: rb.OffcanvasProps) {
               {orders && (
                 <rb.Row>
                   <rb.Col>
-                    <Orderbook orders={orders} refresh={refresh} />
+                    <Orderbook nickname={nickname} orders={orders} refresh={refresh} />
                   </rb.Col>
                 </rb.Row>
               )}

src/i18n/locales/en/translation.json

@@ -388,6 +388,7 @@
     "label_search": "Search",
     "placeholder_search": "Search",
     "text_orderbook_filter_count": "{{ filterCount }} entries match given search criteria",
+    "label_highlight_own_orders": "Highlight my orders",
     "table": {
       "heading_type": "Type",
       "heading_counterparty": "Counterparty",