-
Notifications
You must be signed in to change notification settings - Fork 5k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add origin pill to wallet_addEthereumChain confirmation
- Loading branch information
1 parent
c4429bc
commit d61e63f
Showing
6 changed files
with
136 additions
and
0 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
26 changes: 26 additions & 0 deletions
26
ui/components/ui/origin-pill/__snapshots__/origin-pill.test.js.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,26 @@ | ||
| // Jest Snapshot v1, https://goo.gl/fbAQLP | ||
|
|
||
| exports[`<OriginPill /> renders 1`] = ` | ||
| <div> | ||
| <div | ||
| class="mm-box mm-box--margin-top-6 mm-box--margin-right-4 mm-box--margin-left-4 mm-box--padding-2 mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--rounded-pill mm-box--border-style-solid mm-box--border-color-border-muted mm-box--border-width-1" | ||
| data-testid="test-data-test-id" | ||
| > | ||
| <div | ||
| class="mm-box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-favicon mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1" | ||
| data-testid="test-data-test-id-avatar-favicon" | ||
| > | ||
| <span | ||
| class="mm-box mm-icon mm-icon--size-md mm-box--display-inline-block mm-box--color-icon-default" | ||
| style="mask-image: url('./images/icons/global.svg');" | ||
| /> | ||
| </div> | ||
| <h6 | ||
| class="mm-box mm-text mm-text--body-sm mm-box--margin-left-1 mm-box--color-text-alternative" | ||
| data-testid="test-data-test-id-text" | ||
| > | ||
| Test Origin | ||
| </h6> | ||
| </div> | ||
| </div> | ||
| `; |
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,58 @@ | ||
| import PropTypes from 'prop-types'; | ||
| import React from 'react'; | ||
| import { useSelector } from 'react-redux'; | ||
| import { | ||
| AlignItems, | ||
| BorderRadius, | ||
| BorderStyle, | ||
| Color, | ||
| Display, | ||
| JustifyContent, | ||
| TextColor, | ||
| TextVariant, | ||
| } from '../../../helpers/constants/design-system'; | ||
| import { getSubjectMetadata } from '../../../selectors'; | ||
| import { AvatarFavicon, Box, Text } from '../../component-library'; | ||
|
|
||
| export default function OriginPill({ origin, dataTestId }) { | ||
| const subjectMetadata = useSelector(getSubjectMetadata); | ||
|
|
||
| const { iconUrl: siteImage = '' } = subjectMetadata[origin] || {}; | ||
|
|
||
| return ( | ||
| <Box | ||
| display={Display.Flex} | ||
| alignItems={AlignItems.center} | ||
| justifyContent={JustifyContent.center} | ||
| marginTop={6} | ||
| marginRight={4} | ||
| marginLeft={4} | ||
| padding={2} | ||
| borderColor={Color.borderMuted} | ||
| borderStyle={BorderStyle.solid} | ||
| borderRadius={BorderRadius.pill} | ||
| borderWidth={1} | ||
| data-testid={dataTestId} | ||
| > | ||
| <AvatarFavicon | ||
| src={siteImage} | ||
| name={origin} | ||
| data-testid={`${dataTestId}-avatar-favicon`} | ||
| /> | ||
| <Text | ||
| variant={TextVariant.bodySm} | ||
| as="h6" | ||
| color={TextColor.textAlternative} | ||
| marginLeft={1} | ||
| data-testid={`${dataTestId}-text`} | ||
| > | ||
| {origin} | ||
| </Text> | ||
| </Box> | ||
| ); | ||
| } | ||
|
|
||
| OriginPill.propTypes = { | ||
| origin: PropTypes.string, | ||
| dataTestId: PropTypes.string, | ||
| }; |
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,22 @@ | ||
| import React from 'react'; | ||
| import configureMockStore from 'redux-mock-store'; | ||
| import mockState from '../../../../test/data/mock-state.json'; | ||
| import { renderWithProvider } from '../../../../test/lib/render-helpers'; | ||
| import OriginPill from './origin-pill'; | ||
|
|
||
| describe('<OriginPill />', () => { | ||
| it('renders', () => { | ||
| const defaultProps = { | ||
| origin: 'Test Origin', | ||
| dataTestId: 'test-data-test-id', | ||
| }; | ||
|
|
||
| const store = configureMockStore()(mockState); | ||
| const { container } = renderWithProvider( | ||
| <OriginPill {...defaultProps} />, | ||
| store, | ||
| ); | ||
|
|
||
| expect(container).toMatchSnapshot(); | ||
| }); | ||
| }); |
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