0xtrails 0.1.13 → 0.2.0

package/src/widget/components/PaySendForm.tsx

@@ -754,7 +754,7 @@ 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."
+            errorPrettified="Cannot swap to the same token on the same chain without custom calldata. Please select a different origin token."
             severity="error"
           />
         ) : (

package/src/widget/components/QuoteDetails.tsx

@@ -4,7 +4,7 @@ import type React from "react"
 import { getExplorerUrlForAddress } from "../../explorer.js"
 import type { PrepareSendQuote } from "../../prepareSend.js"
 import { useState, useEffect, useRef } from "react"
-import { truncateAddress } from "../../address.js"
+import { truncateAddress } from "../../utils.js"
 import { PriceImpactWarning } from "./PriceImpactWarning.js"
 import { usePriceImpactWarning } from "../hooks/usePriceImpactWarning.js"
 

package/src/widget/components/Receipt.tsx

@@ -9,7 +9,7 @@ import { YellowWarningAnimation } from "./YellowWarningAnimation.js"
 import { getTxTimeDiff } from "../../transactions.js"
 import { QuoteDetails } from "./QuoteDetails.js"
 import type { PrepareSendQuote } from "../../prepareSend.js"
-import { truncateAddress } from "../../address.js"
+import { truncateAddress } from "../../utils.js"
 import { formatElapsed } from "../../utils.js"
 import { ChainImage } from "./ChainImage.js"
 import { getChainInfo } from "../../chains.js"

package/src/widget/components/Receive.tsx

@@ -4,7 +4,7 @@ import { QrCode } from "./QrCode.js"
 import { ScreenHeader } from "./ScreenHeader.js"
 import { getExplorerUrlForAddress } from "../../explorer.js"
 import { ExternalLink, Copy, Check } from "lucide-react"
-import { truncateAddress } from "../../address.js"
+import { truncateAddress } from "../../utils.js"
 import { useResolveEnsName } from "../../ens.js"
 
 interface ReceiveProps {
@@ -60,6 +60,7 @@ export const Receive: React.FC<ReceiveProps> = ({
           onBack={onBack}
           headerContent="Receive"
           headerContentAlign="left"
+          showAccountActions={true}
         />
 
         <div className="flex flex-col justify-center min-h-full space-y-6 pt-8">
@@ -96,6 +97,7 @@ export const Receive: React.FC<ReceiveProps> = ({
         onBack={onBack}
         headerContent={`Pay ${ensName ? ensName : truncateAddress(resolvedAddress)}`}
         headerContentAlign="left"
+        showAccountActions={true}
       />
 
       <div className="flex flex-col justify-center min-h-full space-y-6 pt-2">
@@ -163,7 +165,7 @@ export const Receive: React.FC<ReceiveProps> = ({
             <button
               type="button"
               onClick={onPay}
-              className="px-6 py-3 font-medium rounded-lg transition-colors duration-200 cursor-pointer bg-blue-500 hover:bg-blue-600 text-white"
+              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"
             >
               Pay {ensName ? ensName : truncateAddress(resolvedAddress)}
             </button>

package/src/widget/components/RecentTokens.tsx

@@ -20,7 +20,8 @@ export const RecentTokens: React.FC<RecentTokensProps> = ({
   const isTokenSelected = (token: SupportedToken) => {
     if (!selectedToken) return false
     return (
-      token.contractAddress === selectedToken.contractAddress &&
+      token.contractAddress.toLowerCase() ===
+        selectedToken.contractAddress.toLowerCase() &&
       token.chainId === selectedToken.chainId
     )
   }

package/src/widget/components/Recipients.tsx

@@ -0,0 +1,448 @@
+import { useEffect, useState, useCallback } from "react"
+import type React from "react"
+import { isAddress } from "viem"
+import { Copy, RotateCcw } from "lucide-react"
+import { useAccount, useConnections } from "wagmi"
+import { ScreenHeader } from "./ScreenHeader.js"
+import { SearchInputField } from "./SearchInputField.js"
+import { Identicon } from "./Identicon.js"
+import { useCurrentScreen } from "../hooks/useCurrentScreen.js"
+import { useSelectedRecipient } from "../hooks/useSelectedRecipient.js"
+import { useRecipients, type RecentRecipient } from "../hooks/useRecipients.js"
+import { useResolveEnsAddress, useResolveEnsName } from "../../ens.js"
+import { truncateAddress } from "../../utils.js"
+import { logger } from "../../logger.js"
+import { useMode } from "../hooks/useMode.js"
+import { useWallets, wagmiConnectorToWalletId } from "../../wallets.js"
+
+interface RecipientsProps {
+  onBack?: () => void
+  selectedRecipient?: string
+  onRecipientSelect?: (address: string) => void
+}
+
+export const Recipients: React.FC<RecipientsProps> = ({
+  onBack,
+  selectedRecipient = "",
+  onRecipientSelect,
+}) => {
+  const { mode } = useMode()
+  const { setCurrentScreen } = useCurrentScreen()
+  const { setSelectedRecipient } = useSelectedRecipient()
+  const { recentRecipients, addRecentRecipient, clearRecentRecipients } =
+    useRecipients()
+  const [recipientInput, setRecipientInput] = useState(selectedRecipient)
+  const [isValidAddress, setIsValidAddress] = useState(false)
+  const [copiedAddress, setCopiedAddress] = useState<string | null>(null)
+
+  // Connected wallets functionality
+  const { address } = useAccount()
+  const connections = useConnections()
+  const { wallets: allWallets } = useWallets()
+
+  // Use wagmi ENS resolution for both directions
+  const trimmedInput = recipientInput.trim()
+
+  // Forward resolution: ENS name → address
+  const { ensAddress, isLoading: isLoadingEnsAddress } = useResolveEnsAddress({
+    textInput: trimmedInput,
+  })
+
+  // Reverse resolution: address → ENS name
+  const { ensName, isLoading: isLoadingEnsName } = useResolveEnsName({
+    address: isAddress(trimmedInput) ? trimmedInput : "",
+  })
+
+  const isLoadingEns = isLoadingEnsAddress || isLoadingEnsName
+
+  // Get all connected wallets with their details
+  const getConnectedWallets = () => {
+    const walletMap = new Map()
+
+    connections.forEach((connection) => {
+      // Process each account in the connection
+      connection.accounts.forEach((account) => {
+        if (account && !walletMap.has(account)) {
+          const walletId = wagmiConnectorToWalletId(connection.connector)
+          const walletConfig = allWallets.find(
+            (wallet) => wallet.id === walletId,
+          )
+
+          walletMap.set(account, {
+            address: account,
+            connector: connection.connector,
+            walletConfig,
+            walletId,
+            isActive: account === address,
+          })
+        }
+      })
+    })
+
+    return Array.from(walletMap.values())
+  }
+
+  const connectedWallets = getConnectedWallets()
+
+  // Validate address and handle ENS resolution
+  useEffect(() => {
+    const validateAddress = async () => {
+      if (!recipientInput || recipientInput.trim() === "") {
+        setIsValidAddress(false)
+        return
+      }
+
+      const trimmedInput = recipientInput.trim()
+
+      // Check if it's a valid hex address
+      if (isAddress(trimmedInput)) {
+        setIsValidAddress(true)
+        // Add to recent recipients with reverse ENS resolution if available
+        if (ensName) {
+          await addRecentRecipient(trimmedInput, trimmedInput, ensName)
+        } else {
+          await addRecentRecipient(trimmedInput, trimmedInput)
+        }
+        return
+      }
+
+      // Check if it looks like an ENS name
+      if (trimmedInput.includes(".") && trimmedInput.endsWith(".eth")) {
+        // ENS validation will be handled by the wagmi hook
+        // If we have a resolved address, it's valid
+        if (ensAddress) {
+          setIsValidAddress(true)
+          await addRecentRecipient(trimmedInput, ensAddress, trimmedInput)
+        } else if (!isLoadingEns) {
+          // Not loading and no address means resolution failed or not implemented
+          setIsValidAddress(false)
+        }
+      } else {
+        setIsValidAddress(false)
+      }
+    }
+
+    const timeoutId = setTimeout(validateAddress, 300) // Debounce validation
+    return () => clearTimeout(timeoutId)
+  }, [recipientInput, ensAddress, ensName, isLoadingEns, addRecentRecipient])
+
+  const handleInputChange = useCallback((value: string) => {
+    setRecipientInput(value)
+  }, [])
+
+  // Handle recent recipient selection
+  const handleRecentRecipientSelect = useCallback(
+    (recipient: RecentRecipient) => {
+      logger.console.log("[trails-sdk] Selected recent recipient:", recipient)
+      setSelectedRecipient(recipient.address)
+      onRecipientSelect?.(recipient.address)
+      setCurrentScreen(mode === "pay" ? "send-form" : "fund-form")
+    },
+    [setSelectedRecipient, onRecipientSelect, setCurrentScreen, mode],
+  )
+
+  // Handle connected wallet selection
+  const handleConnectedWalletSelect = useCallback(
+    (walletAddress: string) => {
+      logger.console.log(
+        "[trails-sdk] Selected connected wallet:",
+        walletAddress,
+      )
+      setSelectedRecipient(walletAddress)
+      onRecipientSelect?.(walletAddress)
+      setCurrentScreen(mode === "pay" ? "send-form" : "fund-form")
+    },
+    [setSelectedRecipient, onRecipientSelect, setCurrentScreen, mode],
+  )
+
+  // Handle copy to clipboard with success indication
+  const handleCopyAddress = useCallback(
+    async (address: string, e: React.MouseEvent) => {
+      e.preventDefault()
+      e.stopPropagation()
+      try {
+        await navigator.clipboard.writeText(address)
+        setCopiedAddress(address)
+        setTimeout(() => setCopiedAddress(null), 2000) // Clear after 2 seconds
+      } catch (error) {
+        logger.console.error("[trails-sdk] Failed to copy address:", error)
+      }
+    },
+    [],
+  )
+
+  const getValidationMessage = () => {
+    if (!recipientInput || recipientInput.trim() === "") {
+      return null
+    }
+
+    if (isLoadingEns) {
+      return "Resolving ENS name..."
+    }
+
+    return null
+  }
+
+  const getValidationColor = () => {
+    if (isLoadingEns) {
+      return "text-blue-500"
+    }
+    if (isValidAddress) {
+      return "text-green-500"
+    }
+    if (recipientInput && recipientInput.trim() !== "") {
+      return "text-red-500"
+    }
+    return "text-gray-500"
+  }
+
+  return (
+    <div className="space-y-4">
+      <ScreenHeader
+        onBack={onBack}
+        headerContent="Recipient address"
+        headerContentAlign="left"
+        showAccountActions={true}
+      />
+
+      <div className="space-y-4">
+        {/* Input Section */}
+        <div className="space-y-2">
+          <SearchInputField
+            value={recipientInput}
+            onChange={handleInputChange}
+            placeholder="Enter wallet address"
+            autoFocus={true}
+          />
+
+          {/* Validation Message */}
+          {getValidationMessage() && (
+            <p className={`text-xs ${getValidationColor()} text-left`}>
+              {getValidationMessage()}
+            </p>
+          )}
+        </div>
+
+        {/* Recent Recipients */}
+        {recentRecipients.length > 0 && (
+          <div className="space-y-2">
+            <div className="text-sm font-medium text-gray-700 dark:text-gray-300 text-left">
+              Recents
+            </div>
+            <div className="space-y-1 max-h-48 overflow-y-auto trails-scrollbar">
+              {recentRecipients.map((recipient) => {
+                // Only highlight if search field contains a valid address that matches this recipient
+                const searchQuery = recipientInput.trim()
+                const isHighlighted =
+                  searchQuery &&
+                  isAddress(searchQuery) &&
+                  recipient.address.toLowerCase() === searchQuery.toLowerCase()
+
+                return (
+                  <button
+                    key={recipient.address}
+                    type="button"
+                    className={`w-full py-2 px-4 flex items-center space-x-3 transition-all duration-200 trails-border-radius-list-button cursor-pointer group ${
+                      isHighlighted
+                        ? "trails-list-item-selected border border-blue-200 dark:border-blue-800"
+                        : "trails-list-item"
+                    }`}
+                    onClick={() => handleRecentRecipientSelect(recipient)}
+                    onKeyDown={(e) => {
+                      if (e.key === "Enter" || e.key === " ") {
+                        e.preventDefault()
+                        handleRecentRecipientSelect(recipient)
+                      }
+                    }}
+                    aria-label={`Select recipient ${recipient.ensName || recipient.address}`}
+                  >
+                    {/* Identicon */}
+                    <div className="relative flex-shrink-0 mr-2">
+                      <Identicon
+                        value={recipient.address}
+                        size={32}
+                        className="flex-shrink-0"
+                      />
+                    </div>
+
+                    <div className="flex-1 min-w-0 text-left">
+                      <div className="flex items-start">
+                        <div className="flex-1">
+                          <div className="flex items-center">
+                            <span className="text-sm font-medium text-gray-900 dark:text-white">
+                              {truncateAddress(recipient.address, 8, 4)}
+                            </span>
+                            <button
+                              type="button"
+                              onClick={(e) =>
+                                handleCopyAddress(recipient.address, e)
+                              }
+                              className={`ml-1 p-0.5 rounded opacity-0 group-hover:opacity-100 transition-all duration-200 cursor-pointer ${
+                                copiedAddress === recipient.address
+                                  ? "bg-green-100 dark:bg-green-900/30 opacity-100"
+                                  : "hover:bg-gray-200 dark:hover:bg-gray-600"
+                              }`}
+                              title={
+                                copiedAddress === recipient.address
+                                  ? "Copied!"
+                                  : "Copy address"
+                              }
+                            >
+                              {copiedAddress === recipient.address ? (
+                                <svg
+                                  className="w-3 h-3 text-green-600 dark:text-green-400"
+                                  fill="none"
+                                  viewBox="0 0 24 24"
+                                  stroke="currentColor"
+                                  aria-label="Copied"
+                                >
+                                  <title>Copied</title>
+                                  <path
+                                    strokeLinecap="round"
+                                    strokeLinejoin="round"
+                                    strokeWidth={2}
+                                    d="M5 13l4 4L19 7"
+                                  />
+                                </svg>
+                              ) : (
+                                <Copy className="w-3 h-3 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300" />
+                              )}
+                            </button>
+                          </div>
+                          {recipient.ensName && (
+                            <div className="text-xs text-gray-500 dark:text-gray-400">
+                              {recipient.ensName}
+                            </div>
+                          )}
+                        </div>
+                      </div>
+                    </div>
+                  </button>
+                )
+              })}
+            </div>
+          </div>
+        )}
+
+        {/* Connected Wallets - only show when no input */}
+        {connectedWallets.length > 0 && !recipientInput.trim() && (
+          <div className="space-y-2">
+            <div className="flex items-center gap-2">
+              <div className="text-sm font-medium text-gray-700 dark:text-gray-300 text-left">
+                Connected Wallets
+              </div>
+            </div>
+            <div className="space-y-1 max-h-48 overflow-y-auto trails-scrollbar">
+              {connectedWallets.map((wallet) => {
+                // Only highlight if search field contains a valid address that matches this wallet
+                const searchQuery = recipientInput.trim()
+                const isHighlighted =
+                  searchQuery &&
+                  isAddress(searchQuery) &&
+                  wallet.address.toLowerCase() === searchQuery.toLowerCase()
+
+                return (
+                  <button
+                    key={wallet.address}
+                    type="button"
+                    className={`w-full py-2 px-4 flex items-center space-x-3 transition-all duration-200 trails-border-radius-list-button cursor-pointer group ${
+                      isHighlighted
+                        ? "trails-list-item-selected border border-blue-200 dark:border-blue-800"
+                        : "trails-list-item"
+                    }`}
+                    onClick={() => handleConnectedWalletSelect(wallet.address)}
+                    onKeyDown={(e) => {
+                      if (e.key === "Enter" || e.key === " ") {
+                        e.preventDefault()
+                        handleConnectedWalletSelect(wallet.address)
+                      }
+                    }}
+                    aria-label={`Select wallet ${wallet.walletConfig?.name || "Wallet"} - ${wallet.address}`}
+                  >
+                    {/* Identicon */}
+                    <div className="relative flex-shrink-0 mr-2">
+                      <Identicon
+                        value={wallet.address}
+                        size={32}
+                        className="flex-shrink-0"
+                      />
+                    </div>
+
+                    <div className="flex-1 min-w-0 text-left">
+                      <div className="flex items-start">
+                        <div className="flex-1">
+                          <div className="flex items-center">
+                            <span className="text-sm font-medium text-gray-900 dark:text-white">
+                              {truncateAddress(wallet.address, 8, 4)}
+                            </span>
+                            <button
+                              type="button"
+                              onClick={(e) =>
+                                handleCopyAddress(wallet.address, e)
+                              }
+                              className={`ml-1 p-0.5 rounded opacity-0 group-hover:opacity-100 transition-all duration-200 cursor-pointer ${
+                                copiedAddress === wallet.address
+                                  ? "bg-green-100 dark:bg-green-900/30 opacity-100"
+                                  : "hover:bg-gray-200 dark:hover:bg-gray-600"
+                              }`}
+                              title={
+                                copiedAddress === wallet.address
+                                  ? "Copied!"
+                                  : "Copy address"
+                              }
+                            >
+                              {copiedAddress === wallet.address ? (
+                                <svg
+                                  className="w-3 h-3 text-green-600 dark:text-green-400"
+                                  fill="none"
+                                  viewBox="0 0 24 24"
+                                  stroke="currentColor"
+                                  aria-label="Copied"
+                                >
+                                  <title>Copied</title>
+                                  <path
+                                    strokeLinecap="round"
+                                    strokeLinejoin="round"
+                                    strokeWidth={2}
+                                    d="M5 13l4 4L19 7"
+                                  />
+                                </svg>
+                              ) : (
+                                <Copy className="w-3 h-3 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300" />
+                              )}
+                            </button>
+                          </div>
+                          <div className="text-xs text-gray-500 dark:text-gray-400">
+                            {wallet.walletConfig?.name ||
+                              wallet.connector?.name ||
+                              "Wallet"}
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </button>
+                )
+              })}
+            </div>
+          </div>
+        )}
+
+        {/* Clear Recents Button */}
+        {recentRecipients.length > 0 && (
+          <div className="pt-4">
+            <button
+              type="button"
+              onClick={clearRecentRecipients}
+              className="flex items-center gap-1 px-2 py-1.5 text-xs font-medium text-gray-700 dark:text-gray-300 trails-bg-secondary rounded-xl hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors cursor-pointer"
+            >
+              <RotateCcw className="w-3 h-3" />
+              Clear recents
+            </button>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export default Recipients

package/src/widget/components/RefundWarning.tsx

@@ -0,0 +1,61 @@
+import type React from "react"
+
+interface RefundWarningProps {
+  fundMethod?: string
+  isSenderContractOnOrigin?: boolean
+  isSenderContractOnDestination?: boolean
+}
+
+export const RefundWarning: React.FC<RefundWarningProps> = ({
+  fundMethod,
+  isSenderContractOnOrigin,
+  isSenderContractOnDestination,
+}) => {
+  // Determine if we should show the warning
+  const shouldShowWarning =
+    fundMethod === "exchange" ||
+    (isSenderContractOnOrigin && !isSenderContractOnDestination)
+
+  if (!shouldShowWarning) {
+    return null
+  }
+
+  // Determine the warning message
+  let warningMessage = ""
+  if (fundMethod === "exchange") {
+    warningMessage =
+      "Using exchange funding may result in loss of funds if the transaction fails and the sender address cannot accept refunds on the origin chain."
+  } else if (isSenderContractOnOrigin && !isSenderContractOnDestination) {
+    warningMessage =
+      "The sender is a contract address. Funds may be lost if the transaction fails and the contract cannot accept refunds on the destination chain."
+  }
+
+  return (
+    <div className="px-2 py-3 rounded-lg bg-amber-500/10 border border-solid border-amber-500/30">
+      <div className="flex items-start space-x-2">
+        <svg
+          className="w-4 h-4 text-amber-500 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>
+          <p className="text-sm font-medium text-amber-600 dark:text-amber-400">
+            Risk of Fund Loss
+          </p>
+          <p className="text-xs mt-1 text-amber-600 dark:text-amber-400">
+            {warningMessage}
+          </p>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/widget/components/ScreenHeader.tsx

@@ -50,7 +50,7 @@ export const ScreenHeader: React.FC<ScreenHeaderProps> = ({
       {(rightSideContent || (isConnected && showAccountActions)) && (
         <div className="absolute right-0 top-1/2 -translate-y-1/2 -translate-x-0 flex items-center gap-2 z-10">
           {rightSideContent && (
-            <div className="text-right max-w-[125px]">{rightSideContent}</div>
+            <div className="text-right max-w-[280px]">{rightSideContent}</div>
           )}
           {isConnected && showAccountActions && <AccountActionsDropdown />}
         </div>