feature(mobile): new Wallet screen

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/core/Colectibles/Collectibles.tsx

@@ -0,0 +1,58 @@
+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 - 32) / numColumn - 4;
+    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,
+  },
+  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,7 +100,6 @@ const styles = Steezy.create(({ colors, corners }) => ({
   container: {
     position: 'relative',
     flex: 1,
-    marginHorizontal: 4,
     marginBottom: 8,
     backgroundColor: colors.backgroundContent,
     borderRadius: corners.medium,