fix: resolved the issue where headerShown: false was not working afte…

…r the interface rendering & added the AnchorSizableText component & fixed the issue of the Loading indicator showing twice on the market detail page. (OK-32345) (#6395)

packages/components/src/actions/Toast/index.tsx

@@ -8,15 +8,9 @@ import { useMedia } from 'tamagui';
 import { dismissKeyboard } from '@onekeyhq/shared/src/keyboard';
 import platformEnv from '@onekeyhq/shared/src/platformEnv';
 
+import { AnchorSizableText } from '../../content/AnchorSizableText';
 import { Portal } from '../../hocs';
-import {
-  Anchor,
-  Icon,
-  SizableText,
-  View,
-  XStack,
-  YStack,
-} from '../../primitives';
+import { Icon, View, XStack, YStack } from '../../primitives';
 
 import { ShowCustom, ShowToasterClose } from './ShowCustom';
 import { showMessage } from './showMessage';
@@ -48,7 +42,6 @@ const iconMap = {
   warning: <Icon name="ErrorSolid" color="$iconCaution" size="$5" />,
 };
 
-const urlRegex = /<url(?:\s+[^>]*?)?>(.*?)<\/url>/g;
 const RenderLines = ({
   size,
   children: text,
@@ -69,52 +62,18 @@ const RenderLines = ({
 
   return (
     <YStack>
-      {lines.map((line, index) => {
-        const hasUrl = urlRegex.test(line);
-        if (!hasUrl) {
-          return (
-            <SizableText
-              key={index}
-              color={color}
-              textTransform="none"
-              userSelect="none"
-              size={size}
-              wordWrap="break-word"
-            >
-              {line}
-            </SizableText>
-          );
-        }
-        const parts = line.split(urlRegex);
-        const hrefMatch = line.match(/href="(.*?)"/);
-        return (
-          <SizableText
-            key={index}
-            color={color}
-            textTransform="none"
-            userSelect="none"
-            size={size}
-            wordWrap="break-word"
-          >
-            {parts.map((part, partIndex) => {
-              if (partIndex % 2 === 1) {
-                return (
-                  <Anchor
-                    key={partIndex}
-                    href={hrefMatch?.[1]}
-                    target="_blank"
-                    size={size}
-                    color="$textInfo"
-                  >
-                    {part}
-                  </Anchor>
-                );
-              }
-              return part;
-            })}
-          </SizableText>
-        );
-      })}
+      {lines.map((line, index) => (
+        <AnchorSizableText
+          key={index}
+          color={color}
+          textTransform="none"
+          userSelect="none"
+          size={size}
+          wordWrap="break-word"
+        >
+          {line}
+        </AnchorSizableText>
+      ))}
     </YStack>
   );
 };

packages/components/src/content/AnchorSizableText/index.tsx

@@ -0,0 +1,46 @@
+import { Anchor, SizableText } from '../../primitives';
+
+import type { IAnchorProps, ISizableTextProps } from '../../primitives';
+
+export interface IAnchorSizableTextProps extends ISizableTextProps {
+  anchorRegExp?: RegExp;
+  hrefRegExp?: RegExp;
+  anchorProps?: IAnchorProps;
+}
+
+export function AnchorSizableText({
+  anchorRegExp = /<url(?:\s+[^>]*?)?>(.*?)<\/url>/g,
+  hrefRegExp = /href="(.*?)"/,
+  children,
+  anchorProps,
+  ...props
+}: IAnchorSizableTextProps) {
+  const line = children as string;
+  const isAnchor = anchorRegExp.test(line);
+  if (isAnchor) {
+    const parts = line.split(anchorRegExp);
+    const hrefMatch = line.match(/href="(.*?)"/);
+    return (
+      <SizableText {...props}>
+        {parts.map((part, partIndex) => {
+          if (partIndex === 1) {
+            return (
+              <Anchor
+                {...props}
+                target="_blank"
+                color="$textInfo"
+                {...anchorProps}
+                key={partIndex}
+                href={hrefMatch?.[1]}
+              >
+                {part}
+              </Anchor>
+            );
+          }
+          return part;
+        })}
+      </SizableText>
+    );
+  }
+  return <SizableText {...props}>{line}</SizableText>;
+}

packages/components/src/content/index.ts

@@ -1,3 +1,4 @@
+export * from './AnchorSizableText';
 export * from './Badge';
 export * from './HeightTransition';
 export * from './LinearGradient';

packages/components/src/layouts/Navigation/Navigator/TabStackNavigator.tsx

@@ -34,13 +34,13 @@ function TabSubStackNavigator({
             component={component}
             options={({ navigation }: { navigation: any }) => ({
               freezeOnBlur: true,
-              headerShown,
               title: translationId
                 ? intl.formatMessage({
                     id: translationId,
                   })
                 : '',
               ...makeTabScreenOptions({ navigation, bgColor, titleColor }),
+              headerShown,
             })}
           />
         ))}

packages/kit/src/components/TradingView/index.tsx

@@ -19,59 +19,27 @@ interface IBaseTradingViewProps {
   identifier: string;
   baseToken: string;
   targetToken: string;
+  onLoadEnd: () => void;
 }
 
 export type ITradingViewProps = IBaseTradingViewProps & IStackStyle;
 
-function Loading() {
-  return (
-    <Stack flex={1} alignContent="center" justifyContent="center">
-      <Spinner size="large" />
-    </Stack>
-  );
-}
-
 export function TradingView(props: ITradingViewProps & WebViewProps) {
   const [restProps, style] = usePropsAndStyle(props);
   const { targetToken, identifier, baseToken, ...otherProps } =
     restProps as IBaseTradingViewProps;
-  const [showLoading, changeShowLoading] = useState(true);
   const tradingViewProps = useTradingViewProps({
     targetToken,
     identifier,
     baseToken,
   });
-  const onLoadEnd = useCallback(() => {
-    changeShowLoading(false);
-  }, []);
   return (
     <Stack bg="$bgApp" style={style as ViewStyle}>
       <WebView
         tradingViewProps={tradingViewProps}
         style={{ flex: 1 }}
-        onLoadEnd={onLoadEnd}
         {...otherProps}
       />
-      <AnimatePresence>
-        {showLoading ? (
-          <Stack
-            bg="$bgApp"
-            position="absolute"
-            top={0}
-            left={0}
-            right={0}
-            bottom={0}
-            opacity={1}
-            flex={1}
-            animation="quick"
-            exitStyle={{
-              opacity: 0,
-            }}
-          >
-            <Loading />
-          </Stack>
-        ) : null}
-      </AnimatePresence>
     </Stack>
   );
 }

packages/kit/src/routes/Tab/Discovery/router.ts

@@ -15,6 +15,7 @@ export const discoveryRouters: ITabSubNavigatorConfig<any, any>[] = [
   {
     name: ETabDiscoveryRoutes.TabDiscovery,
     rewrite: '/',
+    headerShown: !platformEnv.isNative,
     component:
       platformEnv.isNative && !platformEnv.isNativeIOSPad
         ? Browser

packages/kit/src/routes/Tab/Earn/router.ts

@@ -1,4 +1,5 @@
 import type { ITabSubNavigatorConfig } from '@onekeyhq/components';
+import platformEnv from '@onekeyhq/shared/src/platformEnv';
 import { ETabEarnRoutes } from '@onekeyhq/shared/src/routes';
 
 import { LazyLoadRootTabPage } from '../../../components/LazyLoadPage';
@@ -12,5 +13,6 @@ export const earnRouters: ITabSubNavigatorConfig<any, any>[] = [
     rewrite: '/',
     name: ETabEarnRoutes.EarnHome,
     component: EarnHome,
+    headerShown: !platformEnv.isNative,
   },
 ];

packages/kit/src/routes/Tab/Marktet/router.ts

@@ -1,4 +1,5 @@
 import type { ITabSubNavigatorConfig } from '@onekeyhq/components';
+import platformEnv from '@onekeyhq/shared/src/platformEnv';
 import { ETabMarketRoutes } from '@onekeyhq/shared/src/routes';
 
 import {
@@ -18,6 +19,7 @@ export const marketRouters: ITabSubNavigatorConfig<any, any>[] = [
   {
     rewrite: '/',
     name: ETabMarketRoutes.TabMarket,
+    headerShown: !platformEnv.isNative,
     component: MarketHome,
   },
   {

packages/kit/src/routes/Tab/Swap/router.ts

@@ -1,5 +1,5 @@
 import type { ITabSubNavigatorConfig } from '@onekeyhq/components';
-import { ETranslations } from '@onekeyhq/shared/src/locale';
+import platformEnv from '@onekeyhq/shared/src/platformEnv';
 import { ETabSwapRoutes } from '@onekeyhq/shared/src/routes';
 
 import { LazyLoadRootTabPage } from '../../../components/LazyLoadPage';
@@ -11,6 +11,7 @@ export const swapRouters: ITabSubNavigatorConfig<any, any>[] = [
     name: ETabSwapRoutes.TabSwap,
     component: Swap,
     rewrite: '/',
+    headerShown: !platformEnv.isNative,
     // translationId: ETranslations.global_swap,
   },
 ];

packages/kit/src/routes/Tab/router.ts

@@ -5,11 +5,9 @@ import type {
   ITabNavigatorConfig,
   ITabNavigatorExtraConfig,
 } from '@onekeyhq/components/src/layouts/Navigation/Navigator/types';
-import { useDevSettingsPersistAtom } from '@onekeyhq/kit-bg/src/states/jotai/atoms';
 import { ETranslations } from '@onekeyhq/shared/src/locale';
 import platformEnv from '@onekeyhq/shared/src/platformEnv';
 import { ETabRoutes } from '@onekeyhq/shared/src/routes';
-import { EShortcutEvents } from '@onekeyhq/shared/src/shortcuts/shortcuts.enum';
 
 import { developerRouters } from '../../views/Developer/router';
 import { homeRouters } from '../../views/Home/router';

packages/kit/src/views/Developer/pages/Gallery/Components/stories/Toast.tsx

@@ -37,6 +37,16 @@ const ToastGallery = () => (
             >
               All Types
             </Button>
+            <Button
+              onPress={() => {
+                Toast.success({
+                  title: 'url!',
+                  message: 'look, <url href="https://onekey.so">OneKey</url> here. aaa',
+                });
+              }}
+            >
+              Toast with url
+            </Button>
             <Button
               onPress={() => {
                 Toast.success({

packages/kit/src/views/Developer/pages/Gallery/Components/stories/TradingView.tsx

@@ -27,6 +27,7 @@ const TradingViewGallery = () => (
             identifier="binance"
             h={400}
             w="100%"
+            onLoadEnd={() => console.log('onLoadEnd')}
           />
         ),
       },

packages/kit/src/views/Home/router/index.ts

@@ -1,4 +1,5 @@
 import type { ITabSubNavigatorConfig } from '@onekeyhq/components';
+import platformEnv from '@onekeyhq/shared/src/platformEnv';
 import { ETabHomeRoutes } from '@onekeyhq/shared/src/routes';
 
 import { LazyLoadPage } from '../../../components/LazyLoadPage';
@@ -27,7 +28,7 @@ export const homeRouters: ITabSubNavigatorConfig<any, any>[] = [
     component: HomePageContainer,
     // translationId: 'wallet__wallet',
     rewrite: '/',
-    // exact: true,
+    headerShown: !platformEnv.isNative,
   },
   {
     // web refresh will match this route first, make sure it's different url from the home route