Fix order flow (#1040)

Fix Order flow

frontend/src/basic/OrderPage/index.tsx

@@ -56,6 +56,10 @@ const OrderPage = (): JSX.Element => {
 
   useEffect(() => {
     setCurrentOrder(null);
+    updateCurrentOrder();
+  }, [currentOrderId]);
+
+  const updateCurrentOrder = () => {
     if (currentOrderId !== null) {
       const coordinator = federation.getCoordinator(params.shortAlias ?? '');
       const slot = garage.getSlot();
@@ -79,7 +83,7 @@ const OrderPage = (): JSX.Element => {
           });
       }
     }
-  }, [currentOrderId]);
+  };
 
   const onClickCoordinator = function (): void {
     if (currentOrder?.shortAlias != null) {
@@ -97,8 +101,8 @@ const OrderPage = (): JSX.Element => {
     <OrderDetails
       shortAlias={String(currentOrder.shortAlias)}
       currentOrder={currentOrder}
+      updateCurrentOrder={updateCurrentOrder}
       onClickCoordinator={onClickCoordinator}
-      baseUrl={baseUrl}
       onClickGenerateRobot={() => {
         navigate('/robot');
       }}

frontend/src/basic/RobotPage/RobotProfile.tsx

@@ -69,6 +69,7 @@ const RobotProfile = ({
 
   const handleChangeSlot = (e: SelectChangeEvent<number | 'loading'>): void => {
     garage.currentSlot = e.target.value;
+    setInputToken(garage.getSlot()?.getRobot()?.token ?? '');
     setLoading(true);
   };
 

frontend/src/components/OrderDetails/TakeButton.tsx

@@ -32,6 +32,7 @@ import { type UseFederationStoreType, FederationContext } from '../../contexts/F
 interface TakeButtonProps {
   currentOrder: Order;
   info?: Info;
+  updateCurrentOrder?: () => void;
   onClickGenerateRobot?: () => void;
 }
 
@@ -44,6 +45,7 @@ const closeAll = { inactiveMaker: false, confirmation: false };
 const TakeButton = ({
   currentOrder,
   info,
+  updateCurrentOrder = () => null,
   onClickGenerateRobot = () => null,
 }: TakeButtonProps): JSX.Element => {
   const { t } = useTranslation();
@@ -333,11 +335,10 @@ const TakeButton = ({
         { tokenSHA256: robot?.tokenSHA256 },
       )
       .then((data) => {
-        setLoadingTake(false);
         if (data?.bad_request !== undefined) {
           setBadRequest(data.bad_request);
         } else {
-          garage.updateOrder(data as Order);
+          updateCurrentOrder();
           setBadRequest('');
         }
       })

frontend/src/components/OrderDetails/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useMemo, useContext } from 'react';
+import React, { useState, useMemo, useContext, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import {
   List,
@@ -47,27 +47,34 @@ import { type Order } from '../../models';
 interface OrderDetailsProps {
   shortAlias: string;
   currentOrder: Order;
+  updateCurrentOrder?: () => void;
   onClickCoordinator?: () => void;
-  baseUrl: string;
   onClickGenerateRobot?: () => void;
 }
 
 const OrderDetails = ({
   shortAlias,
   currentOrder,
+  updateCurrentOrder = () => null,
   onClickCoordinator = () => null,
-  baseUrl,
   onClickGenerateRobot = () => null,
 }: OrderDetailsProps): JSX.Element => {
   const { t } = useTranslation();
   const theme = useTheme();
   const { federation } = useContext<UseFederationStoreType>(FederationContext);
   const { orderUpdatedAt } = useContext<UseGarageStoreType>(GarageContext);
-  const [coordinator] = useState<Coordinator | null>(federation.getCoordinator(shortAlias));
-  const currencyCode: string = currencies[(currentOrder?.currency ?? 1).toString()];
+  const [coordinator, setCoordinator] = useState<Coordinator | null>(
+    federation.getCoordinator(shortAlias),
+  );
+  const [currencyCode, setCurrecyCode] = useState<string | null>();
   const [showSatsDetails, setShowSatsDetails] = useState<boolean>(false);
   const [openWorldmap, setOpenWorldmap] = useState<boolean>(false);
 
+  useEffect(() => {
+    setCoordinator(federation.getCoordinator(shortAlias));
+    setCurrecyCode(currencies[(currentOrder?.currency ?? 1).toString()]);
+  }, [orderUpdatedAt]);
+
   const amountString = useMemo(() => {
     if (currentOrder === null || currentOrder.amount === null) return;
 
@@ -262,7 +269,7 @@ const OrderDetails = ({
             {' '}
             <Grid container direction='row' justifyContent='center' alignItems='center'>
               <Grid item xs={2}>
-                <RobotAvatar shortAlias={coordinator.shortAlias} coordinator={true} small={true} />
+                <RobotAvatar shortAlias={coordinator.shortAlias} small={true} />
               </Grid>
               <Grid item xs={4}>
                 <ListItemText primary={coordinator.longAlias} secondary={t('Order host')} />
@@ -527,6 +534,7 @@ const OrderDetails = ({
             <TakeButton
               currentOrder={currentOrder}
               info={coordinator.info}
+              updateCurrentOrder={updateCurrentOrder}
               onClickGenerateRobot={onClickGenerateRobot}
             />
           </Grid>

frontend/src/components/TradeBox/EncryptedChat/EncryptedSocketChat/index.tsx

@@ -98,16 +98,20 @@ const EncryptedSocketChat: React.FC<Props> = ({
   }, [serverMessages]);
 
   const connectWebsocket = (): void => {
+    const robot = garage.getSlot()?.getRobot();
+
+    if (!robot) return;
+
     websocketClient
       .open(
-        `ws://${window.location.host}/ws/chat/${orderId}/?token_sha256_hex=${sha256(robot.token)}`,
+        `ws://${window.location.host}/ws/chat/${orderId}/?token_sha256_hex=${sha256(robot?.token)}`,
       )
       .then((connection) => {
         setConnection(connection);
         setConnected(true);
 
         connection.send({
-          message: garage.getSlot()?.getRobot()?.pubKey,
+          message: robot?.pubKey,
           nick: userNick,
         });