Add Tradebox, OrderDetails, Notifications, OrderPage functional compo…

…nents. (#315) * Re-init new tradebox * Wip progress on OrderDetails * Wip 2 OrderDetails * Fix multiple requests on load * Add functional Order page * Fixes order page * Fix delete storage * Fix order page style * Add Public order prompt * Add paused order prompt * Add expired prompt * Create statusToContract logics * Move fetch order loop to Main * Add payout and wait prompts * Fix order fetch on badOrder * Fix styles * Add chat and dispute prompts * Add remaining prompts * Fix style * Add notifications component * Fix take order style, add more notifications * Add page title notification * Add more notifications and small tradebox fixes * Small fixes * Small fixes to routing failure prompt * Remove old trade box * Add bad take order
RoboSats · Nov 21, 2022 · 6b2dedc · 6b2dedc
1 parent 2507435
commit 6b2dedc
Show file tree

Hide file tree

Showing 69 changed files with 4,451 additions and 5,337 deletions.
diff --git a/frontend/src/basic/BookPage/index.tsx b/frontend/src/basic/BookPage/index.tsx
@@ -19,7 +19,9 @@ interface BookPageProps {
   fetchLimits: () => void;
   fav: Favorites;
   setFav: (state: Favorites) => void;
+  onViewOrder: () => void;
   fetchBook: () => void;
+  clearOrder: () => void;
   windowSize: { width: number; height: number };
   lastDayPremium: number;
   maker: Maker;
@@ -36,8 +38,10 @@ const BookPage = ({
   book = { orders: [], loading: true },
   fetchBook,
   fetchLimits,
+  clearOrder,
   fav,
   setFav,
+  onViewOrder,
   maker,
   setMaker,
   windowSize,
@@ -79,6 +83,7 @@ const BookPage = ({
       history.push('/order/' + id);
       setPage('order');
       setCurrentOrder(id);
+      onViewOrder();
     } else {
       setOpenNoRobot(true);
     }
@@ -128,6 +133,7 @@ const BookPage = ({
               setPage={setPage}
               hasRobot={hasRobot}
               onOrderCreated={(id) => {
+                clearOrder();
                 setCurrentOrder(id);
                 setPage('order');
                 history.push('/order/' + id);

diff --git a/frontend/src/basic/Main.tsx b/frontend/src/basic/Main.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { HashRouter, BrowserRouter, Switch, Route, useHistory } from 'react-router-dom';
+import { HashRouter, BrowserRouter, Switch, Route } from 'react-router-dom';
 import { useTheme, Box, Slide, Typography } from '@mui/material';
 
 import UserGenPage from './UserGenPage';
@@ -22,6 +22,7 @@ import {
   defaultMaker,
   defaultInfo,
   Coordinator,
+  Order,
 } from '../models';
 
 import { apiClient } from '../services/api';
@@ -30,6 +31,7 @@ import { sha256 } from 'js-sha256';
 
 import defaultCoordinators from '../../static/federation.json';
 import { useTranslation } from 'react-i18next';
+import Notifications from '../components/Notifications';
 
 const getWindowSize = function (fontSize: number) {
   // returns window size in EM units
@@ -39,6 +41,29 @@ const getWindowSize = function (fontSize: number) {
   };
 };
 
+// Refresh delays (ms) according to Order status
+const statusToDelay = [
+  3000, // 'Waiting for maker bond'
+  35000, // 'Public'
+  180000, // 'Paused'
+  3000, // 'Waiting for taker bond'
+  999999, // 'Cancelled'
+  999999, // 'Expired'
+  8000, // 'Waiting for trade collateral and buyer invoice'
+  8000, // 'Waiting only for seller trade collateral'
+  8000, // 'Waiting only for buyer invoice'
+  10000, // 'Sending fiat - In chatroom'
+  10000, // 'Fiat sent - In chatroom'
+  100000, // 'In dispute'
+  999999, // 'Collaboratively cancelled'
+  10000, // 'Sending satoshis to buyer'
+  999999, // 'Sucessful trade'
+  30000, // 'Failed lightning network routing'
+  300000, // 'Wait for dispute resolution'
+  300000, // 'Maker lost dispute'
+  300000, // 'Taker lost dispute'
+];
+
 interface SlideDirection {
   in: 'left' | 'right' | undefined;
   out: 'left' | 'right' | undefined;
@@ -51,6 +76,7 @@ interface MainProps {
 
 const Main = ({ settings, setSettings }: MainProps): JSX.Element => {
   const { t } = useTranslation();
+  const theme = useTheme();
 
   // All app data structured
   const [book, setBook] = useState<Book>({ orders: [], loading: true });
@@ -65,8 +91,10 @@ const Main = ({ settings, setSettings }: MainProps): JSX.Element => {
   const [baseUrl, setBaseUrl] = useState<string>('');
   const [fav, setFav] = useState<Favorites>({ type: null, currency: 0 });
 
-  const theme = useTheme();
-  const history = useHistory();
+  const [delay, setDelay] = useState<number>(60000);
+  const [timer, setTimer] = useState<NodeJS.Timer | undefined>(setInterval(() => null, delay));
+  const [order, setOrder] = useState<Order | undefined>(undefined);
+  const [badOrder, setBadOrder] = useState<string | undefined>(undefined);
 
   const Router = window.NativeRobosats === undefined ? BrowserRouter : HashRouter;
   const basename = window.NativeRobosats === undefined ? '' : window.location.pathname;
@@ -77,7 +105,8 @@ const Main = ({ settings, setSettings }: MainProps): JSX.Element => {
     in: undefined,
     out: undefined,
   });
-  const [currentOrder, setCurrentOrder] = useState<number | null>(null);
+
+  const [currentOrder, setCurrentOrder] = useState<number | undefined>(undefined);
 
   const navbarHeight = 2.5;
   const closeAll = {
@@ -100,8 +129,11 @@ const Main = ({ settings, setSettings }: MainProps): JSX.Element => {
     if (typeof window !== undefined) {
       window.addEventListener('resize', onResize);
     }
-    fetchBook();
-    fetchLimits();
+
+    if (baseUrl != '') {
+      fetchBook();
+      fetchLimits();
+    }
     return () => {
       if (typeof window !== undefined) {
         window.removeEventListener('resize', onResize);
@@ -164,11 +196,7 @@ const Main = ({ settings, setSettings }: MainProps): JSX.Element => {
   };
 
   useEffect(() => {
-    if (
-      open.stats ||
-      open.coordinator ||
-      info.version == { major: null, minor: null, patch: null }
-    ) {
+    if (open.stats || open.coordinator || info.coordinatorVersion == 'v?.?.?') {
       fetchInfo();
     }
   }, [open.stats, open.coordinator]);
@@ -196,7 +224,7 @@ const Main = ({ settings, setSettings }: MainProps): JSX.Element => {
         nickname: data.nickname,
         token: robot.token,
         loading: false,
-        avatarLoaded: robot.nickname === data.nickname ? true : false,
+        avatarLoaded: robot.nickname === data.nickname,
         activeOrderId: data.active_order_id ? data.active_order_id : null,
         lastOrderId: data.last_order_id ? data.last_order_id : null,
         referralCode: data.referral_code,
@@ -215,7 +243,7 @@ const Main = ({ settings, setSettings }: MainProps): JSX.Element => {
   };
 
   useEffect(() => {
-    if (baseUrl != '') {
+    if (baseUrl != '' && page != 'robot') {
       if (open.profile || (robot.token && robot.nickname === null)) {
         fetchRobot({ keys: false }); // fetch existing robot
       } else if (robot.token && robot.encPrivKey && robot.pubKey) {
@@ -224,6 +252,48 @@ const Main = ({ settings, setSettings }: MainProps): JSX.Element => {
     }
   }, [open.profile, baseUrl]);
 
+  // Fetch current order at load and in a loop
+  useEffect(() => {
+    if (currentOrder != undefined && (page == 'order' || (order == badOrder) == undefined)) {
+      fetchOrder();
+    }
+  }, [currentOrder, page]);
+
+  useEffect(() => {
+    clearInterval(timer);
+    setTimer(setInterval(fetchOrder, delay));
+    return () => clearInterval(timer);
+  }, [delay, currentOrder, page, badOrder]);
+
+  const orderReceived = function (data: any) {
+    if (data.bad_request != undefined) {
+      setBadOrder(data.bad_request);
+      setDelay(99999999);
+      setOrder(undefined);
+    } else {
+      setDelay(
+        data.status >= 0 && data.status <= 18
+          ? page == 'order'
+            ? statusToDelay[data.status]
+            : statusToDelay[data.status] * 5
+          : 99999999,
+      );
+      setOrder(data);
+      setBadOrder(undefined);
+    }
+  };
+
+  const fetchOrder = function () {
+    if (currentOrder != undefined) {
+      apiClient.get(baseUrl, '/api/order/?order_id=' + currentOrder).then(orderReceived);
+    }
+  };
+
+  const clearOrder = function () {
+    setOrder(undefined);
+    setBadOrder(undefined);
+  };
+
   return (
     <Router basename={basename}>
       {/* load robot avatar image, set avatarLoaded: true */}
@@ -233,6 +303,14 @@ const Main = ({ settings, setSettings }: MainProps): JSX.Element => {
         baseUrl={baseUrl}
         onLoad={() => setRobot({ ...robot, avatarLoaded: true })}
       />
+      <Notifications
+        order={order}
+        page={page}
+        openProfile={() => setOpen({ ...closeAll, profile: true })}
+        rewards={robot.earnedRewards}
+        setPage={setPage}
+        windowWidth={windowSize.width}
+      />
       {settings.network === 'testnet' ? (
         <div style={{ height: 0 }}>
           <Typography color='secondary' align='center'>
@@ -286,12 +364,17 @@ const Main = ({ settings, setSettings }: MainProps): JSX.Element => {
                 <BookPage
                   book={book}
                   fetchBook={fetchBook}
+                  onViewOrder={() => {
+                    setOrder(undefined);
+                    setDelay(10000);
+                  }}
                   limits={limits}
                   fetchLimits={fetchLimits}
                   fav={fav}
                   setFav={setFav}
                   maker={maker}
                   setMaker={setMaker}
+                  clearOrder={clearOrder}
                   lastDayPremium={info.last_day_nonkyc_btc_premium}
                   windowSize={windowSize}
                   hasRobot={robot.avatarLoaded}
@@ -316,6 +399,7 @@ const Main = ({ settings, setSettings }: MainProps): JSX.Element => {
                   fetchLimits={fetchLimits}
                   maker={maker}
                   setMaker={setMaker}
+                  clearOrder={clearOrder}
                   setPage={setPage}
                   setCurrentOrder={setCurrentOrder}
                   fav={fav}
@@ -338,11 +422,16 @@ const Main = ({ settings, setSettings }: MainProps): JSX.Element => {
               >
                 <div>
                   <OrderPage
-                    theme={theme}
-                    history={history}
-                    {...props}
-                    setPage={setPage}
                     baseUrl={baseUrl}
+                    order={order}
+                    setOrder={setOrder}
+                    setCurrentOrder={setCurrentOrder}
+                    badOrder={badOrder}
+                    locationOrderId={props.match.params.orderId}
+                    setBadOrder={setBadOrder}
+                    hasRobot={robot.avatarLoaded}
+                    windowSize={{ ...windowSize, height: windowSize.height - navbarHeight }}
+                    setPage={setPage}
                   />
                 </div>
               </Slide>
@@ -366,21 +455,23 @@ const Main = ({ settings, setSettings }: MainProps): JSX.Element => {
           </Route>
         </Switch>
       </Box>
-      <NavBar
-        nickname={robot.avatarLoaded ? robot.nickname : null}
-        color={settings.network === 'mainnet' ? 'primary' : 'secondary'}
-        width={windowSize.width}
-        height={navbarHeight}
-        page={page}
-        setPage={setPage}
-        open={open}
-        setOpen={setOpen}
-        closeAll={closeAll}
-        setSlideDirection={setSlideDirection}
-        currentOrder={currentOrder}
-        hasRobot={robot.avatarLoaded}
-        baseUrl={baseUrl}
-      />
+      <div style={{ alignContent: 'center', display: 'flex' }}>
+        <NavBar
+          nickname={robot.avatarLoaded ? robot.nickname : null}
+          color={settings.network === 'mainnet' ? 'primary' : 'secondary'}
+          width={windowSize.width}
+          height={navbarHeight}
+          page={page}
+          setPage={setPage}
+          open={open}
+          setOpen={setOpen}
+          closeAll={closeAll}
+          setSlideDirection={setSlideDirection}
+          currentOrder={currentOrder}
+          hasRobot={robot.avatarLoaded}
+          baseUrl={baseUrl}
+        />
+      </div>
       <MainDialogs
         open={open}
         setOpen={setOpen}

diff --git a/frontend/src/basic/MakerPage/index.tsx b/frontend/src/basic/MakerPage/index.tsx
@@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next';
 import { useHistory } from 'react-router-dom';
 import { Grid, Paper, Collapse, Typography } from '@mui/material';
 
-import { LimitList, Maker, Book, Favorites } from '../../models';
+import { LimitList, Maker, Book, Favorites, Order } from '../../models';
 
 import { filterOrders } from '../../utils';
 
@@ -20,6 +20,7 @@ interface MakerPageProps {
   maker: Maker;
   setFav: (state: Favorites) => void;
   setMaker: (state: Maker) => void;
+  clearOrder: () => void;
   windowSize: { width: number; height: number };
   hasRobot: boolean;
   setCurrentOrder: (state: number) => void;
@@ -35,6 +36,7 @@ const MakerPage = ({
   maker,
   setFav,
   setMaker,
+  clearOrder,
   windowSize,
   setCurrentOrder,
   setPage,
@@ -76,6 +78,7 @@ const MakerPage = ({
                 showControls={false}
                 showFooter={false}
                 showNoResults={false}
+                baseUrl={baseUrl}
               />
             </Grid>
           </Grid>
@@ -99,6 +102,7 @@ const MakerPage = ({
             maker={maker}
             setMaker={setMaker}
             onOrderCreated={(id) => {
+              clearOrder();
               setCurrentOrder(id);
               setPage('order');
               history.push('/order/' + id);

diff --git a/frontend/src/basic/NavBar/NavBar.tsx b/frontend/src/basic/NavBar/NavBar.tsx
@@ -1,7 +1,7 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useHistory } from 'react-router-dom';
-import { Tabs, Tab, Paper, useTheme, Tooltip } from '@mui/material';
+import { Tabs, Tab, Paper, useTheme } from '@mui/material';
 import MoreTooltip from './MoreTooltip';
 
 import { OpenDialogs } from '../MainDialogs';
@@ -30,7 +30,7 @@ interface NavBarProps {
   open: OpenDialogs;
   setOpen: (state: OpenDialogs) => void;
   closeAll: OpenDialogs;
-  currentOrder: number | null;
+  currentOrder: number | undefined;
   hasRobot: boolean;
   baseUrl: string;
   color: 'primary' | 'secondary';
@@ -151,7 +151,7 @@ const NavBar = ({
           sx={tabSx}
           label={smallBar ? undefined : t('Order')}
           value='order'
-          disabled={!hasRobot || currentOrder == null}
+          disabled={!hasRobot || currentOrder == undefined}
           icon={<Assignment />}
           iconPosition='start'
         />