0xtrails 0.5.0 → 0.6.0

package/src/widget/components/QrCode.tsx

@@ -9,36 +9,26 @@ interface QrCodeProps {
   className?: string
 }
 
-const CONNECTING_ERROR_MARGIN = 0.1
-const CIRCLE_SIZE_MODIFIER = 2.5
-const QRCODE_MATRIX_MARGIN = 7
-
-function isAdjecentDots(cy: number, otherCy: number, cellSize: number) {
-  if (cy === otherCy) {
-    return false
-  }
-  const diff = cy - otherCy < 0 ? otherCy - cy : cy - otherCy
-  return diff <= cellSize + CONNECTING_ERROR_MARGIN
-}
-
 function getMatrix(
   value: string,
   errorCorrectionLevel: QRCodeUtil.QRCodeErrorCorrectionLevel,
 ) {
-  const arr = Array.prototype.slice.call(
-    QRCodeUtil.create(value, {
-      errorCorrectionLevel,
-    }).modules.data,
-    0,
-  )
-  const sqrt = Math.sqrt(arr.length)
-  return arr.reduce(
-    (rows, key, index) =>
-      (index % sqrt === 0
-        ? rows.push([key])
-        : rows[rows.length - 1].push(key)) && rows,
-    [],
-  )
+  const qr = QRCodeUtil.create(value, {
+    errorCorrectionLevel,
+  })
+
+  const { data, size } = qr.modules
+  const matrix: number[][] = []
+
+  for (let row = 0; row < size; row += 1) {
+    const rowData: number[] = []
+    for (let col = 0; col < size; col += 1) {
+      rowData.push(data[row * size + col] ? 1 : 0)
+    }
+    matrix.push(rowData)
+  }
+
+  return matrix
 }
 
 export const QrCode: React.FC<QrCodeProps> = ({
@@ -50,225 +40,191 @@ export const QrCode: React.FC<QrCodeProps> = ({
   const svgRef = useRef<SVGSVGElement>(null)
 
   useEffect(() => {
-    if (!svgRef.current) return
+    const svg = svgRef.current
+    if (!svg) return
 
     // Clear existing content
-    while (svgRef.current.firstChild) {
-      svgRef.current.removeChild(svgRef.current.firstChild)
+    while (svg.firstChild) {
+      svg.removeChild(svg.firstChild)
     }
 
-    const strokeWidth = 5
-    const padding = 8
-    const logoSize = size * 0.16 // 16% of size for logo
-    const matrix = getMatrix(url, "Q")
-    const cellSize = (size - 2 * padding) / matrix.length
-
-    // Corner squares positions
-    const qrList = [
-      { x: 0, y: 0 }, // Top-left
-      { x: 1, y: 0 }, // Top-right
-      { x: 0, y: 1 }, // Bottom-left
-    ]
-
-    // Draw corner squares
-    qrList.forEach(({ x, y }) => {
-      const x1 = (matrix.length - QRCODE_MATRIX_MARGIN) * cellSize * x + padding
-      const y1 = (matrix.length - QRCODE_MATRIX_MARGIN) * cellSize * y + padding
-      const borderRadius = 0.45
-
-      for (let i = 0; i < qrList.length; i += 1) {
-        const dotSize = cellSize * (QRCODE_MATRIX_MARGIN - i * 2)
-        const rect = document.createElementNS(
-          "http://www.w3.org/2000/svg",
-          "rect",
-        )
+    if (!url) return
 
-        if (i === 0) {
-          // Outer square: transparent with dark stroke
-          rect.setAttribute("fill", "transparent")
-          rect.setAttribute("stroke", "#141414")
-          rect.setAttribute("stroke-width", strokeWidth.toString())
-          rect.setAttribute("width", (dotSize - strokeWidth).toString())
-          rect.setAttribute("height", (dotSize - strokeWidth).toString())
-          rect.setAttribute(
-            "rx",
-            ((dotSize - strokeWidth) * borderRadius).toString(),
-          )
-          rect.setAttribute(
-            "ry",
-            ((dotSize - strokeWidth) * borderRadius).toString(),
-          )
-          rect.setAttribute(
-            "x",
-            (y1 + cellSize * i + strokeWidth / 2).toString(),
-          )
-          rect.setAttribute(
-            "y",
-            (x1 + cellSize * i + strokeWidth / 2).toString(),
-          )
-        } else if (i === 1) {
-          // Middle square: transparent with no stroke
-          rect.setAttribute("fill", "transparent")
-          rect.setAttribute("stroke", "#141414")
-          rect.setAttribute("stroke-width", "0")
-          rect.setAttribute("width", dotSize.toString())
-          rect.setAttribute("height", dotSize.toString())
-          rect.setAttribute("rx", (dotSize * borderRadius).toString())
-          rect.setAttribute("ry", (dotSize * borderRadius).toString())
-          rect.setAttribute("x", (y1 + cellSize * i).toString())
-          rect.setAttribute("y", (x1 + cellSize * i).toString())
-        } else {
-          // Inner square: dark fill with no stroke
-          rect.setAttribute("fill", "#141414")
-          rect.setAttribute("stroke", "#141414")
-          rect.setAttribute("stroke-width", "0")
-          rect.setAttribute("width", dotSize.toString())
-          rect.setAttribute("height", dotSize.toString())
-          rect.setAttribute("rx", (dotSize * borderRadius).toString())
-          rect.setAttribute("ry", (dotSize * borderRadius).toString())
-          rect.setAttribute("x", (y1 + cellSize * i).toString())
-          rect.setAttribute("y", (x1 + cellSize * i).toString())
-        }
-
-        if (svgRef.current) {
-          svgRef.current.appendChild(rect)
-        }
-      }
-    })
-
-    // Calculate logo area to exclude from data dots
-    const clearArenaSize = Math.floor((logoSize + 25) / cellSize)
-    const matrixMiddleStart = matrix.length / 2 - clearArenaSize / 2
-    const matrixMiddleEnd = matrix.length / 2 + clearArenaSize / 2 - 1
-
-    const circles: [number, number][] = []
-
-    // Get coordinates for each QR code dot
-    matrix.forEach((row: QRCodeUtil.QRCode[], i: number) => {
-      row.forEach((_, j: number) => {
-        if (matrix[i][j]) {
-          // Skip corner areas
-          if (
-            !(
-              (i < QRCODE_MATRIX_MARGIN && j < QRCODE_MATRIX_MARGIN) ||
-              (i > matrix.length - (QRCODE_MATRIX_MARGIN + 1) &&
-                j < QRCODE_MATRIX_MARGIN) ||
-              (i < QRCODE_MATRIX_MARGIN &&
-                j > matrix.length - (QRCODE_MATRIX_MARGIN + 1))
+    const matrix = getMatrix(url, "Q")
+    const matrixSize = matrix.length
+    if (!matrixSize) return
+
+    const quietZone = 16
+    const qrCodeSize = size - quietZone * 2
+    const padding = 12
+    const fillColor = "#000000"
+    const backgroundColor = "#ffffff"
+    const quietZoneColor = "#ffffff"
+    const cellSize = (qrCodeSize - padding * 2) / matrixSize
+    const shouldReserveLogoSpace = Boolean(imageUrl)
+    const logoSize = shouldReserveLogoSpace ? qrCodeSize * 0.18 : 0
+    const logoMatrixSize = shouldReserveLogoSpace
+      ? Math.max(2, Math.floor(logoSize / cellSize))
+      : 0
+    const matrixMiddleStart = shouldReserveLogoSpace
+      ? Math.floor((matrixSize - logoMatrixSize) / 2)
+      : 0
+    const matrixMiddleEnd = shouldReserveLogoSpace
+      ? matrixMiddleStart + logoMatrixSize - 1
+      : -1
+
+    svg.setAttribute("shape-rendering", "geometricPrecision")
+
+    // Outer container background (light grey)
+    const outerBackground = document.createElementNS(
+      "http://www.w3.org/2000/svg",
+      "rect",
+    )
+    outerBackground.setAttribute("x", "0")
+    outerBackground.setAttribute("y", "0")
+    outerBackground.setAttribute("width", size.toString())
+    outerBackground.setAttribute("height", size.toString())
+    outerBackground.setAttribute("fill", "#f3f4f6")
+    outerBackground.setAttribute("rx", "12")
+    outerBackground.setAttribute("ry", "12")
+    svg.appendChild(outerBackground)
+
+    // White quiet zone border
+    const quietZoneRect = document.createElementNS(
+      "http://www.w3.org/2000/svg",
+      "rect",
+    )
+    quietZoneRect.setAttribute("x", quietZone.toString())
+    quietZoneRect.setAttribute("y", quietZone.toString())
+    quietZoneRect.setAttribute("width", qrCodeSize.toString())
+    quietZoneRect.setAttribute("height", qrCodeSize.toString())
+    quietZoneRect.setAttribute("fill", quietZoneColor)
+    quietZoneRect.setAttribute("rx", "8")
+    quietZoneRect.setAttribute("ry", "8")
+    svg.appendChild(quietZoneRect)
+
+    // QR code white background
+    const qrBackground = document.createElementNS(
+      "http://www.w3.org/2000/svg",
+      "rect",
+    )
+    qrBackground.setAttribute("x", (quietZone + padding).toString())
+    qrBackground.setAttribute("y", (quietZone + padding).toString())
+    qrBackground.setAttribute("width", (qrCodeSize - padding * 2).toString())
+    qrBackground.setAttribute("height", (qrCodeSize - padding * 2).toString())
+    qrBackground.setAttribute("fill", backgroundColor)
+    qrBackground.setAttribute("rx", "6")
+    qrBackground.setAttribute("ry", "6")
+    svg.appendChild(qrBackground)
+
+    // Draw continuous lines by grouping adjacent modules
+    matrix.forEach((row, rowIndex) => {
+      const isInsideLogoRow =
+        shouldReserveLogoSpace &&
+        rowIndex >= matrixMiddleStart &&
+        rowIndex <= matrixMiddleEnd
+
+      let currentRunStart: number | null = null
+
+      row.forEach((value, colIndex) => {
+        const isInsideLogoArea =
+          isInsideLogoRow &&
+          colIndex >= matrixMiddleStart &&
+          colIndex <= matrixMiddleEnd
+
+        if (isInsideLogoArea) {
+          // End current run if we hit logo area
+          if (currentRunStart !== null) {
+            const runLength = colIndex - currentRunStart
+            const rect = document.createElementNS(
+              "http://www.w3.org/2000/svg",
+              "rect",
+            )
+            rect.setAttribute(
+              "x",
+              (quietZone + padding + currentRunStart * cellSize).toFixed(3),
             )
-          ) {
-            // Skip logo area
-            if (
-              !(
-                i > matrixMiddleStart &&
-                i < matrixMiddleEnd &&
-                j > matrixMiddleStart &&
-                j < matrixMiddleEnd
-              )
-            ) {
-              const cx = i * cellSize + cellSize / 2 + padding
-              const cy = j * cellSize + cellSize / 2 + padding
-              circles.push([cx, cy])
-            }
+            rect.setAttribute(
+              "y",
+              (quietZone + padding + rowIndex * cellSize).toFixed(3),
+            )
+            rect.setAttribute("width", (runLength * cellSize).toFixed(3))
+            rect.setAttribute("height", cellSize.toFixed(3))
+            rect.setAttribute("fill", fillColor)
+            svg.appendChild(rect)
+            currentRunStart = null
           }
+          return
         }
-      })
-    })
-
-    // Group dots by x-coordinate
-    const circlesToConnect: Record<number, number[]> = {}
-    circles.forEach(([cx, cy]) => {
-      if (circlesToConnect[cx]) {
-        circlesToConnect[cx]?.push(cy)
-      } else {
-        circlesToConnect[cx] = [cy]
-      }
-    })
 
-    // Draw individual dots (those without neighbors)
-    Object.entries(circlesToConnect)
-      .map(([cx, cys]) => {
-        const newCys = cys.filter((cy) =>
-          cys.every((otherCy) => !isAdjecentDots(cy, otherCy, cellSize)),
-        )
-        return [Number(cx), newCys] as [number, number[]]
-      })
-      .forEach(([cx, cys]) => {
-        cys.forEach((cy) => {
-          const circle = document.createElementNS(
-            "http://www.w3.org/2000/svg",
-            "circle",
-          )
-          circle.setAttribute("cx", cx.toString())
-          circle.setAttribute("cy", cy.toString())
-          circle.setAttribute("fill", "#141414")
-          circle.setAttribute("r", (cellSize / CIRCLE_SIZE_MODIFIER).toString())
-          if (svgRef.current) {
-            svgRef.current.appendChild(circle)
+        if (value) {
+          // Start a new run or continue existing one
+          if (currentRunStart === null) {
+            currentRunStart = colIndex
           }
-        })
-      })
-
-    // Draw dots for connected groups (instead of lines)
-    Object.entries(circlesToConnect)
-      .filter(([_, cys]) => cys.length > 1)
-      .map(([cx, cys]) => {
-        const newCys = cys.filter((cy) =>
-          cys.some((otherCy) => isAdjecentDots(cy, otherCy, cellSize)),
-        )
-        return [Number(cx), newCys] as [number, number[]]
-      })
-      .map(([cx, cys]) => {
-        cys.sort((a, b) => (a < b ? -1 : 1))
-        const groups: number[][] = []
-        for (const cy of cys) {
-          const group = groups.find((item) =>
-            item.some((otherCy) => isAdjecentDots(cy, otherCy, cellSize)),
-          )
-          if (group) {
-            group.push(cy)
-          } else {
-            groups.push([cy])
+        } else {
+          // End current run
+          if (currentRunStart !== null) {
+            const runLength = colIndex - currentRunStart
+            const rect = document.createElementNS(
+              "http://www.w3.org/2000/svg",
+              "rect",
+            )
+            rect.setAttribute(
+              "x",
+              (quietZone + padding + currentRunStart * cellSize).toFixed(3),
+            )
+            rect.setAttribute(
+              "y",
+              (quietZone + padding + rowIndex * cellSize).toFixed(3),
+            )
+            rect.setAttribute("width", (runLength * cellSize).toFixed(3))
+            rect.setAttribute("height", cellSize.toFixed(3))
+            rect.setAttribute("fill", fillColor)
+            svg.appendChild(rect)
+            currentRunStart = null
           }
         }
-        return [cx, groups.map((item) => [item[0], item[item.length - 1]])] as [
-          number,
-          number[][],
-        ]
       })
-      .forEach(([cx, groups]) => {
-        groups.forEach(([y1, y2]) => {
-          if (y1 !== undefined && y2 !== undefined) {
-            // Instead of drawing a line, draw individual dots at each position
-            const positions = []
-            for (let y = y1; y <= y2; y += cellSize) {
-              positions.push(y)
-            }
 
-            positions.forEach((y) => {
-              const circle = document.createElementNS(
-                "http://www.w3.org/2000/svg",
-                "circle",
-              )
-              circle.setAttribute("cx", cx.toString())
-              circle.setAttribute("cy", y.toString())
-              circle.setAttribute("fill", "#141414")
-              circle.setAttribute(
-                "r",
-                (cellSize / CIRCLE_SIZE_MODIFIER).toString(),
-              )
-              if (svgRef.current) {
-                svgRef.current.appendChild(circle)
-              }
-            })
-          }
-        })
-      })
+      // End any remaining run at the end of the row
+      if (currentRunStart !== null) {
+        const runLength = matrixSize - currentRunStart
+        const rect = document.createElementNS(
+          "http://www.w3.org/2000/svg",
+          "rect",
+        )
+        rect.setAttribute(
+          "x",
+          (quietZone + padding + currentRunStart * cellSize).toFixed(3),
+        )
+        rect.setAttribute(
+          "y",
+          (quietZone + padding + rowIndex * cellSize).toFixed(3),
+        )
+        rect.setAttribute("width", (runLength * cellSize).toFixed(3))
+        rect.setAttribute("height", cellSize.toFixed(3))
+        rect.setAttribute("fill", fillColor)
+        svg.appendChild(rect)
+      }
+    })
 
-    // Add logo if provided
     if (imageUrl) {
-      const logoX = (size - logoSize) / 2
-      const logoY = (size - logoSize) / 2
+      const logoX = quietZone + (qrCodeSize - logoSize) / 2
+      const logoY = quietZone + (qrCodeSize - logoSize) / 2
+
+      const logoBackground = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "rect",
+      )
+      logoBackground.setAttribute("x", logoX.toString())
+      logoBackground.setAttribute("y", logoY.toString())
+      logoBackground.setAttribute("width", logoSize.toString())
+      logoBackground.setAttribute("height", logoSize.toString())
+      logoBackground.setAttribute("fill", backgroundColor)
+      logoBackground.setAttribute("rx", (logoSize * 0.2).toString())
+      logoBackground.setAttribute("ry", (logoSize * 0.2).toString())
+      svg.appendChild(logoBackground)
 
       const logo = document.createElementNS(
         "http://www.w3.org/2000/svg",
@@ -279,9 +235,8 @@ export const QrCode: React.FC<QrCodeProps> = ({
       logo.setAttribute("y", logoY.toString())
       logo.setAttribute("width", logoSize.toString())
       logo.setAttribute("height", logoSize.toString())
-      if (svgRef.current) {
-        svgRef.current.appendChild(logo)
-      }
+      logo.setAttribute("preserveAspectRatio", "xMidYMid meet")
+      svg.appendChild(logo)
     }
   }, [url, imageUrl, size])
 
@@ -292,7 +247,7 @@ export const QrCode: React.FC<QrCodeProps> = ({
         width={size}
         height={size}
         viewBox={`0 0 ${size} ${size}`}
-        className="rounded-lg bg-white"
+        className="rounded-xl"
       />
     </div>
   )

package/src/widget/components/QuoteDetails.tsx

@@ -5,11 +5,12 @@ import { Tooltip } from "./Tooltip.js"
 import type React from "react"
 import { getExplorerUrlForAddress } from "../../explorer.js"
 import type { PrepareSendQuote } from "../../prepareSend.js"
-import { useState, useEffect, useRef } from "react"
+import { useState, useEffect, useRef, useCallback } from "react"
 import { truncateAddress } from "../../utils.js"
 import { PriceImpactWarning } from "./PriceImpactWarning.js"
 import { usePriceImpactWarning } from "../hooks/usePriceImpactWarning.js"
 import { formatUsdAmountDisplay } from "../../tokenBalances.js"
+import { Copy, Check } from "lucide-react"
 
 interface QuoteDetailsProps {
   quote?: PrepareSendQuote | null
@@ -56,6 +57,7 @@ export const QuoteDetails: React.FC<QuoteDetailsProps> = ({
   const [showOriginRate, setShowOriginRate] = useState(true)
   const [isExpanded, setIsExpanded] = useState(false)
   const [showMoreInfo, setShowMoreInfo] = useState(false)
+  const [intentIdCopied, setIntentIdCopied] = useState(false)
   const containerRef = useRef<HTMLDivElement>(null)
   const calldataRef = useRef<HTMLDivElement>(null)
   const moreInfoRef = useRef<HTMLDivElement>(null)
@@ -78,6 +80,22 @@ export const QuoteDetails: React.FC<QuoteDetailsProps> = ({
     onExpand?.(isExpanded)
   }, [isExpanded, onExpand])
 
+  const handleCopyIntentId = useCallback(async () => {
+    if (!quote?.intentId) return
+    try {
+      await navigator.clipboard.writeText(quote.intentId)
+      setIntentIdCopied(true)
+    } catch (error) {
+      console.error("[trails-sdk] Failed to copy intentId", error)
+    }
+  }, [quote?.intentId])
+
+  useEffect(() => {
+    if (!intentIdCopied) return
+    const timeout = setTimeout(() => setIntentIdCopied(false), 1500)
+    return () => clearTimeout(timeout)
+  }, [intentIdCopied])
+
   if (!showContent) return null
 
   return (
@@ -729,7 +747,9 @@ export const QuoteDetails: React.FC<QuoteDetailsProps> = ({
                 Number(quote.slippageTolerance) !== 0
               const hasPriceImpact =
                 quote?.priceImpact != null && Number(quote.priceImpact) !== 0
-              const showSection = hasSlippage || hasPriceImpact
+              const hasIntentId =
+                quote?.intentId != null && quote.intentId !== ""
+              const showSection = hasSlippage || hasPriceImpact || hasIntentId
 
               if (!showSection) return null
 
@@ -739,6 +759,32 @@ export const QuoteDetails: React.FC<QuoteDetailsProps> = ({
                     Transaction details
                   </div>
 
+                  {/* Intent ID */}
+                  {hasIntentId && (
+                    <div className="flex justify-between items-center gap-2">
+                      <span className="text-xs text-gray-600 dark:text-gray-400">
+                        Intent ID:
+                      </span>
+                      <div className="flex items-center gap-2 text-xs font-medium text-gray-900 dark:text-white">
+                        <span title={quote.intentId ?? undefined}>
+                          {truncateAddress(quote?.intentId ?? "", 10, 8)}
+                        </span>
+                        <button
+                          type="button"
+                          onClick={handleCopyIntentId}
+                          className="p-1 rounded-full hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
+                          aria-label="Copy intent ID"
+                        >
+                          {intentIdCopied ? (
+                            <Check className="w-3.5 h-3.5 text-emerald-500" />
+                          ) : (
+                            <Copy className="w-3.5 h-3.5 text-gray-500 dark:text-gray-400" />
+                          )}
+                        </button>
+                      </div>
+                    </div>
+                  )}
+
                   {/* Max Slippage */}
                   {hasSlippage && (
                     <div className="flex justify-between items-center">

package/src/widget/components/Receipt.tsx

@@ -14,6 +14,7 @@ import { formatElapsed } from "../../utils.js"
 import { ChainImage } from "./ChainImage.js"
 import { getChainInfo } from "../../chains.js"
 import { useMode } from "../hooks/useMode.js"
+import { ScreenHeader } from "./ScreenHeader.js"
 
 interface ReceiptProps {
   onSendAnother: () => void
@@ -252,7 +253,8 @@ export const Receipt: React.FC<ReceiptProps> = ({
 
   if (!finalExplorerUrl && !showRefundInfo) {
     return (
-      <div className="flex flex-col justify-center min-h-full space-y-6 pt-8">
+      <div className="flex flex-col justify-center min-h-full space-y-6">
+        <ScreenHeader />
         <div className="text-center">
           <div className={`mx-auto flex items-center justify-center mb-4`}>
             <div className="w-16 h-16 rounded-full flex items-center justify-center bg-red-100 dark:bg-red-900/20">
@@ -313,7 +315,8 @@ export const Receipt: React.FC<ReceiptProps> = ({
   }
 
   return (
-    <div className="flex flex-col justify-center min-h-full space-y-6 pt-8">
+    <div className="flex flex-col justify-center min-h-full space-y-6">
+      <ScreenHeader />
       <div className="text-center mb-2">
         <div className={`mx-auto flex items-center justify-center`}>
           {showRefundInfo || showMetaTxError ? (

package/src/widget/components/ScreenHeader.tsx

@@ -8,7 +8,7 @@ import { useModal } from "../widget.js"
 
 interface ScreenHeaderProps {
   onBack?: () => void
-  headerContent: string | React.ReactNode
+  headerContent?: string | React.ReactNode
   rightSideContent?: React.ReactNode
   headerContentAlign?: "left" | "center"
   onDebugScreenSelect?: (screen: string) => void
@@ -47,13 +47,15 @@ export const ScreenHeader: React.FC<ScreenHeaderProps> = ({
         )}
 
         {/* Header content */}
-        <h2
-          className={`text-lg font-semibold ${
-            headerContentAlign === "center" ? "text-center" : "text-left"
-          } text-gray-900 dark:text-white`}
-        >
-          {headerContent}
-        </h2>
+        {headerContent && (
+          <h2
+            className={`text-lg font-semibold ${
+              headerContentAlign === "center" ? "text-center" : "text-left"
+            } text-gray-900 dark:text-white`}
+          >
+            {headerContent}
+          </h2>
+        )}
       </div>
 
       {/* Right side - Content, Account Actions, and Close button */}

package/src/widget/components/Toast.tsx

@@ -298,6 +298,16 @@ function ToastItem({ toast, onRemove }: ToastItemProps) {
             <p className="text-sm text-gray-600 dark:text-gray-300 leading-relaxed">
               {toast.message}
             </p>
+            {toast.type === "error" && (
+              <a
+                href="https://support.trails.build/en/"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="mt-2 text-xs text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 underline inline-block"
+              >
+                Visit support
+              </a>
+            )}
           </div>
           <button
             type="button"