feat: introduce fancy QR codes with logos in them (#10393)

Co-authored-by: Apotheosis <[email protected]>

Author: premiumjibles

package.json

@@ -171,7 +171,6 @@
     "p-queue": "^8.0.1",
     "p-ratelimit": "^1.0.1",
     "pretty-ms": "7.0.1",
-    "qr-image": "^3.2.0",
     "qs": "^6.10.5",
     "re-reselect": "^4.0.0",
     "react": "^19.0.0",
@@ -188,6 +187,7 @@
     "react-multi-ref": "^1.0.1",
     "react-number-format": "^4.9.3",
     "react-polyglot": "^0.7.2",
+    "react-qrcode-logo": "^4.0.0",
     "react-redux": "^9.2.0",
     "react-router": "^6.30.0",
     "react-router-breadcrumbs-hoc": "^4.1.0",
@@ -233,7 +233,6 @@
     "@types/node": "^22.13.14",
     "@types/node-polyglot": "^2.4.2",
     "@types/pify": "^5.0.4",
-    "@types/qr-image": "^3.2.5",
     "@types/qs": "^6.9.18",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",

src/components/LogoQRCode/LogoQRCode.tsx

@@ -0,0 +1,44 @@
+import { Box, Center, Spinner } from '@chakra-ui/react'
+import type { Asset } from '@shapeshiftoss/types'
+import { QRCode } from 'react-qrcode-logo'
+
+import { AssetIcon } from '../AssetIcon'
+
+type LogoQRCodeProps = {
+  text?: string
+  asset: Asset
+  loading?: boolean
+  size?: number
+}
+
+// Create a transparent 1x1 pixel image as a placeholder
+const transparentPixel =
+  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII='
+
+export const LogoQRCode = ({ text = '', asset, loading, size = 180 }: LogoQRCodeProps) => {
+  if (loading)
+    return (
+      <Center>
+        <Spinner />
+      </Center>
+    )
+
+  return (
+    <Center position='relative'>
+      <QRCode
+        value={text}
+        size={size}
+        logoHeight={40}
+        logoWidth={40}
+        logoPaddingStyle='circle'
+        logoPadding={2}
+        logoImage={transparentPixel}
+        removeQrCodeBehindLogo
+        ecLevel='H'
+      />
+      <Box position='absolute'>
+        <AssetIcon asset={asset} size='md' showNetworkIcon={false} />
+      </Box>
+    </Center>
+  )
+}

src/components/Modals/Receive/ReceiveInfo.tsx

@@ -27,6 +27,7 @@ import { useNavigate } from 'react-router-dom'
 import type { Address } from 'viem'
 
 import { AccountDropdown } from '@/components/AccountDropdown/AccountDropdown'
+import { LogoQRCode } from '@/components/LogoQRCode/LogoQRCode'
 import { MiddleEllipsis } from '@/components/MiddleEllipsis/MiddleEllipsis'
 import { DialogBackButton } from '@/components/Modal/components/DialogBackButton'
 import { DialogBody } from '@/components/Modal/components/DialogBody'
@@ -35,7 +36,6 @@ import { DialogFooter } from '@/components/Modal/components/DialogFooter'
 import { DialogHeader, DialogHeaderRight } from '@/components/Modal/components/DialogHeader'
 import { DialogTitle } from '@/components/Modal/components/DialogTitle'
 import { getReceiveAddress } from '@/components/MultiHopTrade/hooks/useReceiveAddress'
-import { QRCode } from '@/components/QRCode/QRCode'
 import { Text } from '@/components/Text'
 import type { TextPropTypes } from '@/components/Text/Text'
 import { getChainAdapterManager } from '@/context/PluginProvider/chainAdapterSingleton'
@@ -218,7 +218,7 @@ export const ReceiveInfo = ({ asset, accountId, onBack }: ReceivePropsType) => {
               <CardBody display='inline-block' textAlign='center' p={6}>
                 <LightMode>
                   <Skeleton isLoaded={!!receiveAddress && !isAddressLoading} mb={2}>
-                    <QRCode text={receiveAddress} data-test='receive-qr-code' />
+                    <LogoQRCode text={receiveAddress} asset={asset} data-test='receive-qr-code' />
                   </Skeleton>
                   <Skeleton isLoaded={!!receiveAddress && !isAddressLoading}>
                     <Flex

src/components/QRCode/QRCode.tsx

@@ -10614,7 +10614,6 @@ __metadata:
     "@types/node": ^22.13.14
     "@types/node-polyglot": ^2.4.2
     "@types/pify": ^5.0.4
-    "@types/qr-image": ^3.2.5
     "@types/qs": ^6.9.18
     "@types/react": ^19.0.0
     "@types/react-dom": ^19.0.0
@@ -10713,7 +10712,6 @@ __metadata:
     pify: ^5.0.0
     prettier: ^3.0.3
     pretty-ms: 7.0.1
-    qr-image: ^3.2.0
     qs: ^6.10.5
     re-reselect: ^4.0.0
     react: ^19.0.0
@@ -10730,6 +10728,7 @@ __metadata:
     react-multi-ref: ^1.0.1
     react-number-format: ^4.9.3
     react-polyglot: ^0.7.2
+    react-qrcode-logo: ^4.0.0
     react-redux: ^9.2.0
     react-router: ^6.30.0
     react-router-breadcrumbs-hoc: ^4.1.0
@@ -12152,15 +12151,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/qr-image@npm:^3.2.5":
-  version: 3.2.5
-  resolution: "@types/qr-image@npm:3.2.5"
-  dependencies:
-    "@types/node": "*"
-  checksum: 5b197ea858499ad95cd99fb457981dfe7b750f1301246f3f9944515c2d42f662746290525b564dbd79ecc2176632b2dd399d499a9a2552f4b7125395ae286a26
-  languageName: node
-  linkType: hard
-
 "@types/qs@npm:^6.9.18":
   version: 6.9.18
   resolution: "@types/qs@npm:6.9.18"
@@ -27004,20 +26994,20 @@ pvutils@latest:
   languageName: node
   linkType: hard
 
-"qr-image@npm:^3.2.0":
-  version: 3.2.0
-  resolution: "qr-image@npm:3.2.0"
-  checksum: 9d22d9425234b8dfbcf954cff334d1594aa7391f999b15cf3e07d554c99341e7c2303646ddf58237fc498455c11d505b8803a995ff22d8385ddd05f58b3259b5
-  languageName: node
-  linkType: hard
-
 "qrcode-generator@npm:^1.4.3":
   version: 1.4.4
   resolution: "qrcode-generator@npm:1.4.4"
   checksum: 860cfdd2a7a608d34e92cab99774cc08182e1911432f30ed36d16f8a5cdabd7fdf40239caed91fa2691cfe66c8d95c1340a2fc9cc439eed07a9f2eb328c6f527
   languageName: node
   linkType: hard
 
+"qrcode-generator@npm:^2.0.4":
+  version: 2.0.4
+  resolution: "qrcode-generator@npm:2.0.4"
+  checksum: d0a212e5126f0fe8f7238cc944f74eed57a8deadf7ec75cf5b052e254ae1fb4487732b0f2e856f3dfbb47e7482b31a9e5cbf3658bbf7fb85624f0dae6a6143e9
+  languageName: node
+  linkType: hard
+
 "qrcode-terminal-nooctal@npm:^0.12.1":
   version: 0.12.1
   resolution: "qrcode-terminal-nooctal@npm:0.12.1"
@@ -27456,6 +27446,18 @@ pvutils@latest:
   languageName: node
   linkType: hard
 
+"react-qrcode-logo@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "react-qrcode-logo@npm:4.0.0"
+  dependencies:
+    qrcode-generator: ^2.0.4
+  peerDependencies:
+    react: ">=18.0.0"
+    react-dom: ">=18.0.0"
+  checksum: 752a37626f65ea385f64ba22ce4b510813b15f21b20e0a71396f49786cf10e97616ac63b25431c8df5f265b1ead08aa110ded4dea81a89e614fe0bad20ebc759
+  languageName: node
+  linkType: hard
+
 "react-redux@npm:^9.2.0":
   version: 9.2.0
   resolution: "react-redux@npm:9.2.0"