mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 09:52:26 +01:00
c079c4320e
* UX: Multichain: Account Menu List * Move to using stylesheet * Add hover state * Implement George's suggestions * Add connected site avatar * Add hardware tag * Create story for selected hardware item * Progress on the AccountListItemMenu * Add story for AccountListItemMenu * Better position the account menu * Fix AvatarFavicon missing name prop * Update menu options label to be account specific * Update text of 'View on Explorer' * Add AccountListMenu component * Move all items to multichain directory * Fix paths * Fix linting, use AvatarIcon * Add title and close button to account menu * Center the popover title * Add search functionality * Implementation WIP * Add MULTICHAIN feature flag * Add MULTICHAIN feature flag, add actions for menu items * Properly dispatch events * Fix search box padding * Fix sizing of menu item text * Fix isRequired * Fix alignment of the popover * Update label for hardware wallet items, add text for no search results * Update keyring retreival to remove account and add label * Fix storybook * Fix double link click issue, prevent wrapping of values * Use labelProps for tag variant * Restructure item menu story * Empower storybooks for all new components * Allow only 3 decimals for currencies * Avoid inline styles * Prefix classes with multichain, fix account-list-menu storybook * Close the accounts menu when account details is clicked * Restore tag.js * Create global file for multichain css * Add index file for multichain js * Update file paths * Ensure the block domain is present in menu * Add AccountListItem test * Add AccountListItemMenu tests * Show account connect to current dapp * Improve tests * Make avatar smaller * Add tooltip for account menu * Align icon better * Update snapshot * Rename files to DS standard * Add index files for export * Export all multichain components * Update snapshot * Remove embedded style in popover * Add comments for props, cleanup storybook * Improve test coverage * Improve test code quality * Remove border form avatar * Switch to using the ButtonLink iconName prop * Only show tooltip if character limit is reached * Restore prior search settings * Add test for tooltip
130 lines
2.8 KiB
JavaScript
130 lines
2.8 KiB
JavaScript
import React from 'react';
|
|
|
|
import { Provider } from 'react-redux';
|
|
|
|
import testData from '../../../../.storybook/test-data';
|
|
import configureStore from '../../../store/store';
|
|
import { AccountListItem } from '.';
|
|
|
|
const store = configureStore(testData);
|
|
|
|
const [chaosAddress, simpleAddress, hardwareAddress] = Object.keys(
|
|
testData.metamask.identities,
|
|
);
|
|
|
|
const SIMPLE_IDENTITY = {
|
|
...testData.metamask.identities[simpleAddress],
|
|
balance: '0x152387ad22c3f0',
|
|
};
|
|
|
|
const HARDWARE_IDENTITY = {
|
|
...testData.metamask.identities[hardwareAddress],
|
|
balance: '0x152387ad22c3f0',
|
|
};
|
|
|
|
const CHAOS_IDENTITY = {
|
|
...testData.metamask.identities[chaosAddress],
|
|
balance: '0x152387ad22c3f0',
|
|
};
|
|
|
|
const CONTAINER_STYLES = {
|
|
style: {
|
|
width: '328px',
|
|
border: '1px solid var(--color-border-muted)',
|
|
},
|
|
};
|
|
|
|
const onClick = () => console.log('Clicked account!');
|
|
|
|
export default {
|
|
title: 'Components/Multichain/AccountListItem',
|
|
component: AccountListItem,
|
|
argTypes: {
|
|
identity: {
|
|
control: 'object',
|
|
},
|
|
selected: {
|
|
control: 'boolean',
|
|
},
|
|
onClick: {
|
|
action: 'onClick',
|
|
},
|
|
closeMenu: {
|
|
action: 'closeMenu',
|
|
},
|
|
connectedAvatar: {
|
|
control: 'text',
|
|
},
|
|
connectedAvatarName: {
|
|
control: 'text',
|
|
},
|
|
},
|
|
args: {
|
|
identity: SIMPLE_IDENTITY,
|
|
onClick,
|
|
},
|
|
};
|
|
|
|
export const DefaultStory = (args) => (
|
|
<div {...CONTAINER_STYLES}>
|
|
<AccountListItem {...args} />
|
|
</div>
|
|
);
|
|
|
|
export const SelectedItem = (args) => (
|
|
<div {...CONTAINER_STYLES}>
|
|
<AccountListItem {...args} />
|
|
</div>
|
|
);
|
|
SelectedItem.args = { selected: true };
|
|
|
|
export const HardwareItem = (args) => (
|
|
<div {...CONTAINER_STYLES}>
|
|
<AccountListItem {...args} />
|
|
</div>
|
|
);
|
|
HardwareItem.args = { identity: HARDWARE_IDENTITY };
|
|
HardwareItem.decorators = [
|
|
(story) => <Provider store={store}>{story()}</Provider>,
|
|
];
|
|
|
|
export const SelectedHardwareItem = (args) => (
|
|
<div {...CONTAINER_STYLES}>
|
|
<AccountListItem {...args} />
|
|
</div>
|
|
);
|
|
SelectedHardwareItem.args = { identity: HARDWARE_IDENTITY, selected: true };
|
|
SelectedHardwareItem.decorators = [
|
|
(story) => <Provider store={store}>{story()}</Provider>,
|
|
];
|
|
|
|
export const ChaosDataItem = (args) => (
|
|
<div {...CONTAINER_STYLES}>
|
|
<AccountListItem {...args} />
|
|
</div>
|
|
);
|
|
ChaosDataItem.args = { identity: CHAOS_IDENTITY };
|
|
|
|
export const ConnectedSiteItem = (args) => (
|
|
<div {...CONTAINER_STYLES}>
|
|
<AccountListItem {...args} />
|
|
</div>
|
|
);
|
|
ConnectedSiteItem.args = {
|
|
connectedAvatar: 'https://uniswap.org/favicon.ico',
|
|
connectedAvatarName: 'Uniswap',
|
|
};
|
|
|
|
export const ConnectedSiteChaosItem = (args) => (
|
|
<div {...CONTAINER_STYLES}>
|
|
<AccountListItem {...args} />
|
|
</div>
|
|
);
|
|
ConnectedSiteChaosItem.args = {
|
|
identity: CHAOS_IDENTITY,
|
|
connectedAvatar: 'https://uniswap.org/favicon.ico',
|
|
connectedAvatarName: 'Uniswap',
|
|
};
|
|
|
|
DefaultStory.storyName = 'Default';
|