0xtrails 0.12.2 → 0.13.0

package/src/widget/components/DirectTransfer.tsx

@@ -1,6 +1,6 @@
 import { ChevronDown, ExternalLink } from "lucide-react"
 import type React from "react"
-import { useCallback, useRef } from "react"
+import { useCallback, useRef, useState } from "react"
 import { formatUnits, getAddress } from "viem"
 import { getExplorerUrlForAddress } from "../../explorer.js"
 import { logger } from "../../logger.js"
@@ -13,7 +13,6 @@ import { QrCode } from "./QrCode.js"
 import { QuoteDetails } from "./QuoteDetails.js"
 import { ScreenHeader } from "./ScreenHeader.js"
 import TokenImage from "./TokenImage.js"
-import { removeStoredIntent } from "../../intentStorage.js"
 
 interface DirectTransferProps {
   onBack?: () => void
@@ -22,16 +21,6 @@ interface DirectTransferProps {
   use681QrCode?: boolean
   selectedWalletId?: string | null
   walletOptions?: QRCodeWalletOption[]
-  sendFn?:
-    | ((options?: {
-        selectedFeeOption?: any | null
-        onOriginSend?: () => void
-        depositTransactionHash?: string
-        skipCommit?: boolean
-        commitOnly?: boolean
-        skipIntentMonitoring?: boolean
-      }) => Promise<any>)
-    | null
   onIntentExecuted?: () => void
 }
 
@@ -42,12 +31,12 @@ export const DirectTransfer: React.FC<DirectTransferProps> = ({
   use681QrCode,
   selectedWalletId,
   walletOptions,
-  sendFn,
   onIntentExecuted,
 }) => {
   const defaultQrCodeWallets = useQRCodeWallets()
   const defaultWalletOptions = walletOptions || defaultQrCodeWallets
   const hasTriggeredExecuteRef = useRef(false)
+  const [isAmountCopied, setIsAmountCopied] = useState(false)
   const selectedWalletOption =
     defaultWalletOptions.find((option) => option.id === selectedWalletId) ??
     defaultWalletOptions[0]
@@ -75,66 +64,58 @@ export const DirectTransfer: React.FC<DirectTransferProps> = ({
   const qrCodeUrl = shouldUseEip681 ? eip681Url : eip631Url
 
   const walletIcon = selectedWalletOption?.icon
+  const formattedOriginAmount = quote
+    ? formatUnits(BigInt(quote.originAmount), quote.originToken.decimals)
+    : ""
+  const originTokenExplorerUrl =
+    quote && tokenAddress
+      ? getExplorerUrlForAddress({
+          address: tokenAddress,
+          chainId: quote.originChain.id,
+        })
+      : ""
 
-  const handleDepositComplete = useCallback(
-    async (lastTransactionHash: string | null) => {
-      logger.console.log("[DirectTransfer] handleDepositComplete called", {
-        lastTransactionHash,
-      })
-      if (
-        !sendFn ||
-        !quote?.intentId ||
-        hasTriggeredExecuteRef.current ||
-        !lastTransactionHash
-      ) {
-        return
-      }
+  const handleDepositComplete = useCallback(async () => {
+    logger.console.log("[DirectTransfer] handleDepositComplete called")
+    if (!quote?.intentId || hasTriggeredExecuteRef.current) {
+      return
+    }
 
-      hasTriggeredExecuteRef.current = true
-      let didNavigateToPending = false
+    hasTriggeredExecuteRef.current = true
 
-      try {
-        logger.console.log(
-          "[DirectTransfer] Deposit complete, executing intent with skipCommit",
-          {
-            intentId: quote.intentId,
-            originDepositAddress: quote.originDepositAddress,
-          },
-        )
+    try {
+      logger.console.log(
+        "[DirectTransfer] Deposit complete after commit/execute",
+        {
+          intentId: quote.intentId,
+          originDepositAddress: quote.originDepositAddress,
+        },
+      )
+      onIntentExecuted?.()
+    } catch (error) {
+      hasTriggeredExecuteRef.current = false
+      logger.console.error(
+        "[DirectTransfer] Failed to advance after deposit completion:",
+        error,
+      )
+    }
+  }, [quote, onIntentExecuted])
 
-        await sendFn({
-          skipCommit: true,
-          depositTransactionHash: lastTransactionHash,
-          onOriginSend: () => {
-            if (didNavigateToPending) return
-            didNavigateToPending = true
-            onIntentExecuted?.()
-          },
-        })
-
-        if (!didNavigateToPending) {
-          onIntentExecuted?.()
-        }
-      } catch (error) {
-        hasTriggeredExecuteRef.current = false
-        logger.console.error(
-          "[DirectTransfer] Failed to execute intent after deposit completion:",
-          error,
-        )
-      }
-    },
-    [sendFn, quote, onIntentExecuted],
-  )
+  const handleCopyAmount = useCallback(async () => {
+    if (!quote) return
+    try {
+      await navigator.clipboard.writeText(formattedOriginAmount)
+      setIsAmountCopied(true)
+      setTimeout(() => setIsAmountCopied(false), 2000)
+    } catch (error) {
+      logger.console.error("[DirectTransfer] Failed to copy amount:", error)
+    }
+  }, [quote, formattedOriginAmount])
 
   return (
     <div className="flex flex-col min-h-full">
       <ScreenHeader
-        onBack={() => {
-          if (quote?.intentId) {
-            removeStoredIntent(quote.intentId)
-          }
-          onBack?.()
-        }}
+        onBack={onBack}
         headerContent="Deposit"
         headerContentAlign="left"
         rightSideContent={
@@ -146,15 +127,26 @@ export const DirectTransfer: React.FC<DirectTransferProps> = ({
               size={30}
             />
             <div className="flex flex-col items-start">
-              <span className="text-xs font-bold text-gray-900 dark:text-white">
-                {parseFloat(
-                  formatUnits(
-                    BigInt(quote?.originAmount ?? 0),
-                    quote?.originToken.decimals ?? 0,
-                  ),
-                ).toLocaleString(undefined, { maximumFractionDigits: 4 })}{" "}
-                {quote?.originToken.symbol}
-              </span>
+              <div className="flex items-center gap-1">
+                <span className="text-xs font-bold text-gray-900 dark:text-white">
+                  {parseFloat(
+                    formatUnits(
+                      BigInt(quote?.originAmount ?? 0),
+                      quote?.originToken.decimals ?? 0,
+                    ),
+                  ).toLocaleString(undefined, {
+                    maximumFractionDigits: 4,
+                  })}{" "}
+                  <a
+                    href={originTokenExplorerUrl}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="inline-flex items-center gap-0.5 underline decoration-dotted underline-offset-2 hover:opacity-80 transition-opacity"
+                  >
+                    {quote?.originToken.symbol}
+                  </a>
+                </span>
+              </div>
               <a
                 href={getExplorerUrlForAddress({
                   address: quote?.originDepositAddress ?? "",
@@ -211,7 +203,7 @@ export const DirectTransfer: React.FC<DirectTransferProps> = ({
             <div className="flex justify-center">
               <div className="flex flex-col items-start">
                 <span className="text-sm font-medium text-black dark:text-white mb-2">
-                  Copy address
+                  Copy the one-time deposit address
                 </span>
                 <div className="flex items-center">
                   <CopyButton
@@ -255,16 +247,27 @@ export const DirectTransfer: React.FC<DirectTransferProps> = ({
             </div>
             <div className="flex flex-col">
               <span className="text-sm font-bold" style={{ color: "#FF6900" }}>
-                Deposit exactly{" "}
-                {formatUnits(
-                  BigInt(quote.originAmount),
-                  quote.originToken.decimals,
-                )}{" "}
+                Deposit exactly
+                <button
+                  type="button"
+                  className={`cursor-pointer underline inline-flex items-center rounded px-1 transition-colors ${
+                    isAmountCopied
+                      ? "bg-green-100 dark:bg-green-900/30"
+                      : "hover:bg-orange-100/60 dark:hover:bg-orange-900/20"
+                  }`}
+                  onClick={handleCopyAmount}
+                >
+                  {formatUnits(
+                    BigInt(quote.originAmount),
+                    quote.originToken.decimals,
+                  )}{" "}
+                </button>
                 {quote.originToken.symbol} on {quote.originChain.name}
               </span>
               <span className="text-xs text-black dark:text-white  mt-1">
                 Deposited funds in excess of the requested amount cannot be
-                refunded.
+                refunded. Do not use the same deposit address for other
+                deposits.
               </span>
             </div>
           </div>
@@ -280,9 +283,7 @@ export const DirectTransfer: React.FC<DirectTransferProps> = ({
               tokenSymbol={quote.originToken.symbol}
               tokenDecimals={quote.originToken.decimals}
               chainId={quote.originChain.id}
-              onDepositComplete={(lastTransactionHash) => {
-                handleDepositComplete(lastTransactionHash)
-              }}
+              onDepositComplete={handleDepositComplete}
             />
           </div>
         )}

package/src/widget/components/Earn.tsx

@@ -6,7 +6,7 @@ import type { PrepareSendQuote } from "../../prepareSend.js"
 import type { Token } from "../../tokens.js"
 import type { FundMethod } from "../../transactionIntent/types.js"
 import type { TransactionState } from "../../transactions.js"
-import { useBack } from "../hooks/useBack.js"
+import { useViewManager } from "../hooks/useViewManager.js"
 import type { CheckoutOnHandlers } from "../hooks/useCheckout.js"
 import type { OnCompleteProps } from "../hooks/useSendForm.js"
 import { useSwapState } from "../hooks/useSwapState.js"
@@ -62,7 +62,7 @@ export const Earn: React.FC<EarnProps> = ({
 }) => {
   const [activeTab, setActiveTab] = useState<"deposit" | "withdraw">("deposit")
   const [isShowingPoolSelector, setIsShowingPoolSelector] = useState(false) // Track if pool selector is shown
-  const { setCurrentScreenWithBack } = useBack()
+  const { navigate } = useViewManager()
   const { enterFormMode } = useSwapState()
 
   // Register form mode so switching from Earn to other modes resets the swap state
@@ -81,7 +81,7 @@ export const Earn: React.FC<EarnProps> = ({
         customActions={
           <button
             type="button"
-            onClick={() => setCurrentScreenWithBack("swap", "earn")}
+            onClick={() => navigate("swap", { backTarget: "earn" })}
             className="flex h-8 px-3 justify-center items-center gap-1.5 rounded-full bg-gray-50 dark:bg-gray-700 cursor-pointer transition-colors text-gray-900 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600"
             title="Swap"
           >

package/src/widget/components/Fund.tsx

@@ -17,16 +17,14 @@ import { useSupportedTokens, type Token } from "../../tokens.js"
 import type { FundMethod } from "../../transactionIntent/types.js"
 import { isPassthroughEligible } from "../../utils/passthrough.js"
 import { useWidgetProps } from "../hooks/useWidgetProps.js"
-import { useBack } from "../hooks/useBack.js"
-import type { Screen } from "../hooks/useCurrentScreen.js"
-import { useCurrentScreen } from "../hooks/useCurrentScreen.js"
+import type { Screen } from "../hooks/useViewManager.js"
+import { useViewManager } from "../hooks/useViewManager.js"
 import { useDefaultDestinationToken } from "../hooks/useDefaultDestinationToken.js"
 import { useDefaultOriginToken } from "../hooks/useDefaultOriginToken.js"
 import { useDestinationSelectedToken } from "../hooks/useDestinationSelectedToken.js"
 import { useExchangeRate } from "../../query/fiat.hooks.js"
 import { useFiatOnRampCurrencies } from "../hooks/useFiatOnRampCurrencies.js"
 import { useFiatSelectedCurrency } from "../hooks/useFiatSelectedCurrency.js"
-import { useMode } from "../hooks/useMode.js"
 import { useOnRampCountryDefaults } from "../hooks/useOnRampCountryDefaults.js"
 import { useOnRampProviderWidget } from "../hooks/useOnRampProviderWidget.js"
 import type { OnrampQuote } from "../hooks/useOnRampQuote.js"
@@ -103,10 +101,8 @@ const Fund: React.FC<FundProps> = ({
   exactInputOnly = true, // Fund mode is always exact input only
   defaultInputMode,
 }) => {
-  const { mode } = useMode()
+  const { mode, navigate } = useViewManager()
   const { fundOptions } = useWidgetProps()
-  const { setCurrentScreen } = useCurrentScreen()
-  const { setCurrentScreenWithBack } = useBack()
   const {
     selectedToken: originToken,
     setSelectedToken: setOriginToken,
@@ -242,6 +238,59 @@ const Fund: React.FC<FundProps> = ({
     setSelectedFiatCurrency,
   ])
 
+  const lastAppliedConfiguredFiatRef = useRef<string | null>(null)
+  useEffect(() => {
+    if (!isMeldOnRampActive) {
+      lastAppliedConfiguredFiatRef.current = null
+    }
+  }, [isMeldOnRampActive])
+
+  useEffect(() => {
+    if (!isMeldOnRampActive || isLoadingFiatCurrencies) return
+    if (fiatCurrencies.length === 0) return
+    const configuredFiatCurrency = fundOptions?.fiatCurrency?.trim() || ""
+    const configuredFiatAmount = fundOptions?.fiatAmount?.trim() || ""
+    const configKey = `${configuredFiatCurrency.toUpperCase()}|${configuredFiatAmount}`
+    if (lastAppliedConfiguredFiatRef.current === configKey) return
+    lastAppliedConfiguredFiatRef.current = configKey
+
+    if (configuredFiatCurrency) {
+      const match = fiatCurrencies.find(
+        (c) =>
+          c.currencyCode.toUpperCase() === configuredFiatCurrency.toUpperCase(),
+      )
+      if (match) {
+        setSelectedFiatCurrency(match)
+        setHasManualFiatSelection(true)
+      }
+    }
+
+    if (configuredFiatAmount) {
+      setSellFiatAmount(configuredFiatAmount)
+      setInputDisplayValue(configuredFiatAmount)
+    }
+  }, [
+    isMeldOnRampActive,
+    isLoadingFiatCurrencies,
+    fiatCurrencies,
+    fundOptions?.fiatCurrency,
+    fundOptions?.fiatAmount,
+    setSelectedFiatCurrency,
+    setHasManualFiatSelection,
+    setSellFiatAmount,
+  ])
+
+  const normalizedConfiguredFiatCurrency =
+    fundOptions?.fiatCurrency?.trim().toUpperCase() || null
+  const isConfiguredFiatCurrencyApplied =
+    !!normalizedConfiguredFiatCurrency &&
+    !!selectedFiatCurrency &&
+    selectedFiatCurrency.currencyCode.toUpperCase() ===
+      normalizedConfiguredFiatCurrency
+  const isFiatCurrencyLocked =
+    isMeldOnRampActive && isConfiguredFiatCurrencyApplied
+  const isFiatAmountLocked = isMeldOnRampActive && !!fundOptions?.fiatAmount
+
   // Use a ref to track user actions to prevent race conditions with async state updates
   const userActionRef = useRef({
     hasManualDestinationSelection: false,
@@ -444,6 +493,9 @@ const Fund: React.FC<FundProps> = ({
   const selectedOnrampProviderQuote =
     selectedOnrampProvider || autoSelectedOnrampQuote
 
+  const shouldValidateFeeOption =
+    fundMethod !== "direct-transfer" && fundMethod !== "onramp-mesh"
+
   const isAwaitingTrailsQuote =
     isMeldOnRampActive && !!selectedOnrampProviderQuote && !prepareSendQuote
 
@@ -1205,7 +1257,7 @@ const Fund: React.FC<FundProps> = ({
   return (
     <div className="space-y-2">
       <ScreenHeader
-        onBack={() => setCurrentScreen("fund-methods")}
+        onBack={() => navigate("fund-methods")}
         headerContent="Fund"
         headerContentAlign="left"
         showAccountActions={true}
@@ -1213,7 +1265,7 @@ const Fund: React.FC<FundProps> = ({
           fundOptions?.hideSwap ? undefined : (
             <button
               type="button"
-              onClick={() => setCurrentScreenWithBack("swap", "fund-form")}
+              onClick={() => navigate("swap", { backTarget: "fund-form" })}
               className="flex h-8 px-3 justify-center items-center gap-1.5 rounded-full bg-gray-50 dark:bg-gray-700 cursor-pointer transition-colors text-gray-900 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600"
               title="Swap"
             >
@@ -1361,7 +1413,6 @@ const Fund: React.FC<FundProps> = ({
                       selectedOnrampProviderQuote.paymentMethodType,
                   },
                   externalSessionId,
-                  sendFn, // Pass sendFn so it can be used in OnrampProviderConfirmation
                   popup,
                 )
               }
@@ -1395,6 +1446,7 @@ const Fund: React.FC<FundProps> = ({
               <DynamicSizeInputField
                 ref={inputRef}
                 value={inputDisplayValue}
+                disabled={isFiatAmountLocked}
                 onChange={(e) => {
                   const value = e.target.value
 
@@ -1544,6 +1596,7 @@ const Fund: React.FC<FundProps> = ({
                   <div className="flex justify-center">
                     <button
                       type="button"
+                      disabled={isFiatAmountLocked}
                       onClick={() => {
                         // When toggling USD mode, convert the current display value
                         const newMode = !isEnteringFiat
@@ -1571,7 +1624,11 @@ const Fund: React.FC<FundProps> = ({
                           }
                         }
                       }}
-                      className="text-xs text-blue-500 hover:text-blue-600 transition-colors cursor-pointer flex items-center gap-1"
+                      className={`text-xs transition-colors flex items-center gap-1 ${
+                        isFiatAmountLocked
+                          ? "text-gray-400 cursor-not-allowed"
+                          : "text-blue-500 hover:text-blue-600 cursor-pointer"
+                      }`}
                       title={
                         selectedFiatCurrency
                           ? `${selectedFiatCurrency.currencyCode}`
@@ -1849,7 +1906,12 @@ const Fund: React.FC<FundProps> = ({
             <div className="mt-3 flex justify-center items-center space-x-2">
               <button
                 type="button"
-                className="py-0.5 px-1.5 text-xs font-medium rounded-full transition-colors cursor-pointer trails-bg-percentage-button trails-text-percentage-button trails-hover-percentage-button"
+                disabled={isFiatAmountLocked}
+                className={`py-0.5 px-1.5 text-xs font-medium rounded-full transition-colors trails-bg-percentage-button trails-text-percentage-button ${
+                  isFiatAmountLocked
+                    ? "opacity-50 cursor-not-allowed"
+                    : "cursor-pointer trails-hover-percentage-button"
+                }`}
                 onClick={() => {
                   if (selectedFiatCurrency?.currencyCode === "USD") {
                     setSellFiatAmount("25")
@@ -1872,7 +1934,12 @@ const Fund: React.FC<FundProps> = ({
               </button>
               <button
                 type="button"
-                className="py-0.5 px-1.5 text-xs font-medium rounded-full transition-colors cursor-pointer trails-bg-percentage-button trails-text-percentage-button trails-hover-percentage-button"
+                disabled={isFiatAmountLocked}
+                className={`py-0.5 px-1.5 text-xs font-medium rounded-full transition-colors trails-bg-percentage-button trails-text-percentage-button ${
+                  isFiatAmountLocked
+                    ? "opacity-50 cursor-not-allowed"
+                    : "cursor-pointer trails-hover-percentage-button"
+                }`}
                 onClick={() => {
                   if (selectedFiatCurrency?.currencyCode === "USD") {
                     setSellFiatAmount("50")
@@ -1895,7 +1962,12 @@ const Fund: React.FC<FundProps> = ({
               </button>
               <button
                 type="button"
-                className="py-0.5 px-1.5 text-xs font-medium rounded-full transition-colors cursor-pointer trails-bg-percentage-button trails-text-percentage-button trails-hover-percentage-button"
+                disabled={isFiatAmountLocked}
+                className={`py-0.5 px-1.5 text-xs font-medium rounded-full transition-colors trails-bg-percentage-button trails-text-percentage-button ${
+                  isFiatAmountLocked
+                    ? "opacity-50 cursor-not-allowed"
+                    : "cursor-pointer trails-hover-percentage-button"
+                }`}
                 onClick={() => {
                   if (selectedFiatCurrency?.currencyCode === "USD") {
                     setSellFiatAmount("100")
@@ -2022,7 +2094,7 @@ const Fund: React.FC<FundProps> = ({
                 Receiving
               </span>
             ) : (
-              <RecipientSelectorButton />
+              <RecipientSelectorButton selectedRecipient={selectedRecipient} />
             )}
           </div>
 
@@ -2034,6 +2106,7 @@ const Fund: React.FC<FundProps> = ({
                 <FiatSelectorButton
                   currency={selectedFiatCurrency}
                   onSelect={() => setShowFiatSelector(true)}
+                  unselectable={isFiatCurrencyLocked}
                 />
               ) : prepareSendQuote?.noSufficientBalance ? (
                 // Show "Add funds" button when user has insufficient balance
@@ -2041,7 +2114,7 @@ const Fund: React.FC<FundProps> = ({
                   type="button"
                   onClick={() => {
                     // Navigate to payment selection screen
-                    setCurrentScreen("fund-methods")
+                    navigate("fund-methods")
                   }}
                   className="w-full flex items-center justify-center space-x-1.5 trails-border-radius-input px-2.5 py-1.5 border transition-all duration-200 bg-blue-500 hover:bg-blue-600 border-blue-500 text-white cursor-pointer"
                 >
@@ -2261,7 +2334,7 @@ const Fund: React.FC<FundProps> = ({
                 (!isMeldOnRampActive &&
                   fundMethod !== "direct-transfer" &&
                   prepareSendQuote?.noSufficientBalance) ||
-                (fundMethod !== "direct-transfer" &&
+                (shouldValidateFeeOption &&
                   (selectedFeeOption
                     ? isFeeOptionDisabled(
                         selectedFeeOption as ProcessedFeeOption,