0xtrails 0.1.2 → 0.1.4

package/src/widget/components/OriginTransferInformation.tsx

@@ -0,0 +1,59 @@
+import type React from "react"
+import { TokenImage } from "./TokenImage.js"
+import type { PrepareSendQuote } from "../../prepareSend.js"
+import { getTimeAgo } from "../../utils.js"
+
+interface OriginTransferInformationProps {
+  quote: PrepareSendQuote
+  elapsedSeconds: number
+  timestamp?: number
+}
+
+export const OriginTransferInformation: React.FC<
+  OriginTransferInformationProps
+> = ({ quote, elapsedSeconds, timestamp }) => {
+  return (
+    <div className="w-full max-w-sm p-3 trails-border-radius-container trails-bg-secondary trails-text-secondary">
+      <div className="flex items-start justify-between">
+        {/* Left side - Chain and Token images with token name */}
+        <div className="flex items-start space-x-2">
+          {/* Token Image and Name */}
+          <div className="flex items-center space-x-2">
+            <div style={{ width: "24px", height: "24px" }}>
+              <TokenImage
+                imageUrl={quote.originToken.imageUrl}
+                symbol={quote.originToken.symbol}
+                chainId={quote.originChain.id}
+                size={24}
+              />
+            </div>
+            <div className="flex flex-col">
+              <span className="text-xs font-medium text-left text-gray-900 dark:text-white">
+                {quote.originToken.name}
+              </span>
+              <span className="text-xs text-gray-500 dark:text-gray-400 flex items-center">
+                {getTimeAgo(timestamp)}
+                <span
+                  className="ml-1 font-mono animate-pulse text-gray-500 dark:text-gray-400"
+                  title="Elapsed time"
+                >
+                  {elapsedSeconds}s
+                </span>
+              </span>
+            </div>
+          </div>
+        </div>
+
+        {/* Right side - USD value and amount */}
+        <div className="text-right">
+          <div className="text-xs font-medium text-right text-gray-900 dark:text-white">
+            {quote.originAmountUsdDisplay}
+          </div>
+          <div className="text-xs text-gray-600 dark:text-gray-400">
+            {quote.originAmountFormatted} {quote.originToken.symbol}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/widget/components/PaySendForm.tsx

@@ -1,6 +1,6 @@
-import { ChevronDown, Loader2, TrendingUp } from "lucide-react"
+import { ChevronDown, Loader2, RefreshCcw, TrendingUp } from "lucide-react"
 import type React from "react"
-import { useCallback, useEffect, useRef } from "react"
+import { useCallback, useEffect, useRef, useState } from "react"
 import type { Account, WalletClient } from "viem"
 import { isAddress } from "viem"
 import type { TransactionState } from "../../transactions.js"
@@ -12,6 +12,7 @@ import { FeeOptions } from "./FeeOptions.js"
 import { TokenImage } from "./TokenImage.js"
 import { QuoteDetails } from "./QuoteDetails.js"
 import { TruncatedAddress } from "./TruncatedAddress.js"
+// import { RefundAddressInput } from "./RefundAddressInput.js"
 import { type PrepareSendQuote, TradeType } from "../../prepareSend.js"
 import { getChainInfo, getChainColor } from "../../chains.js"
 import { formatTvl } from "../../prices.js"
@@ -20,6 +21,7 @@ import morphoLogo from "../assets/morpho.svg"
 import { formatUsdAmountDisplay } from "../../tokenBalances.js"
 import { MINIMUM_USD_AMOUNT_FOR_SWAP } from "../../constants.js"
 import { ScreenHeader } from "./ScreenHeader.js"
+import { ErrorDisplay } from "./ErrorDisplay.js"
 
 interface PaySendFormProps {
   selectedToken: Token
@@ -41,7 +43,7 @@ interface PaySendFormProps {
   gasless?: boolean
   setWalletConfirmRetryHandler: (handler: () => Promise<void>) => void
   quoteProvider?: string
-  fundMethod?: string | null
+  fundMethod?: string
   onNavigateToMeshConnect?: (
     props: {
       toTokenSymbol: string
@@ -52,7 +54,7 @@ interface PaySendFormProps {
     quote?: PrepareSendQuote | null,
   ) => void
   onAmountUpdate?: (amount: string) => void
-  mode?: "pay" | "fund" | "earn"
+  mode?: "pay" | "fund" | "earn" | "swap" | "receive"
   selectedPool?: {
     id: string
     name: string
@@ -102,6 +104,9 @@ export const PaySendForm: React.FC<PaySendFormProps> = ({
   selectedPool,
   checkoutOnHandlers,
 }) => {
+  // const [isRefundAddressOpen, setIsRefundAddressOpen] = useState(false)
+  // const [refundAddress, setRefundAddress] = useState<string>(account.address)
+  const [refetchTrigger, setRefetchTrigger] = useState(0)
   const {
     amount,
     amountRaw,
@@ -138,6 +143,9 @@ export const PaySendForm: React.FC<PaySendFormProps> = ({
     supportedChains,
     isValidCustomToken,
     prepareSendQuote,
+    quoteError,
+    quoteErrorPrettified,
+    isSameTokenWithoutCustomCalldata,
   } = useSendForm({
     account,
     toAmount,
@@ -145,6 +153,7 @@ export const PaySendForm: React.FC<PaySendFormProps> = ({
     toChainId,
     toToken,
     toCalldata,
+    // refundAddress,
     walletClient,
     onTransactionStateChange,
     onError,
@@ -162,6 +171,7 @@ export const PaySendForm: React.FC<PaySendFormProps> = ({
     mode,
     onNavigateToMeshConnect,
     checkoutOnHandlers,
+    refetchTrigger,
   })
 
   // Handle amount input changes with decimal validation
@@ -177,6 +187,11 @@ export const PaySendForm: React.FC<PaySendFormProps> = ({
     [setAmount],
   )
 
+  // Handle manual quote refetch
+  const handleRefetchQuote = useCallback(() => {
+    setRefetchTrigger((prev) => prev + 1)
+  }, [])
+
   // Call onAmountUpdate when amountRaw changes
   useEffect(() => {
     if (onAmountUpdate) {
@@ -373,7 +388,7 @@ export const PaySendForm: React.FC<PaySendFormProps> = ({
           <div className="mb-4">
             <label
               htmlFor="destination-chain"
-              className="block text-sm font-medium mb-1 text-gray-700 dark:text-gray-300"
+              className="block text-sm font-medium mb-1 text-gray-700 dark:text-gray-300 text-left"
             >
               Destination Chain
             </label>
@@ -436,7 +451,7 @@ export const PaySendForm: React.FC<PaySendFormProps> = ({
           <div className="mb-4">
             <label
               htmlFor="token"
-              className="block text-sm font-medium mb-1 text-gray-700 dark:text-gray-300"
+              className="block text-sm font-medium mb-1 text-gray-700 dark:text-gray-300 text-left"
             >
               Receive Token
             </label>
@@ -505,7 +520,7 @@ export const PaySendForm: React.FC<PaySendFormProps> = ({
           <div className="mb-2">
             <label
               htmlFor="amount"
-              className="block text-sm font-medium mb-1 text-gray-700 dark:text-gray-300"
+              className="block text-sm font-medium mb-1 text-gray-700 dark:text-gray-300 text-left"
             >
               Amount to {mode === "earn" ? "Deposit" : "Receive"}
             </label>
@@ -526,7 +541,7 @@ export const PaySendForm: React.FC<PaySendFormProps> = ({
             </div>
             {amountUsdDisplay && selectedDestToken?.symbol && (
               <div className="h-6 mt-1">
-                <div className="text-sm text-gray-400">
+                <div className="text-sm text-gray-400 text-left">
                   ≈ {amountUsdDisplay}
                 </div>
               </div>
@@ -537,10 +552,37 @@ export const PaySendForm: React.FC<PaySendFormProps> = ({
         {/* Receive Section - Similar to FundSendForm */}
         {(toAmount || toChainId || toToken) && (
           <div className="space-y-1">
-            <div
-              className={`text-lg font-semibold text-left ${"text-gray-900 dark:text-white"}`}
-            >
-              {mode === "earn" ? "Deposit" : "Receive"}
+            <div className="flex items-center justify-between">
+              <div
+                className={`text-lg font-semibold text-left ${"text-gray-900 dark:text-white"}`}
+              >
+                {mode === "earn" ? "Deposit" : "Receive"}
+              </div>
+              <button
+                type="button"
+                onClick={handleRefetchQuote}
+                disabled={
+                  isLoadingQuote ||
+                  !amount ||
+                  !selectedDestToken ||
+                  !selectedDestinationChain ||
+                  !isValidRecipient
+                }
+                className={`p-2 rounded-md transition-colors cursor-pointer ${
+                  isLoadingQuote ||
+                  !amount ||
+                  !selectedDestToken ||
+                  !selectedDestinationChain ||
+                  !isValidRecipient
+                    ? "opacity-50 cursor-not-allowed text-gray-400 dark:text-gray-500"
+                    : "text-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 hover:text-gray-700 dark:hover:text-gray-200"
+                }`}
+                title="Refetch quote"
+              >
+                <RefreshCcw
+                  className={`h-4 w-4 ${isLoadingQuote ? "animate-spin" : ""}`}
+                />
+              </button>
             </div>
 
             <div className="p-2">
@@ -653,6 +695,16 @@ export const PaySendForm: React.FC<PaySendFormProps> = ({
           </div>
         )}
 
+        {/* Refund Address Input */}
+        {/* <RefundAddressInput
+          account={account}
+          isOpen={isRefundAddressOpen}
+          onToggle={() => setIsRefundAddressOpen(!isRefundAddressOpen)}
+          refundAddress={refundAddress}
+          onRefundAddressChange={setRefundAddress}
+          chainId={selectedDestinationChain.id}
+        /> */}
+
         {/* Fee Options */}
         <FeeOptions
           options={FEE_TOKENS}
@@ -661,6 +713,18 @@ export const PaySendForm: React.FC<PaySendFormProps> = ({
         />
 
         {/* Warning Messages - Show only one at a time */}
+        {isSameTokenWithoutCustomCalldata ? (
+          <ErrorDisplay
+            errorPrettified="Cannot swap to the same token on the same chain without custom calldata. Please select a different destination token."
+            severity="error"
+          />
+        ) : (
+          <ErrorDisplay
+            errorPrettified={quoteErrorPrettified}
+            error={quoteError}
+            severity="warning"
+          />
+        )}
         {prepareSendQuote?.noSufficientBalance ? (
           <div className="px-2 py-3 rounded-lg bg-amber-500/10 border border-solid border-amber-500/30">
             <div className="flex items-center space-x-2">
@@ -719,7 +783,8 @@ export const PaySendForm: React.FC<PaySendFormProps> = ({
             !isValidCustomToken ||
             isLoadingQuote ||
             !prepareSendQuote ||
-            prepareSendQuote?.noSufficientBalance
+            prepareSendQuote?.noSufficientBalance ||
+            isSameTokenWithoutCustomCalldata
           }
           className={`w-full font-semibold py-4 px-4 trails-border-radius-button transition-colors bg-blue-500 hover:bg-blue-600 disabled:bg-gray-300 text-white disabled:text-gray-500 disabled:cursor-not-allowed cursor-pointer relative`}
         >
@@ -730,6 +795,8 @@ export const PaySendForm: React.FC<PaySendFormProps> = ({
               />
               <span>{buttonText}</span>
             </div>
+          ) : isSameTokenWithoutCustomCalldata ? (
+            "Select Different Tokens"
           ) : prepareSendQuote?.noSufficientBalance ? (
             "Insufficient Balance"
           ) : (

package/src/widget/components/QRCodeDeposit.tsx

@@ -23,12 +23,12 @@ export const QRCodeDeposit: React.FC<QRCodeDepositProps> = ({
 
   const eip631Url = useMemo(() => {
     if (!quote) return ""
-    return `ethereum:${quote.originAddress}@${quote.originChain.id}`
+    return `ethereum:${quote.originDepositAddress}@${quote.originChain.id}`
   }, [quote])
 
   const eip681Url = useMemo(() => {
     if (!quote) return ""
-    return `ethereum:${quote.originToken.contractAddress}@${quote.originChain.id}/transfer?address=${quote.originAddress}&uint256=${quote.originAmount}`
+    return `ethereum:${quote.originToken.contractAddress}@${quote.originChain.id}/transfer?address=${quote.originDepositAddress}&uint256=${quote.originAmount}`
   }, [quote])
 
   return (
@@ -64,7 +64,7 @@ export const QRCodeDeposit: React.FC<QRCodeDepositProps> = ({
               >
                 <QrCode
                   url={useSimpleQrCode ? eip631Url : eip681Url}
-                  size={200}
+                  size={300}
                 />
               </button>
               {!useSimpleQrCode && (
@@ -114,7 +114,7 @@ export const QRCodeDeposit: React.FC<QRCodeDepositProps> = ({
                 </span>
                 <a
                   href={getExplorerUrlForAddress({
-                    address: quote.originAddress,
+                    address: quote.originDepositAddress,
                     chainId: quote.originChain.id,
                   })}
                   target="_blank"
@@ -122,8 +122,8 @@ export const QRCodeDeposit: React.FC<QRCodeDepositProps> = ({
                   className="flex items-center gap-1 text-xs text-gray-500 dark:text-gray-400 hover:underline transition-all"
                 >
                   <span>
-                    {quote.originAddress.slice(0, 6)}...
-                    {quote.originAddress.slice(-4)}
+                    {quote.originDepositAddress.slice(0, 6)}...
+                    {quote.originDepositAddress.slice(-4)}
                   </span>
                   <ExternalLink className="w-3 h-3" />
                 </a>

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,
-        }}
-        className="rounded-lg border border-solid border-gray-200 dark:border-gray-700"
+      <svg
+        ref={svgRef}
+        width={size}
+        height={size}
+        viewBox={`0 0 ${size} ${size}`}
+        className="rounded-lg bg-white"
       />
     </div>
   )
 }
-
-export default QrCode