Fix coordinator selector maker page (#1157)

* Fix coordinator selector on Maker page

* Refactor onUpdate naming

frontend/src/components/BookTable/BookControl.tsx

@@ -20,7 +20,7 @@ import { AppContext, type UseAppStoreType } from '../../contexts/AppContext';
 
 import CheckBoxOutlineBlankIcon from '@mui/icons-material/CheckBoxOutlineBlank';
 import SwapCalls from '@mui/icons-material/SwapCalls';
-import { FederationContext, UseFederationStoreType } from '../../contexts/FederationContext';
+import { FederationContext, type UseFederationStoreType } from '../../contexts/FederationContext';
 import RobotAvatar from '../RobotAvatar';
 
 interface BookControlProps {

frontend/src/components/Dialogs/Coordinator.tsx

@@ -545,7 +545,7 @@ const CoordinatorDialog = ({ open = false, onClose, network, shortAlias }: Props
 
                   <Divider />
 
-                  {coordinator?.info?.swap_enabled === false ? (
+                  {!coordinator?.info?.swap_enabled ? (
                     <ListItem {...listItemProps}>
                       <ListItemIcon>
                         <LinkIcon />

frontend/src/components/MakerForm/MakerForm.tsx

@@ -2,7 +2,6 @@ import React, { useContext, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import {
   InputAdornment,
-  LinearProgress,
   ButtonGroup,
   Slider,
   Switch,
@@ -103,7 +102,7 @@ const MakerForm = ({
 
   useEffect(() => {
     updateCoordinatorInfo();
-  }, [maker.coordinator]);
+  }, [maker.coordinator, coordinatorUpdatedAt]);
 
   const updateCoordinatorInfo = (): void => {
     if (maker.coordinator != null) {
@@ -516,7 +515,9 @@ const MakerForm = ({
       (makerHasAmountRange && (minAmountError || maxAmountError)) ||
       (!makerHasAmountRange && maker.amount <= 0) ||
       (maker.isExplicit && (maker.badSatoshisText !== '' || maker.satoshis === '')) ||
-      (!maker.isExplicit && maker.badPremiumText !== '')
+      (!maker.isExplicit && maker.badPremiumText !== '') ||
+      federation.getCoordinator(maker.coordinator)?.info === undefined ||
+      federation.getCoordinator(maker.coordinator)?.limits === undefined
     );
   }, [maker, amountLimits, coordinatorUpdatedAt, fav.type, makerHasAmountRange]);
 
@@ -613,11 +614,6 @@ const MakerForm = ({
         }}
         zoom={maker.latitude != null && maker.longitude != null ? 6 : undefined}
       />
-      <Collapse in={Object.keys(limits).lenght === 0}>
-        <div style={{ display: Object.keys(limits) === 0 ? '' : 'none' }}>
-          <LinearProgress />
-        </div>
-      </Collapse>
       <Collapse in={!(Object.keys(limits).lenght === 0 || collapseAll)}>
         <Grid container justifyContent='space-between' spacing={0} sx={{ maxHeight: '1em' }}>
           <Grid item>
@@ -1165,10 +1161,10 @@ const MakerForm = ({
       </Collapse>
 
       <SelectCoordinator
-        coordinator={maker.coordinator}
+        coordinatorAlias={maker.coordinator}
-        setCoordinator={(coordinator) => {
+        setCoordinator={(coordinatorAlias) => {
           setMaker((maker) => {
-            return { ...maker, coordinator };
+            return { ...maker, coordinator: coordinatorAlias };
           });
         }}
       />

frontend/src/components/MakerForm/SelectCoordinator.tsx

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react';
+import React, { useContext, useMemo } from 'react';
 import {
   Grid,
   Select,
@@ -7,6 +7,7 @@ import {
   Tooltip,
   Typography,
   type SelectChangeEvent,
+  CircularProgress,
 } from '@mui/material';
 
 import RobotAvatar from '../RobotAvatar';
@@ -16,13 +17,17 @@ import { useTranslation } from 'react-i18next';
 import { FederationContext, type UseFederationStoreType } from '../../contexts/FederationContext';
 
 interface SelectCoordinatorProps {
-  coordinator: string;
+  coordinatorAlias: string;
-  setCoordinator: (coordinator: string) => void;
+  setCoordinator: (coordinatorAlias: string) => void;
 }
 
-const SelectCoordinator: React.FC<SelectCoordinatorProps> = ({ coordinator, setCoordinator }) => {
+const SelectCoordinator: React.FC<SelectCoordinatorProps> = ({
+  coordinatorAlias,
+  setCoordinator,
+}) => {
   const { setOpen } = useContext<UseAppStoreType>(AppContext);
-  const { federation, sortedCoordinators } = useContext<UseFederationStoreType>(FederationContext);
+  const { federation, sortedCoordinators, coordinatorUpdatedAt } =
+    useContext<UseFederationStoreType>(FederationContext);
   const theme = useTheme();
   const { t } = useTranslation();
 
@@ -36,6 +41,11 @@ const SelectCoordinator: React.FC<SelectCoordinatorProps> = ({ coordinator, setC
     setCoordinator(e.target.value);
   };
 
+  const coordinator = useMemo(
+    () => federation.getCoordinator(coordinatorAlias),
+    [coordinatorUpdatedAt],
+  );
+
   return (
     <Grid item>
       <Tooltip
@@ -68,17 +78,25 @@ const SelectCoordinator: React.FC<SelectCoordinatorProps> = ({ coordinator, setC
               xs={3}
               sx={{ cursor: 'pointer', position: 'relative', left: '0.3em', bottom: '0.1em' }}
               onClick={() => {
-                onClickCurrentCoordinator(coordinator);
+                onClickCurrentCoordinator(coordinatorAlias);
               }}
             >
               <Grid item>
                 <RobotAvatar
-                  shortAlias={coordinator}
+                  shortAlias={coordinatorAlias}
                   style={{ width: '3em', height: '3em' }}
                   smooth={true}
                   flipHorizontally={false}
                   small={true}
                 />
+                {(coordinator?.info === undefined ||
+                  Object.keys(coordinator?.limits).length === 0) && (
+                  <CircularProgress
+                    size={49}
+                    thickness={5}
+                    style={{ marginTop: -48, position: 'absolute' }}
+                  />
+                )}
               </Grid>
             </Grid>
 
@@ -90,20 +108,17 @@ const SelectCoordinator: React.FC<SelectCoordinatorProps> = ({ coordinator, setC
                 inputProps={{
                   style: { textAlign: 'center' },
                 }}
-                value={coordinator}
+                value={coordinatorAlias}
                 onChange={handleCoordinatorChange}
                 disableUnderline
               >
                 {sortedCoordinators.map((shortAlias: string): JSX.Element | null => {
                   let row: JSX.Element | null = null;
-                  if (
+                  const item = federation.getCoordinator(shortAlias);
-                    shortAlias === coordinator ||
+                  if (item.enabled === true) {
-                    (federation.getCoordinator(shortAlias).enabled === true &&
-                      federation.getCoordinator(shortAlias).info !== undefined)
-                  ) {
                     row = (
                       <MenuItem key={shortAlias} value={shortAlias}>
-                        <Typography>{federation.getCoordinator(shortAlias).longAlias}</Typography>
+                        <Typography>{item.longAlias}</Typography>
                       </MenuItem>
                     );
                   }

frontend/src/components/OrderDetails/index.tsx

@@ -40,7 +40,6 @@ import type Coordinator from '../../models';
 import { statusBadgeColor, pn, amountToString, computeSats } from '../../utils';
 import TakeButton from './TakeButton';
 import { F2fMapDialog } from '../Dialogs';
-import { GarageContext, type UseGarageStoreType } from '../../contexts/GarageContext';
 import { type UseFederationStoreType, FederationContext } from '../../contexts/FederationContext';
 import { type Order } from '../../models';
 

frontend/src/contexts/FederationContext.tsx

@@ -106,11 +106,11 @@ export const FederationContextProvider = ({
   useEffect(() => {
     // On bitcoin network change we reset book, limits and federation info and fetch everything again
     const newFed = initialFederationContext.federation;
-    newFed.registerHook('onFederationReady', () => {
+    newFed.registerHook('onFederationUpdate', () => {
-      setCoordinatorUpdatedAt(new Date().toISOString());
+      setFederationUpdatedAt(new Date().toISOString());
     });
     newFed.registerHook('onCoordinatorUpdate', () => {
-      setFederationUpdatedAt(new Date().toISOString());
+      setCoordinatorUpdatedAt(new Date().toISOString());
     });
     void newFed.start(origin, settings, hostUrl);
     setFederation(newFed);

frontend/src/models/Exchange.model.ts

@@ -43,7 +43,7 @@ export const updateExchangeInfo = (federation: Federation): ExchangeInfo => {
       premiums[index] = coordinator.info.last_day_nonkyc_btc_premium;
       volumes[index] = coordinator.info.last_day_volume;
       highestVersion = getHigherVer(highestVersion, coordinator.info.version);
-      active_robots_today = Math.max(active_robots_today, coordinator.info['active_robots_today']);
+      active_robots_today = Math.max(active_robots_today, coordinator.info.active_robots_today);
 
       aggregations.forEach((key: any) => {
         info[key] = Number(info[key]) + Number(coordinator.info[key]);

frontend/src/models/Federation.model.ts

@@ -11,7 +11,7 @@ import defaultFederation from '../../static/federation.json';
 import { getHost } from '../utils';
 import { updateExchangeInfo } from './Exchange.model';
 
-type FederationHooks = 'onCoordinatorUpdate' | 'onFederationReady';
+type FederationHooks = 'onCoordinatorUpdate' | 'onFederationUpdate';
 
 export class Federation {
   constructor() {
@@ -34,7 +34,7 @@ export class Federation {
     this.book = [];
     this.hooks = {
       onCoordinatorUpdate: [],
-      onFederationReady: [],
+      onFederationUpdate: [],
     };
     this.loading = true;
   }
@@ -67,7 +67,7 @@ export class Federation {
     this.loading = this.exchange.loadingCoordinators > 0;
     if (Object.values(this.coordinators).every((coor) => coor.isUpdated())) {
       this.updateExchange();
-      this.triggerHook('onFederationReady');
+      this.triggerHook('onFederationUpdate');
     }
   };
 
@@ -119,6 +119,7 @@ export class Federation {
 
   updateExchange = (): void => {
     this.exchange.info = updateExchangeInfo(this);
+    this.triggerHook('onFederationUpdate');
   };
 
   // Fetchs

frontend/src/models/Garage.model.ts

@@ -126,7 +126,7 @@ class Garage {
   ) => {
     if (!token || !shortAlias) return;
 
-    let slot = this.getSlot(token);
+    const slot = this.getSlot(token);
 
     if (slot != null) {
       slot.updateRobot(shortAlias, { token, ...attributes });

frontend/src/utils/filterOrders.ts

@@ -69,13 +69,13 @@ const filterOrders = function ({
   const filteredOrders = orders.filter((order) => {
     const typeChecks = order.type === baseFilter.type || baseFilter.type == null;
     const modeChecks = baseFilter.mode === 'fiat' ? !(order.currency === 1000) : true;
-    const premiumChecks = premium != null ? filterByPremium(order, premium) : true;
+    const premiumChecks = premium !== null ? filterByPremium(order, premium) : true;
     const currencyChecks = order.currency === baseFilter.currency || baseFilter.currency === 0;
     const paymentMethodChecks =
       paymentMethods.length > 0 ? filterByPayment(order, paymentMethods) : true;
-    const amountChecks = amountFilter != null ? filterByAmount(order, amountFilter) : true;
+    const amountChecks = amountFilter !== null ? filterByAmount(order, amountFilter) : true;
     const hostChecks =
-      baseFilter.coordinator != 'any' ? filterByHost(order, baseFilter.coordinator) : true;
+      baseFilter.coordinator !== 'any' ? filterByHost(order, baseFilter.coordinator) : true;
     return (
       typeChecks &&
       modeChecks &&