feat: ability to sort and filter orderbook (#434)

* wip: parse orderbook * dev: add 'orderbook' feature flag * dev: remove orderbook request from App.jsx * wip: add OrderbookOverlay * fix: render order fee as balance only on abs offer * fix: don not use orderId as key - it is not unique * dev: show order type as badge * fix: add reason to error message * feat: sortable orderbook table * feat: ability to filter orderbook by search value * review: wrap orderbook overlay body in container * chore: harmonize offcanvas-fullscreen style * chore: harmonize body styles for fullscreen overlays * chore: harmonize header styles for fullscreen overlays * chore: harmonize overlay close buttons and headers in orderbook and earn report * chore: background-color of orderbook container * fix: make containers containing tables fluid on xs and sm screens * chore: harmonize earn report overlay * fix: same overlay container for all fullscreen offcanvas components * dev: add title bar to orderbook overlay * feat: add refresh functionality to orderbook * fix: hide search criteria phrase if search value is empty * Apply suggestions from code review Co-authored-by: Daniel <10026790+dnlggr@users.noreply.github.com> * Update src/components/Orderbook.module.css Co-authored-by: Daniel <10026790+dnlggr@users.noreply.github.com> * chore: optimize orderbook filter function * review: disable search input on data reload * review: improve filtered orderbook summary * fix: update wording Co-authored-by: Daniel <10026790+dnlggr@users.noreply.github.com>
joinmarket-webui · Aug 4, 2022 · 952e24b · 952e24b
1 parent 1113e21
commit 952e24b
Show file tree

Hide file tree

Showing 11 changed files with 563 additions and 247 deletions.
diff --git a/src/components/Cheatsheet.module.css b/src/components/Cheatsheet.module.css
@@ -15,10 +15,6 @@
   box-shadow: 6px -3px 12px 3px rgba(0, 0, 0, 0.5);
 }
 
-.cheatsheet button[aria-label='Close'] {
-  margin-bottom: auto;
-}
-
 .cheatsheet a {
   color: inherit !important;
 }

diff --git a/src/components/Cheatsheet.tsx b/src/components/Cheatsheet.tsx
@@ -44,7 +44,7 @@ export default function Cheatsheet({ show = false, onHide }: CheatsheetProps) {
 
   return (
     <rb.Offcanvas className={styles.cheatsheet} show={show} onHide={onHide} placement="bottom" onClick={onHide}>
-      <rb.Offcanvas.Header closeButton>
+      <rb.Offcanvas.Header>
         <rb.Stack>
           <rb.Offcanvas.Title>{t('cheatsheet.title')}</rb.Offcanvas.Title>
           <div className="small text-secondary">
@@ -64,6 +64,9 @@ export default function Cheatsheet({ show = false, onHide }: CheatsheetProps) {
             </Trans>
           </div>
         </rb.Stack>
+        <rb.Button variant="link" className="unstyled p-0 mb-auto" onClick={onHide}>
+          <Sprite symbol="cancel" width="32" height="32" />
+        </rb.Button>
       </rb.Offcanvas.Header>
       <rb.Offcanvas.Body>
         <rb.Stack className="mb-4" gap={4}>

diff --git a/src/components/EarnReport.module.css b/src/components/EarnReport.module.css
@@ -1,10 +1,15 @@
-.report-overlay {
-  width: 100vw !important;
-  height: 100vh !important;
-  z-index: 1100 !important;
-}
-
 .report-line-placeholder {
   height: 2.625rem;
   margin: 1px 0;
 }
+
+.overlayContainer .earnReportContainer {
+  background-color: var(--bs-body-bg);
+}
+
+@media only screen and (min-width: 768px) {
+  .overlayContainer .earnReportContainer {
+    border-radius: 0.5rem;
+    padding: 2rem;
+  }
+}
diff --git a/src/components/EarnReport.tsx b/src/components/EarnReport.tsx
@@ -5,6 +5,7 @@ import * as Api from '../libs/JmWalletApi'
 // @ts-ignore
 import { useSettings } from '../context/SettingsContext'
 import Balance from './Balance'
+import Sprite from './Sprite'
 import styles from './EarnReport.module.css'
 
 interface YielgenReportTableProps {
@@ -142,7 +143,7 @@ export function EarnReport() {
   }, [t])
 
   return (
-    <div className="earn-report">
+    <>
       {!isInitialized && isLoading ? (
         Array(5)
           .fill('')
@@ -158,27 +159,47 @@ export function EarnReport() {
           {alert && <rb.Alert variant={alert.variant}>{alert.message}</rb.Alert>}
           {yieldgenReportLines && (
             <rb.Row>
-              <rb.Col className="mb-3">
-                <YieldgenReportTable lines={yieldgenReportLines} />
+              <rb.Col>
+                <div className={styles.earnReportContainer}>
+                  <YieldgenReportTable lines={yieldgenReportLines} />
+                </div>
               </rb.Col>
             </rb.Row>
           )}
         </>
       )}
-    </div>
+    </>
   )
 }
 
 export function EarnReportOverlay({ show, onHide }: rb.OffcanvasProps) {
   const { t } = useTranslation()
 
   return (
-    <rb.Offcanvas className={styles['report-overlay']} show={show} onHide={onHide} placement="bottom">
-      <rb.Offcanvas.Header closeButton>
-        <rb.Offcanvas.Title>{t('earn.report.title')}</rb.Offcanvas.Title>
+    <rb.Offcanvas
+      className={`offcanvas-fullscreen ${styles.overlayContainer}`}
+      show={show}
+      onHide={onHide}
+      placement="bottom"
+    >
+      <rb.Offcanvas.Header>
+        <rb.Container>
+          <div className="w-100 d-flex">
+            <div className="d-flex align-items-center flex-1">
+              <rb.Offcanvas.Title>{t('earn.report.title')}</rb.Offcanvas.Title>
+            </div>
+            <div>
+              <rb.Button variant="link" className="unstyled pe-0" onClick={onHide}>
+                <Sprite symbol="cancel" width="32" height="32" />
+              </rb.Button>
+            </div>
+          </div>
+        </rb.Container>
       </rb.Offcanvas.Header>
       <rb.Offcanvas.Body>
-        <EarnReport />
+        <rb.Container fluid="md" className="py-4 py-sm-5">
+          <EarnReport />
+        </rb.Container>
       </rb.Offcanvas.Body>
     </rb.Offcanvas>
   )

diff --git a/src/components/Orderbook.module.css b/src/components/Orderbook.module.css
@@ -1,10 +1,57 @@
-.orderbook-overlay {
-  width: 100vw !important;
-  height: 100vh !important;
-  z-index: 1100 !important;
-}
-
 .orderbook-line-placeholder {
   height: 2.625rem;
   margin: 1px 0;
 }
+
+.overlayContainer .orderbookContainer {
+  display: flex;
+  flex-direction: column;
+  gap: 2.5rem;
+  background-color: var(--bs-body-bg);
+}
+
+@media only screen and (min-width: 768px) {
+  .overlayContainer .orderbookContainer {
+    padding: 2rem;
+    border-radius: 0.5rem;
+  }
+}
+
+.overlayContainer .orderbookContainer > .titleBar {
+  min-height: 3.6rem;
+  display: flex;
+  justify-content: space-between;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.5rem;
+  padding: 0 0 0.8rem 0;
+  background-color: var(--bs-gray-100);
+}
+
+@media only screen and (min-width: 768px) {
+  .overlayContainer .orderbookContainer > .titleBar {
+    align-items: center;
+    padding: 0.8rem 1rem;
+    border-radius: 0.6rem;
+  }
+}
+
+@media only screen and (min-width: 768px) {
+  .overlayContainer .orderbookContainer > .titleBar {
+    flex-direction: row;
+  }
+}
+
+:root[data-theme='dark'] .overlayContainer .orderbookContainer > .titleBar {
+  background-color: var(--bs-gray-800);
+}
+
+.overlayContainer .orderbookContainer > .titleBar .refreshButton {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 2rem;
+  height: 2rem;
+  padding: 0.1rem;
+  border: none;
+}