Merge pull request #830 from tonkeeper/release/4.4.0

Release 4.4.0
tonkeeper · May 5, 2024 · a049f0d · a049f0d
2 parents a65aa45 + fa4156b
commit a049f0d
Show file tree

Hide file tree

Showing 155 changed files with 1,768 additions and 1,131 deletions.
diff --git a/packages/mobile/android/app/build.gradle b/packages/mobile/android/app/build.gradle
@@ -92,7 +92,7 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         versionCode 433
-        versionName "4.3.0"
+        versionName "4.4.0"
         missingDimensionStrategy 'react-native-camera', 'general'
         missingDimensionStrategy 'store', 'play'
     }

diff --git a/packages/mobile/ios/ton_keeper.xcodeproj/project.pbxproj b/packages/mobile/ios/ton_keeper.xcodeproj/project.pbxproj
@@ -1056,7 +1056,7 @@
 			outputFileListPaths = (
 			);
 			outputPaths = (
-				"$SRCROOT/$PROJECT_NAME/Resources/Generated/R.generated.swift",
+				$SRCROOT/$PROJECT_NAME/Resources/Generated/R.generated.swift,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 			shellPath = /bin/sh;
@@ -1298,7 +1298,7 @@
 					"$(inherited)",
 					"@executable_path/Frameworks",
 				);
-				MARKETING_VERSION = 4.3.0;
+				MARKETING_VERSION = 4.4.0;
 				OTHER_LDFLAGS = (
 					"$(inherited)",
 					"-ObjC",
@@ -1332,7 +1332,7 @@
 					"$(inherited)",
 					"@executable_path/Frameworks",
 				);
-				MARKETING_VERSION = 4.3.0;
+				MARKETING_VERSION = 4.4.0;
 				OTHER_LDFLAGS = (
 					"$(inherited)",
 					"-ObjC",

diff --git a/packages/mobile/ios/ton_keeper/SupportingFiles/Info.plist b/packages/mobile/ios/ton_keeper/SupportingFiles/Info.plist
@@ -151,8 +151,6 @@
 		<string>UIInterfaceOrientationPortraitUpsideDown</string>
 		<string>UIInterfaceOrientationPortrait</string>
 	</array>
-	<key>UIUserInterfaceStyle</key>
-	<string>Dark</string>
 	<key>UIViewControllerBasedStatusBarAppearance</key>
 	<false/>
 </dict>

diff --git a/packages/mobile/package.json b/packages/mobile/package.json
@@ -33,7 +33,7 @@
     "@expo/react-native-action-sheet": "^4.0.1",
     "@gorhom/bottom-sheet": "^4.6.0",
     "@rainbow-me/animated-charts": "https://github.com/tonkeeper/react-native-animated-charts#737b1633c41e13da437c8e111c4aedd15bd10558",
-    "@react-native-async-storage/async-storage": "^1.15.5",
+    "@react-native-async-storage/async-storage": "^1.23.1",
     "@react-native-community/clipboard": "^1.5.1",
     "@react-native-community/netinfo": "^9.3.2",
     "@react-native-firebase/analytics": "18.5.0",

diff --git a/packages/mobile/src/components/CardsWidget/components/CardsList.tsx b/packages/mobile/src/components/CardsWidget/components/CardsList.tsx
@@ -5,7 +5,7 @@ import { formatter } from '@tonkeeper/shared/formatter';
 import { MainStackRouteNames } from '$navigation';
 import { useNavigation } from '@tonkeeper/router';
 import { Platform, Text } from 'react-native';
-import { DarkTheme } from '@tonkeeper/uikit/src/styles/themes/dark';
+import { BlueTheme } from '@tonkeeper/uikit/src/styles/themes/blue';
 import { CryptoCurrencies } from '$shared/constants';
 import { useGetTokenPrice } from '$hooks/useTokenPrice';
 import { capitalizeFirstLetter } from '@tonkeeper/shared/utils/date';
@@ -15,11 +15,11 @@ export interface CardsListProps {
 }
 
 const colorsForCardIconBackground = [
-  DarkTheme.accentGreen,
-  DarkTheme.accentOrange,
-  DarkTheme.accentBlue,
-  DarkTheme.accentRed,
-  DarkTheme.accentPurple,
+  BlueTheme.accentGreen,
+  BlueTheme.accentOrange,
+  BlueTheme.accentBlue,
+  BlueTheme.accentRed,
+  BlueTheme.accentPurple,
 ];
 
 function getColorByFourDigits(fourDigits: string | null | undefined) {

diff --git a/packages/mobile/src/core/AccessConfirmation/AccessConfirmation.tsx b/packages/mobile/src/core/AccessConfirmation/AccessConfirmation.tsx
@@ -24,6 +24,7 @@ import { t } from '@tonkeeper/shared/i18n';
 import { tk, vault } from '$wallet';
 import { CanceledActionError } from '$core/Send/steps/ConfirmStep/ActionErrors';
 import { useBiometrySettings, useWallet } from '@tonkeeper/shared/hooks';
+import { Screen } from '@tonkeeper/uikit';
 
 export const AccessConfirmation: FC = () => {
   const route = useRoute();
@@ -215,7 +216,7 @@ export const AccessConfirmation: FC = () => {
   }
 
   return (
-    <S.Wrap>
+    <Screen alternateBackground>
       <NavBar
         hideBackButton={isUnlock}
         isCancelButton={!isUnlock}
@@ -239,6 +240,6 @@ export const AccessConfirmation: FC = () => {
           onBiometryPress={handleBiometry}
         />
       </S.Content>
-    </S.Wrap>
+    </Screen>
   );
 };
diff --git a/packages/mobile/src/core/AddWatchOnly/AddWatchOnly.tsx b/packages/mobile/src/core/AddWatchOnly/AddWatchOnly.tsx
@@ -152,8 +152,8 @@ export const AddWatchOnly: FC = () => {
   const { spacerStyle } = useReanimatedKeyboardHeight();
 
   return (
-    <Screen>
-      <Screen.Header />
+    <Screen alternateBackground>
+      <Screen.Header alternateBackground />
       <Screen.Content>
         <View style={styles.container}>
           <Spacer y={24} />

diff --git a/packages/mobile/src/core/AddressUpdateInfo/AddressUpdateInfo.tsx b/packages/mobile/src/core/AddressUpdateInfo/AddressUpdateInfo.tsx
@@ -3,8 +3,7 @@ import { Spacer } from '$uikit';
 import { Address } from '@tonkeeper/core';
 import { t } from '@tonkeeper/shared/i18n';
 import { tk } from '$wallet';
-import { Pressable, Screen, Steezy, Text, View } from '@tonkeeper/uikit';
-import { DarkTheme } from '@tonkeeper/uikit/src/styles/themes/dark';
+import { Pressable, Screen, Steezy, Text, View, useTheme } from '@tonkeeper/uikit';
 import React, { FC } from 'react';
 import { Platform } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
@@ -34,9 +33,11 @@ export const AddressUpdateInfo: FC = () => {
   const oldStyle = splitAddress(oldAddress);
   const newStyle = splitAddress(newAddress);
 
+  const theme = useTheme();
+
   return (
-    <Screen>
-      <Screen.Header title={t('address_update.title')} />
+    <Screen alternateBackground>
+      <Screen.Header title={t('address_update.title')} alternateBackground />
       <Screen.ScrollView>
         <View style={styles.content}>
           <Text type="body2" color="textSecondary">
@@ -51,8 +52,8 @@ export const AddressUpdateInfo: FC = () => {
             <Text type="label1">{t('address_update.your_wallet')}</Text>
           </View>
           <Pressable
-            underlayColor={DarkTheme.backgroundContentTint}
-            backgroundColor={DarkTheme.fieldBackground}
+            underlayColor={theme.backgroundContentTint}
+            backgroundColor={theme.fieldBackground}
             style={styles.addressContainer}
             onPress={() => copyText(oldAddress)}
           >
@@ -71,8 +72,8 @@ export const AddressUpdateInfo: FC = () => {
           </Pressable>
           <Spacer y={16} />
           <Pressable
-            underlayColor={DarkTheme.backgroundContentTint}
-            backgroundColor={DarkTheme.fieldBackground}
+            underlayColor={theme.backgroundContentTint}
+            backgroundColor={theme.fieldBackground}
             style={styles.addressContainer}
             onPress={() => copyText(newAddress)}
           >

diff --git a/packages/mobile/src/core/App.tsx b/packages/mobile/src/core/App.tsx
@@ -1,10 +1,17 @@
 import React from 'react';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
 import { Provider as StoreProvider, useSelector } from 'react-redux';
-import { ThemeProvider } from 'styled-components/native';
+import { ThemeProvider as StyledThemeProvider } from 'styled-components/native';
 
 import { store } from '$store';
-import { AppearanceAccents, DarkTheme, TonTheme } from '$styled';
+import {
+  AccentKey,
+  AppearanceAccents,
+  BlueTheme,
+  DarkTheme,
+  LightTheme,
+  TonTheme,
+} from '$styled';
 import { AppNavigator } from '$navigation/AppNavigator';
 import { ScrollPositionProvider } from '$uikit';
 import { useMemo } from 'react';
@@ -19,24 +26,70 @@ import { HideableAmountProvider } from '$core/HideableAmount/HideableAmountProvi
 
 import { queryClient } from '@tonkeeper/shared/queryClient';
 import { WalletProvider } from '../context';
-import { BlockingLoaderView } from '@tonkeeper/uikit';
+import { BlockingLoaderView, ThemeName, ThemeProvider } from '@tonkeeper/uikit';
+import { getThemeByName } from '@tonkeeper/uikit/src/styles/utils';
+import { useThemeName } from '$hooks/useThemeName';
+
+const getLegacyThemeByName = (name: ThemeName): TonTheme => {
+  const uikitTheme = getThemeByName(name);
+
+  if (name === ThemeName.Dark) {
+    return { ...DarkTheme, colors: { ...DarkTheme.colors, ...uikitTheme } };
+  }
+
+  if (name === ThemeName.Light) {
+    return { ...LightTheme, colors: { ...LightTheme.colors, ...uikitTheme } };
+  }
+
+  return { ...BlueTheme, colors: { ...BlueTheme.colors, ...uikitTheme } };
+};
 
 const TonThemeProvider = ({ children }) => {
   const accent = useSelector(accentSelector);
+  const themeName = useThemeName();
+
+  const accentColors =
+    accent !== AccentKey.default ? AppearanceAccents[accent].colors : undefined;
+
+  const uiThemeAccentColors = useMemo(() => {
+    if (!accentColors) {
+      return {};
+    }
+    return {
+      textAccent: accentColors.accentPrimary,
+      buttonPrimaryBackground: accentColors.accentPrimary,
+      buttonPrimaryBackgroundDisabled: accentColors.accentPrimaryLight,
+      buttonPrimaryBackgroundHighlighted: accentColors.accentPrimaryDark,
+      fieldActiveBorder: accentColors.accentPrimary,
+      accentBlue: accentColors.accentPrimary,
+      tabBarActiveIcon: accentColors.accentPrimary,
+    };
+  }, [accentColors]);
+
+  const uitheme = useMemo(
+    () => ({ ...getThemeByName(themeName), ...uiThemeAccentColors }),
+    [themeName, uiThemeAccentColors],
+  );
 
-  const accentColors = AppearanceAccents[accent].colors;
+  const legacyTheme = useMemo(() => getLegacyThemeByName(themeName), [themeName]);
 
   const theme = useMemo(
     (): TonTheme => ({
-      ...DarkTheme,
-      colors: { ...DarkTheme.colors, ...accentColors },
+      ...legacyTheme,
+      colors: {
+        ...legacyTheme.colors,
+        ...accentColors,
+        ...uiThemeAccentColors,
+      },
     }),
-    [accentColors],
+    [accentColors, legacyTheme, uiThemeAccentColors],
   );
 
   return (
     <View style={{ flex: 1, backgroundColor: theme.colors.backgroundPrimary }}>
-      <ThemeProvider {...{ theme }}>{children}</ThemeProvider>
+      <ThemeProvider theme={uitheme}>
+        <StyledThemeProvider {...{ theme }}>{children}</StyledThemeProvider>
+      </ThemeProvider>
     </View>
   );
 };

diff --git a/packages/mobile/src/core/BuyFiat/BuyFiat.tsx b/packages/mobile/src/core/BuyFiat/BuyFiat.tsx
@@ -16,6 +16,7 @@ import { trackEvent } from '$utils/stats';
 import { useWallet, useWalletCurrency } from '@tonkeeper/shared/hooks';
 import { config } from '$config';
 import { tk } from '$wallet';
+import { useTheme } from '@tonkeeper/uikit';
 
 export const BuyFiat: FC<BuyFiatProps> = ({ route }) => {
   const currency = route.params.currency;
@@ -141,6 +142,8 @@ export const BuyFiat: FC<BuyFiatProps> = ({ route }) => {
     }, 500);
   }, []);
 
+  const theme = useTheme();
+
   return (
     <S.Wrap>
       {renderHeader()}
@@ -163,7 +166,7 @@ export const BuyFiat: FC<BuyFiatProps> = ({ route }) => {
         thirdPartyCookiesEnabled={true}
         onNavigationStateChange={handleNavigationChange}
         allowFileAccess
-        forceDarkOn={methodId !== 'onramp'}
+        forceDarkOn={theme.isDark && methodId !== 'onramp'}
         allowsInlineMediaPlayback
         allowsFullscreenVideo
         keyboardDisplayRequiresUserAction={false}

diff --git a/packages/mobile/src/core/Colectibles/NFTCardItem.tsx b/packages/mobile/src/core/Colectibles/NFTCardItem.tsx
@@ -1,6 +1,6 @@
 import { t } from '@tonkeeper/shared/i18n';
 import { openNFT } from '$navigation';
-import { DarkTheme, Steezy } from '$styles';
+import { Steezy } from '$styles';
 import { Icon, Pressable, View } from '$uikit';
 import { checkIsTonDiamondsNFT } from '$utils';
 import { useFlags } from '$utils/flags';
@@ -12,6 +12,7 @@ import { AnimationDirection, HideableAmount } from '$core/HideableAmount/Hideabl
 import { HideableImage } from '$core/HideableAmount/HideableImage';
 import { Address } from '@tonkeeper/shared/Address';
 import { DNS, KnownTLDs } from '@tonkeeper/core';
+import { useTheme } from '@tonkeeper/uikit';
 
 interface NFTCardItemProps {
   item: any;
@@ -46,10 +47,12 @@ export const NFTCardItem = memo<NFTCardItemProps>((props) => {
 
   const nftRawAddress = useMemo(() => Address.parse(item.address).toRaw(), []);
 
+  const theme = useTheme();
+
   return (
     <Pressable
-      underlayColor={DarkTheme.backgroundContentTint}
-      backgroundColor={DarkTheme.backgroundContent}
+      underlayColor={theme.backgroundContentTint}
+      backgroundColor={theme.backgroundContent}
       style={styles.container}
       onPress={handleOpenNftItem}
     >
@@ -60,7 +63,7 @@ export const NFTCardItem = memo<NFTCardItemProps>((props) => {
         <S.Badges>
           {isTonDiamondsNft && !flags.disable_apperance ? (
             <S.AppearanceBadge>
-              <Icon name="ic-appearance-16" color="constantLight" />
+              <Icon name="ic-appearance-16" color="iconPrimary" />
             </S.AppearanceBadge>
           ) : null}
         </S.Badges>
@@ -122,6 +125,6 @@ const styles = Steezy.create(({ colors, corners }) => ({
     height: '100%',
     borderTopLeftRadius: 16,
     borderTopRightRadius: 16,
-    background: DarkTheme.backgroundTertiary,
+    background: colors.backgroundTertiary,
   },
 }));
diff --git a/packages/mobile/src/core/CreatePin/CreatePin.tsx b/packages/mobile/src/core/CreatePin/CreatePin.tsx
@@ -9,7 +9,7 @@ import { CreatePinForm } from '$shared/components';
 import { tk } from '$wallet';
 import { popToTop } from '$navigation/imperative';
 import { useParams } from '@tonkeeper/router/src/imperative';
-import { BlockingLoader } from '@tonkeeper/uikit';
+import { BlockingLoader, Screen } from '@tonkeeper/uikit';
 
 export const CreatePin: FC = () => {
   const params = useParams<{ isImport?: boolean }>();
@@ -44,9 +44,11 @@ export const CreatePin: FC = () => {
   );
 
   return (
-    <S.Wrap>
-      <NavBar onClosePress={popToTop} />
-      <CreatePinForm onPinCreated={handlePinCreated} />
-    </S.Wrap>
+    <Screen alternateBackground>
+      <S.Wrap>
+        <NavBar onClosePress={popToTop} />
+        <CreatePinForm onPinCreated={handlePinCreated} />
+      </S.Wrap>
+    </Screen>
   );
 };