swap & browser & addressbook ui (#6252)

OneKeyHQ · Nov 21, 2024 · 2bcd067 · 2bcd067
1 parent 363e48e
commit 2bcd067
Show file tree

Hide file tree

Showing 6 changed files with 186 additions and 138 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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({