feat(gui): Display markup on "waiting for bitcoin deposit page" (#209)

* feat(gui): Display markup on "waiting for bitcoin deposit page"
* feat: Enable fetching of fiat rates by default

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 (
     <Tooltip title="The markup this maker charges compared to centralized markets. A lower markup means that you get more Monero for your Bitcoin.">

src-gui/src/renderer/components/modal/swap/pages/init/WaitingForBitcoinDepositPage.tsx

@@ -58,7 +58,7 @@ export default function WaitingForBtcDepositPage({
                 <li>
                   All Bitcoin sent to this this address will converted into
                   Monero at an exchance rate of{" "}
-                  <MoneroSatsExchangeRate rate={quote.price} />
+                  <MoneroSatsExchangeRate rate={quote.price} displayMarkup={true} />
                 </li>
                 <li>
                   The network fee of{" "}

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}
       </span>
     </Tooltip>
   );
@@ -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 (
-      <AmountWithUnit amount={state.rate} unit="BTC/XMR" fixedPrecision={8} />
-    );
-  }
+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 <AmountWithUnit amount={rate} unit="BTC/XMR" fixedPrecision={8} />;
+  return (
+    <AmountWithUnit
+      amount={rate}
+      unit="BTC/XMR"
+      fixedPrecision={8}
+      parenthesisText={markup}
+    />
+  );
 }
 
-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 <MoneroBitcoinExchangeRate rate={rate} displayMarkup={displayMarkup} />;
+}
+
+export function MoneroSatsExchangeRate({ rate, displayMarkup = false }: { rate: Amount, displayMarkup?: boolean }) {
   const btc = satsToBtc(rate);
 
-  return <AmountWithUnit amount={btc} unit="BTC/XMR" fixedPrecision={6} />;
+  return <MoneroBitcoinExchangeRate rate={btc} displayMarkup={displayMarkup} />;
 }
 
 export function SatsAmount({ amount }: { amount: Amount }) {

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({
             <TableRow>
               <TableCell>Exchange Rate</TableCell>
               <TableCell>
-                <MoneroBitcoinExchangeRate
+                <MoneroBitcoinExchangeRateFromAmounts
                   satsAmount={swap.btc_amount}
                   piconeroAmount={swap.xmr_amount}
                 />

src-gui/src/store/features/settingsSlice.ts

@@ -96,7 +96,7 @@ const initialState: SettingsState = {
     }
   },
   theme: Theme.Darker,
-  fetchFiatPrices: false,
+  fetchFiatPrices: true,
   fiatCurrency: FiatCurrency.Usd,
 };
 

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;
+}