chore: improve discover layout (#2145)

Co-authored-by: loatheb <zhangzhao@onekey.so>

packages/kit/src/background/services/ServiceSetting.ts

@@ -5,7 +5,7 @@ import semver from 'semver';
 import simpleDb from '@onekeyhq/engine/src/dbs/simple/simpleDb';
 import { getFiatEndpoint } from '@onekeyhq/engine/src/endpoint';
 
-import { setEnableIOSDappSearch } from '../../store/reducers/discover';
+import { setShowFullLayout } from '../../store/reducers/discover';
 import {
   disableExtSwitchTips,
   toggleDisableExt,
@@ -44,7 +44,7 @@ export default class ServiceSetting extends ServiceBase {
     if (data.helloVersion && semver.valid(data.helloVersion)) {
       const version = appSelector((s) => s.settings.version);
       if (semver.lte(version, data.helloVersion)) {
-        dispatch(setEnableIOSDappSearch(true));
+        dispatch(setShowFullLayout(true));
       }
     }
   }

packages/kit/src/store/reducers/discover.ts

@@ -26,7 +26,8 @@ type InitialState = {
 
   history: Record<string, DiscoverHistory>;
   firstRemindDAPP: boolean;
-  enableIOSDappSearch?: boolean;
+  // enableIOSDappSearch?: boolean;
+  showFullLayout?: boolean;
 };
 
 const initialState: InitialState = {
@@ -234,9 +235,11 @@ export const discoverSlice = createSlice({
     // ) {
     //   state.tagDapps = action.payload;
     // },
-
-    setEnableIOSDappSearch(state, action: PayloadAction<boolean>) {
-      state.enableIOSDappSearch = action.payload;
+    // setEnableIOSDappSearch(state, action: PayloadAction<boolean>) {
+    //   state.enableIOSDappSearch = action.payload;
+    // },
+    setShowFullLayout(state, action: PayloadAction<boolean>) {
+      state.showFullLayout = action.payload;
     },
     cleanOldState(state) {
       state.dappItems = undefined;
@@ -273,7 +276,8 @@ export const {
   // setCategoryDapps,
   // setTagDapps,
   clearHistory,
-  setEnableIOSDappSearch,
+  // setEnableIOSDappSearch,
+  setShowFullLayout,
   cleanOldState,
   setHomeData,
 } = discoverSlice.actions;

packages/kit/src/views/Discover/Home/Desktop/Others.tsx

@@ -108,9 +108,11 @@ const ChainsSelector: FC<{ networkIds: string[] }> = ({ networkIds }) => {
   );
 };
 
-const DappsContainer = () => {
-  const { categoryId } = useContext(DiscoverContext);
-  const dapps = useCategoryDapps(categoryId);
+type DappsContainerProps = {
+  dapps: DAppItemType[];
+};
+
+const DappsContainer: FC<DappsContainerProps> = ({ dapps }) => {
   const { selectedNetworkId } = useContext(SelectedNetworkContext);
 
   const { onItemSelect } = useContext(DiscoverContext);
@@ -221,7 +223,7 @@ export function Container() {
         </Box>
         <Divider orientation="vertical" />
         <Box flex="1">
-          <DappsContainer />
+          <DappsContainer dapps={dapps} />
         </Box>
       </Box>
     </Box>

packages/kit/src/views/Discover/Home/Desktop/index.tsx

@@ -1,15 +1,15 @@
 import { FC, useContext } from 'react';
 
 import { Box } from '@onekeyhq/components';
-import platformEnv from '@onekeyhq/shared/src/platformEnv';
 
+import { useShowFullLayout } from '../../hooks';
 import { DiscoverContext } from '../context';
 
 import { Beta } from './Beta';
 import { Mine } from './Mine';
 import { Others } from './Others';
 
-export const DesktopDefault = () => {
+export const DesktopFull = () => {
   const { categoryId } = useContext(DiscoverContext);
   return (
     <Box flex="1" bg="background-default">
@@ -18,11 +18,13 @@ export const DesktopDefault = () => {
   );
 };
 
-export const DesktopMac = () => (
+export const DesktopMini = () => (
   <Box flex="1" bg="background-default">
     <Beta />
   </Box>
 );
 
-export const Desktop: FC = () =>
-  platformEnv.isMas ? <DesktopMac /> : <DesktopDefault />;
+export const Desktop: FC = () => {
+  const showFullLayout = useShowFullLayout();
+  return !showFullLayout ? <DesktopMini /> : <DesktopFull />;
+};

packages/kit/src/views/Discover/Home/Mobile/Others.tsx

@@ -136,12 +136,12 @@ const DappsContainerItem: FC<{ item: DAppItemType }> = ({ item }) => {
   );
 };
 
-const DappsContainer = () => {
-  const { categoryId } = useContext(DiscoverContext);
-  const fullDapps = useCategoryDapps(categoryId);
-  const [dapps, setDapps] = useState<DAppItemType[]>([]);
-  const { selectedNetworkId } = useContext(SelectedNetworkContext);
+type DappsContainerProps = {
+  dapps: DAppItemType[];
+};
 
+const DappsContainer: FC<DappsContainerProps> = ({ dapps }) => {
+  const { selectedNetworkId } = useContext(SelectedNetworkContext);
   const data = useMemo(() => {
     if (!selectedNetworkId) {
       return dapps;
@@ -154,10 +154,6 @@ const DappsContainer = () => {
     [],
   );
 
-  useEffect(() => {
-    setDapps(fullDapps);
-  }, [fullDapps]);
-
   return (
     <FlatList
       data={data}
@@ -194,7 +190,7 @@ export function Container() {
         </Box>
         <Divider orientation="vertical" />
         <Box flex="1">
-          <DappsContainer />
+          <DappsContainer dapps={dapps} />
         </Box>
       </Box>
     </Box>

packages/kit/src/views/Discover/Home/Mobile/index.ios.tsx

@@ -1,3 +1,24 @@
+import { useContext } from 'react';
+
+import { Box } from '@onekeyhq/components';
+
+import { useShowFullLayout } from '../../hooks';
+import { DiscoverContext } from '../context';
+
 import { Beta } from './Beta';
+import { Mine } from './Mine';
+import { Others } from './Others';
+
+export const MobileFull = () => {
+  const { categoryId } = useContext(DiscoverContext);
+  return (
+    <Box flex="1" bg="background-default">
+      {categoryId ? <Others /> : <Mine />}
+    </Box>
+  );
+};
 
-export const Mobile = Beta;
+export const Mobile = () => {
+  const showFullLayout = useShowFullLayout();
+  return !showFullLayout ? <Beta /> : <MobileFull />;
+};

packages/kit/src/views/Discover/hooks/index.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useMemo, useState } from 'react';
 
 import { useAppSelector } from '@onekeyhq/kit/src/hooks';
+import platformEnv from '@onekeyhq/shared/src/platformEnv';
 
 import backgroundApiProxy from '../../../background/instance/backgroundApiProxy';
 import { MatchDAppItemType } from '../Explorer/explorerUtils';
@@ -211,3 +212,14 @@ export function useCategories() {
     return home.categories;
   }, [home]);
 }
+
+export function useShowFullLayout() {
+  const isApple = platformEnv.isNativeIOS || platformEnv.isMas;
+  const showFullLayout = useAppSelector((s) => s.discover.showFullLayout);
+  return useMemo(() => {
+    if (!isApple) {
+      return true;
+    }
+    return showFullLayout;
+  }, [showFullLayout, isApple]);
+}

packages/kit/src/views/Discover/hooks/useSearchLocalDapp.ts

@@ -1,11 +1,10 @@
 import { useEffect, useMemo, useState } from 'react';
 
-import Fuse from 'fuse.js';
+import { useShowFullLayout } from '.';
 
-import platformEnv from '@onekeyhq/shared/src/platformEnv';
+import Fuse from 'fuse.js';
 
 import backgroundApiProxy from '../../../background/instance/backgroundApiProxy';
-import { useAppSelector } from '../../../hooks';
 import { MatchDAppItemType } from '../Explorer/explorerUtils';
 import { DAppItemType } from '../type';
 
@@ -42,10 +41,7 @@ export const useSearchLocalDapp = (
 ): { loading: boolean; searchedDapps: MatchDAppItemType[] } => {
   const [loading, setLoading] = useState(false);
   const [allDapps, setAllDapps] = useState<DAppItemType[]>([]);
-
-  const enableIOSDappSearch = useAppSelector(
-    (s) => s.discover.enableIOSDappSearch,
-  );
+  const showFullLayout = useShowFullLayout();
 
   useEffect(() => {
     async function main() {
@@ -69,17 +65,14 @@ export const useSearchLocalDapp = (
     setLoading(true);
     try {
       let items = allDapps;
-      if (
-        (platformEnv.isNativeIOS || platformEnv.isMas) &&
-        !enableIOSDappSearch
-      ) {
+      if (!showFullLayout) {
         items = [];
       }
       return searchDapps(items, terms);
     } finally {
       setLoading(false);
     }
-  }, [allDapps, terms, enableIOSDappSearch]);
+  }, [allDapps, terms, showFullLayout]);
 
   return {
     loading,