From 79223bf0e56dde422894710eee4c98f938eaa9b2 Mon Sep 17 00:00:00 2001 From: Binarybaron Date: Tue, 26 Nov 2024 14:05:11 +0100 Subject: [PATCH 1/3] feat(gui): Display markup on "waiting for bitcoin deposit page" --- .../components/modal/provider/MakerInfo.tsx | 4 +- .../init/WaitingForBitcoinDepositPage.tsx | 2 +- .../src/renderer/components/other/Units.tsx | 50 +++++++++++++------ .../history/table/HistoryRowExpanded.tsx | 3 +- src-gui/src/utils/conversionUtils.ts | 5 ++ 5 files changed, 46 insertions(+), 18 deletions(-) diff --git a/src-gui/src/renderer/components/modal/provider/MakerInfo.tsx b/src-gui/src/renderer/components/modal/provider/MakerInfo.tsx index 79ea27f99..a3536f3c6 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"; @@ -48,7 +48,7 @@ function MakerMarkupChip({ maker }: { maker: ExtendedMakerStatus }) { 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 1ec8c218d..d7146bf99 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 d22a8a1f6..2cee9483d 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; + + return ( + + ); +} - const rate = - satsToBtc(state.satsAmount) / piconerosToXmr(state.piconeroAmount); +export function MoneroBitcoinExchangeRateFromAmounts({ + satsAmount, + piconeroAmount, + displayMarkup = false, +}: { + satsAmount: number; + piconeroAmount: number; + displayMarkup?: boolean; +}) { + const rate = satsToBtc(satsAmount) / piconerosToXmr(piconeroAmount); - return ; + return ; } -export function MoneroSatsExchangeRate({ rate }: { rate: Amount }) { +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 4c4a4c9bf..f60589f73 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/utils/conversionUtils.ts b/src-gui/src/utils/conversionUtils.ts index dc5e3be1c..8a814b035 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 From 108ee431d3ba3fbb275095f3f8163d1c974c7c3f Mon Sep 17 00:00:00 2001 From: Binarybaron Date: Tue, 26 Nov 2024 14:12:57 +0100 Subject: [PATCH 2/3] feat: Enable fetching of fiat rates by default --- src-gui/src/renderer/components/modal/provider/MakerInfo.tsx | 2 +- src-gui/src/store/features/settingsSlice.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src-gui/src/renderer/components/modal/provider/MakerInfo.tsx b/src-gui/src/renderer/components/modal/provider/MakerInfo.tsx index a3536f3c6..d246887d0 100644 --- a/src-gui/src/renderer/components/modal/provider/MakerInfo.tsx +++ b/src-gui/src/renderer/components/modal/provider/MakerInfo.tsx @@ -43,7 +43,7 @@ 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); diff --git a/src-gui/src/store/features/settingsSlice.ts b/src-gui/src/store/features/settingsSlice.ts index 10b5769af..76aa63984 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, }; From 02f82b8ce164563adf2b9b44c400564066e739e8 Mon Sep 17 00:00:00 2001 From: Binarybaron Date: Tue, 26 Nov 2024 14:16:31 +0100 Subject: [PATCH 3/3] refactor --- src-gui/src/renderer/components/other/Units.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src-gui/src/renderer/components/other/Units.tsx b/src-gui/src/renderer/components/other/Units.tsx index 2cee9483d..f888b5297 100644 --- a/src-gui/src/renderer/components/other/Units.tsx +++ b/src-gui/src/renderer/components/other/Units.tsx @@ -74,7 +74,7 @@ export function MoneroBitcoinExchangeRate({ rate: Amount; displayMarkup?: boolean; }) { - const marketRate = useAppSelector((state) => state.rates.xmrBtcRate); + const marketRate = useAppSelector((state) => state.rates?.xmrBtcRate); const markup = (displayMarkup && marketRate != null) ? `${getMarkup(rate, marketRate).toFixed(2)}% markup` : null; return (