Merge branch 'feat/last-used-account' into style/next_components

RabbyHub · Nov 22, 2024 · be54e4c · be54e4c
2 parents 4581ca3 + 0f0d67f
commit be54e4c
Show file tree

Hide file tree

Showing 31 changed files with 615 additions and 135 deletions.
diff --git a/apps/mobile/src/App.tsx b/apps/mobile/src/App.tsx
@@ -30,6 +30,7 @@ import { useGlobalAppPreventScreenrecordOnDev } from './hooks/appSettings';
 import { useAppPreventScreenshotOnScreen } from './hooks/navigation';
 import { useAutoGoogleSignIfPreviousSignedOnTop } from './hooks/cloudStorage';
 import { useNoLongerSupports } from './components2024/NoLongerSupports/useNoLongerSupports';
+import { useCurrentAccountOnAppTop } from './hooks/account';
 
 const rneuiTheme = createTheme({
   lightColors: {
@@ -56,6 +57,7 @@ function MainScreen({ rabbitCode }: AppProps) {
   useAppPreventScreenshotOnScreen();
   useAutoGoogleSignIfPreviousSignedOnTop();
   useNoLongerSupports();
+  useCurrentAccountOnAppTop();
 
   const initAccounts = useMemoizedFn(async () => {
     const accounts = await keyringService.getAllVisibleAccountsArray();

diff --git a/apps/mobile/src/AppNavigation.tsx b/apps/mobile/src/AppNavigation.tsx
@@ -56,7 +56,7 @@ import { ScannerScreen } from './screens/Scanner/ScannerScreen';
 import { FloatViewAutoLockCount } from './screens/Settings/components/FloatView';
 import UnlockScreen from './screens/Unlock/Unlock';
 import { SingleAddressNavigator } from './screens/Navigators/SingleAddressNavigator';
-import { GlobalAccountSwitcherStub } from './components/AccountSwitcher/SheetModal';
+// import { GlobalAccountSwitcherStub } from './components/AccountSwitcher/SheetModal';
 
 const RootStack = createNativeStackNavigator<RootStackParamsList>();
 

diff --git a/apps/mobile/src/components/AccountSwitcher/AccountsPanel.tsx b/apps/mobile/src/components/AccountSwitcher/AccountsPanel.tsx
@@ -10,12 +10,18 @@ import {
 
 import { default as RcCaretDownCC } from './icons/caret-down-cc.svg';
 import TouchableView from '../Touchable/TouchableView';
-import { useSceneAccountInfo } from '@/hooks/accountsSwitcher';
-import { AccountSwitcherAopProps } from './hooks';
+import {
+  isSameAccount,
+  useSceneAccountInfo,
+  useSwitchSceneCurrentAccount,
+} from '@/hooks/accountsSwitcher';
+import { AccountSwitcherAopProps, useAccountSceneVisible } from './hooks';
 import React, { useCallback, useEffect, useMemo } from 'react';
 import { AddressItem } from '@/components2024/AddressItem/AddressItem';
 import { ICONS_COMMON_2024 } from '@/assets2024/icons/common';
 import RcIconCorrectCC from './icons/correct-cc.svg';
+import { apisAccountSwitch } from '@/core/apis';
+import { Account } from '@/core/services/preference';
 
 const MY_ADDRESS_LIMIT = 3;
 
@@ -35,19 +41,24 @@ function AddressItemInPanel({
   addressItemProps,
   isCurrent,
   isPinned,
-  onPressAddress,
+  onPressAddress: proponPressAddress,
 }: {
-  addressItemProps: AddressItemProps;
+  addressItemProps: AddressItemProps & { account: Account };
   isCurrent?: boolean;
   isPinned?: boolean;
-  onPressAddress?: () => void;
+  onPressAddress?: (account: Account) => void;
 } & RNViewProps) {
   const { styles, colors2024 } = useTheme2024({
     getStyle: getAddressItemInPanelStyle,
   });
 
   const [isPressing, setIsPressing] = React.useState(false);
 
+  const { account } = addressItemProps;
+  const onPressAddress = useCallback(() => {
+    proponPressAddress?.(account);
+  }, [account, proponPressAddress]);
+
   return (
     <TouchableOpacity
       style={StyleSheet.flatten([
@@ -237,23 +248,27 @@ const SectionCollapsableNav = function ({
 
 export function AccountsPanelInModal({
   forScene,
-  isVisible = false,
-}: AccountSwitcherAopProps<{
-  isVisible?: boolean;
+}: // isVisible = false,
+AccountSwitcherAopProps<{
+  // isVisible?: boolean;
 }>) {
-  const { styles, colors2024 } = useTheme2024({ getStyle: getPanelStyle });
+  const { styles } = useTheme2024({ getStyle: getPanelStyle });
+
+  const { isVisible, toggleSceneVisible } = useAccountSceneVisible(forScene);
 
   const {
     isPinnedAccount,
-    sceneCurrentAccount,
+    finalSceneCurrentAccount,
     myAddresses,
     safeAddresses,
     watchAddresses,
   } = useSceneAccountInfo({
     forScene,
-    disableAutoFetch: false,
+    // disableAutoFetch: false,
   });
 
+  const { switchSceneCurrentAccount } = useSwitchSceneCurrentAccount();
+
   const scrollViewRef = React.useRef<ScrollView>(null);
   const scrollToBottom = useCallback(() => {
     scrollViewRef.current?.scrollToEnd({ animated: true });
@@ -264,6 +279,16 @@ export function AccountsPanelInModal({
   const [watchAddressNavCollapsed, setWatchAddressNavCollapsed] =
     React.useState(true);
 
+  const handlePressAccount = useCallback<
+    React.ComponentProps<typeof AddressItemInPanel>['onPressAddress'] & object
+  >(
+    async account => {
+      switchSceneCurrentAccount(forScene, account);
+      toggleSceneVisible(forScene, false);
+    },
+    [forScene, switchSceneCurrentAccount, toggleSceneVisible],
+  );
+
   return (
     <View style={styles.panel}>
       <View style={styles.scrollViewContainer}>
@@ -276,17 +301,18 @@ export function AccountsPanelInModal({
             <View style={styles.addressListContainer}>
               {myAddresses.map((account, index) => {
                 const key = `account-${account.address}-${account.brandName}-${index}`;
-                const isCurrent =
-                  sceneCurrentAccount?.address === account.address &&
-                  sceneCurrentAccount?.brandName === account.brandName &&
-                  sceneCurrentAccount?.type === account.type;
+                const isCurrent = isSameAccount(
+                  account,
+                  finalSceneCurrentAccount,
+                );
 
                 return (
                   <AddressItemInPanel
                     key={key}
                     addressItemProps={{ account }}
                     isCurrent={isCurrent}
                     isPinned={isPinnedAccount(account)}
+                    onPressAddress={handlePressAccount}
                     style={[index > 0 && styles.addressItemTopGap]}
                   />
                 );
@@ -307,16 +333,18 @@ export function AccountsPanelInModal({
                 <View style={styles.addressListContainer}>
                   {safeAddresses.map((account, index) => {
                     const key = `account-${account.address}-${account.brandName}-${index}`;
-                    const isCurrent =
-                      sceneCurrentAccount?.address === account.address &&
-                      sceneCurrentAccount?.brandName === account.brandName &&
-                      sceneCurrentAccount?.type === account.type;
+                    const isCurrent = isSameAccount(
+                      account,
+                      finalSceneCurrentAccount,
+                    );
 
                     return (
                       <AddressItemInPanel
                         key={key}
                         addressItemProps={{ account }}
                         isCurrent={isCurrent}
+                        isPinned={false}
+                        onPressAddress={handlePressAccount}
                         style={[index > 0 && styles.addressItemTopGap]}
                       />
                     );
@@ -339,16 +367,18 @@ export function AccountsPanelInModal({
                 <View style={styles.addressListContainer}>
                   {watchAddresses.map((account, index) => {
                     const key = `account-${account.address}-${account.brandName}-${index}`;
-                    const isCurrent =
-                      sceneCurrentAccount?.address === account.address &&
-                      sceneCurrentAccount?.brandName === account.brandName &&
-                      sceneCurrentAccount?.type === account.type;
+                    const isCurrent = isSameAccount(
+                      account,
+                      finalSceneCurrentAccount,
+                    );
 
                     return (
                       <AddressItemInPanel
                         key={key}
                         addressItemProps={{ account }}
                         isCurrent={isCurrent}
+                        isPinned={false}
+                        onPressAddress={handlePressAccount}
                         style={[index > 0 && styles.addressItemTopGap]}
                       />
                     );

diff --git a/apps/mobile/src/components/AccountSwitcher/Modal.tsx b/apps/mobile/src/components/AccountSwitcher/Modal.tsx
@@ -1,6 +1,10 @@
-import { Dimensions, Text, TouchableOpacity, View } from 'react-native';
-import { AccountSwitcherAopProps, useAccountSwitcherScenes } from './hooks';
-import { createGetStyles2024, makeDevOnlyStyle } from '@/utils/styles';
+import { TouchableOpacity, TouchableWithoutFeedback, View } from 'react-native';
+import { AccountSwitcherAopProps, useAccountSceneVisible } from './hooks';
+import {
+  createGetStyles2024,
+  makeDebugBorder,
+  makeDevOnlyStyle,
+} from '@/utils/styles';
 import { useTheme2024 } from '@/hooks/theme';
 import { useSafeOffTop } from '@/hooks/useAppLayout';
 import { ScreenWithAccountSwitcherLayouts } from '@/constant/layout';
@@ -14,7 +18,7 @@ export function AccountSwitcherModal({
 }: AccountSwitcherAopProps<{
   inScreen?: boolean;
 }>) {
-  const { isVisible, toggleSceneVisible } = useAccountSwitcherScenes(forScene);
+  const { isVisible, toggleSceneVisible } = useAccountSceneVisible(forScene);
 
   const { styles } = useTheme2024({ getStyle: getModalStyle });
 
@@ -36,26 +40,29 @@ export function AccountSwitcherModal({
   };
 
   return (
-    <View
+    <AutoLockView
       style={[
         styles.container,
         inScreen && { zIndex: 19 },
         !isVisible && { display: 'none' },
         absoluteStyle,
       ]}>
       <TouchableOpacity
-        onPress={() => {
-          setTimeout(() => {
-            toggleSceneVisible(forScene, false);
-          }, 50);
+        onPressIn={() => {
+          toggleSceneVisible(forScene, false);
         }}
         style={[styles.bgMask, { height: absoluteStyle.maxHeight }]}
+        delayLongPress={1000}
       />
-      <AutoLockView
-        style={[styles.panelContainer, { maxHeight: absoluteStyle.maxHeight }]}>
-        <AccountsPanelInModal forScene={forScene} isVisible={isVisible} />
-      </AutoLockView>
-    </View>
+      <View
+        style={[styles.panelContainer, { maxHeight: absoluteStyle.maxHeight }]}
+        // onPressIn={() => {
+        //   toggleSceneVisible(forScene, false);
+        // }}
+      >
+        <AccountsPanelInModal forScene={forScene} />
+      </View>
+    </AutoLockView>
   );
 }
 
@@ -77,7 +84,8 @@ const getModalStyle = createGetStyles2024(ctx => {
     panelContainer: {
       position: 'relative',
       width: '100%',
-      maxHeight: '80%',
+      // height: '50%',
+      maxHeight: '90%',
       // ...makeDevOnlyStyle({
       //   backgroundColor: 'blue',
       // }),