From a01d5ccaedde0b6747fdece8113181439c22f958 Mon Sep 17 00:00:00 2001 From: evavirseda Date: Fri, 30 Aug 2024 19:47:27 +0200 Subject: [PATCH] feat(wallet): add QR code to receive popup (#2144) * feat: add qr to popup * feat: update QR --- apps/wallet/package.json | 1 + apps/wallet/src/ui/app/components/QR.tsx | 42 +++++++++++++++++++ apps/wallet/src/ui/app/components/index.ts | 1 + .../app/pages/home/tokens/TokensDetails.tsx | 6 ++- pnpm-lock.yaml | 12 ++++++ 5 files changed, 61 insertions(+), 1 deletion(-) create mode 100644 apps/wallet/src/ui/app/components/QR.tsx diff --git a/apps/wallet/package.json b/apps/wallet/package.json index 7aa3d4f2430..02b03ae7cb8 100644 --- a/apps/wallet/package.json +++ b/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", diff --git a/apps/wallet/src/ui/app/components/QR.tsx b/apps/wallet/src/ui/app/components/QR.tsx new file mode 100644 index 00000000000..2c4b806b161 --- /dev/null +++ b/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 ( + + ); +} diff --git a/apps/wallet/src/ui/app/components/index.ts b/apps/wallet/src/ui/app/components/index.ts index 6cb12c93937..45b1408246c 100644 --- a/apps/wallet/src/ui/app/components/index.ts +++ b/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'; diff --git a/apps/wallet/src/ui/app/pages/home/tokens/TokensDetails.tsx b/apps/wallet/src/ui/app/pages/home/tokens/TokensDetails.tsx index abbdc9e83da..db7f6cb8c80 100644 --- a/apps/wallet/src/ui/app/pages/home/tokens/TokensDetails.tsx +++ b/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({
setOpen(false)} /> -
+
+
+ +
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 9cd2ddf1ea6..fe781f22bfc 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -890,6 +890,9 @@ importers: poseidon-lite: specifier: ^0.2.0 version: 0.2.0 + qrcode.react: + specifier: ^4.0.1 + version: 4.0.1(react@18.3.1) react: specifier: ^18.3.1 version: 18.3.1 @@ -14855,6 +14858,11 @@ packages: resolution: {integrity: sha512-pMpnA0qRdFp32b1sJl1wOJNxZLQ2cbQx+k6tjNtZ8CpvVhNqEPRgivZ2WOUev2YMajecdH7ctUPDvEe87nariQ==} engines: {node: '>=6.0.0'} + qrcode.react@4.0.1: + resolution: {integrity: sha512-Lpj0tPBn561WiQ3QQWXbkx8xTtB8BZkJeMZWLJIL8iaPBCoWzW1IpCeU3gY5MDqsb0+efCvEGkl9O0naP64crA==} + peerDependencies: + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + qs@6.11.0: resolution: {integrity: sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==} engines: {node: '>=0.6'} @@ -35843,6 +35851,10 @@ snapshots: pvutils@1.1.3: {} + qrcode.react@4.0.1(react@18.3.1): + dependencies: + react: 18.3.1 + qs@6.11.0: dependencies: side-channel: 1.0.4