feat(wallet): add QR code to receive popup (#2144)

* feat: add qr to popup

* feat: update QR

apps/wallet/package.json

@@ -134,6 +134,7 @@
         "jose": "^5.2.3",
         "mitt": "^3.0.1",
         "poseidon-lite": "^0.2.0",
+        "qrcode.react": "^4.0.1",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "react-error-boundary": "^4.0.10",

apps/wallet/src/ui/app/components/QR.tsx

@@ -0,0 +1,42 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { QRCodeSVG } from 'qrcode.react';
+
+export enum QRLevel {
+    L = 'L',
+    M = 'M',
+    Q = 'Q',
+    H = 'H',
+}
+interface QRProps {
+    value: string;
+    size: number;
+    bgColor?: string;
+    fgColor?: string;
+    level?: QRLevel;
+    marginSize?: number;
+    title?: string;
+}
+
+export function QR({
+    value,
+    size,
+    bgColor = '#ffffff',
+    fgColor = '#000000',
+    level = QRLevel.L,
+    marginSize,
+    title,
+}: QRProps) {
+    return (
+        <QRCodeSVG
+            value={value}
+            size={size}
+            bgColor={bgColor}
+            fgColor={fgColor}
+            level={level}
+            marginSize={marginSize}
+            title={title}
+        />
+    );
+}

apps/wallet/src/ui/app/components/index.ts

@@ -36,6 +36,7 @@ export * from './network-selector';
 export * from './nft-display';
 export * from './nft-display/NftImage';
 export * from './number-input';
+export * from './QR';
 export * from './receipt-card';
 export * from './receipt-card/TxnAddress';
 export * from './receipt-card/TxnAmount';

apps/wallet/src/ui/app/pages/home/tokens/TokensDetails.tsx

@@ -13,6 +13,7 @@ import {
     ExplorerLinkType,
     Loading,
     UnlockAccountButton,
+    QR,
 } from '_components';
 import { useAppSelector, useCoinsReFetchingConfig, useCopyToClipboard } from '_hooks';
 import { ampli } from '_src/shared/analytics/ampli';
@@ -612,7 +613,10 @@ function DialogReceiveTokens({
                 <DialogContent containerId="overlay-portal-container">
                     <Header title="Receive" onClose={() => setOpen(false)} />
                     <DialogBody>
-                        <div className="[&_span]:w-full [&_span]:break-words">
+                        <div className="flex flex-col gap-lg text-center [&_span]:w-full [&_span]:break-words">
+                            <div className="self-center">
+                                <QR value={address} size={130} />
+                            </div>
                             <Address text={address} />
                         </div>
                     </DialogBody>