0xtrails 0.1.2 → 0.1.3

package/src/widget/components/QrCode.tsx

@@ -1,5 +1,6 @@
 import type React from "react"
-import { QRCodeSVG } from "qrcode.react"
+import { useEffect, useRef } from "react"
+import QRCodeUtil from "qrcode"
 
 interface QrCodeProps {
   url: string
@@ -8,31 +9,291 @@ 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,
+    [],
+  )
+}
+
 export const QrCode: React.FC<QrCodeProps> = ({
   url,
   imageUrl,
   size = 250,
   className = "",
 }) => {
+  const svgRef = useRef<SVGSVGElement>(null)
+
+  useEffect(() => {
+    if (!svgRef.current) return
+
+    // Clear existing content
+    while (svgRef.current.firstChild) {
+      svgRef.current.removeChild(svgRef.current.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 (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))
+            )
+          ) {
+            // 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])
+            }
+          }
+        }
+      })
+    })
+
+    // 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)
+          }
+        })
+      })
+
+    // 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])
+          }
+        }
+        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)
+              }
+            })
+          }
+        })
+      })
+
+    // Add logo if provided
+    if (imageUrl) {
+      const logoX = (size - logoSize) / 2
+      const logoY = (size - logoSize) / 2
+
+      const logo = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "image",
+      )
+      logo.setAttribute("href", imageUrl)
+      logo.setAttribute("x", logoX.toString())
+      logo.setAttribute("y", logoY.toString())
+      logo.setAttribute("width", logoSize.toString())
+      logo.setAttribute("height", logoSize.toString())
+      if (svgRef.current) {
+        svgRef.current.appendChild(logo)
+      }
+    }
+  }, [url, imageUrl, size])
+
   return (
     <div className={`inline-block ${className}`}>
-      <QRCodeSVG
-        value={url}
-        size={size}
-        bgColor="#FFFFFF"
-        fgColor="#000000"
-        level="M"
-        marginSize={2}
-        imageSettings={{
-          src: imageUrl || "https://trails.build/favicon.ico",
-          height: size * 0.16,
-          width: size * 0.16,
-          excavate: true,
-        }}
+      <svg
+        ref={svgRef}
+        width={size}
+        height={size}
+        viewBox={`0 0 ${size} ${size}`}
         className="rounded-lg border border-solid border-gray-200 dark:border-gray-700"
       />
     </div>
   )
 }
-
-export default QrCode

package/src/widget/components/Receipt.tsx

@@ -152,7 +152,7 @@ export const Receipt: React.FC<ReceiptProps> = ({
           className={`transition-all duration-500 ease-out ${showContent ? "opacity-100 translate-y-0" : "opacity-0 translate-y-4"}`}
         >
           <h2 className="mt-4 text-2xl font-bold text-gray-900 dark:text-white">
-            Transaction Confirmed
+            Completed
           </h2>
           {completionTimeSeconds > 0 && (
             <div

package/src/widget/components/RefundAddressInput.tsx

@@ -0,0 +1,149 @@
+import { ChevronDown, ChevronRight } from "lucide-react"
+import type React from "react"
+import { useState, useEffect } from "react"
+import type { Account } from "viem"
+import { isAddress } from "viem"
+import { TruncatedAddress } from "./TruncatedAddress.js"
+import { useResolveEnsAddress } from "../../ens.js"
+
+interface RefundAddressInputProps {
+  account: Account
+  isOpen: boolean
+  onToggle: () => void
+  refundAddress: string
+  onRefundAddressChange: (address: string) => void
+  chainId: number
+}
+
+export const RefundAddressInput: React.FC<RefundAddressInputProps> = ({
+  account,
+  isOpen,
+  onToggle,
+  refundAddress,
+  onRefundAddressChange,
+  chainId,
+}) => {
+  const [inputValue, setInputValue] = useState(refundAddress)
+
+  // Resolve ENS names to addresses
+  const { ensAddress, isLoading } = useResolveEnsAddress({
+    textInput: inputValue,
+  })
+
+  // Update the refund address when ENS is resolved
+  useEffect(() => {
+    if (ensAddress && inputValue.endsWith(".eth")) {
+      onRefundAddressChange(ensAddress)
+    }
+  }, [ensAddress, inputValue, onRefundAddressChange])
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value
+    setInputValue(value)
+    // Only update immediately if it's not an ENS name (let ENS resolution handle .eth names)
+    if (!value.endsWith(".eth")) {
+      onRefundAddressChange(value)
+    }
+  }
+
+  const handleUseAccount = () => {
+    setInputValue(account.address)
+    onRefundAddressChange(account.address)
+  }
+
+  // Check if the input is valid (either a valid address or a resolved ENS name)
+  const isValidAddress =
+    inputValue &&
+    (isAddress(inputValue) || (ensAddress && inputValue.endsWith(".eth")))
+
+  return (
+    <div className="space-y-2">
+      <button
+        type="button"
+        onClick={onToggle}
+        className="flex items-center space-x-1 text-xs text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300 cursor-pointer"
+      >
+        <span>Set refund address</span>
+        {isOpen ? (
+          <ChevronDown className="w-3 h-3" />
+        ) : (
+          <ChevronRight className="w-3 h-3" />
+        )}
+      </button>
+
+      {isOpen && (
+        <div className="space-y-2 p-3 trails-border-radius-container trails-bg-secondary trails-border">
+          <div className="flex justify-between items-center">
+            <label
+              htmlFor="refund-address"
+              className="text-sm font-medium text-gray-700 dark:text-gray-300"
+            >
+              Refund Address
+            </label>
+            <button
+              type="button"
+              onClick={handleUseAccount}
+              disabled={
+                inputValue.toLowerCase() === account.address.toLowerCase()
+              }
+              className={`px-2 py-1 text-xs cursor-pointer trails-border-radius-button transition-colors ${
+                inputValue.toLowerCase() === account.address.toLowerCase()
+                  ? "bg-gray-400 cursor-not-allowed text-white"
+                  : "bg-blue-500 hover:bg-blue-600 text-white"
+              }`}
+            >
+              Use Account
+            </button>
+          </div>
+
+          <input
+            id="refund-address"
+            type="text"
+            value={inputValue}
+            onChange={handleInputChange}
+            placeholder="0x... or name.eth"
+            className="block w-full px-3 py-2 border border-solid trails-border-radius-input focus:ring-2 focus:ring-blue-500 focus:border-blue-500 font-mono text-sm trails-input"
+          />
+
+          {inputValue && (
+            <div className="text-xs text-gray-500 dark:text-gray-400">
+              {isValidAddress ? (
+                <div className="space-y-1">
+                  <div className="flex items-center space-x-2">
+                    <span>Refund to:</span>
+                    <TruncatedAddress
+                      address={
+                        inputValue.endsWith(".eth")
+                          ? ensAddress || inputValue
+                          : inputValue
+                      }
+                      chainId={chainId}
+                    />
+                  </div>
+                  {inputValue.endsWith(".eth") && ensAddress && (
+                    <div className="text-gray-400">
+                      Resolved from: {inputValue}
+                    </div>
+                  )}
+                </div>
+              ) : inputValue.endsWith(".eth") && isLoading ? (
+                <div className="flex items-center space-x-2 text-blue-500">
+                  <div className="animate-spin rounded-full h-3 w-3 border-b-2 border-blue-500"></div>
+                  <span>Resolving ENS name...</span>
+                </div>
+              ) : (
+                <span className="text-red-500">Invalid address format</span>
+              )}
+            </div>
+          )}
+
+          <p className="text-xs text-gray-500 dark:text-gray-400">
+            If the transaction fails or cannot be completed, funds will be
+            refunded to this address. Please make sure that this address can
+            receive funds on both the origin and destination chain.
+          </p>
+        </div>
+      )}
+    </div>
+  )
+}