Update charts

Update charts

Update loading

Add Skeleton

Update loading skeleton

Author: neikop

apps/kyberswap-interface/src/components/Skeleton/index.tsx

@@ -0,0 +1,37 @@
+import { type ComponentProps } from 'react'
+import LoadingSkeleton from 'react-loading-skeleton'
+import { createGlobalStyle } from 'styled-components'
+
+import useTheme from 'hooks/useTheme'
+
+export type SkeletonProps = ComponentProps<typeof LoadingSkeleton>
+
+const SKELETON_CONTAINER_CLASSNAME = 'ks-skeleton-container'
+
+const SkeletonGlobalStyle = createGlobalStyle`
+  .${SKELETON_CONTAINER_CLASSNAME} {
+    display: block;
+    line-height: 0;
+  }
+`
+
+const Skeleton = ({ baseColor, containerClassName, highlightColor, ...props }: SkeletonProps) => {
+  const theme = useTheme()
+  const mergedContainerClassName = containerClassName
+    ? `${SKELETON_CONTAINER_CLASSNAME} ${containerClassName}`
+    : SKELETON_CONTAINER_CLASSNAME
+
+  return (
+    <>
+      <SkeletonGlobalStyle />
+      <LoadingSkeleton
+        {...props}
+        baseColor={baseColor ?? theme.background}
+        containerClassName={mergedContainerClassName}
+        highlightColor={highlightColor ?? theme.buttonGray}
+      />
+    </>
+  )
+}
+
+export default Skeleton

apps/kyberswap-interface/src/pages/Earns/PoolDetail/Information/AnalyticsTab.tsx

@@ -1,38 +1,16 @@
-import { useState } from 'react'
-
 import { Stack } from 'components/Stack'
-import { formatUsd, getPoolLiquidityUsd } from 'pages/Earns/PoolDetail/Information/utils'
 import LiquidityFlowsChart from 'pages/Earns/PoolDetail/components/LiquidityFlowsChart'
 import PoolPriceChart from 'pages/Earns/PoolDetail/components/PoolPriceChart'
-import TopMetricsStrip from 'pages/Earns/PoolDetail/components/TopMetricsStrip'
 import { usePoolDetailContext } from 'pages/Earns/PoolDetail/context'
-import { useTokenPrices } from 'state/tokenPrices/hooks'
 
 const AnalyticsTab = () => {
-  const { chainId, pool, poolAddress } = usePoolDetailContext()
-  const [currentTvl, setCurrentTvl] = useState<number | undefined>()
-
-  const tokenPrices = useTokenPrices(
-    pool.tokens.map(token => token.address),
-    chainId,
-  )
-  const totalTvl = pool.poolStats?.tvl
-
-  const liquidityUsdValue = getPoolLiquidityUsd(pool, tokenPrices)
-
-  const metrics = [
-    { label: 'TVL', value: formatUsd(totalTvl) },
-    { label: 'Current TVL', value: formatUsd(currentTvl ?? totalTvl) },
-    { label: 'Liquidity', value: formatUsd(liquidityUsdValue) },
-  ]
+  const { chainId, poolAddress } = usePoolDetailContext()
 
   return (
     <Stack gap={20}>
-      <TopMetricsStrip items={metrics} split />
-
       <PoolPriceChart chainId={chainId} poolAddress={poolAddress} />
 
-      <LiquidityFlowsChart chainId={chainId} poolAddress={poolAddress} onCurrentTvlChange={setCurrentTvl} />
+      <LiquidityFlowsChart chainId={chainId} poolAddress={poolAddress} />
     </Stack>
   )
 }

apps/kyberswap-interface/src/pages/Earns/PoolDetail/Information/InformationTab.tsx

@@ -46,7 +46,7 @@ const InformationTab = () => {
 
   return (
     <Stack gap={20}>
-      <TopMetricsStrip items={topMetrics} />
+      <TopMetricsStrip items={topMetrics} split={true} />
 
       <AprHistoryChart chainId={chainId} poolAddress={poolAddress} />
     </Stack>

apps/kyberswap-interface/src/pages/Earns/PoolDetail/Information/index.tsx

@@ -48,7 +48,7 @@ const PoolInformation = () => {
   const currentTab: PoolInfoTab = activeTab || 'information'
 
   return (
-    <Panel width="100%" gap={16}>
+    <Panel width="100%" gap={20}>
       <HStack align="center" gap={16} wrap="wrap">
         {POOL_INFO_TABS.map((tab, index) => (
           <HStack key={tab.id} align="center" gap={16}>

apps/kyberswap-interface/src/pages/Earns/PoolDetail/components/AprHistoryChart.tsx

@@ -19,7 +19,8 @@ import PoolChartState, { PoolChartWrapper } from 'pages/Earns/PoolDetail/compone
 import { MEDIA_WIDTHS } from 'theme'
 
 const TooltipCard = styled(Stack)`
-  gap: 8px;
+  gap: 12px;
+  min-width: 220px;
   padding: 12px 16px;
   border: 1px solid ${({ theme }) => theme.border};
   background: ${({ theme }) => theme.tableHeader};
@@ -141,9 +142,9 @@ const AprHistoryChart = ({ chainId, poolAddress }: AprHistoryChartProps) => {
   const gridColor = rgba(theme.text, 0.06)
 
   const {
-    currentData: aprHistoryData,
+    data: aprHistoryData,
     isError,
-    isFetching,
+    isLoading,
   } = usePoolAprHistoryQuery({
     chainId,
     address: poolAddress,
@@ -222,7 +223,8 @@ const AprHistoryChart = ({ chainId, poolAddress }: AprHistoryChartProps) => {
         height={chartHeight}
         isEmpty={!chartData.length}
         isError={isError}
-        isLoading={isFetching && !aprHistoryData}
+        isLoading={isLoading}
+        skeletonType="line"
       >
         <PoolChartWrapper $height={chartHeight}>
           <ResponsiveContainer width="100%" height="100%">

apps/kyberswap-interface/src/pages/Earns/PoolDetail/components/LiquidityFlowsChart.tsx

@@ -1,5 +1,5 @@
 import { rgba } from 'polished'
-import { useEffect, useMemo, useState } from 'react'
+import { useMemo, useState } from 'react'
 import { useMedia } from 'react-use'
 import { Text } from 'rebass'
 import {
@@ -74,7 +74,6 @@ type TooltipContentProps = {
 
 type LiquidityFlowsChartProps = {
   chainId: number
-  onCurrentTvlChange?: (value?: number) => void
   poolAddress: string
 }
 
@@ -110,7 +109,7 @@ const LiquidityFlowsTooltip = ({
           {formatUsd(Math.abs(point.removeUsd))}
         </Text>
         <Text color={theme.subText} fontSize={12}>
-          Net Liquidity Flow
+          Net Flow
         </Text>
         <Text color={theme.text} fontSize={12} fontWeight={500} textAlign="right">
           {formatUsd(Math.abs(point.lpVolumeUsd))}
@@ -126,7 +125,7 @@ const LiquidityFlowsTooltip = ({
   )
 }
 
-const LiquidityFlowsChart = ({ chainId, onCurrentTvlChange, poolAddress }: LiquidityFlowsChartProps) => {
+const LiquidityFlowsChart = ({ chainId, poolAddress }: LiquidityFlowsChartProps) => {
   const theme = useTheme()
 
   const [window, setWindow] = useState<PoolAnalyticsWindow>('7d')
@@ -143,9 +142,9 @@ const LiquidityFlowsChart = ({ chainId, onCurrentTvlChange, poolAddress }: Liqui
   const removeLiquidityColor = rgba(theme.red, 0.5)
 
   const {
-    currentData: liquidityFlowData,
+    data: liquidityFlowData,
     isError,
-    isFetching,
+    isLoading,
   } = usePoolLiquidityFlowsQuery({
     chainId,
     address: poolAddress,
@@ -162,14 +161,7 @@ const LiquidityFlowsChart = ({ chainId, onCurrentTvlChange, poolAddress }: Liqui
     [liquidityFlowData?.buckets],
   )
 
-  const latestBucket = liquidityFlowData?.buckets.at(-1)
-
-  useEffect(() => {
-    onCurrentTvlChange?.(latestBucket?.tvlUsd)
-  }, [latestBucket?.tvlUsd, onCurrentTvlChange])
-
   const handleSelectWindow = (value: PoolAnalyticsWindow) => {
-    onCurrentTvlChange?.(undefined)
     setWindow(value)
   }
 
@@ -186,10 +178,11 @@ const LiquidityFlowsChart = ({ chainId, onCurrentTvlChange, poolAddress }: Liqui
       <PoolChartState
         emptyMessage="No liquidity flow data available for this pool."
         errorMessage="Unable to load liquidity flows."
+        exclusiveType="liquidity-flow"
         height={chartHeight}
         isEmpty={!chartData.length}
         isError={isError}
-        isLoading={isFetching && !liquidityFlowData}
+        isLoading={isLoading}
       >
         <Stack gap={12}>
           <PoolChartWrapper $height={chartHeight}>
@@ -297,7 +290,7 @@ const LiquidityFlowsChart = ({ chainId, onCurrentTvlChange, poolAddress }: Liqui
             <HStack align="center" gap={8}>
               <LegendLine $color={theme.primary} />
               <Text color={theme.subText} fontSize={12}>
-                Net Liquidity Flow
+                Net Flow
               </Text>
             </HStack>
             <HStack align="center" gap={8}>