fix(mobile): few browser fixes (#619)

* fix(mobile): few browser fixes * bump(mobile): 3.4.4 (393)
tonkeeper · Oct 26, 2023 · 45a22ca · 45a22ca
1 parent bc364e3
commit 45a22ca
Show file tree

Hide file tree

Showing 7 changed files with 67 additions and 33 deletions.
diff --git a/packages/mobile/ios/ton_keeper.xcodeproj/project.pbxproj b/packages/mobile/ios/ton_keeper.xcodeproj/project.pbxproj
@@ -1284,7 +1284,7 @@
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
 				CLANG_ENABLE_MODULES = YES;
 				CODE_SIGN_ENTITLEMENTS = ton_keeper/ton_keeper.entitlements;
-				CURRENT_PROJECT_VERSION = 392;
+				CURRENT_PROJECT_VERSION = 393;
 				DEFINES_MODULE = YES;
 				DEVELOPMENT_TEAM = CT523DK2KC;
 				ENABLE_BITCODE = NO;
@@ -1319,7 +1319,7 @@
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
 				CLANG_ENABLE_MODULES = YES;
 				CODE_SIGN_ENTITLEMENTS = ton_keeper/ton_keeper.entitlements;
-				CURRENT_PROJECT_VERSION = 392;
+				CURRENT_PROJECT_VERSION = 393;
 				DEFINES_MODULE = YES;
 				DEVELOPMENT_TEAM = CT523DK2KC;
 				INFOPLIST_FILE = ton_keeper/SupportingFiles/Info.plist;

diff --git a/packages/mobile/src/core/DAppsExplore/DAppsExplore.tsx b/packages/mobile/src/core/DAppsExplore/DAppsExplore.tsx
@@ -1,5 +1,5 @@
 import { BrowserStackRouteNames, openChooseCountry, openDAppsSearch } from '$navigation';
-import { useAppsListStore } from '$store';
+import { useAppsListStore, useConnectedAppsList } from '$store';
 import { useFlags } from '$utils/flags';
 import { useBottomTabBarHeight } from '@react-navigation/bottom-tabs';
 import React, {
@@ -33,7 +33,7 @@ import { BrowserStackParamList } from '$navigation/BrowserStack/BrowserStack.int
 import { t } from '@tonkeeper/shared/i18n';
 import { Text as RNText } from 'react-native';
 import { ScrollPositionContext } from '$uikit';
-import { useFocusEffect } from '@tonkeeper/router';
+import { useFocusEffect, useTabPress } from '@tonkeeper/router';
 import { useSelectedCountry } from '$store/zustand/methodsToBuy/useSelectedCountry';
 
 export type DAppsExploreProps = NativeStackScreenProps<
@@ -76,12 +76,15 @@ const getSelectedCountryStyle = (selectedCountry: string) => {
   return { title: selectedCountry, type: 'text' };
 };
 
-const DAppsExploreComponent: FC<DAppsExploreProps> = () => {
+const DAppsExploreComponent: FC<DAppsExploreProps> = (props) => {
   const flags = useFlags(['disable_dapps']);
   const tabBarHeight = useBottomTabBarHeight();
 
+  const { navigation } = props;
+
   const { changeEnd } = useContext(ScrollPositionContext);
 
+  const connectedApps = useConnectedAppsList();
   const selectedCountry = useSelectedCountry();
 
   const featuredApps = useAppsListStore(
@@ -130,26 +133,34 @@ const DAppsExploreComponent: FC<DAppsExploreProps> = () => {
     openDAppsSearch();
   }, []);
 
-  useEffect(() => {
-    fetchPopularApps();
-  }, [fetchPopularApps]);
-
-  useFocusEffect(() => {
-    changeEnd(false);
-  });
-
   const selectedCountryStyle = getSelectedCountryStyle(selectedCountry);
 
   const [segmentIndex, setSegmentIndex] = useState(0);
 
   const showConnected = segmentIndex === 1;
 
+  useEffect(() => {
+    fetchPopularApps();
+  }, [fetchPopularApps]);
+
+  useFocusEffect(
+    useCallback(() => {
+      changeEnd(false);
+    }, [changeEnd]),
+  );
+
+  useTabPress(() => {
+    if (showConnected) {
+      setSegmentIndex(0);
+    }
+  });
+
   return (
     <Screen>
       <Screen.Header
         rightContent={
           <Button
-            size={selectedCountryStyle.type === 'emoji' ? 'icon' : 'small'}
+            size={selectedCountryStyle.type === 'emoji' ? 'icon' : 'header'}
             color="secondary"
             title={selectedCountryStyle.title}
             icon={selectedCountryStyle.icon}
@@ -163,9 +174,13 @@ const DAppsExploreComponent: FC<DAppsExploreProps> = () => {
           index={segmentIndex}
           items={[t('browser.explore'), t('browser.connected')]}
           style={styles.segmentedControl}
+          indicatorStyle={styles.segmentedControlIndicator}
         />
       </Screen.Header>
-      <Screen.ScrollView contentContainerStyle={styles.contentContainerStyle.static}>
+      <Screen.ScrollView
+        contentContainerStyle={styles.contentContainerStyle.static}
+        scrollEnabled={!(showConnected && connectedApps.length === 0)}
+      >
         <View style={!!showConnected && styles.hidden}>
           {flags.disable_dapps ? (
             <AboutDApps />
@@ -179,7 +194,7 @@ const DAppsExploreComponent: FC<DAppsExploreProps> = () => {
           )}
         </View>
         <View style={!showConnected && styles.hidden}>
-          <ConnectedApps />
+          <ConnectedApps connectedApps={connectedApps} />
         </View>
       </Screen.ScrollView>
       <View style={[styles.searchBarContainer, { marginBottom: tabBarHeight }]}>
@@ -191,7 +206,7 @@ const DAppsExploreComponent: FC<DAppsExploreProps> = () => {
 
 export const DAppsExplore = memo(DAppsExploreComponent);
 
-const styles = Steezy.create(() => ({
+const styles = Steezy.create(({ colors }) => ({
   container: {
     flex: 1,
   },
@@ -201,6 +216,9 @@ const styles = Steezy.create(() => ({
   segmentedControl: {
     backgroundColor: 'transparent',
   },
+  segmentedControlIndicator: {
+    backgroundColor: colors.buttonSecondaryBackground,
+  },
   contentContainerStyle: {
     paddingBottom: 0,
   },

diff --git a/packages/mobile/src/core/DAppsExplore/components/ConnectedApps/ConnectedApps.tsx b/packages/mobile/src/core/DAppsExplore/components/ConnectedApps/ConnectedApps.tsx
@@ -1,5 +1,5 @@
 import React, { FC, memo } from 'react';
-import { useConnectedAppsList } from '$store';
+import { IConnectedApp, useConnectedAppsList } from '$store';
 import { AppsList } from '../AppsList/AppsList';
 import { Alert, useWindowDimensions } from 'react-native';
 import { TonConnect } from '$tonconnect';
@@ -9,8 +9,12 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { Spacer, Steezy, Text, View, ns } from '@tonkeeper/uikit';
 import { useBottomTabBarHeight } from '@react-navigation/bottom-tabs';
 
-const ConnectedAppsComponent: FC = () => {
-  const connectedApps = useConnectedAppsList();
+interface Props {
+  connectedApps: IConnectedApp[];
+}
+
+const ConnectedAppsComponent: FC<Props> = (props) => {
+  const { connectedApps } = props;
 
   const { height: windowHeight } = useWindowDimensions();
   const safeArea = useSafeAreaInsets();

diff --git a/packages/mobile/src/core/DAppsExplore/components/PopularAppCell/popularAppCell.style.ts b/packages/mobile/src/core/DAppsExplore/components/PopularAppCell/popularAppCell.style.ts
@@ -43,7 +43,7 @@ export const Content = styled.View`
 `;
 
 export const Title = styled(Text).attrs(() => ({
-  variant: 'label1',
+  variant: 'label2',
   numberOfLines: 1,
 }))``;
 

diff --git a/packages/router/src/hooks/useTabPress.ts b/packages/router/src/hooks/useTabPress.ts
@@ -4,12 +4,15 @@ import {
   useNavigation,
   useRoute,
 } from '@react-navigation/core';
-import { useEffect } from 'react';
+import { useEffect, useRef } from 'react';
 
 export const useTabPress = (fn: () => void) => {
   const navigation = useNavigation();
   const route = useRoute();
 
+  const fnRef = useRef(fn);
+  fnRef.current = fn;
+
   useEffect(() => {
     let tabNavigations: NavigationProp<ReactNavigation.RootParamList>[] = [];
     let currentNavigation = navigation;
@@ -43,7 +46,7 @@ export const useTabPress = (fn: () => void) => {
             navigation.getState().routes[0].key === route.key;
 
           if (isFocused && isFirst && !e.defaultPrevented) {
-            fn();
+            fnRef.current();
           }
         },
       );

diff --git a/packages/uikit/src/components/Button.tsx b/packages/uikit/src/components/Button.tsx
@@ -1,6 +1,7 @@
 import {
   Pressable,
   PressableStateCallbackType,
+  StyleProp,
   StyleSheet,
   View,
   ViewStyle,
@@ -15,7 +16,7 @@ import { ns } from '../utils';
 import { IconNames, Icon, IconColors } from '@tonkeeper/uikit';
 
 export type ButtonColors = 'green' | 'primary' | 'secondary' | 'tertiary';
-export type ButtonSizes = 'large' | 'medium' | 'small' | 'icon';
+export type ButtonSizes = 'large' | 'medium' | 'small' | 'header' | 'icon';
 
 export interface ButtonProps {
   size?: ButtonSizes;
@@ -32,7 +33,7 @@ export interface ButtonProps {
   indentBottom?: boolean;
   indent?: boolean;
   stretch?: boolean;
-  style?: ViewStyle;
+  style?: StyleProp<ViewStyle>;
 }
 
 export const Button = memo<ButtonProps>((props) => {
@@ -160,6 +161,13 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     borderRadius: ns(18),
   },
+  buttonHeader: {
+    height: ns(32),
+    paddingHorizontal: ns(12),
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRadius: ns(16),
+  },
   buttonIcon: {
     width: ns(32),
     height: ns(32),
@@ -200,13 +208,15 @@ const buttonStyleBySize: { [key in ButtonSizes]: ViewStyle } = {
   large: styles.buttonLarge,
   medium: styles.buttonMedium,
   small: styles.buttonSmall,
+  header: styles.buttonHeader,
   icon: styles.buttonIcon,
 };
 
 const textTypesBySize: { [key in ButtonSizes]: TTextTypes } = {
   large: 'label1',
   medium: 'label1',
   small: 'label2',
+  header: 'label2',
   icon: 'label2',
 };
 

diff --git a/packages/uikit/src/components/SegmentedControl.tsx b/packages/uikit/src/components/SegmentedControl.tsx
@@ -16,10 +16,11 @@ interface SegmentedControlProps {
   items: string[];
   index?: number;
   style?: StyleProp<StaticStyles>;
+  indicatorStyle?: StyleProp<StaticStyles>;
 }
 
 export const SegmentedControl = memo<SegmentedControlProps>((props) => {
-  const { onChange, items, index, style } = props;
+  const { onChange, items, index, style, indicatorStyle } = props;
   const theme = useTheme();
 
   const handleItemPress = (index: number) => () => onChange?.(index);
@@ -36,8 +37,6 @@ export const SegmentedControl = memo<SegmentedControlProps>((props) => {
     [],
   );
 
-  const indicatorStyle = { backgroundColor: theme.buttonTertiaryBackground };
-
   const indicatorAnimatedStyle = useAnimatedStyle(() => {
     const layout = tabsLayouts[`item-${index}`];
 
@@ -54,6 +53,7 @@ export const SegmentedControl = memo<SegmentedControlProps>((props) => {
         damping: 15,
         mass: 0.09,
       }),
+      height: layout.height,
       transform: [
         {
           translateX: withSpring(x, {
@@ -66,11 +66,11 @@ export const SegmentedControl = memo<SegmentedControlProps>((props) => {
     };
   }, [tabsLayouts, index]);
 
+  const indicatorStyles = Steezy.useStyle([styles.indicator, indicatorStyle]);
+
   return (
     <View style={[styles.container, style]}>
-      <Animated.View
-        style={[styles.indicator.static, indicatorStyle, indicatorAnimatedStyle]}
-      />
+      <Animated.View style={[indicatorStyles, indicatorAnimatedStyle]} />
       {items.map((item, index) => (
         <TouchableOpacity
           onPress={handleItemPress(index)}
@@ -98,10 +98,9 @@ const styles = Steezy.create(({ colors, corners }) => ({
     paddingVertical: 6,
   },
   indicator: {
+    backgroundColor: colors.buttonTertiaryBackground,
     position: 'absolute',
     top: 4,
     borderRadius: 20,
-    height: 32,
-    width: 20,
   },
 }));