diff --git a/package.json b/package.json index c3770513d5b5..4107c9c705a3 100644 --- a/package.json +++ b/package.json @@ -156,8 +156,7 @@ "@lifi/wallet-management@2.6.0": "patches/@lifi__wallet-management@2.6.0.patch", "react-use@17.4.0": "patches/react-use@17.4.0.patch", "gulp@5.0.0": "patches/gulp@5.0.0.patch", - "react-devtools-inline@5.2.0": "patches/react-devtools-inline@5.2.0.patch", - "react-qrcode-logo@2.10.0": "patches/react-qrcode-logo@2.10.0.patch" + "react-devtools-inline@5.2.0": "patches/react-devtools-inline@5.2.0.patch" } } } diff --git a/packages/mask/package.json b/packages/mask/package.json index 4eaad92b3020..3bbbf31314ef 100644 --- a/packages/mask/package.json +++ b/packages/mask/package.json @@ -134,7 +134,7 @@ "react-highlight-words": "^0.20.0", "react-hook-form": "7.45.2", "react-idle-timer": "^5.7.2", - "react-qrcode-logo": "^2.10.0", + "react-qrcode-logo": "^3.0.0", "react-router-dom": "^6.23.1", "react-to-print": "^2.14.13", "react-use": "^17.4.0", diff --git a/packages/shared/package.json b/packages/shared/package.json index 85dda58be22c..a43c1e531cd8 100644 --- a/packages/shared/package.json +++ b/packages/shared/package.json @@ -46,7 +46,7 @@ "qrcode": "^1.5.3", "react-hook-form": "^7.45.2", "react-markdown": "^9.0.1", - "react-qrcode-logo": "^2.10.0", + "react-qrcode-logo": "^3.0.0", "react-router-dom": "^6.23.1", "react-use": "^17.4.0", "rehype-external-links": "^3.0.0", diff --git a/packages/shared/src/UI/modals/WalletConnectQRCodeModal/QRCodeDialog.tsx b/packages/shared/src/UI/modals/WalletConnectQRCodeModal/QRCodeDialog.tsx index 4f617cbc059f..544050e19e7e 100644 --- a/packages/shared/src/UI/modals/WalletConnectQRCodeModal/QRCodeDialog.tsx +++ b/packages/shared/src/UI/modals/WalletConnectQRCodeModal/QRCodeDialog.tsx @@ -3,71 +3,67 @@ import { makeStyles } from '@masknet/theme' import { QRCode } from 'react-qrcode-logo' import { InjectedDialog, useSharedTrans } from '@masknet/shared' -const useStyles = makeStyles()((theme) => { - const isDark = theme.palette.mode === 'dark' - return { - dialog: { - [`.${dialogClasses.paper}`]: { - height: 563, - width: 600, - }, +const useStyles = makeStyles()((theme) => ({ + dialog: { + [`.${dialogClasses.paper}`]: { + height: 563, + width: 600, }, - container: { - display: 'flex', - flexDirection: 'column', - alignItems: 'center', - justifyContent: 'center', + }, + container: { + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + justifyContent: 'center', + }, + halo: { + position: 'relative', + zIndex: 2, + overflow: 'hidden', + width: '100%', + '&:before': { + position: 'absolute', + left: 30, + top: 10, + zIndex: 1, + content: '""', + height: 256, + width: 256, + backgroundImage: 'radial-gradient(50% 50.00% at 50% 50.00%, #FFE9E9 0%, rgba(255, 233, 233, 0.00) 100%)', }, - halo: { - position: 'relative', - zIndex: 2, - overflow: 'hidden', - width: '100%', - '&:before': { - position: 'absolute', - left: 30, - top: 10, - zIndex: 1, - content: '""', - height: 256, - width: 256, - backgroundImage: - 'radial-gradient(50% 50.00% at 50% 50.00%, #FFE9E9 0%, rgba(255, 233, 233, 0.00) 100%)', - }, - '&:after': { - position: 'absolute', - right: 30, - top: 20, - zIndex: 1, - content: '""', - height: 256, - width: 256, - backgroundImage: 'radial-gradient(50% 50% at 50% 50%, #F0E9FF 0%, rgba(240, 233, 255, 0.00) 100%)', - }, + '&:after': { + position: 'absolute', + right: 30, + top: 20, + zIndex: 1, + content: '""', + height: 256, + width: 256, + backgroundImage: 'radial-gradient(50% 50% at 50% 50%, #F0E9FF 0%, rgba(240, 233, 255, 0.00) 100%)', }, - grid: { - width: 393, - margin: theme.spacing(0, 'auto'), - padding: theme.spacing(2), - boxSizing: 'border-box', - backgroundColor: theme.palette.maskColor.bottom, - position: 'relative', - zIndex: 10, - }, - qrcode: { - width: 361, - height: 361, - boxShadow: theme.palette.maskColor.bottomBg, - borderRadius: theme.spacing(2), - overflow: 'hidden', - }, - tip: { - fontSize: 12, - marginTop: '10px', - textAlign: 'center', - }, - } -}) + }, + grid: { + width: 393, + margin: theme.spacing(0, 'auto'), + padding: theme.spacing(2), + boxSizing: 'border-box', + backgroundColor: theme.palette.maskColor.bottom, + position: 'relative', + zIndex: 10, + }, + qrcode: { + width: 361, + height: 361, + boxShadow: theme.palette.maskColor.bottomBg, + borderRadius: theme.spacing(2), + overflow: 'hidden', + }, + tip: { + fontSize: 12, + marginTop: '10px', + textAlign: 'center', + }, +})) interface QRCodeDialogProps { uri: string open: boolean diff --git a/patches/README.md b/patches/README.md index 1e53e11b41ae..cd4c78575499 100644 --- a/patches/README.md +++ b/patches/README.md @@ -33,7 +33,6 @@ - react-devtools-inline: and - @lifi/widget@2.10.1: Customized requirements, details can be viewed at the fork repository - react-use: -- react-qrcode-logo: ## CSP diff --git a/patches/react-qrcode-logo@2.10.0.patch b/patches/react-qrcode-logo@2.10.0.patch deleted file mode 100644 index abd3739dd751..000000000000 --- a/patches/react-qrcode-logo@2.10.0.patch +++ /dev/null @@ -1,13 +0,0 @@ -diff --git a/dist/index.js b/dist/index.js -index 292acdeb2741227691616e3571ff7fc8fa0a19fc..9ed88493b1bc767a5a2fcae45f521eb66979b467 100644 ---- a/dist/index.js -+++ b/dist/index.js -@@ -170,7 +170,7 @@ var QRCode = /** @class */ (function (_super) { - var qrCode = qrGenerator(0, ecLevel); - qrCode.addData(QRCode.utf16to8(value)); - qrCode.make(); -- var canvas = ReactDOM.findDOMNode(this.canvas.current); -+ var canvas = (this.canvas.current); - var ctx = canvas.getContext('2d'); - var canvasSize = size + (2 * quietZone); - var length = qrCode.getModuleCount(); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index e3dc6eb247b5..e70412faa69b 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -74,9 +74,6 @@ patchedDependencies: react-devtools-inline@5.2.0: hash: hll3vpoco5ydaw7tv7wrwoczze path: patches/react-devtools-inline@5.2.0.patch - react-qrcode-logo@2.10.0: - hash: bzi3mzqlz5yveqmh5d7hmhoteq - path: patches/react-qrcode-logo@2.10.0.patch react-use@17.4.0: hash: hl7dr6rjk7dvc67mgwhhnozk2u path: patches/react-use@17.4.0.patch @@ -672,8 +669,8 @@ importers: specifier: ^5.7.2 version: 5.7.2(react-dom@0.0.0-experimental-26f2496093-20240514(react@0.0.0-experimental-26f2496093-20240514))(react@0.0.0-experimental-26f2496093-20240514) react-qrcode-logo: - specifier: ^2.10.0 - version: 2.10.0(patch_hash=bzi3mzqlz5yveqmh5d7hmhoteq)(react-dom@0.0.0-experimental-26f2496093-20240514(react@0.0.0-experimental-26f2496093-20240514))(react@0.0.0-experimental-26f2496093-20240514) + specifier: ^3.0.0 + version: 3.0.0(react-dom@0.0.0-experimental-26f2496093-20240514(react@0.0.0-experimental-26f2496093-20240514))(react@0.0.0-experimental-26f2496093-20240514) react-router-dom: specifier: ^6.23.1 version: 6.23.1(react-dom@0.0.0-experimental-26f2496093-20240514(react@0.0.0-experimental-26f2496093-20240514))(react@0.0.0-experimental-26f2496093-20240514) @@ -2513,8 +2510,8 @@ importers: specifier: ^9.0.1 version: 9.0.1(react@0.0.0-experimental-26f2496093-20240514)(types-react@19.0.0-beta.1) react-qrcode-logo: - specifier: ^2.10.0 - version: 2.10.0(patch_hash=bzi3mzqlz5yveqmh5d7hmhoteq)(react-dom@0.0.0-experimental-26f2496093-20240514(react@0.0.0-experimental-26f2496093-20240514))(react@0.0.0-experimental-26f2496093-20240514) + specifier: ^3.0.0 + version: 3.0.0(react-dom@0.0.0-experimental-26f2496093-20240514(react@0.0.0-experimental-26f2496093-20240514))(react@0.0.0-experimental-26f2496093-20240514) react-router-dom: specifier: ^6.23.1 version: 6.23.1(react-dom@0.0.0-experimental-26f2496093-20240514(react@0.0.0-experimental-26f2496093-20240514))(react@0.0.0-experimental-26f2496093-20240514) @@ -12592,8 +12589,8 @@ packages: react-native-fetch-api@3.0.0: resolution: {integrity: sha512-g2rtqPjdroaboDKTsJCTlcmtw54E25OjyaunUP0anOZn4Fuo2IKs8BVfe02zVggA/UysbmfSnRJIqtNkAgggNA==} - react-qrcode-logo@2.10.0: - resolution: {integrity: sha512-Q1+jLtcyDl5rLR29YdkXVLzYk62p3+541x00HxURVBQhs6SqFyEZZVhvkU/VQ082ytXa3GdCmGWMLK5z0Vhe7g==} + react-qrcode-logo@3.0.0: + resolution: {integrity: sha512-2+vZ3GNBdUpYxIKyt6SFZsDGXa0xniyUQ0wPI4O0hJTzRjttPIx1pPnH9IWQmp/4nDMoN47IBhi3Breu1KudYw==} peerDependencies: react: 0.0.0-experimental-26f2496093-20240514 react-dom: 0.0.0-experimental-26f2496093-20240514 @@ -28300,7 +28297,7 @@ snapshots: dependencies: p-defer: 3.0.0 - react-qrcode-logo@2.10.0(patch_hash=bzi3mzqlz5yveqmh5d7hmhoteq)(react-dom@0.0.0-experimental-26f2496093-20240514(react@0.0.0-experimental-26f2496093-20240514))(react@0.0.0-experimental-26f2496093-20240514): + react-qrcode-logo@3.0.0(react-dom@0.0.0-experimental-26f2496093-20240514(react@0.0.0-experimental-26f2496093-20240514))(react@0.0.0-experimental-26f2496093-20240514): dependencies: lodash.isequal: 4.5.0 qrcode-generator: 1.4.4