feature(mobile): new Wallet screen

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/android/app/build.gradle

@@ -92,7 +92,7 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         versionCode 433
-        versionName "4.2.0"
+        versionName "4.3.0"
         missingDimensionStrategy 'react-native-camera', 'general'
         missingDimensionStrategy 'store', 'play'
     }

packages/mobile/ios/ton_keeper.xcodeproj/project.pbxproj

@@ -1298,7 +1298,7 @@
 					"$(inherited)",
 					"@executable_path/Frameworks",
 				);
-				MARKETING_VERSION = 4.2.0;
+				MARKETING_VERSION = 4.3.0;
 				OTHER_LDFLAGS = (
 					"$(inherited)",
 					"-ObjC",
@@ -1332,7 +1332,7 @@
 					"$(inherited)",
 					"@executable_path/Frameworks",
 				);
-				MARKETING_VERSION = 4.2.0;
+				MARKETING_VERSION = 4.3.0;
 				OTHER_LDFLAGS = (
 					"$(inherited)",
 					"-ObjC",

packages/mobile/src/blockchain/wallet.ts

@@ -632,9 +632,7 @@ export class TonWallet {
         ? AddressFormatter.isBounceable(address)
         : false,
     });
-
     const [feeNano, isBattery] = await this.calcFee(boc);
-
     return [Ton.fromNano(feeNano.toString()), isBattery];
   }
 

packages/mobile/src/core/Colectibles/Collectibles.tsx

@@ -0,0 +1,59 @@
+import React, { memo, useMemo } from 'react';
+import { View } from '$uikit';
+import { NFTCardItem } from './NFTCardItem';
+import { Steezy } from '$styles';
+import { useWindowDimensions } from 'react-native';
+import { useApprovedNfts } from '$hooks/useApprovedNfts';
+import { Screen } from '@tonkeeper/uikit';
+import { t } from '@tonkeeper/shared/i18n';
+
+const mockupCardSize = {
+  width: 114,
+  height: 166,
+};
+
+const numColumn = 3;
+const heightRatio = mockupCardSize.height / mockupCardSize.width;
+
+export const Collectibles = memo(() => {
+  const nfts = useApprovedNfts();
+  const dimensions = useWindowDimensions();
+
+  const size = useMemo(() => {
+    const width = (dimensions.width - 48) / numColumn;
+    const height = width * heightRatio;
+
+    return { width, height };
+  }, [dimensions.width]);
+
+  return (
+    <Screen>
+      <Screen.LargeHeader title={t('tab_collectibles')} />
+      <Screen.FlashList
+        contentContainerStyle={styles.collectiblesContainer.static}
+        data={nfts.enabled}
+        numColumns={3}
+        columnWrapperStyle={styles.columnWrapper.static}
+        renderItem={({ item }) => (
+          <View style={size}>
+            <NFTCardItem item={item} />
+          </View>
+        )}
+      />
+    </Screen>
+  );
+});
+
+const styles = Steezy.create({
+  collectiblesContainer: {
+    marginHorizontal: 16,
+    gap: 8,
+  },
+  nftElements: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  columnWrapper: {
+    gap: 8,
+  },
+});

packages/mobile/src/core/Colectibles/NFTCardItem.style.ts

@@ -0,0 +1,75 @@
+import styled, { RADIUS } from '$styled';
+import { ns } from '$utils';
+import FastImage from 'react-native-fast-image';
+import { Highlight } from '$uikit';
+import { Dimensions } from 'react-native';
+
+const deviceWidth = Dimensions.get('window').width;
+export const NUM_OF_COLUMNS = Math.trunc(Math.max(2, Math.min(deviceWidth / 171, 3)));
+const availableWidth = NUM_OF_COLUMNS === 2 ? (deviceWidth - ns(48)) / 2 : 171; // Padding and margin between NFTs
+
+export const Wrap = styled.View<{ withMargin: boolean }>`
+  width: ${availableWidth}px;
+  margin-right: ${({ withMargin }) => (withMargin ? ns(16) : 0)}px;
+  margin-bottom: ${ns(16)}px;
+`;
+
+export const Background = styled.View`
+  background: ${({ theme }) => theme.colors.backgroundSecondary};
+  border-radius: ${ns(RADIUS.normal)}px;
+  position: absolute;
+  z-index: 0;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+`;
+
+export const Pressable = styled(Highlight)`
+  border-radius: ${ns(RADIUS.normal)}px;
+`;
+
+export const Image = styled(FastImage).attrs({
+  resizeMode: 'cover',
+})`
+  position: relative;
+  z-index: 2;
+  width: 100%;
+  height: ${ns(171)}px;
+  border-top-left-radius: ${ns(RADIUS.normal)}px;
+  border-top-right-radius: ${ns(RADIUS.normal)}px;
+  background: ${({ theme }) => theme.colors.backgroundTertiary};
+`;
+
+export const Badges = styled.View`
+  position: absolute;
+  bottom: ${8}px;
+  right: ${8}px;
+  flex-direction: row;
+  align-items: center;
+`;
+
+export const FireBadge = styled.View`
+  position: absolute;
+  bottom: ${0}px;
+  right: ${0}px;
+  flex-direction: row;
+  align-items: center;
+`;
+
+export const OnSaleBadge = styled.View`
+  position: absolute;
+  top: ${0}px;
+  right: ${0}px;
+  flex-direction: row;
+  align-items: center;
+`;
+
+export const AppearanceBadge = styled.View`
+  width: ${ns(32)}px;
+  height: ${ns(32)}px;
+  border-radius: ${ns(32 / 2)}px;
+  background: ${({ theme }) => theme.colors.backgroundSecondary};
+  align-items: center;
+  justify-content: center;
+`;

packages/mobile/src/tabs/Wallet/NFTCardItem.tsx → packages/mobile/src/core/Colectibles/NFTCardItem.tsx

@@ -6,7 +6,7 @@ import { checkIsTonDiamondsNFT } from '$utils';
 import { useFlags } from '$utils/flags';
 import _ from 'lodash';
 import React, { memo, useCallback, useMemo } from 'react';
-import * as S from '../../core/NFTs/NFTItem/NFTItem.style';
+import * as S from './NFTCardItem.style';
 import { useExpiringDomains } from '$store/zustand/domains/useExpiringDomains';
 import { AnimationDirection, HideableAmount } from '$core/HideableAmount/HideableAmount';
 import { HideableImage } from '$core/HideableAmount/HideableImage';
@@ -100,8 +100,6 @@ const styles = Steezy.create(({ colors, corners }) => ({
   container: {
     position: 'relative',
     flex: 1,
-    marginHorizontal: 4,
-    marginBottom: 8,
     backgroundColor: colors.backgroundContent,
     borderRadius: corners.medium,
     overflow: 'hidden',

packages/mobile/src/core/HideableAmount/ShowBalance.tsx

@@ -57,6 +57,6 @@ const styles = Steezy.create(({ colors }) => ({
     borderRadius: 100,
   },
   stars: {
-    paddingTop: 5.5,
+    paddingTop: 8,
   },
 }));

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,
   },

packages/mobile/src/core/Jetton/Jetton.style.ts

@@ -11,7 +11,6 @@ export const Wrap = styled.View`
 
 export const ChartWrap = styled.View`
   margin-bottom: ${ns(24.5)}px;
-  margin-top: 18px;
 `;
 
 export const HeaderWrap = styled.View`
@@ -44,7 +43,7 @@ export const FlexRow = styled.View`
   flex-direction: row;
   justify-content: space-between;
   margin-top: ${ns(16)}px;
-  margin-bottom: ${ns(28)}px;
+  padding-horizontal: ${ns(12)}px;
 `;
 
 export const JettonAmountWrapper = styled.View`