From d1422dfd3691d4bcd69dc84c50da5e56a40c29f6 Mon Sep 17 00:00:00 2001
From: David Walsh <davidwalsh83@gmail.com>
Date: Wed, 15 Mar 2023 13:35:27 -0500
Subject: [PATCH] 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' } : {}) }}
       >
         <Text
           variant={TextVariant.bodyXs}
diff --git a/ui/components/ui/qr-code/qr-code.js b/ui/components/ui/qr-code/qr-code.js
index 758620092839..995424c5f553 100644
--- 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>
   );
 }