Merge branch 'frontend-enable-currency-click-to-cycle-on-mobile'

benma · Oct 15, 2024 · 052e50a · 052e50a
2 parents 52e66e4 + b4339c7
commit 052e50a
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 3 deletions.
diff --git a/frontends/web/src/components/amount/amount.tsx b/frontends/web/src/components/amount/amount.tsx
@@ -16,15 +16,18 @@
 
 import { useContext } from 'react';
 import { AppContext } from '@/contexts/AppContext';
+import { RatesContext } from '@/contexts/RatesContext';
+import { LocalizationContext } from '@/contexts/localization-context';
+import { useMediaQuery } from '@/hooks/mediaquery';
 import { CoinUnit, ConversionUnit } from '@/api/account';
 import style from './amount.module.css';
-import { LocalizationContext } from '@/contexts/localization-context';
 
 type TProps = {
   amount: string;
   unit: CoinUnit | ConversionUnit;
   removeBtcTrailingZeroes?: boolean;
   alwaysShowAmounts?: boolean
+  allowRotateCurrencyOnMobile?: boolean;
 };
 
 const formatSats = (amount: string): JSX.Element => {
@@ -94,6 +97,35 @@ export const Amount = ({
   unit,
   removeBtcTrailingZeroes,
   alwaysShowAmounts = false,
+  allowRotateCurrencyOnMobile = false
+}: TProps) => {
+  const { rotateDefaultCurrency } = useContext(RatesContext);
+  const isMobile = useMediaQuery('(max-width: 768px)');
+
+  const handleClick = () => {
+    if (!isMobile || !allowRotateCurrencyOnMobile) {
+      return;
+    }
+    rotateDefaultCurrency();
+  };
+
+  return (
+    <span onClick={handleClick}>
+      <FormattedAmount
+        amount={amount}
+        unit={unit}
+        removeBtcTrailingZeroes={removeBtcTrailingZeroes}
+        alwaysShowAmounts={alwaysShowAmounts}
+      />
+    </span>
+  );
+};
+
+export const FormattedAmount = ({
+  amount,
+  unit,
+  removeBtcTrailingZeroes,
+  alwaysShowAmounts = false,
 }: TProps) => {
   const { hideAmounts } = useContext(AppContext);
   const { decimal, group } = useContext(LocalizationContext);

diff --git a/frontends/web/src/components/rates/rates.tsx b/frontends/web/src/components/rates/rates.tsx
@@ -52,7 +52,13 @@ const Conversion = ({
   // amount.conversions[defaultCurrency] can be empty in recent transactions.
   if (amount && amount.conversions && amount.conversions[defaultCurrency] && amount.conversions[defaultCurrency] !== '') {
     isAvailable = true;
-    formattedAmount = <Amount alwaysShowAmounts={alwaysShowAmounts} amount={amount.conversions[defaultCurrency]} unit={activeUnit} removeBtcTrailingZeroes={!!noBtcZeroes}/>;
+    formattedAmount = <Amount
+      alwaysShowAmounts={alwaysShowAmounts}
+      amount={amount.conversions[defaultCurrency]}
+      unit={activeUnit}
+      removeBtcTrailingZeroes={!!noBtcZeroes}
+      allowRotateCurrencyOnMobile={!noAction}
+    />;
   }
 
   if (tableRow) {

diff --git a/frontends/web/src/routes/account/summary/chart.tsx b/frontends/web/src/routes/account/summary/chart.tsx
@@ -508,7 +508,12 @@ export const Chart = ({
           <div className={styles.totalValue}>
             {formattedChartTotal !== null ? (
               // remove trailing zeroes for BTC fiat total
-              <Amount amount={!showMobileTotalValue ? formattedChartTotal : toolTipValue} unit={chartFiat} removeBtcTrailingZeroes />
+              <Amount
+                amount={!showMobileTotalValue ? formattedChartTotal : toolTipValue}
+                unit={chartFiat}
+                removeBtcTrailingZeroes
+                allowRotateCurrencyOnMobile
+              />
             ) : (
               <Skeleton minWidth="220px" />
             )}