Merge branch 'jribbink/wip-connect' into jribbink/features

components/QRCode.tsx

@@ -1,5 +1,5 @@
 import { Box, Flex, Image } from '@chakra-ui/react'
-import { Fragment, memo } from 'react'
+import { Fragment, memo, useMemo } from 'react'
 import QRCodeLib from 'qrcode'
 import NextImage, { StaticImageData } from 'next/image'
 import { isDataURL } from '../helpers/urls'
@@ -30,18 +30,20 @@ const QRCode = memo(function QRCode({
     (x < 8 && (y < 8 || y >= length - 8)) || (x >= length - 8 && y < 8)
 
   // Compute the scale factor so we can determine which modules are behind the image
+  const sizePixels = useMemo(() => convertToPixels(size), [size])
+  const imageSizePixels = useMemo(() => convertToPixels(imageSize), [imageSize])
   let isModuleBehindImage: (x: number, y: number) => boolean = () => false
   if (image) {
-    const scaleFactor = length / convertToPixels(size)
-    const imageViewboxSize = convertToPixels(imageSize) * scaleFactor
+    const scaleFactor = length / sizePixels
+    const imageViewboxSize = imageSizePixels * scaleFactor
     const imagePadding = 1
     const imageTop = Math.floor((length - imageViewboxSize) / 2 - imagePadding)
     const imageBottom = Math.ceil(
-      imageTop + imageViewboxSize + imagePadding * 2
+      imageTop + imageViewboxSize + imagePadding * 2,
     )
     const imageLeft = Math.floor((length - imageViewboxSize) / 2 - imagePadding)
     const imageRight = Math.ceil(
-      imageLeft + imageViewboxSize + imagePadding * 2
+      imageLeft + imageViewboxSize + imagePadding * 2,
     )
     isModuleBehindImage = (x: number, y: number) => {
       return (
@@ -54,7 +56,7 @@ const QRCode = memo(function QRCode({
     modules.push(
       [...modules1D.slice(i * length, (i + 1) * length)].map((bit, j) => {
         return bit && !isFindingPattern(i, j) && !isModuleBehindImage(i, j)
-      })
+      }),
     )
   }
 
@@ -82,7 +84,7 @@ const QRCode = memo(function QRCode({
               r={0.4}
               fill={cell ? 'black' : 'white'}
             />
-          ))
+          )),
         )}
 
         {findingPatternPositions.map(([x, y]) => (

helpers/__tests__/wallets.test.ts

@@ -19,11 +19,12 @@ describe('wallets helpers', () => {
         uid: `${walletId}#authnpost`,
         endpoint: `http://localhost:8701/api/authn`,
         provider: {},
-        walletUid: walletId,
       },
     ] as ServiceWithWallet[]
 
-    const servicesPipe = jest.fn(() => clone(mockResult))
+    const servicesPipe = jest.fn(() => [
+      { ...mockResult[0], walletUid: walletId },
+    ])
     const makeServicesPipe = jest.fn(() => servicesPipe)
 
     const res = pipeWalletServices(makeServicesPipe)(wallets)
@@ -47,7 +48,7 @@ describe('wallets helpers', () => {
               ...y,
               walletUid: x.uid,
             })),
-          [] as ServiceWithWallet[]
+          [] as ServiceWithWallet[],
         ),
       ],
     ])

helpers/sizes.ts

@@ -1,6 +1,6 @@
 export function convertToPixels(
   size: string,
-  context = document.documentElement
+  context = document.documentElement,
 ) {
   // Create a temporary element
   const tempEl = document.createElement('div')

helpers/wallets.ts

@@ -12,7 +12,7 @@ export const pipeWalletServices =
     pipe(
       extractWalletServices,
       makeServicesPipe({ wallets }),
-      collectWalletsFromServices({ wallets })
+      collectWalletsFromServices({ wallets }),
     )(wallets)
 
 export const extractWalletServices = (wallets: Wallet[]): ServiceWithWallet[] =>
@@ -21,7 +21,7 @@ export const extractWalletServices = (wallets: Wallet[]): ServiceWithWallet[] =>
       ...wallet.services.map(service => ({
         ...service,
         walletUid: wallet.uid,
-      }))
+      })),
     )
     return acc
   }, [])
@@ -39,21 +39,21 @@ export const walletsForNetwork =
 export const collectWalletsFromServices =
   ({ wallets }: { wallets: Wallet[] }) =>
   (services: ServiceWithWallet[]) =>
-    services.reduce((acc, service) => {
+    services.reduce((acc, _service) => {
+      // Append service without reference to wallet
+      const { walletUid, ...service } = _service
       const existingWalletIdx = acc.findIndex(
-        wallet => wallet.uid === service.walletUid
+        wallet => wallet.uid === walletUid,
       )
 
       if (existingWalletIdx === -1) {
-        const wallet = wallets.find(wallet => wallet.uid === service.walletUid)
+        const wallet = wallets.find(wallet => wallet.uid === walletUid)
         acc.push({
           ...wallet,
           services: [service],
         })
       } else {
-        // Append service without reference to wallet
-        const { walletUid, ...serviceWithoutWallet } = service
-        acc[existingWalletIdx].services.push(serviceWithoutWallet)
+        acc[existingWalletIdx].services.push(service)
       }
       return acc
     }, [])
@@ -79,7 +79,7 @@ export function extractAllServicesWithProvider(wallets: Wallet[]) {
           ...walletToProvider(wallet),
           ...service.provider,
         },
-      }))
+      })),
     )
     return acc
   }, [])

package.json

@@ -33,12 +33,11 @@
     "framer-motion": "^8.4.6",
     "mixpanel": "^0.14.0",
     "next": "^14.2.4",
-    "qrcode": "^1.5.3",
+    "qrcode": "^1.5.4",
     "rambda": "^9.2.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-icons": "^4.7.1",
-    "react-qr-code": "^2.0.15",
     "swr": "^1.3.0"
   },
   "devDependencies": {