Skip to content

Commit

Permalink
favorites & changeNetwork & addcustomNetwork e2e tests (#601)
Browse files Browse the repository at this point in the history
  • Loading branch information
artyombespalov authored Mar 14, 2023
1 parent 7b7ea8e commit 8879439
Show file tree
Hide file tree
Showing 32 changed files with 561 additions and 87 deletions.
3 changes: 2 additions & 1 deletion app/components/ZeroState.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ interface BaseProps {
title?: string | ReactNode
message?: string | ReactNode
button?: ReactNode
testID?: string
}

const ZeroStateBase: FC<BaseProps> = ({ image, title, message, button }) => {
Expand Down Expand Up @@ -175,7 +176,7 @@ function ZeroStateNoWatchlistFavorites({
<ZeroStateBase
title={title}
message={message}
image={<StarSVG size={60} />}
image={<StarSVG size={60} testID="star_svg" />}
button={
<AvaButton.SecondaryLarge onPress={exploreAllTokens}>
Explore all tokens
Expand Down
8 changes: 7 additions & 1 deletion app/components/svg/EllipsisSVG.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,17 @@ import Svg, { NumberProp, Path } from 'react-native-svg'
interface Props {
color?: ColorValue
size?: NumberProp
testID?: string
}

export default function EllipsisSVG({ size = 32, color = '#fff' }: Props) {
return (
<Svg width={size} height={size} viewBox="0 0 32 32" fill="none">
<Svg
width={size}
height={size}
viewBox="0 0 32 32"
fill="none"
testID="ellipsis_svg">
<Path
d="M7.99992 13.3333C6.53325 13.3333 5.33325 14.5333 5.33325 15.9999C5.33325 17.4666 6.53325 18.6666 7.99992 18.6666C9.46659 18.6666 10.6666 17.4666 10.6666 15.9999C10.6666 14.5333 9.46659 13.3333 7.99992 13.3333ZM23.9999 13.3333C22.5333 13.3333 21.3333 14.5333 21.3333 15.9999C21.3333 17.4666 22.5333 18.6666 23.9999 18.6666C25.4666 18.6666 26.6666 17.4666 26.6666 15.9999C26.6666 14.5333 25.4666 13.3333 23.9999 13.3333ZM15.9999 13.3333C14.5333 13.3333 13.3333 14.5333 13.3333 15.9999C13.3333 17.4666 14.5333 18.6666 15.9999 18.6666C17.4666 18.6666 18.6666 17.4666 18.6666 15.9999C18.6666 14.5333 17.4666 13.3333 15.9999 13.3333Z"
fill={color}
Expand Down
8 changes: 7 additions & 1 deletion app/components/svg/InfoSVG.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,19 @@ import { useApplicationContext } from 'contexts/ApplicationContext'
interface Prop {
color?: string
size?: number
testID?: string
}

function InfoSVG({ color, size = 14 }: Prop) {
const context = useApplicationContext()
const iconColor = color ?? context.theme.colorText2
return (
<Svg width={size} height={size} viewBox="0 0 14 14" fill="none">
<Svg
width={size}
height={size}
viewBox="0 0 14 14"
fill="none"
testID="info_svg">
<Path
d="M6.333 3.667h1.334V5H6.333V3.667zm0 2.666h1.334v4H6.333v-4zm.667-6A6.67 6.67 0 00.333 7 6.67 6.67 0 007 13.667 6.67 6.67 0 0013.667 7 6.67 6.67 0 007 .333zm0 12A5.34 5.34 0 011.667 7 5.34 5.34 0 017 1.667 5.34 5.34 0 0112.333 7 5.34 5.34 0 017 12.333z"
fill={iconColor}
Expand Down
8 changes: 7 additions & 1 deletion app/components/svg/StarSVG.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,18 @@ import { useApplicationContext } from 'contexts/ApplicationContext'
interface Prop {
selected?: boolean
size?: number
testID?: string
}

function StarSVG({ selected = false, size = 24 }: Prop) {
const theme = useApplicationContext().theme
return (
<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
<Svg
width={size}
height={size}
viewBox="0 0 24 24"
fill="none"
testID="star_svg">
<Path
d="M22.1019 9.70764C21.9913 9.40957 21.7423 9.19276 21.4381 9.16576L15.4373 8.29858L12.7549 2.96061C12.6166 2.68957 12.3402 2.5 12.0082 2.5C11.704 2.5 11.3999 2.66255 11.2615 2.96061L8.57915 8.29858L2.57833 9.16576C2.27413 9.22001 1.99751 9.4368 1.9146 9.70764C1.80407 10.0057 1.88701 10.3308 2.13585 10.5476L6.47755 14.6933L5.45442 20.5461C5.39906 20.8442 5.53737 21.1693 5.7862 21.3318C5.92451 21.4401 6.0904 21.4943 6.28387 21.4943C6.42218 21.4943 6.56048 21.4673 6.67101 21.4131L11.9805 18.6494L17.3453 21.4133C17.6219 21.5488 17.9536 21.5216 18.2303 21.359C18.4791 21.1693 18.6174 20.8714 18.5621 20.5733L17.5389 14.7205L21.8806 10.5748C22.1017 10.331 22.1846 10.0057 22.1017 9.70762L22.1019 9.70764ZM16.0734 13.8263C15.8797 14.0161 15.7968 14.2869 15.8246 14.558L16.6542 19.2185L12.3679 17.0238C12.2573 16.9695 12.119 16.9425 11.9807 16.9425C11.8424 16.9425 11.7041 16.9695 11.5936 17.0238L7.30725 19.2185L8.1369 14.558C8.19226 14.2869 8.08154 14.0161 7.88806 13.8263L4.43137 10.5206L9.21538 9.84317C9.492 9.81614 9.71305 9.62637 9.85137 9.40958L11.9807 5.15556L14.1101 9.40978C14.2206 9.6536 14.4697 9.81614 14.7461 9.84336L19.5301 10.5208L16.0734 13.8263Z"
fill="white"
Expand Down
20 changes: 16 additions & 4 deletions app/navigation/NavUtils.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,23 @@ import { AppTheme } from 'contexts/ApplicationContext'

export const BOTTOM_BAR_HEIGHT = 60

export const MainHeaderOptions = (
title: string,
hideHeaderLeft = false,
interface MainHeaderOptionsProps {
title: string
hideHeaderLeft?: boolean
actionComponent?: React.ReactNode
headerBackTestID?: string
}

export const MainHeaderOptions = (
{
title,
hideHeaderLeft = false,
actionComponent,
headerBackTestID
}: MainHeaderOptionsProps = { title: '', headerBackTestID: 'header_back' }
): Partial<StackNavigationOptions> => {
return {
const options: Partial<StackNavigationOptions> = {
headerBackTestID,
headerShown: true,
headerTitle: () => {
return (
Expand All @@ -36,6 +47,7 @@ export const MainHeaderOptions = (
shadowOpacity: 0
}
}
return options
}

export const SubHeaderOptions = (
Expand Down
4 changes: 2 additions & 2 deletions app/navigation/NoWalletScreenStack.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ export const NoWalletScreenStack = () => {
/>
<NoWalletNavigator.Screen
options={{
...MainHeaderOptions('Currency')
...MainHeaderOptions({ title: 'Currency' })
}}
name={AppNavigation.NoWallet.CurrencySelector}
component={CurrencySelector}
Expand All @@ -62,7 +62,7 @@ export const NoWalletScreenStack = () => {
/>
<NoWalletNavigator.Screen
options={{
...MainHeaderOptions('')
...MainHeaderOptions()
}}
name={AppNavigation.Wallet.TokenDetail}
component={TokenDetail}
Expand Down
31 changes: 18 additions & 13 deletions app/navigation/WalletScreenStack/WalletScreenStack.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -218,7 +218,7 @@ function WalletScreenStack(props: Props | Readonly<Props>) {
/>
<WalletScreenS.Screen
options={{
...MainHeaderOptions('Manage token list')
...MainHeaderOptions({ title: 'Manage token list' })
}}
name={AppNavigation.Wallet.TokenManagement}
component={TokenManagement}
Expand All @@ -240,21 +240,21 @@ function WalletScreenStack(props: Props | Readonly<Props>) {
/>
<WalletScreenS.Screen
options={{
...MainHeaderOptions('Add Custom Token')
...MainHeaderOptions({ title: 'Add Custom Token' })
}}
name={AppNavigation.Wallet.AddCustomToken}
component={AddCustomToken}
/>
<WalletScreenS.Screen
options={{
...MainHeaderOptions('')
...MainHeaderOptions()
}}
name={AppNavigation.Wallet.TokenDetail}
component={TokenDetail}
/>
<WalletScreenS.Screen
options={{
...MainHeaderOptions('')
...MainHeaderOptions()
}}
name={AppNavigation.Wallet.OwnedTokenDetail}
component={OwnedTokenDetail}
Expand All @@ -281,7 +281,7 @@ function WalletScreenStack(props: Props | Readonly<Props>) {
component={NFTScreenStack}
/>
<WalletScreenS.Screen
options={MainHeaderOptions('')}
options={MainHeaderOptions()}
name={AppNavigation.Wallet.NFTManage}
component={NftManage}
/>
Expand All @@ -294,31 +294,36 @@ function WalletScreenStack(props: Props | Readonly<Props>) {
/>
<WalletScreenS.Screen
options={{
...MainHeaderOptions('Currency')
...MainHeaderOptions({ title: 'Currency' })
}}
name={AppNavigation.Wallet.CurrencySelector}
component={CurrencySelector}
/>
<WalletScreenS.Screen
options={
MainHeaderOptions(
'',
false,
<AddNetworkAction />
) as Partial<StackNavigationOptions>
MainHeaderOptions({
title: '',
hideHeaderLeft: false,
actionComponent: <AddNetworkAction />,
headerBackTestID: 'header_back'
}) as Partial<StackNavigationOptions>
}
name={AppNavigation.Wallet.NetworkSelector}
component={NetworkSelectorScreen}
/>
<WalletScreenS.Screen
options={{
...MainHeaderOptions('', false, <NetworkDetailsAction />)
...MainHeaderOptions({
title: '',
hideHeaderLeft: false,
actionComponent: <NetworkDetailsAction />
})
}}
name={AppNavigation.Wallet.NetworkDetails}
component={NetworkDetailsScreen}
/>
<WalletScreenS.Screen
options={MainHeaderOptions('')}
options={MainHeaderOptions()}
name={AppNavigation.Wallet.NetworkAddEdit}
component={NetworkAddEditScreen}
/>
Expand Down
6 changes: 3 additions & 3 deletions app/navigation/onboarding/CreateWalletStack.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ const CreateWalletStack: () => JSX.Element = () => {
<CreateWalletContext.Provider value={{ setMnemonic, mnemonic }}>
<CreateWalletS.Navigator screenOptions={{ headerShown: false }}>
<CreateWalletS.Screen
options={MainHeaderOptions('')}
options={MainHeaderOptions()}
name={AppNavigation.CreateWallet.CreateWallet}
component={CreateWalletScreen}
/>
Expand All @@ -58,12 +58,12 @@ const CreateWalletStack: () => JSX.Element = () => {
component={CreateWalletWarningModal}
/>
<CreateWalletS.Screen
options={MainHeaderOptions('')}
options={MainHeaderOptions()}
name={AppNavigation.CreateWallet.CheckMnemonic}
component={CheckMnemonicScreen}
/>
<CreateWalletS.Screen
options={MainHeaderOptions('')}
options={MainHeaderOptions()}
name={AppNavigation.CreateWallet.CreatePin}
component={CreatePinScreen}
/>
Expand Down
2 changes: 1 addition & 1 deletion app/navigation/onboarding/EnterWithMnemonicStack.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ const EnterWithMnemonicStack = () => {
<EnterWithMnemonicContext.Provider value={{ setMnemonic, mnemonic }}>
<EnterWithMnemonicS.Navigator screenOptions={{ headerShown: false }}>
<EnterWithMnemonicS.Screen
options={MainHeaderOptions('')}
options={MainHeaderOptions()}
name={AppNavigation.LoginWithMnemonic.LoginWithMnemonic}
component={LoginWithMnemonicScreen}
/>
Expand Down
2 changes: 1 addition & 1 deletion app/navigation/onboarding/WelcomeScreenStack.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ const WelcomeScreenStack: () => JSX.Element = () => (
component={LoginWithPinOrBiometryScreen}
/>
<WelcomeScreenS.Screen
options={MainHeaderOptions('')}
options={MainHeaderOptions()}
name={AppNavigation.Onboard.AnalyticsConsent}
component={AnalyticsConsentScreen}
/>
Expand Down
42 changes: 21 additions & 21 deletions app/navigation/wallet/AddressBookStack.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -54,19 +54,19 @@ const AddressBookStack = () => {
<Stack.Screen
options={{
headerShown: true,
...(MainHeaderOptions(
'Address Book',
false,
<AddAddressBookContact />
) as Partial<StackNavigationOptions>)
...(MainHeaderOptions({
title: 'Address Book',
hideHeaderLeft: false,
actionComponent: <AddAddressBookContact />
}) as Partial<StackNavigationOptions>)
}}
name={AppNavigation.AddressBook.List}
component={AddressBook}
/>
<Stack.Screen
options={{
headerShown: true,
...(MainHeaderOptions('') as Partial<StackNavigationOptions>)
...(MainHeaderOptions() as Partial<StackNavigationOptions>)
}}
name={AppNavigation.AddressBook.Add}
component={AddContact}
Expand Down Expand Up @@ -125,11 +125,11 @@ const ContactDetailsComp = () => {
useEffect(() => {
setParams({ editable: false, isContactValid })
setOptions({
...(MainHeaderOptions(
'',
false,
<EditAddressBookContact onEdit={onEdit} />
) as Partial<StackNavigationOptions>)
...(MainHeaderOptions({
title: '',
hideHeaderLeft: false,
actionComponent: <EditAddressBookContact onEdit={onEdit} />
}) as Partial<StackNavigationOptions>)
})
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [])
Expand All @@ -148,22 +148,22 @@ const ContactDetailsComp = () => {
dispatch(saveEditingContact())
setParams({ editable: false, isContactValid })
setOptions({
...(MainHeaderOptions(
'',
false,
<EditAddressBookContact onEdit={onEdit} />
) as Partial<StackNavigationOptions>)
...(MainHeaderOptions({
title: '',
hideHeaderLeft: false,
actionComponent: <EditAddressBookContact onEdit={onEdit} />
}) as Partial<StackNavigationOptions>)
})
}

function onEdit() {
setParams({ editable: true, isContactValid })
setOptions({
...(MainHeaderOptions(
'',
false,
<SaveAddressBookContact onSave={saveContact} />
) as Partial<StackNavigationOptions>)
...(MainHeaderOptions({
title: '',
hideHeaderLeft: false,
actionComponent: <SaveAddressBookContact onSave={saveContact} />
}) as Partial<StackNavigationOptions>)
})
}

Expand Down
2 changes: 1 addition & 1 deletion app/navigation/wallet/AdvancedStackScreen.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ const AdvancedStackScreen = () => {
headerBackTitleVisible: false
}}>
<AdvancedStack.Screen
options={MainHeaderOptions('Advanced')}
options={MainHeaderOptions({ title: 'Advanced' })}
name={AppNavigation.Advanced.Advanced}
component={Advanced}
/>
Expand Down
2 changes: 1 addition & 1 deletion app/navigation/wallet/BridgeScreenStack.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ function BridgeScreenStack() {
<BridgeStack.Navigator>
<BridgeStack.Screen
options={{
...MainHeaderOptions('')
...MainHeaderOptions()
}}
name={AppNavigation.Bridge.Bridge}
component={Bridge}
Expand Down
2 changes: 1 addition & 1 deletion app/navigation/wallet/LegalStackScreen.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ function LegalStackScreen(): JSX.Element {
headerBackTitleVisible: false
}}>
<LegalStack.Screen
options={MainHeaderOptions('Legal')}
options={MainHeaderOptions({ title: 'Legal' })}
name={AppNavigation.Legal.Legal}
component={LegalScreen}
/>
Expand Down
Loading

0 comments on commit 8879439

Please sign in to comment.