feat(dcellar-web-ui): upgrade mainnet.

apps/dcellar-web-ui/next.config.js

@@ -94,4 +94,7 @@ const nextConfig = {
   },
 };
 
-module.exports = withSentryConfig(withBundleAnalyzer(withTranspileModules(nextConfig)), sentryWebpackPluginOptions);
+module.exports = withSentryConfig(
+  withBundleAnalyzer(withTranspileModules(nextConfig)),
+  sentryWebpackPluginOptions,
+);

apps/dcellar-web-ui/package.json

@@ -19,7 +19,7 @@
     "ahooks": "3.7.7",
     "hash-wasm": "4.10.0",
     "@babel/core": "^7.20.12",
-    "@bnb-chain/greenfield-js-sdk": "1.0.4",
+    "@bnb-chain/greenfield-js-sdk": "1.0.6",
     "@bnb-chain/greenfield-cosmos-types": "0.4.0-alpha.23",
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
@@ -55,7 +55,9 @@
     "echarts": "~5.4.3",
     "echarts-for-react": "~3.0.2",
     "next-transpile-modules": "~10.0.1",
-    "redux": "~4.2.1"
+    "redux": "~4.2.1",
+    "react-dnd": "16.0.1",
+    "react-dnd-html5-backend": "16.0.1"
   },
   "devDependencies": {
     "@babel/plugin-syntax-flow": "^7.14.5",

apps/dcellar-web-ui/src/base/env.ts

@@ -15,7 +15,8 @@ const {
   NEXT_PUBLIC_GREENFIELD_CHAIN_MAINNET_RPC_URL,
 } = publicRuntimeConfig || {};
 const {
-  NEXT_PRIVATE_BILLING_API_URL
+  NEXT_PRIVATE_BILLING_API_URL,
+  NEXT_PRIVATE_EXPLORER_API_URL,
 } = serverRuntimeConfig || {};
 
 export type TRuntimeEnv = 'development' | 'qa' | 'testnet' | 'mainnet';
@@ -36,4 +37,5 @@ export const GREENFIELD_CHAIN_EXPLORER_URL = NEXT_PUBLIC_GREENFIELD_CHAIN_EXPLOR
 export const BSC_EXPLORER_URL = NEXT_PUBLIC_BSC_EXPLORER_URL;
 export const GREENFIELD_MAINNET_ID = NEXT_PUBLIC_GREENFIELD_CHAIN_MAINNET_ID;
 export const GREENFIELD_MAINNET_RPC_URL = NEXT_PUBLIC_GREENFIELD_CHAIN_MAINNET_RPC_URL;
-export const BILLING_API_URL = NEXT_PRIVATE_BILLING_API_URL;
+export const BILLING_API_URL = NEXT_PRIVATE_BILLING_API_URL;
+export const EXPLORER_API_URL = NEXT_PRIVATE_EXPLORER_API_URL;

apps/dcellar-web-ui/src/base/theme/light.ts

@@ -38,6 +38,7 @@ export const light = {
       'label-normal': '#EEBE11',
       'label-active': '#F1CA3C',
       primary: '#00BA34',
+      chartTick: rgba('#AEB4BC', 0.3),
     },
     bg: {
       bottom: '#f5f5f5',

apps/dcellar-web-ui/src/components/ConnectWallet/index.tsx

@@ -3,14 +3,14 @@ import { DCButton, DCButtonProps } from '@/components/common/DCButton';
 import { Text } from '@totejs/uikit';
 import { smMedia } from '@/modules/responsive';
 import { useRouter } from 'next/router';
-import { InternalRoutePaths } from '@/utils/constant';
 import { useAccount, useDisconnect } from 'wagmi';
 import { ssrLandingRoutes } from '@/pages/_app';
 import { useOffChainAuth } from '@/context/off-chain-auth/useOffChainAuth';
 import { checkOffChainDataAvailable, setLogin } from '@/store/slices/persist';
 import { useAsyncEffect } from 'ahooks';
 import { useAppDispatch } from '@/store';
 import { useModal } from '@totejs/walletkit';
+import { InternalRoutePaths } from '@/constants/paths';
 
 interface ConnectWalletProps extends DCButtonProps {
   icon?: ReactElement;
@@ -34,7 +34,7 @@ export const ConnectWallet = memo<Partial<ConnectWalletProps>>(function ConnectB
     router.push(
       !!router.query.originAsPath
         ? decodeURIComponent(router.query.originAsPath as string)
-        : InternalRoutePaths.buckets,
+        : InternalRoutePaths.dashboard,
     );
   };
 

apps/dcellar-web-ui/src/components/ErrorComponent/index.tsx

@@ -10,7 +10,7 @@ import Link from 'next/link';
 import { Image } from '@totejs/uikit';
 import { useRouter } from 'next/router';
 import { useAppSelector } from '@/store';
-import { InternalRoutePaths } from '@/utils/constant';
+import { InternalRoutePaths } from '@/constants/paths';
 import { IconFont } from '@/components/IconFont';
 
 const Container = styled.main`
@@ -98,7 +98,7 @@ function ErrorComponent({ statusCode }: ErrorComponentProps) {
           >
             {desc}
           </Text>
-          <Link href={address ? InternalRoutePaths.buckets : '/'} legacyBehavior passHref replace>
+          <Link href={address ? InternalRoutePaths.dashboard : '/'} legacyBehavior passHref replace>
             <DCButton w={132} h={32} as="a" mb={40} fontSize={12} borderRadius={4}>
               {isNoBucket ? 'Back to Home' : 'Go to Home'}
             </DCButton>

apps/dcellar-web-ui/src/components/IconFont/index.tsx

@@ -9,6 +9,7 @@ export const IconFont = forwardRef<SVGSVGElement, IconFontProps>(function IconFo
   { type, w = '1em', h = w, ...props },
   ref,
 ) {
+  if (!type) return null;
   return (
     <html.svg ref={ref} w={w} h={h} flexShrink={0} {...props}>
       <use xlinkHref={`#icon-${type.toLowerCase()}`} />

apps/dcellar-web-ui/src/components/WrongNetworkModal/index.tsx

@@ -7,7 +7,7 @@ import { DCButton } from '../common/DCButton';
 import { useWalletSwitchNetWork } from '@/context/WalletConnectContext';
 import { useLogin } from '@/hooks/useLogin';
 import { IconFont } from '@/components/IconFont';
-import { CHAIN_NAMES } from '@/utils/constant';
+import { CHAIN_NAMES } from '@/constants/wallet';
 
 export const WrongNetworkModal = ({ isOpen, onClose }: any) => {
   const { logout } = useLogin();

apps/dcellar-web-ui/src/components/charts/BarChart/index.tsx

@@ -0,0 +1,13 @@
+import { BaseChart, BaseChartProps } from '@/components/charts/BaseChart';
+import { useBarChartOptions } from './useBarChartOptions';
+
+export interface BarChartProps extends BaseChartProps {
+  noData: boolean
+}
+
+export function BarChart({noData, ...props}: BarChartProps) {
+  const { options, ...restProps } = props;
+  const finalOptions = useBarChartOptions(options, noData);
+
+  return <BaseChart options={finalOptions} {...restProps} />;
+}

apps/dcellar-web-ui/src/components/charts/BarChart/useBarChartOptions.ts

@@ -0,0 +1,118 @@
+import { useColorMode, useColorModeValue, useTheme } from '@totejs/uikit';
+import { useEffect, useState } from 'react';
+import { merge } from 'lodash-es';
+import { cssVar } from '@/utils/common';
+import { noDataOptions } from '@/constants/chart';
+
+export function useBarChartOptions(options: any, noData: boolean) {
+  const theme = useTheme();
+  const { colorMode } = useColorMode();
+  const colors = useColorModeValue(theme.colors.light, theme.colors.dark);
+
+  const [finalOptions, setFinalOptions] = useState({});
+
+  useEffect(() => {
+    if (colorMode !== document.documentElement.dataset.theme) {
+      return;
+    }
+    if (noData) {
+      return setFinalOptions(noDataOptions);
+    }
+    const defaultOptions = {
+      title: {
+        text: 'Cost Trend',
+        textStyle: {
+          color: cssVar('readable.normal'),
+          fontSize: 16,
+          fontWeight: 700,
+        },
+        left: 0,
+        padding: [5, 5, 5, 0],
+        textAlign: 'left',
+      },
+      tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+          type: 'shadow',
+        },
+      },
+      grid: {
+        containLabel: true,
+        left: 'left',
+        right: '0%',
+        bottom: '0%',
+      },
+      toolbox: {
+        feature: {
+          dataView: { show: false, readOnly: false },
+          restore: { show: false },
+          saveAsImage: { show: false },
+        },
+      },
+      legend: {
+        icon: 'circle',
+        itemHeight: 8,
+        itemWidth: 8,
+        itemGap: 16,
+        right: 30,
+        textStyle: {
+          fontWeight: 400,
+        },
+      },
+      xAxis: [{
+        type: 'category',
+        axisTick: {
+          show: true,
+          alignWithLabel: true,
+          lineStyle: {
+            color: cssVar('bg.bottom'),
+          },
+        },
+        axisLabel: {
+          color: cssVar('readable.tertiary'),
+          fontSize: 12,
+          fontWeight: 500,
+          margin: 16,
+          lineHeight: 12,
+        },
+        axisLine: {
+          show: false,
+          margin: 18,
+        },
+        axisPointer: {
+          lineStyle: {
+            color: cssVar('readable.secondary'),
+            type: 'solid',
+          },
+        },
+      }],
+      yAxis: [{
+        type: 'value',
+        position: 'left',
+        alignTicks: true,
+        splitNumber: 5,
+        axisLine: {
+          show: false,
+        },
+        axisLabel: {
+          color: cssVar('readable.tertiary'),
+          fontSize: 12,
+          fontWeight: 500,
+        },
+        splitLine: {
+          lineStyle: {
+            color: cssVar('bg.bottom'),
+          },
+        },
+      }],
+      series: [
+      ],
+    };
+
+    const finalOptions = merge(defaultOptions, options);
+
+    setFinalOptions(finalOptions);
+  }, [colors, options, colorMode, noData]);
+
+  return finalOptions;
+}

apps/dcellar-web-ui/src/components/charts/LineChart/index.tsx

@@ -1,11 +1,13 @@
 import { BaseChart, BaseChartProps } from '@/components/charts/BaseChart';
 import { useLineChartOptions } from '@/components/charts/LineChart/useLineChartOptions';
 
-export interface LineChartProps extends BaseChartProps {}
+export interface LineChartProps extends BaseChartProps {
+  noData: boolean
+}
 
-export function LineChart(props: LineChartProps) {
-  const { options } = props;
-  const finalOptions = useLineChartOptions(options);
+export function LineChart({noData, ...props}: LineChartProps) {
+  const { options, ...restProps } = props;
+  const finalOptions = useLineChartOptions(options, noData);
 
-  return <BaseChart options={finalOptions} />;
+  return <BaseChart options={finalOptions} {...restProps} />;
 }