chore: rename, normalize screen header title.

RabbyHub · Nov 28, 2024 · 1e778b7 · 1e778b7
1 parent 9ce2b29
commit 1e778b7
Show file tree

Hide file tree

Showing 12 changed files with 118 additions and 45 deletions.
diff --git a/apps/mobile/src/constant/layout.ts b/apps/mobile/src/constant/layout.ts
@@ -1,5 +1,10 @@
 import { NativeStackNavigationOptions } from '@react-navigation/native-stack';
-import { AppColorsVariants, ThemeColors, ThemeColors2024 } from './theme';
+import {
+  AppColors2024Variants,
+  AppColorsVariants,
+  ThemeColors,
+  ThemeColors2024,
+} from './theme';
 import { IS_ANDROID } from '@/core/native/utils';
 
 export const ModalLayouts = {
@@ -75,7 +80,7 @@ export const RootNames = {
   /* warning: testkits only ------ start */
   StackTestkits: 'StackTestkits',
   TestKits: 'TestKits',
-  SampleNewUserGetStarted2024: 'SampleNewUserGetStarted2024',
+  NewUserGetStarted2024: 'NewUserGetStarted2024',
   DevUIFontShowCase: 'DevUIFontShowCase',
   DevUIFormShowCase: 'DevUIFormShowCase',
   DevUIAccountShowCase: 'DevUIAccountShowCase',
@@ -226,7 +231,7 @@ function makeScreenSpecConfig() {
       },
       GetStarted: blueLightConf,
       GetStartedScreen2024: bg1DefaultConf,
-      SampleNewUserGetStarted2024: bg1DefaultConf,
+      NewUserGetStarted2024: bg1DefaultConf,
 
       Home: bg1DefaultConf,
       MultiAddressHome: bg1Default2024Conf,
@@ -293,7 +298,8 @@ export const DEFAULT_NAVBAR_FONT_SIZE = 18;
 
 export function makeHeadersPresets({
   colors,
-}: { colors?: AppColorsVariants } = {}) {
+  colors2024,
+}: { colors?: AppColorsVariants; colors2024?: AppColors2024Variants } = {}) {
   const navigationBarHeaderTitle = {
     fontWeight: '500' as const,
     fontSize: DEFAULT_NAVBAR_FONT_SIZE,
@@ -309,6 +315,7 @@ export function makeHeadersPresets({
       headerBackVisible: false,
       headerTitleStyle: { ...navigationBarHeaderTitle },
     } as NativeStackNavigationOptions,
+    /** @deprecated */
     withBgCard2: {
       headerStyle: {
         backgroundColor: colors?.['neutral-card2'],
@@ -319,15 +326,36 @@ export function makeHeadersPresets({
       },
       headerTintColor: colors?.['neutral-title-1'],
     },
+    /** @deprecated */
     withBg2: {
       headerStyle: {
         backgroundColor: colors?.['neutral-bg2'],
       },
       headerTitleStyle: {
         color: colors?.['neutral-title-1'],
-        ...navigationBarHeaderTitle,
+        fontWeight: '700' as const,
+        fontFamily: 'SF Pro Rounded',
+        fontSize: DEFAULT_NAVBAR_FONT_SIZE,
+      },
+      headerTintColor: colors?.['neutral-title-1'],
+    },
+    withBgCard2_2024: {
+      headerStyle: {
+        backgroundColor: colors?.['neutral-card2'],
+      },
+      headerTitleStyle: {
+        color: colors?.['neutral-title-1'],
+        fontWeight: '700' as const,
+        fontFamily: 'SF Pro Rounded',
+        fontSize: DEFAULT_NAVBAR_FONT_SIZE,
       },
       headerTintColor: colors?.['neutral-title-1'],
     },
+    titleFont_2024: {
+      color: colors2024?.['neutral-title-1'],
+      fontWeight: '700' as const,
+      fontFamily: 'SF Pro Rounded',
+      fontSize: 20,
+    },
   };
 }
diff --git a/apps/mobile/src/core/utils/fonts.ts b/apps/mobile/src/core/utils/fonts.ts
@@ -46,62 +46,63 @@ export function getFontWeightType(fontWeight?: string | number) {
 
   const result = {
     supertype: FontWeightEnum.normal,
-    type: FontWeightEnum.normal,
+    finalFontWeight: FontWeightEnum.normal,
+    inputFontWeight: fwStr,
   };
 
   if (!fontWeight) return result;
 
   if (['heavy'].includes(fwStr) || fontWeightNumber >= 900) {
     result.supertype = FontWeightEnum.heavy;
-    result.type = FontWeightEnum.heavy;
+    result.finalFontWeight = FontWeightEnum.heavy;
   } else if (
     ['ultrabold', 'extrabold'].includes(fwStr) ||
     fontWeightNumber > FontWeightEnum.heavy - 100
   ) {
     result.supertype = FontWeightEnum.bold;
-    result.type = FontWeightEnum.extraBold;
+    result.finalFontWeight = FontWeightEnum.extraBold;
   } else if (
     ['bold'].includes(fwStr) ||
     fontWeightNumber > FontWeightEnum.bold - 100
   ) {
     result.supertype = FontWeightEnum.bold;
-    result.type = FontWeightEnum.bold;
+    result.finalFontWeight = FontWeightEnum.bold;
   } else if (
     ['semibold', 'demibold'].includes(fwStr) ||
     fontWeightNumber > FontWeightEnum.semiBold - 100
   ) {
     result.supertype = FontWeightEnum.bold;
-    result.type = FontWeightEnum.semiBold;
+    result.finalFontWeight = FontWeightEnum.semiBold;
   } else if (
     ['medium'].includes(fwStr) ||
     fontWeightNumber > FontWeightEnum.medium - 100
   ) {
     result.supertype = FontWeightEnum.medium;
-    result.type = FontWeightEnum.medium;
+    result.finalFontWeight = FontWeightEnum.medium;
   } else if (
     ['normal', 'regular'].includes(fwStr) ||
     fontWeightNumber > FontWeightEnum.normal - 100
   ) {
     result.supertype = FontWeightEnum.normal;
-    result.type = FontWeightEnum.normal;
+    result.finalFontWeight = FontWeightEnum.normal;
   } else if (
     ['light'].includes(fwStr) ||
     fontWeightNumber > FontWeightEnum.light - 100
   ) {
     result.supertype = FontWeightEnum.light;
-    result.type = FontWeightEnum.light;
+    result.finalFontWeight = FontWeightEnum.light;
   } else if (
     ['extralight', 'ultralight'].includes(fwStr) ||
     fontWeightNumber > FontWeightEnum.extraLight - 100
   ) {
     result.supertype = FontWeightEnum.light;
-    result.type = FontWeightEnum.extraLight;
+    result.finalFontWeight = FontWeightEnum.extraLight;
   } else if (
     ['thin', 'hairline'].includes(fwStr) ||
     fontWeightNumber > FontWeightEnum.thin - 100
   ) {
     result.supertype = FontWeightEnum.thin;
-    result.type = FontWeightEnum.thin;
+    result.finalFontWeight = FontWeightEnum.thin;
   }
 
   return result;

diff --git a/apps/mobile/src/hooks/navigation.tsx b/apps/mobile/src/hooks/navigation.tsx
@@ -7,7 +7,7 @@ import {
   NativeStackNavigationOptions,
   NativeStackScreenProps,
 } from '@react-navigation/native-stack';
-import { useThemeColors } from '@/hooks/theme';
+import { useTheme2024 } from '@/hooks/theme';
 import { getReadyNavigationInstance, navigationRef } from '@/utils/navigation';
 import { CustomTouchableOpacity } from '@/components/CustomTouchableOpacity';
 
@@ -77,7 +77,7 @@ type ScreenOptions = Omit<NativeStackNavigationOptions, 'headerTitleStyle'> & {
   headerTitleStyle: NativeStackNavigationOptions['headerTitleStyle'] & object;
 };
 export const useStackScreenConfig = () => {
-  const colors = useThemeColors();
+  const { colors, colors2024 } = useTheme2024();
 
   const navBack = useCallback(() => {
     const navigation = navigationRef.current;
@@ -91,8 +91,9 @@ export const useStackScreenConfig = () => {
     }
   }, []);
 
-  const headerPresets = makeHeadersPresets({ colors });
+  const headerPresets = makeHeadersPresets({ colors, colors2024 });
 
+  /** @deprecated for new screen use mergeScreenOptions2024 instead */
   const mergeScreenOptions = useCallback(
     (...optsList: Partial<ScreenOptions>[]) => {
       const screenOptions: ScreenOptions = {
@@ -128,7 +129,43 @@ export const useStackScreenConfig = () => {
     [headerPresets, colors, navBack],
   );
 
-  return { mergeScreenOptions };
+  const mergeScreenOptions2024 = useCallback(
+    (optsList: Partial<ScreenOptions>[], options?: any) => {
+      const screenOptions: ScreenOptions = {
+        animation: 'slide_from_right',
+        ...headerPresets.onlyTitle,
+        headerTitleStyle: {
+          ...(headerPresets.onlyTitle.headerTitleStyle as object),
+          color: colors2024['neutral-title-1'],
+          fontWeight: '800',
+          fontFamily: 'SF Pro Rounded',
+          fontSize: 20,
+        },
+        headerTintColor: colors2024['neutral-title-1'],
+        headerLeft: ({ tintColor }) => (
+          <CustomTouchableOpacity
+            style={styles.backButtonStyle}
+            hitSlop={hitSlop}
+            onPress={navBack}>
+            <RcIconHeaderBack
+              width={24}
+              height={24}
+              color={tintColor || colors2024['neutral-body']}
+            />
+          </CustomTouchableOpacity>
+        ),
+      };
+
+      return merge(
+        {},
+        screenOptions,
+        ...optsList.map(x => ({ ...x })),
+      ) as ScreenOptions;
+    },
+    [headerPresets, colors2024, navBack],
+  );
+
+  return { mergeScreenOptions, mergeScreenOptions2024 };
 };
 
 const styles = StyleSheet.create({

diff --git a/apps/mobile/src/index.d.ts b/apps/mobile/src/index.d.ts
@@ -1,5 +1,6 @@
 /// <reference types="nativewind/types" />
 /// <reference path="./assets/assets.d.ts" />
+/// <reference path="./types/token.d.ts" />
 
 // keey sync with .env* files at the package's root
 declare module '@env' {

diff --git a/apps/mobile/src/navigation-type.ts b/apps/mobile/src/navigation-type.ts
@@ -60,7 +60,7 @@ type GetStartedNavigatorParamsList = {
 };
 
 type TestKitsNavigatorParamsList = {
-  [RootNames.SampleNewUserGetStarted2024]?: {};
+  [RootNames.NewUserGetStarted2024]?: {};
   [RootNames.DevUIFontShowCase]?: {};
   [RootNames.DevUIFormShowCase]?: {};
   [RootNames.DevUIAccountShowCase]?: {};

diff --git a/...etStarted/SampleNewUserGetStarted2024.tsx → ...eens/GetStarted/NewUserGetStarted2024.tsx b/...etStarted/SampleNewUserGetStarted2024.tsx → ...eens/GetStarted/NewUserGetStarted2024.tsx
@@ -25,7 +25,7 @@ import {
 import { isNonPublicProductionEnv } from '@/constant/env';
 import { useRabbyAppNavigation } from '@/hooks/navigation';
 
-function SampleGetStartedScreen2024(): JSX.Element {
+function GetStartedScreen2024(): JSX.Element {
   const { styles, colors2024 } = useTheme2024({ getStyle: getStyles });
 
   const [getStaretd, setGetStaretd] = useState<{
@@ -314,4 +314,4 @@ const getStyles = createGetStyles2024(ctx =>
   }),
 );
 
-export default SampleGetStartedScreen2024;
+export default GetStartedScreen2024;
diff --git a/apps/mobile/src/screens/Navigators/AddressNavigator.tsx b/apps/mobile/src/screens/Navigators/AddressNavigator.tsx
@@ -5,7 +5,11 @@ import { useStackScreenConfig } from '@/hooks/navigation';
 import { createCustomNativeStackNavigator } from '@/utils/CustomNativeStackNavigator';
 import { useTheme2024, useThemeColors } from '@/hooks/theme';
 import { AddressListScreen } from '@/screens/Address/AddressListScreen';
-import { DEFAULT_NAVBAR_FONT_SIZE, RootNames } from '@/constant/layout';
+import {
+  DEFAULT_NAVBAR_FONT_SIZE,
+  makeHeadersPresets,
+  RootNames,
+} from '@/constant/layout';
 import ImportNewAddressScreen from '@/screens/Address/ImportNewAddress';
 import { ImportSuccessScreen } from '../Address/ImportSuccessScreen';
 import { ImportWatchAddressScreen } from '../Address/ImportWatchAddressScreen';
@@ -43,6 +47,7 @@ import CreateChooseBackup from '../Address/CreateChooseBackup';
 import { AddressListScreenButton } from '../Address/AddressListScreenButton';
 import { WatchAddressListScreen } from '../Address/WatchAddressListScreen';
 import { SafeAddressListScreen } from '../Address/SafeAddressScreen';
+import { StyleSheet } from 'react-native';
 
 const AddressStack = createCustomNativeStackNavigator();
 
@@ -73,9 +78,8 @@ const hitSlop = {
 };
 
 export function AddressNavigator() {
-  const { mergeScreenOptions } = useStackScreenConfig();
-  const colors = useThemeColors();
-  const { colors2024, styles } = useTheme2024({ getStyle });
+  const { mergeScreenOptions, mergeScreenOptions2024 } = useStackScreenConfig();
+  const { colors, colors2024, styles } = useTheme2024({ getStyle });
 
   return (
     <AddressStack.Navigator
@@ -96,14 +100,16 @@ export function AddressNavigator() {
       <AddressStack.Screen
         name={RootNames.AddressList}
         component={AddressListScreen}
-        options={mergeScreenOptions({
-          headerTitle: 'Address',
-          title: 'Address',
-          headerTintColor: colors2024['neutral-title-1'],
-          headerTitleStyle: styles.headerTitleText,
-          // eslint-disable-next-line react/no-unstable-nested-components
-          headerRight: () => <AddressListScreenButton type="address" />,
-        })}
+        options={mergeScreenOptions2024([
+          {
+            headerTitle: 'Address',
+            title: 'Address',
+            headerTintColor: colors2024['neutral-title-1'],
+            headerTitleStyle: styles.headerTitleText,
+            // eslint-disable-next-line react/no-unstable-nested-components
+            headerRight: () => <AddressListScreenButton type="address" />,
+          },
+        ])}
       />
       <AddressStack.Screen
         name={RootNames.WatchAddressList}

diff --git a/apps/mobile/src/screens/Navigators/GetStartedNavigator.tsx b/apps/mobile/src/screens/Navigators/GetStartedNavigator.tsx
@@ -4,7 +4,7 @@ import { useStackScreenConfig } from '@/hooks/navigation';
 import { useThemeColors } from '@/hooks/theme';
 import { createCustomNativeStackNavigator } from '@/utils/CustomNativeStackNavigator';
 import GetStartedScreen from '../GetStarted/GetStarted';
-import GetStartedScreen2024 from '../GetStarted/SampleNewUserGetStarted2024';
+import GetStartedScreen2024 from '../GetStarted/NewUserGetStarted2024';
 
 const Stack = createCustomNativeStackNavigator();
 

diff --git a/apps/mobile/src/screens/Navigators/TestkitsNavigator.tsx b/apps/mobile/src/screens/Navigators/TestkitsNavigator.tsx
@@ -4,7 +4,7 @@ import { useStackScreenConfig } from '@/hooks/navigation';
 import { useThemeColors } from '@/hooks/theme';
 import { createCustomNativeStackNavigator } from '@/utils/CustomNativeStackNavigator';
 import GetStartedScreen from '../GetStarted/GetStarted';
-import SampleGetStartedScreen2024 from '../GetStarted/SampleNewUserGetStarted2024';
+import GetStartedScreen2024 from '../GetStarted/NewUserGetStarted2024';
 import DevUIFontShowCase from '../Testkits/DevUIFontShowCase';
 import DevUIFormShowCase from '../Testkits/DevUIFormShowCase';
 import DevUIAccountShowCase from '../Testkits/DevUIAccountShowCase';
@@ -32,8 +32,8 @@ export function TestkitsNavigator() {
         // }}
       />
       <Stack.Screen
-        name={RootNames.SampleNewUserGetStarted2024}
-        component={SampleGetStartedScreen2024}
+        name={RootNames.NewUserGetStarted2024}
+        component={GetStartedScreen2024}
         // options={{
         //   navigationBarHidden: true,
         // }}

diff --git a/apps/mobile/src/screens/Navigators/TransactionNavigator.tsx b/apps/mobile/src/screens/Navigators/TransactionNavigator.tsx
@@ -31,12 +31,10 @@ const TransactionStack =
   createNativeStackNavigator<TransactionNavigatorParamList>();
 
 export default function TransactionNavigator() {
-  const { mergeScreenOptions } = useStackScreenConfig();
+  const { mergeScreenOptions, mergeScreenOptions2024 } = useStackScreenConfig();
   // console.log('============== TransactionNavigator Render =========');
 
-  const colors = useThemeColors();
-  const { colors2024 } = useTheme2024();
-
+  const { colors, colors2024 } = useTheme2024();
   const headerPresets = makeHeadersPresets({ colors });
 
   return (
@@ -185,7 +183,7 @@ export default function TransactionNavigator() {
         component={ApprovalsScreen}
         options={mergeScreenOptions({
           title: 'Approvals',
-          ...headerPresets.withBgCard2,
+          ...headerPresets.withBgCard2_2024,
           headerStyle: {
             backgroundColor: colors?.['neutral-bg-2'],
           },
@@ -232,7 +230,7 @@ export default function TransactionNavigator() {
         component={GasAccountScreen}
         options={mergeScreenOptions({
           title: 'GasAccount',
-          ...headerPresets.withBgCard2,
+          ...headerPresets.withBgCard2_2024,
         })}
       />
     </TransactionStack.Navigator>

diff --git a/apps/mobile/src/screens/Settings/sheetModals/DevUIPlayground.tsx b/apps/mobile/src/screens/Settings/sheetModals/DevUIPlayground.tsx
@@ -85,7 +85,7 @@ export default function DevUIPlaygroundModal({
           );
           // navigation.dispatch(
           //   StackActions.push(RootNames.StackTestkits, {
-          //     screen: RootNames.SampleNewUserGetStarted2024,
+          //     screen: RootNames.NewUserGetStarted2024,
           //   }),
           // );
         },

diff --git a/packages/base-utils/src/type-helpers.ts b/packages/base-utils/src/type-helpers.ts
@@ -1,3 +1,5 @@
 export type FieldNilable<T> = {
   [P in keyof T]?: T[P] | null;
 };
+
+export type ItOrItsPromise<T> = T | Promise<T>;