From 2bcd0674c4bc2db53dd1361d9758e4580f89aef1 Mon Sep 17 00:00:00 2001
From: Franco <franco@onekey.so>
Date: Thu, 21 Nov 2024 17:12:39 +0800
Subject: [PATCH] swap & browser & addressbook ui (#6252)

---
 .../AddressBookSectionList/index.tsx          |  33 +--
 .../pages/BookmarkListModal/index.tsx         | 204 ++++++++++--------
 .../Notifications/ManageAccountActivity.tsx   |   4 +-
 .../Notifications/NotificationsSettings.tsx   |   2 +
 .../components/SwapRecentTokenPairsGroup.tsx  |  79 ++++---
 .../Swap/pages/components/SwapMainLand.tsx    |   2 +-
 6 files changed, 186 insertions(+), 138 deletions(-)

diff --git a/packages/kit/src/views/AddressBook/components/AddressBookSectionList/index.tsx b/packages/kit/src/views/AddressBook/components/AddressBookSectionList/index.tsx
index ce369a56991..86e67469bb3 100644
--- a/packages/kit/src/views/AddressBook/components/AddressBookSectionList/index.tsx
+++ b/packages/kit/src/views/AddressBook/components/AddressBookSectionList/index.tsx
@@ -1,6 +1,10 @@
 import type { FC } from 'react';
 
-import { NativeSectionList } from '@onekeyhq/components';
+import {
+  NativeSectionList,
+  YStack,
+  useSafeAreaInsets,
+} from '@onekeyhq/components';
 
 import type { IAddressBookSectionListProps } from './type';
 
@@ -11,14 +15,19 @@ export const AddressBookSectionList: FC<IAddressBookSectionListProps> = ({
   ListEmptyComponent,
   keyExtractor,
   showsVerticalScrollIndicator,
-}) => (
-  <NativeSectionList
-    showsVerticalScrollIndicator={showsVerticalScrollIndicator}
-    sections={sections}
-    renderItem={renderItem}
-    renderSectionHeader={renderSectionHeader}
-    ListEmptyComponent={ListEmptyComponent}
-    keyExtractor={keyExtractor as any}
-    windowSize={40}
-  />
-);
+}) => {
+  const { bottom } = useSafeAreaInsets();
+
+  return (
+    <NativeSectionList
+      showsVerticalScrollIndicator={showsVerticalScrollIndicator}
+      sections={sections}
+      renderItem={renderItem}
+      renderSectionHeader={renderSectionHeader}
+      ListEmptyComponent={ListEmptyComponent}
+      keyExtractor={keyExtractor as any}
+      windowSize={40}
+      ListFooterComponent={<YStack h={bottom || '$3'} />}
+    />
+  );
+};
diff --git a/packages/kit/src/views/Discovery/pages/BookmarkListModal/index.tsx b/packages/kit/src/views/Discovery/pages/BookmarkListModal/index.tsx
index a543e1378c9..cb1d66de875 100644
--- a/packages/kit/src/views/Discovery/pages/BookmarkListModal/index.tsx
+++ b/packages/kit/src/views/Discovery/pages/BookmarkListModal/index.tsx
@@ -5,6 +5,7 @@ import { useIntl } from 'react-intl';
 import {
   Button,
   Dialog,
+  Empty,
   Input,
   Page,
   SortableListView,
@@ -152,6 +153,116 @@ function BookmarkListModal() {
     [isEditing, intl],
   );
   const { gtMd } = useMedia();
+
+  const renderContent = () => {
+    if (!dataSource.length) {
+      return (
+        <Empty
+          flex={1}
+          pb="$16"
+          icon="BookmarkOutline"
+          title={intl.formatMessage({
+            // eslint-disable-next-line spellcheck/spell-checker
+            id: ETranslations.explore_no_boomark,
+          })}
+        />
+      );
+    }
+
+    return (
+      <SortableListView
+        data={dataSource}
+        enabled={isEditing}
+        keyExtractor={(item) => `${item.url}`}
+        getItemLayout={(_, index) => ({
+          length: CELL_HEIGHT,
+          offset: index * CELL_HEIGHT,
+          index,
+        })}
+        onDragEnd={(ret) => onSortBookmarks(ret.data)}
+        renderItem={({ item, getIndex, drag, dragProps }) => (
+          <ListItem
+            h={CELL_HEIGHT}
+            testID={`search-modal-${item.url.toLowerCase()}`}
+            {...(!isEditing && {
+              onPress: () => {
+                handleOpenWebSite({
+                  navigation,
+                  switchToMultiTabBrowser: gtMd,
+                  webSite: {
+                    url: item.url,
+                    title: item.title,
+                  },
+                });
+                defaultLogger.discovery.dapp.enterDapp({
+                  dappDomain: item.url,
+                  dappName: item.title,
+                  enterMethod: EEnterMethod.bookmark,
+                });
+              },
+            })}
+          >
+            {isEditing ? (
+              <ListItem.IconButton
+                title={intl.formatMessage({
+                  id: ETranslations.global_remove,
+                })}
+                key="remove"
+                icon="MinusCircleSolid"
+                iconProps={{
+                  color: '$iconCritical',
+                }}
+                onPress={() => {
+                  void deleteCell(getIndex);
+                  Toast.success({
+                    title: intl.formatMessage({
+                      id: ETranslations.explore_removed_success,
+                    }),
+                  });
+                }}
+                testID="action-list-item-rename"
+              />
+            ) : null}
+            <ListItem.Avatar
+              avatar={<DiscoveryIcon size="$10" uri={item.logo} />}
+            />
+            <ListItem.Text
+              primary={item.title}
+              primaryTextProps={{
+                numberOfLines: 1,
+              }}
+              secondary={item.url}
+              secondaryTextProps={{
+                numberOfLines: 1,
+              }}
+              flex={1}
+            />
+            {isEditing ? (
+              <XStack gap="$6">
+                <ListItem.IconButton
+                  title={intl.formatMessage({
+                    id: ETranslations.explore_rename,
+                  })}
+                  key="rename"
+                  icon="PencilOutline"
+                  onPress={() => onRename(item)}
+                  testID="action-list-item-rename"
+                />
+                <ListItem.IconButton
+                  key="darg"
+                  cursor="move"
+                  icon="DragOutline"
+                  onPressIn={drag}
+                  dataSet={dragProps}
+                />
+              </XStack>
+            ) : null}
+          </ListItem>
+        )}
+      />
+    );
+  };
+
   return (
     <Page>
       <Page.Header
@@ -160,98 +271,7 @@ function BookmarkListModal() {
         })}
         headerRight={headerRight}
       />
-      <Page.Body>
-        <SortableListView
-          data={dataSource}
-          enabled={isEditing}
-          keyExtractor={(item) => `${item.url}`}
-          getItemLayout={(_, index) => ({
-            length: CELL_HEIGHT,
-            offset: index * CELL_HEIGHT,
-            index,
-          })}
-          onDragEnd={(ret) => onSortBookmarks(ret.data)}
-          renderItem={({ item, getIndex, drag, dragProps }) => (
-            <ListItem
-              h={CELL_HEIGHT}
-              testID={`search-modal-${item.url.toLowerCase()}`}
-              {...(!isEditing && {
-                onPress: () => {
-                  handleOpenWebSite({
-                    navigation,
-                    switchToMultiTabBrowser: gtMd,
-                    webSite: {
-                      url: item.url,
-                      title: item.title,
-                    },
-                  });
-                  defaultLogger.discovery.dapp.enterDapp({
-                    dappDomain: item.url,
-                    dappName: item.title,
-                    enterMethod: EEnterMethod.bookmark,
-                  });
-                },
-              })}
-            >
-              {isEditing ? (
-                <ListItem.IconButton
-                  title={intl.formatMessage({
-                    id: ETranslations.global_remove,
-                  })}
-                  key="remove"
-                  icon="MinusCircleSolid"
-                  iconProps={{
-                    color: '$iconCritical',
-                  }}
-                  onPress={() => {
-                    void deleteCell(getIndex);
-                    Toast.success({
-                      title: intl.formatMessage({
-                        id: ETranslations.explore_removed_success,
-                      }),
-                    });
-                  }}
-                  testID="action-list-item-rename"
-                />
-              ) : null}
-              <ListItem.Avatar
-                avatar={<DiscoveryIcon size="$10" uri={item.logo} />}
-              />
-              <ListItem.Text
-                primary={item.title}
-                primaryTextProps={{
-                  numberOfLines: 1,
-                }}
-                secondary={item.url}
-                secondaryTextProps={{
-                  numberOfLines: 1,
-                }}
-                flex={1}
-              />
-              {isEditing ? (
-                <XStack gap="$6">
-                  <ListItem.IconButton
-                    title={intl.formatMessage({
-                      id: ETranslations.explore_rename,
-                    })}
-                    key="rename"
-                    icon="PencilOutline"
-                    onPress={() => onRename(item)}
-                    testID="action-list-item-rename"
-                  />
-                  <ListItem.IconButton
-                    key="darg"
-                    cursor="move"
-                    icon="DragOutline"
-                    onPressIn={drag}
-                    dataSet={dragProps}
-                  />
-                </XStack>
-              ) : null}
-            </ListItem>
-          )}
-        />
-      </Page.Body>
+      <Page.Body>{renderContent()}</Page.Body>
     </Page>
   );
 }
diff --git a/packages/kit/src/views/Setting/pages/Notifications/ManageAccountActivity.tsx b/packages/kit/src/views/Setting/pages/Notifications/ManageAccountActivity.tsx
index 81cbb18fa9e..b6861e8c55d 100644
--- a/packages/kit/src/views/Setting/pages/Notifications/ManageAccountActivity.tsx
+++ b/packages/kit/src/views/Setting/pages/Notifications/ManageAccountActivity.tsx
@@ -264,6 +264,7 @@ function AccountAccordionItem({
         {account.name}
       </SizableText>
       <Switch
+        size="small"
         value={isAccountEnabled}
         onChange={(value) => toggleAccountSwitch(value, account)}
       />
@@ -452,6 +453,7 @@ function WalletAccordionItem({
               </XStack>
             </XStack>
             <Switch
+              size="small"
               value={isWalletEnabled}
               onChange={toggleWalletSwitch}
               onPress={stopPropagation}
@@ -608,7 +610,7 @@ function LoadingView({ show }: { show: boolean }) {
             <Skeleton w="$10" h="$10" radius={8} />
             <Skeleton.BodyLg />
           </XStack>
-          <Switch disabled />
+          <Switch size="small" disabled />
         </XStack>
       ))}
     </Skeleton.Group>
diff --git a/packages/kit/src/views/Setting/pages/Notifications/NotificationsSettings.tsx b/packages/kit/src/views/Setting/pages/Notifications/NotificationsSettings.tsx
index 79bbf5adeea..f1e8bf7cca0 100644
--- a/packages/kit/src/views/Setting/pages/Notifications/NotificationsSettings.tsx
+++ b/packages/kit/src/views/Setting/pages/Notifications/NotificationsSettings.tsx
@@ -132,6 +132,7 @@ export default function NotificationsSettings() {
                 }}
               />
               <Switch
+                size="small"
                 value={!!settings?.pushEnabled}
                 onChange={(checked) => {
                   void updateSettings({
@@ -158,6 +159,7 @@ export default function NotificationsSettings() {
                     }}
                   />
                   <Switch
+                    size="small"
                     value={!!settings?.accountActivityPushEnabled}
                     onChange={(checked) => {
                       void updateSettings({
diff --git a/packages/kit/src/views/Swap/components/SwapRecentTokenPairsGroup.tsx b/packages/kit/src/views/Swap/components/SwapRecentTokenPairsGroup.tsx
index 3bf0ed06839..c820fdaf056 100644
--- a/packages/kit/src/views/Swap/components/SwapRecentTokenPairsGroup.tsx
+++ b/packages/kit/src/views/Swap/components/SwapRecentTokenPairsGroup.tsx
@@ -4,7 +4,7 @@ import BigNumber from 'bignumber.js';
 import { useIntl } from 'react-intl';
 import { StyleSheet } from 'react-native';
 
-import { Icon, SizableText, Stack, XStack, YStack } from '@onekeyhq/components';
+import { Icon, SizableText, XStack, YStack } from '@onekeyhq/components';
 import { ETranslations } from '@onekeyhq/shared/src/locale';
 import {
   ESwapTabSwitchType,
@@ -64,7 +64,8 @@ const SwapRecentTokenPairsGroup = ({
               role="button"
               userSelect="none"
               alignItems="center"
-              px="$2"
+              pl="$1"
+              pr="$2.5"
               py="$1"
               bg="$bg"
               borderRadius="$4"
@@ -87,19 +88,33 @@ const SwapRecentTokenPairsGroup = ({
                 onSelectTokenPairs(tokenPair);
               }}
             >
-              <Token
-                w="$4.5"
-                h="$4.5"
-                size="sm"
-                tokenImageUri={tokenPair.fromToken.logoURI}
-              />
-              <Token
-                ml="$-1.5"
-                w="$4.5"
-                h="$4.5"
-                size="sm"
-                tokenImageUri={tokenPair.toToken.logoURI}
-              />
+              <YStack
+                borderWidth={2}
+                borderRadius="$full"
+                borderColor="$bg"
+                my="$-0.5"
+              >
+                <Token
+                  w="$4.5"
+                  h="$4.5"
+                  size="sm"
+                  tokenImageUri={tokenPair.fromToken.logoURI}
+                />
+              </YStack>
+              <YStack
+                borderWidth={2}
+                borderRadius="$full"
+                borderColor="$bg"
+                ml="$-2"
+                my="$-0.5"
+              >
+                <Token
+                  w="$4.5"
+                  h="$4.5"
+                  size="sm"
+                  tokenImageUri={tokenPair.toToken.logoURI}
+                />
+              </YStack>
               <SizableText
                 ml="$1"
                 size="$bodyMdMedium"
@@ -107,15 +122,17 @@ const SwapRecentTokenPairsGroup = ({
             </XStack>
           ))}
           {tokenPairsInCurrentType.length >= needFoldingMinCount ? (
-            <Stack
+            <XStack
               key="more-token-pairs"
               role="button"
               userSelect="none"
               alignItems="center"
-              px="$1.5"
+              pl="$1.5"
+              pr="$2.5"
               py="$1"
               bg="$bg"
-              borderRadius="$4"
+              gap="$1"
+              borderRadius="$full"
               borderWidth={StyleSheet.hairlineWidth}
               borderColor="$borderSubdued"
               hoverStyle={{
@@ -135,24 +152,22 @@ const SwapRecentTokenPairsGroup = ({
                 setOpenMore(!openMore);
               }}
             >
-              <Stack
-                animation="quick"
-                justifyContent="center"
-                alignItems="center"
-                rotate={openMore ? '180deg' : '0deg'}
-              >
-                <Icon
-                  name="ChevronDownSmallOutline"
-                  color={openMore ? '$iconActive' : '$iconSubdued'}
-                  size="$5"
-                />
-              </Stack>
-            </Stack>
+              <Icon
+                size="$4.5"
+                name={openMore ? 'MinusSmallOutline' : 'PlusSmallOutline'}
+                color="$iconSubdued"
+              />
+              <SizableText size="$bodyMdMedium">
+                {openMore
+                  ? intl.formatMessage({ id: ETranslations.global_show_less })
+                  : intl.formatMessage({ id: ETranslations.global_show_more })}
+              </SizableText>
+            </XStack>
           ) : null}
         </>
       </XStack>
     );
-  }, [onSelectTokenPairs, openMore, tokenPairsInCurrentType]);
+  }, [intl, onSelectTokenPairs, openMore, tokenPairsInCurrentType]);
   if (
     (!fromTokenAmountBN.isZero() && !fromTokenAmountBN.isNaN()) ||
     !tokenPairsInCurrentType?.length
diff --git a/packages/kit/src/views/Swap/pages/components/SwapMainLand.tsx b/packages/kit/src/views/Swap/pages/components/SwapMainLand.tsx
index 5537df98640..b891178853e 100644
--- a/packages/kit/src/views/Swap/pages/components/SwapMainLand.tsx
+++ b/packages/kit/src/views/Swap/pages/components/SwapMainLand.tsx
@@ -140,7 +140,7 @@ const SwapMainLoad = ({ swapInitParams, pageType }: ISwapMainLoadProps) => {
         flex={1}
         marginHorizontal="auto"
         width="100%"
-        maxWidth={pageType === EPageType.modal ? '100%' : 480}
+        maxWidth={pageType === EPageType.modal ? '100%' : 500}
       >
         <YStack
           pt="$2.5"