OrderBook added in footer

src/components/BitcoinAmountInput.tsx

@@ -152,9 +152,7 @@ const BitcoinAmountInput = forwardRef(
             inputMode={inputType.inputMode}
             className={classNames('slashed-zeroes', className)}
             value={
-              inputType.type === 'text'
-                ? (field.value?.displayValue ?? '')
-                : String(field.value?.userRawInputValue ?? '')
+              inputType.type === 'text' ? field.value?.displayValue ?? '' : String(field.value?.userRawInputValue ?? '')
             }
             placeholder={placeholder}
             min={displayInputUnit === 'BTC' ? '0.00000001' : '1'}

src/components/Footer.tsx

@@ -12,8 +12,8 @@ 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 = (() => {
   const version = toSemVer(packageInfo.version)
   return !isDevMode() ? version.raw : `${version.major}.${version.minor}.${version.patch + 1}dev`
@@ -29,6 +29,7 @@ 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 websocketConnected = useMemo(() => websocketState === WebSocket.OPEN, [websocketState])
@@ -82,6 +83,26 @@ export default function Footer() {
               </Trans>
             </div>
           </div>
+          <rb.Col className="d-flex justify-content-center">
+            <OrderbookOverlay
+              show={isShowOrderbook}
+              onHide={() => setIsShowOrderbook(false)}
+              nickname={serviceInfo?.nickname ?? undefined}
+            />
+            <rb.Button
+              variant="outline-dark"
+              className="border-0 d-inline-flex align-items-center"
+              onClick={() => setIsShowOrderbook(true)}
+              style={{
+                backgroundColor: 'transparent',
+                borderColor: 'transparent',
+                color: 'inherit',
+              }}
+            >
+              <Sprite symbol="globe" width="24" height="24" className="me-2" />
+              {t('footer.orderbook')}
+            </rb.Button>
+          </rb.Col>
           <div className="d-flex order-1 flex-1 flex-grow-0 justify-content-center align-items-center">
             {cheatsheetEnabled && (
               <>
@@ -102,6 +123,21 @@ export default function Footer() {
               </>
             )}
           </div>
+          <rb.Col className="d-flex justify-content-center">
+            <OrderbookOverlay
+              show={isShowOrderbook}
+              onHide={() => setIsShowOrderbook(false)}
+              nickname={serviceInfo?.nickname ?? undefined}
+            />
+            <rb.Button
+              variant="outline-dark"
+              className="border-0 d-inline-flex align-items-center"
+              onClick={() => setIsShowOrderbook(true)}
+            >
+              <Sprite symbol="globe" width="24" height="24" className="me-2" />
+              {t('earn.button_show_orderbook')}
+            </rb.Button>
+          </rb.Col>
           <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">

src/components/Send/SendForm.tsx

@@ -67,7 +67,7 @@ function CollaborativeTransactionOptions({
     amount:
       selectedAmount?.isSweep && sourceJarBalance
         ? sourceJarBalance.calculatedAvailableBalanceInSats
-        : (selectedAmount?.value ?? null),
+        : selectedAmount?.value ?? null,
     numCollaborators: selectedNumCollaborators ?? null,
     isCoinjoin: true,
   })
@@ -134,8 +134,8 @@ function CollaborativeTransactionOptions({
           numCollaborators={selectedNumCollaborators ?? null}
           amount={
             selectedAmount?.isSweep
-              ? (sourceJarBalance?.calculatedAvailableBalanceInSats ?? null)
-              : (selectedAmount?.value ?? null)
+              ? sourceJarBalance?.calculatedAvailableBalanceInSats ?? null
+              : selectedAmount?.value ?? null
           }
           onClick={() => {
             setActiveFeeConfigModalSection('cj_fee')

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",