From 5748fa774a73cad9c17c19d1300f73a40ac531df Mon Sep 17 00:00:00 2001 From: sunnylqm Date: Tue, 17 Jan 2023 21:08:26 +0800 Subject: [PATCH 1/7] fix: image warning --- .../views/Discover/Explorer/Mobile/WebTabGrid.tsx | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/packages/kit/src/views/Discover/Explorer/Mobile/WebTabGrid.tsx b/packages/kit/src/views/Discover/Explorer/Mobile/WebTabGrid.tsx index 5f9e1c2f6ce..00b075ab83a 100644 --- a/packages/kit/src/views/Discover/Explorer/Mobile/WebTabGrid.tsx +++ b/packages/kit/src/views/Discover/Explorer/Mobile/WebTabGrid.tsx @@ -133,11 +133,13 @@ const WebTabCard: FC< }} /> - + {!!thumbnail && ( + + )} ); From 0f0c35a045e9e4026e796d836d0023861bf6a393 Mon Sep 17 00:00:00 2001 From: sunnylqm Date: Wed, 18 Jan 2023 11:45:11 +0800 Subject: [PATCH 2/7] chore: update deps --- packages/app/ios/Podfile.lock | 8 +-- packages/app/package.json | 4 +- packages/app/react-native.config.js | 4 ++ .../Discover/Explorer/Mobile/WebTabFront.tsx | 2 - .../Discover/Explorer/explorerAnimation.ts | 13 ++-- patches/react-native-screens+3.17.0.patch | 67 ------------------- patches/react-native-screens+3.19.0.patch | 26 +++++++ yarn.lock | 20 +++--- 8 files changed, 54 insertions(+), 90 deletions(-) delete mode 100644 patches/react-native-screens+3.17.0.patch create mode 100644 patches/react-native-screens+3.19.0.patch diff --git a/packages/app/ios/Podfile.lock b/packages/app/ios/Podfile.lock index b50d54c761a..ac3c9ca100e 100644 --- a/packages/app/ios/Podfile.lock +++ b/packages/app/ios/Podfile.lock @@ -666,7 +666,7 @@ PODS: - RNFBApp - RNGestureHandler (2.9.0): - React-Core - - RNReanimated (2.14.1): + - RNReanimated (2.14.2): - DoubleConversion - FBLazyVector - FBReactNativeSpec @@ -693,7 +693,7 @@ PODS: - React-RCTText - ReactCommon/turbomodule/core - Yoga - - RNScreens (3.17.0): + - RNScreens (3.19.0): - React-Core - React-RCTImage - RNShare (7.6.6): @@ -1202,8 +1202,8 @@ SPEC CHECKSUMS: RNFBCrashlytics: 94e1f78e2a9aa9e02edbfb0d3f1f0921ce00094b RNFBPerf: b85b621a4d15905847e8627a6aa67ad894e8e166 RNGestureHandler: 071d7a9ad81e8b83fe7663b303d132406a7d8f39 - RNReanimated: 2e3aaece9a18c6fb0874db0902497d1cd8cd4511 - RNScreens: 0df01424e9e0ed7827200d6ed1087ddd06c493f9 + RNReanimated: e2375194a96655a207deb65ff6f776408be41694 + RNScreens: ea4cd3a853063cda19a4e3c28d2e52180c80f4eb RNShare: d56424e3926cbc239db1cc1c168adcb051aad50b RNSVG: d787d64ca06b9158e763ad2638a8c4edce00782a SDWebImage: a7f831e1a65eb5e285e3fb046a23fcfbf08e696d diff --git a/packages/app/package.json b/packages/app/package.json index b3a4c027af8..872bc09248f 100644 --- a/packages/app/package.json +++ b/packages/app/package.json @@ -80,10 +80,10 @@ "react-native-nested-scroll-view": "https://github.com/OneKeyHQ/react-native-nested-scroll-view.git", "react-native-pager-view": "6.1.2", "react-native-randombytes": "^3.6.1", - "react-native-reanimated": "^2.14.1", + "react-native-reanimated": "^2.14.2", "react-native-restart": "0.0.24", "react-native-safe-area-context": "4.4.1", - "react-native-screens": "3.17.0", + "react-native-screens": "^3.19.0", "react-native-share": "^7.6.6", "react-native-svg": "^13.7.0", "react-native-tcp-socket": "^6.0.3", diff --git a/packages/app/react-native.config.js b/packages/app/react-native.config.js index a22c7a98ee9..d73fa3882db 100644 --- a/packages/app/react-native.config.js +++ b/packages/app/react-native.config.js @@ -1,5 +1,9 @@ module.exports = { dependencies: { + 'react-native-flipper': { + // disable flipper in CI environment + platforms: process.env.CI ? { ios: null, android: null } : {}, + }, // disable frameprocessor and vision-camera-code-scanner // until reanimated v3 offcially supports v8 'vision-camera-code-scanner': { diff --git a/packages/kit/src/views/Discover/Explorer/Mobile/WebTabFront.tsx b/packages/kit/src/views/Discover/Explorer/Mobile/WebTabFront.tsx index df811430d94..018dba5d7c6 100644 --- a/packages/kit/src/views/Discover/Explorer/Mobile/WebTabFront.tsx +++ b/packages/kit/src/views/Discover/Explorer/Mobile/WebTabFront.tsx @@ -4,8 +4,6 @@ import { Freeze } from 'react-freeze'; import { StyleSheet, View } from 'react-native'; import ViewShot from 'react-native-view-shot'; -import platformEnv from '@onekeyhq/shared/src/platformEnv'; - import { homeTab } from '../../../../store/reducers/webTabs'; import DiscoverHome from '../../Home'; import WebContent from '../Content/WebContent'; diff --git a/packages/kit/src/views/Discover/Explorer/explorerAnimation.ts b/packages/kit/src/views/Discover/Explorer/explorerAnimation.ts index 30912f81715..4487defe674 100644 --- a/packages/kit/src/views/Discover/Explorer/explorerAnimation.ts +++ b/packages/kit/src/views/Discover/Explorer/explorerAnimation.ts @@ -34,12 +34,13 @@ export const setThumbnailRatio = (ratio: number) => { thumbnailRatio = ratio; }; const thumbnailWidth = 340; -const getTabCellLayout = (tabId: string) => { +const getTabCellLayout = (tabId: string, callback?: () => void) => { tabGridRefs[tabId]?.measure((x, y, width, height, pageX, pageY) => { targetPreviewX.value = pageX; targetPreviewY.value = pageY; targetPreviewWidth.value = width; targetPreviewHeight.value = height; + callback?.(); }); }; export const showTabGrid = () => { @@ -58,14 +59,16 @@ export const showTabGrid = () => { ); }); } - getTabCellLayout(currentTabId); - setTimeout(() => (showTabGridAnim.value = withTiming(MAX_OR_SHOW)), 30); + getTabCellLayout(currentTabId, () => { + showTabGridAnim.value = withTiming(MAX_OR_SHOW); + }); }; export const hideTabGrid = (id?: string) => { const curId = id || appSelector((s) => s.webTabs.currentTabId); - getTabCellLayout(curId); - setTimeout(() => (showTabGridAnim.value = withTiming(MIN_OR_HIDE)), 30); + getTabCellLayout(curId, () => { + showTabGridAnim.value = withTiming(MIN_OR_HIDE); + }); }; interface ExpandAnimationEvents { diff --git a/patches/react-native-screens+3.17.0.patch b/patches/react-native-screens+3.17.0.patch deleted file mode 100644 index ef5d2309c7c..00000000000 --- a/patches/react-native-screens+3.17.0.patch +++ /dev/null @@ -1,67 +0,0 @@ -diff --git a/node_modules/react-native-screens/ios/RNSFullWindowOverlay.mm b/node_modules/react-native-screens/ios/RNSFullWindowOverlay.mm -index 52d1914..9522963 100644 ---- a/node_modules/react-native-screens/ios/RNSFullWindowOverlay.mm -+++ b/node_modules/react-native-screens/ios/RNSFullWindowOverlay.mm -@@ -25,6 +25,38 @@ - return NO; - } - -+- (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event -+{ -+ BOOL canReceiveTouchEvents = ([self isUserInteractionEnabled] && ![self isHidden]); -+ if (!canReceiveTouchEvents) { -+ return nil; -+ } -+ -+ // `hitSubview` is the topmost subview which was hit. The hit point can -+ // be outside the bounds of `view` (e.g., if -clipsToBounds is NO). -+ UIView *hitSubview = nil; -+ BOOL isPointInside = [self pointInside:point withEvent:event]; -+ if (![self clipsToBounds] || isPointInside) { -+ // Take z-index into account when calculating the touch target. -+ NSArray *sortedSubviews = [self reactZIndexSortedSubviews]; -+ -+ // The default behaviour of UIKit is that if a view does not contain a point, -+ // then no subviews will be returned from hit testing, even if they contain -+ // the hit point. By doing hit testing directly on the subviews, we bypass -+ // the strict containment policy (i.e., UIKit guarantees that every ancestor -+ // of the hit view will return YES from -pointInside:withEvent:). See: -+ // - https://developer.apple.com/library/ios/qa/qa2013/qa1812.html -+ for (UIView *subview in [sortedSubviews reverseObjectEnumerator]) { -+ CGPoint convertedPoint = [subview convertPoint:point fromView:self]; -+ hitSubview = [subview hitTest:convertedPoint withEvent:event]; -+ if (hitSubview != nil) { -+ break; -+ } -+ } -+ } -+ return hitSubview; -+} -+ - @end - - @implementation RNSFullWindowOverlay { -@@ -89,19 +121,13 @@ - - - (void)didMoveToWindow - { -- if (self.window == nil) { -- if (_container != nil) { -- [_container removeFromSuperview]; -- [_touchHandler detachFromView:_container]; -- } -- } else { -- if (_touchHandler == nil) { -+ if (self.window != nil && _touchHandler == nil) { - #ifdef RN_FABRIC_ENABLED -- _touchHandler = [RCTSurfaceTouchHandler new]; -+ _touchHandler = [RCTSurfaceTouchHandler new]; - #else -- _touchHandler = [[RCTTouchHandler alloc] initWithBridge:_bridge]; -+ _touchHandler = [[RCTTouchHandler alloc] initWithBridge:_bridge]; - #endif -- } -+ - [_touchHandler attachToView:_container]; - } - } diff --git a/patches/react-native-screens+3.19.0.patch b/patches/react-native-screens+3.19.0.patch new file mode 100644 index 00000000000..3e2f085a9c3 --- /dev/null +++ b/patches/react-native-screens+3.19.0.patch @@ -0,0 +1,26 @@ +diff --git a/node_modules/react-native-screens/ios/RNSFullWindowOverlay.mm b/node_modules/react-native-screens/ios/RNSFullWindowOverlay.mm +index 17a8be4..df988dc 100644 +--- a/node_modules/react-native-screens/ios/RNSFullWindowOverlay.mm ++++ b/node_modules/react-native-screens/ios/RNSFullWindowOverlay.mm +@@ -121,19 +121,8 @@ + + - (void)didMoveToWindow + { +- if (self.window == nil) { +- if (_container != nil) { +- [_container removeFromSuperview]; +- [_touchHandler detachFromView:_container]; +- } +- } else { +- if (_touchHandler == nil) { +-#ifdef RN_FABRIC_ENABLED +- _touchHandler = [RCTSurfaceTouchHandler new]; +-#else +- _touchHandler = [[RCTTouchHandler alloc] initWithBridge:_bridge]; +-#endif +- } ++ if (self.window != nil && _touchHandler == nil) { ++ _touchHandler = [[RCTTouchHandler alloc] initWithBridge:_bridge]; + [_touchHandler attachToView:_container]; + } + } diff --git a/yarn.lock b/yarn.lock index 95178753d84..38640123e48 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5509,10 +5509,10 @@ __metadata: react-native-nested-scroll-view: "https://github.com/OneKeyHQ/react-native-nested-scroll-view.git" react-native-pager-view: 6.1.2 react-native-randombytes: ^3.6.1 - react-native-reanimated: ^2.14.1 + react-native-reanimated: ^2.14.2 react-native-restart: 0.0.24 react-native-safe-area-context: 4.4.1 - react-native-screens: 3.17.0 + react-native-screens: ^3.19.0 react-native-share: ^7.6.6 react-native-svg: ^13.7.0 react-native-tcp-socket: ^6.0.3 @@ -27292,9 +27292,9 @@ optjs@latest: languageName: node linkType: hard -"react-native-reanimated@npm:^2.14.1, react-native-reanimated@npm:^2.4.1": - version: 2.14.1 - resolution: "react-native-reanimated@npm:2.14.1" +"react-native-reanimated@npm:^2.14.2, react-native-reanimated@npm:^2.4.1": + version: 2.14.2 + resolution: "react-native-reanimated@npm:2.14.2" dependencies: "@babel/plugin-transform-object-assign": ^7.16.7 "@babel/preset-typescript": ^7.16.7 @@ -27307,7 +27307,7 @@ optjs@latest: "@babel/core": ^7.0.0-0 react: "*" react-native: "*" - checksum: 279ece43aa71601b8b490a7fa4350660e8f9dfc7bb760213f24e1920ef0fe649a0e2675efab0cb4085a61c65c69bff9fcb7fd743a071333256ca861488b5169e + checksum: 5ffd139e474c7412775bd92a0d3b2c45ac0e9dc2d6df5a15a08be3e7fa5f2a5ce0a2434180221a1fb43284569de94bfa9b99b7bbde844cb5da9e5a25d3511aeb languageName: node linkType: hard @@ -27365,16 +27365,16 @@ optjs@latest: languageName: node linkType: hard -"react-native-screens@npm:3.17.0": - version: 3.17.0 - resolution: "react-native-screens@npm:3.17.0" +"react-native-screens@npm:^3.19.0": + version: 3.19.0 + resolution: "react-native-screens@npm:3.19.0" dependencies: react-freeze: ^1.0.0 warn-once: ^0.1.0 peerDependencies: react: "*" react-native: "*" - checksum: c3523d56113c182ac13e487d09c04f2991f8151578cbbea34cf0abc9c5fbe9ee19664cfcb84b9620607791ae38fc61efcd72870534513a4afbd5b5da9a248b48 + checksum: 3a0116bf0628a735bdb87d7e4648f4bbac278152599a2bdd973e4dec92f87cb2c805dd7adb844d01236c7c92bab017ea8de59bea44d9f58397fddb6f9f3077c5 languageName: node linkType: hard From 464f4b8eac43a0f1feff5feb115660fe2e4f0e67 Mon Sep 17 00:00:00 2001 From: sunnylqm Date: Thu, 19 Jan 2023 22:06:39 +0800 Subject: [PATCH 3/7] chore: remove middleware check in prod --- packages/kit-bg/package.json | 1 - packages/kit/package.json | 2 -- packages/kit/src/store/middlewares.ts | 40 +++++++++++++-------------- yarn.lock | 28 ------------------- 4 files changed, 20 insertions(+), 51 deletions(-) diff --git a/packages/kit-bg/package.json b/packages/kit-bg/package.json index 59b15a34d2e..2ec7c033bfe 100644 --- a/packages/kit-bg/package.json +++ b/packages/kit-bg/package.json @@ -8,7 +8,6 @@ "@onekeyhq/components": "*", "@openzeppelin/contracts": "^4.5.0", "@reduxjs/toolkit": "^1.6.2", - "@types/redux-logger": "^3.0.9", "@types/url-parse": "^1.4.8", "@unstoppabledomains/resolution": "^8.3.3", "date-fns": "^2.27.0", diff --git a/packages/kit/package.json b/packages/kit/package.json index dad23cc5668..834a74e0208 100644 --- a/packages/kit/package.json +++ b/packages/kit/package.json @@ -6,7 +6,6 @@ "dependencies": { "@onekeyhq/components": "*", "@reduxjs/toolkit": "^1.6.2", - "@types/redux-logger": "^3.0.9", "@types/url-parse": "^1.4.8", "date-fns": "^2.27.0", "expo": "^45.0.5", @@ -40,7 +39,6 @@ "react-native-uuid": "^2.0.1", "react-native-vision-camera": "^2.15.2", "react-redux": "^7.2.6", - "redux-logger": "^3.0.6", "redux-persist": "^6.0.0", "rimraf": "^3.0.2", "semver": "^7.3.7", diff --git a/packages/kit/src/store/middlewares.ts b/packages/kit/src/store/middlewares.ts index 1f4401b4995..3a212d6a3df 100644 --- a/packages/kit/src/store/middlewares.ts +++ b/packages/kit/src/store/middlewares.ts @@ -10,36 +10,36 @@ import type { Middleware } from 'redux'; // return result as unknown; // }; -const backgroundCheck: Middleware = - () => (next) => (action) => { - if ( - action && - !action.$isDispatchFromBackground && - action.type && - // ignore redux-persist action - !(action.type as string).startsWith('persist/') - ) { - const msg = - 'dispatch(action) ERROR: action should be dispatched from background.'; - console.error(msg, action); - throw new Error(msg); - } - const result = next(action); - return result as unknown; - }; - const middlewares = [ // simpleLogger, // logger, - backgroundCheck, + // backgroundCheck, ]; -// eslint-disable-next-line no-undef if (__DEV__) { // eslint-disable-next-line global-require, @typescript-eslint/no-var-requires const createDebugger = require('redux-flipper').default; // eslint-disable-next-line @typescript-eslint/no-unsafe-call middlewares.push(createDebugger()); + + const backgroundCheck: Middleware = + () => (next) => (action) => { + if ( + action && + !action.$isDispatchFromBackground && + action.type && + // ignore redux-persist action + !(action.type as string).startsWith('persist/') + ) { + const msg = + 'dispatch(action) ERROR: action should be dispatched from background.'; + console.error(msg, action); + throw new Error(msg); + } + const result = next(action); + return result as unknown; + }; + middlewares.push(backgroundCheck); } export default middlewares; diff --git a/yarn.lock b/yarn.lock index 38640123e48..97eb40b925f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5681,7 +5681,6 @@ __metadata: "@reduxjs/toolkit": ^1.6.2 "@types/d3-scale": ^4.0.2 "@types/d3-shape": ^3.1.0 - "@types/redux-logger": ^3.0.9 "@types/socket.io-client": ^3.0.0 "@types/url-parse": ^1.4.8 "@unstoppabledomains/resolution": ^8.3.3 @@ -5706,7 +5705,6 @@ __metadata: "@types/d3-scale": ^4.0.2 "@types/d3-shape": ^3.1.0 "@types/react-native-snap-carousel": 3.8.5 - "@types/redux-logger": ^3.0.9 "@types/socket.io-client": ^3.0.0 "@types/url-parse": ^1.4.8 date-fns: ^2.27.0 @@ -5741,7 +5739,6 @@ __metadata: react-native-uuid: ^2.0.1 react-native-vision-camera: ^2.15.2 react-redux: ^7.2.6 - redux-logger: ^3.0.6 redux-persist: ^6.0.0 rimraf: ^3.0.2 semver: ^7.3.7 @@ -8522,15 +8519,6 @@ __metadata: languageName: node linkType: hard -"@types/redux-logger@npm:^3.0.9": - version: 3.0.9 - resolution: "@types/redux-logger@npm:3.0.9" - dependencies: - redux: ^4.0.0 - checksum: c41fdc09198fae2d62ff7d6bd029ccae1fed655e6a7abd40614a8db5d6e01adbe565881b2c8d398789804a48259e3399af3939f994a532c11904ba2021799275 - languageName: node - linkType: hard - "@types/responselike@npm:*, @types/responselike@npm:^1.0.0": version: 1.0.0 resolution: "@types/responselike@npm:1.0.0" @@ -14267,13 +14255,6 @@ colour@latest: languageName: node linkType: hard -"deep-diff@npm:^0.3.5": - version: 0.3.8 - resolution: "deep-diff@npm:0.3.8" - checksum: 8a0fb6cbe468e50211836f8daa1c14798b2d7436bfbcb7d8eb0902e0d61bf1dfd48d5b9edd46a10596182b90ad25f87461b8e55111ff9257b6067ad0676f79c9 - languageName: node - linkType: hard - "deep-eql@npm:^0.1.3": version: 0.1.3 resolution: "deep-eql@npm:0.1.3" @@ -27967,15 +27948,6 @@ optjs@latest: languageName: node linkType: hard -"redux-logger@npm:^3.0.6": - version: 3.0.6 - resolution: "redux-logger@npm:3.0.6" - dependencies: - deep-diff: ^0.3.5 - checksum: c40f63c44c6475cf6374ae0eaa810d913f142614cb80692a0beacaf135c5dc3eb3e2cdd4296f01446ba48cb69b82e81363b84d829f1f6659382c991022a814ac - languageName: node - linkType: hard - "redux-persist@npm:^6.0.0": version: 6.0.0 resolution: "redux-persist@npm:6.0.0" From dcbb9217c688d116bc53a84af5ac0e36a81f10dd Mon Sep 17 00:00:00 2001 From: sunnylqm Date: Thu, 19 Jan 2023 22:55:28 +0800 Subject: [PATCH 4/7] fix: lazy freeze --- packages/app/ios/Podfile.lock | 4 +- packages/app/package.json | 2 +- packages/kit/src/components/DelayedFreeze.tsx | 28 ++++++++++++ .../src/components/LazyRenderWhenFocus.tsx | 7 +-- packages/kit/src/hooks/useManageTokens.ts | 45 ++++++++----------- yarn.lock | 10 ++--- 6 files changed, 59 insertions(+), 37 deletions(-) create mode 100644 packages/kit/src/components/DelayedFreeze.tsx diff --git a/packages/app/ios/Podfile.lock b/packages/app/ios/Podfile.lock index ac3c9ca100e..2e8a9e77fe2 100644 --- a/packages/app/ios/Podfile.lock +++ b/packages/app/ios/Podfile.lock @@ -666,7 +666,7 @@ PODS: - RNFBApp - RNGestureHandler (2.9.0): - React-Core - - RNReanimated (2.14.2): + - RNReanimated (2.14.4): - DoubleConversion - FBLazyVector - FBReactNativeSpec @@ -1202,7 +1202,7 @@ SPEC CHECKSUMS: RNFBCrashlytics: 94e1f78e2a9aa9e02edbfb0d3f1f0921ce00094b RNFBPerf: b85b621a4d15905847e8627a6aa67ad894e8e166 RNGestureHandler: 071d7a9ad81e8b83fe7663b303d132406a7d8f39 - RNReanimated: e2375194a96655a207deb65ff6f776408be41694 + RNReanimated: 96c7ed2bf57734510de5bde1efb9b58ebd351203 RNScreens: ea4cd3a853063cda19a4e3c28d2e52180c80f4eb RNShare: d56424e3926cbc239db1cc1c168adcb051aad50b RNSVG: d787d64ca06b9158e763ad2638a8c4edce00782a diff --git a/packages/app/package.json b/packages/app/package.json index 872bc09248f..8d723f0f26c 100644 --- a/packages/app/package.json +++ b/packages/app/package.json @@ -80,7 +80,7 @@ "react-native-nested-scroll-view": "https://github.com/OneKeyHQ/react-native-nested-scroll-view.git", "react-native-pager-view": "6.1.2", "react-native-randombytes": "^3.6.1", - "react-native-reanimated": "^2.14.2", + "react-native-reanimated": "^2.14.4", "react-native-restart": "0.0.24", "react-native-safe-area-context": "4.4.1", "react-native-screens": "^3.19.0", diff --git a/packages/kit/src/components/DelayedFreeze.tsx b/packages/kit/src/components/DelayedFreeze.tsx new file mode 100644 index 00000000000..48ea447d93f --- /dev/null +++ b/packages/kit/src/components/DelayedFreeze.tsx @@ -0,0 +1,28 @@ +// This component allows one more render before freezing the screen. + +import type { ReactNode } from 'react'; +import { useEffect, useState } from 'react'; + +import { Freeze } from 'react-freeze'; + +interface FreezeWrapperProps { + freeze: boolean; + children: ReactNode; +} + +// https://github.com/software-mansion/react-native-screens/issues/1198#issuecomment-1306478805 + +// Allows activityState to reach the native side and useIsFocused to work correctly. +function DelayedFreeze({ freeze, children }: FreezeWrapperProps) { + // flag used for determining whether freeze should be enabled + const [freezeState, setFreezeState] = useState(false); + + useEffect(() => { + setImmediate(() => { + setFreezeState(freeze); + }); + }, [freeze]); + + return {children}; +} +export default DelayedFreeze; diff --git a/packages/kit/src/components/LazyRenderWhenFocus.tsx b/packages/kit/src/components/LazyRenderWhenFocus.tsx index 0f82f0a2a1c..c4604a2054e 100644 --- a/packages/kit/src/components/LazyRenderWhenFocus.tsx +++ b/packages/kit/src/components/LazyRenderWhenFocus.tsx @@ -1,7 +1,6 @@ import { useEffect, useRef } from 'react'; import { useIsFocused } from '@react-navigation/native'; -import { Freeze } from 'react-freeze'; import platformEnv from '@onekeyhq/shared/src/platformEnv'; @@ -10,6 +9,8 @@ import { isModalRouteExisting, } from '../utils/routeUtils'; +import DelayedFreeze from './DelayedFreeze'; + export interface ILazyRenderWhenFocusProps { unmountWhenBlur?: boolean; freezeWhenBlur?: boolean; @@ -66,9 +67,9 @@ export function LazyRenderWhenFocus({ // eslint-disable-next-line @typescript-eslint/no-unsafe-return return ( - + {isFocusedRef.current || isFocused ? children : null} - + ); } export function toFocusedLazy( diff --git a/packages/kit/src/hooks/useManageTokens.ts b/packages/kit/src/hooks/useManageTokens.ts index 6cd69bbf025..2b3a51e9215 100644 --- a/packages/kit/src/hooks/useManageTokens.ts +++ b/packages/kit/src/hooks/useManageTokens.ts @@ -51,38 +51,33 @@ export const useManageTokensOfAccount = ({ return map; }, [accountTokens]); + const fetchAccountTokens = useCallback(() => { + // TODO may cause circular refresh in UI + backgroundApiProxy.serviceToken.fetchAccountTokensDebounced({ + activeAccountId: accountId, + activeNetworkId: networkId, + withBalance: true, + }); + }, [accountId, networkId]); + useEffect(() => { let timer: ReturnType | undefined; - if (pollingInterval && isFocused && accountId && networkId) { - // TODO may cause circular refresh in UI - backgroundApiProxy.serviceToken.fetchAccountTokensDebounced({ - activeAccountId: accountId, - activeNetworkId: networkId, - withBalance: true, - }); + if (pollingInterval && accountId && networkId) { + fetchAccountTokens(); timer = setInterval(() => { - backgroundApiProxy.serviceToken.fetchAccountTokensDebounced({ - activeAccountId: accountId, - activeNetworkId: networkId, - withBalance: true, - }); - }, pollingInterval); + if (isFocused) { + fetchAccountTokens(); + } + }, 3000); } return () => { - if (timer) { - clearInterval(timer); - } + clearInterval(timer); }; - }, [isFocused, pollingInterval, accountId, networkId]); + }, [pollingInterval, accountId, networkId, fetchAccountTokens, isFocused]); useEffect(() => { if (fetchTokensOnMount && accountId && networkId) { - // TODO may cause circular refresh in UI - backgroundApiProxy.serviceToken.fetchAccountTokensDebounced({ - activeAccountId: accountId, - activeNetworkId: networkId, - withBalance: true, - }); + fetchAccountTokens(); } // eslint-disable-next-line }, []); @@ -93,9 +88,7 @@ export const useManageTokensOfAccount = ({ accountId, networkId, }) - .then((value) => { - setFrozenBalance(value); - }); + .then(setFrozenBalance); }, [accountId, networkId]); const getTokenBalance = useCallback( diff --git a/yarn.lock b/yarn.lock index 97eb40b925f..e50aa75280a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5509,7 +5509,7 @@ __metadata: react-native-nested-scroll-view: "https://github.com/OneKeyHQ/react-native-nested-scroll-view.git" react-native-pager-view: 6.1.2 react-native-randombytes: ^3.6.1 - react-native-reanimated: ^2.14.2 + react-native-reanimated: ^2.14.4 react-native-restart: 0.0.24 react-native-safe-area-context: 4.4.1 react-native-screens: ^3.19.0 @@ -27273,9 +27273,9 @@ optjs@latest: languageName: node linkType: hard -"react-native-reanimated@npm:^2.14.2, react-native-reanimated@npm:^2.4.1": - version: 2.14.2 - resolution: "react-native-reanimated@npm:2.14.2" +"react-native-reanimated@npm:^2.14.4, react-native-reanimated@npm:^2.4.1": + version: 2.14.4 + resolution: "react-native-reanimated@npm:2.14.4" dependencies: "@babel/plugin-transform-object-assign": ^7.16.7 "@babel/preset-typescript": ^7.16.7 @@ -27288,7 +27288,7 @@ optjs@latest: "@babel/core": ^7.0.0-0 react: "*" react-native: "*" - checksum: 5ffd139e474c7412775bd92a0d3b2c45ac0e9dc2d6df5a15a08be3e7fa5f2a5ce0a2434180221a1fb43284569de94bfa9b99b7bbde844cb5da9e5a25d3511aeb + checksum: ec24225a145a8636065b464660256bed99ba5f50c7f6c74899838f5563e59a342ea217c285a06be8bdd5549e2faaf1ebdac6986011a767ba814a4cf469ed9bdb languageName: node linkType: hard From f68d6494a50c190128e2dbedff47f505c315fc4f Mon Sep 17 00:00:00 2001 From: sunnylqm Date: Fri, 20 Jan 2023 09:47:31 +0800 Subject: [PATCH 5/7] fix: lint --- packages/components/src/OverlayContainer/index.tsx | 2 +- packages/kit/src/hooks/useManageTokens.ts | 2 +- packages/kit/src/provider/index.tsx | 2 +- packages/kit/src/store/middlewares.ts | 2 +- packages/kit/src/views/Discover/Explorer/explorerAnimation.ts | 4 ++-- packages/kit/src/views/Discover/MyDAppList/desktop.tsx | 2 +- packages/kit/src/views/ManageNetworks/RPCNode/index.tsx | 2 +- packages/shared/src/request/normalize/normalizeWs.ts | 2 +- packages/web/App.tsx | 2 +- 9 files changed, 10 insertions(+), 10 deletions(-) diff --git a/packages/components/src/OverlayContainer/index.tsx b/packages/components/src/OverlayContainer/index.tsx index d0944332caa..cd970179c61 100644 --- a/packages/components/src/OverlayContainer/index.tsx +++ b/packages/components/src/OverlayContainer/index.tsx @@ -15,7 +15,7 @@ const OverlayContainer: FC<{ useFullWindowForIOS?: boolean }> = ({ ? FullWindowOverlay : RootSiblingPortal; return ( - + { clearInterval(timer); diff --git a/packages/kit/src/provider/index.tsx b/packages/kit/src/provider/index.tsx index 43c21b71980..ebc4444b4ed 100644 --- a/packages/kit/src/provider/index.tsx +++ b/packages/kit/src/provider/index.tsx @@ -68,7 +68,7 @@ const KitProvider: FC = (propsRaw) => { // but can not work with modal // https://github.com/software-mansion/react-native-screens/issues/1149 // so now only used for toast - + [] = [ // simpleLogger, // logger, // backgroundCheck, diff --git a/packages/kit/src/views/Discover/Explorer/explorerAnimation.ts b/packages/kit/src/views/Discover/Explorer/explorerAnimation.ts index 4487defe674..fa0892261bd 100644 --- a/packages/kit/src/views/Discover/Explorer/explorerAnimation.ts +++ b/packages/kit/src/views/Discover/Explorer/explorerAnimation.ts @@ -34,13 +34,13 @@ export const setThumbnailRatio = (ratio: number) => { thumbnailRatio = ratio; }; const thumbnailWidth = 340; -const getTabCellLayout = (tabId: string, callback?: () => void) => { +const getTabCellLayout = (tabId: string, callback: () => void) => { tabGridRefs[tabId]?.measure((x, y, width, height, pageX, pageY) => { targetPreviewX.value = pageX; targetPreviewY.value = pageY; targetPreviewWidth.value = width; targetPreviewHeight.value = height; - callback?.(); + callback(); }); }; export const showTabGrid = () => { diff --git a/packages/kit/src/views/Discover/MyDAppList/desktop.tsx b/packages/kit/src/views/Discover/MyDAppList/desktop.tsx index c9e7bb2bce1..75be2146056 100644 --- a/packages/kit/src/views/Discover/MyDAppList/desktop.tsx +++ b/packages/kit/src/views/Discover/MyDAppList/desktop.tsx @@ -150,7 +150,7 @@ const Favorites = () => { callback={showFavoriteMenu} /> ), - [], + [cardWidth], ); return ( diff --git a/packages/kit/src/views/ManageNetworks/RPCNode/index.tsx b/packages/kit/src/views/ManageNetworks/RPCNode/index.tsx index ef197787991..1e41429fcf3 100644 --- a/packages/kit/src/views/ManageNetworks/RPCNode/index.tsx +++ b/packages/kit/src/views/ManageNetworks/RPCNode/index.tsx @@ -19,7 +19,7 @@ import backgroundApiProxy from '../../../background/instance/backgroundApiProxy' import { useNetwork } from '../../../hooks'; import { updateCustomNetworkRpc } from '../../../store/reducers/settings'; import AddNodeDialog from '../components/AddNodeDialog'; -import RestartAppDialog from '../components/RestartDialog'; +// import RestartAppDialog from '../components/RestartDialog'; import { RPCItem } from '../components/RPCItem'; import { measureRpc, useRPCUrls } from '../hooks'; diff --git a/packages/shared/src/request/normalize/normalizeWs.ts b/packages/shared/src/request/normalize/normalizeWs.ts index e8c54be1ad5..d82ae2f3a91 100644 --- a/packages/shared/src/request/normalize/normalizeWs.ts +++ b/packages/shared/src/request/normalize/normalizeWs.ts @@ -3,7 +3,7 @@ - browser: window.WebSocket - rn: global.WebSocket */ -import { usingBrowserWebSocket } from 'engine.io-client/build/esm/transports/websocket-constructor.js'; +// import { usingBrowserWebSocket } from 'engine.io-client/build/esm/transports/websocket-constructor.js'; import ws from 'ws'; /* diff --git a/packages/web/App.tsx b/packages/web/App.tsx index 5c21472b635..21f4c99d7b2 100644 --- a/packages/web/App.tsx +++ b/packages/web/App.tsx @@ -1,4 +1,4 @@ -// eslint-disable-next-line import/order +/* eslint-disable import/order */ import '@onekeyhq/shared/src/polyfill'; import { Provider } from '@onekeyhq/kit'; From 9e221a3a7a6a385ae7ca5cadafb8c03aa69a4115 Mon Sep 17 00:00:00 2001 From: sunnylqm Date: Tue, 24 Jan 2023 00:43:51 +0800 Subject: [PATCH 6/7] fix: optimize web tabs --- .../Discover/Explorer/Controller/gotoSite.tsx | 6 +++- .../Explorer/Desktop/TabbedWebContainer.tsx | 35 +++++++++---------- .../Discover/Explorer/Mobile/WebTabFront.tsx | 27 +++++++------- .../Discover/Explorer/explorerAnimation.ts | 2 +- 4 files changed, 35 insertions(+), 35 deletions(-) diff --git a/packages/kit/src/views/Discover/Explorer/Controller/gotoSite.tsx b/packages/kit/src/views/Discover/Explorer/Controller/gotoSite.tsx index ffd10c74b25..b15f037a6ff 100644 --- a/packages/kit/src/views/Discover/Explorer/Controller/gotoSite.tsx +++ b/packages/kit/src/views/Discover/Explorer/Controller/gotoSite.tsx @@ -14,7 +14,7 @@ import { import { openUrl } from '../../../../utils/openUrl'; import { crossWebviewLoadUrl, validateUrl, webHandler } from '../explorerUtils'; -import type { WebSiteHistory } from '../../type'; +import type { DAppItemType, WebSiteHistory } from '../../type'; import type { MatchDAppItemType } from '../explorerUtils'; export const gotoSite = ({ @@ -173,3 +173,7 @@ export const openMatchDApp = ({ }); } }; + +export const onItemSelect = (dapp: DAppItemType) => { + openMatchDApp({ id: dapp._id, dapp }); +}; diff --git a/packages/kit/src/views/Discover/Explorer/Desktop/TabbedWebContainer.tsx b/packages/kit/src/views/Discover/Explorer/Desktop/TabbedWebContainer.tsx index a5ef30a9f7a..e08724f52ea 100644 --- a/packages/kit/src/views/Discover/Explorer/Desktop/TabbedWebContainer.tsx +++ b/packages/kit/src/views/Discover/Explorer/Desktop/TabbedWebContainer.tsx @@ -2,18 +2,24 @@ import { memo, useCallback } from 'react'; import { useFocusEffect } from '@react-navigation/native'; import { Freeze } from 'react-freeze'; -import { View } from 'react-native'; +import { StyleSheet, View } from 'react-native'; import { Box } from '@onekeyhq/components'; import { homeTab } from '../../../../store/reducers/webTabs'; import DiscoverHome from '../../Home'; import WebContent from '../Content/WebContent'; -import { gotoSite, openMatchDApp } from '../Controller/gotoSite'; +import { gotoSite, onItemSelect, openMatchDApp } from '../Controller/gotoSite'; import { useIncomingUrl } from '../Controller/useIncomingUrl'; import { useNotifyChanges } from '../Controller/useNotifyChanges'; import { useWebTabs } from '../Controller/useWebTabs'; +const styles = StyleSheet.create({ + blankPage: { + ...StyleSheet.absoluteFillObject, + zIndex: 1, + }, +}); const TabbedWebContainer = memo(() => { useNotifyChanges(); const { tabs, tab } = useWebTabs(); @@ -36,23 +42,14 @@ const TabbedWebContainer = memo(() => { ))} - - { - openMatchDApp({ id: dapp._id, dapp }); - }} - onItemSelectHistory={openMatchDApp} - /> - + + + + + ); }); diff --git a/packages/kit/src/views/Discover/Explorer/Mobile/WebTabFront.tsx b/packages/kit/src/views/Discover/Explorer/Mobile/WebTabFront.tsx index 018dba5d7c6..a2ef130f3be 100644 --- a/packages/kit/src/views/Discover/Explorer/Mobile/WebTabFront.tsx +++ b/packages/kit/src/views/Discover/Explorer/Mobile/WebTabFront.tsx @@ -7,7 +7,7 @@ import ViewShot from 'react-native-view-shot'; import { homeTab } from '../../../../store/reducers/webTabs'; import DiscoverHome from '../../Home'; import WebContent from '../Content/WebContent'; -import { openMatchDApp } from '../Controller/gotoSite'; +import { onItemSelect, openMatchDApp } from '../Controller/gotoSite'; import { useNotifyChanges } from '../Controller/useNotifyChanges'; import { useWebTabs } from '../Controller/useWebTabs'; import { setThumbnailRatio, tabViewShotRef } from '../explorerAnimation'; @@ -16,6 +16,10 @@ const styles = StyleSheet.create({ container: { flex: 1, }, + blankPage: { + ...StyleSheet.absoluteFillObject, + zIndex: 1, + }, }); const WebTabFront = memo(() => { useNotifyChanges(); @@ -45,19 +49,14 @@ const WebTabFront = memo(() => { return ( {content} - - { - openMatchDApp({ id: dapp._id, dapp }); - }} - onItemSelectHistory={openMatchDApp} - /> - + + + + + ); }); diff --git a/packages/kit/src/views/Discover/Explorer/explorerAnimation.ts b/packages/kit/src/views/Discover/Explorer/explorerAnimation.ts index fa0892261bd..75d5ce904a7 100644 --- a/packages/kit/src/views/Discover/Explorer/explorerAnimation.ts +++ b/packages/kit/src/views/Discover/Explorer/explorerAnimation.ts @@ -45,7 +45,7 @@ const getTabCellLayout = (tabId: string, callback: () => void) => { }; export const showTabGrid = () => { const { currentTabId } = appSelector((s) => s.webTabs); - if (platformEnv.isNative) { + if (platformEnv.isNative && tabViewShotRef.current) { captureRef(tabViewShotRef, { format: 'jpg', width: thumbnailWidth, From b72cd70be7458d7c740ec96d04e0adce477c23ac Mon Sep 17 00:00:00 2001 From: sunnylqm Date: Thu, 26 Jan 2023 18:35:02 +0800 Subject: [PATCH 7/7] feat: add memo to buttons --- packages/components/src/Button/ButtonCapture.tsx | 4 ++-- packages/components/src/Button/index.tsx | 4 ++-- packages/components/src/Pressable/Pressable.tsx | 4 ++-- packages/components/src/Pressable/PressableItem.tsx | 4 ++-- 4 files changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/components/src/Button/ButtonCapture.tsx b/packages/components/src/Button/ButtonCapture.tsx index fcd216ddf23..a027f3fa6ea 100644 --- a/packages/components/src/Button/ButtonCapture.tsx +++ b/packages/components/src/Button/ButtonCapture.tsx @@ -1,4 +1,4 @@ -import { forwardRef, useCallback } from 'react'; +import { forwardRef, memo, useCallback } from 'react'; import { Button } from 'native-base'; @@ -26,4 +26,4 @@ const ButtonCapture = forwardRef( ); ButtonCapture.displayName = 'ButtonCapture'; -export default ButtonCapture; +export default memo(ButtonCapture); diff --git a/packages/components/src/Button/index.tsx b/packages/components/src/Button/index.tsx index 9fa3f8369a8..6f4e43b90a6 100644 --- a/packages/components/src/Button/index.tsx +++ b/packages/components/src/Button/index.tsx @@ -3,7 +3,7 @@ import type { ForwardRefExoticComponent, RefAttributes, } from 'react'; -import { forwardRef, useCallback, useEffect, useState } from 'react'; +import { forwardRef, memo, useCallback, useEffect, useState } from 'react'; import { StyleSheet } from 'react-native'; @@ -552,4 +552,4 @@ const OkButton = forwardRef< }); OkButton.displayName = 'OkButton'; -export default OkButton; +export default memo(OkButton); diff --git a/packages/components/src/Pressable/Pressable.tsx b/packages/components/src/Pressable/Pressable.tsx index 225aa31ff9a..6d678100f90 100644 --- a/packages/components/src/Pressable/Pressable.tsx +++ b/packages/components/src/Pressable/Pressable.tsx @@ -1,5 +1,5 @@ import type { ComponentProps } from 'react'; -import { forwardRef, useCallback } from 'react'; +import { forwardRef, memo, useCallback } from 'react'; import { Pressable as NBPressable } from 'native-base'; @@ -37,4 +37,4 @@ const PressableCapture = forwardRef( PressableCapture.displayName = 'Pressable'; -export default PressableCapture; +export default memo(PressableCapture); diff --git a/packages/components/src/Pressable/PressableItem.tsx b/packages/components/src/Pressable/PressableItem.tsx index 89bd91a0afc..1228eb9ba32 100644 --- a/packages/components/src/Pressable/PressableItem.tsx +++ b/packages/components/src/Pressable/PressableItem.tsx @@ -1,5 +1,5 @@ import type { ComponentProps, FC } from 'react'; -import { useCallback } from 'react'; +import { memo, useCallback } from 'react'; import { Pressable as NBPressable } from 'native-base'; @@ -53,4 +53,4 @@ const PressableItem: FC = ({ ); }; -export { PressableItem as default }; +export default memo(PressableItem);