@zerodev/smart-routing-address-react-ui 0.0.2 → 0.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zerodev/smart-routing-address-react-ui",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "description": "React hooks, provider, and UI for ZeroDev Smart Routing Address deposits",
   "repository": {
     "type": "git",
@@ -45,7 +45,7 @@
     "@zerodev/smart-routing-address": "^0.2.6",
     "uqr": "^0.1.2",
     "zod": "^4.4.3",
-    "@zerodev/react-ui": "0.0.6"
+    "@zerodev/react-ui": "0.0.8"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",

package/src/components/QrSheet/index.tsx

@@ -4,9 +4,9 @@ import {
   BottomSheetContent,
   BottomSheetTitle,
   Button,
+  QrCode,
   Text,
 } from '@zerodev/react-ui'
-import { QrCode } from './QrCode'
 
 export interface QrSheetProps {
   /** Whether the modal is open. Controlled. */
@@ -28,17 +28,8 @@ export function QrSheet({ open, onOpenChange, address, onCopy }: QrSheetProps) {
     <BottomSheet open={open} onOpenChange={onOpenChange}>
       <BottomSheetContent>
         <BottomSheetTitle>Your deposit address</BottomSheetTitle>
-        {/* Bottom-half gradient — light blue at bottom-left fading into
-            peach/orange at bottom-right — mirrors the "amorphic" image used
-            in the Figma design. Colors echo `MultiRadialBackground`. */}
-        <div
-          aria-hidden
-          className="zd:absolute zd:inset-0 zd:pointer-events-none"
-          style={{
-            background:
-              'radial-gradient(ellipse 78% 65% at 5% 105%, rgba(69,171,251,0.35) 0%, rgba(69,171,251,0) 72%), radial-gradient(ellipse 82% 65% at 100% 105%, rgba(250,200,172,0.65) 0%, rgba(250,200,172,0) 72%), radial-gradient(ellipse 58% 52% at 100% 100%, rgba(242,123,62,0.35) 0%, rgba(242,123,62,0) 72%)',
-          }}
-        />
+        {/* Accent gradient is baked into `BottomSheetContent`; content sits
+            above it via `zd:relative`. */}
         <div className="zd:relative zd:flex zd:flex-col zd:gap-6 zd:items-center zd:pt-6 zd:px-4 zd:pb-3">
           <div className="zd:flex zd:flex-col zd:gap-3 zd:items-center">
             <Text className="zd:text-h2 zd:text-center">

package/dist/_types/components/QrSheet/QrCode.d.ts

@@ -1,28 +0,0 @@
-interface QrCodeProps {
-    /** Data to encode. */
-    value: string;
-    /** Pixel size of the rendered SVG square. */
-    size: number;
-    /** Error correction level. Defaults to `'M'`. */
-    errorCorrectionLevel?: 'L' | 'M' | 'Q' | 'H';
-    /** Corner radius (in modules, scaled to px internally) for finder patterns. */
-    eyeRadius?: number;
-}
-/**
- * Custom QR renderer that draws runs of horizontally-adjacent data modules as
- * a single rounded pill. Finder patterns stay as sharp concentric squares
- * (rounding them breaks the 1:1:3:1:1 corner ratio scanners use to locate the
- * code). Isolated data modules render as pill-ish rects — visually close to
- * circles at very small `PILL_PAD_RATIO`, still square-adjacent for scanners.
- *
- * Default `errorCorrectionLevel` is `'H'` (30% recovery) so the decorative
- * rounding + shrinkage has plenty of headroom before scans fail.
- *
- * Quiet zone (spec: ≥4 modules of white around the code) is expected to be
- * provided by the caller — e.g. via a white-background padded wrapper. This
- * component fills the given `size` with the QR data area itself so the
- * consumer controls the visual footprint.
- */
-export declare function QrCode({ value, size, errorCorrectionLevel, eyeRadius, }: QrCodeProps): import("react").JSX.Element;
-export {};
-//# sourceMappingURL=QrCode.d.ts.map

package/dist/_types/components/QrSheet/QrCode.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"QrCode.d.ts","sourceRoot":"","sources":["../../../../src/components/QrSheet/QrCode.tsx"],"names":[],"mappings":"AAEA,UAAU,WAAW;IACnB,sBAAsB;IACtB,KAAK,EAAE,MAAM,CAAA;IACb,6CAA6C;IAC7C,IAAI,EAAE,MAAM,CAAA;IACZ,iDAAiD;IACjD,oBAAoB,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAA;IAC5C,+EAA+E;IAC/E,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAUD;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,MAAM,CAAC,EACrB,KAAK,EACL,IAAI,EACJ,oBAA0B,EAC1B,SAAa,GACd,EAAE,WAAW,+BAyHb"}

package/src/components/QrSheet/QrCode.tsx

@@ -1,163 +0,0 @@
-import { encode } from 'uqr'
-
-interface QrCodeProps {
-  /** Data to encode. */
-  value: string
-  /** Pixel size of the rendered SVG square. */
-  size: number
-  /** Error correction level. Defaults to `'M'`. */
-  errorCorrectionLevel?: 'L' | 'M' | 'Q' | 'H'
-  /** Corner radius (in modules, scaled to px internally) for finder patterns. */
-  eyeRadius?: number
-}
-
-const FINDER_SIZE = 7 // every QR has three 7×7 finder patterns
-const MODULE_COLOR = '#000'
-const BG_COLOR = '#fff'
-/** Vertical shrink applied to data-module pills so rows read as distinct
- * without introducing white slivers wide enough to look like transitions
- * to a scanner. Kept small (5%) so total black area stays close to spec. */
-const PILL_PAD_RATIO = 0.05
-
-/**
- * Custom QR renderer that draws runs of horizontally-adjacent data modules as
- * a single rounded pill. Finder patterns stay as sharp concentric squares
- * (rounding them breaks the 1:1:3:1:1 corner ratio scanners use to locate the
- * code). Isolated data modules render as pill-ish rects — visually close to
- * circles at very small `PILL_PAD_RATIO`, still square-adjacent for scanners.
- *
- * Default `errorCorrectionLevel` is `'H'` (30% recovery) so the decorative
- * rounding + shrinkage has plenty of headroom before scans fail.
- *
- * Quiet zone (spec: ≥4 modules of white around the code) is expected to be
- * provided by the caller — e.g. via a white-background padded wrapper. This
- * component fills the given `size` with the QR data area itself so the
- * consumer controls the visual footprint.
- */
-export function QrCode({
-  value,
-  size,
-  errorCorrectionLevel = 'H',
-  eyeRadius = 0,
-}: QrCodeProps) {
-  // `uqr` returns a 2D boolean matrix (`data[row][col]`) and the module count
-  // per side. Same information as `qrcode`, just shaped differently — the
-  // pill/finder rendering below is unchanged.
-  const qr = encode(value, { ecc: errorCorrectionLevel, border: 0 })
-  const matrix = qr.data
-  const moduleCount = qr.size
-  const cellSize = size / moduleCount
-  const eyeRadiusPx = eyeRadius * cellSize
-
-  const finders = [
-    { row: 0, col: 0 },
-    { row: 0, col: moduleCount - FINDER_SIZE },
-    { row: moduleCount - FINDER_SIZE, col: 0 },
-  ]
-
-  const inFinder = (row: number, col: number) =>
-    finders.some(
-      (f) =>
-        row >= f.row &&
-        row < f.row + FINDER_SIZE &&
-        col >= f.col &&
-        col < f.col + FINDER_SIZE,
-    )
-
-  // Collect maximal horizontal runs of `on` modules, skipping finder regions.
-  const runs: { row: number; col: number; length: number }[] = []
-  for (let row = 0; row < moduleCount; row++) {
-    let col = 0
-    while (col < moduleCount) {
-      if (inFinder(row, col)) {
-        col++
-        continue
-      }
-      if (matrix[row]?.[col]) {
-        let length = 1
-        while (
-          col + length < moduleCount &&
-          !inFinder(row, col + length) &&
-          matrix[row]?.[col + length]
-        ) {
-          length++
-        }
-        runs.push({ row, col, length })
-        col += length
-      } else {
-        col++
-      }
-    }
-  }
-
-  return (
-    <svg
-      width={size}
-      height={size}
-      viewBox={`0 0 ${size} ${size}`}
-      xmlns="http://www.w3.org/2000/svg"
-      role="img"
-      aria-label={`QR code for ${value}`}
-    >
-      <rect width={size} height={size} fill={BG_COLOR} />
-      {runs.map(({ row, col, length }) => {
-        // Shrink each pill vertically so rows read as distinct without
-        // creating scanner-confusing white gaps mid-run. Isolated modules
-        // (length === 1) also shrink horizontally so they render close to a
-        // circle instead of an oval.
-        const pad = cellSize * PILL_PAD_RATIO
-        const pillHeight = cellSize - 2 * pad
-        const isSingle = length === 1
-        return (
-          <rect
-            key={`r${row}-${col}`}
-            x={col * cellSize + (isSingle ? pad : 0)}
-            y={row * cellSize + pad}
-            width={length * cellSize - (isSingle ? 2 * pad : 0)}
-            height={pillHeight}
-            rx={pillHeight / 2}
-            ry={pillHeight / 2}
-            fill={MODULE_COLOR}
-          />
-        )
-      })}
-      {finders.map(({ row, col }) => {
-        const x = col * cellSize
-        const y = row * cellSize
-        const outerSize = FINDER_SIZE * cellSize
-        const innerSize = 3 * cellSize
-        return (
-          <g key={`f${row}-${col}`}>
-            <rect
-              x={x}
-              y={y}
-              width={outerSize}
-              height={outerSize}
-              rx={eyeRadiusPx}
-              ry={eyeRadiusPx}
-              fill={MODULE_COLOR}
-            />
-            <rect
-              x={x + cellSize}
-              y={y + cellSize}
-              width={outerSize - 2 * cellSize}
-              height={outerSize - 2 * cellSize}
-              rx={Math.max(eyeRadiusPx - cellSize, 0)}
-              ry={Math.max(eyeRadiusPx - cellSize, 0)}
-              fill={BG_COLOR}
-            />
-            <rect
-              x={x + 2 * cellSize}
-              y={y + 2 * cellSize}
-              width={innerSize}
-              height={innerSize}
-              rx={Math.max(eyeRadiusPx - 2 * cellSize, 0)}
-              ry={Math.max(eyeRadiusPx - 2 * cellSize, 0)}
-              fill={MODULE_COLOR}
-            />
-          </g>
-        )
-      })}
-    </svg>
-  )
-}