0xtrails 0.13.1 → 0.14.0

package/src/widget/components/PriceImpactWarning.tsx

@@ -1,87 +0,0 @@
-import type React from "react"
-import type { PrepareSendQuote } from "../../prepareSend.js"
-import { Tooltip } from "./Tooltip.js"
-
-interface PriceImpactWarningProps {
-  quote?: PrepareSendQuote | null
-  thresholdBps?: number
-  warningMessage?: string
-  fallbackBridgeUrl?: string
-}
-
-export const PriceImpactWarning: React.FC<PriceImpactWarningProps> = ({
-  quote,
-  thresholdBps,
-  warningMessage,
-  fallbackBridgeUrl,
-}) => {
-  // Don't show warning if threshold is not set or is 0 or less
-  if (!thresholdBps || thresholdBps <= 0) return null
-
-  // Check if we should show the warning
-  if (!quote?.priceImpact) return null
-
-  const priceImpactBps = Math.abs(Number(quote.priceImpact)) * 100 // Convert percentage to BPS
-  const shouldShowWarning = priceImpactBps > thresholdBps
-
-  if (!shouldShowWarning) return null
-
-  const defaultMessage = `Price impact exceeds ${thresholdBps / 100}%. You may get a worse rate.`
-  const displayMessage = warningMessage || defaultMessage
-
-  return (
-    <div className="mb-1 p-2 rounded-lg bg-amber-50 border border-amber-200 dark:bg-amber-900/20 dark:border-amber-800">
-      <div className="flex items-start gap-2">
-        <svg
-          className="w-4 h-4 text-amber-600 dark:text-amber-400 flex-shrink-0 mt-0.5"
-          fill="none"
-          stroke="currentColor"
-          viewBox="0 0 24 24"
-          aria-hidden="true"
-        >
-          <path
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            strokeWidth={2}
-            d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z"
-          />
-        </svg>
-        <div className="flex-1 min-w-0">
-          <p className="text-xs text-amber-700 dark:text-amber-300">
-            {displayMessage}
-          </p>
-          {fallbackBridgeUrl?.startsWith("https") && (
-            <div className="mt-1">
-              <Tooltip message={fallbackBridgeUrl}>
-                <a
-                  href={fallbackBridgeUrl}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="inline-flex items-center gap-1 text-xs font-medium text-amber-800 dark:text-amber-200 hover:text-amber-900 dark:hover:text-amber-100 hover:underline cursor-pointer transition-colors"
-                >
-                  Use alternative bridge
-                  <svg
-                    className="w-3 h-3"
-                    fill="none"
-                    stroke="currentColor"
-                    viewBox="0 0 24 24"
-                    aria-hidden="true"
-                  >
-                    <path
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      strokeWidth={2}
-                      d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
-                    />
-                  </svg>
-                </a>
-              </Tooltip>
-            </div>
-          )}
-        </div>
-      </div>
-    </div>
-  )
-}
-
-export default PriceImpactWarning

package/src/widget/components/QRCodeOptions.tsx

@@ -1,65 +0,0 @@
-import { ChevronRight, QrCode, Wallet } from "lucide-react"
-import type React from "react"
-import { ScreenHeader } from "./ScreenHeader.js"
-
-export interface QRCodeOptionsProps {
-  onBack?: () => void
-  onSelectWalletConnect: () => void
-  onSelectQRCode: () => void
-}
-
-const QRCodeOptions: React.FC<QRCodeOptionsProps> = ({
-  onBack,
-  onSelectWalletConnect,
-  onSelectQRCode,
-}) => {
-  return (
-    <div className="flex flex-col h-full">
-      <ScreenHeader
-        onBack={onBack}
-        headerContent="QR Code Options"
-        headerContentAlign="left"
-        rightSideContent={<div className="w-9" />}
-      />
-
-      <div className="flex-1">
-        <div className="space-y-4">
-          {/* QR Code Options */}
-          <div className="trails-border-radius-container border trails-border-primary">
-            <button
-              type="button"
-              onClick={onSelectWalletConnect}
-              className="w-full text-left px-3 py-4 text-sm flex items-center justify-between cursor-pointer transition-colors trails-text-primary trails-hover-bg"
-            >
-              <div className="flex items-center gap-3">
-                <Wallet className="w-4 h-4" />
-                <span className="text-sm font-bold">Via WalletConnect</span>
-                <span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200">
-                  Recommended
-                </span>
-              </div>
-              <ChevronRight className="w-5 h-5 text-gray-400" />
-            </button>
-
-            {/* Divider between buttons */}
-            <div className="border-b border-gray-200 dark:border-gray-700"></div>
-
-            <button
-              type="button"
-              onClick={onSelectQRCode}
-              className="w-full text-left px-3 py-4 text-sm flex items-center justify-between cursor-pointer transition-colors trails-text-primary trails-hover-bg"
-            >
-              <div className="flex items-center gap-3">
-                <QrCode className="w-4 h-4" />
-                <span className="text-sm font-bold">Via Deposit QR Code</span>
-              </div>
-              <ChevronRight className="w-5 h-5 text-gray-400" />
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-export default QRCodeOptions

package/src/widget/components/QRCodeWalletSelect.tsx

@@ -1,77 +0,0 @@
-import type React from "react"
-import { useQRCodeWallets, type QRCodeWalletOption } from "../../wallets.js"
-import { ScreenHeader } from "./ScreenHeader.js"
-
-interface QRCodeWalletSelectProps {
-  onBack?: () => void
-  onSelect: (walletId: string) => void
-  selectedWalletId?: string | null
-  walletOptions?: QRCodeWalletOption[]
-  title?: string
-  disabled?: boolean
-}
-
-export const QRCodeWalletSelect: React.FC<QRCodeWalletSelectProps> = ({
-  onBack,
-  onSelect,
-  selectedWalletId,
-  walletOptions,
-  title = "Which wallet will scan the QR code?",
-  disabled = false,
-}) => {
-  const defaultQrCodeWallets = useQRCodeWallets()
-  const defaultWalletOptions = walletOptions || defaultQrCodeWallets
-  return (
-    <div className="space-y-6">
-      <ScreenHeader
-        onBack={onBack}
-        headerContent="Deposit"
-        headerContentAlign="left"
-      />
-
-      <div className="space-y-6">
-        <div className="text-center px-4">
-          <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100">
-            {title}
-          </h2>
-        </div>
-
-        <div className="grid grid-cols-2 gap-3">
-          {defaultWalletOptions.map((wallet) => {
-            const isSelected = wallet.id === selectedWalletId
-            return (
-              <button
-                key={wallet.id}
-                type="button"
-                onClick={() => !disabled && onSelect(wallet.id)}
-                disabled={disabled}
-                className={`flex flex-col items-center justify-center gap-3 rounded-xl border px-4 py-6 text-center transition-all duration-200 min-h-[120px] ${
-                  isSelected
-                    ? "border-blue-500 bg-blue-50 shadow-md dark:border-blue-400 dark:bg-blue-900/30"
-                    : "border-gray-200 bg-white hover:bg-gray-50 hover:shadow-sm active:scale-[0.98] dark:border-gray-700 dark:bg-gray-900 dark:hover:bg-gray-800"
-                } ${disabled ? "opacity-60 cursor-not-allowed" : "cursor-pointer"}`}
-              >
-                {wallet.icon ? (
-                  <img
-                    src={wallet.icon}
-                    alt={wallet.label}
-                    className="h-12 w-12 rounded-full object-contain shrink-0"
-                  />
-                ) : (
-                  <div className="flex h-12 w-12 items-center justify-center rounded-full bg-gray-200 text-sm font-semibold text-gray-600 dark:bg-gray-700 dark:text-gray-200 shrink-0">
-                    {wallet.label.charAt(0).toUpperCase()}
-                  </div>
-                )}
-                <div className="text-sm font-semibold text-gray-900 dark:text-gray-100">
-                  {wallet.label}
-                </div>
-              </button>
-            )
-          })}
-        </div>
-      </div>
-    </div>
-  )
-}
-
-export default QRCodeWalletSelect

package/src/widget/components/QrCode.tsx

@@ -1,216 +0,0 @@
-import type React from "react"
-import { useEffect, useRef } from "react"
-import QRCodeUtil from "qrcode"
-
-interface QrCodeProps {
-  url: string
-  imageUrl?: string
-  size?: number
-  className?: string
-}
-
-function getMatrix(
-  value: string,
-  errorCorrectionLevel: QRCodeUtil.QRCodeErrorCorrectionLevel,
-) {
-  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> = ({
-  url,
-  imageUrl,
-  size = 250,
-  className = "",
-}) => {
-  const svgRef = useRef<SVGSVGElement>(null)
-
-  useEffect(() => {
-    const svg = svgRef.current
-    if (!svg) return
-
-    // Clear existing content
-    while (svg.firstChild) {
-      svg.removeChild(svg.firstChild)
-    }
-
-    if (!url) return
-
-    const matrix = getMatrix(url, "Q")
-    const matrixSize = matrix.length
-    if (!matrixSize) return
-
-    const quietZoneModules = 4
-    const fillColor = "#000000"
-    const backgroundColor = "#ffffff"
-    const cellSize = size / (matrixSize + quietZoneModules * 2)
-    const qrOrigin = quietZoneModules * cellSize
-    const qrCodeSize = matrixSize * cellSize
-    const shouldReserveLogoSpace = Boolean(imageUrl)
-    const logoSize = shouldReserveLogoSpace ? qrCodeSize * 0.2 : 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")
-
-    // QR code white background
-    const qrBackground = document.createElementNS(
-      "http://www.w3.org/2000/svg",
-      "rect",
-    )
-    qrBackground.setAttribute("x", "0")
-    qrBackground.setAttribute("y", "0")
-    qrBackground.setAttribute("width", size.toString())
-    qrBackground.setAttribute("height", size.toString())
-    qrBackground.setAttribute("fill", backgroundColor)
-    qrBackground.setAttribute("rx", "8")
-    qrBackground.setAttribute("ry", "8")
-    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",
-              (qrOrigin + currentRunStart * cellSize).toFixed(3),
-            )
-            rect.setAttribute("y", (qrOrigin + 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
-        }
-
-        if (value) {
-          // Start a new run or continue existing one
-          if (currentRunStart === null) {
-            currentRunStart = colIndex
-          }
-        } 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",
-              (qrOrigin + currentRunStart * cellSize).toFixed(3),
-            )
-            rect.setAttribute("y", (qrOrigin + 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
-          }
-        }
-      })
-
-      // 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",
-          (qrOrigin + currentRunStart * cellSize).toFixed(3),
-        )
-        rect.setAttribute("y", (qrOrigin + rowIndex * cellSize).toFixed(3))
-        rect.setAttribute("width", (runLength * cellSize).toFixed(3))
-        rect.setAttribute("height", cellSize.toFixed(3))
-        rect.setAttribute("fill", fillColor)
-        svg.appendChild(rect)
-      }
-    })
-
-    if (imageUrl) {
-      const logoX = qrOrigin + (qrCodeSize - logoSize) / 2
-      const logoY = qrOrigin + (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",
-        "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())
-      logo.setAttribute("preserveAspectRatio", "xMidYMid meet")
-      svg.appendChild(logo)
-    }
-  }, [url, imageUrl, size])
-
-  return (
-    <div className={`inline-block ${className}`}>
-      <svg
-        ref={svgRef}
-        width={size}
-        height={size}
-        viewBox={`0 0 ${size} ${size}`}
-        className="rounded-xl"
-      />
-    </div>
-  )
-}