refactor: remove patch of react qrcode

package.json

@@ -156,8 +156,7 @@
       "@lifi/[email protected]": "patches/@[email protected]",
       "[email protected]": "patches/[email protected]",
       "[email protected]": "patches/[email protected]",
-      "[email protected]": "patches/[email protected]",
-      "[email protected]": "patches/[email protected]"
+      "[email protected]": "patches/[email protected]"
     }
   }
 }

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",

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",

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

patches/README.md

@@ -33,7 +33,6 @@
 - react-devtools-inline: <https://github.com/facebook/react/pull/27733> and <https://github.com/facebook/react/pull/29199>
 - @lifi/widget@2.10.1: Customized requirements, details can be viewed at the fork repository <https://github.com/DimensionDev/lifi-widget>
 - react-use: <https://github.com/streamich/react-use/issues/1923>
-- react-qrcode-logo: <https://github.com/gcoro/react-qrcode-logo/issues/55>
 
 ## CSP