From dd9e274c0d1fcdffbe3cb2fce1a8c54b49ae8e6f Mon Sep 17 00:00:00 2001 From: lendihop Date: Thu, 26 Oct 2023 14:02:25 +0200 Subject: [PATCH 01/11] migration --- package.json | 6 +- .../header/exolix-screen-options.tsx | 11 +-- .../header/generate-screen-options.util.tsx | 4 +- .../header-action/header-actions.styles.ts | 3 +- .../header-button/header-button.styles.ts | 3 +- .../header-progress/header-progress.styles.ts | 4 +- .../header/use-modal-options.util.tsx | 21 ++--- .../header/use-navigation-set-options.hook.ts | 4 +- .../details-card/stats-item/styles.ts | 1 - .../use-stack-navigation-options.hook.ts | 8 +- .../use-stack-navigator-style-options.hook.ts | 21 ++--- src/navigator/main-stack.tsx | 16 ++-- src/navigator/root-stack.tsx | 4 +- .../earn/opportunity-category-card/styles.ts | 1 - yarn.lock | 87 +++++++++---------- 15 files changed, 98 insertions(+), 96 deletions(-) diff --git a/package.json b/package.json index dc18256f5..dab606ab6 100644 --- a/package.json +++ b/package.json @@ -44,9 +44,9 @@ "@react-native-firebase/app-check": "^17.5.0", "@react-native-firebase/messaging": "^17.5.0", "@react-native-google-signin/google-signin": "9.0.2", - "@react-navigation/bottom-tabs": "^6.4.0", - "@react-navigation/native": "^6.0.13", - "@react-navigation/stack": "^6.3.2", + "@react-navigation/bottom-tabs": "^6.5.11", + "@react-navigation/native": "^6.1.9", + "@react-navigation/native-stack": "^6.9.16", "@reduxjs/toolkit": "^1.8.5", "@sentry/react-native": "5.9.1", "@shopify/flash-list": "^1.6.1", diff --git a/src/components/header/exolix-screen-options.tsx b/src/components/header/exolix-screen-options.tsx index 5caab25c2..abbb0d388 100644 --- a/src/components/header/exolix-screen-options.tsx +++ b/src/components/header/exolix-screen-options.tsx @@ -1,9 +1,10 @@ -import { StackNavigationOptions } from '@react-navigation/stack'; +import { NativeStackNavigationOptions } from '@react-navigation/native-stack'; import React, { FC, useMemo } from 'react'; -import { useNavigation } from '../../navigator/hooks/use-navigation.hook'; -import { useExolixStep } from '../../store/exolix/exolix-selectors'; -import { IconNameEnum } from '../icon/icon-name.enum'; +import { IconNameEnum } from 'src/components/icon/icon-name.enum'; +import { useNavigation } from 'src/navigator/hooks/use-navigation.hook'; +import { useExolixStep } from 'src/store/exolix/exolix-selectors'; + import { HeaderButton } from './header-button/header-button'; import { HeaderProgress } from './header-progress/header-progress'; import { HeaderTitle } from './header-title/header-title'; @@ -18,7 +19,7 @@ const BackButton: FC = () => { return ; }; -export const exolixScreenOptions = (): StackNavigationOptions => ({ +export const exolixScreenOptions = (): NativeStackNavigationOptions => ({ headerTitleAlign: 'center', headerLeft: () => , headerTitle: () => , diff --git a/src/components/header/generate-screen-options.util.tsx b/src/components/header/generate-screen-options.util.tsx index adfa8bfc3..a16f70325 100644 --- a/src/components/header/generate-screen-options.util.tsx +++ b/src/components/header/generate-screen-options.util.tsx @@ -1,4 +1,4 @@ -import { StackNavigationOptions } from '@react-navigation/stack'; +import { NativeStackNavigationOptions } from '@react-navigation/native-stack'; import React, { FC } from 'react'; import { HeaderBackButton } from './header-back-button/header-back-button'; @@ -7,7 +7,7 @@ export const generateScreenOptions = ( headerTitleElement: ReturnType, headerRightElement: ReturnType = null, headerLeft = true -): StackNavigationOptions => ({ +): NativeStackNavigationOptions => ({ headerTitleAlign: 'center', headerLeft: () => headerLeft && , headerTitle: () => headerTitleElement, diff --git a/src/components/header/header-action/header-actions.styles.ts b/src/components/header/header-action/header-actions.styles.ts index 435619bd1..b1a7e5339 100644 --- a/src/components/header/header-action/header-actions.styles.ts +++ b/src/components/header/header-action/header-actions.styles.ts @@ -6,7 +6,8 @@ export const useHeaderTitleStyles = createUseStyles(() => ({ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', - marginRight: formatSize(18) + marginTop: formatSize(4), + marginRight: formatSize(4) }, icons: { marginLeft: formatSize(18) diff --git a/src/components/header/header-button/header-button.styles.ts b/src/components/header/header-button/header-button.styles.ts index 0ad322395..530ea8062 100644 --- a/src/components/header/header-button/header-button.styles.ts +++ b/src/components/header/header-button/header-button.styles.ts @@ -4,6 +4,7 @@ import { formatSize } from 'src/styles/format-size'; export const HeaderButtonStyles = StyleSheet.create({ icon: { - marginHorizontal: formatSize(16) + //marginHorizontal: formatSize(16) + marginTop: formatSize(4) } }); diff --git a/src/components/header/header-progress/header-progress.styles.ts b/src/components/header/header-progress/header-progress.styles.ts index 646408f06..8b131e9aa 100644 --- a/src/components/header/header-progress/header-progress.styles.ts +++ b/src/components/header/header-progress/header-progress.styles.ts @@ -5,8 +5,8 @@ import { formatSize } from '../../../styles/format-size'; export const useHeaderProgressStyles = createUseStyles(({ colors, typography }) => ({ container: { - alignItems: 'center', - marginHorizontal: formatSize(16) + alignItems: 'center' + //marginHorizontal: formatSize(16) }, text: { ...typography.caption13Semibold, diff --git a/src/components/header/use-modal-options.util.tsx b/src/components/header/use-modal-options.util.tsx index 5f9141124..178aeb604 100644 --- a/src/components/header/use-modal-options.util.tsx +++ b/src/components/header/use-modal-options.util.tsx @@ -1,27 +1,28 @@ -import { StackNavigationOptions } from '@react-navigation/stack'; +import { NativeStackNavigationOptions } from '@react-navigation/native-stack'; import React from 'react'; import { isIOS } from '../../config/system'; -import { formatSize } from '../../styles/format-size'; +//import { formatSize } from '../../styles/format-size'; import { useColors } from '../../styles/use-colors'; import { HeaderCloseButton } from './header-close-button/header-close-button'; import { HeaderTitle } from './header-title/header-title'; -export const useModalOptions = (title: string, disableAndroidGestures = false): StackNavigationOptions => { +export const useModalOptions = (title: string, disableAndroidGestures = false): NativeStackNavigationOptions => { const colors = useColors(); return { headerTitleAlign: 'center', - headerStatusBarHeight: 0, + headerBackVisible: false, + //headerStatusBarHeight: 0, headerStyle: { - height: formatSize(60), - backgroundColor: colors.navigation, - borderBottomWidth: formatSize(0.5), - borderBottomColor: colors.lines, - shadowOpacity: 0 + //height: formatSize(60), + backgroundColor: colors.navigation + //borderBottomWidth: formatSize(0.5), + //borderBottomColor: colors.lines, + //shadowOpacity: 0 }, gestureEnabled: disableAndroidGestures ? isIOS : undefined, - gestureResponseDistance: isIOS ? undefined : 30, + //gestureResponseDistance: isIOS ? undefined : 30, headerLeft: () => null, headerTitle: () => , headerRight: () => diff --git a/src/components/header/use-navigation-set-options.hook.ts b/src/components/header/use-navigation-set-options.hook.ts index e14cd8b9b..762f2746c 100644 --- a/src/components/header/use-navigation-set-options.hook.ts +++ b/src/components/header/use-navigation-set-options.hook.ts @@ -1,9 +1,9 @@ -import { StackNavigationOptions } from '@react-navigation/stack'; +import { NativeStackNavigationOptions } from '@react-navigation/native-stack'; import { DependencyList, useEffect } from 'react'; import { useNavigation } from 'src/navigator/hooks/use-navigation.hook'; -export const useNavigationSetOptions = (options: Partial, deps: DependencyList) => { +export const useNavigationSetOptions = (options: Partial, deps: DependencyList) => { const { setOptions } = useNavigation(); useEffect(() => setOptions(options), deps); diff --git a/src/modals/manage-earn-opportunity-modal/details-card/stats-item/styles.ts b/src/modals/manage-earn-opportunity-modal/details-card/stats-item/styles.ts index b9b039143..141a4c1d4 100644 --- a/src/modals/manage-earn-opportunity-modal/details-card/stats-item/styles.ts +++ b/src/modals/manage-earn-opportunity-modal/details-card/stats-item/styles.ts @@ -8,7 +8,6 @@ export const useStatsItemStyles = createUseStylesMemoized(({ colors, typography title: { ...typography.caption11Regular, letterSpacing: formatSize(0.07), - textIndent: formatSize(1), marginBottom: formatSize(2), color: colors.gray1 }, diff --git a/src/navigator/hooks/use-stack-navigation-options.hook.ts b/src/navigator/hooks/use-stack-navigation-options.hook.ts index fe555ee5b..f91b04b44 100644 --- a/src/navigator/hooks/use-stack-navigation-options.hook.ts +++ b/src/navigator/hooks/use-stack-navigation-options.hook.ts @@ -1,17 +1,17 @@ -import { StackNavigationOptions, TransitionPresets } from '@react-navigation/stack'; +import { NativeStackNavigationOptions } from '@react-navigation/native-stack'; import { useMemo } from 'react'; -import { useColors } from '../../styles/use-colors'; +import { useColors } from 'src/styles/use-colors'; export const useStackNavigationOptions = () => { const colors = useColors(); - return useMemo( + return useMemo( () => ({ + headerBackVisible: false, presentation: 'modal', cardOverlayEnabled: true, gestureEnabled: true, - ...TransitionPresets.ModalPresentationIOS, cardStyle: { backgroundColor: colors.pageBG } diff --git a/src/navigator/hooks/use-stack-navigator-style-options.hook.ts b/src/navigator/hooks/use-stack-navigator-style-options.hook.ts index 4a7967605..39f56f311 100644 --- a/src/navigator/hooks/use-stack-navigator-style-options.hook.ts +++ b/src/navigator/hooks/use-stack-navigator-style-options.hook.ts @@ -1,20 +1,21 @@ -import { StackNavigationOptions } from '@react-navigation/stack'; +import { NativeStackNavigationOptions } from '@react-navigation/native-stack'; -import { formatSize } from 'src/styles/format-size'; -import { generateShadow } from 'src/styles/generate-shadow'; +//import { formatSize } from 'src/styles/format-size'; +//import { generateShadow } from 'src/styles/generate-shadow'; import { useColors } from 'src/styles/use-colors'; -export const useStackNavigatorStyleOptions = (): StackNavigationOptions => { +export const useStackNavigatorStyleOptions = (): NativeStackNavigationOptions => { const colors = useColors(); return { + headerBackVisible: false, headerStyle: { - ...generateShadow(1, colors.lines), - backgroundColor: colors.navigation, - borderBottomWidth: formatSize(0.5), - borderBottomColor: colors.lines + //...generateShadow(1, colors.lines), + backgroundColor: colors.navigation + //borderBottomWidth: formatSize(0.5), + //borderBottomColor: colors.lines }, - headerTitleStyle: { color: colors.black }, - cardStyle: { backgroundColor: colors.pageBG } + headerTitleStyle: { color: colors.black } + //cardStyle: { backgroundColor: colors.pageBG } }; }; diff --git a/src/navigator/main-stack.tsx b/src/navigator/main-stack.tsx index a630dc9cd..631b170d1 100644 --- a/src/navigator/main-stack.tsx +++ b/src/navigator/main-stack.tsx @@ -1,5 +1,5 @@ import { PortalProvider } from '@gorhom/portal'; -import { createStackNavigator } from '@react-navigation/stack'; +import { createNativeStackNavigator } from '@react-navigation/native-stack'; import React, { useEffect } from 'react'; import { useDispatch } from 'react-redux'; @@ -86,7 +86,7 @@ import { ScreensEnum, ScreensParamList } from './enums/screens.enum'; import { useStackNavigatorStyleOptions } from './hooks/use-stack-navigator-style-options.hook'; import { NavigationBar } from './navigation-bar/navigation-bar'; -const MainStack = createStackNavigator(); +const MainStack = createNativeStackNavigator(); export const MainStackScreen = () => { const dispatch = useDispatch(); @@ -181,12 +181,12 @@ export const MainStackScreen = () => { { {/** Swap stack **/} @@ -268,7 +268,7 @@ export const MainStackScreen = () => { component={SwapScreen} options={{ ...generateScreenOptions(, , false), - animationEnabled: false + animation: 'none' }} /> @@ -284,14 +284,14 @@ export const MainStackScreen = () => { {/** Settings stack **/} (); +const RootStack = createNativeStackNavigator(); export const RootStackScreen = () => { const { isLocked } = useAppLock(); diff --git a/src/screens/earn/opportunity-category-card/styles.ts b/src/screens/earn/opportunity-category-card/styles.ts index a189f8bff..8641f51a6 100644 --- a/src/screens/earn/opportunity-category-card/styles.ts +++ b/src/screens/earn/opportunity-category-card/styles.ts @@ -41,7 +41,6 @@ export const useOpportunityCategoryCardStyles = createUseStylesMemoized(({ color statsItemLabel: { ...typography.caption11Regular, letterSpacing: formatSize(0.07), - textIndent: formatSize(1), color: colors.gray1 }, statsItemValue: { diff --git a/yarn.lock b/yarn.lock index 73471ee40..5ee99674a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3243,58 +3243,57 @@ invariant "^2.2.4" nullthrows "^1.1.1" -"@react-navigation/bottom-tabs@^6.4.0": - version "6.4.0" - resolved "https://registry.yarnpkg.com/@react-navigation/bottom-tabs/-/bottom-tabs-6.4.0.tgz#63743874648f92adedf37186cb7cedcd47826ee9" - integrity sha512-90CapiXjiWudbCiki9e6fOr/CECQRguIxv5OD7IBfbAMGX5GGiJpX8aqiHAz2DxpAz31v4JZcUr945+lFhXBfA== +"@react-navigation/bottom-tabs@^6.5.11": + version "6.5.11" + resolved "https://registry.yarnpkg.com/@react-navigation/bottom-tabs/-/bottom-tabs-6.5.11.tgz#b6e67a3aa19e60ed9c1139fa0253586c479832d5" + integrity sha512-CBN/NOdxnMvmjw+AJQI1kltOYaClTZmGec5pQ3ZNTPX86ytbIOylDIITKMfTgHZcIEFQDymx1SHeS++PIL3Szw== dependencies: - "@react-navigation/elements" "^1.3.6" + "@react-navigation/elements" "^1.3.21" color "^4.2.3" warn-once "^0.1.0" -"@react-navigation/core@^6.4.0": - version "6.4.0" - resolved "https://registry.yarnpkg.com/@react-navigation/core/-/core-6.4.0.tgz#c44d33a8d8ef010a102c7f831fc8add772678509" - integrity sha512-tpc0Ak/DiHfU3LlYaRmIY7vI4sM/Ru0xCet6runLUh9aABf4wiLgxyFJ5BtoWq6xFF8ymYEA/KWtDhetQ24YiA== +"@react-navigation/core@^6.4.10": + version "6.4.10" + resolved "https://registry.yarnpkg.com/@react-navigation/core/-/core-6.4.10.tgz#0c52621968b35e3a75e189e823d3b9e3bad77aff" + integrity sha512-oYhqxETRHNHKsipm/BtGL0LI43Hs2VSFoWMbBdHK9OqgQPjTVUitslgLcPpo4zApCcmBWoOLX2qPxhsBda644A== dependencies: - "@react-navigation/routers" "^6.1.3" + "@react-navigation/routers" "^6.1.9" escape-string-regexp "^4.0.0" nanoid "^3.1.23" - query-string "^7.0.0" + query-string "^7.1.3" react-is "^16.13.0" - use-latest-callback "^0.1.5" + use-latest-callback "^0.1.7" -"@react-navigation/elements@^1.3.6": - version "1.3.6" - resolved "https://registry.yarnpkg.com/@react-navigation/elements/-/elements-1.3.6.tgz#fa700318528db93f05144b1be4b691b9c1dd1abe" - integrity sha512-pNJ8R9JMga6SXOw6wGVN0tjmE6vegwPmJBL45SEMX2fqTfAk2ykDnlJHodRpHpAgsv0DaI8qX76z3A+aqKSU0w== +"@react-navigation/elements@^1.3.21": + version "1.3.21" + resolved "https://registry.yarnpkg.com/@react-navigation/elements/-/elements-1.3.21.tgz#debac6becc6b6692da09ec30e705e476a780dfe1" + integrity sha512-eyS2C6McNR8ihUoYfc166O1D8VYVh9KIl0UQPI8/ZJVsStlfSTgeEEh+WXge6+7SFPnZ4ewzEJdSAHH+jzcEfg== -"@react-navigation/native@^6.0.13": - version "6.0.13" - resolved "https://registry.yarnpkg.com/@react-navigation/native/-/native-6.0.13.tgz#ec504120e193ea6a7f24ffa765a1338be5a3160a" - integrity sha512-CwaJcAGbhv3p3ECablxBkw8QBCGDWXqVRwQ4QbelajNW623m3sNTC9dOF6kjp8au6Rg9B5e0KmeuY0xWbPk79A== +"@react-navigation/native-stack@^6.9.16": + version "6.9.16" + resolved "https://registry.yarnpkg.com/@react-navigation/native-stack/-/native-stack-6.9.16.tgz#d3dfc1ebe51da34eff36d5475d7b33d982a59758" + integrity sha512-SrmBGr5YvRxDtdTacOkA/wvqwpt9kt+AsYpmt82hKMPKpu0v98WONedTXDzi6whhY3jeT2GZkwF8hyrJ+wDbTA== dependencies: - "@react-navigation/core" "^6.4.0" + "@react-navigation/elements" "^1.3.21" + warn-once "^0.1.0" + +"@react-navigation/native@^6.1.9": + version "6.1.9" + resolved "https://registry.yarnpkg.com/@react-navigation/native/-/native-6.1.9.tgz#8ef87095cd9c2ed094308c726157c7f6fc28796e" + integrity sha512-AMuJDpwXE7UlfyhIXaUCCynXmv69Kb8NzKgKJO7v0k0L+u6xUTbt6xvshmJ79vsvaFyaEH9Jg5FMzek5/S5qNw== + dependencies: + "@react-navigation/core" "^6.4.10" escape-string-regexp "^4.0.0" fast-deep-equal "^3.1.3" nanoid "^3.1.23" -"@react-navigation/routers@^6.1.3": - version "6.1.3" - resolved "https://registry.yarnpkg.com/@react-navigation/routers/-/routers-6.1.3.tgz#1df51959e9a67c44367462e8b929b7360a5d2555" - integrity sha512-idJotMEzHc3haWsCh7EvnnZMKxvaS4YF/x2UyFBkNFiEFUaEo/1ioQU6qqmVLspdEv4bI/dLm97hQo7qD8Yl7Q== +"@react-navigation/routers@^6.1.9": + version "6.1.9" + resolved "https://registry.yarnpkg.com/@react-navigation/routers/-/routers-6.1.9.tgz#73f5481a15a38e36592a0afa13c3c064b9f90bed" + integrity sha512-lTM8gSFHSfkJvQkxacGM6VJtBt61ip2XO54aNfswD+KMw6eeZ4oehl7m0me3CR9hnDE4+60iAZR8sAhvCiI3NA== dependencies: nanoid "^3.1.23" -"@react-navigation/stack@^6.3.2": - version "6.3.2" - resolved "https://registry.yarnpkg.com/@react-navigation/stack/-/stack-6.3.2.tgz#ba0a65e10e2b165185f20718046f25d8c9abb076" - integrity sha512-wb8koMp4OTrG5geOqEFPDatTyl8dsSyRBHN4h0wzgNT29V/JjkS3LYwkGLLfUmMfeLXFyIfEPILAjYLFmnk3dA== - dependencies: - "@react-navigation/elements" "^1.3.6" - color "^4.2.3" - warn-once "^0.1.0" - "@reduxjs/toolkit@^1.8.5": version "1.8.5" resolved "https://registry.yarnpkg.com/@reduxjs/toolkit/-/toolkit-1.8.5.tgz#c14bece03ee08be88467f22dc0ecf9cf875527cd" @@ -6023,7 +6022,7 @@ debug@^3.2.7: dependencies: ms "^2.1.1" -decode-uri-component@^0.2.0: +decode-uri-component@^0.2.0, decode-uri-component@^0.2.2: version "0.2.2" resolved "https://registry.yarnpkg.com/decode-uri-component/-/decode-uri-component-0.2.2.tgz#e69dbe25d37941171dd540e024c444cd5188e1e9" integrity sha512-FqUYQ+8o158GyGTrMFJms9qh3CqTKvAqgqsTnkLI8sKu0028orqBhxNMFkFen0zGyg6epACD32pjVk58ngIErQ== @@ -10231,12 +10230,12 @@ query-string@7.1.1: split-on-first "^1.0.0" strict-uri-encode "^2.0.0" -query-string@^7.0.0: - version "7.0.1" - resolved "https://registry.npmjs.org/query-string/-/query-string-7.0.1.tgz" - integrity sha512-uIw3iRvHnk9to1blJCG3BTc+Ro56CBowJXKmNNAm3RulvPBzWLRqKSiiDk+IplJhsydwtuNMHi8UGQFcCLVfkA== +query-string@^7.1.3: + version "7.1.3" + resolved "https://registry.yarnpkg.com/query-string/-/query-string-7.1.3.tgz#a1cf90e994abb113a325804a972d98276fe02328" + integrity sha512-hh2WYhq4fi8+b+/2Kg9CEge4fDPvHS534aOOvOZeQ3+Vf2mCFsaFBYj0i+iXcAq6I9Vzp5fjMFBlONvayDC1qg== dependencies: - decode-uri-component "^0.2.0" + decode-uri-component "^0.2.2" filter-obj "^1.1.0" split-on-first "^1.0.0" strict-uri-encode "^2.0.0" @@ -12240,10 +12239,10 @@ url@^0.11.0: punycode "1.3.2" querystring "0.2.0" -use-latest-callback@^0.1.5: - version "0.1.5" - resolved "https://registry.yarnpkg.com/use-latest-callback/-/use-latest-callback-0.1.5.tgz#a4a836c08fa72f6608730b5b8f4bbd9c57c04f51" - integrity sha512-HtHatS2U4/h32NlkhupDsPlrbiD27gSH5swBdtXbCAlc6pfOFzaj0FehW/FO12rx8j2Vy4/lJScCiJyM01E+bQ== +use-latest-callback@^0.1.7: + version "0.1.7" + resolved "https://registry.yarnpkg.com/use-latest-callback/-/use-latest-callback-0.1.7.tgz#f189fa4e58ee18c7a2d9de53f92210e118d1b14f" + integrity sha512-Hlrl0lskgZZpo2vIpZ4rA7qA/rAGn2PcDvDH1M47AogqMPB0qlGEdsa66AVkIUiEEDpfxA9/N6hY6MqtaNoqWA== use-sync-external-store@^1.0.0: version "1.2.0" From 921b319f1150829bc3811934897e14ba7ceb0434 Mon Sep 17 00:00:00 2001 From: lendihop Date: Thu, 26 Oct 2023 14:06:55 +0200 Subject: [PATCH 02/11] logs rm --- .../header/header-button/header-button.styles.ts | 1 - .../header/header-progress/header-progress.styles.ts | 1 - src/components/header/use-modal-options.util.tsx | 12 +++--------- .../hooks/use-stack-navigator-style-options.hook.ts | 6 ------ 4 files changed, 3 insertions(+), 17 deletions(-) diff --git a/src/components/header/header-button/header-button.styles.ts b/src/components/header/header-button/header-button.styles.ts index 530ea8062..45957811f 100644 --- a/src/components/header/header-button/header-button.styles.ts +++ b/src/components/header/header-button/header-button.styles.ts @@ -4,7 +4,6 @@ import { formatSize } from 'src/styles/format-size'; export const HeaderButtonStyles = StyleSheet.create({ icon: { - //marginHorizontal: formatSize(16) marginTop: formatSize(4) } }); diff --git a/src/components/header/header-progress/header-progress.styles.ts b/src/components/header/header-progress/header-progress.styles.ts index 8b131e9aa..4f98f0c89 100644 --- a/src/components/header/header-progress/header-progress.styles.ts +++ b/src/components/header/header-progress/header-progress.styles.ts @@ -6,7 +6,6 @@ import { formatSize } from '../../../styles/format-size'; export const useHeaderProgressStyles = createUseStyles(({ colors, typography }) => ({ container: { alignItems: 'center' - //marginHorizontal: formatSize(16) }, text: { ...typography.caption13Semibold, diff --git a/src/components/header/use-modal-options.util.tsx b/src/components/header/use-modal-options.util.tsx index 178aeb604..74b566952 100644 --- a/src/components/header/use-modal-options.util.tsx +++ b/src/components/header/use-modal-options.util.tsx @@ -1,9 +1,9 @@ import { NativeStackNavigationOptions } from '@react-navigation/native-stack'; import React from 'react'; -import { isIOS } from '../../config/system'; -//import { formatSize } from '../../styles/format-size'; -import { useColors } from '../../styles/use-colors'; +import { isIOS } from 'src/config/system'; +import { useColors } from 'src/styles/use-colors'; + import { HeaderCloseButton } from './header-close-button/header-close-button'; import { HeaderTitle } from './header-title/header-title'; @@ -13,16 +13,10 @@ export const useModalOptions = (title: string, disableAndroidGestures = false): return { headerTitleAlign: 'center', headerBackVisible: false, - //headerStatusBarHeight: 0, headerStyle: { - //height: formatSize(60), backgroundColor: colors.navigation - //borderBottomWidth: formatSize(0.5), - //borderBottomColor: colors.lines, - //shadowOpacity: 0 }, gestureEnabled: disableAndroidGestures ? isIOS : undefined, - //gestureResponseDistance: isIOS ? undefined : 30, headerLeft: () => null, headerTitle: () => , headerRight: () => diff --git a/src/navigator/hooks/use-stack-navigator-style-options.hook.ts b/src/navigator/hooks/use-stack-navigator-style-options.hook.ts index 39f56f311..1ffbda1c3 100644 --- a/src/navigator/hooks/use-stack-navigator-style-options.hook.ts +++ b/src/navigator/hooks/use-stack-navigator-style-options.hook.ts @@ -1,7 +1,5 @@ import { NativeStackNavigationOptions } from '@react-navigation/native-stack'; -//import { formatSize } from 'src/styles/format-size'; -//import { generateShadow } from 'src/styles/generate-shadow'; import { useColors } from 'src/styles/use-colors'; export const useStackNavigatorStyleOptions = (): NativeStackNavigationOptions => { @@ -10,12 +8,8 @@ export const useStackNavigatorStyleOptions = (): NativeStackNavigationOptions => return { headerBackVisible: false, headerStyle: { - //...generateShadow(1, colors.lines), backgroundColor: colors.navigation - //borderBottomWidth: formatSize(0.5), - //borderBottomColor: colors.lines }, headerTitleStyle: { color: colors.black } - //cardStyle: { backgroundColor: colors.pageBG } }; }; From f0fd27e803a3942935537cd83f14634f9d621640 Mon Sep 17 00:00:00 2001 From: lendihop Date: Thu, 26 Oct 2023 14:17:15 +0200 Subject: [PATCH 03/11] ts fix --- src/screens/wallet/token-list/token-list.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/screens/wallet/token-list/token-list.tsx b/src/screens/wallet/token-list/token-list.tsx index fee30c39c..cbfbfdf6f 100644 --- a/src/screens/wallet/token-list/token-list.tsx +++ b/src/screens/wallet/token-list/token-list.tsx @@ -26,6 +26,7 @@ import { loadPartnersPromoActions } from 'src/store/partners-promotion/partners- import { setZeroBalancesShown } from 'src/store/settings/settings-actions'; import { useHideZeroBalancesSelector, useIsEnabledAdsBannerSelector } from 'src/store/settings/settings-selectors'; import { + useSelectedAccountSelector, useSelectedAccountTezosTokenSelector, useSelectedAccountTkeyTokenSelector, useVisibleTokensListSelector @@ -77,6 +78,8 @@ export const TokensList: FC = () => { const isEnabledAdsBanner = useIsEnabledAdsBannerSelector(); const partnersPromoShown = useIsPartnersPromoShown(); + const { publicKeyHash } = useSelectedAccountSelector(); + const handleHideZeroBalanceChange = useCallback((value: boolean) => { dispatch(setZeroBalancesShown(value)); trackEvent(WalletSelectors.hideZeroBalancesCheckbox, AnalyticsEventCategory.ButtonPress); From f08d327f45bb1b5995dca5c01fd7ca30fdde295c Mon Sep 17 00:00:00 2001 From: lendihop Date: Thu, 26 Oct 2023 16:49:52 +0200 Subject: [PATCH 04/11] rm bottom tabs, rm header border bottom on tokens screens --- package.json | 1 - src/navigator/main-stack.tsx | 10 ++++++++-- yarn.lock | 9 --------- 3 files changed, 8 insertions(+), 12 deletions(-) diff --git a/package.json b/package.json index dab606ab6..ea85ff6e5 100644 --- a/package.json +++ b/package.json @@ -44,7 +44,6 @@ "@react-native-firebase/app-check": "^17.5.0", "@react-native-firebase/messaging": "^17.5.0", "@react-native-google-signin/google-signin": "9.0.2", - "@react-navigation/bottom-tabs": "^6.5.11", "@react-navigation/native": "^6.1.9", "@react-navigation/native-stack": "^6.9.16", "@reduxjs/toolkit": "^1.8.5", diff --git a/src/navigator/main-stack.tsx b/src/navigator/main-stack.tsx index 631b170d1..58e978b7a 100644 --- a/src/navigator/main-stack.tsx +++ b/src/navigator/main-stack.tsx @@ -191,12 +191,18 @@ export const MainStackScreen = () => { )} + options={{ + ...generateScreenOptions(), + headerShadowVisible: false + }} /> )} + options={{ + ...generateScreenOptions(), + headerShadowVisible: false + }} /> Date: Tue, 31 Oct 2023 14:25:31 +0100 Subject: [PATCH 05/11] freeze enabled, memoization, refactor --- ios/Podfile.lock | 6 +- package.json | 2 +- src/app/app.tsx | 3 +- src/components/header-card/header-card.tsx | 6 +- .../hooks/use-navigation-bar-button.ts | 45 ++++++++++++ .../hooks/use-navigation-bar.ts | 50 +++++++++++++ .../navigation-bar-button.interface.ts | 19 +++++ .../navigation-bar/navigation-bar.tsx | 16 +++-- .../side-bar-button/side-bar-button.styles.ts | 8 +-- .../side-bar-button/side-bar-button.tsx | 71 ++++--------------- .../side-bar/side-bar.styles.ts | 12 ++-- .../navigation-bar/side-bar/side-bar.tsx | 27 ++----- .../tab-bar-button/tab-bar-button.styles.ts | 6 +- .../tab-bar/tab-bar-button/tab-bar-button.tsx | 71 ++++--------------- .../navigation-bar/tab-bar/tab-bar.styles.ts | 6 +- .../navigation-bar/tab-bar/tab-bar.tsx | 45 ++---------- .../collectibles-home/collectibles-home.tsx | 6 +- src/screens/d-apps/d-apps.tsx | 6 +- src/screens/market/market.tsx | 6 +- src/screens/market/tezos-info/tezos-info.tsx | 6 +- .../top-coins-table/top-tokens-table.tsx | 6 +- src/screens/swap/swap-form/swap-form.tsx | 6 +- src/screens/swap/swap.tsx | 12 ++-- src/screens/wallet/token-list/token-list.tsx | 6 +- src/screens/wallet/wallet.tsx | 6 +- yarn.lock | 8 +-- 26 files changed, 218 insertions(+), 243 deletions(-) create mode 100644 src/navigator/navigation-bar/hooks/use-navigation-bar-button.ts create mode 100644 src/navigator/navigation-bar/hooks/use-navigation-bar.ts create mode 100644 src/navigator/navigation-bar/interfaces/navigation-bar-button.interface.ts diff --git a/ios/Podfile.lock b/ios/Podfile.lock index f33df037c..a131cfcdf 100644 --- a/ios/Podfile.lock +++ b/ios/Podfile.lock @@ -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): @@ -1193,7 +1193,7 @@ SPEC CHECKSUMS: RNQuickAction: 6d404a869dc872cde841ad3147416a670d13fa93 RNReactNativeHapticFeedback: 1e3efeca9628ff9876ee7cdd9edec1b336913f8c RNReanimated: 9f7068e43b9358a46a688d94a5a3adb258139457 - RNScreens: 34cc502acf1b916c582c60003dc3089fa01dc66d + RNScreens: 3c2d122f5e08c192e254c510b212306da97d2581 RNScrypt: 95fdef077b482e9fdf8a761120cb69d129ef4016 RNSentry: 0a1daa8ee81e2776f977ae8c66e67c8d85587828 RNSha256: 80bea5b2e7005f813f6438cb41e573b3d531146c diff --git a/package.json b/package.json index ea85ff6e5..c6d5e05a5 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/app/app.tsx b/src/app/app.tsx index ba45c9b4c..b7c91fc4a 100644 --- a/src/app/app.tsx +++ b/src/app/app.tsx @@ -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'; @@ -20,6 +20,7 @@ import { AppStyles } from './app.styles'; initSentry(); enableScreens(); +enableFreeze(); LogBox.ignoreAllLogs(); export const App = () => ( diff --git a/src/components/header-card/header-card.tsx b/src/components/header-card/header-card.tsx index f4b110ccc..4ef86d7b7 100644 --- a/src/components/header-card/header-card.tsx +++ b/src/components/header-card/header-card.tsx @@ -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'; @@ -9,7 +9,7 @@ interface Props { style?: StyleProp; } -export const HeaderCard: FC = ({ hasInsetTop = false, style, children }) => { +export const HeaderCard: FC = memo(({ hasInsetTop = false, style, children }) => { const styles = useHeaderCardStyles(); return ( @@ -18,4 +18,4 @@ export const HeaderCard: FC = ({ hasInsetTop = false, style, children }) {children} ); -}; +}); diff --git a/src/navigator/navigation-bar/hooks/use-navigation-bar-button.ts b/src/navigator/navigation-bar/hooks/use-navigation-bar-button.ts new file mode 100644 index 000000000..65c698e33 --- /dev/null +++ b/src/navigator/navigation-bar/hooks/use-navigation-bar-button.ts @@ -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) => { + 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 + }; +}; diff --git a/src/navigator/navigation-bar/hooks/use-navigation-bar.ts b/src/navigator/navigation-bar/hooks/use-navigation-bar.ts new file mode 100644 index 000000000..6ce046b3e --- /dev/null +++ b/src/navigator/navigation-bar/hooks/use-navigation-bar.ts @@ -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; +}; diff --git a/src/navigator/navigation-bar/interfaces/navigation-bar-button.interface.ts b/src/navigator/navigation-bar/interfaces/navigation-bar-button.interface.ts new file mode 100644 index 000000000..910f0a568 --- /dev/null +++ b/src/navigator/navigation-bar/interfaces/navigation-bar-button.interface.ts @@ -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; +} diff --git a/src/navigator/navigation-bar/navigation-bar.tsx b/src/navigator/navigation-bar/navigation-bar.tsx index 63a65465f..bfa1a6022 100644 --- a/src/navigator/navigation-bar/navigation-bar.tsx +++ b/src/navigator/navigation-bar/navigation-bar.tsx @@ -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'; @@ -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()), []); @@ -44,4 +48,4 @@ export const NavigationBar: FC = ({ children }) => { {isShowNavigationBar && !isShowTabletNavigation && } ); -}; +}); diff --git a/src/navigator/navigation-bar/side-bar/side-bar-button/side-bar-button.styles.ts b/src/navigator/navigation-bar/side-bar/side-bar-button/side-bar-button.styles.ts index 466ead6ed..bf53a26c5 100644 --- a/src/navigator/navigation-bar/side-bar/side-bar-button/side-bar-button.styles.ts +++ b/src/navigator/navigation-bar/side-bar/side-bar-button/side-bar-button.styles.ts @@ -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', diff --git a/src/navigator/navigation-bar/side-bar/side-bar-button/side-bar-button.tsx b/src/navigator/navigation-bar/side-bar/side-bar-button/side-bar-button.tsx index 5388813f4..350ec8540 100644 --- a/src/navigator/navigation-bar/side-bar/side-bar-button/side-bar-button.tsx +++ b/src/navigator/navigation-bar/side-bar/side-bar-button/side-bar-button.tsx @@ -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>(props => { + const { label, iconName, focused, disabled = false, showNotificationDot = false } = props; -export const SideBarButton: FC = ({ - 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 ( = ({ {label} ); -}; +}); diff --git a/src/navigator/navigation-bar/side-bar/side-bar.styles.ts b/src/navigator/navigation-bar/side-bar/side-bar.styles.ts index 7227ba2b7..25bc0dfd0 100644 --- a/src/navigator/navigation-bar/side-bar/side-bar.styles.ts +++ b/src/navigator/navigation-bar/side-bar/side-bar.styles.ts @@ -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, diff --git a/src/navigator/navigation-bar/side-bar/side-bar.tsx b/src/navigator/navigation-bar/side-bar/side-bar.tsx index e713397b8..aa9141e47 100644 --- a/src/navigator/navigation-bar/side-bar/side-bar.tsx +++ b/src/navigator/navigation-bar/side-bar/side-bar.tsx @@ -1,4 +1,4 @@ -import React, { FC, useCallback } from 'react'; +import React, { memo } from 'react'; import { ScrollView, View } from 'react-native'; import { Divider } from 'src/components/divider/divider'; @@ -6,7 +6,6 @@ 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, @@ -15,12 +14,9 @@ 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'; @@ -28,23 +24,10 @@ interface Props { currentRouteName: ScreensEnum; } -export const SideBar: FC = ({ currentRouteName }) => { +export const SideBar = memo(({ 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 ( @@ -100,4 +83,4 @@ export const SideBar: FC = ({ currentRouteName }) => { ); -}; +}); diff --git a/src/navigator/navigation-bar/tab-bar/tab-bar-button/tab-bar-button.styles.ts b/src/navigator/navigation-bar/tab-bar/tab-bar-button/tab-bar-button.styles.ts index 7d6dc107d..c7e1ed480 100644 --- a/src/navigator/navigation-bar/tab-bar/tab-bar-button/tab-bar-button.styles.ts +++ b/src/navigator/navigation-bar/tab-bar/tab-bar-button/tab-bar-button.styles.ts @@ -1,7 +1,7 @@ -import { createUseStyles } from '../../../../styles/create-use-styles'; -import { formatSize } from '../../../../styles/format-size'; +import { createUseStylesMemoized } from 'src/styles/create-use-styles'; +import { formatSize } from 'src/styles/format-size'; -export const useTabBarButtonStyles = createUseStyles(({ typography }) => ({ +export const useTabBarButtonStyles = createUseStylesMemoized(({ typography }) => ({ container: { flexGrow: 1, justifyContent: 'center', diff --git a/src/navigator/navigation-bar/tab-bar/tab-bar-button/tab-bar-button.tsx b/src/navigator/navigation-bar/tab-bar/tab-bar-button/tab-bar-button.tsx index a123158c7..87ed1d2e8 100644 --- a/src/navigator/navigation-bar/tab-bar/tab-bar-button/tab-bar-button.tsx +++ b/src/navigator/navigation-bar/tab-bar/tab-bar-button/tab-bar-button.tsx @@ -1,67 +1,20 @@ -import React, { FC, useMemo } from 'react'; +import React, { memo } from 'react'; import { Text, TouchableOpacity, View } from 'react-native'; -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 { 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 { useTabBarButtonStyles } from './tab-bar-button.styles'; -interface Props { - 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; -} +export const TabBarButton = memo(props => { + const { label, iconName, iconWidth, disabled = false, showNotificationDot = false } = props; -export const TabBarButton: FC = ({ - label, - iconName, - iconWidth, - routeName, - focused, - disabled = false, - showNotificationDot = false, - swapScreenParams, - disabledOnPress = emptyFn -}) => { - const colors = useColors(); const styles = useTabBarButtonStyles(); - 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 ( = ({ {label} ); -}; +}); diff --git a/src/navigator/navigation-bar/tab-bar/tab-bar.styles.ts b/src/navigator/navigation-bar/tab-bar/tab-bar.styles.ts index 4fcb788d5..c63eebde0 100644 --- a/src/navigator/navigation-bar/tab-bar/tab-bar.styles.ts +++ b/src/navigator/navigation-bar/tab-bar/tab-bar.styles.ts @@ -1,7 +1,7 @@ -import { createUseStyles } from '../../../styles/create-use-styles'; -import { formatSize } from '../../../styles/format-size'; +import { createUseStylesMemoized } from 'src/styles/create-use-styles'; +import { formatSize } from 'src/styles/format-size'; -export const useTabBarStyles = createUseStyles(({ colors }) => ({ +export const useTabBarStyles = createUseStylesMemoized(({ colors }) => ({ container: { backgroundColor: colors.navigation }, diff --git a/src/navigator/navigation-bar/tab-bar/tab-bar.tsx b/src/navigator/navigation-bar/tab-bar/tab-bar.tsx index b896910a9..31ee8f3ce 100644 --- a/src/navigator/navigation-bar/tab-bar/tab-bar.tsx +++ b/src/navigator/navigation-bar/tab-bar/tab-bar.tsx @@ -1,10 +1,9 @@ -import React, { FC, useCallback } from 'react'; +import React, { memo } from 'react'; import { View } from 'react-native'; import { IconNameEnum } from 'src/components/icon/icon-name.enum'; import { InsetSubstitute } from 'src/components/inset-substitute/inset-substitute'; import { isAndroid } from 'src/config/system'; -import { useNetworkInfo } from 'src/hooks/use-network-info.hook'; import { dAppsStackScreens, marketStackScreens, @@ -13,41 +12,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 { TokenInterface } from 'src/token/interfaces/token.interface'; -import { isDefined } from 'src/utils/is-defined'; +import { useNavigationBar } from '../hooks/use-navigation-bar'; import { TabBarButton } from './tab-bar-button/tab-bar-button'; import { useTabBarStyles } from './tab-bar.styles'; -type RouteType = { params?: { token: TokenInterface } }; -export type RouteParams = { name: string } & RouteType; - -export const NOT_AVAILABLE_MESSAGE = 'Not available on this RPC node'; - interface Props { currentRouteName: ScreensEnum; } -export const TabBar: FC = ({ currentRouteName }) => { +export const TabBar = memo(({ currentRouteName }) => { const styles = useTabBarStyles(); - 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 ( @@ -100,17 +78,4 @@ export const TabBar: FC = ({ currentRouteName }) => { ); -}; - -export 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; -}; +}); diff --git a/src/screens/collectibles-home/collectibles-home.tsx b/src/screens/collectibles-home/collectibles-home.tsx index 912c46895..0bc8ba5db 100644 --- a/src/screens/collectibles-home/collectibles-home.tsx +++ b/src/screens/collectibles-home/collectibles-home.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { memo } from 'react'; import { Text, TouchableOpacity, View } from 'react-native'; import { HeaderCard } from 'src/components/header-card/header-card'; @@ -13,7 +13,7 @@ import { usePageAnalytic } from 'src/utils/analytics/use-analytics.hook'; import { useCollectiblesHomeStyles } from './collectibles-home.styles'; import { CollectiblesList } from './collectibles-list/collectibles-list'; -export const CollectiblesHome = () => { +export const CollectiblesHome = memo(() => { const styles = useCollectiblesHomeStyles(); const { navigate } = useNavigation(); @@ -35,4 +35,4 @@ export const CollectiblesHome = () => { ); -}; +}); diff --git a/src/screens/d-apps/d-apps.tsx b/src/screens/d-apps/d-apps.tsx index 96ed2de88..481a2aea6 100644 --- a/src/screens/d-apps/d-apps.tsx +++ b/src/screens/d-apps/d-apps.tsx @@ -1,7 +1,7 @@ import { FlashList, ListRenderItem } from '@shopify/flash-list'; import { BigNumber } from 'bignumber.js'; import { chunk } from 'lodash-es'; -import React, { useCallback, useEffect, useMemo, useState } from 'react'; +import React, { memo, useCallback, useEffect, useMemo, useState } from 'react'; import { Text, useWindowDimensions, View } from 'react-native'; import { isTablet } from 'react-native-device-info'; import { useDispatch } from 'react-redux'; @@ -44,7 +44,7 @@ const FLOORED_ITEM_HEIGHT = Math.floor(formatSize(24) + formatSize(32) + formatS const keyExtractor = (item: CustomDAppInfo[]) => item.map(dapp => dapp.name).join('/'); const ListEmptyComponent = ; -export const DApps = () => { +export const DApps = memo(() => { const dispatch = useDispatch(); const { navigate } = useNavigation(); @@ -158,4 +158,4 @@ export const DApps = () => { /> ); -}; +}); diff --git a/src/screens/market/market.tsx b/src/screens/market/market.tsx index 88251c6b5..6022fdf57 100644 --- a/src/screens/market/market.tsx +++ b/src/screens/market/market.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { memo } from 'react'; import { useDispatch } from 'react-redux'; import { HeaderCard } from 'src/components/header-card/header-card'; @@ -12,7 +12,7 @@ import { usePageAnalytic } from 'src/utils/analytics/use-analytics.hook'; import { TezosInfo } from './tezos-info/tezos-info'; import { TopTokensTable } from './top-coins-table/top-tokens-table'; -export const Market = () => { +export const Market = memo(() => { const dispatch = useDispatch(); useAuthorisedInterval(() => dispatch(loadMarketTokensSlugsActions.submit()), MARKET_SYNC_INTERVAL); @@ -29,4 +29,4 @@ export const Market = () => { ); -}; +}); diff --git a/src/screens/market/tezos-info/tezos-info.tsx b/src/screens/market/tezos-info/tezos-info.tsx index 082f0aa17..719f4881a 100644 --- a/src/screens/market/tezos-info/tezos-info.tsx +++ b/src/screens/market/tezos-info/tezos-info.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { memo } from 'react'; import { View, Text } from 'react-native'; import { IconNameEnum } from 'src/components/icon/icon-name.enum'; @@ -16,7 +16,7 @@ import { MarketSelectors } from '../market.selectors'; import { circulatingSupplyAlert, marketCapAlert, volumeAlert } from './alerts'; import { useTezosInfoStyles } from './tezos-info.styles'; -export const TezosInfo = () => { +export const TezosInfo = memo(() => { const styles = useTezosInfoStyles(); const tezosMetadata = useTokenMetadataSelector(TEZ_TOKEN_SLUG); const marketTezos = useTezosMarketTokenSelector(); @@ -105,4 +105,4 @@ export const TezosInfo = () => { ); -}; +}); diff --git a/src/screens/market/top-coins-table/top-tokens-table.tsx b/src/screens/market/top-coins-table/top-tokens-table.tsx index d67054f0b..65415e0e1 100644 --- a/src/screens/market/top-coins-table/top-tokens-table.tsx +++ b/src/screens/market/top-coins-table/top-tokens-table.tsx @@ -1,4 +1,4 @@ -import React, { useRef, useState } from 'react'; +import React, { memo, useRef, useState } from 'react'; import { ListRenderItem, RefreshControl, Text, View } from 'react-native'; import { SwipeListView } from 'react-native-swipe-list-view'; @@ -18,7 +18,7 @@ import { useTopTokensTableStyles } from './top-tokens-table.styles'; const renderItem: ListRenderItem = ({ item }) => ; const keyExtractor = (item: MarketToken) => item.id; -export const TopTokensTable = () => { +export const TopTokensTable = memo(() => { const styles = useTopTokensTableStyles(); const { filteredTokensList, @@ -91,4 +91,4 @@ export const TopTokensTable = () => { ); -}; +}); diff --git a/src/screens/swap/swap-form/swap-form.tsx b/src/screens/swap/swap-form/swap-form.tsx index ee5172943..42def0624 100644 --- a/src/screens/swap/swap-form/swap-form.tsx +++ b/src/screens/swap/swap-form/swap-form.tsx @@ -2,7 +2,7 @@ import { OpKind } from '@taquito/rpc'; import { ParamsWithKind, TransferParams } from '@taquito/taquito'; import { BigNumber } from 'bignumber.js'; import { FormikProvider, isEmptyArray, useFormik } from 'formik'; -import React, { FC, useCallback, useEffect, useMemo, useRef } from 'react'; +import React, { memo, useCallback, useEffect, useMemo, useRef } from 'react'; import { View } from 'react-native'; import { useDispatch } from 'react-redux'; @@ -72,7 +72,7 @@ interface SwapFormProps { outputToken?: TokenInterface; } -export const SwapForm: FC = ({ inputToken, outputToken }) => { +export const SwapForm = memo(({ inputToken, outputToken }) => { const dispatch = useDispatch(); const getSwapParams = useSwap(); @@ -425,4 +425,4 @@ export const SwapForm: FC = ({ inputToken, outputToken }) => { ); -}; +}); diff --git a/src/screens/swap/swap.tsx b/src/screens/swap/swap.tsx index 1ad1d7340..30846b43e 100644 --- a/src/screens/swap/swap.tsx +++ b/src/screens/swap/swap.tsx @@ -1,15 +1,15 @@ import { RouteProp, useRoute } from '@react-navigation/native'; -import React, { FC, useEffect } from 'react'; +import React, { memo, useEffect } from 'react'; import { useDispatch } from 'react-redux'; +import { ScreensEnum, ScreensParamList } from 'src/navigator/enums/screens.enum'; import { loadSwapDexesAction, loadSwapTokensAction, resetSwapParamsAction } from 'src/store/swap/swap-actions'; +import { usePageAnalytic } from 'src/utils/analytics/use-analytics.hook'; +import { isDefined } from 'src/utils/is-defined'; -import { ScreensEnum, ScreensParamList } from '../../navigator/enums/screens.enum'; -import { usePageAnalytic } from '../../utils/analytics/use-analytics.hook'; -import { isDefined } from '../../utils/is-defined'; import { SwapForm } from './swap-form/swap-form'; -export const SwapScreen: FC = () => { +export const SwapScreen = memo(() => { const dispatch = useDispatch(); usePageAnalytic(ScreensEnum.SwapScreen); @@ -28,4 +28,4 @@ export const SwapScreen: FC = () => { outputToken={isDefined(params) ? params.outputToken : undefined} /> ); -}; +}); diff --git a/src/screens/wallet/token-list/token-list.tsx b/src/screens/wallet/token-list/token-list.tsx index cbfbfdf6f..0ebc29cc6 100644 --- a/src/screens/wallet/token-list/token-list.tsx +++ b/src/screens/wallet/token-list/token-list.tsx @@ -1,5 +1,5 @@ import { FlashList, ListRenderItem } from '@shopify/flash-list'; -import React, { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react'; +import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'; import { LayoutChangeEvent, Text, View } from 'react-native'; import { useDispatch } from 'react-redux'; @@ -56,7 +56,7 @@ const FLOORED_ITEM_HEIGHT = Math.floor(ITEM_HEIGHT); const keyExtractor = (item: ListItem) => (item === AD_PLACEHOLDER ? item : getTokenSlug(item)); const getItemType = (item: ListItem) => (typeof item === 'string' ? 'promotion' : 'row'); -export const TokensList: FC = () => { +export const TokensList = memo(() => { const dispatch = useDispatch(); const { trackEvent } = useAnalytics(); const { navigate, addListener: addNavigationListener, removeListener: removeNavigationListener } = useNavigation(); @@ -224,7 +224,7 @@ export const TokensList: FC = () => { ); -}; +}); const addPlaceholdersForAndroid = (listData: ListItem[], screenFillingItemsCount: number) => isAndroid && screenFillingItemsCount > listData.length diff --git a/src/screens/wallet/wallet.tsx b/src/screens/wallet/wallet.tsx index 8cf9ba334..db87d3101 100644 --- a/src/screens/wallet/wallet.tsx +++ b/src/screens/wallet/wallet.tsx @@ -1,5 +1,5 @@ import { useFocusEffect } from '@react-navigation/native'; -import React, { useCallback, useEffect } from 'react'; +import React, { memo, useCallback, useEffect } from 'react'; import { View } from 'react-native'; import { useDispatch } from 'react-redux'; @@ -46,7 +46,7 @@ import { TokensList } from './token-list/token-list'; import { WalletSelectors } from './wallet.selectors'; import { WalletStyles } from './wallet.styles'; -export const Wallet = () => { +export const Wallet = memo(() => { const dispatch = useDispatch(); const { pageEvent } = useAnalytics(); const { navigate } = useNavigation(); @@ -146,4 +146,4 @@ export const Wallet = () => { ); -}; +}); diff --git a/yarn.lock b/yarn.lock index 9db043876..4ebfd93ce 100644 --- a/yarn.lock +++ b/yarn.lock @@ -10558,10 +10558,10 @@ react-native-safe-area-context@^4.4.1: resolved "https://registry.yarnpkg.com/react-native-safe-area-context/-/react-native-safe-area-context-4.4.1.tgz#239c60b8a9a80eac70a38a822b04c0f1d15ffc01" integrity sha512-N9XTjiuD73ZpVlejHrUWIFZc+6Z14co1K/p1IFMkImU7+avD69F3y+lhkqA2hN/+vljdZrBSiOwXPkuo43nFQA== -react-native-screens@^3.18.2: - version "3.18.2" - resolved "https://registry.yarnpkg.com/react-native-screens/-/react-native-screens-3.18.2.tgz#d7ab2d145258d3db9fa630fa5379dc4474117866" - integrity sha512-ANUEuvMUlsYJ1QKukEhzhfrvOUO9BVH9Nzg+6eWxpn3cfD/O83yPBOF8Mx6x5H/2+sMy+VS5x/chWOOo/U7QJw== +react-native-screens@^3.27.0: + version "3.27.0" + resolved "https://registry.yarnpkg.com/react-native-screens/-/react-native-screens-3.27.0.tgz#2ac39f78dee27df97d3b6fb11ebf8e5751aa986a" + integrity sha512-FzSUygZ7yLQyhDJZsl7wU68LwRpVtVdqOPWribmEU3Tf26FohFGGcfJx1D8lf2V2Teb8tI+IaLnXCKbyh2xffA== dependencies: react-freeze "^1.0.0" warn-once "^0.1.0" From 674533f0cf83016e88a07c552bab6add362f5cad Mon Sep 17 00:00:00 2001 From: lendihop Date: Tue, 31 Oct 2023 14:29:07 +0100 Subject: [PATCH 06/11] rm export --- src/navigator/navigation-bar/hooks/use-navigation-bar.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/navigator/navigation-bar/hooks/use-navigation-bar.ts b/src/navigator/navigation-bar/hooks/use-navigation-bar.ts index 6ce046b3e..f63ba7662 100644 --- a/src/navigator/navigation-bar/hooks/use-navigation-bar.ts +++ b/src/navigator/navigation-bar/hooks/use-navigation-bar.ts @@ -10,7 +10,7 @@ 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; +type RouteParams = { name: string } & RouteType; export const useNavigationBar = (currentRouteName: ScreensEnum) => { const { isDcpNode } = useNetworkInfo(); From 6b17be56ca2932c5f7345898deaf64ca66d5d6d2 Mon Sep 17 00:00:00 2001 From: lendihop Date: Tue, 31 Oct 2023 16:56:52 +0100 Subject: [PATCH 07/11] interval loading moved to main stack --- src/config/fixed-times.ts | 4 ++++ src/navigator/main-stack.tsx | 30 ++++++++++++++++++------ src/screens/d-apps/d-apps.tsx | 9 +------ src/screens/market/market.tsx | 11 --------- src/screens/swap/swap-form/swap-form.tsx | 19 ++++++++++----- src/screens/swap/swap.tsx | 16 +++---------- 6 files changed, 44 insertions(+), 45 deletions(-) diff --git a/src/config/fixed-times.ts b/src/config/fixed-times.ts index 879f33d1a..87877a722 100644 --- a/src/config/fixed-times.ts +++ b/src/config/fixed-times.ts @@ -6,6 +6,8 @@ const METADATA_SYNC_INTERVAL = 4 * BLOCK_DURATION; export const TOKENS_SYNC_INTERVAL = METADATA_SYNC_INTERVAL; +export const SWAP_SYNC_INTERVAL = METADATA_SYNC_INTERVAL; + export const BALANCES_SYNC_INTERVAL = BLOCK_DURATION; export const MARKET_SYNC_INTERVAL = 4 * BLOCK_DURATION; @@ -22,4 +24,6 @@ export const RATES_SYNC_INTERVAL = LONG_INTERVAL; export const NOTIFICATIONS_SYNC_INTERVAL = LONG_INTERVAL; +export const DAPPS_SYNC_INTERVAL = LONG_INTERVAL; + export const APR_REFRESH_INTERVAL = 30 * ONE_MINUTE; diff --git a/src/navigator/main-stack.tsx b/src/navigator/main-stack.tsx index 58e978b7a..7e70e76ad 100644 --- a/src/navigator/main-stack.tsx +++ b/src/navigator/main-stack.tsx @@ -16,7 +16,10 @@ import { RATES_SYNC_INTERVAL, SELECTED_BAKER_SYNC_INTERVAL, NOTIFICATIONS_SYNC_INTERVAL, - APR_REFRESH_INTERVAL + APR_REFRESH_INTERVAL, + MARKET_SYNC_INTERVAL, + SWAP_SYNC_INTERVAL, + DAPPS_SYNC_INTERVAL } from 'src/config/fixed-times'; import { emptyFn } from 'src/config/general'; import { isAndroid } from 'src/config/system'; @@ -24,6 +27,8 @@ import { useBlockSubscription } from 'src/hooks/block-subscription/use-block-sub import { useAppLockTimer } from 'src/hooks/use-app-lock-timer.hook'; import { useAuthorisedInterval } from 'src/hooks/use-authed-interval'; import { useNetworkInfo } from 'src/hooks/use-network-info.hook'; +import { usePartnersPromoSync } from 'src/hooks/use-partners-promo'; +import { ScreensEnum, ScreensParamList } from 'src/navigator/enums/screens.enum'; import { About } from 'src/screens/about/about'; import { Activity } from 'src/screens/activity/activity'; import { Backup } from 'src/screens/backup/backup'; @@ -66,8 +71,15 @@ import { Welcome } from 'src/screens/welcome/welcome'; import { useAppLock } from 'src/shelter/app-lock/app-lock'; import { loadSelectedBakerActions } from 'src/store/baking/baking-actions'; import { loadExchangeRates } from 'src/store/currency/currency-actions'; +import { useUsdToTokenRates } from 'src/store/currency/currency-selectors'; +import { loadDAppsListActions, loadTokensApyActions } from 'src/store/d-apps/d-apps-actions'; +import { loadAllFarmsAndStakesAction } from 'src/store/farms/actions'; +import { loadMarketTokensSlugsActions } from 'src/store/market/market-actions'; import { loadNotificationsAction } from 'src/store/notifications/notifications-actions'; +import { togglePartnersPromotionAction } from 'src/store/partners-promotion/partners-promotion-actions'; +import { loadAllSavingsAndStakesAction } from 'src/store/savings/actions'; import { useIsEnabledAdsBannerSelector, useSelectedRpcUrlSelector } from 'src/store/settings/settings-selectors'; +import { loadSwapDexesAction, loadSwapTokensAction } from 'src/store/swap/swap-actions'; import { loadTokensActions, loadTezosBalanceActions, @@ -77,12 +89,6 @@ import { useIsAuthorisedSelector, useSelectedAccountSelector } from 'src/store/w import { emptyTokenMetadata } from 'src/token/interfaces/token-metadata.interface'; import { cloudTitle } from 'src/utils/cloud-backup'; -import { useUsdToTokenRates } from '../store/currency/currency-selectors'; -import { loadTokensApyActions } from '../store/d-apps/d-apps-actions'; -import { loadAllFarmsAndStakesAction } from '../store/farms/actions'; -import { togglePartnersPromotionAction } from '../store/partners-promotion/partners-promotion-actions'; -import { loadAllSavingsAndStakesAction } from '../store/savings/actions'; -import { ScreensEnum, ScreensParamList } from './enums/screens.enum'; import { useStackNavigatorStyleOptions } from './hooks/use-stack-navigator-style-options.hook'; import { NavigationBar } from './navigation-bar/navigation-bar'; @@ -135,6 +141,16 @@ export const MainStackScreen = () => { dispatch(loadAllSavingsAndStakesAction()); }, APR_REFRESH_INTERVAL); + useAuthorisedInterval(() => { + if (isAndroid) { + dispatch(loadSwapTokensAction.submit()); + dispatch(loadSwapDexesAction.submit()); + } + }, SWAP_SYNC_INTERVAL); + useAuthorisedInterval(() => dispatch(loadDAppsListActions.submit()), DAPPS_SYNC_INTERVAL); + useAuthorisedInterval(() => dispatch(loadMarketTokensSlugsActions.submit()), MARKET_SYNC_INTERVAL); + usePartnersPromoSync(); + const shouldShowUnauthorizedScreens = !isAuthorised; const shouldShowAuthorizedScreens = isAuthorised && !isLocked; const shouldShowBlankScreen = isAuthorised && isLocked; diff --git a/src/screens/d-apps/d-apps.tsx b/src/screens/d-apps/d-apps.tsx index 481a2aea6..86d08d737 100644 --- a/src/screens/d-apps/d-apps.tsx +++ b/src/screens/d-apps/d-apps.tsx @@ -1,10 +1,9 @@ import { FlashList, ListRenderItem } from '@shopify/flash-list'; import { BigNumber } from 'bignumber.js'; import { chunk } from 'lodash-es'; -import React, { memo, useCallback, useEffect, useMemo, useState } from 'react'; +import React, { memo, useCallback, useMemo, useState } from 'react'; import { Text, useWindowDimensions, View } from 'react-native'; import { isTablet } from 'react-native-device-info'; -import { useDispatch } from 'react-redux'; import { DataPlaceholder } from 'src/components/data-placeholder/data-placeholder'; import { Disclaimer } from 'src/components/disclaimer/disclaimer'; @@ -20,7 +19,6 @@ import { useUserSavingsStats } from 'src/hooks/use-user-savings-stats'; import { CustomDAppInfo } from 'src/interfaces/custom-dapps-info.interface'; import { ScreensEnum } from 'src/navigator/enums/screens.enum'; import { useNavigation } from 'src/navigator/hooks/use-navigation.hook'; -import { loadDAppsListActions } from 'src/store/d-apps/d-apps-actions'; import { useDAppsListSelector } from 'src/store/d-apps/d-apps-selectors'; import { useAllFarmsSelector } from 'src/store/farms/selectors'; import { useSavingsItemsLoadingSelector } from 'src/store/savings/selectors'; @@ -45,7 +43,6 @@ const keyExtractor = (item: CustomDAppInfo[]) => item.map(dapp => dapp.name).joi const ListEmptyComponent = ; export const DApps = memo(() => { - const dispatch = useDispatch(); const { navigate } = useNavigation(); const { width: windowWidth } = useWindowDimensions(); @@ -63,10 +60,6 @@ export const DApps = memo(() => { [farmsMaxApr, savingsMaxApr] ); - useEffect(() => { - dispatch(loadDAppsListActions.submit()); - }, []); - const styles = useDAppsStyles(); const dAppsList = useDAppsListSelector(); diff --git a/src/screens/market/market.tsx b/src/screens/market/market.tsx index 6022fdf57..8b37003ed 100644 --- a/src/screens/market/market.tsx +++ b/src/screens/market/market.tsx @@ -1,24 +1,13 @@ import React, { memo } from 'react'; -import { useDispatch } from 'react-redux'; import { HeaderCard } from 'src/components/header-card/header-card'; -import { MARKET_SYNC_INTERVAL } from 'src/config/fixed-times'; -import { useAuthorisedInterval } from 'src/hooks/use-authed-interval'; -import { usePartnersPromoSync } from 'src/hooks/use-partners-promo'; import { ScreensEnum } from 'src/navigator/enums/screens.enum'; -import { loadMarketTokensSlugsActions } from 'src/store/market/market-actions'; import { usePageAnalytic } from 'src/utils/analytics/use-analytics.hook'; import { TezosInfo } from './tezos-info/tezos-info'; import { TopTokensTable } from './top-coins-table/top-tokens-table'; export const Market = memo(() => { - const dispatch = useDispatch(); - - useAuthorisedInterval(() => dispatch(loadMarketTokensSlugsActions.submit()), MARKET_SYNC_INTERVAL); - - usePartnersPromoSync(); - usePageAnalytic(ScreensEnum.Market); return ( diff --git a/src/screens/swap/swap-form/swap-form.tsx b/src/screens/swap/swap-form/swap-form.tsx index 42def0624..fa27120bd 100644 --- a/src/screens/swap/swap-form/swap-form.tsx +++ b/src/screens/swap/swap-form/swap-form.tsx @@ -2,7 +2,7 @@ import { OpKind } from '@taquito/rpc'; import { ParamsWithKind, TransferParams } from '@taquito/taquito'; import { BigNumber } from 'bignumber.js'; import { FormikProvider, isEmptyArray, useFormik } from 'formik'; -import React, { memo, useCallback, useEffect, useMemo, useRef } from 'react'; +import React, { FC, memo, useCallback, useEffect, useMemo, useRef } from 'react'; import { View } from 'react-native'; import { useDispatch } from 'react-redux'; @@ -72,9 +72,10 @@ interface SwapFormProps { outputToken?: TokenInterface; } -export const SwapForm = memo(({ inputToken, outputToken }) => { +export const SwapForm: FC = memo(({ inputToken, outputToken }) => { const dispatch = useDispatch(); const getSwapParams = useSwap(); + console.log(outputToken, 'inForm'); const { trackEvent } = useAnalytics(); const slippageTolerance = useSlippageSelector(); @@ -246,8 +247,8 @@ export const SwapForm = memo(({ inputToken, outputToken }) => { } }; - const formik = useFormik({ - initialValues: { + const initialValues = useMemo( + () => ({ inputAssets: { asset: inputToken ?? tezosToken, amount: undefined @@ -256,9 +257,15 @@ export const SwapForm = memo(({ inputToken, outputToken }) => { asset: outputToken ?? emptyTezosLikeToken, amount: undefined } - }, + }), + [inputToken, outputToken, tezosToken] + ); + + const formik = useFormik({ + initialValues, validationSchema: swapFormValidationSchema, - onSubmit: handleSubmit + onSubmit: handleSubmit, + enableReinitialize: true }); const { values, setFieldValue, isValid, submitForm, submitCount } = formik; diff --git a/src/screens/swap/swap.tsx b/src/screens/swap/swap.tsx index 30846b43e..fb32b1109 100644 --- a/src/screens/swap/swap.tsx +++ b/src/screens/swap/swap.tsx @@ -3,9 +3,8 @@ import React, { memo, useEffect } from 'react'; import { useDispatch } from 'react-redux'; import { ScreensEnum, ScreensParamList } from 'src/navigator/enums/screens.enum'; -import { loadSwapDexesAction, loadSwapTokensAction, resetSwapParamsAction } from 'src/store/swap/swap-actions'; +import { resetSwapParamsAction } from 'src/store/swap/swap-actions'; import { usePageAnalytic } from 'src/utils/analytics/use-analytics.hook'; -import { isDefined } from 'src/utils/is-defined'; import { SwapForm } from './swap-form/swap-form'; @@ -16,16 +15,7 @@ export const SwapScreen = memo(() => { const { params } = useRoute>(); - useEffect(() => { - dispatch(resetSwapParamsAction()); - dispatch(loadSwapTokensAction.submit()); - dispatch(loadSwapDexesAction.submit()); - }); + useEffect(() => void dispatch(resetSwapParamsAction())); - return ( - - ); + return ; }); From 38108f408432b89bef5b64de1699dc82ee123777 Mon Sep 17 00:00:00 2001 From: lendihop Date: Tue, 31 Oct 2023 17:03:08 +0100 Subject: [PATCH 08/11] rm log --- src/screens/swap/swap-form/swap-form.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/screens/swap/swap-form/swap-form.tsx b/src/screens/swap/swap-form/swap-form.tsx index fa27120bd..577047b10 100644 --- a/src/screens/swap/swap-form/swap-form.tsx +++ b/src/screens/swap/swap-form/swap-form.tsx @@ -75,7 +75,6 @@ interface SwapFormProps { export const SwapForm: FC = memo(({ inputToken, outputToken }) => { const dispatch = useDispatch(); const getSwapParams = useSwap(); - console.log(outputToken, 'inForm'); const { trackEvent } = useAnalytics(); const slippageTolerance = useSlippageSelector(); From d6ead8146cc8b4ad48387f0c7662ac89e619cfa7 Mon Sep 17 00:00:00 2001 From: lendihop Date: Tue, 31 Oct 2023 17:50:15 +0100 Subject: [PATCH 09/11] promo loading rework --- .../activity-groups-list.styles.ts | 3 +- .../activity-groups-list.tsx | 2 + .../optimal-promotion-item.tsx | 6 ++- src/hooks/use-partners-promo.ts | 14 +---- .../promotion-carousel/promotion-carousel.tsx | 6 +-- .../top-coins-table/top-tokens-table.tsx | 2 + src/screens/token-screen/token-screen.tsx | 3 -- src/screens/wallet/token-list/token-list.tsx | 19 +------ .../partners-promotion-actions.ts | 8 +-- .../partners-promotion-epics.ts | 8 +-- .../partners-promotion-reducers.ts | 53 ++++++++++++++----- .../partners-promotion-selectors.ts | 8 ++- .../partners-promotion-state.mock.ts | 1 + .../partners-promotion-state.ts | 2 + 14 files changed, 76 insertions(+), 59 deletions(-) diff --git a/src/components/activity-groups-list/activity-groups-list.styles.ts b/src/components/activity-groups-list/activity-groups-list.styles.ts index a62e30f34..75db38ecb 100644 --- a/src/components/activity-groups-list/activity-groups-list.styles.ts +++ b/src/components/activity-groups-list/activity-groups-list.styles.ts @@ -17,7 +17,8 @@ export const useActivityGroupsListStyles = createUseStyles(({ colors, typography promotionItemWrapper: { paddingVertical: formatSize(12), borderBottomWidth: formatSize(0.5), - borderBottomColor: colors.lines + borderBottomColor: colors.lines, + alignSelf: 'center' }, centeredItem: { alignSelf: 'center' diff --git a/src/components/activity-groups-list/activity-groups-list.tsx b/src/components/activity-groups-list/activity-groups-list.tsx index 97ecd1ad2..320158421 100644 --- a/src/components/activity-groups-list/activity-groups-list.tsx +++ b/src/components/activity-groups-list/activity-groups-list.tsx @@ -9,6 +9,7 @@ import { emptyFn } from 'src/config/general'; import { useFakeRefreshControlProps } from 'src/hooks/use-fake-refresh-control-props.hook'; import { ActivityGroup, emptyActivity } from 'src/interfaces/activity.interface'; import { isTheSameDay, isToday, isYesterday } from 'src/utils/date.utils'; +import { OptimalPromotionAdType } from 'src/utils/optimal.utils'; import { ActivityGroupItem } from './activity-group-item/activity-group-item'; import { ActivityGroupsListSelectors } from './activity-groups-list.selectors'; @@ -69,6 +70,7 @@ export const ActivityGroupsList: FC = ({ () => ( ; shouldShowCloseButton?: boolean; variant?: OptimalPromotionVariantEnum; @@ -23,6 +24,7 @@ interface Props extends TestIdProps { } export const OptimalPromotionItem: FC = ({ + adType, testID, style, shouldShowCloseButton = true, @@ -30,7 +32,7 @@ export const OptimalPromotionItem: FC = ({ onImageError, onEmptyPromotionReceived }) => { - const partnersPromotion = usePartnersPromoSelector(); + const partnersPromotion = usePartnersPromoSelector(adType); const partnersPromotionLoading = usePartnersPromoLoadingSelector(); const partnersPromotionEnabled = useIsPartnersPromoEnabledSelector(); const { disablePromotion } = usePromotionAfterConfirmation(); diff --git a/src/hooks/use-partners-promo.ts b/src/hooks/use-partners-promo.ts index f6af0f621..5a2936726 100644 --- a/src/hooks/use-partners-promo.ts +++ b/src/hooks/use-partners-promo.ts @@ -1,4 +1,3 @@ -import { useEffect } from 'react'; import { useDispatch } from 'react-redux'; import { PROMO_SYNC_INTERVAL } from 'src/config/fixed-times'; @@ -16,18 +15,6 @@ export const useIsPartnersPromoShown = () => { return isEnabled && !areAdsNotEnabled; }; -export const usePartnersPromoLoad = () => { - const promoIsShown = useIsPartnersPromoShown(); - - const dispatch = useDispatch(); - - useEffect(() => { - if (promoIsShown) { - dispatch(loadPartnersPromoActions.submit(OptimalPromotionAdType.TwMobile)); - } - }, [promoIsShown]); -}; - export const usePartnersPromoSync = () => { const promoIsShown = useIsPartnersPromoShown(); @@ -36,6 +23,7 @@ export const usePartnersPromoSync = () => { useAuthorisedInterval( () => { if (promoIsShown) { + dispatch(loadPartnersPromoActions.submit(OptimalPromotionAdType.TwToken)); dispatch(loadPartnersPromoActions.submit(OptimalPromotionAdType.TwMobile)); } }, diff --git a/src/screens/d-apps/promotion-carousel/promotion-carousel.tsx b/src/screens/d-apps/promotion-carousel/promotion-carousel.tsx index 341e9801a..9b552b34c 100644 --- a/src/screens/d-apps/promotion-carousel/promotion-carousel.tsx +++ b/src/screens/d-apps/promotion-carousel/promotion-carousel.tsx @@ -6,10 +6,11 @@ import type { CarouselRenderItemInfo } from 'react-native-reanimated-carousel/li import { OptimalPromotionItem } from 'src/components/optimal-promotion-item/optimal-promotion-item'; import { useLayoutSizes } from 'src/hooks/use-layout-sizes.hook'; -import { useIsPartnersPromoShown, usePartnersPromoLoad } from 'src/hooks/use-partners-promo'; +import { useIsPartnersPromoShown } from 'src/hooks/use-partners-promo'; import { useActivePromotionSelector } from 'src/store/advertising/advertising-selectors'; import { formatSize } from 'src/styles/format-size'; import { isDefined } from 'src/utils/is-defined'; +import { OptimalPromotionAdType } from 'src/utils/optimal.utils'; import { PromotionCarouselItem } from './promotion-carousel-item/promotion-carousel-item'; import { COMMON_PROMOTION_CAROUSEL_DATA } from './promotion-carousel.data'; @@ -22,8 +23,6 @@ export const PromotionCarousel = () => { const [promotionErrorOccurred, setPromotionErrorOccurred] = useState(false); const partnersPromoShown = useIsPartnersPromoShown(); - usePartnersPromoLoad(); - const data = useMemo>(() => { const result = [...COMMON_PROMOTION_CAROUSEL_DATA]; @@ -41,6 +40,7 @@ export const PromotionCarousel = () => { if (partnersPromoShown && !promotionErrorOccurred) { result.unshift( { {!promotionErrorOccurred && ( setPromotionErrorOccurred(true)} diff --git a/src/screens/token-screen/token-screen.tsx b/src/screens/token-screen/token-screen.tsx index 857e2896d..0c8c92118 100644 --- a/src/screens/token-screen/token-screen.tsx +++ b/src/screens/token-screen/token-screen.tsx @@ -11,7 +11,6 @@ import { PublicKeyHashText } from 'src/components/public-key-hash-text/public-ke import { TokenEquityValue } from 'src/components/token-equity-value/token-equity-value'; import { TokenScreenContentContainer } from 'src/components/token-screen-content-container/token-screen-content-container'; import { useContractActivity } from 'src/hooks/use-contract-activity'; -import { usePartnersPromoLoad } from 'src/hooks/use-partners-promo'; import { ScreensEnum, ScreensParamList } from 'src/navigator/enums/screens.enum'; import { useIsPartnersPromoEnabledSelector } from 'src/store/partners-promotion/partners-promotion-selectors'; import { highPriorityLoadTokenBalanceAction } from 'src/store/wallet/wallet-actions'; @@ -56,8 +55,6 @@ export const TokenScreen = () => { ); }, []); - usePartnersPromoLoad(); - const { activities, handleUpdate } = useContractActivity(getTokenSlug(initialToken)); useNavigationSetOptions({ headerTitle: () => }, [token]); diff --git a/src/screens/wallet/token-list/token-list.tsx b/src/screens/wallet/token-list/token-list.tsx index 0ebc29cc6..d696579c2 100644 --- a/src/screens/wallet/token-list/token-list.tsx +++ b/src/screens/wallet/token-list/token-list.tsx @@ -22,7 +22,6 @@ import { ScreensEnum } from 'src/navigator/enums/screens.enum'; import { useNavigation } from 'src/navigator/hooks/use-navigation.hook'; import { loadAdvertisingPromotionActions } from 'src/store/advertising/advertising-actions'; import { useTokensApyRatesSelector } from 'src/store/d-apps/d-apps-selectors'; -import { loadPartnersPromoActions } from 'src/store/partners-promotion/partners-promotion-actions'; import { setZeroBalancesShown } from 'src/store/settings/settings-actions'; import { useHideZeroBalancesSelector, useIsEnabledAdsBannerSelector } from 'src/store/settings/settings-selectors'; import { @@ -59,7 +58,7 @@ const getItemType = (item: ListItem) => (typeof item === 'string' ? 'promotion' export const TokensList = memo(() => { const dispatch = useDispatch(); const { trackEvent } = useAnalytics(); - const { navigate, addListener: addNavigationListener, removeListener: removeNavigationListener } = useNavigation(); + const { navigate } = useNavigation(); const styles = useTokenListStyles(); const apyRates = useTokensApyRatesSelector(); @@ -85,21 +84,6 @@ export const TokensList = memo(() => { trackEvent(WalletSelectors.hideZeroBalancesCheckbox, AnalyticsEventCategory.ButtonPress); }, []); - useEffect(() => { - const listener = () => { - dispatch(loadPartnersPromoActions.submit(OptimalPromotionAdType.TwToken)); - setPromotionErrorOccurred(false); - }; - - if (partnersPromoShown) { - addNavigationListener('focus', listener); - } - - return () => { - removeNavigationListener('focus', listener); - }; - }, [dispatch, addNavigationListener, removeNavigationListener, partnersPromoShown]); - useEffect(() => { if (partnersPromoShown) { dispatch(loadAdvertisingPromotionActions.submit()); @@ -146,6 +130,7 @@ export const TokensList = memo(() => { ( - 'partnersPromo/LOAD_PARTNERS_PROMOTION' -); +export const loadPartnersPromoActions = createActions< + OptimalPromotionAdType, + { adType: OptimalPromotionAdType; ad: OptimalPromotionType }, + { adType: OptimalPromotionAdType; error: string } +>('partnersPromo/LOAD_PARTNERS_PROMOTION'); export const togglePartnersPromotionAction = createAction('partnersPromo/SET_IS_PROMOTION_ENABLED'); diff --git a/src/store/partners-promotion/partners-promotion-epics.ts b/src/store/partners-promotion/partners-promotion-epics.ts index d0b5ea8ec..6213a67d5 100644 --- a/src/store/partners-promotion/partners-promotion-epics.ts +++ b/src/store/partners-promotion/partners-promotion-epics.ts @@ -15,10 +15,10 @@ const loadPartnersPromotionEpic: Epic = (action$, sta ofType(loadPartnersPromoActions.submit), toPayload(), withSelectedAccount(state$), - switchMap(([payload, account]) => - from(getOptimalPromotion(payload, account.publicKeyHash)).pipe( - map(optimalPromotion => loadPartnersPromoActions.success(optimalPromotion)), - catchError(error => of(loadPartnersPromoActions.fail(error.message))) + switchMap(([adType, account]) => + from(getOptimalPromotion(adType, account.publicKeyHash)).pipe( + map(optimalPromotion => loadPartnersPromoActions.success({ adType, ad: optimalPromotion })), + catchError(error => of(loadPartnersPromoActions.fail({ adType, error: error.message }))) ) ) ); diff --git a/src/store/partners-promotion/partners-promotion-reducers.ts b/src/store/partners-promotion/partners-promotion-reducers.ts index 2f352e9d1..990446d86 100644 --- a/src/store/partners-promotion/partners-promotion-reducers.ts +++ b/src/store/partners-promotion/partners-promotion-reducers.ts @@ -1,22 +1,51 @@ import { createReducer } from '@reduxjs/toolkit'; +import { OptimalPromotionAdType } from 'src/utils/optimal.utils'; + import { createEntity } from '../create-entity'; import { loadPartnersPromoActions, togglePartnersPromotionAction } from './partners-promotion-actions'; import { partnersPromotionInitialState } from './partners-promotion-state'; export const partnersPromotionReducers = createReducer(partnersPromotionInitialState, builder => { - builder.addCase(loadPartnersPromoActions.submit, state => ({ - ...state, - promotion: createEntity(state.promotion.data, true) - })); - builder.addCase(loadPartnersPromoActions.success, (state, { payload }) => ({ - ...state, - promotion: createEntity(payload, false) - })); - builder.addCase(loadPartnersPromoActions.fail, (state, { payload }) => ({ - ...state, - promotion: createEntity(state.promotion.data, false, payload) - })); + builder.addCase(loadPartnersPromoActions.submit, (state, { payload: adType }) => { + if (adType === OptimalPromotionAdType.TwToken) { + return { + ...state, + tokenPromotion: createEntity(state.tokenPromotion.data, true) + }; + } + + return { + ...state, + promotion: createEntity(state.promotion.data, true) + }; + }); + builder.addCase(loadPartnersPromoActions.success, (state, { payload }) => { + if (payload.adType === OptimalPromotionAdType.TwToken) { + return { + ...state, + tokenPromotion: createEntity(payload.ad, false) + }; + } + + return { + ...state, + promotion: createEntity(payload.ad, false) + }; + }); + builder.addCase(loadPartnersPromoActions.fail, (state, { payload }) => { + if (payload.adType === OptimalPromotionAdType.TwToken) { + return { + ...state, + tokenPromotion: createEntity(state.tokenPromotion.data, false, payload.error) + }; + } + + return { + ...state, + promotion: createEntity(state.promotion.data, false, payload.error) + }; + }); builder.addCase(togglePartnersPromotionAction, (state, { payload }) => ({ ...state, isEnabled: payload diff --git a/src/store/partners-promotion/partners-promotion-selectors.ts b/src/store/partners-promotion/partners-promotion-selectors.ts index 36c2c4260..360137af8 100644 --- a/src/store/partners-promotion/partners-promotion-selectors.ts +++ b/src/store/partners-promotion/partners-promotion-selectors.ts @@ -1,5 +1,11 @@ +import { OptimalPromotionAdType } from '../../utils/optimal.utils'; import { useSelector } from '../selector'; -export const usePartnersPromoSelector = () => useSelector(state => state.partnersPromotion.promotion.data); +export const usePartnersPromoSelector = (adType: OptimalPromotionAdType) => + useSelector(state => + adType === OptimalPromotionAdType.TwToken + ? state.partnersPromotion.tokenPromotion.data + : state.partnersPromotion.promotion.data + ); export const usePartnersPromoLoadingSelector = () => useSelector(state => state.partnersPromotion.promotion.isLoading); export const useIsPartnersPromoEnabledSelector = () => useSelector(state => state.partnersPromotion.isEnabled); diff --git a/src/store/partners-promotion/partners-promotion-state.mock.ts b/src/store/partners-promotion/partners-promotion-state.mock.ts index b35e49976..e0b1a406d 100644 --- a/src/store/partners-promotion/partners-promotion-state.mock.ts +++ b/src/store/partners-promotion/partners-promotion-state.mock.ts @@ -23,6 +23,7 @@ export const mockPartnersPromotion = { }; export const mockPartnersPromotionState: PartnersPromotionState = { + tokenPromotion: createEntity(mockPartnersPromotion), promotion: createEntity(mockPartnersPromotion), isEnabled: false }; diff --git a/src/store/partners-promotion/partners-promotion-state.ts b/src/store/partners-promotion/partners-promotion-state.ts index 650fecc60..ffc2b354e 100644 --- a/src/store/partners-promotion/partners-promotion-state.ts +++ b/src/store/partners-promotion/partners-promotion-state.ts @@ -5,11 +5,13 @@ import { LoadableEntityState } from '../types'; import { mockPartnersPromotion } from './partners-promotion-state.mock'; export interface PartnersPromotionState { + tokenPromotion: LoadableEntityState; promotion: LoadableEntityState; isEnabled: boolean; } export const partnersPromotionInitialState: PartnersPromotionState = { + tokenPromotion: createEntity(mockPartnersPromotion), promotion: createEntity(mockPartnersPromotion), isEnabled: false }; From 301f630575afc0c4489f9bb9483e1e4db789171f Mon Sep 17 00:00:00 2001 From: lendihop Date: Tue, 31 Oct 2023 17:53:39 +0100 Subject: [PATCH 10/11] imports fix --- src/screens/market/top-coins-table/top-tokens-table.tsx | 2 +- src/store/partners-promotion/partners-promotion-selectors.ts | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/screens/market/top-coins-table/top-tokens-table.tsx b/src/screens/market/top-coins-table/top-tokens-table.tsx index bd91760c2..4cf73f60c 100644 --- a/src/screens/market/top-coins-table/top-tokens-table.tsx +++ b/src/screens/market/top-coins-table/top-tokens-table.tsx @@ -8,8 +8,8 @@ import { useFakeRefreshControlProps } from 'src/hooks/use-fake-refresh-control-p import { useFilteredMarketTokens } from 'src/hooks/use-filtered-market-tokens.hook'; import { MarketToken } from 'src/store/market/market.interfaces'; import { formatSize } from 'src/styles/format-size'; +import { OptimalPromotionAdType } from 'src/utils/optimal.utils'; -import { OptimalPromotionAdType } from '../../../utils/optimal.utils'; import { MarketSelectors } from '../market.selectors'; import { Filters } from './filters/filters'; import { RightSwipeView } from './right-swipe-view/right-swipe-view'; diff --git a/src/store/partners-promotion/partners-promotion-selectors.ts b/src/store/partners-promotion/partners-promotion-selectors.ts index 360137af8..8736bdca1 100644 --- a/src/store/partners-promotion/partners-promotion-selectors.ts +++ b/src/store/partners-promotion/partners-promotion-selectors.ts @@ -1,4 +1,5 @@ -import { OptimalPromotionAdType } from '../../utils/optimal.utils'; +import { OptimalPromotionAdType } from 'src/utils/optimal.utils'; + import { useSelector } from '../selector'; export const usePartnersPromoSelector = (adType: OptimalPromotionAdType) => From d9516a36253c71e7b3b710d638a8546fd633062d Mon Sep 17 00:00:00 2001 From: lendihop Date: Tue, 31 Oct 2023 18:43:43 +0100 Subject: [PATCH 11/11] review fix, promos load separation --- .../activity-groups-list.styles.ts | 3 +- .../activity-groups-list.tsx | 39 ++++---- .../optimal-promotion-item.tsx | 88 ++++++++++--------- src/hooks/use-partners-promo.ts | 10 ++- .../hooks/use-navigation-bar-button.ts | 6 +- .../partners-promotion-actions.ts | 14 +-- .../partners-promotion-epics.ts | 29 ++++-- .../partners-promotion-reducers.ts | 69 ++++++--------- .../partners-promotion-selectors.ts | 2 +- .../partners-promotion-state.mock.ts | 2 +- .../partners-promotion-state.ts | 4 +- 11 files changed, 138 insertions(+), 128 deletions(-) diff --git a/src/components/activity-groups-list/activity-groups-list.styles.ts b/src/components/activity-groups-list/activity-groups-list.styles.ts index 75db38ecb..a62e30f34 100644 --- a/src/components/activity-groups-list/activity-groups-list.styles.ts +++ b/src/components/activity-groups-list/activity-groups-list.styles.ts @@ -17,8 +17,7 @@ export const useActivityGroupsListStyles = createUseStyles(({ colors, typography promotionItemWrapper: { paddingVertical: formatSize(12), borderBottomWidth: formatSize(0.5), - borderBottomColor: colors.lines, - alignSelf: 'center' + borderBottomColor: colors.lines }, centeredItem: { alignSelf: 'center' diff --git a/src/components/activity-groups-list/activity-groups-list.tsx b/src/components/activity-groups-list/activity-groups-list.tsx index 320158421..c6ceeea02 100644 --- a/src/components/activity-groups-list/activity-groups-list.tsx +++ b/src/components/activity-groups-list/activity-groups-list.tsx @@ -66,21 +66,6 @@ export const ActivityGroupsList: FC = ({ return result; }, [activityGroups]); - const Promotion = useMemo( - () => ( - - - - ), - [onOptimalPromotionError] - ); - const renderItem: ListRenderItem = useCallback( ({ item, index }) => typeof item === 'string' ? ( @@ -88,7 +73,17 @@ export const ActivityGroupsList: FC = ({ ) : ( <> - {index === 1 && shouldShowPromotion && Promotion} + {index === 1 && shouldShowPromotion && ( + + + + )} ), [onOptimalPromotionError, shouldShowPromotion] @@ -104,7 +99,17 @@ export const ActivityGroupsList: FC = ({ return ( <> - {sections.length === 0 && shouldShowPromotion && Promotion} + {sections.length === 0 && shouldShowPromotion && ( + + + + )} void; } -export const OptimalPromotionItem: FC = ({ - adType, - testID, - style, - shouldShowCloseButton = true, - variant = OptimalPromotionVariantEnum.Image, - onImageError, - onEmptyPromotionReceived -}) => { - const partnersPromotion = usePartnersPromoSelector(adType); - const partnersPromotionLoading = usePartnersPromoLoadingSelector(); - const partnersPromotionEnabled = useIsPartnersPromoEnabledSelector(); - const { disablePromotion } = usePromotionAfterConfirmation(); +export const OptimalPromotionItem = memo( + ({ + adType, + testID, + style, + shouldShowCloseButton = true, + variant = OptimalPromotionVariantEnum.Image, + onImageError, + onEmptyPromotionReceived + }) => { + const partnersPromotion = usePartnersPromoSelector(adType); + const partnersPromotionLoading = usePartnersPromoLoadingSelector(); + const partnersPromotionEnabled = useIsPartnersPromoEnabledSelector(); + const { disablePromotion } = usePromotionAfterConfirmation(); - const promotionIsEmpty = useIsEmptyPromotion(partnersPromotion); + const promotionIsEmpty = useIsEmptyPromotion(partnersPromotion); - useEffect(() => { - if (partnersPromotionEnabled && onEmptyPromotionReceived && promotionIsEmpty) { - onEmptyPromotionReceived(); + useEffect(() => { + if (partnersPromotionEnabled && onEmptyPromotionReceived && promotionIsEmpty) { + onEmptyPromotionReceived(); + } + }, [partnersPromotionEnabled, onEmptyPromotionReceived, promotionIsEmpty]); + + if (!partnersPromotionEnabled || promotionIsEmpty) { + return null; } - }, [partnersPromotionEnabled, onEmptyPromotionReceived, promotionIsEmpty]); - if (!partnersPromotionEnabled || promotionIsEmpty) { - return null; - } + if (variant === OptimalPromotionVariantEnum.Text) { + return ( + + ); + } - if (variant === OptimalPromotionVariantEnum.Text) { return ( - ); } - - return ( - - ); -}; +); diff --git a/src/hooks/use-partners-promo.ts b/src/hooks/use-partners-promo.ts index 5a2936726..8c4163733 100644 --- a/src/hooks/use-partners-promo.ts +++ b/src/hooks/use-partners-promo.ts @@ -1,10 +1,12 @@ import { useDispatch } from 'react-redux'; import { PROMO_SYNC_INTERVAL } from 'src/config/fixed-times'; -import { loadPartnersPromoActions } from 'src/store/partners-promotion/partners-promotion-actions'; +import { + loadPartnersPromoActions, + loadPartnersTextPromoActions +} from 'src/store/partners-promotion/partners-promotion-actions'; import { useIsPartnersPromoEnabledSelector } from 'src/store/partners-promotion/partners-promotion-selectors'; import { useIsEnabledAdsBannerSelector } from 'src/store/settings/settings-selectors'; -import { OptimalPromotionAdType } from 'src/utils/optimal.utils'; import { useAuthorisedInterval } from './use-authed-interval'; @@ -23,8 +25,8 @@ export const usePartnersPromoSync = () => { useAuthorisedInterval( () => { if (promoIsShown) { - dispatch(loadPartnersPromoActions.submit(OptimalPromotionAdType.TwToken)); - dispatch(loadPartnersPromoActions.submit(OptimalPromotionAdType.TwMobile)); + dispatch(loadPartnersTextPromoActions.submit()); + dispatch(loadPartnersPromoActions.submit()); } }, PROMO_SYNC_INTERVAL, diff --git a/src/navigator/navigation-bar/hooks/use-navigation-bar-button.ts b/src/navigator/navigation-bar/hooks/use-navigation-bar-button.ts index 65c698e33..072dd62d3 100644 --- a/src/navigator/navigation-bar/hooks/use-navigation-bar-button.ts +++ b/src/navigator/navigation-bar/hooks/use-navigation-bar-button.ts @@ -1,4 +1,4 @@ -import { useMemo } from 'react'; +import { useCallback, useMemo } from 'react'; import { emptyFn } from 'src/config/general'; import { ScreensEnum } from 'src/navigator/enums/screens.enum'; @@ -25,7 +25,7 @@ export const useNavigationBarButton = ({ return value; }, [colors, focused, disabled]); - const handlePress = () => { + const handlePress = useCallback(() => { if (disabled) { disabledOnPress(); } else { @@ -35,7 +35,7 @@ export const useNavigationBarButton = ({ navigate(routeName); } } - }; + }, [disabled, disabledOnPress, navigate, routeName, swapScreenParams]); return { color, diff --git a/src/store/partners-promotion/partners-promotion-actions.ts b/src/store/partners-promotion/partners-promotion-actions.ts index 4e55d76f2..8f384bc83 100644 --- a/src/store/partners-promotion/partners-promotion-actions.ts +++ b/src/store/partners-promotion/partners-promotion-actions.ts @@ -1,13 +1,15 @@ import { createAction } from '@reduxjs/toolkit'; -import { OptimalPromotionAdType, OptimalPromotionType } from 'src/utils/optimal.utils'; +import { OptimalPromotionType } from 'src/utils/optimal.utils'; import { createActions } from '../create-actions'; -export const loadPartnersPromoActions = createActions< - OptimalPromotionAdType, - { adType: OptimalPromotionAdType; ad: OptimalPromotionType }, - { adType: OptimalPromotionAdType; error: string } ->('partnersPromo/LOAD_PARTNERS_PROMOTION'); +export const loadPartnersPromoActions = createActions( + 'partnersPromo/LOAD_PARTNERS_PROMOTION' +); + +export const loadPartnersTextPromoActions = createActions( + 'partnersPromo/LOAD_PARTNERS_TEXT_PROMOTION' +); export const togglePartnersPromotionAction = createAction('partnersPromo/SET_IS_PROMOTION_ENABLED'); diff --git a/src/store/partners-promotion/partners-promotion-epics.ts b/src/store/partners-promotion/partners-promotion-epics.ts index 6213a67d5..af2a7d7bc 100644 --- a/src/store/partners-promotion/partners-promotion-epics.ts +++ b/src/store/partners-promotion/partners-promotion-epics.ts @@ -2,25 +2,36 @@ import { combineEpics, Epic } from 'redux-observable'; import { from, of } from 'rxjs'; import { catchError, map, switchMap } from 'rxjs/operators'; import { Action } from 'ts-action'; -import { ofType, toPayload } from 'ts-action-operators'; +import { ofType } from 'ts-action-operators'; -import { getOptimalPromotion } from 'src/utils/optimal.utils'; +import { getOptimalPromotion, OptimalPromotionAdType } from 'src/utils/optimal.utils'; import { withSelectedAccount } from 'src/utils/wallet.utils'; import { RootState } from '../types'; -import { loadPartnersPromoActions } from './partners-promotion-actions'; +import { loadPartnersPromoActions, loadPartnersTextPromoActions } from './partners-promotion-actions'; const loadPartnersPromotionEpic: Epic = (action$, state$) => action$.pipe( ofType(loadPartnersPromoActions.submit), - toPayload(), withSelectedAccount(state$), - switchMap(([adType, account]) => - from(getOptimalPromotion(adType, account.publicKeyHash)).pipe( - map(optimalPromotion => loadPartnersPromoActions.success({ adType, ad: optimalPromotion })), - catchError(error => of(loadPartnersPromoActions.fail({ adType, error: error.message }))) + switchMap(([, account]) => + from(getOptimalPromotion(OptimalPromotionAdType.TwMobile, account.publicKeyHash)).pipe( + map(optimalPromotion => loadPartnersPromoActions.success(optimalPromotion)), + catchError(error => of(loadPartnersPromoActions.fail(error.message))) ) ) ); -export const partnersPromotionEpics = combineEpics(loadPartnersPromotionEpic); +const loadPartnersTextPromotionEpic: Epic = (action$, state$) => + action$.pipe( + ofType(loadPartnersTextPromoActions.submit), + withSelectedAccount(state$), + switchMap(([, account]) => + from(getOptimalPromotion(OptimalPromotionAdType.TwToken, account.publicKeyHash)).pipe( + map(optimalPromotion => loadPartnersTextPromoActions.success(optimalPromotion)), + catchError(error => of(loadPartnersTextPromoActions.fail(error.message))) + ) + ) + ); + +export const partnersPromotionEpics = combineEpics(loadPartnersPromotionEpic, loadPartnersTextPromotionEpic); diff --git a/src/store/partners-promotion/partners-promotion-reducers.ts b/src/store/partners-promotion/partners-promotion-reducers.ts index 990446d86..3bce6cc38 100644 --- a/src/store/partners-promotion/partners-promotion-reducers.ts +++ b/src/store/partners-promotion/partners-promotion-reducers.ts @@ -1,51 +1,40 @@ import { createReducer } from '@reduxjs/toolkit'; -import { OptimalPromotionAdType } from 'src/utils/optimal.utils'; - import { createEntity } from '../create-entity'; -import { loadPartnersPromoActions, togglePartnersPromotionAction } from './partners-promotion-actions'; +import { + loadPartnersPromoActions, + loadPartnersTextPromoActions, + togglePartnersPromotionAction +} from './partners-promotion-actions'; import { partnersPromotionInitialState } from './partners-promotion-state'; export const partnersPromotionReducers = createReducer(partnersPromotionInitialState, builder => { - builder.addCase(loadPartnersPromoActions.submit, (state, { payload: adType }) => { - if (adType === OptimalPromotionAdType.TwToken) { - return { - ...state, - tokenPromotion: createEntity(state.tokenPromotion.data, true) - }; - } - - return { - ...state, - promotion: createEntity(state.promotion.data, true) - }; - }); - builder.addCase(loadPartnersPromoActions.success, (state, { payload }) => { - if (payload.adType === OptimalPromotionAdType.TwToken) { - return { - ...state, - tokenPromotion: createEntity(payload.ad, false) - }; - } + builder.addCase(loadPartnersPromoActions.submit, state => ({ + ...state, + promotion: createEntity(state.promotion.data, true) + })); + builder.addCase(loadPartnersPromoActions.success, (state, { payload }) => ({ + ...state, + promotion: createEntity(payload, false) + })); + builder.addCase(loadPartnersPromoActions.fail, (state, { payload }) => ({ + ...state, + promotion: createEntity(state.promotion.data, false, payload) + })); - return { - ...state, - promotion: createEntity(payload.ad, false) - }; - }); - builder.addCase(loadPartnersPromoActions.fail, (state, { payload }) => { - if (payload.adType === OptimalPromotionAdType.TwToken) { - return { - ...state, - tokenPromotion: createEntity(state.tokenPromotion.data, false, payload.error) - }; - } + builder.addCase(loadPartnersTextPromoActions.submit, state => ({ + ...state, + textPromotion: createEntity(state.textPromotion.data, true) + })); + builder.addCase(loadPartnersTextPromoActions.success, (state, { payload }) => ({ + ...state, + textPromotion: createEntity(payload, false) + })); + builder.addCase(loadPartnersTextPromoActions.fail, (state, { payload }) => ({ + ...state, + textPromotion: createEntity(state.textPromotion.data, false, payload) + })); - return { - ...state, - promotion: createEntity(state.promotion.data, false, payload.error) - }; - }); builder.addCase(togglePartnersPromotionAction, (state, { payload }) => ({ ...state, isEnabled: payload diff --git a/src/store/partners-promotion/partners-promotion-selectors.ts b/src/store/partners-promotion/partners-promotion-selectors.ts index 8736bdca1..2eba2dbc5 100644 --- a/src/store/partners-promotion/partners-promotion-selectors.ts +++ b/src/store/partners-promotion/partners-promotion-selectors.ts @@ -5,7 +5,7 @@ import { useSelector } from '../selector'; export const usePartnersPromoSelector = (adType: OptimalPromotionAdType) => useSelector(state => adType === OptimalPromotionAdType.TwToken - ? state.partnersPromotion.tokenPromotion.data + ? state.partnersPromotion.textPromotion.data : state.partnersPromotion.promotion.data ); export const usePartnersPromoLoadingSelector = () => useSelector(state => state.partnersPromotion.promotion.isLoading); diff --git a/src/store/partners-promotion/partners-promotion-state.mock.ts b/src/store/partners-promotion/partners-promotion-state.mock.ts index e0b1a406d..650f0233d 100644 --- a/src/store/partners-promotion/partners-promotion-state.mock.ts +++ b/src/store/partners-promotion/partners-promotion-state.mock.ts @@ -23,7 +23,7 @@ export const mockPartnersPromotion = { }; export const mockPartnersPromotionState: PartnersPromotionState = { - tokenPromotion: createEntity(mockPartnersPromotion), + textPromotion: createEntity(mockPartnersPromotion), promotion: createEntity(mockPartnersPromotion), isEnabled: false }; diff --git a/src/store/partners-promotion/partners-promotion-state.ts b/src/store/partners-promotion/partners-promotion-state.ts index ffc2b354e..d11956544 100644 --- a/src/store/partners-promotion/partners-promotion-state.ts +++ b/src/store/partners-promotion/partners-promotion-state.ts @@ -5,13 +5,13 @@ import { LoadableEntityState } from '../types'; import { mockPartnersPromotion } from './partners-promotion-state.mock'; export interface PartnersPromotionState { - tokenPromotion: LoadableEntityState; + textPromotion: LoadableEntityState; promotion: LoadableEntityState; isEnabled: boolean; } export const partnersPromotionInitialState: PartnersPromotionState = { - tokenPromotion: createEntity(mockPartnersPromotion), + textPromotion: createEntity(mockPartnersPromotion), promotion: createEntity(mockPartnersPromotion), isEnabled: false };