fix(mobile): multiwallet fixes & improvements (#789)

* fix(mobile): multiwallet fixes & improvements * Update ru-RU.json
tonkeeper · Apr 12, 2024 · 1eabf01 · 1eabf01
1 parent 4ffc895
commit 1eabf01
Show file tree

Hide file tree

Showing 80 changed files with 2,583 additions and 1,983 deletions.
diff --git a/packages/mobile/src/core/CustomizeWallet/CustomizeWallet.tsx b/packages/mobile/src/core/CustomizeWallet/CustomizeWallet.tsx
@@ -14,6 +14,7 @@ import {
   TouchableOpacity,
   View,
   WalletColor,
+  WalletIcon,
   getWalletColorHex,
   isAndroid,
   ns,
@@ -29,7 +30,7 @@ import React, {
   useRef,
   useState,
 } from 'react';
-import { Keyboard, LayoutChangeEvent, Text as RNText } from 'react-native';
+import { Keyboard, LayoutChangeEvent } from 'react-native';
 import { ScrollView } from 'react-native-gesture-handler';
 import Animated, { useAnimatedStyle, withTiming } from 'react-native-reanimated';
 import { EmojiPicker } from './EmojiPicker';
@@ -163,7 +164,7 @@ export const CustomizeWallet: FC<Props> = memo((props) => {
                   { backgroundColor: getWalletColorHex(selectedColor) },
                 ]}
               >
-                <RNText style={styles.emoji.static}>{emoji}</RNText>
+                <WalletIcon emojiStyle={styles.emoji.static} size={28} value={emoji} />
               </View>
             </View>
           </View>

diff --git a/packages/mobile/src/core/CustomizeWallet/EmojiPicker/EmojiPicker.tsx b/packages/mobile/src/core/CustomizeWallet/EmojiPicker/EmojiPicker.tsx
@@ -1,8 +1,9 @@
 import { isAndroid } from '$utils';
 import { FlashList } from '@shopify/flash-list';
-import { Steezy, View, ns } from '@tonkeeper/uikit';
+import { Steezy, View, WalletIcon, ns } from '@tonkeeper/uikit';
+import { WALLET_ICONS } from '@tonkeeper/uikit/src/utils/walletIcons';
 import React, { memo, useCallback } from 'react';
-import { Text, TouchableOpacity } from 'react-native';
+import { TouchableOpacity } from 'react-native';
 import LinearGradient from 'react-native-linear-gradient';
 
 interface Emoji {
@@ -12,6 +13,11 @@ interface Emoji {
 
 const emojis: Emoji[] = require('./emojis.json');
 
+const items: Emoji[] = [
+  ...WALLET_ICONS.map((value) => ({ emoji: value, name: value })),
+  ...emojis,
+];
+
 interface EmojiPickerProps {
   onChange: (value: string) => void;
 }
@@ -22,7 +28,7 @@ export const EmojiPicker: React.FC<EmojiPickerProps> = memo(({ onChange }) => {
       return (
         <TouchableOpacity activeOpacity={0.5} onPress={() => onChange(item.emoji)}>
           <View style={styles.emojiContainer}>
-            <Text style={styles.emoji.static}>{item.emoji}</Text>
+            <WalletIcon emojiStyle={styles.emoji.static} size={32} value={item.emoji} />
           </View>
         </TouchableOpacity>
       );
@@ -33,7 +39,7 @@ export const EmojiPicker: React.FC<EmojiPickerProps> = memo(({ onChange }) => {
   return (
     <View style={styles.container}>
       <FlashList
-        data={emojis}
+        data={items}
         numColumns={7}
         keyExtractor={(item) => item.name}
         renderItem={renderEmoji}

diff --git a/packages/mobile/src/core/ModalContainer/CreateSubscription/CreateSubscription.style.ts b/packages/mobile/src/core/ModalContainer/CreateSubscription/CreateSubscription.style.ts
@@ -9,38 +9,19 @@ export const LoaderWrap = styled.View`
 `;
 
 export const Header = styled.View`
-  flex-direction: row;
-  padding: ${ns(0)}px ${ns(16)}px ${ns(32)}px;
+  align-items: center;
+  padding-top: ${ns(48)}px;
 `;
 
 export const MerchantPhoto = styled(FastImage).attrs({
   resizeMode: 'cover',
 })`
-  width: ${ns(72)}px;
-  height: ${ns(72)}px;
-  border-radius: ${ns(72 / 2)}px;
+  width: ${ns(96)}px;
+  height: ${ns(96)}px;
+  border-radius: ${ns(96 / 2)}px;
   background: ${({ theme }) => theme.colors.backgroundSecondary};
 `;
 
-export const MerchantInfoWrap = styled.View`
-  margin-left: ${ns(16)}px;
-  flex: 1;
-  align-items: flex-start;
-`;
-
-export const MerchantInfo = styled.View`
-  height: ${ns(72)}px;
-  justify-content: center;
-`;
-
-export const ProductNameWrapper = styled.View`
-  margin-top: ${ns(2)}px;
-`;
-
-export const Content = styled.View`
-  padding-horizontal: ${ns(16)}px;
-`;
-
 export const ButtonWrap = styled.View`
   margin-top: ${ns(16)}px;
   flex: 0 0 auto;