mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 09:52:26 +01:00
UX: Multichain: Account Picker (#18177)
* UX: Multichain: Account Picker * Update ui/components/multichain/account-picker/index.js Co-authored-by: Garrett Bear <gwhisten@gmail.com> * Update ui/components/multichain/account-picker/index.js Co-authored-by: Garrett Bear <gwhisten@gmail.com> * Update ui/components/multichain/account-picker/index.js Co-authored-by: Garrett Bear <gwhisten@gmail.com> * Update ui/components/multichain/account-picker/index.js Co-authored-by: Garrett Bear <gwhisten@gmail.com> * Cleanup * Move file names to DS standard * Add index for export * Add MULTICHAIN flag * Fix hover color * Fix lint * Use BackgroundColor instead of Color * Add comments for propTypes * Provide args properly * Implement onClick arg * Fix alignment * Update ui/components/multichain/account-picker/account-picker.js * Update ui/components/multichain/account-picker/account-picker.js * Update ui/components/multichain/account-picker/account-picker.js * Update ui/components/multichain/account-picker/account-picker.js * Update ui/components/multichain/account-picker/account-picker.js * Only use account name and address, account for blockies or jazzicons * Add test * Fix jest change * Fix CSS locations * Update ui/components/multichain/account-picker/account-picker.js Co-authored-by: Garrett Bear <gwhisten@gmail.com> * Update ui/components/multichain/account-picker/account-picker.js Co-authored-by: Garrett Bear <gwhisten@gmail.com> * Update ui/components/multichain/account-picker/account-picker.js Co-authored-by: Garrett Bear <gwhisten@gmail.com> * Update snapshot * Update border radius * Fix jest * Switch to using Button --------- Co-authored-by: Garrett Bear <gwhisten@gmail.com>
This commit is contained in:
David Walsh
GitHub
parent
05f0006684
commit
ba307d7258
@ -0,0 +1,39 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`AccountPicker renders properly 1`] = `
|
||||
<div>
|
||||
<button
|
||||
class="box mm-text mm-button-base mm-button-base--size-md mm-button-base--ellipsis multichain-account-picker mm-button-primary mm-text--body-md mm-text--ellipsis box--padding-right-4 box--padding-left-4 box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-inverse box--background-color-transparent box--rounded-lg"
|
||||
>
|
||||
<span
|
||||
class="box mm-text mm-text--inherit mm-text--ellipsis box--display-flex box--gap-2 box--flex-direction-row box--align-items-center box--color-primary-inverse"
|
||||
>
|
||||
<div
|
||||
class="box mm-text mm-avatar-base mm-avatar-base--size-sm mm-avatar-account mm-text--body-sm mm-text--text-transform-uppercase box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-text-default box--background-color-background-alternative box--rounded-full box--border-color-border-default box--border-style-solid box--border-width-1"
|
||||
>
|
||||
<canvas
|
||||
height="32"
|
||||
style="display: none;"
|
||||
width="32"
|
||||
/>
|
||||
<img
|
||||
alt=""
|
||||
height="24"
|
||||
src="data:image/png;base64,00"
|
||||
style="border-radius: 50%;"
|
||||
width="24"
|
||||
/>
|
||||
</div>
|
||||
<span
|
||||
class="box mm-text mm-text--body-md mm-text--font-weight-bold mm-text--ellipsis box--flex-direction-row box--color-text-default"
|
||||
>
|
||||
Account 1
|
||||
</span>
|
||||
<span
|
||||
class="box mm-icon mm-icon--size-sm box--display-inline-block box--flex-direction-row box--color-icon-default"
|
||||
style="mask-image: url('./images/icons/arrow-down.svg');"
|
||||
/>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
`;
|
||||
72
ui/components/multichain/account-picker/account-picker.js
Normal file
72
ui/components/multichain/account-picker/account-picker.js
Normal file
@ -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 (
|
||||
<Button
|
||||
className="multichain-account-picker"
|
||||
onClick={onClick}
|
||||
backgroundColor={BackgroundColor.transparent}
|
||||
borderRadius={BorderRadius.LG}
|
||||
ellipsis
|
||||
textProps={{
|
||||
display: DISPLAY.FLEX,
|
||||
gap: 2,
|
||||
alignItems: AlignItems.center,
|
||||
}}
|
||||
>
|
||||
<AvatarAccount
|
||||
variant={
|
||||
useBlockie
|
||||
? AvatarAccountVariant.Blockies
|
||||
: AvatarAccountVariant.Jazzicon
|
||||
}
|
||||
address={address}
|
||||
size={Size.SM}
|
||||
/>
|
||||
<Text as="span" fontWeight={FONT_WEIGHT.BOLD} ellipsis>
|
||||
{name}
|
||||
</Text>
|
||||
<Icon
|
||||
name={ICON_NAMES.ARROW_DOWN}
|
||||
color={IconColor.iconDefault}
|
||||
size={Size.SM}
|
||||
/>
|
||||
</Button>
|
||||
);
|
||||
};
|
||||
|
||||
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,
|
||||
};
|
||||
@ -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) => <AccountPicker {...args} />;
|
||||
DefaultStory.storyName = 'Default';
|
||||
|
||||
export const ChaosStory = (args) => (
|
||||
<div
|
||||
style={{ maxWidth: '300px', border: '1px solid var(--color-border-muted)' }}
|
||||
>
|
||||
<AccountPicker {...args} />
|
||||
</div>
|
||||
);
|
||||
ChaosStory.storyName = 'Chaos';
|
||||
ChaosStory.args = { name: CHAOS_ACCOUNT.name };
|
||||
@ -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(
|
||||
<AccountPicker {...DEFAULT_PROPS} {...props} />,
|
||||
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();
|
||||
});
|
||||
});
|
||||
1
ui/components/multichain/account-picker/index.js
Normal file
1
ui/components/multichain/account-picker/index.js
Normal file
@ -0,0 +1 @@
|
||||
export { AccountPicker } from './account-picker';
|
||||
7
ui/components/multichain/account-picker/index.scss
Normal file
7
ui/components/multichain/account-picker/index.scss
Normal file
@ -0,0 +1,7 @@
|
||||
.multichain-account-picker {
|
||||
&:hover,
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
background: var(--color-background-default-hover);
|
||||
}
|
||||
}
|
||||
@ -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';
|
||||
|
||||
@ -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';
|
||||
|
||||
Loading…
Reference in New Issue
Block a user