0xtrails 0.13.2 → 0.14.0

package/src/widget/hooks/usePayMessage.tsx

@@ -1,496 +0,0 @@
-import type { ReactNode } from "react"
-import { createElement, useMemo } from "react"
-import { getChainInfo } from "../../chains.js"
-import { getExplorerUrlForAddress } from "../../explorer.js"
-import { logger } from "../../logger.js"
-import { useTokenInfo } from "../../tokens.js"
-import { truncateAddress } from "../../utils/address.js"
-import { AddressOrEnsName } from "../components/AddressOrEnsName.js"
-import { AddressWalletIcon } from "../components/AddressWalletIcon.js"
-import ChainImage from "../components/ChainImage.js"
-import TokenImage from "../components/TokenImage.js"
-import { useTargetAmount } from "./useTargetAmount.js"
-import { useWidgetProps } from "./useWidgetProps.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_AMOUNT_LOCALE_USD} - Target amount in USD with locale formatting
- * - {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,
-    toCalldata,
-  } = useWidgetProps()
-
-  const { targetAmountUsdFormatted, targetAmountUsdFormattedLocale } =
-    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(() => {
-    // If no payMessage provided, return empty parts (default layout handled separately)
-    if (!payMessage) {
-      return []
-    }
-
-    // Parse the template into parts
-    const parts: PayMessagePart[] = []
-    const regex = /\{([^}]+)\}/g
-    let lastIndex = 0
-    let match: RegExpExecArray | null = regex.exec(payMessage)
-
-    while (match !== null) {
-      // Add text before the placeholder
-      if (match.index > lastIndex) {
-        parts.push({
-          type: "text",
-          value: payMessage.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": {
-          const usdValue = targetAmountUsdFormatted || "$0.00"
-          // If USD value is $0, use token amount + symbol instead
-          if (usdValue === "$0.00" || usdValue === "$0") {
-            const tokenAmount = toAmount || "0"
-            const tokenSymbol = tokenInfo?.symbol || ""
-            parts.push({
-              type: "amount",
-              value: `${tokenAmount} ${tokenSymbol}`.trim(),
-            })
-          } else {
-            parts.push({
-              type: "amount",
-              value: usdValue,
-            })
-          }
-          break
-        }
-        case "TO_AMOUNT_LOCALE_USD": {
-          const usdValue = targetAmountUsdFormattedLocale || "$0.00"
-          // If USD value is $0, use token amount + symbol instead
-          if (usdValue === "$0.00" || usdValue === "$0") {
-            const tokenAmount = toAmount || "0"
-            const tokenSymbol = tokenInfo?.symbol || ""
-            parts.push({
-              type: "amount",
-              value: `${tokenAmount} ${tokenSymbol}`.trim(),
-            })
-          } else {
-            parts.push({
-              type: "amount",
-              value: usdValue,
-            })
-          }
-          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(payMessage)
-    }
-
-    // Add remaining text
-    if (lastIndex < payMessage.length) {
-      parts.push({
-        type: "text",
-        value: payMessage.substring(lastIndex),
-      })
-    }
-
-    return parts
-  }, [
-    payMessage,
-    appName,
-    appUrl,
-    appImageUrl,
-    appDescription,
-    targetAmountUsdFormatted,
-    targetAmountUsdFormattedLocale,
-    toAddress,
-    toAmount,
-    tokenInfo?.symbol,
-    tokenInfo?.name,
-    tokenInfo?.imageUrl,
-    chainInfo?.name,
-    toChainId,
-  ])
-
-  // Render the message
-  const message = useMemo(() => {
-    // If no payMessage provided, render default layout
-    if (!payMessage) {
-      return (
-        <div className="flex flex-col items-center justify-center px-8 py-4 space-y-4 min-w-full">
-          {/* App image above the amount if it exists */}
-          {appImageUrl && (
-            <img
-              src={appImageUrl}
-              alt={appName || "App"}
-              className="w-12 h-12 rounded-lg"
-              onError={(e) => {
-                logger.console.error(
-                  `Error loading app image: ${e}, appImageUrl: ${appImageUrl}`,
-                )
-                // Hide image on error
-                e.currentTarget.style.display = "none"
-              }}
-            />
-          )}
-
-          {/* Large amount in center */}
-          <div className="font-bold text-center">
-            {(() => {
-              const usdValue =
-                targetAmountUsdFormattedLocale ||
-                targetAmountUsdFormatted ||
-                "$0.00"
-              const tokenAmount = toAmount || "0"
-              const tokenSymbol = tokenInfo?.symbol || ""
-
-              // If value is $0, show token amount + symbol instead
-              const displayText =
-                usdValue === "$0.00" || usdValue === "$0"
-                  ? `${tokenAmount} ${tokenSymbol}`.trim()
-                  : usdValue
-
-              // Dynamic font size based on text length
-              const textLength = displayText.length
-              let fontSize = "text-6xl" // Default large size
-
-              if (textLength > 12) {
-                fontSize = "text-2xl"
-              } else if (textLength > 10) {
-                fontSize = "text-3xl"
-              } else if (textLength > 8) {
-                fontSize = "text-4xl"
-              } else if (textLength > 6) {
-                fontSize = "text-5xl"
-              }
-
-              return <div className={fontSize}>{displayText}</div>
-            })()}
-          </div>
-
-          {/* Recipient info below */}
-          {toAddress && (
-            <div className="flex items-center space-x-2 text-center">
-              <span className="text-sm text-gray-900 dark:text-gray-100">
-                {toCalldata ? "to" : "Recipient"}
-              </span>
-              <AddressWalletIcon
-                size={20}
-                walletAddress={toAddress as `0x${string}`}
-              />
-              <a
-                href={getExplorerUrlForAddress({
-                  address: toAddress,
-                  chainId: toChainId ? Number(toChainId) : 1,
-                })}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="text-sm hover:underline cursor-pointer text-blue-600 dark:text-blue-400"
-              >
-                <AddressOrEnsName
-                  address={toAddress}
-                  startChars={4}
-                  endChars={4}
-                />
-              </a>
-            </div>
-          )}
-        </div>
-      )
-    }
-
-    // Render user-provided message with handlebar interpolation
-    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>
-          }
-        })}
-      </>
-    )
-  }, [
-    payMessage,
-    parsed,
-    appName,
-    appUrl,
-    appImageUrl,
-    appDescription,
-    tokenInfo,
-    toChainId,
-    toAddress,
-    toCalldata,
-    targetAmountUsdFormatted,
-    targetAmountUsdFormattedLocale,
-    toAmount,
-  ])
-
-  return {
-    message,
-    parts: parsed,
-  }
-}

package/src/widget/hooks/usePriceImpactWarning.ts

@@ -1,17 +0,0 @@
-import { createContext, useContext } from "react"
-
-export interface PriceImpactWarningConfig {
-  thresholdBps?: number
-  warningMessage?: string
-  fallbackBridgeUrl?: string
-}
-
-const PriceImpactWarningContext =
-  createContext<PriceImpactWarningConfig | null>(null)
-
-export const PriceImpactWarningProvider = PriceImpactWarningContext.Provider
-
-export function usePriceImpactWarning(): PriceImpactWarningConfig {
-  const context = useContext(PriceImpactWarningContext)
-  return context || {}
-}