feat: implement changes from farcasterxyz/auth-monorepo@951a692

dalechyn · Jun 5, 2024 · 0c571d4 · 0c571d4
1 parent 27d0f1c
commit 0c571d4
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 14 deletions.
diff --git a/packages/react/src/components/FarcasterLogo.tsx b/packages/react/src/components/FarcasterLogo.tsx
@@ -12,6 +12,7 @@ export function FarcasterLogo({
       xmlns="http://www.w3.org/2000/svg"
       width={width}
       height={height}
+      viewBox="0 0 22 20"
       fill="none"
     >
       <title>Farcaster logo</title>

diff --git a/packages/react/src/components/QRCode.tsx b/packages/react/src/components/QRCode.tsx
@@ -42,8 +42,8 @@ export function QRCode({
   const padding = '20'
   const size = sizeProp - Number.parseInt(padding, 10) * 2
 
-  const dots = useMemo(() => {
-    const dots: ReactElement[] = []
+  const squares = useMemo(() => {
+    const squares: ReactElement[] = []
     const matrix = generateMatrix(uri, ecl)
     const cellSize = size / matrix.length
     const qrList = [
@@ -56,7 +56,7 @@ export function QRCode({
       const x1 = (matrix.length - 7) * cellSize * x
       const y1 = (matrix.length - 7) * cellSize * y
       for (let i = 0; i < 3; i++) {
-        dots.push(
+        squares.push(
           <rect
             fill={i % 2 !== 0 ? 'white' : 'black'}
             height={cellSize * (7 - i * 2)}
@@ -93,13 +93,14 @@ export function QRCode({
                 j < matrixMiddleEnd
               )
             ) {
-              dots.push(
-                <circle
-                  cx={i * cellSize + cellSize / 2}
-                  cy={j * cellSize + cellSize / 2}
+              squares.push(
+                <rect
                   fill="black"
-                  key={`circle-${i}-${j}`}
-                  r={cellSize / 3} // calculate size of single dots
+                  height={cellSize - 0.5}
+                  key={`square-${i}-${j}`}
+                  width={cellSize - 0.5}
+                  x={i * cellSize}
+                  y={j * cellSize}
                 />,
               )
             }
@@ -108,7 +109,7 @@ export function QRCode({
       })
     })
 
-    return dots
+    return squares
   }, [ecl, logoSize, logoMargin, size, uri])
 
   const logoPosition = size / 2 - logoSize / 2
@@ -137,7 +138,7 @@ export function QRCode({
             </clipPath>
           </defs>
           <rect fill="transparent" height={size} width={size} />
-          {dots}
+          {squares}
         </svg>
       </div>
     </div>

diff --git a/packages/react/src/components/QRCodeDialog/QRCodeDialog.tsx b/packages/react/src/components/QRCodeDialog/QRCodeDialog.tsx
@@ -71,9 +71,9 @@ export function QRCodeDialog(
               >
                 <QRCode
                   uri={props.url}
-                  size={264}
-                  logoSize={22}
-                  logoMargin={12}
+                  size={300}
+                  logoSize={28}
+                  logoMargin={16}
                 />
               </div>
               <div style={{ display: 'flex', justifyContent: 'center' }}>