diff --git a/src-gui/src/renderer/components/modal/provider/MakerInfo.tsx b/src-gui/src/renderer/components/modal/provider/MakerInfo.tsx index 79ea27f9..d246887d 100644 --- a/src-gui/src/renderer/components/modal/provider/MakerInfo.tsx +++ b/src-gui/src/renderer/components/modal/provider/MakerInfo.tsx @@ -6,7 +6,7 @@ import { MoneroBitcoinExchangeRate, SatsAmount, } from "renderer/components/other/Units"; -import { satsToBtc, secondsToDays } from "utils/conversionUtils"; +import { getMarkup, satsToBtc, secondsToDays } from "utils/conversionUtils"; import { isMakerOutdated } from 'utils/multiAddrUtils'; import WarningIcon from '@material-ui/icons/Warning'; import { useAppSelector } from "store/hooks"; @@ -43,12 +43,12 @@ const useStyles = makeStyles((theme) => ({ */ function MakerMarkupChip({ maker }: { maker: ExtendedMakerStatus }) { const marketExchangeRate = useAppSelector(s => s.rates?.xmrBtcRate); - if (marketExchangeRate === null) + if (marketExchangeRate == null) return null; const makerExchangeRate = satsToBtc(maker.price); /** The markup of the exchange rate compared to the market rate in percent */ - const markup = (makerExchangeRate - marketExchangeRate) / marketExchangeRate * 100; + const markup = getMarkup(makerExchangeRate, marketExchangeRate); return ( diff --git a/src-gui/src/renderer/components/modal/swap/pages/init/WaitingForBitcoinDepositPage.tsx b/src-gui/src/renderer/components/modal/swap/pages/init/WaitingForBitcoinDepositPage.tsx index 1ec8c218..d7146bf9 100644 --- a/src-gui/src/renderer/components/modal/swap/pages/init/WaitingForBitcoinDepositPage.tsx +++ b/src-gui/src/renderer/components/modal/swap/pages/init/WaitingForBitcoinDepositPage.tsx @@ -58,7 +58,7 @@ export default function WaitingForBtcDepositPage({
  • All Bitcoin sent to this this address will converted into Monero at an exchance rate of{" "} - +
  • The network fee of{" "} diff --git a/src-gui/src/renderer/components/other/Units.tsx b/src-gui/src/renderer/components/other/Units.tsx index d22a8a1f..f888b529 100644 --- a/src-gui/src/renderer/components/other/Units.tsx +++ b/src-gui/src/renderer/components/other/Units.tsx @@ -1,6 +1,6 @@ import { Tooltip } from "@material-ui/core"; import { useAppSelector } from "store/hooks"; -import { piconerosToXmr, satsToBtc } from "utils/conversionUtils"; +import { getMarkup, piconerosToXmr, satsToBtc } from "utils/conversionUtils"; type Amount = number | null | undefined; @@ -9,11 +9,13 @@ export function AmountWithUnit({ unit, fixedPrecision, exchangeRate, + parenthesisText = null, }: { amount: Amount; unit: string; fixedPrecision: number; exchangeRate?: Amount; + parenthesisText?: string; }) { const fetchFiatPrices = useAppSelector((state) => state.settings.fetchFiatPrices); const fiatCurrency = useAppSelector((state) => state.settings.fiatCurrency); @@ -29,6 +31,7 @@ export function AmountWithUnit({ ? Number.parseFloat(amount.toFixed(fixedPrecision)) : "?"}{" "} {unit} + {parenthesisText != null ? ` (${parenthesisText})` : null} ); @@ -64,25 +67,44 @@ export function MoneroAmount({ amount }: { amount: Amount }) { ); } -export function MoneroBitcoinExchangeRate( - state: { rate: Amount } | { satsAmount: number; piconeroAmount: number }, -) { - if ("rate" in state) { - return ( - - ); - } +export function MoneroBitcoinExchangeRate({ + rate, + displayMarkup = false, +}: { + rate: Amount; + displayMarkup?: boolean; +}) { + const marketRate = useAppSelector((state) => state.rates?.xmrBtcRate); + const markup = (displayMarkup && marketRate != null) ? `${getMarkup(rate, marketRate).toFixed(2)}% markup` : null; - const rate = - satsToBtc(state.satsAmount) / piconerosToXmr(state.piconeroAmount); - - return ; + return ( + + ); } -export function MoneroSatsExchangeRate({ rate }: { rate: Amount }) { +export function MoneroBitcoinExchangeRateFromAmounts({ + satsAmount, + piconeroAmount, + displayMarkup = false, +}: { + satsAmount: number; + piconeroAmount: number; + displayMarkup?: boolean; +}) { + const rate = satsToBtc(satsAmount) / piconerosToXmr(piconeroAmount); + + return ; +} + +export function MoneroSatsExchangeRate({ rate, displayMarkup = false }: { rate: Amount, displayMarkup?: boolean }) { const btc = satsToBtc(rate); - return ; + return ; } export function SatsAmount({ amount }: { amount: Amount }) { diff --git a/src-gui/src/renderer/components/pages/history/table/HistoryRowExpanded.tsx b/src-gui/src/renderer/components/pages/history/table/HistoryRowExpanded.tsx index 4c4a4c9b..f60589f7 100644 --- a/src-gui/src/renderer/components/pages/history/table/HistoryRowExpanded.tsx +++ b/src-gui/src/renderer/components/pages/history/table/HistoryRowExpanded.tsx @@ -14,6 +14,7 @@ import ActionableMonospaceTextBox from "renderer/components/other/ActionableMono import MonospaceTextBox from "renderer/components/other/MonospaceTextBox"; import { MoneroBitcoinExchangeRate, + MoneroBitcoinExchangeRateFromAmounts, PiconeroAmount, SatsAmount, } from "renderer/components/other/Units"; @@ -78,7 +79,7 @@ export default function HistoryRowExpanded({ Exchange Rate - diff --git a/src-gui/src/store/features/settingsSlice.ts b/src-gui/src/store/features/settingsSlice.ts index 10b5769a..76aa6398 100644 --- a/src-gui/src/store/features/settingsSlice.ts +++ b/src-gui/src/store/features/settingsSlice.ts @@ -96,7 +96,7 @@ const initialState: SettingsState = { } }, theme: Theme.Darker, - fetchFiatPrices: false, + fetchFiatPrices: true, fiatCurrency: FiatCurrency.Usd, }; diff --git a/src-gui/src/utils/conversionUtils.ts b/src-gui/src/utils/conversionUtils.ts index dc5e3be1..8a814b03 100644 --- a/src-gui/src/utils/conversionUtils.ts +++ b/src-gui/src/utils/conversionUtils.ts @@ -70,3 +70,8 @@ export function rendezvousSellerToMakerStatus( export function bytesToMb(bytes: number): number { return bytes / (1024 * 1024); } + +/// Get the markup of a maker's exchange rate compared to the market rate in percent +export function getMarkup(makerPrice: number, marketPrice: number): number { + return (makerPrice - marketPrice) / marketPrice * 100; +} \ No newline at end of file