fix(chart): 🐛 handle missing multi-chain chart preview config (#405)

Author: kastale

src/_api/fetchCMS.ts

@@ -1,7 +1,27 @@
 import request from '@_api';
-export async function fetchCMS() {
+
+export interface ICMSChartImageGroup {
+  [chartKey: string]: string | undefined;
+}
+
+export interface ICMSChartImageConfig {
+  [chainKey: string]: ICMSChartImageGroup | undefined;
+  multi?: ICMSChartImageGroup;
+  multiChain?: ICMSChartImageGroup;
+}
+
+export interface IFetchCMSResult {
+  headerMenuList: any[];
+  footerMenuList: any[];
+  chainList: any[];
+  networkList: any[];
+  config: Record<string, any>;
+  chartImg?: ICMSChartImageConfig;
+}
+
+export async function fetchCMS(): Promise<IFetchCMSResult> {
   const result = await request.cms.getGlobalConfig({ params: { cache: 'no-store' } });
-  const { data } = result;
+  const { data } = result as { data: IFetchCMSResult };
   return data;
 }
 

src/app/[chain]/chart/page.tsx

@@ -3,14 +3,30 @@
 import { Anchor, Card } from 'antd';
 import './index.css';
 import Link from 'next/link';
+import { useEffect, useRef } from 'react';
 import { useMobileContext } from '@app/pageProvider';
 import PageAd from '@_components/PageAd';
 import { ChartData, chartItems } from './type';
 import { MULTI_CHAIN } from '@_utils/contant';
 
+const DEFAULT_CHART_IMAGE = '/image/chart.svg';
+
 export default function Page() {
   const { chartImg } = useMobileContext();
-  const chainType = 'multi';
+  const chainType = MULTI_CHAIN;
+  const chartImgGroup = chartImg?.[chainType] ?? chartImg?.multi;
+  const loggedMissingChartImgRef = useRef(false);
+
+  useEffect(() => {
+    if (process.env.NODE_ENV === 'production') {
+      return;
+    }
+
+    if (!chartImgGroup && !loggedMissingChartImgRef.current) {
+      console.warn('[chart] chartImg config is missing, using fallback chart preview image.');
+      loggedMissingChartImgRef.current = true;
+    }
+  }, [chartImgGroup]);
 
   return (
     <div className="chart-home-container mb-[-40px]">
@@ -30,6 +46,7 @@ export default function Page() {
                 <div className="title text-ls mb-[10px] font-medium">{chartItem.title}</div>
                 <ul className="grid items-stretch gap-5 min-[576px]:grid-cols-2 min-[1200px]:grid-cols-3">
                   {chartItem.charts.map((chart) => {
+                    const chartPreviewSrc = chartImgGroup?.[chart.key] || DEFAULT_CHART_IMAGE;
                     return (
                       <li key={chart.path}>
                         <Link href={`/${MULTI_CHAIN}${chart.path}`}>
@@ -39,8 +56,8 @@ export default function Page() {
                               width={316}
                               height={106}
                               className="mx-auto block h-auto max-w-full"
-                              src={chartImg[chainType][chart.key]}
-                              alt="charts"></img>
+                              src={chartPreviewSrc}
+                              alt={chart.title}></img>
                           </Card>
                         </Link>
                       </li>

src/app/pageProvider.tsx

@@ -10,21 +10,39 @@
 
 import { PREFIXCLS, THEME_CONFIG } from '@_lib/AntdThemeConfig';
 import { makeStore, AppStore } from '@_store';
+import type { ICMSChartImageConfig } from '@_api/fetchCMS';
 // import { wrapper } from '@_store';
-import { createContext, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { createContext, useContext, useRef } from 'react';
 import { AELFDProvider } from 'aelf-design';
 import 'aelf-design/css';
 import { ConfigProvider } from 'antd';
 import { Provider as ReduxProvider } from 'react-redux';
-import useResponsive from '@_hooks/useResponsive';
-import dynamic from 'next/dynamic';
 import WebLoginProvider from './webLoginProvider';
 // const OpentelemetryProvider = dynamic(
 //   () => import('./opentelemetryProvider').then((mod) => mod.OpentelemetryProvider),
 //   { ssr: false },
 // );
 
-const MobileContext = createContext<any>({});
+interface IMobileContextValue {
+  isMobileSSR: boolean;
+  config: Record<string, any>;
+  chartImg?: ICMSChartImageConfig;
+}
+
+interface IRootProviderProps {
+  children: React.ReactNode;
+  isMobileSSR: boolean;
+  config: Record<string, any>;
+  chartImg?: ICMSChartImageConfig;
+  networkList: any[];
+  headerMenuList: any[];
+  chainList: any[];
+}
+
+const MobileContext = createContext<IMobileContextValue>({
+  isMobileSSR: false,
+  config: {},
+});
 const HeaderContext = createContext<any>({});
 
 const useMobileContext = () => {
@@ -35,18 +53,20 @@ const useHeaderContext = () => {
 };
 export { useMobileContext, useHeaderContext };
 
-function RootProvider({ children, isMobileSSR, config, chartImg, networkList, headerMenuList, chainList }) {
+function RootProvider({
+  children,
+  isMobileSSR,
+  config,
+  chartImg,
+  networkList,
+  headerMenuList,
+  chainList,
+}: IRootProviderProps) {
   const storeRef = useRef<AppStore>();
   if (!storeRef.current) {
     storeRef.current = makeStore();
   }
 
-  const [isMobile, setIsMobile] = useState(isMobileSSR);
-  const { isMobile: isMobileClient } = useResponsive();
-  useEffect(() => {
-    setIsMobile(isMobileClient);
-  }, [isMobileClient]);
-
   return (
     <AELFDProvider prefixCls={PREFIXCLS} theme={THEME_CONFIG}>
       <ConfigProvider prefixCls={PREFIXCLS} theme={THEME_CONFIG}>