Merge pull request berty#4462 from clegirar/chore/move-multi-account-…

…in-devtools

chore: move multi account features in devtools

js/e2e-tests/lib.js

@@ -29,6 +29,8 @@ const getCapabilitiesFromEnv = () => {
 		throw new Error('no app provided')
 	}
 
+	const timeout = 60 * 60 * 1000
+
 	switch (platform) {
 		case 'iOS':
 			return {
@@ -37,9 +39,9 @@ const getCapabilitiesFromEnv = () => {
 				'appium:deviceName': process.env.IOS_DEVICE || 'iPhone 11',
 				'appium:app': app,
 				'appium:automationName': 'XCUITest', // UiAutomator2, Espresso, or UiAutomator1 for Android,
-				'appium:simulatorStartupTimeout': 10 * 60 * 1000,
-				'appium:wdaLaunchTimeout': 10 * 60 * 1000,
-				'appium:wdaConnectionTimeout': 10 * 60 * 1000,
+				'appium:simulatorStartupTimeout': timeout,
+				'appium:wdaLaunchTimeout': timeout,
+				'appium:wdaConnectionTimeout': timeout,
 				'appium:wdaStartupRetries': 4,
 			}
 		case 'Android':

js/packages/hooks/accounts.hooks.ts

@@ -1,12 +1,14 @@
 import { NavigationProp } from '@react-navigation/native'
 import { useCallback } from 'react'
+import { Alert } from 'react-native'
 
 import beapi from '@berty/api'
 import { GoBridge } from '@berty/native-modules/GoBridge'
 import { useNavigation } from '@berty/navigation'
 import { ScreensParams } from '@berty/navigation/types'
 import { selectSelectedAccount } from '@berty/redux/reducers/ui.reducer'
 import { createAccount, deleteAccount, updateAccount } from '@berty/utils/accounts'
+import { initBridge } from '@berty/utils/bridge/bridge'
 
 import { useAppSelector } from './core.hooks'
 import { useAccount } from './messenger.hooks'
@@ -61,8 +63,37 @@ const resetToClosing = (reset: NavigationProp<ScreensParams>['reset'], callback:
 export const useSwitchAccountAfterClosing = () => {
 	const { reset } = useNavigation()
 	return useCallback(
-		(_selectedAccount: string | null) =>
-			resetToClosing(reset, () => reset({ routes: [{ name: 'Account.SelectNode', params: {} }] })),
+		(selectedAccount: string | null) =>
+			resetToClosing(reset, () =>
+				reset({
+					routes: [
+						{
+							name: 'Account.SelectNode',
+							params: {
+								init: true,
+								action: async (external: boolean, address: string, port: string) => {
+									const res = await initBridge(external, address, port)
+									if (!res) {
+										Alert.alert('bridge: init failed')
+										return false
+									}
+
+									reset({
+										index: 0,
+										routes: [
+											{
+												name: 'Account.GoToLogInOrCreate',
+												params: { isCreate: false, selectedAccount },
+											},
+										],
+									})
+									return true
+								},
+							},
+						},
+					],
+				}),
+			),
 		[reset],
 	)
 }
@@ -76,7 +107,32 @@ export const useRestartAfterClosing = () => {
 export const useOnBoardingAfterClosing = () => {
 	const { reset } = useNavigation()
 	return useCallback(
-		() => resetToClosing(reset, () => reset({ routes: [{ name: 'Onboarding.GetStarted' }] })),
+		() =>
+			resetToClosing(reset, () =>
+				reset({
+					routes: [
+						{
+							name: 'Account.SelectNode',
+							params: {
+								init: false,
+								action: async (external: boolean, address: string, port: string) => {
+									const res = await initBridge(external, address, port)
+									if (!res) {
+										Alert.alert('bridge: init failed')
+										return false
+									}
+
+									reset({
+										index: 0,
+										routes: [{ name: 'Account.GoToLogInOrCreate', params: { isCreate: true } }],
+									})
+									return true
+								},
+							},
+						},
+					],
+				}),
+			),
 		[reset],
 	)
 }
@@ -86,7 +142,26 @@ export const useImportingAccountAfterClosing = () => {
 	return useCallback(
 		(filePath: string) =>
 			resetToClosing(reset, () =>
-				reset({ routes: [{ name: 'Account.Importing', params: { filePath } }] }),
+				reset({
+					routes: [
+						{
+							name: 'Account.SelectNode',
+							params: {
+								init: true,
+								action: async (external: boolean, address: string, port: string) => {
+									const res = await initBridge(external, address, port)
+									if (!res) {
+										Alert.alert('bridge: init failed')
+										return false
+									}
+
+									reset({ routes: [{ name: 'Account.Importing', params: { filePath } }] })
+									return true
+								},
+							},
+						},
+					],
+				}),
 			),
 		[reset],
 	)

js/packages/i18n/locale/en-US/messages.json

@@ -126,10 +126,6 @@
 			"search": {
 				"no-results": "No results found"
 			},
-			"multi-account": {
-				"create-button": "Create new account",
-				"import-button": "Import account"
-			},
 			"create-group": {
 				"title": "New Group",
 				"add-members": "Add members",
@@ -183,7 +179,6 @@
 			"accounts-button": "Accounts",
 			"create-button": "Create an account",
 			"import-button": "Import an account",
-			"link-button": "Link another device",
 			"delete-button": "Delete this account",
 			"delete-title": "Account deletion"
 		},

js/packages/navigation/stacks.tsx

@@ -180,7 +180,10 @@ export const Navigation: React.FC = React.memo(() => {
 							return false
 						}
 
-						reset({ index: 0, routes: [{ name: 'Account.GoToLogInOrCreate' }] })
+						reset({
+							index: 0,
+							routes: [{ name: 'Account.GoToLogInOrCreate', params: { isCreate: false } }],
+						})
 						return true
 					},
 				}}

js/packages/navigation/types.ts

@@ -79,7 +79,10 @@ export type ScreensParams = {
 
 	// Account
 
-	'Account.GoToLogInOrCreate': undefined
+	'Account.GoToLogInOrCreate': {
+		isCreate: boolean
+		selectedAccount?: string
+	}
 	'Account.SelectNode': {
 		init: boolean
 		action: (external: boolean, address: string, port: string) => Promise<boolean>

js/packages/screens/account/GoToLogInOrCreate/GoToLogInOrCreate.tsx

@@ -6,12 +6,13 @@ import { ScreenFC, useNavigation } from '@berty/navigation'
 
 import { goToLogInOrCreate } from './goToLogInOrCreate.effect'
 
-export const GoToLogInOrCreate: ScreenFC<'Account.GoToLogInOrCreate'> = () => {
+export const GoToLogInOrCreate: ScreenFC<'Account.GoToLogInOrCreate'> = ({ route }) => {
+	const { isCreate, selectedAccount } = route.params
 	const { reset } = useNavigation()
 
 	React.useEffect(() => {
 		const f = async () => {
-			const navObject = await goToLogInOrCreate()
+			const navObject = await goToLogInOrCreate(isCreate, selectedAccount || null)
 			// Prevent user going back to the initial launch screen
 			reset({
 				index: 0,
@@ -25,7 +26,7 @@ export const GoToLogInOrCreate: ScreenFC<'Account.GoToLogInOrCreate'> = () => {
 		}
 
 		f()
-	}, [reset])
+	}, [reset, isCreate, selectedAccount])
 
 	return (
 		<>

js/packages/screens/account/GoToLogInOrCreate/goToLogInOrCreate.effect.ts

@@ -2,11 +2,20 @@ import beapi from '@berty/api'
 import { ScreensParams } from '@berty/navigation/types'
 import { refreshAccountList } from '@berty/utils/accounts/accountUtils'
 
-export const goToLogInOrCreate = async (): Promise<{ name: keyof ScreensParams; params?: any }> => {
+export const goToLogInOrCreate = async (
+	isCreate: boolean,
+	selectedAccountID: string | null,
+): Promise<{ name: keyof ScreensParams; params?: any }> => {
 	const accounts = await refreshAccountList()
 
 	const lengthAccounts = Object.keys(accounts).length
-	if (lengthAccounts > 0) {
+	if (lengthAccounts > 0 && !isCreate) {
+		if (selectedAccountID) {
+			return {
+				name: 'Account.Opening',
+				params: { selectedAccount: selectedAccountID },
+			}
+		}
 		let selectedAccount: beapi.account.IAccountMetadata = {}
 		Object.values(accounts).forEach(account => {
 			if (!selectedAccount.accountId) {

js/packages/screens/chat/Home/Home.tsx

@@ -34,7 +34,6 @@ import {
 import { AddBot } from './components/AddBot'
 import { Conversations } from './components/Conversations'
 import { HomeHeader } from './components/Header'
-import { MultiAccount } from './components/MultiAccount'
 import { NoNetwork } from './components/NoNetwork'
 import { IncomingRequests } from './components/Requests'
 import { SearchComponent } from './components/Search'
@@ -66,8 +65,6 @@ export const Home: ScreenFC<'Chat.Home'> = ({ navigation: { navigate } }) => {
 		isVisible: false,
 	})
 
-	const [isLongPress, setIsLongPress] = useState(false)
-
 	const messengerClient = useMessengerClient()
 
 	const { text, opacity, flex, margin, border } = useStyles()
@@ -258,8 +255,6 @@ export const Home: ScreenFC<'Chat.Home'> = ({ navigation: { navigate } }) => {
 					onChange={setSearchText}
 					refresh={refresh}
 					setRefresh={setRefresh}
-					onLongPress={setIsLongPress}
-					isMultiAccount={isLongPress}
 				/>
 				{searchText?.length ? (
 					<>
@@ -320,13 +315,6 @@ export const Home: ScreenFC<'Chat.Home'> = ({ navigation: { navigate } }) => {
 				)}
 			</ScrollView>
 			<PrimaryFloatingButton onPress={() => navigate('Chat.Share')} />
-			{isLongPress ? (
-				<MultiAccount
-					onPress={() => {
-						setIsLongPress(false)
-					}}
-				/>
-			) : null}
 			{isAddBot.isVisible ? (
 				<AddBot
 					link={isAddBot.link}

js/packages/screens/chat/Home/components/Header.tsx

@@ -21,20 +21,8 @@ export const HomeHeader: React.FC<
 		onChange: (value: string) => void
 		refresh: boolean
 		setRefresh: (value: boolean) => void
-		onLongPress: React.Dispatch<React.SetStateAction<boolean>>
-		isMultiAccount: boolean
 	}
-> = ({
-	hasRequests,
-	scrollRef,
-	isOnTop,
-	value,
-	onChange,
-	refresh,
-	setRefresh,
-	onLongPress,
-	isMultiAccount,
-}) => {
+> = ({ hasRequests, scrollRef, isOnTop, value, onChange, refresh, setRefresh }) => {
 	const { border, width, height, padding, margin } = useStyles()
 	const { scaleSize } = useAppDimensions()
 	const colors = useThemeColor()
@@ -112,14 +100,7 @@ export const HomeHeader: React.FC<
 								alignItems: 'center',
 							}}
 							onPress={() => {
-								if (isMultiAccount) {
-									onLongPress(false)
-								} else {
-									navigate('Settings.Home')
-								}
-							}}
-							onLongPress={() => {
-								onLongPress(true)
+								navigate('Settings.Home')
 							}}
 						>
 							<AccountAvatar size={35} />