Allow wrapping of address

MetaMask · Mar 15, 2023 · db53a0b · db53a0b
1 parent 5fbe413
commit db53a0b
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 1 deletion.
diff --git 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}
         </Text>
@@ -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
@@ -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) => <AddressCopyButton shorten {...args} />;
 ShortenedStory.storyName = 'Shortened';
+
+export const WrappedStory = (args) => (
+  <div style={{ width: '200px' }}>
+    <AddressCopyButton wrap {...args} />
+  </div>
+);
+WrappedStory.storyName = 'Wrapped';