Robosats/robosats
1
0
Fork 0
mirror of https://github.com/RoboSats/robosats.git synced 2025-07-19 09:13:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix order table

Browse Source
This commit is contained in:
koalasat
2025-05-24 20:58:19 +02:00
parent 8adda825b5
commit efbdc38ee6
1 changed files with 137 additions and 151 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

288
frontend/src/components/BookTable/index.tsx
View File

@ -168,11 +168,11 @@ const BookTable = ({
}; };
}, []); }, []);
const robotSmallObj = useCallback((width: number) => { const robotSmallObj = useCallback(() => {
return { return {
field: 'maker_nick', field: 'maker_nick',
headerName: t('Robot'), headerName: t('Robot'),
width: width * fontSize, flex: 1,
renderCell: (params: { row: PublicOrder }) => { renderCell: (params: { row: PublicOrder }) => {
const coordinator = federation.getCoordinator(params.row.coordinatorShortAlias); const coordinator = federation.getCoordinator(params.row.coordinatorShortAlias);
const thirdParty = thirdParties[params.row.coordinatorShortAlias]; const thirdParty = thirdParties[params.row.coordinatorShortAlias];
@ -202,66 +202,58 @@ const BookTable = ({
}; };
}, []); }, []);
const typeObj = useCallback( const typeObj = useCallback(() => {
(width: number) => { return {
return { field: 'type',
field: 'type', headerName: t('Is'),
headerName: t('Is'), flex: 1,
width: width * fontSize, renderCell: (params: { row: PublicOrder }) => {
renderCell: (params: { row: PublicOrder }) => { return (
return ( <div
<div style={{ cursor: 'pointer' }}
style={{ cursor: 'pointer' }} onClick={() => {
onClick={() => { onOrderClicked(params.row.id, params.row.coordinatorShortAlias);
onOrderClicked(params.row.id, params.row.coordinatorShortAlias); }}
}} >
> {params.row.type === 1
{params.row.type === 1 ? t(fav.mode === 'fiat' ? 'Seller' : 'Swapping Out')
? t(fav.mode === 'fiat' ? 'Seller' : 'Swapping Out') : t(fav.mode === 'fiat' ? 'Buyer' : 'Swapping In')}
: t(fav.mode === 'fiat' ? 'Buyer' : 'Swapping In')} </div>
</div> );
); },
}, };
}; }, [fav.mode]);
},
[fav.mode],
);
const amountObj = useCallback( const amountObj = useCallback(() => {
(width: number) => { return {
return { field: 'amount',
field: 'amount', headerName: t('Amount'),
headerName: t('Amount'), type: 'number',
type: 'number', flex: 1.5,
width: width * fontSize, renderCell: (params: { row: PublicOrder }) => {
renderCell: (params: { row: PublicOrder }) => { const amount = fav.mode === 'swap' ? params.row.amount * 100 : params.row.amount;
const amount = fav.mode === 'swap' ? params.row.amount * 100 : params.row.amount; const minAmount = fav.mode === 'swap' ? params.row.min_amount * 100 : params.row.min_amount;
const minAmount = const maxAmount = fav.mode === 'swap' ? params.row.max_amount * 100 : params.row.max_amount;
fav.mode === 'swap' ? params.row.min_amount * 100 : params.row.min_amount; return (
const maxAmount = <div
fav.mode === 'swap' ? params.row.max_amount * 100 : params.row.max_amount; style={{ cursor: 'pointer' }}
return ( onClick={() => {
<div onOrderClicked(params.row.id, params.row.coordinatorShortAlias);
style={{ cursor: 'pointer' }} }}
onClick={() => { >
onOrderClicked(params.row.id, params.row.coordinatorShortAlias); {amountToString(amount, params.row.has_range, minAmount, maxAmount) +
}} (fav.mode === 'swap' ? 'M Sats' : '')}
> </div>
{amountToString(amount, params.row.has_range, minAmount, maxAmount) + );
(fav.mode === 'swap' ? 'M Sats' : '')} },
</div> };
); }, [fav.mode]);
},
};
},
[fav.mode],
);
const currencyObj = useCallback((width: number) => { const currencyObj = useCallback(() => {
return { return {
field: 'currency', field: 'currency',
headerName: t('Currency'), headerName: t('Currency'),
width: width * fontSize, flex: 1,
renderCell: (params: { row: PublicOrder }) => { renderCell: (params: { row: PublicOrder }) => {
const currencyCode = String(currencyDict[params.row.currency.toString()]); const currencyCode = String(currencyDict[params.row.currency.toString()]);
return ( return (
@ -286,41 +278,38 @@ const BookTable = ({
}; };
}, []); }, []);
const paymentObj = useCallback( const paymentObj = useCallback(() => {
(width: number) => { return {
return { field: 'payment_method',
field: 'payment_method', headerName: fav.mode === 'fiat' ? t('Payment Method') : t('Destination'),
headerName: fav.mode === 'fiat' ? t('Payment Method') : t('Destination'), flex: 2,
width: width * fontSize, renderCell: (params: { row: PublicOrder }) => {
renderCell: (params: { row: PublicOrder }) => { return (
return ( <div
<div style={{ cursor: 'pointer' }}
style={{ cursor: 'pointer' }} onClick={() => {
onClick={() => { onOrderClicked(params.row.id, params.row.coordinatorShortAlias);
onOrderClicked(params.row.id, params.row.coordinatorShortAlias); }}
}} >
> <div style={{ position: 'relative', top: '0.4em' }}>
<div style={{ position: 'relative', top: '0.4em' }}> <PaymentStringAsIcons
<PaymentStringAsIcons othersText={t('Others')}
othersText={t('Others')} verbose={false}
verbose={false} size={1.7 * fontSize}
size={1.7 * fontSize} text={params.row.payment_method}
text={params.row.payment_method} />
/>
</div>
</div> </div>
); </div>
}, );
}; },
}, };
[fav.mode], }, [fav.mode]);
);
const paymentSmallObj = useCallback((width: number) => { const paymentSmallObj = useCallback(() => {
return { return {
field: 'payment_method', field: 'payment_method',
headerName: t('Pay'), headerName: t('Pay'),
width: width * fontSize, flex: 1,
renderCell: (params: { row: PublicOrder }) => { renderCell: (params: { row: PublicOrder }) => {
return ( return (
<div <div
@ -346,12 +335,12 @@ const BookTable = ({
}; };
}, []); }, []);
const priceObj = useCallback((width: number) => { const priceObj = useCallback(() => {
return { return {
field: 'price', field: 'price',
headerName: t('Price'), headerName: t('Price'),
type: 'number', type: 'number',
width: width * fontSize, flex: 2,
renderCell: (params: { row: PublicOrder }) => { renderCell: (params: { row: PublicOrder }) => {
const currencyCode = String(currencyDict[params.row.currency.toString()]); const currencyCode = String(currencyDict[params.row.currency.toString()]);
const coordinator = const coordinator =
@ -379,70 +368,67 @@ const BookTable = ({
}; };
}, []); }, []);
const premiumObj = useCallback( const premiumObj = useCallback(() => {
(width: number) => { // coloring premium texts based on 4 params:
// coloring premium texts based on 4 params: // Hardcoded: a sell order at 0% is an outstanding premium
// Hardcoded: a sell order at 0% is an outstanding premium // Hardcoded: a buy order at 10% is an outstanding premium
// Hardcoded: a buy order at 10% is an outstanding premium const sellStandardPremium = 10;
const sellStandardPremium = 10; const buyOutstandingPremium = 10;
const buyOutstandingPremium = 10; return {
return { field: 'premium',
field: 'premium', headerName: t('Premium'),
headerName: t('Premium'), type: 'number',
type: 'number', flex: 1,
width: width * fontSize, renderCell: (params: { row: PublicOrder }) => {
renderCell: (params: { row: PublicOrder }) => { const currencyCode = String(currencyDict[params.row.currency.toString()]);
const currencyCode = String(currencyDict[params.row.currency.toString()]); let fontColor = `rgb(0,0,0)`;
let fontColor = `rgb(0,0,0)`; let premiumPoint = 0;
let premiumPoint = 0; if (params.row.type === 0) {
if (params.row.type === 0) { premiumPoint = params.row.premium / buyOutstandingPremium;
premiumPoint = params.row.premium / buyOutstandingPremium; premiumPoint = premiumPoint < 0 ? 0 : premiumPoint > 1 ? 1 : premiumPoint;
premiumPoint = premiumPoint < 0 ? 0 : premiumPoint > 1 ? 1 : premiumPoint; fontColor = premiumColor(
fontColor = premiumColor( theme.palette.text.primary,
theme.palette.text.primary, theme.palette.secondary.dark,
theme.palette.secondary.dark, premiumPoint,
premiumPoint,
);
} else {
premiumPoint = (sellStandardPremium - params.row.premium) / sellStandardPremium;
premiumPoint = premiumPoint < 0 ? 0 : premiumPoint > 1 ? 1 : premiumPoint;
fontColor = premiumColor(
theme.palette.text.primary,
theme.palette.primary.dark,
premiumPoint,
);
}
const fontWeight = 400 + Math.round(premiumPoint * 5) * 100;
return (
<Tooltip
placement='left'
enterTouchDelay={0}
title={`${pn(params.row.price)} ${currencyCode}/BTC`}
>
<div
style={{ cursor: 'pointer' }}
onClick={() => {
onOrderClicked(params.row.id, params.row.coordinatorShortAlias);
}}
>
<Typography variant='inherit' color={fontColor} sx={{ fontWeight }}>
{`${parseFloat(parseFloat(params.row.premium).toFixed(4))}%`}
</Typography>
</div>
</Tooltip>
); );
}, } else {
}; premiumPoint = (sellStandardPremium - params.row.premium) / sellStandardPremium;
}, premiumPoint = premiumPoint < 0 ? 0 : premiumPoint > 1 ? 1 : premiumPoint;
[theme], fontColor = premiumColor(
); theme.palette.text.primary,
theme.palette.primary.dark,
premiumPoint,
);
}
const fontWeight = 400 + Math.round(premiumPoint * 5) * 100;
return (
<Tooltip
placement='left'
enterTouchDelay={0}
title={`${pn(params.row.price)} ${currencyCode}/BTC`}
>
<div
style={{ cursor: 'pointer' }}
onClick={() => {
onOrderClicked(params.row.id, params.row.coordinatorShortAlias);
}}
>
<Typography variant='inherit' color={fontColor} sx={{ fontWeight }}>
{`${parseFloat(parseFloat(params.row.premium).toFixed(4))}%`}
</Typography>
</div>
</Tooltip>
);
},
};
}, [theme]);
const timerObj = useCallback((width: number) => { const timerObj = useCallback(() => {
return { return {
field: 'escrow_duration', field: 'escrow_duration',
headerName: t('Timer'), headerName: t('Timer'),
type: 'number', type: 'number',
width: width * fontSize, flex: 1,
renderCell: (params: { row: PublicOrder }) => { renderCell: (params: { row: PublicOrder }) => {
const hours = Math.round(params.row.escrow_duration / 3600); const hours = Math.round(params.row.escrow_duration / 3600);
const minutes = Math.round((params.row.escrow_duration - hours * 3600) / 60); const minutes = Math.round((params.row.escrow_duration - hours * 3600) / 60);
@ -460,12 +446,12 @@ const BookTable = ({
}; };
}, []); }, []);
const expiryObj = useCallback((width: number) => { const expiryObj = useCallback(() => {
return { return {
field: 'expires_at', field: 'expires_at',
headerName: t('Expiry'), headerName: t('Expiry'),
type: 'string', type: 'string',
width: width * fontSize, flex: 1,
renderCell: (params: { row: PublicOrder }) => { renderCell: (params: { row: PublicOrder }) => {
const expiresAt: Date = new Date(params.row.expires_at); const expiresAt: Date = new Date(params.row.expires_at);
const timeToExpiry: number = Math.abs(expiresAt - new Date()); const timeToExpiry: number = Math.abs(expiresAt - new Date());
@ -508,12 +494,12 @@ const BookTable = ({
}; };
}, []); }, []);
const satoshisObj = useCallback((width: number) => { const satoshisObj = useCallback(() => {
return { return {
field: 'satoshis_now', field: 'satoshis_now',
headerName: t('Sats now'), headerName: t('Sats now'),
type: 'number', type: 'number',
width: width * fontSize, flex: 1,
renderCell: (params: { row: PublicOrder }) => { renderCell: (params: { row: PublicOrder }) => {
const coordinator = const coordinator =
federation.getCoordinator(params.row.coordinatorShortAlias) ?? federation.getCoordinator(params.row.coordinatorShortAlias) ??