From 830ce592f8fecfb238da510bf31dfc795ec29cac Mon Sep 17 00:00:00 2001
From: Snehal Srivastava
 <118104081+SnehalSrivastava27@users.noreply.github.com>
Date: Thu, 22 Aug 2024 16:02:12 +0530
Subject: [PATCH] ui(footer): add Orderbook to footer (#814)

---
 src/components/Footer.tsx            | 37 +++++++++++++++++++++++-----
 src/i18n/locales/en/translation.json |  3 ++-
 src/index.css                        |  4 +--
 3 files changed, 35 insertions(+), 9 deletions(-)

diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index b73fe0338..dddfdabef 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -12,6 +12,7 @@ import { InfoModal } from './Modal'
 import { isDebugFeatureEnabled, isDevMode } from '../constants/debugFeatures'
 import { routes } from '../constants/routes'
 import { toSemVer } from '../utils'
+import { OrderbookOverlay } from './Orderbook'
 import packageInfo from '../../package.json'
 
 const APP_DISPLAY_VERSION = (() => {
@@ -29,8 +30,10 @@ export default function Footer() {
 
   const [showBetaWarning, setShowBetaWarning] = useState(false)
   const [showCheatsheet, setShowCheatsheet] = useState(false)
+  const [isShowOrderbook, setIsShowOrderbook] = useState(false)
 
   const cheatsheetEnabled = useMemo(() => !!currentWallet, [currentWallet])
+  const orderbookEnabled = useMemo(() => !!currentWallet, [currentWallet])
   const websocketConnected = useMemo(() => websocketState === WebSocket.OPEN, [websocketState])
 
   useEffect(() => {
@@ -82,7 +85,7 @@ export default function Footer() {
               </Trans>
             </div>
           </div>
-          <div className="d-flex order-1 flex-1 flex-grow-0 justify-content-center align-items-center">
+          <div className="d-flex order-1 flex-1 flex-grow-0 justify-content-center align-items-center gap-1">
             {cheatsheetEnabled && (
               <>
                 <Cheatsheet show={showCheatsheet} onHide={() => setShowCheatsheet(false)} />
@@ -90,12 +93,34 @@ export default function Footer() {
                   <rb.Button
                     type="button"
                     variant="link"
-                    className="cheatsheet-link nav-link text-start border-0 px-2"
+                    className="nav-link text-start border-0 px-2"
                     onClick={() => setShowCheatsheet(true)}
                   >
                     <div className="d-flex justify-content-center align-items-center">
                       <Sprite symbol="file-outline" width="24" height="24" />
-                      <div className="ps-0">{t('footer.cheatsheet')}</div>
+                      <div className="ps-1">{t('footer.cheatsheet')}</div>
+                    </div>
+                  </rb.Button>
+                </rb.Nav.Item>
+              </>
+            )}
+            {orderbookEnabled && (
+              <>
+                <OrderbookOverlay
+                  show={isShowOrderbook}
+                  onHide={() => setIsShowOrderbook(false)}
+                  nickname={serviceInfo?.nickname ?? undefined}
+                />
+                <rb.Nav.Item>
+                  <rb.Button
+                    type="button"
+                    variant="link"
+                    className="nav-link text-start border-0 px-2"
+                    onClick={() => setIsShowOrderbook(true)}
+                  >
+                    <div className="d-flex justify-content-center align-items-center">
+                      <Sprite symbol="globe" width="24" height="24" />
+                      <div className="ps-1">{t('footer.orderbook')}</div>
                     </div>
                   </rb.Button>
                 </rb.Nav.Item>
@@ -104,13 +129,13 @@ export default function Footer() {
           </div>
           <div className="d-flex flex-1 order-2 justify-content-end align-items-center gap-1">
             {isDebugFeatureEnabled('devSetupPage') && (
-              <div className="d-none d-md-block text-small text-start mx-1">
+              <div className="d-none d-md-block text-small text-start">
                 <Link className="text-warning" to={routes.__devSetup}>
                   Dev Setup
                 </Link>
               </div>
             )}
-            <div className="text-small text-start text-secondary mx-1">
+            <div className="text-small text-start text-secondary me-1">
               <a
                 href="https://github.com/joinmarket-webui/jam/tags"
                 target="_blank"
@@ -120,7 +145,7 @@ export default function Footer() {
                 v{APP_DISPLAY_VERSION}
               </a>
             </div>
-            <div className="d-flex gap-2 me-2">
+            <div className="d-flex gap-2 me-1">
               <a
                 href="https://github.com/joinmarket-webui/jam"
                 target="_blank"
diff --git a/src/i18n/locales/en/translation.json b/src/i18n/locales/en/translation.json
index c425b388e..6acf6c319 100644
--- a/src/i18n/locales/en/translation.json
+++ b/src/i18n/locales/en/translation.json
@@ -55,7 +55,8 @@
     "warning_alert_button_ok": "Fine with me.",
     "cheatsheet": "Cheatsheet",
     "websocket_connected": "Websocket connected",
-    "websocket_disconnected": "Websocket disconnected"
+    "websocket_disconnected": "Websocket disconnected",
+    "orderbook": "Orderbook"
   },
   "onboarding": {
     "splashscreen_title": "Jam",
diff --git a/src/index.css b/src/index.css
index 748ffb2a3..ebefaba66 100644
--- a/src/index.css
+++ b/src/index.css
@@ -483,11 +483,11 @@ table.striped tr:hover td {
   }
 }
 
-footer .cheatsheet-link.nav-link {
+footer .nav-link {
   color: var(--bs-gray-900);
 }
 
-:root[data-theme='dark'] footer .cheatsheet-link.nav-link {
+:root[data-theme='dark'] footer .nav-link {
   color: var(--bs-gray-400);
 }