From 335f6ce43878ed3594646696423117fbea1ae1df Mon Sep 17 00:00:00 2001
From: Max Voloshinskii <me@voloshinskii.ru>
Date: Fri, 12 Apr 2024 18:26:07 +0300
Subject: [PATCH] fix(mobile): Design review fixes

---
 .../src/core/Colectibles/Collectibles.tsx     |  3 +-
 .../src/core/Colectibles/NFTCardItem.tsx      |  1 -
 .../src/core/HideableAmount/ShowBalance.tsx   |  2 +-
 .../mobile/src/core/InscriptionScreen.tsx     | 44 +++++++-------
 packages/mobile/src/core/Jetton/Jetton.tsx    |  2 +-
 .../src/core/Notifications/Notification.tsx   |  5 +-
 .../Notifications/NotificationsActivity.tsx   | 11 ++--
 .../mobile/src/core/Settings/Settings.tsx     |  2 +-
 .../src/tabs/Activity/ActivityScreen.tsx      | 59 +++++++++++--------
 .../mobile/src/tabs/Wallet/WalletScreen.tsx   |  2 +-
 .../Wallet/components/WalletContentList.tsx   | 14 +++--
 .../RechargeByPromoModal.tsx                  |  1 -
 packages/shared/modals/SwitchWalletModal.tsx  |  4 +-
 .../src/containers/Screen/ScreenFlashList.tsx | 17 +++---
 14 files changed, 88 insertions(+), 79 deletions(-)

diff --git a/packages/mobile/src/core/Colectibles/Collectibles.tsx b/packages/mobile/src/core/Colectibles/Collectibles.tsx
index cb6e4329c..7534a03a2 100644
--- a/packages/mobile/src/core/Colectibles/Collectibles.tsx
+++ b/packages/mobile/src/core/Colectibles/Collectibles.tsx
@@ -20,7 +20,7 @@ export const Collectibles = memo(() => {
   const dimensions = useWindowDimensions();
 
   const size = useMemo(() => {
-    const width = (dimensions.width - 32) / numColumn - 4;
+    const width = (dimensions.width - 48) / numColumn;
     const height = width * heightRatio;
 
     return { width, height };
@@ -47,6 +47,7 @@ export const Collectibles = memo(() => {
 const styles = Steezy.create({
   collectiblesContainer: {
     marginHorizontal: 16,
+    gap: 8,
   },
   nftElements: {
     flexDirection: 'row',
diff --git a/packages/mobile/src/core/Colectibles/NFTCardItem.tsx b/packages/mobile/src/core/Colectibles/NFTCardItem.tsx
index 328b60adb..adade1249 100644
--- a/packages/mobile/src/core/Colectibles/NFTCardItem.tsx
+++ b/packages/mobile/src/core/Colectibles/NFTCardItem.tsx
@@ -100,7 +100,6 @@ const styles = Steezy.create(({ colors, corners }) => ({
   container: {
     position: 'relative',
     flex: 1,
-    marginBottom: 8,
     backgroundColor: colors.backgroundContent,
     borderRadius: corners.medium,
     overflow: 'hidden',
diff --git a/packages/mobile/src/core/HideableAmount/ShowBalance.tsx b/packages/mobile/src/core/HideableAmount/ShowBalance.tsx
index abea7aa99..b6890c3c1 100644
--- a/packages/mobile/src/core/HideableAmount/ShowBalance.tsx
+++ b/packages/mobile/src/core/HideableAmount/ShowBalance.tsx
@@ -57,6 +57,6 @@ const styles = Steezy.create(({ colors }) => ({
     borderRadius: 100,
   },
   stars: {
-    paddingTop: 5.5,
+    paddingTop: 8,
   },
 }));
diff --git a/packages/mobile/src/core/InscriptionScreen.tsx b/packages/mobile/src/core/InscriptionScreen.tsx
index ab0a3ec8e..5ffe31f52 100644
--- a/packages/mobile/src/core/InscriptionScreen.tsx
+++ b/packages/mobile/src/core/InscriptionScreen.tsx
@@ -1,6 +1,7 @@
 import { useTonInscription } from '@tonkeeper/shared/query/hooks/useTonInscription';
 import { useParams } from '@tonkeeper/router/src/imperative';
 import {
+  ActionButtons,
   DEFAULT_TOKEN_LOGO,
   IconButton,
   IconButtonList,
@@ -62,21 +63,24 @@ export const InscriptionScreen = memo(() => {
           </View>
           <Picture uri={DEFAULT_TOKEN_LOGO} style={styles.tokenPicture} />
         </View>
-        <View style={styles.buttons}>
-          <IconButtonList>
-            {!wallet.isWatchOnly ? (
-              <IconButton
-                onPress={handleSend}
-                iconName="ic-arrow-up-28"
-                title={t('wallet.send_btn')}
-              />
-            ) : null}
-            <IconButton
-              onPress={handleReceive}
-              iconName="ic-arrow-down-28"
-              title={t('wallet.receive_btn')}
-            />
-          </IconButtonList>
+        <View>
+          <ActionButtons
+            buttons={[
+              {
+                id: 'send',
+                icon: 'ic-arrow-up-outline-28',
+                title: t('wallet.send_btn'),
+                onPress: handleSend,
+                disabled: wallet.isWatchOnly,
+              },
+              {
+                id: 'receive',
+                icon: 'ic-arrow-down-outline-28',
+                title: t('wallet.receive_btn'),
+                onPress: handleReceive,
+              },
+            ]}
+          />
         </View>
       </Screen.ScrollView>
     </Screen>
@@ -86,7 +90,7 @@ export const InscriptionScreen = memo(() => {
 const styles = Steezy.create(({ colors }) => ({
   tokenContainer: {
     paddingTop: 16,
-    paddingBottom: 28,
+    paddingBottom: 24,
     flexDirection: 'row',
     justifyContent: 'space-between',
     marginHorizontal: 28,
@@ -96,14 +100,6 @@ const styles = Steezy.create(({ colors }) => ({
     height: 64,
     borderRadius: 64 / 2,
   },
-  buttons: {
-    borderTopWidth: 1,
-    borderBottomWidth: 1,
-    borderTopColor: colors.backgroundContent,
-    borderBottomColor: colors.backgroundContent,
-    paddingTop: 16,
-    paddingBottom: 12,
-  },
   tokenText: {
     paddingTop: 2,
   },
diff --git a/packages/mobile/src/core/Jetton/Jetton.tsx b/packages/mobile/src/core/Jetton/Jetton.tsx
index 32724c355..fbbc998e5 100644
--- a/packages/mobile/src/core/Jetton/Jetton.tsx
+++ b/packages/mobile/src/core/Jetton/Jetton.tsx
@@ -218,7 +218,7 @@ export const Jetton: React.FC<JettonProps> = ({ route }) => {
             </TouchableOpacity>
           )
         }
-        title={jetton.metadata?.name || Address.toShort(jetton.jettonAddress)}
+        title={jetton.metadata?.symbol || Address.toShort(jetton.jettonAddress)}
         rightContent={
           <PopupMenu
             items={[
diff --git a/packages/mobile/src/core/Notifications/Notification.tsx b/packages/mobile/src/core/Notifications/Notification.tsx
index 15afa856b..033f94db8 100644
--- a/packages/mobile/src/core/Notifications/Notification.tsx
+++ b/packages/mobile/src/core/Notifications/Notification.tsx
@@ -192,7 +192,7 @@ export const Notification: React.FC<NotificationProps> = (props) => {
   }, [props.closeOtherSwipeable]);
 
   return (
-    <View style={styles.containerStyle}>
+    <View>
       <Swipeable
         waitFor={listItemRef}
         overshootFriction={6}
@@ -225,9 +225,6 @@ const styles = Steezy.create(({ colors }) => ({
   listStyle: {
     marginBottom: 0,
   },
-  containerStyle: {
-    marginBottom: 8,
-  },
   leftContentStyle: {
     alignItems: 'flex-start',
     alignSelf: 'flex-start',
diff --git a/packages/mobile/src/core/Notifications/NotificationsActivity.tsx b/packages/mobile/src/core/Notifications/NotificationsActivity.tsx
index e02966c5a..0d79fb960 100644
--- a/packages/mobile/src/core/Notifications/NotificationsActivity.tsx
+++ b/packages/mobile/src/core/Notifications/NotificationsActivity.tsx
@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useMemo, useRef } from 'react';
-import { Button, Icon, Screen, Spacer, Text, View } from '$uikit';
+import { Button, Icon, Spacer, Text, View } from '$uikit';
 import { Notification } from '$core/Notifications/Notification';
 import { Steezy } from '$styles';
 import { openNotifications } from '$navigation';
@@ -8,8 +8,7 @@ import { INotification, useDAppsNotifications } from '$store';
 import { FlashList } from '@shopify/flash-list';
 import { LayoutAnimation } from 'react-native';
 import { useBottomTabBarHeight } from '@react-navigation/bottom-tabs';
-import { safeAreaInsets } from '$utils';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { Screen } from '@tonkeeper/uikit';
 
 export enum ActivityListItem {
   Notification = 'Notification',
@@ -53,7 +52,6 @@ export const NotificationsActivity: React.FC = () => {
   const list = useRef<FlashList<Element | null> | null>(null);
   const closeOtherSwipeable = useRef<null | (() => void)>(null);
   const lastSwipeableId = useRef<null | number>(null);
-  const tabBarHeight = useBottomTabBarHeight();
 
   const handleOpenNotificationSettings = useCallback(() => {
     openNotifications();
@@ -139,10 +137,10 @@ export const NotificationsActivity: React.FC = () => {
       ) : (
         <Screen.FlashList
           ref={list}
+          contentContainerStyle={styles.gap8.static}
           estimatedItemSize={87}
           keyExtractor={(item) => item.id}
           renderItem={renderNotificationsItem}
-          contentContainerStyle={{ paddingBottom: tabBarHeight + 8 }}
           data={flashListData}
           ListEmptyComponent={ListEmpty}
         />
@@ -156,6 +154,9 @@ const styles = Steezy.create({
     marginVertical: 14,
     marginHorizontal: 16,
   },
+  gap8: {
+    gap: 8,
+  },
   emptyContainer: {
     paddingHorizontal: 32,
     flex: 1,
diff --git a/packages/mobile/src/core/Settings/Settings.tsx b/packages/mobile/src/core/Settings/Settings.tsx
index 33ba67538..fc497bed9 100644
--- a/packages/mobile/src/core/Settings/Settings.tsx
+++ b/packages/mobile/src/core/Settings/Settings.tsx
@@ -270,7 +270,7 @@ export const Settings: FC = () => {
         <Screen.ScrollView
           showsVerticalScrollIndicator={false}
           contentContainerStyle={{
-            paddingBottom,
+            paddingBottom: paddingBottom + 16,
             paddingTop: 16,
           }}
           scrollEventThrottle={16}
diff --git a/packages/mobile/src/tabs/Activity/ActivityScreen.tsx b/packages/mobile/src/tabs/Activity/ActivityScreen.tsx
index bbdf97dcb..4acd7c2fe 100644
--- a/packages/mobile/src/tabs/Activity/ActivityScreen.tsx
+++ b/packages/mobile/src/tabs/Activity/ActivityScreen.tsx
@@ -111,33 +111,37 @@ export const ActivityScreen = memo(() => {
   const renderNotificationsHeader = notifications.length ? (
     <View>
       <Spacer y={12} />
-      {notifications.slice(0, Math.min(newNotificationsCount, 2)).map((notification) => (
-        <Notification
-          onRemove={onRemoveNotification}
-          notification={notification}
-          key={notification.received_at}
-        />
-      ))}
-      <List style={styles.listStyle.static}>
-        <List.Item
-          leftContent={
-            <View style={styles.iconContainer}>
-              <Icon name={'ic-bell-28'} color={'iconSecondary'} />
-            </View>
-          }
-          rightContent={
-            newNotificationsCount - 2 > 0 ? (
-              <View style={styles.notificationsCount}>
-                <Text type="label2">{newNotificationsCount - 2}</Text>
+      <View style={styles.gap8}>
+        {notifications
+          .slice(0, Math.min(newNotificationsCount, 2))
+          .map((notification) => (
+            <Notification
+              onRemove={onRemoveNotification}
+              notification={notification}
+              key={notification.received_at}
+            />
+          ))}
+        <List style={styles.listStyle.static}>
+          <List.Item
+            leftContent={
+              <View style={styles.iconContainer}>
+                <Icon name={'ic-bell-28'} color={'iconSecondary'} />
               </View>
-            ) : null
-          }
-          onPress={handleOpenNotificationsScreen}
-          title={t('notifications.notifications')}
-          subtitle={t('notifications.from_connected')}
-          chevron
-        />
-      </List>
+            }
+            rightContent={
+              newNotificationsCount - 2 > 0 ? (
+                <View style={styles.notificationsCount}>
+                  <Text type="label2">{newNotificationsCount - 2}</Text>
+                </View>
+              ) : null
+            }
+            onPress={handleOpenNotificationsScreen}
+            title={t('notifications.notifications')}
+            subtitle={t('notifications.from_connected')}
+            chevron
+          />
+        </List>
+      </View>
     </View>
   ) : undefined;
 
@@ -196,4 +200,7 @@ const styles = Steezy.create(({ colors }) => ({
   listStyle: {
     marginBottom: 8,
   },
+  gap8: {
+    gap: 8,
+  },
 }));
diff --git a/packages/mobile/src/tabs/Wallet/WalletScreen.tsx b/packages/mobile/src/tabs/Wallet/WalletScreen.tsx
index 8afaf0968..ec8a7514a 100644
--- a/packages/mobile/src/tabs/Wallet/WalletScreen.tsx
+++ b/packages/mobile/src/tabs/Wallet/WalletScreen.tsx
@@ -99,7 +99,7 @@ export const WalletScreen = memo(({ navigation }) => {
           <View style={styles.balanceWithBattery}>
             <ShowBalance amount={balance} />
             <Spacer x={8} />
-            <BatteryIcon />
+            {!isWatchOnly && <BatteryIcon />}
           </View>
           <View style={styles.addressContainer}>
             {wallet && isConnected !== false ? (
diff --git a/packages/mobile/src/tabs/Wallet/components/WalletContentList.tsx b/packages/mobile/src/tabs/Wallet/components/WalletContentList.tsx
index 793cbc1e6..c9d779857 100644
--- a/packages/mobile/src/tabs/Wallet/components/WalletContentList.tsx
+++ b/packages/mobile/src/tabs/Wallet/components/WalletContentList.tsx
@@ -106,16 +106,20 @@ interface WalletContentListProps {
   ListFooterComponent?: React.ReactElement | null;
 }
 
+function ItemSeparatorComponent() {
+  return (
+    <View style={styles.separatorContainer}>
+      <ListSeparator />
+    </View>
+  );
+}
+
 export const WalletContentList = memo<WalletContentListProps>((props) => {
   const theme = useTheme();
 
   return (
     <Screen.FlashList
-      ItemSeparatorComponent={() => (
-        <View style={styles.separatorContainer}>
-          <ListSeparator />
-        </View>
-      )}
+      ItemSeparatorComponent={ItemSeparatorComponent}
       ListHeaderComponent={props.ListHeaderComponent}
       ListFooterComponent={props.ListFooterComponent}
       renderItem={RenderItem}
diff --git a/packages/shared/modals/ActivityActionModal/RechargeByPromoModal.tsx b/packages/shared/modals/ActivityActionModal/RechargeByPromoModal.tsx
index 11241c130..5b7a0bf06 100644
--- a/packages/shared/modals/ActivityActionModal/RechargeByPromoModal.tsx
+++ b/packages/shared/modals/ActivityActionModal/RechargeByPromoModal.tsx
@@ -42,7 +42,6 @@ export const RechargeByPromoModal = memo(() => {
           />
           <Spacer y={32} />
           <Button onPress={applyPromo} title={t('battery.promocode.apply')} />
-          <Spacer y={16} />
         </View>
         <Modal.Footer />
       </Modal.Content>
diff --git a/packages/shared/modals/SwitchWalletModal.tsx b/packages/shared/modals/SwitchWalletModal.tsx
index 0ec2d5da0..d06c456a1 100644
--- a/packages/shared/modals/SwitchWalletModal.tsx
+++ b/packages/shared/modals/SwitchWalletModal.tsx
@@ -6,6 +6,7 @@ import { tk } from '@tonkeeper/mobile/src/wallet';
 import { t } from '../i18n';
 import { formatter } from '../formatter';
 import { WalletListItem } from '../components';
+import { useHideableFormatter } from '@tonkeeper/mobile/src/core/HideableAmount/useHideableFormatter';
 
 interface Props {
   selected?: string;
@@ -22,6 +23,7 @@ export const SwitchWalletModal: FC<Props> = memo((props) => {
     [allWallets, props.onSelect],
   );
   const currency = useWalletCurrency();
+  const { format } = useHideableFormatter();
 
   const handlePress = useCallback(
     (identifier: string) => () => {
@@ -47,7 +49,7 @@ export const SwitchWalletModal: FC<Props> = memo((props) => {
                 key={wallet.identifier}
                 wallet={wallet}
                 onPress={handlePress(wallet.identifier)}
-                subtitle={formatter.format(wallet.totalFiat, { currency })}
+                subtitle={format(wallet.totalFiat, { currency })}
                 rightContent={
                   selectedIdentifier === wallet.identifier && (
                     <View style={styles.checkmark}>
diff --git a/packages/uikit/src/containers/Screen/ScreenFlashList.tsx b/packages/uikit/src/containers/Screen/ScreenFlashList.tsx
index 33d6046f1..11d770d16 100644
--- a/packages/uikit/src/containers/Screen/ScreenFlashList.tsx
+++ b/packages/uikit/src/containers/Screen/ScreenFlashList.tsx
@@ -1,4 +1,3 @@
-import { FlashList, ContentStyle, FlashListProps } from '@shopify/flash-list';
 import { Fragment, forwardRef, memo, useEffect, useMemo } from 'react';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { ScreenBottomSeparator } from './ScreenBottomSeparator';
@@ -46,18 +45,22 @@ export const ScreenScrollList = memo<ScreenScrollListProps>(
 
     // useScrollHandler(undefined, true); // TODO: remove this, when old separator will be removed
 
-    const contentStyle: ContentStyle = useMemo(
-      () => ({
-        paddingBottom: safeArea ? safeAreaInsets.bottom : tabBarHeight,
-        ...contentContainerStyle,
-      }),
+    const contentStyle = useMemo(
+      () => [
+        {
+          paddingBottom: safeArea ? safeAreaInsets.bottom : tabBarHeight + 16,
+        },
+        contentContainerStyle,
+      ],
       [contentContainerStyle, tabBarHeight, safeArea, safeAreaInsets.bottom],
     );
 
     const HeaderComponent = (
       <Fragment>
         <Animated.View style={headerOffsetStyle} />
-        {typeof ListHeaderComponent === 'function' ? ListHeaderComponent() : ListHeaderComponent as any}
+        {typeof ListHeaderComponent === 'function'
+          ? ListHeaderComponent()
+          : (ListHeaderComponent as any)}
       </Fragment>
     );