0xtrails 0.1.13 → 0.2.1

package/src/widget/hooks/usePayMessage.tsx

@@ -0,0 +1,370 @@
+import { useMemo, createElement } from "react"
+import type { ReactNode } from "react"
+import { useWidgetProps } from "./useWidgetProps.js"
+import { useTargetAmount } from "./useTargetAmount.js"
+import { useTokenInfo } from "../../tokens.js"
+import { getChainInfo } from "../../chains.js"
+import { truncateAddress } from "../../utils.js"
+import { getExplorerUrlForAddress } from "../../explorer.js"
+import ChainImage from "../components/ChainImage.js"
+import TokenImage from "../components/TokenImage.js"
+import { logger } from "../../logger.js"
+
+export interface PayMessagePart {
+  type:
+    | "text"
+    | "appImage"
+    | "appName"
+    | "appUrl"
+    | "amount"
+    | "toAddress"
+    | "toAddressTruncated"
+    | "toChainId"
+    | "toAmount"
+    | "toTokenSymbol"
+    | "toTokenName"
+    | "toChainName"
+    | "toTokenImage"
+    | "toChainImage"
+  value: string
+}
+
+export interface UsePayMessageReturn {
+  message: ReactNode
+  parts: PayMessagePart[]
+}
+
+/**
+ * Hook for parsing and rendering payment messages with handlebar-style interpolation.
+ *
+ * Supported placeholders:
+ * - {APP_NAME} - App name from widget props
+ * - {APP_URL} - App URL from widget props
+ * - {APP_IMAGE} - Rendered app image component
+ * - {APP_DESCRIPTION} - App description from widget props
+ * - {TO_AMOUNT_USD} - Target amount in USD
+ * - {TO_ADDRESS} - Full destination address (linked to explorer)
+ * - {TO_ADDRESS_TRUNCATED} - Truncated destination address (linked to explorer)
+ * - {TO_CHAIN_ID} - Destination chain ID
+ * - {TO_AMOUNT} - Destination amount
+ * - {TO_TOKEN_SYMBOL} - Destination token symbol
+ * - {TO_TOKEN_NAME} - Destination token name
+ * - {TO_CHAIN_NAME} - Destination chain name
+ * - {TO_TOKEN_IMAGE} - Rendered destination token image
+ * - {TO_CHAIN_IMAGE} - Rendered destination chain image
+ *
+ * @example
+ * payMessage: "Pay {APP_IMAGE} {APP_NAME} {TO_AMOUNT_USD}"
+ * // Renders: Pay [icon] MyApp $5.00
+ */
+export function usePayMessage(): UsePayMessageReturn {
+  const {
+    payMessage,
+    appName,
+    appUrl,
+    appImageUrl,
+    appDescription,
+    toAddress,
+    toChainId,
+    toAmount,
+    toToken,
+  } = useWidgetProps()
+
+  const { targetAmountUsdFormatted } = useTargetAmount()
+
+  // Get chain info
+  const chainInfo = useMemo(() => {
+    if (!toChainId) return null
+    return getChainInfo(Number(toChainId))
+  }, [toChainId])
+
+  // Get token info
+  const { tokenInfo } = useTokenInfo({
+    address: toToken || "",
+    chainId: toChainId ? Number(toChainId) : undefined,
+  })
+
+  const parsed = useMemo(() => {
+    // Default message if no payMessage provided
+    const defaultMessage = appName
+      ? `Pay {APP_IMAGE} {APP_NAME} {TO_AMOUNT_USD}`
+      : `Pay {TO_AMOUNT_USD}`
+
+    const template = payMessage || defaultMessage
+
+    // Parse the template into parts
+    const parts: PayMessagePart[] = []
+    const regex = /\{([^}]+)\}/g
+    let lastIndex = 0
+    let match: RegExpExecArray | null = regex.exec(template)
+
+    while (match !== null) {
+      // Add text before the placeholder
+      if (match.index > lastIndex) {
+        parts.push({
+          type: "text",
+          value: template.substring(lastIndex, match.index),
+        })
+      }
+
+      // Add the placeholder
+      const placeholder = match[1]
+      switch (placeholder) {
+        case "APP_NAME":
+          parts.push({ type: "appName", value: appName || "" })
+          break
+        case "APP_URL":
+          parts.push({ type: "appUrl", value: appUrl || "" })
+          break
+        case "APP_IMAGE":
+          parts.push({ type: "appImage", value: appImageUrl || "" })
+          break
+        case "APP_DESCRIPTION":
+          parts.push({ type: "text", value: appDescription || "" })
+          break
+        case "TO_AMOUNT_USD":
+          parts.push({
+            type: "amount",
+            value: targetAmountUsdFormatted || "$0.00",
+          })
+          break
+        case "TO_ADDRESS":
+          parts.push({ type: "toAddress", value: toAddress || "" })
+          break
+        case "TO_ADDRESS_TRUNCATED":
+          parts.push({
+            type: "toAddressTruncated",
+            value: toAddress || "",
+          })
+          break
+        case "TO_CHAIN_ID":
+          parts.push({
+            type: "toChainId",
+            value: toChainId ? String(toChainId) : "",
+          })
+          break
+        case "TO_AMOUNT":
+          parts.push({ type: "toAmount", value: toAmount || "" })
+          break
+        case "TO_TOKEN_SYMBOL":
+          parts.push({
+            type: "toTokenSymbol",
+            value: tokenInfo?.symbol || "",
+          })
+          break
+        case "TO_TOKEN_NAME":
+          parts.push({ type: "toTokenName", value: tokenInfo?.name || "" })
+          break
+        case "TO_CHAIN_NAME":
+          parts.push({ type: "toChainName", value: chainInfo?.name || "" })
+          break
+        case "TO_TOKEN_IMAGE":
+          parts.push({
+            type: "toTokenImage",
+            value: tokenInfo?.imageUrl || "",
+          })
+          break
+        case "TO_CHAIN_IMAGE":
+          parts.push({
+            type: "toChainImage",
+            value: toChainId ? String(toChainId) : "",
+          })
+          break
+        default:
+          // Unknown placeholder, keep as text
+          parts.push({ type: "text", value: match[0] })
+      }
+
+      lastIndex = regex.lastIndex
+      match = regex.exec(template)
+    }
+
+    // Add remaining text
+    if (lastIndex < template.length) {
+      parts.push({
+        type: "text",
+        value: template.substring(lastIndex),
+      })
+    }
+
+    return parts
+  }, [
+    payMessage,
+    appName,
+    appUrl,
+    appImageUrl,
+    appDescription,
+    targetAmountUsdFormatted,
+    toAddress,
+    toAmount,
+    tokenInfo?.symbol,
+    tokenInfo?.name,
+    tokenInfo?.imageUrl,
+    chainInfo?.name,
+    toChainId,
+  ])
+
+  // Render the message
+  const message = useMemo(() => {
+    return (
+      <>
+        {parsed.map((part) => {
+          switch (part.type) {
+            case "appImage":
+              return part.value ? (
+                <img
+                  key={`${part.type}`}
+                  src={part.value}
+                  alt={appName || "App"}
+                  className="inline-block w-4 h-4 mx-1 rounded"
+                  onError={(e) => {
+                    logger.console.error(
+                      `Error loading app image: ${e}, appImageUrl: ${appImageUrl}`,
+                    )
+                    // Hide image on error
+                    e.currentTarget.style.display = "none"
+                  }}
+                />
+              ) : null
+            case "appName":
+              return appUrl ? (
+                <a
+                  key={`${part.type}`}
+                  href={appUrl}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="font-bold hover:underline cursor-pointer mx-1"
+                  title={appDescription || appName || ""}
+                >
+                  {part.value}
+                </a>
+              ) : (
+                <span
+                  key={`${part.type}`}
+                  className="font-bold mx-1"
+                  title={appDescription || ""}
+                >
+                  {part.value}
+                </span>
+              )
+            case "amount":
+              return (
+                <span key={`${part.type}`} className="font-bold mx-1">
+                  {part.value}
+                </span>
+              )
+            case "appUrl":
+              return part.value ? (
+                <a
+                  key={`${part.type}`}
+                  href={part.value}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="hover:underline cursor-pointer mx-1"
+                >
+                  {part.value}
+                </a>
+              ) : null
+            case "toAddress":
+              return part.value ? (
+                <a
+                  key={`${part.type}`}
+                  href={getExplorerUrlForAddress({
+                    address: part.value,
+                    chainId: toChainId ? Number(toChainId) : 1,
+                  })}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="font-mono text-sm hover:underline cursor-pointer mx-1"
+                >
+                  {part.value}
+                </a>
+              ) : null
+            case "toAddressTruncated":
+              return part.value ? (
+                <a
+                  key={`${part.type}`}
+                  href={getExplorerUrlForAddress({
+                    address: part.value,
+                    chainId: toChainId ? Number(toChainId) : 1,
+                  })}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="font-mono text-sm hover:underline cursor-pointer mx-1"
+                >
+                  {truncateAddress(part.value)}
+                </a>
+              ) : null
+            case "toChainId":
+              return (
+                <span key={`${part.type}`} className="mx-1">
+                  {part.value}
+                </span>
+              )
+            case "toAmount":
+              return (
+                <span key={`${part.type}`} className="font-bold mx-1">
+                  {part.value}
+                </span>
+              )
+            case "toTokenSymbol":
+              return (
+                <span key={`${part.type}`} className="font-bold mx-1">
+                  {part.value}
+                </span>
+              )
+            case "toTokenName":
+              return (
+                <span key={`${part.type}`} className="mx-1">
+                  {part.value}
+                </span>
+              )
+            case "toChainName":
+              return (
+                <span key={`${part.type}`} className="font-semibold mx-1">
+                  {part.value}
+                </span>
+              )
+            case "toTokenImage":
+              return part.value && tokenInfo?.symbol ? (
+                <span key={`${part.type}`} className="inline-block mx-1">
+                  {createElement(TokenImage, {
+                    imageUrl: part.value,
+                    symbol: tokenInfo.symbol,
+                    chainId: toChainId ? Number(toChainId) : undefined,
+                    size: 16,
+                  })}
+                </span>
+              ) : null
+            case "toChainImage":
+              return toChainId ? (
+                <span key={`${part.type}`} className="inline-block mx-1">
+                  {createElement(ChainImage, {
+                    chainId: Number(toChainId),
+                    size: 16,
+                  })}
+                </span>
+              ) : null
+            case "text":
+              return <span key={`${part.type}`}>{part.value}</span>
+            default:
+              return <span key={`${part.type}`}>{part.value}</span>
+          }
+        })}
+      </>
+    )
+  }, [
+    parsed,
+    appName,
+    appUrl,
+    appImageUrl,
+    appDescription,
+    tokenInfo,
+    toChainId,
+  ])
+
+  return {
+    message,
+    parts: parsed,
+  }
+}

package/src/widget/hooks/useRecipients.ts

@@ -0,0 +1,168 @@
+import { useState, useEffect, useCallback } from "react"
+import { isAddress } from "viem"
+import { logger } from "../../logger.js"
+
+export interface RecentRecipient {
+  address: string
+  ensName?: string
+  resolvedAddress?: string // For when ENS name resolves to address
+  timestamp: number
+}
+
+const STORAGE_KEY = "trails-recent-recipients"
+const MAX_RECENT_RECIPIENTS = 10
+
+export const useRecipients = () => {
+  const [recentRecipients, setRecentRecipients] = useState<RecentRecipient[]>(
+    [],
+  )
+
+  // Load recent recipients from localStorage on mount
+  useEffect(() => {
+    try {
+      const stored = localStorage.getItem(STORAGE_KEY)
+      if (stored) {
+        const parsed = JSON.parse(stored) as RecentRecipient[]
+        // Sort by timestamp (most recent first)
+        const sorted = parsed.sort((a, b) => b.timestamp - a.timestamp)
+        setRecentRecipients(sorted)
+      }
+    } catch (error) {
+      logger.console.error(
+        "[trails-sdk] Failed to load recent recipients:",
+        error,
+      )
+    }
+  }, [])
+
+  // Save recipients to localStorage
+  const saveToStorage = useCallback((recipients: RecentRecipient[]) => {
+    try {
+      localStorage.setItem(STORAGE_KEY, JSON.stringify(recipients))
+    } catch (error) {
+      logger.console.error(
+        "[trails-sdk] Failed to save recent recipients:",
+        error,
+      )
+    }
+  }, [])
+
+  // ENS resolution placeholder - in real implementation, use proper ENS resolver
+  const resolveENS = useCallback(
+    async (input: string): Promise<{ address?: string; ensName?: string }> => {
+      try {
+        if (input.endsWith(".eth")) {
+          // ENS name to address resolution - return empty for now
+          logger.console.log(
+            `[trails-sdk] ENS resolution not implemented: ${input}`,
+          )
+          return { ensName: input }
+        } else if (isAddress(input)) {
+          // Address to ENS name resolution (reverse lookup) - return empty for now
+          logger.console.log(
+            `[trails-sdk] Reverse ENS resolution not implemented: ${input}`,
+          )
+          return { address: input, ensName: "" }
+        }
+
+        return {}
+      } catch (error) {
+        logger.console.error("[trails-sdk] ENS resolution failed:", error)
+        return {}
+      }
+    },
+    [],
+  )
+
+  // Add a new recipient to the recent list
+  const addRecentRecipient = useCallback(
+    async (input: string, resolvedAddress?: string, ensName?: string) => {
+      const trimmedInput = input.trim()
+      if (!trimmedInput) return
+
+      let recipientData: RecentRecipient
+
+      if (isAddress(trimmedInput)) {
+        // It's a valid address
+        recipientData = {
+          address: trimmedInput,
+          ensName: ensName, // Use provided ENS name from reverse resolution
+          timestamp: Date.now(),
+        }
+      } else if (trimmedInput.endsWith(".eth")) {
+        // It's an ENS name
+        if (resolvedAddress && isAddress(resolvedAddress)) {
+          // We have a resolved address for this ENS name
+          recipientData = {
+            address: resolvedAddress,
+            ensName: ensName || trimmedInput, // Use provided ENS name or fallback to input
+            resolvedAddress: resolvedAddress,
+            timestamp: Date.now(),
+          }
+        } else {
+          return // Invalid ENS name - no resolved address
+        }
+      } else {
+        return // Invalid input
+      }
+
+      setRecentRecipients((prev) => {
+        // Remove any existing entry with the same address or ENS name
+        const filtered = prev.filter(
+          (r) =>
+            r.address.toLowerCase() !== recipientData.address.toLowerCase() &&
+            (!recipientData.ensName || r.ensName !== recipientData.ensName),
+        )
+
+        // Add new entry at the beginning
+        const updated = [recipientData, ...filtered].slice(
+          0,
+          MAX_RECENT_RECIPIENTS,
+        )
+
+        // Save to localStorage
+        saveToStorage(updated)
+
+        return updated
+      })
+
+      logger.console.log("[trails-sdk] Added recent recipient:", recipientData)
+    },
+    [saveToStorage],
+  )
+
+  // Remove a recipient from the recent list
+  const removeRecentRecipient = useCallback(
+    (address: string) => {
+      setRecentRecipients((prev) => {
+        const updated = prev.filter(
+          (r) => r.address.toLowerCase() !== address.toLowerCase(),
+        )
+        saveToStorage(updated)
+        return updated
+      })
+    },
+    [saveToStorage],
+  )
+
+  // Clear all recent recipients
+  const clearRecentRecipients = useCallback(() => {
+    setRecentRecipients([])
+    try {
+      localStorage.removeItem(STORAGE_KEY)
+    } catch (error) {
+      logger.console.error(
+        "[trails-sdk] Failed to clear recent recipients:",
+        error,
+      )
+    }
+  }, [])
+
+  return {
+    recentRecipients,
+    addRecentRecipient,
+    removeRecentRecipient,
+    clearRecentRecipients,
+    resolveENS,
+  }
+}