feat: add trading information to the market trade button. (#6336)

OneKeyHQ · Dec 12, 2024 · 04c12fa · 04c12fa
1 parent a79a418
commit 04c12fa
Show file tree

Hide file tree

Showing 38 changed files with 603 additions and 382 deletions.
diff --git a/packages/components/tamagui.config.ts b/packages/components/tamagui.config.ts
@@ -565,6 +565,8 @@ const config = createTamagui({
     gtSm: { minWidth: 640 },
     md: { maxWidth: 767 },
     gtMd: { minWidth: 768 },
+    '2md': { maxWidth: 895 },
+    'gt2Md': { minWidth: 896 },
     lg: { maxWidth: 1023 },
     gtLg: { minWidth: 1024 },
     xl: { maxWidth: 1279 },

diff --git a/packages/kit/src/components/TradingView/WebView.tsx b/packages/kit/src/components/TradingView/WebView.tsx
@@ -29,6 +29,10 @@ export function WebView({
         }, 800);
       };
     }
+    // Fallback to dismiss loading screen
+    setTimeout(() => {
+      onLoadEnd();
+    }, 3500);
   }, [iframeId, onLoadEnd, tradingViewProps.uri]);
   return (
     <div style={{ ...(style as any), position: 'relative' }}>
@@ -48,7 +52,7 @@ export function WebView({
         <Stack
           position="absolute"
           width={42}
-          height={28}
+          height={30}
           bottom={30}
           left={10}
           bg="$bgApp"

diff --git a/packages/kit/src/components/TradingView/useTradingViewProps.ts b/packages/kit/src/components/TradingView/useTradingViewProps.ts
@@ -45,12 +45,27 @@ export const useTradingViewProps = ({
 }) => {
   const { md } = useMedia();
   const theme = useThemeVariant();
-  const [bgAppColor, bgSubduedColor, textColor, textDisabled, iconColor] =
-    useThemeValue(
-      ['$bgApp', '$bgSubdued', '$text', '$textDisabled', '$icon'],
-      undefined,
-      true,
-    );
+  const [
+    bgAppColor,
+    bgSubduedColor,
+    textColor,
+    textDisabled,
+    iconColor,
+    bgBackdropColor,
+    bgHoverColor,
+  ] = useThemeValue(
+    [
+      '$bgApp',
+      '$bgSubdued',
+      '$text',
+      '$textDisabled',
+      '$icon',
+      '$bgBackdrop',
+      '$bgHover',
+    ],
+    undefined,
+    true,
+  );
   const systemLocale = useLocaleVariant();
   const locale = useMemo(
     () => localeMap[systemLocale as ILocaleJSONSymbol] || 'en',
@@ -100,13 +115,14 @@ export const useTradingViewProps = ({
       const text = await res.text();
       const style = `
               :root {
-                 --tv-color-toolbar-button-text-active: ${textColor} !important;
+                --tv-color-toolbar-button-text-active: ${textColor} !important;
                 --tv-color-toolbar-button-text-active-hover: ${textColor} !important;
                 --tv-color-pane-background: ${bgAppColor} !important;
                 --tv-color-platform-background: ${bgAppColor} !important;
                 --tv-color-toolbar-button-text: ${textDisabled} !important;
                 --tv-spinner-color: ${iconColor} !important;
                 --tv-color-popup-background: ${bgSubduedColor} !important;
+                --tv-color-popup-element-background-hover: ${bgHoverColor} !important;
               }
               html .chart-page .chart-container-border {
                 background-color: ${bgAppColor} !important;
@@ -141,6 +157,10 @@ export const useTradingViewProps = ({
               html.theme-dark .chart-page {
                 background: ${bgAppColor} !important;
               }
+
+              #overlap-manager-root [class*="backdrop-"] {
+                background-color: ${bgBackdropColor} !important;
+              }
       `;
       const htmlCode = text.replace(
         '</title>',
@@ -175,7 +195,9 @@ export const useTradingViewProps = ({
       textDisabled,
       iconColor,
       bgSubduedColor,
+      bgHoverColor,
       md,
+      bgBackdropColor,
     ],
     {
       initResult: {

diff --git a/packages/kit/src/views/Market/MarketDetail.tsx b/packages/kit/src/views/Market/MarketDetail.tsx
@@ -1,7 +1,6 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
 
 import { CommonActions, StackActions } from '@react-navigation/native';
-import { useIntl } from 'react-intl';
 
 import {
   HeaderIconButton,
@@ -42,7 +41,6 @@ import { MarketTokenIcon } from './components/MarketTokenIcon';
 import { MarketTokenPrice } from './components/MarketTokenPrice';
 import { MarketTradeButton } from './components/MarketTradeButton';
 import { PriceChangePercentage } from './components/PriceChangePercentage';
-import { TextCell } from './components/TextCell';
 import { TokenDetailTabs } from './components/TokenDetailTabs';
 import { TokenPriceChart } from './components/TokenPriceChart';
 import { buildMarketFullUrl } from './marketUtils';
@@ -55,7 +53,6 @@ function TokenDetailHeader({
   coinGeckoId: string;
   token: IMarketTokenDetail;
 }) {
-  const intl = useIntl();
   const { gtMd } = useMedia();
   const { result: token } = usePromiseResult(
     () => backgroundApiProxy.serviceMarket.fetchMarketTokenDetail(coinGeckoId),

diff --git a/packages/kit/src/views/Market/components/Chart/index.tsx b/packages/kit/src/views/Market/components/Chart/index.tsx
@@ -162,7 +162,6 @@ export function PriceChart({
       <Stack h={mdViewHeight} justifyContent="center" alignItems="center">
         {platformEnv.isNative ? chartView : chartViewWithSpinner}
       </Stack>
-      <Stack>{children}</Stack>
     </>
   );
 }
diff --git a/packages/kit/src/views/Market/components/MarketHomeList.tsx b/packages/kit/src/views/Market/components/MarketHomeList.tsx
@@ -52,11 +52,13 @@ import platformEnv from '@onekeyhq/shared/src/platformEnv';
 import { ETabMarketRoutes } from '@onekeyhq/shared/src/routes';
 import { listItemPressStyle } from '@onekeyhq/shared/src/style';
 import timerUtils from '@onekeyhq/shared/src/utils/timerUtils';
+import { isSupportStaking } from '@onekeyhq/shared/types/earn/earnProvider.constants';
 import type {
   IMarketCategory,
   IMarketToken,
 } from '@onekeyhq/shared/types/market';
 
+import { useReviewControl } from '../../../components/ReviewControl';
 import useAppNavigation from '../../../hooks/useAppNavigation';
 import { usePrevious } from '../../../hooks/usePrevious';
 import { usePromiseResult } from '../../../hooks/usePromiseResult';
@@ -183,6 +185,11 @@ function MarketMdColumn({
   }, [item.coingeckoId, navigation]);
 
   const tradeActions = useLazyMarketTradeActions(item.coingeckoId);
+  const show = useReviewControl();
+  const canStaking = useMemo(
+    () => isSupportStaking(item.symbol),
+    [item.symbol],
+  );
   const handleMdItemAction = useCallback(async () => {
     const { coingeckoId, symbol } = item;
     const isInWatchList = actions.isInWatchList(coingeckoId);
@@ -239,38 +246,40 @@ function MarketMdColumn({
         {
           items: [
             {
-              icon: 'SwitchHorOutline',
+              icon: 'SwitchHorOutline' as const,
               label: intl.formatMessage({ id: ETranslations.global_swap }),
-              onPress: tradeActions.onSwap,
+              onPress: tradeActions.onSwapLazyModal,
             },
-            {
-              icon: 'CoinsOutline',
+            canStaking && {
+              icon: 'CoinsOutline' as const,
               label: intl.formatMessage({ id: ETranslations.earn_stake }),
               onPress: tradeActions.onStaking,
             },
-            {
-              icon: 'PlusLargeSolid',
+            show && {
+              icon: 'PlusLargeSolid' as const,
               label: intl.formatMessage({ id: ETranslations.global_buy }),
               onPress: tradeActions.onBuy,
             },
-            {
-              icon: 'MinusLargeSolid',
+            show && {
+              icon: 'MinusLargeSolid' as const,
               label: intl.formatMessage({ id: ETranslations.global_sell }),
               onPress: tradeActions.onSell,
             },
-          ],
+          ].filter(Boolean),
         },
       ],
     });
   }, [
     actions,
+    canStaking,
     intl,
     item,
+    show,
     showMoreAction,
     tradeActions.onBuy,
     tradeActions.onSell,
     tradeActions.onStaking,
-    tradeActions.onSwap,
+    tradeActions.onSwapLazyModal,
   ]);
   const pressEvents = useMemo(
     () => ({
@@ -429,7 +438,7 @@ function BasicMarketHomeList({
     void fetchCategory();
   }, [fetchCategory]);
 
-  const { gtMd, md } = useMedia();
+  const { md, gtMd, gt2Md, gtLg, gtXl, gt2xl } = useMedia();
 
   const filterCoingeckoIdsListData = useMemo(() => {
     const filterListData = category.coingeckoIds?.length
@@ -600,7 +609,6 @@ function BasicMarketHomeList({
   const theme = useThemeVariant();
   const lineColors = lineColorMap[theme];
   const colors = colorMap[theme];
-  const { gtLg, gtXl } = useMedia();
 
   const columns = useMemo(
     () =>
@@ -718,7 +726,7 @@ function BasicMarketHomeList({
               ),
               renderSkeleton: () => <Skeleton w="$20" h="$3" />,
             },
-            gtLg
+            gtXl
               ? {
                   title: intl.formatMessage({
                     id: ETranslations.market_one_hour_percentage,
@@ -737,24 +745,26 @@ function BasicMarketHomeList({
                   renderSkeleton: () => <Skeleton w="$10" h="$3" />,
                 }
               : undefined,
-            {
-              title: intl.formatMessage({
-                id: ETranslations.market_twenty_four_hour_percentage,
-              }),
-              columnProps: {
-                flexGrow: 1,
-                flexBasis: 0,
-              },
-              align: 'right',
-              dataIndex: 'priceChangePercentage24H',
-              render: (priceChangePercentage24H: string) => (
-                <PriceChangePercentage>
-                  {priceChangePercentage24H}
-                </PriceChangePercentage>
-              ),
-              renderSkeleton: () => <Skeleton w="$10" h="$3" />,
-            },
-            gtLg
+            gt2Md
+              ? {
+                  title: intl.formatMessage({
+                    id: ETranslations.market_twenty_four_hour_percentage,
+                  }),
+                  columnProps: {
+                    flexGrow: 1,
+                    flexBasis: 0,
+                  },
+                  align: 'right',
+                  dataIndex: 'priceChangePercentage24H',
+                  render: (priceChangePercentage24H: string) => (
+                    <PriceChangePercentage>
+                      {priceChangePercentage24H}
+                    </PriceChangePercentage>
+                  ),
+                  renderSkeleton: () => <Skeleton w="$10" h="$3" />,
+                }
+              : undefined,
+            gt2xl
               ? {
                   title: intl.formatMessage({
                     id: ETranslations.market_seven_day_percentage,
@@ -773,51 +783,55 @@ function BasicMarketHomeList({
                   renderSkeleton: () => <Skeleton w="$10" h="$3" />,
                 }
               : undefined,
-            {
-              title: intl.formatMessage({
-                id: ETranslations.market_24h_vol_usd,
-              }),
-              dataIndex: 'totalVolume',
-              columnProps: {
-                flexGrow: 1,
-                flexBasis: 0,
-              },
-              align: 'right',
-              render: (totalVolume: string) => (
-                <NumberSizeableText
-                  userSelect="none"
-                  size="$bodyMd"
-                  formatter="marketCap"
-                  formatterOptions={{ currency }}
-                >
-                  {totalVolume || '-'}
-                </NumberSizeableText>
-              ),
-              renderSkeleton: () => <Skeleton w="$20" h="$3" />,
-            },
-            {
-              title: intl.formatMessage({
-                id: ETranslations.global_market_cap,
-              }),
-              dataIndex: 'marketCap',
-              columnProps: {
-                flexGrow: 1,
-                flexBasis: 0,
-              },
-              align: 'right',
-              render: (marketCap: string) => (
-                <NumberSizeableText
-                  userSelect="none"
-                  size="$bodyMd"
-                  formatter="marketCap"
-                  formatterOptions={{ currency }}
-                >
-                  {marketCap || '-'}
-                </NumberSizeableText>
-              ),
-              renderSkeleton: () => <Skeleton w="$20" h="$3" />,
-            },
             gtXl
+              ? {
+                  title: intl.formatMessage({
+                    id: ETranslations.market_24h_vol_usd,
+                  }),
+                  dataIndex: 'totalVolume',
+                  columnProps: {
+                    flexGrow: 1,
+                    flexBasis: 0,
+                  },
+                  align: 'right',
+                  render: (totalVolume: string) => (
+                    <NumberSizeableText
+                      userSelect="none"
+                      size="$bodyMd"
+                      formatter="marketCap"
+                      formatterOptions={{ currency }}
+                    >
+                      {totalVolume || '-'}
+                    </NumberSizeableText>
+                  ),
+                  renderSkeleton: () => <Skeleton w="$20" h="$3" />,
+                }
+              : undefined,
+            gtLg
+              ? {
+                  title: intl.formatMessage({
+                    id: ETranslations.global_market_cap,
+                  }),
+                  dataIndex: 'marketCap',
+                  columnProps: {
+                    flexGrow: 1,
+                    flexBasis: 0,
+                  },
+                  align: 'right',
+                  render: (marketCap: string) => (
+                    <NumberSizeableText
+                      userSelect="none"
+                      size="$bodyMd"
+                      formatter="marketCap"
+                      formatterOptions={{ currency }}
+                    >
+                      {marketCap || '-'}
+                    </NumberSizeableText>
+                  ),
+                  renderSkeleton: () => <Skeleton w="$20" h="$3" />,
+                }
+              : undefined,
+            gt2xl
               ? {
                   title: intl.formatMessage({
                     id: ETranslations.market_last_seven_days,
@@ -901,6 +915,8 @@ function BasicMarketHomeList({
     [
       colors,
       currency,
+      gt2Md,
+      gt2xl,
       gtLg,
       gtMd,
       gtXl,