frontend: rotate default currency on account summary

to improve UX, we'd like to enable rotating default currency
on account summary. This is done by:
- creating DefaultCurrencyRotator component
- reused that component in rates.tsx and chart.tsx
- onClick, runs `rotateFiat` (`RatesContext`).
- reinitialize chart on change `defaultCurrency` (`RatesContext`)

Author: shonsirsha

frontends/web/src/components/rates/rates.module.css

@@ -17,10 +17,6 @@
     position: relative;
 }
 
-.fiatRow {
-
-}
-
 .availableFiatAmount {
     padding-right: var(--space-quarter) !important;
     text-align: right;
@@ -33,8 +29,12 @@
     position: relative;
 }
 
-.unitAction::after,
-.availableFiatUnit::after {
+.rotatable {
+    position: relative;
+    cursor: default;
+}
+
+.rotatable::after { 
     border-bottom: dotted 1px var(--color-softblack);
     content: "";
     position: absolute;
@@ -58,8 +58,3 @@
     }
 }
 
-@media (max-width: 640px) {
-    .availableFiatUnit::after {
-        border-bottom: none;
-    }
-}

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

@@ -70,7 +70,7 @@ function Conversion({
   alwaysShowAmounts = false
 }: TProvidedProps) {
 
-  const { rotateFiat, defaultCurrency, btcUnit } = useContext(RatesContext);
+  const { defaultCurrency, btcUnit } = useContext(RatesContext);
 
   let formattedAmount = <>{'---'}</>;
   let isAvailable = false;
@@ -92,7 +92,7 @@ function Conversion({
         <td className={unstyled ? '' : style.availableFiatAmount}>{formattedAmount}</td>
         {
           !noAction && (
-            <td className={unstyled ? '' : style.availableFiatUnit} onClick={rotateFiat}>{activeUnit}</td>
+            <DefaultCurrencyRotator activeUnit={activeUnit} className={unstyled ? '' : style.availableFiatUnit} />
           )
         }
         {
@@ -110,7 +110,7 @@ function Conversion({
       {' '}
       {
         !skipUnit && !noAction && (
-          <span className={style.unitAction} onClick={rotateFiat}>{activeUnit}</span>
+          <DefaultCurrencyRotator activeUnit={activeUnit} tableRow={false} className={style.unitAction} />
         )
       }
       {
@@ -122,6 +122,26 @@ function Conversion({
   );
 }
 
+type TDefaultCurrencyRotator = {
+  activeUnit?: ConversionUnit;
+  className?: string;
+  tableRow?: boolean;
+}
+
+export const DefaultCurrencyRotator = ({
+  activeUnit,
+  className = '',
+  tableRow = true
+}: TDefaultCurrencyRotator) => {
+  const { rotateFiat, defaultCurrency } = useContext(RatesContext);
+  const displayedCurrency = activeUnit ? activeUnit : defaultCurrency;
+  const textStyle = `${className} ${style.rotatable}`;
+  if (!tableRow) {
+    return <span className={textStyle} onClick={rotateFiat}>{displayedCurrency}</span>;
+  }
+  return <td className={textStyle} onClick={rotateFiat}>{displayedCurrency}</td>;
+};
+
 export const formattedCurrencies = currenciesWithDisplayName.map((fiat) => ({ label: `${fiat.displayName} (${fiat.currency})`, value: fiat.currency }));
 
 export const FiatConversion = Conversion;

frontends/web/src/contexts/RatesContext.tsx

@@ -22,7 +22,7 @@ type RatesContextProps = {
     defaultCurrency: Fiat;
     activeCurrencies: Fiat[];
     btcUnit?: BtcUnit;
-    rotateFiat: () => void;
+    rotateFiat: () => Promise<void>;
     selectFiat: (fiat: Fiat) => Promise<void>;
     updateDefaultFiat: (fiat: Fiat) => void;
     updateRatesConfig: () => Promise<void>;

frontends/web/src/contexts/RatesProvider.tsx

@@ -48,18 +48,18 @@ export const RatesProvider = ({ children }: TProps) => {
     }
   };
 
-  const rotateFiat = () => {
+  const rotateFiat = async () => {
     const index = activeCurrencies.indexOf(defaultCurrency);
     const fiat = activeCurrencies[(index + 1) % activeCurrencies.length];
-    updateDefaultFiat(fiat);
+    await updateDefaultFiat(fiat);
   };
 
-  const updateDefaultFiat = (fiat: Fiat) => {
+  const updateDefaultFiat = async (fiat: Fiat) => {
     if (!activeCurrencies.includes(fiat)) {
       selectFiat(fiat);
     }
+    await setConfig({ backend: { mainFiat: fiat } });
     setDefaultCurrency(fiat);
-    setConfig({ backend: { mainFiat: fiat } });
   };
 
   //this is a method to select a fiat to be

frontends/web/src/routes/account/summary/accountssummary.tsx

@@ -34,6 +34,7 @@ import { Guide } from '../../../components/guide/guide';
 import { HideAmountsButton } from '../../../components/hideamountsbutton/hideamountsbutton';
 import { AppContext } from '../../../contexts/AppContext';
 import { getAccountsByKeystore, isAmbiguiousName } from '../utils';
+import { RatesContext } from '../../../contexts/RatesContext';
 
 type TProps = {
     accounts: accountApi.IAccount[];
@@ -52,6 +53,7 @@ export function AccountsSummary({
   const summaryReqTimerID = useRef<number>();
   const mounted = useMountedRef();
   const { hideAmounts } = useContext(AppContext);
+  const { defaultCurrency } = useContext(RatesContext);
 
   const accountsByKeystore = getAccountsByKeystore(accounts);
 
@@ -138,17 +140,24 @@ export function AccountsSummary({
     }
   }, [getAccountSummary, mounted, onStatusChanged]);
 
-  // fetch accounts summary and balance on the first render.
   useEffect(() => {
+    // for subscriptions and unsubscriptions
+    // runs only on component mount and unmount.
     const subscriptions = [
       statusChanged(update),
       syncdone(update)
     ];
+    return () => unsubscribe(subscriptions);
+  }, [update]);
+
+
+  useEffect(() => {
+    // handles fetching data and runs on component mount
+    // & whenever any of the dependencies change.
     getAccountSummary();
     getAccountsBalance();
     getAccountsTotalBalance();
-    return () => unsubscribe(subscriptions);
-  }, [getAccountSummary, getAccountsBalance, getAccountsTotalBalance, update]);
+  }, [getAccountSummary, getAccountsBalance, getAccountsTotalBalance, defaultCurrency]);
 
   // update the timer to get a new account summary update when receiving the previous call result.
   useEffect(() => {

frontends/web/src/routes/account/summary/chart.module.css

@@ -116,11 +116,14 @@
 
 .totalValue {
   font-size: 2rem;
+  display: flex;
+  align-items: flex-end;
 }
 
 .totalUnit {
   color: var(--color-secondary);
   display: inline-block;
+  margin-bottom: 3px;
   font-size: 1.4rem;
   padding: 0 .25rem;
 }

frontends/web/src/routes/account/summary/chart.tsx

@@ -24,8 +24,8 @@ import { Amount } from '../../../components/amount/amount';
 import Filters from './filters';
 import { getDarkmode } from '../../../components/darkmode/darkmode';
 import { TChartDisplay, TChartFiltersProps } from './types';
+import { DefaultCurrencyRotator } from '../../../components/rates/rates';
 import styles from './chart.module.css';
-
 export interface FormattedLineData extends LineData {
   formattedValue: string;
 }
@@ -56,7 +56,6 @@ type Props = ChartProps & TranslateProps;
 type FormattedData = {
   [key: number]: string;
 }
-
 class Chart extends Component<Props, State> {
   private ref = createRef<HTMLDivElement>();
   private refToolTip = createRef<HTMLSpanElement>();
@@ -129,6 +128,10 @@ class Chart extends Component<Props, State> {
         }
       });
     }
+
+    if (this.props.data.chartFiat !== prev.data.chartFiat) {
+      this.reinitializeChart();
+    }
   }
 
   private hasData = (): boolean => {
@@ -240,6 +243,19 @@ class Chart extends Component<Props, State> {
     }
   };
 
+  private reinitializeChart = () => {
+    this.removeChart();
+    this.createChart();
+  };
+
+  private removeChart = () => {
+    if (this.chart) {
+      this.chart.remove();
+      this.chart = undefined;
+      window.removeEventListener('resize', this.onResize);
+    }
+  };
+
   private onResize = () => {
     this.checkIfMobile();
     if (this.resizeTimerID) {
@@ -514,7 +530,7 @@ class Chart extends Component<Props, State> {
                 <Skeleton minWidth="220px" />
               )}
               <span className={styles.totalUnit}>
-                {chartTotal !== null && chartFiat}
+                {chartTotal !== null && <DefaultCurrencyRotator tableRow={false}/>}
               </span>
             </div>
             {!showMobileTotalValue ?