1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-11-26 20:39:08 +01:00
metamask-extension/ui/components/multichain/address-copy-button/address-copy-button.js
David Walsh ab4843f06b
UX: Multichain: Implement Account Details Popover (#18811)
* UX: Multichain: Implement Account Details Popover

* Styling account details popover

* using ButtonSecondary with variant, removing Text

* adding account-details jest test

* Close popover when outside area clicked

* Move all export functionality into the popover

* Improve jest tests

* Implement new design for export key screens

* Hide warning when popover is closed

* Vertically align the copy button

* Move AccountDetailsDisplay to its own file

* Move authentication to its own file

* Move private key to its own component

* Fix misalignment of avatar on display screen

* Move private key to its own component

* Update ui/components/multichain/account-details/account-details-authenticate.js

Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net>

* Update ui/components/multichain/account-details/account-details.test.js

Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net>

* Prevent account name overflow, update text size

* Use FormTextField

* Add analytics

* Move location of accountDetailsAddress

* Ensure passsword input is used

---------

Co-authored-by: Victor Thomas <10986371+vthomas13@users.noreply.github.com>
Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net>
2023-05-03 12:09:13 -05:00

75 lines
2.1 KiB
JavaScript

import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { ButtonBase } from '../../component-library';
// TODO: Replace ICON_NAMES with IconName when ButtonBase/Buttons have been updated
import { ICON_NAMES } from '../../component-library/icon/deprecated';
import {
BackgroundColor,
TextVariant,
TextColor,
Size,
BorderRadius,
AlignItems,
} from '../../../helpers/constants/design-system';
import { useCopyToClipboard } from '../../../hooks/useCopyToClipboard';
import { shortenAddress } from '../../../helpers/utils/util';
import Tooltip from '../../ui/tooltip/tooltip';
import { useI18nContext } from '../../../hooks/useI18nContext';
export const AddressCopyButton = ({
address,
shorten = false,
wrap = false,
onClick,
}) => {
const displayAddress = shorten ? shortenAddress(address) : address;
const [copied, handleCopy] = useCopyToClipboard();
const t = useI18nContext();
return (
<Tooltip position="bottom" title={copied ? t('copiedExclamation') : null}>
<ButtonBase
backgroundColor={BackgroundColor.primaryMuted}
onClick={() => {
handleCopy(address);
onClick?.();
}}
paddingRight={4}
paddingLeft={4}
size={Size.SM}
variant={TextVariant.bodyXs}
color={TextColor.primaryDefault}
endIconName={copied ? ICON_NAMES.COPY_SUCCESS : ICON_NAMES.COPY}
className={classnames('multichain-address-copy-button', {
'multichain-address-copy-button__address--wrap': wrap,
})}
borderRadius={BorderRadius.pill}
alignItems={AlignItems.center}
data-testid="address-copy-button-text"
>
{displayAddress}
</ButtonBase>
</Tooltip>
);
};
AddressCopyButton.propTypes = {
/**
* Address to be copied
*/
address: PropTypes.string.isRequired,
/**
* Represents if the address should be shortened
*/
shorten: PropTypes.bool,
/**
* Represents if the element should wrap to multiple lines
*/
wrap: PropTypes.bool,
/**
* Fires when the button is clicked
*/
onClick: PropTypes.func,
};