diff --git a/ui/components/multichain/account-picker/__snapshots__/account-picker.test.js.snap b/ui/components/multichain/account-picker/__snapshots__/account-picker.test.js.snap new file mode 100644 index 000000000..35458afd1 --- /dev/null +++ b/ui/components/multichain/account-picker/__snapshots__/account-picker.test.js.snap @@ -0,0 +1,39 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`AccountPicker renders properly 1`] = ` +
+ +
+`; diff --git a/ui/components/multichain/account-picker/account-picker.js b/ui/components/multichain/account-picker/account-picker.js new file mode 100644 index 000000000..a1e95438c --- /dev/null +++ b/ui/components/multichain/account-picker/account-picker.js @@ -0,0 +1,72 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { useSelector } from 'react-redux'; +import { + Button, + ICON_NAMES, + AvatarAccount, + AvatarAccountVariant, + Text, + Icon, +} from '../../component-library'; +import { + AlignItems, + BackgroundColor, + BorderRadius, + DISPLAY, + FONT_WEIGHT, + IconColor, + Size, +} from '../../../helpers/constants/design-system'; + +export const AccountPicker = ({ address, name, onClick }) => { + const useBlockie = useSelector((state) => state.metamask.useBlockie); + + return ( + + ); +}; + +AccountPicker.propTypes = { + /** + * Account name + */ + name: PropTypes.string.isRequired, + /** + * Account address, used for blockie or jazzicon + */ + address: PropTypes.string.isRequired, + /** + * Action to perform when the account picker is clicked + */ + onClick: PropTypes.func.isRequired, +}; diff --git a/ui/components/multichain/account-picker/account-picker.stories.js b/ui/components/multichain/account-picker/account-picker.stories.js new file mode 100644 index 000000000..d82c2c490 --- /dev/null +++ b/ui/components/multichain/account-picker/account-picker.stories.js @@ -0,0 +1,41 @@ +import React from 'react'; +import { AccountPicker } from '.'; + +const CHAOS_ACCOUNT = { + address: '"0xb19ac54efa18cc3a14a5b821bfec73d284bf0c5e"', + name: 'Account That Has A Really Really Really Really Really Long Name', +}; + +export default { + title: 'Components/Multichain/AccountPicker', + component: AccountPicker, + argTypes: { + name: { + control: 'string', + }, + address: { + control: 'string', + }, + onClick: { + action: 'onClick', + }, + }, + args: { + address: '"0xb19ac54efa18cc3a14a5b821bfec73d284bf0c5e"', + name: 'Account 1', + onClick: () => undefined, + }, +}; + +export const DefaultStory = (args) => ; +DefaultStory.storyName = 'Default'; + +export const ChaosStory = (args) => ( +
+ +
+); +ChaosStory.storyName = 'Chaos'; +ChaosStory.args = { name: CHAOS_ACCOUNT.name }; diff --git a/ui/components/multichain/account-picker/account-picker.test.js b/ui/components/multichain/account-picker/account-picker.test.js new file mode 100644 index 000000000..b16bccd04 --- /dev/null +++ b/ui/components/multichain/account-picker/account-picker.test.js @@ -0,0 +1,47 @@ +/* eslint-disable jest/require-top-level-describe */ +import React from 'react'; +import 'jest-canvas-mock'; +import { renderWithProvider } from '../../../../test/jest'; +import configureStore from '../../../store/store'; +import mockState from '../../../../test/data/mock-state.json'; +import { AccountPicker } from '.'; + +const DEFAULT_PROPS = { + name: 'Account 1', + address: '0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc', + onClick: () => undefined, +}; + +const render = (props = {}, state = {}) => { + const store = configureStore({ + metamask: { + ...mockState.metamask, + provider: { + chainId: '0x99', + }, + ...state, + }, + }); + return renderWithProvider( + , + store, + ); +}; + +describe('AccountPicker', () => { + it('renders properly', () => { + const { container } = render({}, { useBlockie: true }); + expect(container).toMatchSnapshot(); + }); + + it('displays a blockie per the setting', () => { + const { container } = render({}, { useBlockie: true }); + expect(container.querySelector('canvas')).toBeDefined(); + expect(container.querySelector('img')).toBeDefined(); + }); + + it('displays a jazzicon per the setting', () => { + const { container } = render({}, { useBlockie: false }); + expect(container.querySelector('svg')).toBeDefined(); + }); +}); diff --git a/ui/components/multichain/account-picker/index.js b/ui/components/multichain/account-picker/index.js new file mode 100644 index 000000000..e561ae61c --- /dev/null +++ b/ui/components/multichain/account-picker/index.js @@ -0,0 +1 @@ +export { AccountPicker } from './account-picker'; diff --git a/ui/components/multichain/account-picker/index.scss b/ui/components/multichain/account-picker/index.scss new file mode 100644 index 000000000..4640ac384 --- /dev/null +++ b/ui/components/multichain/account-picker/index.scss @@ -0,0 +1,7 @@ +.multichain-account-picker { + &:hover, + &:focus { + box-shadow: none; + background: var(--color-background-default-hover); + } +} diff --git a/ui/components/multichain/index.js b/ui/components/multichain/index.js index edf6785b9..b686c0948 100644 --- a/ui/components/multichain/index.js +++ b/ui/components/multichain/index.js @@ -1,6 +1,7 @@ export { AccountListItem } from './account-list-item'; export { AccountListItemMenu } from './account-list-item-menu'; export { AccountListMenu } from './account-list-menu'; +export { AccountPicker } from './account-picker'; export { DetectedTokensBanner } from './detected-token-banner'; export { GlobalMenu } from './global-menu'; export { MultichainImportTokenLink } from './multichain-import-token-link'; diff --git a/ui/components/multichain/multichain-components.scss b/ui/components/multichain/multichain-components.scss index 8fe555f0b..a2a2dbd20 100644 --- a/ui/components/multichain/multichain-components.scss +++ b/ui/components/multichain/multichain-components.scss @@ -7,4 +7,5 @@ @import 'address-copy-button/index'; @import 'account-list-item/index'; @import 'account-list-menu/index'; +@import 'account-picker/index'; @import 'multichain-token-list-item/multichain-token-list-item';