chore(suite): fiat rates loading visualization

trezor · Apr 29, 2024 · f904439 · f904439
1 parent dfb1169
commit f904439
Show file tree

Hide file tree

Showing 12 changed files with 165 additions and 230 deletions.
diff --git a/packages/suite/src/components/suite/FiatValue.tsx b/packages/suite/src/components/suite/FiatValue.tsx
@@ -8,6 +8,8 @@ import {
     useFiatFromCryptoValueParams,
 } from 'src/hooks/suite/useFiatFromCryptoValue';
 import { HiddenPlaceholderProps } from './HiddenPlaceholder';
+import { useLoadingSkeleton } from 'src/hooks/suite';
+import { SkeletonRectangle } from '@trezor/components';
 
 const StyledHiddenPlaceholder = styled((props: HiddenPlaceholderProps) => (
     <HiddenPlaceholder {...props} />
@@ -32,7 +34,9 @@ type FiatValueProps = useFiatFromCryptoValueParams & {
     disableHiddenPlaceholder?: boolean;
     fiatAmountFormatterOptions?: FormatNumberOptions;
     shouldConvert?: boolean;
+    showLoadingSkeleton?: boolean;
     className?: string;
+    isLoading?: boolean;
 };
 
 /**
@@ -60,7 +64,10 @@ export const FiatValue = ({
     disableHiddenPlaceholder,
     fiatAmountFormatterOptions,
     shouldConvert = true,
+    showLoadingSkeleton,
+    isLoading,
 }: FiatValueProps) => {
+    const { shouldAnimate } = useLoadingSkeleton();
     const { targetCurrency, fiatAmount, ratesSource, currentRate } = useFiatFromCryptoValue({
         amount,
         symbol,
@@ -74,6 +81,16 @@ export const FiatValue = ({
     const value = shouldConvert ? fiatAmount : amount;
 
     const WrapperComponent = disableHiddenPlaceholder ? SameWidthNums : StyledHiddenPlaceholder;
+
+    const fiatRateValue = ratesSource?.[targetCurrency] ?? null;
+
+    if (
+        (!fiatRateValue || !value || !currentRate?.lastTickerTimestamp || isLoading) &&
+        showLoadingSkeleton
+    ) {
+        return <SkeletonRectangle animate={shouldAnimate} />;
+    }
+
     if (value) {
         const fiatValueComponent = (
             <WrapperComponent className={className}>
@@ -86,7 +103,6 @@ export const FiatValue = ({
             </WrapperComponent>
         );
 
-        const fiatRateValue = ratesSource?.[targetCurrency] ?? null;
         const fiatRateComponent = fiatRateValue ? (
             <SameWidthNums>
                 <FiatAmountFormatter currency={targetCurrency} value={fiatRateValue} />

diff --git a/packages/suite/src/components/suite/Ticker/LastUpdateTooltip.tsx b/packages/suite/src/components/suite/Ticker/LastUpdateTooltip.tsx
@@ -0,0 +1,44 @@
+import { Translation } from 'src/components/suite';
+import styled from 'styled-components';
+import { Tooltip } from '@trezor/components';
+import { FormattedRelativeTime } from 'react-intl';
+import { ReactNode } from 'react';
+import { differenceInMinutes } from 'date-fns';
+
+const LastUpdate = styled.div`
+    text-transform: none;
+`;
+
+interface LastUpdateTooltipProps {
+    timestamp: number;
+    children: ReactNode;
+}
+
+export const LastUpdateTooltip = ({ timestamp, children }: LastUpdateTooltipProps) => {
+    const rateAge = (timestamp: number) => differenceInMinutes(new Date(timestamp), new Date());
+
+    return (
+        <Tooltip
+            maxWidth={285}
+            placement="top"
+            content={
+                <LastUpdate>
+                    <Translation
+                        id="TR_LAST_UPDATE"
+                        values={{
+                            value: (
+                                <FormattedRelativeTime
+                                    value={rateAge(timestamp) * 60}
+                                    numeric="auto"
+                                    updateIntervalInSeconds={10}
+                                />
+                            ),
+                        }}
+                    />
+                </LastUpdate>
+            }
+        >
+            {children}
+        </Tooltip>
+    );
+};
diff --git a/packages/suite/src/components/suite/Ticker/NoRatesTooltip.tsx b/packages/suite/src/components/suite/Ticker/NoRatesTooltip.tsx
@@ -1,34 +1,34 @@
 import { Translation, TooltipSymbol } from 'src/components/suite';
-import styled from 'styled-components';
-import { Tooltip, variables } from '@trezor/components';
+import styled, { useTheme } from 'styled-components';
 import { TranslationKey } from '../Translation';
+import { typography } from '@trezor/theme';
 
 const NoRatesMessage = styled.div`
+    ${typography.label};
     display: flex;
     align-items: center;
-    color: ${({ theme }) => theme.TYPE_LIGHT_GREY};
-    font-size: ${variables.FONT_SIZE.TINY};
-    font-weight: ${variables.FONT_WEIGHT.REGULAR};
+    color: ${({ theme }) => theme.textSubdued};
     text-transform: none;
 `;
 
-interface NoRatesTooltipProps extends Partial<typeof Tooltip> {
+interface NoRatesTooltipProps {
     customText?: TranslationKey;
     customTooltip?: TranslationKey;
-    iconOnly?: boolean;
     className?: string;
 }
 
-export const NoRatesTooltip = ({
-    customText,
-    iconOnly,
-    customTooltip,
-    className,
-}: NoRatesTooltipProps) => (
-    <NoRatesMessage className={className}>
-        {!iconOnly && <Translation id={customText || 'TR_FIAT_RATES_NOT_AVAILABLE'} />}
-        <TooltipSymbol
-            content={<Translation id={customTooltip || 'TR_FIAT_RATES_NOT_AVAILABLE_TOOLTIP'} />}
-        />
-    </NoRatesMessage>
-);
+export const NoRatesTooltip = ({ customText, customTooltip, className }: NoRatesTooltipProps) => {
+    const theme = useTheme();
+
+    return (
+        <NoRatesMessage className={className}>
+            <Translation id={customText || 'TR_FIAT_RATES_NOT_AVAILABLE'} />
+            <TooltipSymbol
+                content={
+                    <Translation id={customTooltip || 'TR_FIAT_RATES_NOT_AVAILABLE_TOOLTIP'} />
+                }
+                iconColor={theme.iconSubdued}
+            />
+        </NoRatesMessage>
+    );
+};
diff --git a/packages/suite/src/components/suite/Ticker/PriceTicker.tsx b/packages/suite/src/components/suite/Ticker/PriceTicker.tsx
@@ -1,61 +1,30 @@
 import styled from 'styled-components';
-import { differenceInMinutes } from 'date-fns';
-import { FormattedRelativeTime } from 'react-intl';
 
-import { Tooltip } from '@trezor/components';
-import { FiatValue, Translation } from 'src/components/suite';
+import { FiatValue } from 'src/components/suite';
 import { NoRatesTooltip } from './NoRatesTooltip';
 import { typography } from '@trezor/theme';
+import { LastUpdateTooltip } from './LastUpdateTooltip';
 
 const FiatRateWrapper = styled.span`
+    ${typography.hint}
     display: flex;
     align-items: center;
     color: ${({ theme }) => theme.TYPE_DARK_GREY};
-    ${typography.hint}
-`;
-
-const LastUpdate = styled.div`
-    text-transform: none;
 `;
 
 interface PriceTickerProps {
     symbol: string;
-    tooltipPos?: 'top' | 'bottom';
-    compact?: boolean;
 }
-export const PriceTicker = ({ symbol, tooltipPos = 'top', compact = false }: PriceTickerProps) => {
-    const rateAge = (timestamp: number) => differenceInMinutes(new Date(timestamp), new Date());
-
-    return (
-        <FiatValue amount="1" symbol={symbol}>
-            {({ rate, timestamp }) =>
-                rate && timestamp ? (
-                    <Tooltip
-                        maxWidth={285}
-                        placement={tooltipPos}
-                        content={
-                            <LastUpdate>
-                                <Translation
-                                    id="TR_LAST_UPDATE"
-                                    values={{
-                                        value: (
-                                            <FormattedRelativeTime
-                                                value={rateAge(timestamp) * 60}
-                                                numeric="auto"
-                                                updateIntervalInSeconds={10}
-                                            />
-                                        ),
-                                    }}
-                                />
-                            </LastUpdate>
-                        }
-                    >
-                        <FiatRateWrapper>{rate}</FiatRateWrapper>
-                    </Tooltip>
-                ) : (
-                    <NoRatesTooltip iconOnly={compact} />
-                )
-            }
-        </FiatValue>
-    );
-};
+export const PriceTicker = ({ symbol }: PriceTickerProps) => (
+    <FiatValue amount="1" symbol={symbol} showLoadingSkeleton>
+        {({ rate, timestamp }) =>
+            rate && timestamp ? (
+                <LastUpdateTooltip timestamp={timestamp}>
+                    <FiatRateWrapper>{rate}</FiatRateWrapper>
+                </LastUpdateTooltip>
+            ) : (
+                <NoRatesTooltip />
+            )
+        }
+    </FiatValue>
+);
diff --git a/packages/suite/src/components/suite/Ticker/Ticker.tsx b/packages/suite/src/components/suite/Ticker/Ticker.tsx
diff --git a/packages/suite/src/components/suite/Ticker/TrendTicker.tsx b/packages/suite/src/components/suite/Ticker/TrendTicker.tsx
@@ -22,9 +22,8 @@ const calculatePercentageDifference = (a: number, b: number) => (a - b) / b;
 
 interface TickerProps {
     symbol: NetworkSymbol;
-    compact?: boolean;
 }
-export const TrendTicker = ({ symbol, compact = false }: TickerProps) => {
+export const TrendTicker = ({ symbol }: TickerProps) => {
     const locale = useSelector(state => state.suite.settings.language);
     const localCurrency = useSelector(selectLocalCurrency);
     const fiatRateKey = getFiatRateKey(symbol, localCurrency);
@@ -45,7 +44,7 @@ export const TrendTicker = ({ symbol, compact = false }: TickerProps) => {
         : 0;
 
     return (
-        <FiatValue amount="1" symbol={symbol}>
+        <FiatValue amount="1" symbol={symbol} showLoadingSkeleton isLoading={!percentageChange}>
             {({ rate, timestamp }) =>
                 rate && timestamp && percentageChange ? (
                     <PercentageWrapper $isRateGoingUp={isRateGoingUp}>
@@ -57,7 +56,7 @@ export const TrendTicker = ({ symbol, compact = false }: TickerProps) => {
                         {localizePercentage({ valueInFraction: percentageChange, locale })}
                     </PercentageWrapper>
                 ) : (
-                    <NoRatesTooltip iconOnly={compact} />
+                    <NoRatesTooltip />
                 )
             }
         </FiatValue>

diff --git a/packages/suite/src/components/suite/TooltipSymbol.tsx b/packages/suite/src/components/suite/TooltipSymbol.tsx
@@ -10,12 +10,18 @@ const InlineTooltip = styled(Tooltip)`
 type TooltipSymbolProps = {
     content: ReactNode;
     icon?: IconType;
+    iconColor?: string;
     className?: string;
 };
 
-const TooltipSymbol = ({ content, icon = 'QUESTION', className }: TooltipSymbolProps) => (
+const TooltipSymbol = ({
+    content,
+    icon = 'QUESTION',
+    iconColor,
+    className,
+}: TooltipSymbolProps) => (
     <InlineTooltip content={content} maxWidth={250} className={className}>
-        <Icon icon={icon} size={16} />
+        <Icon icon={icon} size={16} color={iconColor} />
     </InlineTooltip>
 );
 

diff --git a/packages/suite/src/components/suite/index.tsx b/packages/suite/src/components/suite/index.tsx
@@ -13,7 +13,6 @@ import { WebUsbButton } from './WebUsbButton';
 import { HiddenPlaceholder } from './HiddenPlaceholder';
 import { QuestionTooltip } from './QuestionTooltip';
 import { DeviceInvalidModeLayout } from './DeviceInvalidModeLayout';
-import { Ticker } from './Ticker/Ticker';
 import { TrendTicker } from './Ticker/TrendTicker';
 import { PriceTicker } from './Ticker/PriceTicker';
 import { Translation } from './Translation';
@@ -80,7 +79,6 @@ export {
     QuestionTooltip,
     FormattedCryptoAmount,
     FormattedNftAmount,
-    Ticker,
     TrendTicker,
     PriceTicker,
     Sign,

diff --git a/packages/suite/src/views/dashboard/components/AssetsView/components/AssetRow.tsx b/packages/suite/src/views/dashboard/components/AssetsView/components/AssetRow.tsx
@@ -190,10 +190,10 @@ export const AssetRow = memo(
                     </FailedCol>
                 )}
                 <ExchangeRateWrapper $isLastRow={isLastRow}>
-                    {!isTestnet(symbol) && <PriceTicker symbol={symbol} compact />}
+                    {!isTestnet(symbol) && <PriceTicker symbol={symbol} />}
                 </ExchangeRateWrapper>
                 <ExchangeRateWrapper7Days $isLastRow={isLastRow}>
-                    {!isTestnet(symbol) && <TrendTicker symbol={symbol} compact />}
+                    {!isTestnet(symbol) && <TrendTicker symbol={symbol} />}
                 </ExchangeRateWrapper7Days>
                 <BuyButtonWrapper $isLastRow={isLastRow}>
                     {!isTestnet(symbol) && (