-
-
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.
Creating network value component for re-designed confirmation pages
- Loading branch information
Showing
22 changed files
with
325 additions
and
43 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
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
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
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
1 change: 0 additions & 1 deletion
1
app/components/Views/confirmations/components/UI/InfoRow/InfoValue/InfoURL/index.ts
This file was deleted.
Oops, something went wrong.
24 changes: 24 additions & 0 deletions
24
app/components/Views/confirmations/components/UI/InfoRow/InfoValue/Network/Network.styles.ts
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,24 @@ | ||
| import { StyleSheet } from 'react-native'; | ||
|
|
||
| import { Theme } from '../../../../../../../../util/theme/models'; | ||
| import { fontStyles } from '../../../../../../../../styles/common'; | ||
|
|
||
| const styleSheet = (params: { theme: Theme }) => { | ||
| const { theme } = params; | ||
|
|
||
| return StyleSheet.create({ | ||
| container: { | ||
| display: 'flex', | ||
| flexDirection: 'row', | ||
| alignItems: 'center', | ||
| }, | ||
| value: { | ||
| color: theme.colors.text.default, | ||
| ...fontStyles.normal, | ||
| fontSize: 14, | ||
| marginLeft: 8, | ||
| }, | ||
| }); | ||
| }; | ||
|
|
||
| export default styleSheet; |
33 changes: 33 additions & 0 deletions
33
app/components/Views/confirmations/components/UI/InfoRow/InfoValue/Network/Network.test.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,33 @@ | ||
| import { CHAIN_IDS } from '@metamask/transaction-controller'; | ||
| import React from 'react'; | ||
|
|
||
| import renderWithProvider from '../../../../../../../../util/test/renderWithProvider'; | ||
| import { backgroundState } from '../../../../../../../../util/test/initial-root-state'; | ||
| import { mockNetworkState } from '../../../../../../../../util/test/network'; | ||
| import Network from './Network'; | ||
|
|
||
| const mockInitialState = { | ||
| engine: { | ||
| backgroundState: { | ||
| ...backgroundState, | ||
| NetworkController: { | ||
| ...mockNetworkState({ | ||
| id: 'mainnet', | ||
| nickname: 'Ethereum Mainnet', | ||
| ticker: 'ETH', | ||
| chainId: CHAIN_IDS.MAINNET, | ||
| }), | ||
| }, | ||
| }, | ||
| }, | ||
| }; | ||
|
|
||
| describe('URL', () => { | ||
| it('should display url as expected', async () => { | ||
| const container = renderWithProvider( | ||
| <Network chainId={CHAIN_IDS.MAINNET} />, | ||
| { state: mockInitialState }, | ||
| ); | ||
| expect(container).toMatchSnapshot(); | ||
| }); | ||
| }); |
37 changes: 37 additions & 0 deletions
37
app/components/Views/confirmations/components/UI/InfoRow/InfoValue/Network/Network.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,37 @@ | ||
| import React from 'react'; | ||
| import { Text, View } from 'react-native'; | ||
|
|
||
| import Avatar, { | ||
| AvatarSize, | ||
| AvatarVariant, | ||
| } from '../../../../../../../../component-library/components/Avatars/Avatar'; | ||
| import { useStyles } from '../../../../../../../../component-library/hooks'; | ||
| import useNetworkInfo from '../../../../../hooks/useNetworkInfo'; | ||
| import styleSheet from './Network.styles'; | ||
|
|
||
| interface NetworkProps { | ||
| chainId?: string; | ||
| } | ||
|
|
||
| const Network = ({ chainId }: NetworkProps) => { | ||
| const { networkName, networkImage } = useNetworkInfo(chainId); | ||
| const { styles } = useStyles(styleSheet, {}); | ||
|
|
||
| if (!chainId) { | ||
| return null; | ||
| } | ||
|
|
||
| return ( | ||
| <View style={styles.container}> | ||
| <Avatar | ||
| variant={AvatarVariant.Network} | ||
| name={networkName} | ||
| imageSource={networkImage} | ||
| size={AvatarSize.Sm} | ||
| /> | ||
| <Text style={styles.value}>{networkName}</Text> | ||
| </View> | ||
| ); | ||
| }; | ||
|
|
||
| export default Network; |
59 changes: 59 additions & 0 deletions
59
...confirmations/components/UI/InfoRow/InfoValue/Network/__snapshots__/Network.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,59 @@ | ||
| // Jest Snapshot v1, https://goo.gl/fbAQLP | ||
|
|
||
| exports[`URL should display url as expected 1`] = ` | ||
| <View | ||
| style={ | ||
| { | ||
| "alignItems": "center", | ||
| "display": "flex", | ||
| "flexDirection": "row", | ||
| } | ||
| } | ||
| > | ||
| <View | ||
| style={ | ||
| { | ||
| "alignItems": "center", | ||
| "backgroundColor": "#ffffff", | ||
| "borderRadius": 12, | ||
| "height": 24, | ||
| "justifyContent": "center", | ||
| "overflow": "hidden", | ||
| "width": 24, | ||
| } | ||
| } | ||
| > | ||
| <Image | ||
| onError={[Function]} | ||
| resizeMode="contain" | ||
| source={ | ||
| { | ||
| "default": { | ||
| "uri": "MockImage", | ||
| }, | ||
| } | ||
| } | ||
| style={ | ||
| { | ||
| "height": 24, | ||
| "width": 24, | ||
| } | ||
| } | ||
| testID="network-avatar-image" | ||
| /> | ||
| </View> | ||
| <Text | ||
| style={ | ||
| { | ||
| "color": "#141618", | ||
| "fontFamily": "EuclidCircularB-Regular", | ||
| "fontSize": 14, | ||
| "fontWeight": "400", | ||
| "marginLeft": 8, | ||
| } | ||
| } | ||
| > | ||
| Ethereum Mainnet | ||
| </Text> | ||
| </View> | ||
| `; |
1 change: 1 addition & 0 deletions
1
app/components/Views/confirmations/components/UI/InfoRow/InfoValue/Network/index.ts
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 @@ | ||
| export { default } from './Network'; |
File renamed without changes.
File renamed without changes.
8 changes: 4 additions & 4 deletions
8
...nfoRow/InfoValue/InfoURL/InfoURL.test.tsx → ...nts/UI/InfoRow/InfoValue/Url/Url.test.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 |
|---|---|---|
| @@ -1,16 +1,16 @@ | ||
| import React from 'react'; | ||
| import { render } from '@testing-library/react-native'; | ||
|
|
||
| import InfoURL from './index'; | ||
| import Url from './Url'; | ||
|
|
||
| describe('InfoURL', () => { | ||
| describe('URL', () => { | ||
| it('should display url as expected', async () => { | ||
| const container = render(<InfoURL url="https://google.com" />); | ||
| const container = render(<Url url="https://google.com" />); | ||
| expect(container).toMatchSnapshot(); | ||
| }); | ||
|
|
||
| it('should show warning if protocol is HTTP', async () => { | ||
| const { getByText } = render(<InfoURL url="http://google.com" />); | ||
| const { getByText } = render(<Url url="http://google.com" />); | ||
| expect(getByText('HTTP')).toBeDefined(); | ||
| }); | ||
| }); |
Oops, something went wrong.