style: market chart is modified to horizontal scrolling. (#6325)

OneKeyHQ · Dec 11, 2024 · 1414e8a · 1414e8a
1 parent 0c1a93e
commit 1414e8a
Show file tree

Hide file tree

Showing 14 changed files with 388 additions and 270 deletions.
diff --git a/apps/mobile/ios/Podfile.lock b/apps/mobile/ios/Podfile.lock
@@ -1019,7 +1019,7 @@ PODS:
     - React-Core
   - react-native-slider (4.4.3):
     - React-Core
-  - react-native-tab-page-view (1.0.17):
+  - react-native-tab-page-view (1.0.18):
     - JXCategoryView (~> 1.6.1)
     - JXPagingView/Pager (~> 2.1.2)
     - React
@@ -1766,7 +1766,7 @@ SPEC CHECKSUMS:
   react-native-restart: 7595693413fe3ca15893702f2c8306c62a708162
   react-native-safe-area-context: 7aa8e6d9d0f3100a820efb1a98af68aa747f9284
   react-native-slider: 1cdd6ba29675df21f30544253bf7351d3c2d68c4
-  react-native-tab-page-view: c1f9217177b7043a7e3a9bc779d49d9f2c9eb0d7
+  react-native-tab-page-view: 85c179e539d8a096f13a057ffe97aa3995479dc2
   react-native-tcp-socket: e724380c910c2e704816ec817ed28f1342246ff7
   react-native-video: dc3118548cf8864a83f57df4345cf6c692402e8f
   react-native-view-shot: 4475fde003fe8a210053d1f98fb9e06c1d834e1c

diff --git a/apps/mobile/package.json b/apps/mobile/package.json
@@ -34,7 +34,7 @@
     "@onekeyfe/react-native-animated-charts": "1.0.0",
     "@onekeyfe/react-native-ble-plx": "3.0.0",
     "@onekeyfe/react-native-lite-card": "1.0.12",
-    "@onekeyfe/react-native-tab-page-view": "1.0.17",
+    "@onekeyfe/react-native-tab-page-view": "1.0.18",
     "@onekeyfe/react-native-text-input": "0.2.4",
     "@onekeyhq/components": "*",
     "@onekeyhq/kit": "*",

diff --git a/packages/components/src/content/Progress/index.tsx b/packages/components/src/content/Progress/index.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 
 import { Progress as TMProgress } from 'tamagui';
 
@@ -14,6 +14,25 @@ export type IProgressProps = {
 } & Omit<TMProgressProps, 'size'>;
 
 const DEFAULT_MAX = 100;
+
+const INDICATOR_DELAY = 300;
+const useLazyShowIndicator: (value: number) => [boolean, number] =
+  platformEnv.isNative
+    ? (value: number) => [true, value]
+    : (value: number) => {
+        const [showIndicator, setIsShowIndicator] = useState(false);
+        const [rawValue, setRawValue] = useState(0);
+        useEffect(() => {
+          setTimeout(() => {
+            setIsShowIndicator(true);
+            setTimeout(() => {
+              setRawValue(value);
+            }, INDICATOR_DELAY);
+          }, INDICATOR_DELAY);
+        }, [value]);
+        return [showIndicator, rawValue];
+      };
+
 export function Progress({
   size,
   value,
@@ -29,27 +48,35 @@ export function Progress({
     () => (Number(value) > DEFAULT_MAX ? DEFAULT_MAX : value || 0),
     [value],
   );
+  const [showIndicator, progressValue] = useLazyShowIndicator(val);
   const [width, setWidth] = useState(0);
-  const onLayout = useCallback((event: LayoutChangeEvent) => {
-    setWidth(event.nativeEvent.layout.width);
-  }, []);
+  const onLayout = useCallback(
+    (event: LayoutChangeEvent) => {
+      if (gap) {
+        setWidth(event.nativeEvent.layout.width);
+      }
+    },
+    [gap],
+  );
   return (
     <TMProgress
       backgroundColor={colors[0] || '$neutral5'}
       h={h}
-      value={val}
+      value={progressValue}
       onLayout={onLayout}
       max={DEFAULT_MAX}
       {...props}
     >
-      <TMProgress.Indicator
-        // https://github.com/tamagui/tamagui/issues/2753
-        // https://github.com/tamagui/tamagui/issues/2847
-        // Enabling animation on Native platforms causes the progress bar to fail initial rendering
-        animation={platformEnv.isNative ? null : 'quick'}
-        backgroundColor={colors[1] || '$bgPrimary'}
-        borderRadius="$full"
-      />
+      {showIndicator ? (
+        <TMProgress.Indicator
+          // https://github.com/tamagui/tamagui/issues/2753
+          // https://github.com/tamagui/tamagui/issues/2847
+          // Enabling animation on Native platforms causes the progress bar to fail initial rendering
+          animation={platformEnv.isNative ? null : 'quick'}
+          backgroundColor={colors[1] || '$bgPrimary'}
+          borderRadius="$full"
+        />
+      ) : null}
       {gap ? (
         <View
           h={h}

diff --git a/packages/components/src/layouts/TabView/StickyTabComponent/types.tsx b/packages/components/src/layouts/TabView/StickyTabComponent/types.tsx
@@ -28,4 +28,5 @@ export interface ITabProps extends IScrollViewProps {
 
 export interface ITabInstance {
   setVerticalScrollEnabled: (enabled: boolean) => void;
+  scrollToTop: () => void;
 }
diff --git a/packages/kit/src/components/TradingView/WebView.native.tsx b/packages/kit/src/components/TradingView/WebView.native.tsx
@@ -42,6 +42,7 @@ export function WebView({
       <NativeWebView
         javaScriptEnabled
         domStorageEnabled
+        nestedScrollEnabled
         onMessage={onMessage}
         webviewDebuggingEnabled={platformEnv.isDev}
         injectedJavaScript={injectedJavaScript}

diff --git a/packages/kit/src/components/TradingView/WebView.tsx b/packages/kit/src/components/TradingView/WebView.tsx
@@ -1,6 +1,7 @@
 import { useEffect, useMemo } from 'react';
 
 import { Stack } from '@onekeyhq/components';
+import platformEnv from '@onekeyhq/shared/src/platformEnv';
 import { generateUUID } from '@onekeyhq/shared/src/utils/miscUtils';
 
 import type { ViewStyle } from 'react-native';
@@ -43,14 +44,16 @@ export function WebView({
         title="TradingView"
         sandbox="allow-orientation-lock allow-scripts	allow-top-navigation allow-top-navigation-by-user-activation allow-same-origin allow-popups"
       />
-      <Stack
-        position="absolute"
-        width={42}
-        height={20}
-        bottom={40}
-        left={10}
-        bg="$bgApp"
-      />
+      {platformEnv.isDesktop ? (
+        <Stack
+          position="absolute"
+          width={42}
+          height={28}
+          bottom={30}
+          left={10}
+          bg="$bgApp"
+        />
+      ) : null}
     </div>
   );
 }
diff --git a/packages/kit/src/components/TradingView/useTradingViewProps.ts b/packages/kit/src/components/TradingView/useTradingViewProps.ts
@@ -2,7 +2,7 @@ import { useMemo } from 'react';
 
 import { useCalendars } from 'expo-localization';
 
-import { useThemeValue } from '@onekeyhq/components';
+import { useMedia, useThemeValue } from '@onekeyhq/components';
 import type { ILocaleJSONSymbol } from '@onekeyhq/shared/src/locale';
 import platformEnv from '@onekeyhq/shared/src/platformEnv';
 
@@ -43,12 +43,14 @@ export const useTradingViewProps = ({
   baseToken: string;
   targetToken: string;
 }) => {
+  const { md } = useMedia();
   const theme = useThemeVariant();
-  const [bgAppColor, textColor, textDisabled, iconColor] = useThemeValue(
-    ['$bgApp', '$text', '$textDisabled', '$icon'],
-    undefined,
-    true,
-  );
+  const [bgAppColor, bgSubduedColor, textColor, textDisabled, iconColor] =
+    useThemeValue(
+      ['$bgApp', '$bgSubdued', '$text', '$textDisabled', '$icon'],
+      undefined,
+      true,
+    );
   const systemLocale = useLocaleVariant();
   const locale = useMemo(
     () => localeMap[systemLocale as ILocaleJSONSymbol] || 'en',
@@ -104,10 +106,38 @@ export const useTradingViewProps = ({
                 --tv-color-platform-background: ${bgAppColor} !important;
                 --tv-color-toolbar-button-text: ${textDisabled} !important;
                 --tv-spinner-color: ${iconColor} !important;
+                --tv-color-popup-background: ${bgSubduedColor} !important;
               }
+              html .chart-page .chart-container-border {
+                background-color: ${bgAppColor} !important;
+              }  
               body {
                 border-width: 0px !important;
               }  
+                ${
+                  md
+                    ? `
+                .layout__area--top>div {
+                  padding: 0 10px;
+                }`
+                    : ''
+                }
+
+              div:has(>#header-toolbar-compare) {
+                display: none;
+              } 
+              div:has(>#header-toolbar-chart-styles) + div {
+                display: none;
+              }
+              div:has(>#header-toolbar-compare) + div {
+                display: none;
+              }
+              div:has(>#header-toolbar-indicators) {
+                display: none;
+              }
+              div:has(>#header-toolbar-indicators) + div {
+                display: none;
+              }
               html.theme-dark .chart-page {
                 background: ${bgAppColor} !important;
               }
@@ -134,16 +164,18 @@ export const useTradingViewProps = ({
       };
     },
     [
-      baseToken,
-      bgAppColor,
       identifier,
-      locale,
+      baseToken,
       targetToken,
-      theme,
       timezone,
-      iconColor,
+      theme,
+      locale,
+      bgAppColor,
       textColor,
       textDisabled,
+      iconColor,
+      bgSubduedColor,
+      md,
     ],
     {
       initResult: {

diff --git a/packages/kit/src/views/Earn/EarnHome.tsx b/packages/kit/src/views/Earn/EarnHome.tsx
@@ -684,6 +684,7 @@ function BasicEarnHome() {
       watchLoading: true,
       pollingInterval: timerUtils.getTimeDurationMs({ minute: 3 }),
       revalidateOnReconnect: true,
+      alwaysSetState: true,
     },
   );
 

diff --git a/packages/kit/src/views/Market/MarketDetail.tsx b/packages/kit/src/views/Market/MarketDetail.tsx
@@ -287,13 +287,14 @@ function MarketDetail({
   const tokenPriceChart = useMemo(
     () => (
       <TokenPriceChart
+        isFetching={!tokenDetail}
         tickers={tokenDetail?.tickers}
         coinGeckoId={coinGeckoId}
         defer={defer}
         symbol={tokenDetail?.symbol}
       />
     ),
-    [coinGeckoId, defer, tokenDetail?.symbol, tokenDetail?.tickers],
+    [coinGeckoId, defer, tokenDetail],
   );
 
   return (
@@ -314,6 +315,7 @@ function MarketDetail({
                 <TokenDetailTabs
                   defer={defer}
                   token={tokenDetail}
+                  coinGeckoId={coinGeckoId}
                   listHeaderComponent={tokenPriceChart}
                 />
               </YStack>
@@ -325,12 +327,8 @@ function MarketDetail({
             isRefreshing={isRefreshing}
             onRefresh={onRefresh}
             token={tokenDetail}
-            listHeaderComponent={
-              <YStack>
-                {tokenDetailHeader}
-                {tokenDetail ? tokenPriceChart : <YStack h={480} />}
-              </YStack>
-            }
+            coinGeckoId={coinGeckoId}
+            listHeaderComponent={tokenDetailHeader}
           />
         )}
       </Page.Body>

diff --git a/packages/kit/src/views/Market/components/Chart/index.tsx b/packages/kit/src/views/Market/components/Chart/index.tsx
@@ -26,6 +26,7 @@ type IPriceChartProps = {
   data?: IMarketTokenChart;
   children: ReactNode;
   isFetching: boolean;
+  height: number;
 };
 
 type IOnHoverFunction = ({
@@ -36,7 +37,12 @@ type IOnHoverFunction = ({
   price?: number | string;
 }) => void;
 
-export function PriceChart({ data, isFetching, children }: IPriceChartProps) {
+export function PriceChart({
+  data,
+  isFetching,
+  height,
+  children,
+}: IPriceChartProps) {
   const { formatDate } = useFormatDate();
   const intl = useIntl();
 
@@ -102,11 +108,24 @@ export function PriceChart({ data, isFetching, children }: IPriceChartProps) {
     );
   }, [intl, isFetching]);
 
+  const viewHeight = useMemo(() => {
+    if (gtMd) {
+      return height;
+    }
+    if (platformEnv.isNative) {
+      return height * 0.9;
+    }
+    return height * 0.45;
+  }, [gtMd, height]);
+  const mdViewHeight = useMemo(
+    () => (platformEnv.isNative ? height * 0.65 : height * 0.7),
+    [height],
+  );
   const chartView =
     data && data.length > 0 ? (
       <ChartView
         isFetching={isFetching}
-        height={450}
+        height={viewHeight}
         data={data}
         onHover={onHover}
       />
@@ -129,7 +148,6 @@ export function PriceChart({ data, isFetching, children }: IPriceChartProps) {
         {children}
       </XStack>
       <Stack
-        h={406}
         mt={32}
         $gtMd={{ mt: '$1' }}
         justifyContent="center"
@@ -141,7 +159,7 @@ export function PriceChart({ data, isFetching, children }: IPriceChartProps) {
   ) : (
     <>
       {priceLabel}
-      <Stack h={410} justifyContent="center" alignItems="center">
+      <Stack h={mdViewHeight} justifyContent="center" alignItems="center">
         {platformEnv.isNative ? chartView : chartViewWithSpinner}
       </Stack>
       <Stack>{children}</Stack>