Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix coordinator selector maker page #1157

Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion frontend/src/components/BookTable/BookControl.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

lintern auto-fix

import RobotAvatar from '../RobotAvatar';

interface BookControlProps {
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/Dialogs/Coordinator.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -545,7 +545,7 @@ const CoordinatorDialog = ({ open = false, onClose, network, shortAlias }: Props

<Divider />

{coordinator?.info?.swap_enabled === false ? (
{!coordinator?.info?.swap_enabled ? (
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

lintern auto-fix

<ListItem {...listItemProps}>
<ListItemIcon>
<LinkIcon />
Expand Down
18 changes: 7 additions & 11 deletions frontend/src/components/MakerForm/MakerForm.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@ import React, { useContext, useEffect, useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next';
import {
InputAdornment,
LinearProgress,
ButtonGroup,
Slider,
Switch,
Expand Down Expand Up @@ -103,7 +102,7 @@ const MakerForm = ({

useEffect(() => {
updateCoordinatorInfo();
}, [maker.coordinator]);
}, [maker.coordinator, coordinatorUpdatedAt]);
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

With this change Order current rate: should appear again bellow the create button


const updateCoordinatorInfo = (): void => {
if (maker.coordinator != null) {
Expand Down Expand Up @@ -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]);

Expand Down Expand Up @@ -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>
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I removed the linear progress in favor of the circular progress in coordinator's avatar

<Collapse in={!(Object.keys(limits).lenght === 0 || collapseAll)}>
<Grid container justifyContent='space-between' spacing={0} sx={{ maxHeight: '1em' }}>
<Grid item>
Expand Down Expand Up @@ -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 };
});
}}
/>
Expand Down
43 changes: 29 additions & 14 deletions frontend/src/components/MakerForm/SelectCoordinator.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useContext } from 'react';
import React, { useContext, useMemo } from 'react';
import {
Grid,
Select,
Expand All @@ -7,6 +7,7 @@ import {
Tooltip,
Typography,
type SelectChangeEvent,
CircularProgress,
} from '@mui/material';

import RobotAvatar from '../RobotAvatar';
Expand All @@ -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();

Expand All @@ -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
Expand Down Expand Up @@ -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>

Expand All @@ -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>
);
}
Expand Down
1 change: 0 additions & 1 deletion frontend/src/components/OrderDetails/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

lintern auto-fix

import { type UseFederationStoreType, FederationContext } from '../../contexts/FederationContext';
import { type Order } from '../../models';

Expand Down
6 changes: 3 additions & 3 deletions frontend/src/contexts/FederationContext.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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());
Copy link
Member Author

@KoalaSat KoalaSat Mar 4, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Reckless-Satoshi UpdatedAts were being triggered the other way around 😓 Fortunately federationUpdatedAt where not much used, that meas that in the worst case scenario components now will refresh more frequently. Anyways I would say to do a good check of everything for this PR.

Copy link
Member Author

@KoalaSat KoalaSat Mar 4, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

it's likely that with this change some minor bugs on the list will be fixed

});
void newFed.start(origin, settings, hostUrl);
setFederation(newFed);
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/models/Exchange.model.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

lintern auto-fix


aggregations.forEach((key: any) => {
info[key] = Number(info[key]) + Number(coordinator.info[key]);
Expand Down
7 changes: 4 additions & 3 deletions frontend/src/models/Federation.model.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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() {
Expand All @@ -34,7 +34,7 @@ export class Federation {
this.book = [];
this.hooks = {
onCoordinatorUpdate: [],
onFederationReady: [],
onFederationUpdate: [],
};
this.loading = true;
}
Expand Down Expand Up @@ -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');
}
};

Expand Down Expand Up @@ -119,6 +119,7 @@ export class Federation {

updateExchange = (): void => {
this.exchange.info = updateExchangeInfo(this);
this.triggerHook('onFederationUpdate');
};

// Fetchs
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/models/Garage.model.ts
Original file line number Diff line number Diff line change
Expand Up @@ -126,7 +126,7 @@ class Garage {
) => {
if (!token || !shortAlias) return;

let slot = this.getSlot(token);
const slot = this.getSlot(token);
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

lintern auto-fix


if (slot != null) {
slot.updateRobot(shortAlias, { token, ...attributes });
Expand Down
6 changes: 3 additions & 3 deletions frontend/src/utils/filterOrders.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

lintern auto-fix

return (
typeChecks &&
modeChecks &&
Expand Down