Replaced deprecated mixins

MetaMask · Jul 2, 2024 · 7ceca07 · 7ceca07
1 parent 1bb0949
commit 7ceca07
Showing 1 changed file with 24 additions and 6 deletions.
diff --git a/ui/components/ui/qr-code-view/qr-code-view.tsx b/ui/components/ui/qr-code-view/qr-code-view.tsx
@@ -3,18 +3,24 @@ import React, { useContext } from 'react';
 import qrCode from 'qrcode-generator';
 import { connect } from 'react-redux';
 import { isHexPrefixed } from 'ethereumjs-util';
-import { toChecksumHexAddress } from '../../../../shared/modules/hexstring-utils';
+import { normalizeSafeAddress } from '../../../../app/scripts/lib/multichain/address';
 import { AddressCopyButton } from '../../multichain';
 import Box from '../box/box';
 import { MetaMetricsContext } from '../../../contexts/metametrics';
 import {
   MetaMetricsEventCategory,
   MetaMetricsEventName,
 } from '../../../../shared/constants/metametrics';
+import type { CombinedBackgroundAndReduxState } from '../../../store/store';
+import { Text } from '../../component-library';
+import {
+  TextVariant,
+  TextColor,
+} from '../../../helpers/constants/design-system';
 
 export default connect(mapStateToProps)(QrCodeView);
 
-function mapStateToProps(state) {
+function mapStateToProps(state: CombinedBackgroundAndReduxState) {
   const { buyView, warning } = state.appState;
   return {
     // Qr code is not fetched from state. 'message' and 'data' props are passed instead.
@@ -23,12 +29,18 @@ function mapStateToProps(state) {
   };
 }
 
-function QrCodeView({ Qr, warning }) {
+function QrCodeView({
+  Qr,
+  warning,
+}: {
+  Qr: { message: string; data: string };
+  warning: null | string;
+}) {
   const trackEvent = useContext(MetaMetricsContext);
   const { message, data } = Qr;
   const address = `${
     isHexPrefixed(data) ? 'ethereum:' : ''
-  }${toChecksumHexAddress(data)}`;
+  }${normalizeSafeAddress(data)}`;
   const qrImage = qrCode(4, 'M');
   qrImage.addData(address);
   qrImage.make();
@@ -42,16 +54,22 @@ function QrCodeView({ Qr, warning }) {
       {Array.isArray(message) ? (
         <div className="qr-code__message-container">
           {message.map((msg, index) => (
-            <div className="qr_code__message" key={index}>
+            <Text
+              key={index}
+              data-testid="qr-code-message"
+              variant={TextVariant.bodyXs}
+              color={TextColor.warningDefault}
+            >
               {msg}
-            </div>
+            </Text>
           ))}
         </div>
       ) : (
         header
       )}
       {warning ? <span className="qr-code__error">{warning}</span> : null}
       <div
+        data-testid="qr-code-image"
         className="qr-code__wrapper"
         dangerouslySetInnerHTML={{
           __html: qrImage.createTableTag(5, 24),