Display maker status in the NavBar and an alert if maker is offline

Warn the users that some functionality might be unavailable if there is no maker
online.

Co-authored-by: rishflab <rishflab@hotmail.com>

taker-frontend/src/App.tsx

@@ -93,6 +93,8 @@ export const App = () => {
     const cfdsOrUndefined = useLatestEvent<Cfd[]>(source, "cfds", intoCfd);
     let cfds = cfdsOrUndefined ? cfdsOrUndefined! : [];
     cfds.sort((a, b) => a.order_id.localeCompare(b.order_id));
+    const connectedToMakerOrUndefined = useLatestEvent<boolean>(source, "maker_status");
+    const connectedToMaker = connectedToMakerOrUndefined ? connectedToMakerOrUndefined! : false;
 
     let [quantity, setQuantity] = useState("0");
     let [margin, setMargin] = useState("0");
@@ -145,7 +147,7 @@ export const App = () => {
 
     return (
         <>
-            <Nav walletInfo={walletInfo} />
+            <Nav walletInfo={walletInfo} connectedToMaker={connectedToMaker} />
             <Box textAlign="center" padding={3}>
                 <Routes>
                     <Route path="/wallet" element={<Wallet walletInfo={walletInfo} />} />
@@ -157,6 +159,7 @@ export const App = () => {
                             </Center>
                             <VStack divider={<StackDivider borderColor="gray.500" />} spacing={4}>
                                 <Trade
+                                    connectedToMaker={connectedToMaker}
                                     orderId={order?.id}
                                     quantity={format(effectiveQuantity)}
                                     maxQuantity={max_quantity || 0}

taker-frontend/src/components/NavBar.tsx

@@ -3,6 +3,7 @@ import {
     Box,
     Button,
     Flex,
+    Heading,
     Image,
     Menu,
     MenuButton,
@@ -20,9 +21,10 @@ import { WalletInfo } from "./Types";
 
 interface NavProps {
     walletInfo: WalletInfo | null;
+    connectedToMaker: boolean;
 }
 
-export default function Nav({ walletInfo }: NavProps) {
+export default function Nav({ walletInfo, connectedToMaker }: NavProps) {
     const navigate = useNavigate();
 
     const { toggleColorMode } = useColorMode();
@@ -55,7 +57,7 @@ export default function Nav({ walletInfo }: NavProps) {
                             <MenuItem>Settings</MenuItem>
                         </MenuList>
                     </Menu>
-
+                    <Heading size={"sm"}>{"Maker status: " + (connectedToMaker ? "Online" : "Offline")}</Heading>
                     <Flex alignItems={"center"}>
                         <Stack direction={"row"} spacing={7}>
                             <Button onClick={toggleColorMode} bg={"transparent"}>

taker-frontend/src/components/Trade.tsx

@@ -51,6 +51,7 @@ import { CfdOrderRequestPayload } from "./Types";
 const MotionBox = motion<BoxProps>(Box);
 
 interface TradeProps {
+    connectedToMaker: boolean;
     orderId?: string;
     minQuantity: number;
     maxQuantity: number;
@@ -81,6 +82,7 @@ function AlertBox({ title, description }: AlertBoxProps) {
 
 const Trade = (
     {
+        connectedToMaker,
         minQuantity,
         maxQuantity,
         referencePrice: referencePriceAsNumber,
@@ -130,20 +132,33 @@ const Trade = (
 
     let alertBox;
 
-    if (balanceTooLow) {
-        alertBox = <AlertBox title={"Your balance is too low!"} description={"Pleas deposit more into you wallet."} />;
-    }
-    if (quantityTooHigh) {
-        alertBox = <AlertBox title={"Quantity too high!"} description={`Max available liquidity is ${maxQuantity}`} />;
-    }
-    if (quantityTooLow || !quantityGreaterZero) {
-        alertBox = <AlertBox title={"Quantity too low!"} description={`Min quantity is ${minQuantity}`} />;
-    }
-    if (!orderId) {
+    if (!connectedToMaker) {
         alertBox = <AlertBox
-            title={"No liquidity!"}
-            description={"The maker you are connected has not create any offers"}
+            title={"No maker!"}
+            description={"You are not connected to any maker. Functionality may be limited"}
         />;
+    } else {
+        if (balanceTooLow) {
+            alertBox = <AlertBox
+                title={"Your balance is too low!"}
+                description={"Pleas deposit more into you wallet."}
+            />;
+        }
+        if (quantityTooHigh) {
+            alertBox = <AlertBox
+                title={"Quantity too high!"}
+                description={`Max available liquidity is ${maxQuantity}`}
+            />;
+        }
+        if (quantityTooLow || !quantityGreaterZero) {
+            alertBox = <AlertBox title={"Quantity too low!"} description={`Min quantity is ${minQuantity}`} />;
+        }
+        if (!orderId) {
+            alertBox = <AlertBox
+                title={"No liquidity!"}
+                description={"The maker you are connected has not create any offers"}
+            />;
+        }
     }
 
     return (