Stats Update: secondary token icon (#2206)

Fixes #1849

mocks/stats/index.ts

@@ -72,6 +72,7 @@ export const withoutGasInfo: HomeStats = {
 export const withSecondaryCoin: HomeStats = {
   ...base,
   secondary_coin_price: '3.398',
+  secondary_coin_image: 'http://localhost:3100/secondary_utia.jpg',
 };
 
 export const noChartData: HomeStats = {

types/api/stats.ts

@@ -19,6 +19,7 @@ export type HomeStats = {
   rootstock_locked_btc?: string | null;
   last_output_root_size?: string | null;
   secondary_coin_price?: string | null;
+  secondary_coin_image?: string | null;
   celo?: {
     epoch_number: number;
   };

ui/home/indicators/ChainIndicators.pw.tsx

@@ -21,6 +21,7 @@ test.describe('daily txs chart', () => {
     await mockApiResponse('stats', statsMock.withSecondaryCoin);
     await mockApiResponse('stats_charts_txs', dailyTxsMock.base);
     await mockAssetResponse(statsMock.withSecondaryCoin.coin_image as string, './playwright/mocks/image_svg.svg');
+    await mockAssetResponse(statsMock.withSecondaryCoin.secondary_coin_image as string, './playwright/mocks/image_s.jpg');
     component = await render(<ChainIndicators/>);
     await page.waitForFunction(() => {
       return document.querySelector('path[data-name="gradient-chart-area"]')?.getAttribute('opacity') === '1';

ui/home/indicators/utils/indicators.tsx

@@ -7,7 +7,6 @@ import config from 'configs/app';
 import { sortByDateDesc } from 'ui/shared/chart/utils/sorts';
 import IconSvg from 'ui/shared/IconSvg';
 import NativeTokenIcon from 'ui/shared/NativeTokenIcon';
-import TokenLogoPlaceholder from 'ui/shared/TokenLogoPlaceholder';
 
 const nonNullTailReducer = (result: Array<TimeChartItemRaw>, item: TimeChartItemRaw) => {
   if (item.value === null && result.length === 0) {
@@ -71,7 +70,7 @@ const secondaryCoinPriceIndicator: TChainIndicator<'stats_charts_secondary_coin_
     '$N/A' :
     '$' + Number(stats.secondary_coin_price).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 6 }),
   valueDiff: () => null,
-  icon: <TokenLogoPlaceholder boxSize={ 6 }/>,
+  icon: <NativeTokenIcon boxSize={ 6 } type="secondary"/>,
   hint: `${ config.chain.secondaryCoin.symbol } token daily price in USD.`,
   api: {
     resourceName: 'stats_charts_secondary_coin_price',

ui/shared/NativeTokenIcon.tsx

@@ -10,28 +10,31 @@ import TokenLogoPlaceholder from './TokenLogoPlaceholder';
 type Props = {
   isLoading?: boolean;
   className?: string;
+  type?: 'primary' | 'secondary';
 }
 
-const NativeTokenIcon = (props: Props) => {
+const NativeTokenIcon = ({ isLoading, className, type }: Props) => {
   const statsQueryResult = useApiQuery('stats', {
     queryOptions: {
       refetchOnMount: false,
       placeholderData: HOMEPAGE_STATS,
     },
   });
 
-  if (props.isLoading || statsQueryResult.isPlaceholderData) {
-    return <Skeleton borderRadius="base" className={ props.className }/>;
+  if (isLoading || statsQueryResult.isPlaceholderData) {
+    return <Skeleton borderRadius="base" className={ className }/>;
   }
 
+  const src = type === 'secondary' ? statsQueryResult.data?.secondary_coin_image : statsQueryResult.data?.coin_image;
+
   return (
     <Image
       borderRadius="base"
-      className={ props.className }
-      src={ statsQueryResult.data?.coin_image || '' }
+      className={ className }
+      src={ src || '' }
       alt={ `${ config.chain.currency.symbol } logo` }
-      fallback={ <TokenLogoPlaceholder borderRadius="base" className={ props.className }/> }
-      fallbackStrategy={ statsQueryResult.data?.coin_image ? 'onError' : 'beforeLoadOrError' }
+      fallback={ <TokenLogoPlaceholder borderRadius="base" className={ className }/> }
+      fallbackStrategy={ src ? 'onError' : 'beforeLoadOrError' }
     />
   );
 };