Skip to content

Commit

Permalink
freeze enabled, memoization, refactor
Browse files Browse the repository at this point in the history
  • Loading branch information
lendihop committed Oct 31, 2023
1 parent f08d327 commit 238ad3d
Show file tree
Hide file tree
Showing 26 changed files with 218 additions and 243 deletions.
6 changes: 3 additions & 3 deletions ios/Podfile.lock
Original file line number Diff line number Diff line change
Expand Up @@ -751,9 +751,9 @@ PODS:
- React-RCTText
- ReactCommon/turbomodule/core
- Yoga
- RNScreens (3.18.2):
- RNScreens (3.27.0):
- RCT-Folly (= 2021.07.22.00)
- React-Core
- React-RCTImage
- RNScrypt (1.2.1):
- React
- RNSentry (5.9.1):
Expand Down Expand Up @@ -1193,7 +1193,7 @@ SPEC CHECKSUMS:
RNQuickAction: 6d404a869dc872cde841ad3147416a670d13fa93
RNReactNativeHapticFeedback: 1e3efeca9628ff9876ee7cdd9edec1b336913f8c
RNReanimated: 9f7068e43b9358a46a688d94a5a3adb258139457
RNScreens: 34cc502acf1b916c582c60003dc3089fa01dc66d
RNScreens: 3c2d122f5e08c192e254c510b212306da97d2581
RNScrypt: 95fdef077b482e9fdf8a761120cb69d129ef4016
RNSentry: 0a1daa8ee81e2776f977ae8c66e67c8d85587828
RNSha256: 80bea5b2e7005f813f6438cb41e573b3d531146c
Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -107,7 +107,7 @@
"react-native-reanimated-carousel": "^3.5.1",
"react-native-restart": "^0.0.24",
"react-native-safe-area-context": "^4.4.1",
"react-native-screens": "^3.18.2",
"react-native-screens": "^3.27.0",
"react-native-scrypt": "^1.2.1",
"react-native-sha256": "^1.4.8",
"react-native-svg": "madfish-solutions/react-native-svg#41c5c2b78a9fc86aa1b0e47761123068504d9298",
Expand Down
3 changes: 2 additions & 1 deletion src/app/app.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import React from 'react';
import { LogBox } from 'react-native';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import { enableScreens } from 'react-native-screens';
import { enableScreens, enableFreeze } from 'react-native-screens';
import { Provider } from 'react-redux';
import { PersistGate } from 'redux-persist/integration/react';

Expand All @@ -20,6 +20,7 @@ import { AppStyles } from './app.styles';

initSentry();
enableScreens();
enableFreeze();
LogBox.ignoreAllLogs();

export const App = () => (
Expand Down
6 changes: 3 additions & 3 deletions src/components/header-card/header-card.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { FC } from 'react';
import React, { FC, memo } from 'react';
import { StyleProp, View, ViewStyle } from 'react-native';

import { InsetSubstitute } from '../inset-substitute/inset-substitute';
Expand All @@ -9,7 +9,7 @@ interface Props {
style?: StyleProp<ViewStyle>;
}

export const HeaderCard: FC<Props> = ({ hasInsetTop = false, style, children }) => {
export const HeaderCard: FC<Props> = memo(({ hasInsetTop = false, style, children }) => {
const styles = useHeaderCardStyles();

return (
Expand All @@ -18,4 +18,4 @@ export const HeaderCard: FC<Props> = ({ hasInsetTop = false, style, children })
{children}
</View>
);
};
});
45 changes: 45 additions & 0 deletions src/navigator/navigation-bar/hooks/use-navigation-bar-button.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
import { useMemo } from 'react';

import { emptyFn } from 'src/config/general';
import { ScreensEnum } from 'src/navigator/enums/screens.enum';
import { useNavigation } from 'src/navigator/hooks/use-navigation.hook';
import { useColors } from 'src/styles/use-colors';

import { NavigationBarButton } from '../interfaces/navigation-bar-button.interface';

export const useNavigationBarButton = ({
focused,
routeName,
swapScreenParams,
disabled = false,
disabledOnPress = emptyFn
}: Omit<NavigationBarButton, 'iconWidth'>) => {
const colors = useColors();
const { navigate } = useNavigation();

const color = useMemo(() => {
let value = colors.gray1;
focused && (value = colors.orange);
disabled && (value = colors.disabled);

return value;
}, [colors, focused, disabled]);

const handlePress = () => {
if (disabled) {
disabledOnPress();
} else {
if (routeName === ScreensEnum.SwapScreen) {
navigate(routeName, swapScreenParams);
} else {
navigate(routeName);
}
}
};

return {
color,
colors,
handlePress
};
};
50 changes: 50 additions & 0 deletions src/navigator/navigation-bar/hooks/use-navigation-bar.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
import { useCallback } from 'react';

import { useNetworkInfo } from 'src/hooks/use-network-info.hook';
import { ScreensEnum } from 'src/navigator/enums/screens.enum';
import { useNavigation } from 'src/navigator/hooks/use-navigation.hook';
import { showErrorToast } from 'src/toast/error-toast.utils';
import { TokenInterface } from 'src/token/interfaces/token.interface';
import { isDefined } from 'src/utils/is-defined';

const NOT_AVAILABLE_MESSAGE = 'Not available on this RPC node';

type RouteType = { params?: { token: TokenInterface } };
export type RouteParams = { name: string } & RouteType;

export const useNavigationBar = (currentRouteName: ScreensEnum) => {
const { isDcpNode } = useNetworkInfo();
const { getState } = useNavigation();

const routes = getState().routes[0].state?.routes;
const route = getTokenParams(routes as RouteParams[]);
const swapScreenParams =
isDefined(route) && currentRouteName === ScreensEnum.TokenScreen ? { inputToken: route.params?.token } : undefined;

const isStackFocused = useCallback(
(screensStack: ScreensEnum[]) => isDefined(currentRouteName) && screensStack.includes(currentRouteName),
[currentRouteName]
);

const handleDisabledPress = useCallback(() => showErrorToast({ description: NOT_AVAILABLE_MESSAGE }), []);

return {
isDcpNode,
swapScreenParams,
isStackFocused,
handleDisabledPress
};
};

const getTokenParams = (routes: RouteParams[] | undefined): null | RouteType => {
let result = null;
if (Array.isArray(routes) && isDefined(routes)) {
for (const route of routes) {
if (route.name === ScreensEnum.TokenScreen) {
result = route;
}
}
}

return result;
};
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import { IconNameEnum } from 'src/components/icon/icon-name.enum';
import { ScreensEnum, ScreensParamList } from 'src/navigator/enums/screens.enum';

export interface NavigationBarButton {
label: string;
iconName: IconNameEnum;
iconWidth: number;
routeName:
| ScreensEnum.Wallet
| ScreensEnum.DApps
| ScreensEnum.SwapScreen
| ScreensEnum.Market
| ScreensEnum.CollectiblesHome;
focused: boolean;
disabled?: boolean;
showNotificationDot?: boolean;
swapScreenParams?: ScreensParamList[ScreensEnum.SwapScreen];
disabledOnPress?: EmptyFn;
}
16 changes: 10 additions & 6 deletions src/navigator/navigation-bar/navigation-bar.tsx
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
import React, { FC, useContext, useEffect, useState } from 'react';
import React, { memo, useContext, useEffect, useMemo, useState } from 'react';
import { Dimensions, View } from 'react-native';
import { isTablet } from 'react-native-device-info';
import Orientation, { useOrientationChange } from 'react-native-orientation-locker';

import { useIsAuthorisedSelector } from '../../store/wallet/wallet-selectors';
import { conditionalStyle } from '../../utils/conditional-style';
import { useIsAuthorisedSelector } from 'src/store/wallet/wallet-selectors';
import { conditionalStyle } from 'src/utils/conditional-style';

import { CurrentRouteNameContext } from '../current-route-name.context';
import { ScreensEnum } from '../enums/screens.enum';
import { NavigationBarStyles } from './navigation-bar.styles';
Expand All @@ -20,13 +21,16 @@ const screensWithoutTabBar = [
ScreensEnum.NotificationsItem
];

export const NavigationBar: FC = ({ children }) => {
export const NavigationBar = memo(({ children }) => {
const isAuthorised = useIsAuthorisedSelector();
const currentRouteName = useContext(CurrentRouteNameContext);

const [isShowTabletNavigation, setIsShowTabletNavigation] = useState(false);

const isShowNavigationBar = isAuthorised && !screensWithoutTabBar.includes(currentRouteName);
const isShowNavigationBar = useMemo(
() => isAuthorised && !screensWithoutTabBar.includes(currentRouteName),
[currentRouteName, isAuthorised]
);

useEffect(() => void (!isTablet() && Orientation.lockToPortrait()), []);

Expand All @@ -44,4 +48,4 @@ export const NavigationBar: FC = ({ children }) => {
{isShowNavigationBar && !isShowTabletNavigation && <TabBar currentRouteName={currentRouteName} />}
</View>
);
};
});
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import { transparent } from '../../../../config/styles';
import { createUseStyles } from '../../../../styles/create-use-styles';
import { formatSize } from '../../../../styles/format-size';
import { transparent } from 'src/config/styles';
import { createUseStylesMemoized } from 'src/styles/create-use-styles';
import { formatSize } from 'src/styles/format-size';

export const useSideBarButtonStyles = createUseStyles(({ typography }) => ({
export const useSideBarButtonStyles = createUseStylesMemoized(({ typography }) => ({
container: {
flexDirection: 'row',
alignItems: 'center',
Expand Down
Original file line number Diff line number Diff line change
@@ -1,66 +1,21 @@
import React, { FC, useMemo } from 'react';
import React, { memo } from 'react';
import { Text, TouchableOpacity, View } from 'react-native';

import { Divider } from '../../../../components/divider/divider';
import { Icon } from '../../../../components/icon/icon';
import { IconNameEnum } from '../../../../components/icon/icon-name.enum';
import { EmptyFn, emptyFn } from '../../../../config/general';
import { formatSize } from '../../../../styles/format-size';
import { useColors } from '../../../../styles/use-colors';
import { conditionalStyle } from '../../../../utils/conditional-style';
import { ScreensEnum, ScreensParamList } from '../../../enums/screens.enum';
import { useNavigation } from '../../../hooks/use-navigation.hook';
import { Divider } from 'src/components/divider/divider';
import { Icon } from 'src/components/icon/icon';
import { IconNameEnum } from 'src/components/icon/icon-name.enum';
import { formatSize } from 'src/styles/format-size';
import { conditionalStyle } from 'src/utils/conditional-style';

import { useNavigationBarButton } from '../../hooks/use-navigation-bar-button';
import { NavigationBarButton } from '../../interfaces/navigation-bar-button.interface';
import { useSideBarButtonStyles } from './side-bar-button.styles';

interface Props {
label: string;
iconName: IconNameEnum;
routeName:
| ScreensEnum.Wallet
| ScreensEnum.DApps
| ScreensEnum.SwapScreen
| ScreensEnum.Market
| ScreensEnum.CollectiblesHome;
focused: boolean;
disabled?: boolean;
showNotificationDot?: boolean;
swapScreenParams?: ScreensParamList[ScreensEnum.SwapScreen];
disabledOnPress?: EmptyFn;
}
export const SideBarButton = memo<Omit<NavigationBarButton, 'iconWidth'>>(props => {
const { label, iconName, focused, disabled = false, showNotificationDot = false } = props;

export const SideBarButton: FC<Props> = ({
label,
iconName,
routeName,
focused,
disabled = false,
showNotificationDot = false,
swapScreenParams,
disabledOnPress = emptyFn
}) => {
const colors = useColors();
const styles = useSideBarButtonStyles();
const { navigate } = useNavigation();

const color = useMemo(() => {
let value = colors.gray1;
focused && (value = colors.orange);
disabled && (value = colors.disabled);

return value;
}, [colors, focused, disabled]);

const handlePress = () => {
if (disabled) {
disabledOnPress();
} else {
if (routeName === ScreensEnum.SwapScreen) {
navigate(routeName, swapScreenParams);
} else {
navigate(routeName);
}
}
};
const { color, colors, handlePress } = useNavigationBarButton(props);

return (
<TouchableOpacity
Expand All @@ -87,4 +42,4 @@ export const SideBarButton: FC<Props> = ({
<Text style={[styles.label, { color }]}>{label}</Text>
</TouchableOpacity>
);
};
});
12 changes: 6 additions & 6 deletions src/navigator/navigation-bar/side-bar/side-bar.styles.ts
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import { black, SIDEBAR_WIDTH } from '../../../config/styles';
import { createUseStyles } from '../../../styles/create-use-styles';
import { formatSize } from '../../../styles/format-size';
import { generateShadow } from '../../../styles/generate-shadow';
import { androidStyles, iosStyles } from '../../../utils/conditional-style';
import { black, SIDEBAR_WIDTH } from 'src/config/styles';
import { createUseStylesMemoized } from 'src/styles/create-use-styles';
import { formatSize } from 'src/styles/format-size';
import { generateShadow } from 'src/styles/generate-shadow';
import { androidStyles, iosStyles } from 'src/utils/conditional-style';

export const useSideBarStyles = createUseStyles(({ colors }) => ({
export const useSideBarStyles = createUseStylesMemoized(({ colors }) => ({
container: {
width: formatSize(SIDEBAR_WIDTH),
backgroundColor: colors.navigation,
Expand Down
27 changes: 5 additions & 22 deletions src/navigator/navigation-bar/side-bar/side-bar.tsx
Original file line number Diff line number Diff line change
@@ -1,12 +1,11 @@
import React, { FC, useCallback } from 'react';
import React, { memo } from 'react';
import { ScrollView, View } from 'react-native';

import { Divider } from 'src/components/divider/divider';
import { IconNameEnum } from 'src/components/icon/icon-name.enum';
import { InsetSubstitute } from 'src/components/inset-substitute/inset-substitute';
import { OctopusWithLove } from 'src/components/octopus-with-love/octopus-with-love';
import { isAndroid } from 'src/config/system';
import { useNetworkInfo } from 'src/hooks/use-network-info.hook';
import {
dAppsStackScreens,
marketStackScreens,
Expand All @@ -15,36 +14,20 @@ import {
swapStackScreens,
walletStackScreens
} from 'src/navigator/enums/screens.enum';
import { useNavigation } from 'src/navigator/hooks/use-navigation.hook';
import { formatSize } from 'src/styles/format-size';
import { showErrorToast } from 'src/toast/toast.utils';
import { isDefined } from 'src/utils/is-defined';

import { getTokenParams, NOT_AVAILABLE_MESSAGE, RouteParams } from '../tab-bar/tab-bar';
import { useNavigationBar } from '../hooks/use-navigation-bar';
import { SideBarButton } from './side-bar-button/side-bar-button';
import { useSideBarStyles } from './side-bar.styles';

interface Props {
currentRouteName: ScreensEnum;
}

export const SideBar: FC<Props> = ({ currentRouteName }) => {
export const SideBar = memo<Props>(({ currentRouteName }) => {
const styles = useSideBarStyles();

const { isDcpNode } = useNetworkInfo();
const { getState } = useNavigation();

const routes = getState().routes[0].state?.routes;
const route = getTokenParams(routes as RouteParams[]);
const swapScreenParams =
isDefined(route) && currentRouteName === ScreensEnum.TokenScreen ? { inputToken: route.params?.token } : undefined;

const isStackFocused = useCallback(
(screensStack: ScreensEnum[]) => isDefined(currentRouteName) && screensStack.includes(currentRouteName),
[currentRouteName]
);

const handleDisabledPress = () => showErrorToast({ description: NOT_AVAILABLE_MESSAGE });
const { isDcpNode, swapScreenParams, isStackFocused, handleDisabledPress } = useNavigationBar(currentRouteName);

return (
<View style={styles.container}>
Expand Down Expand Up @@ -100,4 +83,4 @@ export const SideBar: FC<Props> = ({ currentRouteName }) => {
</ScrollView>
</View>
);
};
});
Loading

0 comments on commit 238ad3d

Please sign in to comment.