From f122f3dbcd9491c0f320b303c2196ccc0d55683f Mon Sep 17 00:00:00 2001 From: David Walsh Date: Tue, 14 Mar 2023 12:58:52 -0500 Subject: [PATCH 01/17] UX: Multichain: Addess Copy Button --- .../multichain/address-copy-button/index.js | 49 +++++++++++++++++++ .../address-copy-button/index.stories.js | 26 ++++++++++ 2 files changed, 75 insertions(+) create mode 100644 ui/components/multichain/address-copy-button/index.js create mode 100644 ui/components/multichain/address-copy-button/index.stories.js diff --git a/ui/components/multichain/address-copy-button/index.js b/ui/components/multichain/address-copy-button/index.js new file mode 100644 index 000000000000..eec2c755b57b --- /dev/null +++ b/ui/components/multichain/address-copy-button/index.js @@ -0,0 +1,49 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { Icon, ICON_NAMES, Text, ButtonBase } from '../../component-library'; +import { + BackgroundColor, + BorderRadius, + IconColor, + TextVariant, + TextColor, + Size, +} 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 AddressSnippetButton = ({ address, shorten = false }) => { + const displayAddress = shorten ? shortenAddress(address) : address; + const [copied, handleCopy] = useCopyToClipboard(); + const t = useI18nContext(); + + return ( + + + + {displayAddress} + + + + + ); +}; + +AddressSnippetButton.propTypes = { + address: PropTypes.string.isRequired, + shorten: PropTypes.bool, +}; diff --git a/ui/components/multichain/address-copy-button/index.stories.js b/ui/components/multichain/address-copy-button/index.stories.js new file mode 100644 index 000000000000..14695984f109 --- /dev/null +++ b/ui/components/multichain/address-copy-button/index.stories.js @@ -0,0 +1,26 @@ +import React from 'react'; +import { AddressSnippetButton } from '.'; + +export default { + title: 'Components/Multichain/AddressSnippetButton', + component: AddressSnippetButton, + argTypes: { + address: { + control: 'text', + }, + shorten: { + control: 'boolean', + }, + }, + args: { + address: '0xb19ac54efa18cc3a14a5b821bfec73d284bf0c5e', + }, +}; + +export const DefaultStory = (args) => ; +DefaultStory.storyName = 'Default'; + +export const ShortenedStory = (args) => ( + +); +DefaultStory.storyName = 'Shortened'; From defbcd51a3b347bb0175e0a387e6ce09a4cf14d8 Mon Sep 17 00:00:00 2001 From: David Walsh Date: Tue, 14 Mar 2023 14:02:08 -0500 Subject: [PATCH 02/17] Add tests --- .../multichain/address-copy-button/index.js | 16 ++++++---- .../address-copy-button/index.stories.js | 16 +++++----- .../address-copy-button/index.test.js | 31 +++++++++++++++++++ 3 files changed, 48 insertions(+), 15 deletions(-) create mode 100644 ui/components/multichain/address-copy-button/index.test.js diff --git a/ui/components/multichain/address-copy-button/index.js b/ui/components/multichain/address-copy-button/index.js index eec2c755b57b..841096bf02a8 100644 --- a/ui/components/multichain/address-copy-button/index.js +++ b/ui/components/multichain/address-copy-button/index.js @@ -14,7 +14,7 @@ import { shortenAddress } from '../../../helpers/utils/util'; import Tooltip from '../../ui/tooltip/tooltip'; import { useI18nContext } from '../../../hooks/useI18nContext'; -export const AddressSnippetButton = ({ address, shorten = false }) => { +export const AddressCopyButton = ({ address, shorten = false }) => { const displayAddress = shorten ? shortenAddress(address) : address; const [copied, handleCopy] = useCopyToClipboard(); const t = useI18nContext(); @@ -22,15 +22,19 @@ export const AddressSnippetButton = ({ address, shorten = false }) => { return ( - + {displayAddress} { ); }; -AddressSnippetButton.propTypes = { +AddressCopyButton.propTypes = { address: PropTypes.string.isRequired, shorten: PropTypes.bool, }; diff --git a/ui/components/multichain/address-copy-button/index.stories.js b/ui/components/multichain/address-copy-button/index.stories.js index 14695984f109..d5f84339c1c0 100644 --- a/ui/components/multichain/address-copy-button/index.stories.js +++ b/ui/components/multichain/address-copy-button/index.stories.js @@ -1,9 +1,9 @@ import React from 'react'; -import { AddressSnippetButton } from '.'; +import { AddressCopyButton } from '.'; export default { - title: 'Components/Multichain/AddressSnippetButton', - component: AddressSnippetButton, + title: 'Components/Multichain/AddressCopyButton', + component: AddressCopyButton, argTypes: { address: { control: 'text', @@ -13,14 +13,12 @@ export default { }, }, args: { - address: '0xb19ac54efa18cc3a14a5b821bfec73d284bf0c5e', + address: '0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc', }, }; -export const DefaultStory = (args) => ; +export const DefaultStory = (args) => ; DefaultStory.storyName = 'Default'; -export const ShortenedStory = (args) => ( - -); -DefaultStory.storyName = 'Shortened'; +export const ShortenedStory = (args) => ; +ShortenedStory.storyName = 'Shortened'; diff --git a/ui/components/multichain/address-copy-button/index.test.js b/ui/components/multichain/address-copy-button/index.test.js new file mode 100644 index 000000000000..a885fe45dff9 --- /dev/null +++ b/ui/components/multichain/address-copy-button/index.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(); + expect( + document.querySelector('[data-testid="address-copy-button-text"]') + .textContent, + ).toStrictEqual(SAMPLE_ADDRESS); + }); + + it('renders a shortened address when it should', () => { + render(); + expect( + document.querySelector('[data-testid="address-copy-button-text"]') + .textContent, + ).toStrictEqual('0x0dc...e7bc'); + }); + + it('changes icon when clicked', () => { + render(); + fireEvent.click(document.querySelector('button')); + expect(document.querySelector('.mm-icon').style.maskImage).toContain( + 'copy-success.svg', + ); + }); +}); From 1aee741c304128497f1a9fb273942b9606f893b9 Mon Sep 17 00:00:00 2001 From: David Walsh Date: Tue, 14 Mar 2023 18:47:08 -0500 Subject: [PATCH 03/17] Fix lint --- ui/components/multichain/address-copy-button/index.js | 1 - 1 file changed, 1 deletion(-) diff --git a/ui/components/multichain/address-copy-button/index.js b/ui/components/multichain/address-copy-button/index.js index 841096bf02a8..46b458586ff9 100644 --- a/ui/components/multichain/address-copy-button/index.js +++ b/ui/components/multichain/address-copy-button/index.js @@ -3,7 +3,6 @@ import PropTypes from 'prop-types'; import { Icon, ICON_NAMES, Text, ButtonBase } from '../../component-library'; import { BackgroundColor, - BorderRadius, IconColor, TextVariant, TextColor, From c3c29d6eee8f2f419c80d0ff0e11ff57c7860add Mon Sep 17 00:00:00 2001 From: David Walsh Date: Wed, 15 Mar 2023 09:45:07 -0500 Subject: [PATCH 04/17] Allow wrapping of address --- ui/components/multichain/address-copy-button/index.js | 8 +++++++- .../multichain/address-copy-button/index.stories.js | 10 ++++++++++ 2 files changed, 17 insertions(+), 1 deletion(-) diff --git a/ui/components/multichain/address-copy-button/index.js b/ui/components/multichain/address-copy-button/index.js index 46b458586ff9..ed49d36415b3 100644 --- a/ui/components/multichain/address-copy-button/index.js +++ b/ui/components/multichain/address-copy-button/index.js @@ -13,7 +13,11 @@ import { shortenAddress } from '../../../helpers/utils/util'; import Tooltip from '../../ui/tooltip/tooltip'; import { useI18nContext } from '../../../hooks/useI18nContext'; -export const AddressCopyButton = ({ address, shorten = false }) => { +export const AddressCopyButton = ({ + address, + shorten = false, + wrap = false, +}) => { const displayAddress = shorten ? shortenAddress(address) : address; const [copied, handleCopy] = useCopyToClipboard(); const t = useI18nContext(); @@ -33,6 +37,7 @@ export const AddressCopyButton = ({ address, shorten = false }) => { variant={TextVariant.bodyXs} color={TextColor.primaryDefault} data-testid="address-copy-button-text" + style={wrap ? { wordBreak: 'break-word' } : {}} > {displayAddress} @@ -49,4 +54,5 @@ export const AddressCopyButton = ({ address, shorten = false }) => { AddressCopyButton.propTypes = { address: PropTypes.string.isRequired, shorten: PropTypes.bool, + wrap: PropTypes.bool, }; diff --git a/ui/components/multichain/address-copy-button/index.stories.js b/ui/components/multichain/address-copy-button/index.stories.js index d5f84339c1c0..2780bb5645de 100644 --- a/ui/components/multichain/address-copy-button/index.stories.js +++ b/ui/components/multichain/address-copy-button/index.stories.js @@ -11,6 +11,9 @@ export default { shorten: { control: 'boolean', }, + wrap: { + control: 'boolean', + }, }, args: { address: '0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc', @@ -22,3 +25,10 @@ DefaultStory.storyName = 'Default'; export const ShortenedStory = (args) => ; ShortenedStory.storyName = 'Shortened'; + +export const WrappedStory = (args) => ( +
+ +
+); +WrappedStory.storyName = 'Wrapped'; From a83bfc8161cc50b79c8131696bdc05bcc3b46698 Mon Sep 17 00:00:00 2001 From: David Walsh Date: Wed, 15 Mar 2023 13:35:27 -0500 Subject: [PATCH 05/17] Implement in Address Details modal --- .../multichain/address-copy-button/index.js | 2 +- ui/components/ui/qr-code/qr-code.js | 44 +++++++++++-------- 2 files changed, 27 insertions(+), 19 deletions(-) diff --git a/ui/components/multichain/address-copy-button/index.js b/ui/components/multichain/address-copy-button/index.js index ed49d36415b3..e5a09c20d552 100644 --- a/ui/components/multichain/address-copy-button/index.js +++ b/ui/components/multichain/address-copy-button/index.js @@ -31,7 +31,7 @@ export const AddressCopyButton = ({ paddingRight={3} paddingLeft={3} size={Size.SM} - style={{ borderRadius: '999px' }} + style={{ borderRadius: '999px', ...(wrap ? { height: 'auto' } : {}) }} > - -
{ - handleCopy(toChecksumHexAddress(data)); - }} + {process.env.MULTICHAIN ? ( + + + + ) : ( + -
{toChecksumHexAddress(data)}
- -
- +
{ + handleCopy(toChecksumHexAddress(data)); + }} + > +
{toChecksumHexAddress(data)}
+ +
+ + )} ); } From b1bc82b548e3bd399734d7dbc5a8cd206f60b597 Mon Sep 17 00:00:00 2001 From: David Walsh Date: Thu, 16 Mar 2023 13:01:13 -0500 Subject: [PATCH 06/17] Fix copy --- ui/components/multichain/address-copy-button/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui/components/multichain/address-copy-button/index.js b/ui/components/multichain/address-copy-button/index.js index e5a09c20d552..b56fc0cc8a80 100644 --- a/ui/components/multichain/address-copy-button/index.js +++ b/ui/components/multichain/address-copy-button/index.js @@ -26,7 +26,7 @@ export const AddressCopyButton = ({ handleCopy(address)} padding={0} paddingRight={3} paddingLeft={3} From 3d0634ee3a90743dc5d61c47a69d2a2c634fd7c5 Mon Sep 17 00:00:00 2001 From: David Walsh Date: Thu, 16 Mar 2023 13:52:50 -0500 Subject: [PATCH 07/17] Standardize file paths --- .../address-copy-button/{index.js => address-copy-button.js} | 0 .../{index.stories.js => address-copy-button.stories.js} | 0 .../{index.test.js => address-copy-button.test.js} | 0 3 files changed, 0 insertions(+), 0 deletions(-) rename ui/components/multichain/address-copy-button/{index.js => address-copy-button.js} (100%) rename ui/components/multichain/address-copy-button/{index.stories.js => address-copy-button.stories.js} (100%) rename ui/components/multichain/address-copy-button/{index.test.js => address-copy-button.test.js} (100%) diff --git a/ui/components/multichain/address-copy-button/index.js b/ui/components/multichain/address-copy-button/address-copy-button.js similarity index 100% rename from ui/components/multichain/address-copy-button/index.js rename to ui/components/multichain/address-copy-button/address-copy-button.js diff --git a/ui/components/multichain/address-copy-button/index.stories.js b/ui/components/multichain/address-copy-button/address-copy-button.stories.js similarity index 100% rename from ui/components/multichain/address-copy-button/index.stories.js rename to ui/components/multichain/address-copy-button/address-copy-button.stories.js diff --git a/ui/components/multichain/address-copy-button/index.test.js b/ui/components/multichain/address-copy-button/address-copy-button.test.js similarity index 100% rename from ui/components/multichain/address-copy-button/index.test.js rename to ui/components/multichain/address-copy-button/address-copy-button.test.js From bfa357fe9cef206eccc82f422d5ba215c6ca81e0 Mon Sep 17 00:00:00 2001 From: David Walsh Date: Thu, 16 Mar 2023 13:55:43 -0500 Subject: [PATCH 08/17] Add index for export --- ui/components/multichain/address-copy-button/index.js | 1 + 1 file changed, 1 insertion(+) create mode 100644 ui/components/multichain/address-copy-button/index.js diff --git a/ui/components/multichain/address-copy-button/index.js b/ui/components/multichain/address-copy-button/index.js new file mode 100644 index 000000000000..8b93ba9b9378 --- /dev/null +++ b/ui/components/multichain/address-copy-button/index.js @@ -0,0 +1 @@ +export { AddressCopyButton } from './address-copy-button'; From e26c0caa48f4a3cf95d9d46d9524a705208bccf2 Mon Sep 17 00:00:00 2001 From: David Walsh Date: Thu, 16 Mar 2023 18:16:26 -0500 Subject: [PATCH 09/17] Add MULTICHAIN flag code --- .../address-copy-button/address-copy-button.js | 9 +++++++-- .../multichain/address-copy-button/index.scss | 11 +++++++++++ ui/components/multichain/index.js | 1 + ui/components/multichain/index.scss | 3 +++ ui/css/index.scss | 1 + 5 files changed, 23 insertions(+), 2 deletions(-) create mode 100644 ui/components/multichain/address-copy-button/index.scss create mode 100644 ui/components/multichain/index.scss diff --git a/ui/components/multichain/address-copy-button/address-copy-button.js b/ui/components/multichain/address-copy-button/address-copy-button.js index b56fc0cc8a80..a4cb36cd8b81 100644 --- a/ui/components/multichain/address-copy-button/address-copy-button.js +++ b/ui/components/multichain/address-copy-button/address-copy-button.js @@ -1,5 +1,6 @@ import React from 'react'; import PropTypes from 'prop-types'; +import classnames from 'classnames'; import { Icon, ICON_NAMES, Text, ButtonBase } from '../../component-library'; import { BackgroundColor, @@ -31,13 +32,17 @@ export const AddressCopyButton = ({ paddingRight={3} paddingLeft={3} size={Size.SM} - style={{ borderRadius: '999px', ...(wrap ? { height: 'auto' } : {}) }} + className={classnames('multichain-address-copy-button', { + 'multichain-address-copy-button--wrap': wrap, + })} > {displayAddress} diff --git a/ui/components/multichain/address-copy-button/index.scss b/ui/components/multichain/address-copy-button/index.scss new file mode 100644 index 000000000000..af884ae5faf7 --- /dev/null +++ b/ui/components/multichain/address-copy-button/index.scss @@ -0,0 +1,11 @@ +.multichain-address-copy-button { + border-radius: 999px; + + &--wrap { + height: auto; + } + + &__address--wrap { + word-break: break-word; + } +} diff --git a/ui/components/multichain/index.js b/ui/components/multichain/index.js index d34e427510d9..a2bc7d66161a 100644 --- a/ui/components/multichain/index.js +++ b/ui/components/multichain/index.js @@ -4,3 +4,4 @@ export { AccountListMenu } from './account-list-menu'; export { DetectedTokensBanner } from './detected-token-banner'; export { MultichainImportTokenLink } from './multichain-import-token-link'; export { MultichainTokenListItem } from './multichain-token-list-item'; +export { AddressCopyButton } from './address-copy-button'; diff --git a/ui/components/multichain/index.scss b/ui/components/multichain/index.scss new file mode 100644 index 000000000000..16fe813a5993 --- /dev/null +++ b/ui/components/multichain/index.scss @@ -0,0 +1,3 @@ +@import 'account-list-item/'; +@import 'account-list-menu/'; +@import 'address-copy-button/'; diff --git a/ui/css/index.scss b/ui/css/index.scss index a26c7ae09cf6..d1d58f20a60e 100644 --- a/ui/css/index.scss +++ b/ui/css/index.scss @@ -10,6 +10,7 @@ @import './base-styles.scss'; @import '../components/component-library/component-library-components.scss'; @import '../components/app/app-components'; +@import '../components/multichain'; @import '../components/ui/ui-components'; @import '../components/multichain/multichain-components.scss'; @import '../pages/pages'; From cb854692f5d191089315821187394ed25f184a59 Mon Sep 17 00:00:00 2001 From: David Walsh Date: Sat, 18 Mar 2023 13:48:08 -0500 Subject: [PATCH 10/17] Add comments for props --- .../address-copy-button/address-copy-button.js | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/ui/components/multichain/address-copy-button/address-copy-button.js b/ui/components/multichain/address-copy-button/address-copy-button.js index a4cb36cd8b81..cdceafc51574 100644 --- a/ui/components/multichain/address-copy-button/address-copy-button.js +++ b/ui/components/multichain/address-copy-button/address-copy-button.js @@ -57,7 +57,16 @@ export const AddressCopyButton = ({ }; 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, }; From 9f2ab0a97cd0a3239eb96058ba16da52f1367b3a Mon Sep 17 00:00:00 2001 From: David Walsh Date: Sat, 18 Mar 2023 13:49:23 -0500 Subject: [PATCH 11/17] Use args properly in stories --- .../address-copy-button/address-copy-button.stories.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/ui/components/multichain/address-copy-button/address-copy-button.stories.js b/ui/components/multichain/address-copy-button/address-copy-button.stories.js index 2780bb5645de..869bfec255d7 100644 --- a/ui/components/multichain/address-copy-button/address-copy-button.stories.js +++ b/ui/components/multichain/address-copy-button/address-copy-button.stories.js @@ -23,12 +23,14 @@ export default { export const DefaultStory = (args) => ; DefaultStory.storyName = 'Default'; -export const ShortenedStory = (args) => ; +export const ShortenedStory = (args) => ; ShortenedStory.storyName = 'Shortened'; +ShortenedStory.args = { shorten: true }; export const WrappedStory = (args) => (
- +
); WrappedStory.storyName = 'Wrapped'; +WrappedStory.args = { wrap: true }; From ed0c8b5d033be231a2d293f6f352489a5a918156 Mon Sep 17 00:00:00 2001 From: David Walsh Date: Tue, 21 Mar 2023 11:22:32 -0500 Subject: [PATCH 12/17] Use BorderRadius instead of CSS --- .../multichain/address-copy-button/address-copy-button.js | 2 ++ ui/components/multichain/address-copy-button/index.scss | 2 -- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/ui/components/multichain/address-copy-button/address-copy-button.js b/ui/components/multichain/address-copy-button/address-copy-button.js index cdceafc51574..dc9ab321f54f 100644 --- a/ui/components/multichain/address-copy-button/address-copy-button.js +++ b/ui/components/multichain/address-copy-button/address-copy-button.js @@ -8,6 +8,7 @@ import { TextVariant, TextColor, Size, + BorderRadius, } from '../../../helpers/constants/design-system'; import { useCopyToClipboard } from '../../../hooks/useCopyToClipboard'; import { shortenAddress } from '../../../helpers/utils/util'; @@ -35,6 +36,7 @@ export const AddressCopyButton = ({ className={classnames('multichain-address-copy-button', { 'multichain-address-copy-button--wrap': wrap, })} + borderRadius={BorderRadius.pill} > Date: Wed, 22 Mar 2023 10:10:07 -0500 Subject: [PATCH 13/17] Fix layout --- .../address-copy-button.js | 38 +++++++++++-------- .../multichain/address-copy-button/index.scss | 4 -- 2 files changed, 23 insertions(+), 19 deletions(-) diff --git a/ui/components/multichain/address-copy-button/address-copy-button.js b/ui/components/multichain/address-copy-button/address-copy-button.js index dc9ab321f54f..8000e58b71af 100644 --- a/ui/components/multichain/address-copy-button/address-copy-button.js +++ b/ui/components/multichain/address-copy-button/address-copy-button.js @@ -1,6 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import classnames from 'classnames'; +import Box from '../../ui/box/box'; import { Icon, ICON_NAMES, Text, ButtonBase } from '../../component-library'; import { BackgroundColor, @@ -9,6 +10,8 @@ import { TextColor, Size, BorderRadius, + AlignItems, + DISPLAY, } from '../../../helpers/constants/design-system'; import { useCopyToClipboard } from '../../../hooks/useCopyToClipboard'; import { shortenAddress } from '../../../helpers/utils/util'; @@ -37,22 +40,27 @@ export const AddressCopyButton = ({ 'multichain-address-copy-button--wrap': wrap, })} borderRadius={BorderRadius.pill} + alignItems={AlignItems.center} > - - {displayAddress} - - + + + {displayAddress} + + + ); diff --git a/ui/components/multichain/address-copy-button/index.scss b/ui/components/multichain/address-copy-button/index.scss index ed8f485a133d..de43cd189c81 100644 --- a/ui/components/multichain/address-copy-button/index.scss +++ b/ui/components/multichain/address-copy-button/index.scss @@ -1,8 +1,4 @@ .multichain-address-copy-button { - &--wrap { - height: auto; - } - &__address--wrap { word-break: break-word; } From 04d1d5b123b7c5151bbde1ac2c1235d0e5f7e8d6 Mon Sep 17 00:00:00 2001 From: David Walsh Date: Thu, 23 Mar 2023 14:01:57 -0500 Subject: [PATCH 14/17] Move CSS imports to new file --- ui/components/multichain/index.scss | 3 --- ui/components/multichain/multichain-components.scss | 1 + ui/css/index.scss | 1 - 3 files changed, 1 insertion(+), 4 deletions(-) delete mode 100644 ui/components/multichain/index.scss diff --git a/ui/components/multichain/index.scss b/ui/components/multichain/index.scss deleted file mode 100644 index 16fe813a5993..000000000000 --- a/ui/components/multichain/index.scss +++ /dev/null @@ -1,3 +0,0 @@ -@import 'account-list-item/'; -@import 'account-list-menu/'; -@import 'address-copy-button/'; diff --git a/ui/components/multichain/multichain-components.scss b/ui/components/multichain/multichain-components.scss index e8ee40ffa49e..8fe555f0ba21 100644 --- a/ui/components/multichain/multichain-components.scss +++ b/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'; diff --git a/ui/css/index.scss b/ui/css/index.scss index d1d58f20a60e..a26c7ae09cf6 100644 --- a/ui/css/index.scss +++ b/ui/css/index.scss @@ -10,7 +10,6 @@ @import './base-styles.scss'; @import '../components/component-library/component-library-components.scss'; @import '../components/app/app-components'; -@import '../components/multichain'; @import '../components/ui/ui-components'; @import '../components/multichain/multichain-components.scss'; @import '../pages/pages'; From 9688945d62d1ffb8a11b7a4ddde814ca903ef2e6 Mon Sep 17 00:00:00 2001 From: Garrett Bear Date: Tue, 28 Mar 2023 07:53:32 -0700 Subject: [PATCH 15/17] multichain copy button updates (#18324) * multichain copy button updates * Update ui/components/multichain/address-copy-button/index.scss Co-authored-by: George Marshall --------- Co-authored-by: George Marshall --- .../address-copy-button.js | 32 ++++--------------- .../multichain/address-copy-button/index.scss | 3 ++ 2 files changed, 10 insertions(+), 25 deletions(-) diff --git a/ui/components/multichain/address-copy-button/address-copy-button.js b/ui/components/multichain/address-copy-button/address-copy-button.js index 8000e58b71af..c45af1ea2629 100644 --- a/ui/components/multichain/address-copy-button/address-copy-button.js +++ b/ui/components/multichain/address-copy-button/address-copy-button.js @@ -1,17 +1,14 @@ import React from 'react'; import PropTypes from 'prop-types'; import classnames from 'classnames'; -import Box from '../../ui/box/box'; -import { Icon, ICON_NAMES, Text, ButtonBase } from '../../component-library'; +import { ICON_NAMES, ButtonBase } from '../../component-library'; import { BackgroundColor, - IconColor, TextVariant, TextColor, Size, BorderRadius, AlignItems, - DISPLAY, } from '../../../helpers/constants/design-system'; import { useCopyToClipboard } from '../../../hooks/useCopyToClipboard'; import { shortenAddress } from '../../../helpers/utils/util'; @@ -32,35 +29,20 @@ export const AddressCopyButton = ({ handleCopy(address)} - padding={0} paddingRight={3} paddingLeft={3} 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--wrap': wrap, + 'multichain-address-copy-button__address--wrap': wrap, })} borderRadius={BorderRadius.pill} alignItems={AlignItems.center} + data-testid="address-copy-button-text" > - - - {displayAddress} - - - + {displayAddress} ); diff --git a/ui/components/multichain/address-copy-button/index.scss b/ui/components/multichain/address-copy-button/index.scss index de43cd189c81..a956a2febf98 100644 --- a/ui/components/multichain/address-copy-button/index.scss +++ b/ui/components/multichain/address-copy-button/index.scss @@ -1,5 +1,8 @@ .multichain-address-copy-button { + &__address--wrap { word-break: break-word; + min-height: 32px; + height: auto; } } From c4e71b3ba5909ea4cac20fef987c236449994be3 Mon Sep 17 00:00:00 2001 From: David Walsh Date: Tue, 28 Mar 2023 10:05:04 -0500 Subject: [PATCH 16/17] Fix lint --- ui/components/multichain/address-copy-button/index.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/ui/components/multichain/address-copy-button/index.scss b/ui/components/multichain/address-copy-button/index.scss index a956a2febf98..12226fec171a 100644 --- a/ui/components/multichain/address-copy-button/index.scss +++ b/ui/components/multichain/address-copy-button/index.scss @@ -1,5 +1,4 @@ .multichain-address-copy-button { - &__address--wrap { word-break: break-word; min-height: 32px; From bd923fa0336a43ad305fc7126eb29e875f6e7170 Mon Sep 17 00:00:00 2001 From: David Walsh Date: Tue, 28 Mar 2023 17:30:20 -0500 Subject: [PATCH 17/17] Update ui/components/multichain/address-copy-button/address-copy-button.js Co-authored-by: George Marshall --- .../multichain/address-copy-button/address-copy-button.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/ui/components/multichain/address-copy-button/address-copy-button.js b/ui/components/multichain/address-copy-button/address-copy-button.js index c45af1ea2629..f88fabdd8f40 100644 --- a/ui/components/multichain/address-copy-button/address-copy-button.js +++ b/ui/components/multichain/address-copy-button/address-copy-button.js @@ -29,8 +29,8 @@ export const AddressCopyButton = ({ handleCopy(address)} - paddingRight={3} - paddingLeft={3} + paddingRight={4} + paddingLeft={4} size={Size.SM} variant={TextVariant.bodyXs} color={TextColor.primaryDefault}