1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
metamask-extension/ui/components/multichain/account-picker/account-picker.js
George Marshall 739075662c
Migrating Icon to typescript and deprecating JS component (#18431)
* Migrating Icon to typescript and deprecating JS component

* gw suggestions (#18434)

---------

Co-authored-by: Garrett Bear <gwhisten@gmail.com>
2023-04-04 09:48:04 -07:00

72 lines
1.6 KiB
JavaScript

import React from 'react';
import PropTypes from 'prop-types';
import { useSelector } from 'react-redux';
import {
Button,
AvatarAccount,
AvatarAccountVariant,
Text,
} from '../../component-library';
import { ICON_NAMES, Icon } from '../../component-library/icon/deprecated';
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,
};