Fix coordinator selector maker page (#1157)

* Fix coordinator selector on Maker page

* Refactor onUpdate naming
This commit is contained in:
KoalaSat 2024-03-07 17:06:53 +01:00 committed by GitHub
parent 3604d2fbd0
commit 2d927249cd
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
10 changed files with 50 additions and 39 deletions

View File

@ -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 {

View File

@ -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 />

View File

@ -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}
setCoordinator={(coordinator) => {
coordinatorAlias={maker.coordinator}
setCoordinator={(coordinatorAlias) => {
setMaker((maker) => {
return { ...maker, coordinator };
return { ...maker, coordinator: coordinatorAlias };
});
}}
/>

View File

@ -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;
setCoordinator: (coordinator: string) => void;
coordinatorAlias: string;
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 (
shortAlias === coordinator ||
(federation.getCoordinator(shortAlias).enabled === true &&
federation.getCoordinator(shortAlias).info !== undefined)
) {
const item = federation.getCoordinator(shortAlias);
if (item.enabled === true) {
row = (
<MenuItem key={shortAlias} value={shortAlias}>
<Typography>{federation.getCoordinator(shortAlias).longAlias}</Typography>
<Typography>{item.longAlias}</Typography>
</MenuItem>
);
}

View File

@ -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';

View File

@ -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', () => {
setCoordinatorUpdatedAt(new Date().toISOString());
newFed.registerHook('onFederationUpdate', () => {
setFederationUpdatedAt(new Date().toISOString());
});
newFed.registerHook('onCoordinatorUpdate', () => {
setFederationUpdatedAt(new Date().toISOString());
setCoordinatorUpdatedAt(new Date().toISOString());
});
void newFed.start(origin, settings, hostUrl);
setFederation(newFed);

View File

@ -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]);

View File

@ -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

View File

@ -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 });

View File

@ -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 &&