-
-
Notifications
You must be signed in to change notification settings - Fork 1.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Network Specific Asset Education - Updated (#3910)
* show network specific asset education modal when toggled to a network Co-authored-by: Curtis <Curtis.David7@gmail.com>
- Loading branch information
1 parent
2daaf1d
commit fa63312
Showing
30 changed files
with
774 additions
and
24 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,34 @@ | ||
| /** | ||
| * Handle the onboarding network action | ||
| * | ||
| * @param {object} data object containing the event data | ||
| * @returns | ||
| */ | ||
| export const onboardNetworkAction = (data: string) => ({ | ||
| type: 'NETWORK_ONBOARDED', | ||
| payload: data, | ||
| }); | ||
|
|
||
| export const networkSwitched = ({ networkUrl, networkStatus }: { networkUrl: string; networkStatus: boolean }) => ({ | ||
| type: 'NETWORK_SWITCHED', | ||
| networkUrl, | ||
| networkStatus, | ||
| }); | ||
|
|
||
| export const showNetworkOnboardingAction = ({ | ||
| networkUrl, | ||
| networkType, | ||
| nativeToken, | ||
| showNetworkOnboarding, | ||
| }: { | ||
| networkUrl: string; | ||
| networkType: string; | ||
| nativeToken: string; | ||
| showNetworkOnboarding: boolean; | ||
| }) => ({ | ||
| type: 'SHOW_NETWORK_ONBOARDING', | ||
| networkUrl, | ||
| networkType, | ||
| nativeToken, | ||
| showNetworkOnboarding, | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| import infoDescription from './infoDescription'; | ||
|
|
||
| export default infoDescription; |
76 changes: 76 additions & 0 deletions
76
app/components/UI/NetworkInfo/InfoDescription/infoDescription.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,76 @@ | ||
| import React, { memo } from 'react'; | ||
| import { View, Text, Linking, StyleSheet } from 'react-native'; | ||
| import { strings } from '../../../../../locales/i18n'; | ||
| import { useAppThemeFromContext, mockTheme } from '../../../../util/theme'; | ||
|
|
||
| const createStyles = (colors: { | ||
| background: { default: string }; | ||
| text: { default: string }; | ||
| border: { muted: string }; | ||
| info: { default: string }; | ||
| }) => | ||
| StyleSheet.create({ | ||
| descriptionContainer: { | ||
| marginBottom: 10, | ||
| borderBottomWidth: StyleSheet.hairlineWidth, | ||
| borderColor: colors.border.muted, | ||
| }, | ||
| contentContainer: { | ||
| flexDirection: 'row', | ||
| alignItems: 'center', | ||
| marginBottom: 4, | ||
| }, | ||
| numberStyle: { | ||
| marginRight: 10, | ||
| color: colors.text.default, | ||
| }, | ||
| link: { | ||
| color: colors.info.default, | ||
| }, | ||
| description: { | ||
| width: '94%', | ||
| color: colors.text.default, | ||
| }, | ||
| }); | ||
|
|
||
| interface DescriptionProps { | ||
| description: string; | ||
| clickableText: string | undefined; | ||
| number: number; | ||
| navigation: any; | ||
| onClose: () => void; | ||
| } | ||
|
|
||
| const Description = (props: DescriptionProps) => { | ||
| const { description, clickableText, number, navigation, onClose } = props; | ||
| const { colors } = useAppThemeFromContext() || mockTheme; | ||
| const styles = createStyles(colors); | ||
|
|
||
| const handlePress = () => { | ||
| if (number === 2) { | ||
| Linking.openURL(strings('network_information.learn_more_url')); | ||
| } else { | ||
| onClose(); | ||
| navigation.push('AddAsset', { assetType: 'token' }); | ||
| } | ||
| }; | ||
|
|
||
| return ( | ||
| <View style={styles.descriptionContainer}> | ||
| <View style={styles.contentContainer}> | ||
| <Text style={styles.numberStyle}>{number}.</Text> | ||
| <Text style={styles.description}> | ||
| <Text>{description}</Text> | ||
| {clickableText && ( | ||
| <Text onPress={handlePress} style={styles.link}> | ||
| {' '} | ||
| {clickableText} | ||
| </Text> | ||
| )} | ||
| </Text> | ||
| </View> | ||
| </View> | ||
| ); | ||
| }; | ||
|
|
||
| export default memo(Description); |
16 changes: 16 additions & 0 deletions
16
app/components/UI/NetworkInfo/__snapshots__/index.test.tsx.snap
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,16 @@ | ||
| // Jest Snapshot v1, https://goo.gl/fbAQLP | ||
|
|
||
| exports[`NetworkInfo should render correctly 1`] = ` | ||
| <NetworkInfo | ||
| dispatch={[Function]} | ||
| networkProvider={ | ||
| Object { | ||
| "rpcTarget": "http://10.0.2.2:8545", | ||
| "type": "mainnet", | ||
| } | ||
| } | ||
| onClose={[Function]} | ||
| ticker="" | ||
| type="" | ||
| /> | ||
| `; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,41 @@ | ||
| import React from 'react'; | ||
| import { shallow } from 'enzyme'; | ||
| import NetworkInfo from './'; | ||
| import configureMockStore from 'redux-mock-store'; | ||
| import { Provider } from 'react-redux'; | ||
|
|
||
| const mockStore = configureMockStore(); | ||
| const initialState = { | ||
| privacy: { | ||
| approvedHosts: {}, | ||
| }, | ||
| engine: { | ||
| backgroundState: { | ||
| NetworkController: { | ||
| provider: { type: 'mainnet', rpcTarget: 'http://10.0.2.2:8545' }, | ||
| }, | ||
| PreferencesController: { frequentRpcList: ['http://10.0.2.2:8545'] }, | ||
| }, | ||
| }, | ||
| networkOnboarded: { | ||
| networkOnboardedState: [{ network: 'mainnet', onboarded: true }], | ||
| }, | ||
| }; | ||
| const store = mockStore(initialState); | ||
|
|
||
| describe('NetworkInfo', () => { | ||
| it('should render correctly', () => { | ||
| const wrapper = shallow( | ||
| <Provider store={store}> | ||
| <NetworkInfo | ||
| type={''} | ||
| onClose={function (): void { | ||
| throw new Error('Function not implemented.'); | ||
| }} | ||
| ticker={''} | ||
| /> | ||
| </Provider> | ||
| ); | ||
| expect(wrapper.dive()).toMatchSnapshot(); | ||
| }); | ||
| }); |
Oops, something went wrong.