UX: Multichain: Address Copy Button (#18153)

ui/components/multichain/address-copy-button/address-copy-button.js

@@ -0,0 +1,64 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import { ICON_NAMES, ButtonBase } from '../../component-library';
+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,
+}) => {
+  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)}
+        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,
+};

ui/components/multichain/address-copy-button/address-copy-button.stories.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import { AddressCopyButton } from '.';
+
+export default {
+  title: 'Components/Multichain/AddressCopyButton',
+  component: AddressCopyButton,
+  argTypes: {
+    address: {
+      control: 'text',
+    },
+    shorten: {
+      control: 'boolean',
+    },
+    wrap: {
+      control: 'boolean',
+    },
+  },
+  args: {
+    address: '0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc',
+  },
+};
+
+export const DefaultStory = (args) => <AddressCopyButton {...args} />;
+DefaultStory.storyName = 'Default';
+
+export const ShortenedStory = (args) => <AddressCopyButton {...args} />;
+ShortenedStory.storyName = 'Shortened';
+ShortenedStory.args = { shorten: true };
+
+export const WrappedStory = (args) => (
+  <div style={{ width: '200px' }}>
+    <AddressCopyButton {...args} />
+  </div>
+);
+WrappedStory.storyName = 'Wrapped';
+WrappedStory.args = { wrap: true };

ui/components/multichain/address-copy-button/address-copy-button.test.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { fireEvent, render } from '@testing-library/react';
+import { AddressCopyButton } from '.';
+
+const SAMPLE_ADDRESS = '0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc';
+
+describe('AccountListItem', () => {
+  it('renders the full address by default', () => {
+    render(<AddressCopyButton address={SAMPLE_ADDRESS} />);
+    expect(
+      document.querySelector('[data-testid="address-copy-button-text"]')
+        .textContent,
+    ).toStrictEqual(SAMPLE_ADDRESS);
+  });
+
+  it('renders a shortened address when it should', () => {
+    render(<AddressCopyButton address={SAMPLE_ADDRESS} shorten />);
+    expect(
+      document.querySelector('[data-testid="address-copy-button-text"]')
+        .textContent,
+    ).toStrictEqual('0x0dc...e7bc');
+  });
+
+  it('changes icon when clicked', () => {
+    render(<AddressCopyButton address={SAMPLE_ADDRESS} />);
+    fireEvent.click(document.querySelector('button'));
+    expect(document.querySelector('.mm-icon').style.maskImage).toContain(
+      'copy-success.svg',
+    );
+  });
+});

ui/components/multichain/address-copy-button/index.js

@@ -0,0 +1 @@
+export { AddressCopyButton } from './address-copy-button';

ui/components/multichain/address-copy-button/index.scss

@@ -0,0 +1,7 @@
+.multichain-address-copy-button {
+  &__address--wrap {
+    word-break: break-word;
+    min-height: 32px;
+    height: auto;
+  }
+}

ui/components/multichain/index.js

@@ -5,3 +5,4 @@ export { DetectedTokensBanner } from './detected-token-banner';
 export { GlobalMenu } from './global-menu';
 export { MultichainImportTokenLink } from './multichain-import-token-link';
 export { MultichainTokenListItem } from './multichain-token-list-item';
+export { AddressCopyButton } from './address-copy-button';

ui/components/multichain/multichain-components.scss

@@ -4,6 +4,7 @@
 * This will help improve specificity and reduce the chance of
 * unintended overrides.
 **/
+@import 'address-copy-button/index';
 @import 'account-list-item/index';
 @import 'account-list-menu/index';
 @import 'multichain-token-list-item/multichain-token-list-item';

ui/components/ui/qr-code/qr-code.js

@@ -8,6 +8,8 @@ import { toChecksumHexAddress } from '../../../../shared/modules/hexstring-utils
 import Tooltip from '../tooltip';
 import { useI18nContext } from '../../../hooks/useI18nContext';
 import { Icon, ICON_NAMES, ICON_SIZES } from '../../component-library';
+import { AddressCopyButton } from '../../multichain/address-copy-button';
+import Box from '../box/box';
 
 export default connect(mapStateToProps)(QrCodeView);
 
@@ -56,6 +58,11 @@ function QrCodeView(props) {
           __html: qrImage.createTableTag(4),
         }}
       />
+      {process.env.MULTICHAIN ? (
+        <Box marginLeft={2} marginRight={2}>
+          <AddressCopyButton wrap address={toChecksumHexAddress(data)} />
+        </Box>
+      ) : (
         <Tooltip
           wrapperClassName="qr-code__address-container__tooltip-wrapper"
           position="bottom"
@@ -75,6 +82,7 @@ function QrCodeView(props) {
             />
           </div>
         </Tooltip>
+      )}
     </div>
   );
 }