frontend: on mobile, allow rotate currency by tapping amount

doing so improves the UX on mobile.

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,33 @@ 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);

frontends/web/src/components/rates/rates.tsx

@@ -52,7 +52,7 @@ 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) {

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" />
             )}