0xtrails 0.6.6 → 0.7.0

package/src/widget/components/HookModalContent.tsx

@@ -0,0 +1,306 @@
+import { AnimatePresence, motion } from "motion/react"
+import { useCallback, useState, useEffect } from "react"
+import { zeroAddress } from "viem"
+import { useAccount } from "wagmi"
+import { logger } from "../../logger.js"
+import type { Token } from "../../tokens.js"
+import {
+  useTrailsModal,
+  type HostTransactionStatus,
+} from "../providers/TrailsModalProvider.js"
+import Modal from "./Modal.js"
+import TokenList from "./TokenList.js"
+import OriginSelectionAmount from "./OriginSelectionAmount.js"
+import WalletConfirmation from "./WalletConfirmation.js"
+import TransferPending from "./TransferPendingVertical.js"
+import Receipt from "./Receipt.js"
+import { useOriginSelectedToken } from "../hooks/useOriginSelectedToken.js"
+import { useRecentTokens } from "../hooks/useRecentTokens.js"
+import { useWidgetProps } from "../hooks/useWidgetProps.js"
+
+type HookModalScreen =
+  | "select-origin-token"
+  | "select-origin-amount"
+  | "wallet-confirmation"
+  | "pending"
+  | "receipt"
+
+function getScreenFromStatus(status: HostTransactionStatus): HookModalScreen {
+  switch (status) {
+    case "awaiting-origin":
+      return "select-origin-token"
+    case "awaiting-amount":
+      return "select-origin-amount"
+    case "confirmation":
+      return "wallet-confirmation"
+    case "pending":
+      return "pending"
+    case "success":
+    case "error":
+      return "receipt"
+    default:
+      return "select-origin-token"
+  }
+}
+
+/**
+ * HookModalContent is the core modal UI component used by useTrailsSendTransaction.
+ * It renders inside WidgetProviders, so it has access to all widget-level context providers.
+ * This component handles the modal screens: token selection, amount input, wallet confirmation,
+ * pending state, and receipt.
+ */
+export function HookModalContent() {
+  const { address } = useAccount()
+  const { renderInline } = useWidgetProps()
+  const {
+    isModalOpen,
+    closeModal,
+    pendingSelection,
+    setPendingSelection,
+    hostTransactionState,
+    setHostTransactionState,
+    hostTransactionQuote,
+    hostTransactionStates,
+    hostTransactionTimestamp,
+    resetHostTransactionState,
+    receiptActionButtonText,
+    onReceiptAction,
+    retryTransactionRef,
+  } = useTrailsModal()
+
+  // Debug logging
+  logger.console.log("[trails-sdk] [HookModalContent] Render state:", {
+    isModalOpen,
+    hostTransactionStatus: hostTransactionState.status,
+    hasPendingSelection: !!pendingSelection,
+  })
+
+  const { selectedToken, setSelectedToken } = useOriginSelectedToken()
+  const { recentTokens, addRecentToken } = useRecentTokens(address)
+  const [totalCompletionSeconds, setTotalCompletionSeconds] = useState<
+    number | null
+  >(null)
+
+  // Derive screen from hostTransactionState
+  const currentScreen = getScreenFromStatus(hostTransactionState.status)
+
+  // Calculate elapsed time on success
+  useEffect(() => {
+    if (hostTransactionState.status === "success" && hostTransactionTimestamp) {
+      setTotalCompletionSeconds(
+        Math.max(0, Math.floor((Date.now() - hostTransactionTimestamp) / 1000)),
+      )
+    }
+  }, [hostTransactionState.status, hostTransactionTimestamp])
+
+  const handleCloseModal = useCallback(() => {
+    if (pendingSelection) {
+      logger.console.log(
+        "[trails-sdk] [HookModalContent] Closing modal, rejecting pending selection",
+      )
+      pendingSelection.reject(new Error("Modal closed by user"))
+      setPendingSelection(undefined)
+    }
+    closeModal()
+    resetHostTransactionState()
+    setSelectedToken(null)
+  }, [
+    closeModal,
+    resetHostTransactionState,
+    pendingSelection,
+    setPendingSelection,
+    setSelectedToken,
+  ])
+
+  const handleTokenSelect = (token: Token) => {
+    setSelectedToken(token)
+
+    // Track the token in recent tokens
+    addRecentToken(token)
+
+    // Check if there's a pending selection request from useTrailsSendTransaction
+    if (pendingSelection) {
+      if (pendingSelection.requireAmountInput) {
+        setHostTransactionState((prev) => ({
+          ...prev,
+          status: "awaiting-amount",
+        }))
+        return
+      }
+      const originAddress = token.contractAddress || zeroAddress
+      try {
+        pendingSelection.resolve({
+          fromTokenAddress: originAddress,
+          fromChainId: token.chainId ?? 0,
+        })
+      } catch (error) {
+        logger.console.error(
+          "[trails-sdk] [HookModalContent] Error resolving pending selection:",
+          error,
+        )
+        pendingSelection.reject(error as Error)
+      } finally {
+        setPendingSelection(undefined)
+      }
+    }
+  }
+
+  const handleRecentTokenSelect = (token: Token) => {
+    handleTokenSelect(token)
+  }
+
+  const handleOriginAmountSubmit = (amount: string) => {
+    if (pendingSelection && selectedToken) {
+      try {
+        pendingSelection.resolve({
+          fromTokenAddress: selectedToken.contractAddress || zeroAddress,
+          fromChainId: selectedToken.chainId ?? 0,
+          fromAmount: amount,
+        })
+        setPendingSelection(undefined)
+      } catch (error) {
+        logger.console.error(
+          "[trails-sdk] [HookModalContent] Error resolving pending selection amount:",
+          error,
+        )
+        pendingSelection.reject(error as Error)
+        setPendingSelection(undefined)
+      }
+    }
+  }
+
+  const handleHookRetry = () => {
+    if (retryTransactionRef.current) {
+      setHostTransactionState((prev) => ({
+        ...prev,
+        retryEnabled: false,
+      }))
+      retryTransactionRef.current()
+    }
+  }
+
+  const renderScreenContent = () => {
+    switch (currentScreen) {
+      case "select-origin-token":
+        return (
+          <TokenList
+            onContinue={handleTokenSelect}
+            onBack={handleCloseModal}
+            targetAmountUsd={null}
+            targetAmountUsdFormatted={null}
+            onError={(error) => {
+              logger.console.error(
+                "[trails-sdk] [HookModalContent] Token list error:",
+                error,
+              )
+            }}
+            recentTokens={recentTokens}
+            onRecentTokenSelect={handleRecentTokenSelect}
+            fundMethod={null}
+            renderInline={renderInline}
+          />
+        )
+      case "select-origin-amount":
+        return (
+          <OriginSelectionAmount
+            token={selectedToken}
+            onBack={() =>
+              setHostTransactionState((prev) => ({
+                ...prev,
+                status: "awaiting-origin",
+              }))
+            }
+            onCancel={handleCloseModal}
+            onSubmit={handleOriginAmountSubmit}
+          />
+        )
+      case "wallet-confirmation":
+        return (
+          <WalletConfirmation
+            onBack={() =>
+              setHostTransactionState((prev) => ({
+                ...prev,
+                status: "awaiting-origin",
+              }))
+            }
+            onComplete={() => {
+              // Will transition to pending via hostTransactionState update
+            }}
+            retryEnabled={hostTransactionState.retryEnabled ?? false}
+            onRetry={handleHookRetry}
+            quote={hostTransactionQuote}
+          />
+        )
+      case "pending":
+        return (
+          <TransferPending
+            onElapsedTime={(seconds) => setTotalCompletionSeconds(seconds ?? 0)}
+            transactionStates={hostTransactionStates}
+            quote={hostTransactionQuote}
+            timestamp={hostTransactionTimestamp ?? undefined}
+            onContinue={() => {
+              // Receipt screen will be shown via hostTransactionState
+            }}
+          />
+        )
+      case "receipt":
+        return (
+          <Receipt
+            onSendAnother={onReceiptAction ?? undefined}
+            onClose={handleCloseModal}
+            renderInline={renderInline}
+            transactionStates={hostTransactionStates}
+            totalCompletionSeconds={totalCompletionSeconds ?? undefined}
+            quote={hostTransactionQuote}
+            showCloseButton={false}
+            actionButtonText={receiptActionButtonText ?? undefined}
+          />
+        )
+      default:
+        return null
+    }
+  }
+
+  if (!isModalOpen || hostTransactionState.status === "idle") {
+    return null
+  }
+
+  return (
+    <Modal isOpen={isModalOpen} onClose={handleCloseModal}>
+      <motion.div
+        initial={{ opacity: 0, scale: 0.95 }}
+        animate={{ opacity: 1, scale: 1 }}
+        exit={{ opacity: 0, scale: 0.95 }}
+        transition={{
+          type: "spring",
+          stiffness: 200,
+          damping: 30,
+          mass: 1,
+        }}
+        className="flex flex-col min-h-[400px] shadow-xl p-4 sm:p-6 relative w-full max-w-[400px] min-w-0 sm:w-[400px] mx-auto custom-scrollbar trails-bg-primary trails-text-primary trails-font trails-border-radius-widget trails-widget-border"
+        layout
+        layoutId="modal-container"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <AnimatePresence mode="wait">
+          <motion.div
+            key={currentScreen}
+            initial={{ opacity: 0, x: 20 }}
+            animate={{ opacity: 1, x: 0 }}
+            exit={{ opacity: 0, x: -20 }}
+            transition={{
+              type: "spring",
+              stiffness: 500,
+              damping: 30,
+              mass: 0.6,
+            }}
+            className="flex-1 flex flex-col w-full min-w-0"
+            layout
+          >
+            {renderScreenContent()}
+          </motion.div>
+        </AnimatePresence>
+      </motion.div>
+    </Modal>
+  )
+}

package/src/widget/components/Modal.tsx

@@ -51,7 +51,7 @@ const Modal: React.FC<ModalProps> = ({ isOpen, onClose, children }) => {
             role="dialog"
             aria-modal="true"
             aria-labelledby="modal-title"
-            className="fixed inset-0 flex items-center justify-center z-50 p-4 h-full w-full text-gray-900 dark:text-white"
+            className="fixed inset-0 flex items-center justify-center z-50 p-0 sm:p-4 h-full w-full text-gray-900 dark:text-white"
             onClick={handleClickOutside}
           >
             <motion.div

package/src/widget/components/OriginSelectionAmount.tsx

@@ -0,0 +1,135 @@
+import { useMemo, useState } from "react"
+import type React from "react"
+import type { Token } from "../../tokens.js"
+import { ScreenHeader } from "./ScreenHeader.js"
+import { TokenImage } from "./TokenImage.js"
+import { DynamicSizeInputField } from "./DynamicSizeInputField.js"
+import { getChainInfo } from "../../chains.js"
+import { formatRawAmount } from "../../tokenBalances.js"
+
+interface OriginSelectionAmountProps {
+  token: Token | null
+  onBack: () => void
+  onCancel: () => void
+  onSubmit: (amount: string) => void
+}
+
+export const OriginSelectionAmount: React.FC<OriginSelectionAmountProps> = ({
+  token,
+  onBack,
+  onCancel,
+  onSubmit,
+}) => {
+  const [amount, setAmount] = useState("")
+
+  const chainInfo = useMemo(
+    () => (token ? getChainInfo(token.chainId || 0) : undefined),
+    [token],
+  )
+
+  const formattedBalance = useMemo(() => {
+    if (!token?.balance || !token.decimals) {
+      return undefined
+    }
+    try {
+      return formatRawAmount(token.balance, token.decimals)
+    } catch {
+      return undefined
+    }
+  }, [token])
+
+  const handleUseMax = () => {
+    if (formattedBalance) {
+      setAmount(formattedBalance)
+    }
+  }
+
+  const handleSubmit = () => {
+    if (!amount || Number(amount) <= 0) return
+    onSubmit(amount.trim())
+  }
+
+  return (
+    <div className="flex flex-col space-y-4">
+      <ScreenHeader
+        headerContent="Enter amount"
+        onBack={onBack}
+        rightSideContent={
+          <button
+            type="button"
+            onClick={onCancel}
+            className="text-sm text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
+          >
+            Cancel
+          </button>
+        }
+      />
+
+      <div className="flex items-center justify-between rounded-2xl border border-gray-200 dark:border-gray-700 p-4 bg-white dark:bg-gray-900/40">
+        {token ? (
+          <>
+            <div className="flex items-center gap-3">
+              <TokenImage
+                symbol={token.symbol}
+                imageUrl={token.imageUrl}
+                chainId={token.chainId}
+                contractAddress={token.contractAddress}
+                size={32}
+              />
+              <div>
+                <div className="text-base font-semibold text-gray-900 dark:text-gray-100">
+                  {token.symbol}
+                </div>
+                <div className="text-xs text-gray-500 dark:text-gray-400">
+                  {chainInfo?.name ?? `Chain ${token.chainId}`}
+                </div>
+              </div>
+            </div>
+            {formattedBalance ? (
+              <button
+                type="button"
+                onClick={handleUseMax}
+                className="text-sm font-semibold text-blue-600 hover:text-blue-500"
+              >
+                Use max ({formattedBalance})
+              </button>
+            ) : null}
+          </>
+        ) : (
+          <div className="text-sm text-gray-500">Select a token first</div>
+        )}
+      </div>
+
+      <div className="space-y-2">
+        <label
+          htmlFor="origin-amount-input"
+          className="text-xs font-semibold uppercase text-gray-500 dark:text-gray-400"
+        >
+          Amount to use
+        </label>
+        <div className="rounded-2xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900/40 px-4 py-3">
+          <DynamicSizeInputField
+            id="origin-amount-input"
+            value={amount}
+            onChange={(event) => setAmount(event.target.value)}
+            placeholder="0.0"
+          />
+        </div>
+        <p className="text-xs text-gray-500 dark:text-gray-400">
+          Enter the amount you want to spend from this token.
+        </p>
+      </div>
+
+      <button
+        type="button"
+        onClick={handleSubmit}
+        disabled={!amount || Number(amount) <= 0}
+        className="w-full py-3 font-semibold trails-border-radius-button bg-blue-500 text-white disabled:bg-gray-200 disabled:text-gray-500 dark:disabled:bg-gray-800 dark:disabled:text-gray-500 hover:bg-blue-600 disabled:cursor-not-allowed transition-colors"
+      >
+        Continue
+      </button>
+    </div>
+  )
+}
+
+export default OriginSelectionAmount