Implement in Address Details modal

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

Hide file tree

Showing 2 changed files with 27 additions and 19 deletions.
diff --git 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' } : {}) }}
       >
         <Text
           variant={TextVariant.bodyXs}

diff --git a/ui/components/ui/qr-code/qr-code.js b/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,25 +58,31 @@ function QrCodeView(props) {
           __html: qrImage.createTableTag(4),
         }}
       />
-      <Tooltip
-        wrapperClassName="qr-code__address-container__tooltip-wrapper"
-        position="bottom"
-        title={copied ? t('copiedExclamation') : t('copyToClipboard')}
-      >
-        <div
-          className="qr-code__address-container"
-          onClick={() => {
-            handleCopy(toChecksumHexAddress(data));
-          }}
+      {process.env.MULTICHAIN ? (
+        <Box marginLeft={2} marginRight={2}>
+          <AddressCopyButton wrap address={toChecksumHexAddress(data)} />
+        </Box>
+      ) : (
+        <Tooltip
+          wrapperClassName="qr-code__address-container__tooltip-wrapper"
+          position="bottom"
+          title={copied ? t('copiedExclamation') : t('copyToClipboard')}
         >
-          <div className="qr-code__address">{toChecksumHexAddress(data)}</div>
-          <Icon
-            name={copied ? ICON_NAMES.COPY_SUCCESS : ICON_NAMES.COPY}
-            size={ICON_SIZES.SM}
-            marginInlineStart={3}
-          />
-        </div>
-      </Tooltip>
+          <div
+            className="qr-code__address-container"
+            onClick={() => {
+              handleCopy(toChecksumHexAddress(data));
+            }}
+          >
+            <div className="qr-code__address">{toChecksumHexAddress(data)}</div>
+            <Icon
+              name={copied ? ICON_NAMES.COPY_SUCCESS : ICON_NAMES.COPY}
+              size={ICON_SIZES.SM}
+              marginInlineStart={3}
+            />
+          </div>
+        </Tooltip>
+      )}
     </div>
   );
 }