feat(gui): Display provider spread to user (#124)

This commit is contained in:
binarybaron 2024-10-22 12:04:37 +02:00 committed by GitHub
parent 1acb597a34
commit 584cc41411
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 60 additions and 3 deletions

View file

@ -9,6 +9,7 @@ import {
import { satsToBtc, secondsToDays } from "utils/conversionUtils";
import { isProviderOutdated } from 'utils/multiAddrUtils';
import WarningIcon from '@material-ui/icons/Warning';
import { useAppSelector } from "store/hooks";
const useStyles = makeStyles((theme) => ({
content: {
@ -25,6 +26,24 @@ const useStyles = makeStyles((theme) => ({
},
}));
function ProviderSpreadChip({ provider }: { provider: ExtendedProviderStatus }) {
const xmrBtcPrice = useAppSelector(s => s.rates?.xmrBtcRate);
if (xmrBtcPrice === null) {
return null;
}
const providerPrice = satsToBtc(provider.price);
const spread = ((providerPrice - xmrBtcPrice) / xmrBtcPrice) * 100;
return (
<Tooltip title="The spread is the difference between the provider's exchange rate and the market rate. A high spread indicates that the provider is charging more than the market rate.">
<Chip label={`Spread: ${spread.toFixed(2)} %`} />
</Tooltip>
);
}
export default function ProviderInfo({
provider,
}: {
@ -78,6 +97,7 @@ export default function ProviderInfo({
<Chip label="Outdated" icon={<WarningIcon />} color="primary" />
</Tooltip>
)}
<ProviderSpreadChip provider={provider} />
</Box>
</Box>
);