Skip to content

Commit

Permalink
feat: add migration modal
Browse files Browse the repository at this point in the history
  • Loading branch information
salimtb committed Sep 26, 2024
1 parent df257ff commit 13f5318
Show file tree
Hide file tree
Showing 21 changed files with 1,127 additions and 89 deletions.
16 changes: 15 additions & 1 deletion app/actions/security/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ export enum ActionType {
SET_AUTOMATIC_SECURITY_CHECKS_MODAL_OPEN = 'SET_AUTOMATIC_SECURITY_CHECKS_MODAL_OPEN',
SET_DATA_COLLECTION_FOR_MARKETING = 'SET_DATA_COLLECTION_FOR_MARKETING',
SET_NFT_AUTO_DETECTION_MODAL_OPEN = 'SET_NFT_AUTO_DETECTION_MODAL_OPEN',
SET_MULTI_RPC_MIGRATION_MODAL_OPEN = 'SET_MULTI_RPC_MIGRATION_MODAL_OPEN',
}

export interface AllowLoginWithRememberMeUpdated
Expand Down Expand Up @@ -35,6 +36,11 @@ export interface SetNftAutoDetectionModalOpen
open: boolean;
}

export interface SetMultiRpcMigrationModalOpen
extends ReduxAction<ActionType.SET_MULTI_RPC_MIGRATION_MODAL_OPEN> {
open: boolean;
}

export interface SetDataCollectionForMarketing
extends ReduxAction<ActionType.SET_DATA_COLLECTION_FOR_MARKETING> {
enabled: boolean;
Expand All @@ -46,7 +52,8 @@ export type Action =
| UserSelectedAutomaticSecurityChecksOptions
| SetAutomaticSecurityChecksModalOpen
| SetDataCollectionForMarketing
| SetNftAutoDetectionModalOpen;
| SetNftAutoDetectionModalOpen
| SetMultiRpcMigrationModalOpen;

export const setAllowLoginWithRememberMe = (
enabled: boolean,
Expand Down Expand Up @@ -82,6 +89,13 @@ export const setNftAutoDetectionModalOpen = (
open,
});

export const setMultiRpcMigrationModalOpen = (
open: boolean,
): SetMultiRpcMigrationModalOpen => ({
type: ActionType.SET_MULTI_RPC_MIGRATION_MODAL_OPEN,
open,
});

export const setDataCollectionForMarketing = (enabled: boolean) => ({
type: ActionType.SET_DATA_COLLECTION_FOR_MARKETING,
enabled,
Expand Down
1 change: 1 addition & 0 deletions app/actions/security/state.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,4 +6,5 @@ export interface SecuritySettingsState {
isNFTAutoDetectionModalViewed: boolean;
// 'null' represents the user not having set his preference over dataCollectionForMarketing yet
dataCollectionForMarketing: boolean | null;
isMultiRpcMigrationModalViewed: boolean;
}
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import { ListItemMultiSelectButtonProps } from './ListItemMultiSelectButton.type
// Defaults
export const DEFAULT_LISTITEMMULTISELECT_GAP = 16;
export const BUTTON_TEST_ID = 'button-menu-select-test-id';
export const BUTTON_TEXT_TEST_ID = 'button-text-select-test-id';

// Sample consts
export const SAMPLE_LISTITEMMULTISELECT_PROPS: ListItemMultiSelectButtonProps =
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ const styleSheet = (params: {
position: 'relative',
opacity: isDisabled ? 0.5 : 1,
padding: 16,
width: '95%',
width: '90%',
zIndex: 1,
} as ViewStyle,
style,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -13,13 +13,20 @@ import styleSheet from './ListItemMultiSelectButton.styles';
import { ListItemMultiSelectButtonProps } from './ListItemMultiSelectButton.types';
import {
BUTTON_TEST_ID,
BUTTON_TEXT_TEST_ID,
DEFAULT_LISTITEMMULTISELECT_GAP,
} from './ListItemMultiSelectButton.constants';
import ButtonIcon from '../../../component-library/components/Buttons/ButtonIcon';
import {
IconColor,
IconName,
} from '../../../component-library/components/Icons/Icon';
import Button, {
ButtonSize,
ButtonVariants,
ButtonWidthTypes,
} from '../../../component-library/components/Buttons/Button';
import { TextVariant } from '../../../component-library/components/Texts/Text';

const ListItemMultiSelectButton: React.FC<ListItemMultiSelectButtonProps> = ({
style,
Expand All @@ -29,6 +36,7 @@ const ListItemMultiSelectButton: React.FC<ListItemMultiSelectButtonProps> = ({
gap = DEFAULT_LISTITEMMULTISELECT_GAP,
showButtonIcon = true,
buttonIcon = IconName.MoreVertical,
textButton = null,
...props
}) => {
const { styles } = useStyles(styleSheet, {
Expand Down Expand Up @@ -67,6 +75,19 @@ const ListItemMultiSelectButton: React.FC<ListItemMultiSelectButtonProps> = ({
/>
</View>
) : null}
{textButton ? (
<View>
<Button
variant={ButtonVariants.Link}
onPress={props.onButtonClick as () => void}
testID={BUTTON_TEXT_TEST_ID}
labelTextVariant={TextVariant.BodyMD}
size={ButtonSize.Lg}
width={ButtonWidthTypes.Auto}
label={textButton}
/>
</View>
) : null}
</View>
);
};
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,10 @@ export interface ListItemMultiSelectButtonProps
* Optional property to show icon
*/
showButtonIcon?: boolean;
/**
* Optional property to show text button
*/
textButton?: string | null;
}

/**
Expand Down
3 changes: 1 addition & 2 deletions app/components/Nav/App/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -683,14 +683,13 @@ const App = (props) => {
component={NFTAutoDetectionModal}
/>
<Stack.Screen
name={Routes.MODAL.NFT_AUTO_DETECTION_MODAL}
name={Routes.MODAL.MULTI_RPC_MIGRATION_MODAL}
component={MultiRpcModal}
/>
<Stack.Screen
name={Routes.SHEET.SHOW_TOKEN_ID}
component={ShowTokenIdSheet}
/>

<Stack.Screen
name={Routes.SHEET.ORIGIN_SPAM_MODAL}
component={OriginSpamModal}
Expand Down
19 changes: 16 additions & 3 deletions app/components/Views/MultiRpcModal/MultiRpcModal.styles.ts
Original file line number Diff line number Diff line change
Expand Up @@ -11,17 +11,30 @@ const styleSheet = () =>
alignItems: 'center',
},
image: {
width: 219,
height: 219,
width: 102.64,
height: 102.64,
},
description: {
marginLeft: 32,
marginRight: 32,
},
content: {
height: '80%',
},
textDescription: {
textAlign: 'center',
},
textContainer: {
// paddingTop: 24,
marginLeft: 16,
marginRight: 16,
paddingVertical: 16,
},
buttonsContainer: {
paddingTop: 24,
// paddingTop: 24,
marginLeft: 16,
marginRight: 16,
paddingVertical: 16,
},
spacer: { height: 8 },
});
Expand Down
101 changes: 101 additions & 0 deletions app/components/Views/MultiRpcModal/MultiRpcModal.test.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,101 @@
import React from 'react';
import MultiRpcModal from './MultiRpcModal';
import renderWithProvider, {
DeepPartial,
} from '../../../util/test/renderWithProvider';
import { createStackNavigator } from '@react-navigation/stack';
import Routes from '../../../constants/navigation/Routes';
import Engine from '../../../core/Engine';
import { fireEvent } from '@testing-library/react-native';
import { RootState } from 'app/reducers';
import { backgroundState } from '../../../util/test/initial-root-state';
import { NetworkStatus, RpcEndpointType } from '@metamask/network-controller';
import { CHAIN_IDS } from '@metamask/transaction-controller';

const setUseMultiRpcMigrationSpy = jest.spyOn(
Engine.context.PreferencesController,
'setUseMultiRpcMigration',
);

jest.mock('../../../core/Engine', () => ({
context: {
PreferencesController: {
setUseMultiRpcMigration: jest.fn(),
},
},
}));

const initialState: DeepPartial<RootState> = {
engine: {
backgroundState: {
...backgroundState,
PreferencesController: {
useMultiRpcMigration: false,
},
NetworkController: {
selectedNetworkClientId: 'mainnet',
networksMetadata: {
mainnet: {
status: NetworkStatus.Available,
EIPS: {
'1559': true,
},
},
},
networkConfigurationsByChainId: {
[CHAIN_IDS.MAINNET]: {
blockExplorerUrls: ['https://etherscan.io'],
chainId: CHAIN_IDS.MAINNET,
defaultRpcEndpointIndex: 0,
name: 'Ethereum Mainnet',
nativeCurrency: 'ETH',
rpcEndpoints: [
{
networkClientId: 'mainnet',
type: RpcEndpointType.Infura,
url: 'https://mainnet.infura.io/v3/{infuraProjectId}',
},
{
networkClientId: 'mainnet-alt',
type: RpcEndpointType.Custom,
url: 'https://eth-mainnet.alchemyapi.io/v2/{alchemyApiKey}',
name: 'Alchemy rpc',
},
],
},
},
},
},
},
};

const Stack = createStackNavigator();

const renderComponent = (state: DeepPartial<RootState> = {}) =>
renderWithProvider(
<Stack.Navigator>
<Stack.Screen name={Routes.MODAL.MULTI_RPC_MIGRATION_MODAL}>
{() => <MultiRpcModal />}
</Stack.Screen>
</Stack.Navigator>,
{ state },
);

describe('MultiRpcModal', () => {
afterEach(() => {
jest.clearAllMocks();
});

it('render matches snapshot', () => {
const { toJSON } = renderComponent(initialState);
expect(toJSON()).toMatchSnapshot();
});

it('calls setUseMultiRpcMigration and trackEvent when clicking on allow button', () => {
const { getByTestId } = renderComponent(initialState);
const allowButton = getByTestId('allow');

fireEvent.press(allowButton);
expect(setUseMultiRpcMigrationSpy).toHaveBeenCalledWith(true);
});
});
Loading

0 comments on commit 13f5318

Please sign in to comment.