fix(mobile): Wallet screen fixes

packages/@core-js/src/utils/AmountFormatter/AmountFormatter.ts

@@ -21,6 +21,8 @@ export type AmountFormatOptions = {
   ignoreZeroTruncate?: boolean;
   absolute?: boolean;
   withPositivePrefix?: boolean;
+  // Truncate decimals. Required for backward compatibility
+  forceRespectDecimalPlaces?: boolean;
 };
 
 export type AmountFormatNanoOptions = AmountFormatOptions & {
@@ -144,7 +146,10 @@ export class AmountFormatter {
     };
 
     // truncate decimals 1.00 -> 1
-    if (!options.ignoreZeroTruncate && bn.isLessThan('1000')) {
+    if (
+      options.forceRespectDecimalPlaces ||
+      (!options.ignoreZeroTruncate && bn.isLessThan('1000'))
+    ) {
       bn = bn.decimalPlaces(decimals, BigNumber.ROUND_DOWN);
       return bn.toFormat(formatConf);
     }

packages/mobile/src/core/Jetton/Jetton.tsx

@@ -151,7 +151,6 @@ export const Jetton: React.FC<JettonProps> = ({ route }) => {
             },
             {
               id: 'swap',
-              disabled: !isWatchOnly && showSwap && !flags.disable_swap,
               onPress: handlePressSwap,
               icon: 'ic-swap-horizontal-outline-28',
               title: t('wallet.swap_btn'),
@@ -181,7 +180,6 @@ export const Jetton: React.FC<JettonProps> = ({ route }) => {
   }, [
     jetton,
     jettonPrice.formatted.totalFiat,
-    jettonPrice.formatted.fiat,
     lockedJettonPrice.formatted.totalFiat,
     isWatchOnly,
     handleSend,

packages/mobile/src/core/LegalDocuments/FontLicense.tsx

@@ -1,13 +1,14 @@
 import React from 'react';
 import Animated from 'react-native-reanimated';
 import { useBottomTabBarHeight } from '@react-navigation/bottom-tabs';
-import {NavBar, ScrollHandler, Text} from '$uikit';
+import { NavBar, ScrollHandler, Text } from '$uikit';
 import { ns } from '$utils';
 import * as S from './LegalDocuments.style';
 import { t } from '@tonkeeper/shared/i18n';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 export const FontLicense: React.FC = () => {
-  const tabBarHeight = useBottomTabBarHeight();
+  const insets = useSafeAreaInsets();
 
   return (
     <S.Wrap>
@@ -17,7 +18,7 @@ export const FontLicense: React.FC = () => {
           showsVerticalScrollIndicator={false}
           contentContainerStyle={{
             paddingHorizontal: ns(16),
-            paddingBottom: tabBarHeight,
+            paddingBottom: insets.bottom + 16,
           }}
           scrollEventThrottle={16}
         >
@@ -124,4 +125,4 @@ INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
 DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
 FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
 OTHER DEALINGS IN THE FONT SOFTWARE.
-`;
+`;

packages/mobile/src/core/LegalDocuments/LegalDocuments.tsx

@@ -1,15 +1,15 @@
 import React, { FC, useCallback, useMemo } from 'react';
-import { useBottomTabBarHeight } from '@react-navigation/bottom-tabs';
 import Animated from 'react-native-reanimated';
 import { Icon, NavBar, ScrollHandler, Text } from '$uikit';
 import { ns } from '$utils';
 import { CellSection, CellSectionItem } from '$shared/components';
 import * as S from './LegalDocuments.style';
 import { openDAppBrowser, openFontLicense } from '$navigation';
 import { t } from '@tonkeeper/shared/i18n';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 export const LegalDocuments: FC = () => {
-  const tabBarHeight = useBottomTabBarHeight();
+  const insets = useSafeAreaInsets();
 
   const handleTerms = useCallback(() => {
     openDAppBrowser('https://tonkeeper.com/terms');
@@ -36,7 +36,7 @@ export const LegalDocuments: FC = () => {
           showsVerticalScrollIndicator={false}
           contentContainerStyle={{
             paddingHorizontal: ns(16),
-            paddingBottom: tabBarHeight,
+            paddingBottom: insets.bottom + 16,
           }}
           scrollEventThrottle={16}
         >

packages/mobile/src/core/Logs/Logs.tsx

@@ -1,5 +1,4 @@
 import React, { FC, useCallback, useMemo } from 'react';
-import { useBottomTabBarHeight } from '@react-navigation/bottom-tabs';
 import { useDispatch, useSelector } from 'react-redux';
 import Clipboard from '@react-native-community/clipboard';
 
@@ -10,10 +9,11 @@ import { format, ns } from '$utils';
 
 import { Toast } from '$store';
 import { t } from '@tonkeeper/shared/i18n';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 export const Logs: FC = () => {
-  const tabBarHeight = useBottomTabBarHeight();
   const dispatch = useDispatch();
+  const insets = useSafeAreaInsets();
 
   const { logs } = useSelector(mainSelector);
 
@@ -33,27 +33,24 @@ export const Logs: FC = () => {
     ];
   }, [logs]);
 
-  const handleItemPress = useCallback(
-    (item) => {
-      const payload = [
-        `Screen: ${item.screen}`,
-        `Time: ${item.time}`,
-        `Message: ${item.message}`,
-        `Stack: ${item.trace}`,
-      ].join('\n');
+  const handleItemPress = useCallback((item) => {
+    const payload = [
+      `Screen: ${item.screen}`,
+      `Time: ${item.time}`,
+      `Message: ${item.message}`,
+      `Stack: ${item.trace}`,
+    ].join('\n');
 
-      Clipboard.setString(payload);
-      Toast.success(t('copied'));
-    },
-    [t, dispatch],
-  );
+    Clipboard.setString(payload);
+    Toast.success(t('copied'));
+  }, []);
 
   return (
     <S.Wrap>
       <NavBar>Logs</NavBar>
       <RoundedSectionList
         contentContainerStyle={{
-          paddingBottom: tabBarHeight + ns(16),
+          paddingBottom: insets.bottom + ns(16),
         }}
         sections={data}
         renderItem={(item) => {

packages/mobile/src/core/Notifications/Notifications.tsx

@@ -9,27 +9,27 @@ import {
   View,
 } from '$uikit';
 import { ns } from '$utils';
-import { useBottomTabBarHeight } from '@react-navigation/bottom-tabs';
 import { CellSection } from '$shared/components';
 import { t } from '@tonkeeper/shared/i18n';
 import { useConnectedAppsList } from '$store';
 import { Steezy } from '$styles';
 import { SwitchDAppNotifications } from '$core/Notifications/SwitchDAppNotifications';
 import { useNotificationsSwitch } from '$hooks/useNotificationsSwitch';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 export const Notifications: React.FC = () => {
-  const tabBarHeight = useBottomTabBarHeight();
   const connectedApps = useConnectedAppsList();
   const { isSubscribed, isDenied, openSettings, toggleNotifications } =
     useNotificationsSwitch();
+  const insets = useSafeAreaInsets();
 
   return (
     <Screen>
       <Screen.Header title={t('notifications_title')} />
       <Screen.ScrollView
         contentContainerStyle={{
           paddingHorizontal: ns(16),
-          paddingBottom: tabBarHeight,
+          paddingBottom: insets.bottom,
         }}
       >
         {isDenied && (

packages/mobile/src/core/Notifications/NotificationsActivity.tsx

@@ -8,6 +8,8 @@ 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';
 
 export enum ActivityListItem {
   Notification = 'Notification',

packages/mobile/src/core/Security/Security.tsx

@@ -1,6 +1,5 @@
 import React, { FC, useCallback } from 'react';
 import Animated from 'react-native-reanimated';
-import { useBottomTabBarHeight } from '@react-navigation/bottom-tabs';
 import Clipboard from '@react-native-community/clipboard';
 
 import * as S from './Security.style';
@@ -14,9 +13,10 @@ import { useBiometrySettings, useWallet } from '@tonkeeper/shared/hooks';
 import { useNavigation } from '@tonkeeper/router';
 import { vault } from '$wallet';
 import { Haptics, Switch } from '@tonkeeper/uikit';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 export const Security: FC = () => {
-  const tabBarHeight = useBottomTabBarHeight();
+  const insets = useSafeAreaInsets();
   const wallet = useWallet();
   const nav = useNavigation();
 
@@ -93,7 +93,7 @@ export const Security: FC = () => {
           showsVerticalScrollIndicator={false}
           contentContainerStyle={{
             paddingHorizontal: ns(16),
-            paddingBottom: tabBarHeight,
+            paddingBottom: insets.bottom + 16,
           }}
           scrollEventThrottle={16}
         >

packages/mobile/src/core/Settings/Settings.tsx

@@ -3,11 +3,10 @@ import { useDispatch } from 'react-redux';
 import Rate, { AndroidMarket } from 'react-native-rate';
 import { Alert, Linking, Platform, View } from 'react-native';
 import DeviceInfo from 'react-native-device-info';
-import Animated from 'react-native-reanimated';
 import { TapGestureHandler } from 'react-native-gesture-handler';
 
 import * as S from './Settings.style';
-import { Icon, PopupSelect, ScrollHandler, Spacer, Text } from '$uikit';
+import { Icon, PopupSelect, Spacer, Text } from '$uikit';
 import { Icon as NewIcon, Screen } from '@tonkeeper/uikit';
 import { useShouldShowTokensButton } from '$hooks/useShouldShowTokensButton';
 import { useNavigation } from '@tonkeeper/router';
@@ -286,7 +285,6 @@ export const Settings: FC = () => {
                   rightContent={<Icon name="ic-chevron-right-16" />}
                 />
               </List>
-              <Spacer y={16} />
             </>
           ) : null}
           <List>

packages/mobile/src/modals/ExchangeModal.tsx

@@ -13,6 +13,7 @@ import { openChooseCountry } from '$navigation';
 import { useSelectedCountry } from '$store/zustand/methodsToBuy/useSelectedCountry';
 import { CountryButton } from '@tonkeeper/shared/components';
 import { config } from '$config';
+import { useWallet } from '@tonkeeper/shared/hooks';
 
 export const ExchangeModal = () => {
   const [showAll, setShowAll] = React.useState(false);
@@ -65,6 +66,9 @@ export const ExchangeModal = () => {
     LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
   }, [showAll]);
 
+  const wallet = useWallet();
+  const watchOnly = wallet && wallet.isWatchOnly;
+
   const [segmentIndex, setSegmentIndex] = useState(0);
 
   const isLoading = buy.length === 0 && sell.length === 0;
@@ -79,11 +83,15 @@ export const ExchangeModal = () => {
           <CountryButton selectedCountry={selectedCountry} onPress={openChooseCountry} />
         }
         title={
-          <SegmentedControl
-            onChange={(segment) => setSegmentIndex(segment)}
-            index={segmentIndex}
-            items={[t('exchange_modal.buy'), t('exchange_modal.sell')]}
-          />
+          watchOnly ? (
+            categories && categories[0] && categories[0].title
+          ) : (
+            <SegmentedControl
+              onChange={(segment) => setSegmentIndex(segment)}
+              index={segmentIndex}
+              items={[t('exchange_modal.buy'), t('exchange_modal.sell')]}
+            />
+          )
         }
       />
       <Modal.ScrollView safeArea>
@@ -97,9 +105,11 @@ export const ExchangeModal = () => {
               {categories.map((category, cIndex) => (
                 <React.Fragment key={cIndex}>
                   {cIndex > 0 ? <Spacer y={16} /> : null}
-                  <S.TitleContainer>
-                    <Text type="h3">{category.title}</Text>
-                  </S.TitleContainer>
+                  {!(watchOnly && cIndex === 0) ? (
+                    <S.TitleContainer>
+                      <Text type="h3">{category.title}</Text>
+                    </S.TitleContainer>
+                  ) : null}
                   <S.Contain>
                     {category.items.map((item, idx, arr) => (
                       <ExchangeItem

packages/mobile/src/tabs/Wallet/WalletScreen.tsx

@@ -27,6 +27,7 @@ import { WalletActionButtons } from './components/WalletActionButtons/WalletActi
 import { WalletContentList } from './components/WalletContentList';
 import { usePreparedWalletContent } from './content-providers/utils/usePreparedWalletContent';
 import { FinishSetupList } from './components/FinishSetupList';
+import { BackupIndicator } from './components/Tabs/BackupIndicator';
 
 export const WalletScreen = memo(({ navigation }) => {
   const dispatch = useDispatch();
@@ -165,7 +166,12 @@ export const WalletScreen = memo(({ navigation }) => {
       <Screen.Header
         title={<WalletSelector />}
         rightContent={
-          <TouchableOpacity activeOpacity={0.6} onPress={handleNavigateToSettingsStack}>
+          <TouchableOpacity
+            style={styles.gearContainer.static}
+            activeOpacity={0.6}
+            onPress={handleNavigateToSettingsStack}
+          >
+            {!isWatchOnly ? <BackupIndicator /> : null}
             <Icon color="iconSecondary" name={'ic-gear-outline-28'} />
           </TouchableOpacity>
         }
@@ -225,4 +231,10 @@ const styles = Steezy.create(({ isTablet }) => ({
     flexDirection: 'row',
     alignItems: 'center',
   },
+  gearContainer: {
+    width: 48,
+    height: 48,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
 }));

packages/mobile/src/tabs/Wallet/components/Tabs/BackupIndicator.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { useWalletSetup } from '@tonkeeper/shared/hooks';
+import { Steezy, View } from '@tonkeeper/uikit';
+
+export const BackupIndicator: React.FC = () => {
+  const { lastBackupAt } = useWalletSetup();
+
+  const isVisible = lastBackupAt === null;
+
+  if (!isVisible) {
+    return null;
+  }
+
+  return <View style={styles.indicator} />;
+};
+
+const styles = Steezy.create(({ colors }) => ({
+  indicator: {
+    position: 'absolute',
+    top: 10,
+    right: 4,
+    height: 6,
+    width: 6,
+    borderRadius: 3,
+    backgroundColor: colors.accentRed,
+  },
+}));

packages/mobile/src/tabs/Wallet/components/WalletActionButtons/WalletActionButtons.tsx

@@ -121,7 +121,7 @@ export const WalletActionButtons = memo(() => {
         {
           id: 'buy',
           onPress: handlePressBuy,
-          icon: 'ic-usd-28',
+          icon: 'ic-usd-outline-28',
           title: t('wallet.buy_btn'),
           visible: !wallet.isTestnet,
         },

packages/mobile/src/tabs/Wallet/hooks/useBalance.ts

@@ -18,6 +18,11 @@ export const useBalance = (cellItems: CellItemToRender[]) => {
       const balance = item.fiatRate?.total.raw ?? '0';
       return total.plus(balance);
     }, new BigNumber(0));
-    return formatter.format(totalNumber.toString(), { currency });
+
+    return formatter.format(totalNumber.toString(), {
+      currency,
+      forceRespectDecimalPlaces: true,
+      decimals: totalNumber.gte(1000) ? 0 : 2,
+    });
   }, [cellItems, currency]);
 };