0xtrails 0.2.0 → 0.2.1

package/src/widget/components/MeshConnectFlow.tsx

@@ -1,7 +1,8 @@
 import type React from "react"
-import { useState } from "react"
+import { useState, useEffect } from "react"
 import { MeshConnectExchanges } from "./MeshConnectExchanges.js"
 import { MeshConnectIframe } from "./MeshConnectIframe.js"
+import type { SelectedMeshExchange } from "../hooks/useSelectedMeshExchange.js"
 
 export interface MeshConnectFlowProps {
   onBack?: () => void
@@ -10,6 +11,7 @@ export interface MeshConnectFlowProps {
   toTokenAmount?: string
   toChainId?: number
   toRecipientAddress?: string
+  selectedExchange?: SelectedMeshExchange | null
 }
 
 type Screen = "exchanges" | "connect"
@@ -21,10 +23,27 @@ export const MeshConnectFlow: React.FC<MeshConnectFlowProps> = ({
   toTokenAmount,
   toChainId,
   toRecipientAddress,
+  selectedExchange,
 }) => {
-  const [currentScreen, setCurrentScreen] = useState<Screen>("exchanges")
-  const [selectedIntegrationId, setSelectedIntegrationId] = useState<string>("")
-  const [selectedExchangeName, setSelectedExchangeName] = useState<string>("")
+  // If an exchange is already selected, start on the connect screen
+  const [currentScreen, setCurrentScreen] = useState<Screen>(
+    selectedExchange ? "connect" : "exchanges",
+  )
+  const [selectedIntegrationId, setSelectedIntegrationId] = useState<string>(
+    selectedExchange?.integrationId || "",
+  )
+  const [selectedExchangeName, setSelectedExchangeName] = useState<string>(
+    selectedExchange?.exchangeName || "",
+  )
+
+  // Update state when selectedExchange prop changes
+  useEffect(() => {
+    if (selectedExchange) {
+      setSelectedIntegrationId(selectedExchange.integrationId)
+      setSelectedExchangeName(selectedExchange.exchangeName)
+      setCurrentScreen("connect")
+    }
+  }, [selectedExchange])
 
   const handleSelectExchange = (
     integrationId: string,

package/src/widget/components/NativeGasOption.tsx

@@ -0,0 +1,99 @@
+import type React from "react"
+import { getChainInfo } from "../../chains.js"
+import { TokenImage } from "./TokenImage.js"
+import { getTokenImageUrl } from "../../tokens.js"
+import { zeroAddress } from "viem"
+
+interface NativeGasOptionProps {
+  isSelected: boolean
+  gasCostUsdDisplay?: string
+  gasCostNativeDisplay?: string
+  onClick: () => void
+  chainId?: number
+  notEnoughBalance?: boolean
+}
+
+export const NativeGasOption: React.FC<NativeGasOptionProps> = ({
+  isSelected,
+  gasCostUsdDisplay,
+  gasCostNativeDisplay,
+  onClick,
+  chainId,
+  notEnoughBalance = false,
+}) => {
+  // Helper function to get native symbol for a chain
+  const getNativeSymbol = (chainId?: number) => {
+    if (!chainId) return "ETH"
+    const chainInfo = getChainInfo(chainId)
+    return chainInfo?.nativeCurrency.symbol || "ETH"
+  }
+
+  const nativeSymbol = getNativeSymbol(chainId)
+  const nativeImageUrl = getTokenImageUrl({
+    chainId,
+    contractAddress: zeroAddress,
+    symbol: nativeSymbol,
+  })
+
+  return (
+    <button
+      type="button"
+      className={`w-full flex items-center justify-between p-1.5 trails-border-radius-input border transition-colors ${
+        notEnoughBalance
+          ? "cursor-not-allowed opacity-50 bg-gray-100 dark:bg-gray-800 border-gray-300 dark:border-gray-600"
+          : isSelected
+            ? "cursor-pointer trails-bg-primary/10 border-blue-500 bg-blue-50 dark:bg-blue-900/20"
+            : "cursor-pointer trails-bg-card trails-border-primary hover:trails-hover-bg"
+      }`}
+      onClick={notEnoughBalance ? undefined : onClick}
+      disabled={notEnoughBalance}
+    >
+      <div className="flex items-center space-x-2">
+        <TokenImage
+          imageUrl={nativeImageUrl}
+          symbol={nativeSymbol}
+          chainId={chainId}
+          size={16}
+        />
+        <div className="text-left">
+          <div
+            className={`text-xs font-medium ${
+              notEnoughBalance
+                ? "text-gray-400 dark:text-gray-500"
+                : "trails-text-primary"
+            }`}
+          >
+            {nativeSymbol}
+          </div>
+        </div>
+      </div>
+
+      <div className="text-right">
+        {gasCostNativeDisplay && (
+          <div
+            className={`text-xs font-medium ${
+              notEnoughBalance
+                ? "text-gray-400 dark:text-gray-500"
+                : "trails-text-primary"
+            }`}
+          >
+            {gasCostNativeDisplay}
+          </div>
+        )}
+        {gasCostUsdDisplay && (
+          <div
+            className={`text-xs ${
+              notEnoughBalance
+                ? "text-gray-400 dark:text-gray-500"
+                : "trails-text-muted"
+            }`}
+          >
+            {gasCostUsdDisplay}
+          </div>
+        )}
+      </div>
+    </button>
+  )
+}
+
+export default NativeGasOption

package/src/widget/components/Pay.tsx

@@ -16,6 +16,7 @@ import { useMode } from "../hooks/useMode.js"
 import { useCurrentScreen } from "../hooks/useCurrentScreen.js"
 import { useDefaultTokenSelection } from "../hooks/useDefaultTokenSelection.js" // Context version
 import { usePayMessage } from "../hooks/usePayMessage.js"
+import { useTargetAmount } from "../hooks/useTargetAmount.js"
 import { TokenImage } from "./TokenImage.js"
 import { Identicon } from "./Identicon.js"
 import { TokenSelector } from "./TokenSelector.js"
@@ -24,8 +25,7 @@ import { ChainList } from "./ChainList.js"
 import { QuoteDetails } from "./QuoteDetails.js"
 import { ErrorDisplay } from "./ErrorDisplay.js"
 import { getChainInfo } from "../../chains.js"
-import { formatUsdAmountDisplay } from "../../tokenBalances.js"
-import { MINIMUM_USD_AMOUNT_FOR_SWAP } from "../../constants.js"
+import { FeeOptions } from "./FeeOptions.js"
 import { truncateAddress } from "../../utils.js"
 import type { PrepareSendQuote } from "../../prepareSend.js"
 import type { SupportedToken } from "../../tokens.js"
@@ -107,6 +107,7 @@ export const Pay: React.FC<PayProps> = ({
   const { selectedRecipient, setSelectedRecipient } = useSelectedRecipient()
   const { setAmount: setGlobalAmount } = useSwapAmount()
   const { setCurrentScreen } = useCurrentScreen()
+  const { targetAmountUsd } = useTargetAmount()
 
   // Use new default token selection hook
   const {
@@ -131,6 +132,7 @@ export const Pay: React.FC<PayProps> = ({
   const [showDestinationChainList, setShowDestinationChainList] =
     useState(false)
   const inputRef = useRef<HTMLInputElement>(null)
+  const paymentRequestInputRef = useRef<HTMLInputElement>(null)
   const lastAutoSelectedRef = useRef<string | null>(null)
 
   // Get sorted tokens to auto-select origin and destination tokens
@@ -156,11 +158,13 @@ export const Pay: React.FC<PayProps> = ({
     setSelectedDestinationChain,
     quoteError,
     quoteErrorPrettified,
-    isSameTokenWithoutCustomCalldata,
     destinationTokenAddress,
     isValidCustomToken,
     isSenderContractOnOrigin,
     isSenderContractOnDestination,
+    feeOptions,
+    selectedFeeToken,
+    setSelectedFeeToken,
   } = useSendForm({
     account,
     toAmount: tokenAmountForBackend || toAmount, // Use the input amount as target amount for EXACT_OUTPUT
@@ -519,6 +523,7 @@ export const Pay: React.FC<PayProps> = ({
         />
         <TokenSelector
           onTokenSelect={handleOriginTokenSelect}
+          targetAmountUsd={targetAmountUsd}
           onError={onError}
           fundMethod={fundMethod}
           showContinueButton={false}
@@ -565,6 +570,7 @@ export const Pay: React.FC<PayProps> = ({
         />
         <TokenSelector
           onTokenSelect={handleDestinationTokenSelect}
+          targetAmountUsd={targetAmountUsd}
           onError={onError}
           fundMethod={fundMethod}
           showContinueButton={false}
@@ -628,15 +634,24 @@ export const Pay: React.FC<PayProps> = ({
               <div className="flex justify-between items-center mb-2">
                 <div className="text-sm font-bold trails-text-secondary text-left">
                   Pay with
+                  {fundMethod === "qr-code"
+                    ? " QR Code"
+                    : fundMethod === "exchange"
+                      ? " Exchange"
+                      : ""}
                 </div>
               </div>
 
               <div className="flex items-center space-x-2">
                 {/* Amount Display - Non-editable */}
                 <div className="flex-1">
-                  <div className="flex items-center justify-start">
+                  <div
+                    className="flex items-center justify-start cursor-text"
+                    onClick={() => paymentRequestInputRef.current?.focus()}
+                  >
                     <div className="flex items-center">
                       <input
+                        ref={paymentRequestInputRef}
                         type="text"
                         value={prepareSendQuote?.originAmountFormatted || ""}
                         readOnly={true}
@@ -803,6 +818,11 @@ export const Pay: React.FC<PayProps> = ({
                 <div className="text-left">
                   <div className="font-medium trails-text-primary text-sm">
                     Pay with
+                    {fundMethod === "qr-code"
+                      ? " QR Code"
+                      : fundMethod === "exchange"
+                        ? " Exchange"
+                        : ""}
                   </div>
                 </div>
 
@@ -857,7 +877,10 @@ export const Pay: React.FC<PayProps> = ({
               <div className="flex items-center space-x-2">
                 {/* Amount Input */}
                 <div className="flex-1">
-                  <div className="flex items-center justify-start">
+                  <div
+                    className="flex items-center justify-start cursor-text"
+                    onClick={() => inputRef.current?.focus()}
+                  >
                     <div className="flex items-center">
                       <input
                         ref={inputRef}
@@ -1007,32 +1030,16 @@ export const Pay: React.FC<PayProps> = ({
             </p>
           </div>
         </div>
-      ) : prepareSendQuote?.minimumNotMet ? (
-        <div className="px-2 py-3 rounded-lg bg-amber-500/10 border border-solid border-amber-500/30">
-          <div className="flex items-center space-x-2">
-            <svg
-              className="w-4 h-4 text-amber-500 flex-shrink-0"
-              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>
-            <p className="text-sm text-amber-600 dark:text-amber-400">
-              Please enter an amount above{" "}
-              {formatUsdAmountDisplay(MINIMUM_USD_AMOUNT_FOR_SWAP)} otherwise
-              transfer may fail
-            </p>
-          </div>
-        </div>
       ) : null}
 
+      {/* Fee Options */}
+      <FeeOptions
+        feeOptions={feeOptions || []}
+        selectedFeeToken={selectedFeeToken}
+        setSelectedFeeToken={(token) => setSelectedFeeToken(token as any)}
+        chainId={originToken?.chainId}
+      />
+
       {/* Pay Button */}
       <form onSubmit={handleSubmit}>
         <button
@@ -1046,7 +1053,6 @@ export const Pay: React.FC<PayProps> = ({
             !destinationTokenAddress ||
             !isValidCustomToken ||
             prepareSendQuote?.noSufficientBalance ||
-            isSameTokenWithoutCustomCalldata ||
             !prepareSendQuote
           }
           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"
@@ -1056,8 +1062,6 @@ export const Pay: React.FC<PayProps> = ({
               <Loader2 className="w-5 h-5 animate-spin mr-2" />
               <span>{buttonText}</span>
             </div>
-          ) : isSameTokenWithoutCustomCalldata ? (
-            "Select Different Tokens"
           ) : prepareSendQuote?.noSufficientBalance ? (
             "Insufficient Balance"
           ) : !selectedRecipient ? (

package/src/widget/components/PaySendForm.tsx

@@ -8,7 +8,6 @@ import type { OnCompleteProps, Token, TokenInfo } from "../hooks/useSendForm.js"
 import { useSendForm } from "../hooks/useSendForm.js"
 import type { CheckoutOnHandlers } from "../hooks/useCheckout.js"
 import { ChainImage } from "./ChainImage.js"
-import { FeeOptions } from "./FeeOptions.js"
 import { TokenImage } from "./TokenImage.js"
 import { QuoteDetails } from "./QuoteDetails.js"
 import { TruncatedAddress } from "./TruncatedAddress.js"
@@ -18,8 +17,6 @@ import { getChainInfo, getChainColor } from "../../chains.js"
 import { formatTvl } from "../../prices.js"
 import aaveLogo from "../assets/aave.svg"
 import morphoLogo from "../assets/morpho.svg"
-import { formatUsdAmountDisplay } from "../../tokenBalances.js"
-import { MINIMUM_USD_AMOUNT_FOR_SWAP } from "../../constants.js"
 import { ScreenHeader } from "./ScreenHeader.js"
 import { ErrorDisplay } from "./ErrorDisplay.js"
 import { useMode } from "../hooks/useMode.js"
@@ -136,9 +133,6 @@ export const PaySendForm: React.FC<PaySendFormProps> = ({
     buttonText,
     isValidRecipient,
     ensAddress,
-    selectedFeeToken,
-    setSelectedFeeToken,
-    feeOptions,
     supportedTokens,
     setIsChainDropdownOpen,
     setIsTokenDropdownOpen,
@@ -744,13 +738,6 @@ export const PaySendForm: React.FC<PaySendFormProps> = ({
           chainId={selectedDestinationChain.id}
         /> */}
 
-        {/* Fee Options */}
-        <FeeOptions
-          options={feeOptions}
-          selectedOption={selectedFeeToken ?? undefined}
-          onSelect={setSelectedFeeToken}
-        />
-
         {/* Warning Messages - Show only one at a time */}
         {isSameTokenWithoutCustomCalldata ? (
           <ErrorDisplay
@@ -786,30 +773,6 @@ export const PaySendForm: React.FC<PaySendFormProps> = ({
               </p>
             </div>
           </div>
-        ) : prepareSendQuote?.minimumNotMet ? (
-          <div className="px-2 py-3 rounded-lg bg-amber-500/10 border border-solid border-amber-500/30">
-            <div className="flex items-center space-x-2">
-              <svg
-                className="w-4 h-4 text-amber-500 flex-shrink-0"
-                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>
-              <p className="text-sm text-amber-600 dark:text-amber-400">
-                Please enter an amount above{" "}
-                {formatUsdAmountDisplay(MINIMUM_USD_AMOUNT_FOR_SWAP)} otherwise
-                transfer may fail
-              </p>
-            </div>
-          </div>
         ) : null}
 
         <button

package/src/widget/components/QuoteDetails.tsx

@@ -271,35 +271,6 @@ export const QuoteDetails: React.FC<QuoteDetailsProps> = ({
               </div>
             )}
 
-            {/* Minimum Amount Warning */}
-            {quote?.minimumNotMet && (
-              <div className="flex justify-between items-center">
-                <span className="text-xs text-amber-600 dark:text-amber-400 flex items-center gap-1">
-                  Minimum Not Met:
-                  <Tooltip message="The transaction amount is below the minimum threshold and may fail">
-                    <InfoIcon className="w-3 h-3 text-amber-500 dark:text-amber-400 cursor-pointer" />
-                  </Tooltip>
-                </span>
-                <span className="font-medium text-xs text-amber-600 dark:text-amber-400 flex items-center gap-1">
-                  <svg
-                    className="w-3 h-3"
-                    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>
-                  Transfer may fail
-                </span>
-              </div>
-            )}
-
             {quote?.originTokenRate && quote?.destinationTokenRate && (
               <div className="flex justify-between items-center">
                 <span className="text-xs text-gray-600 dark:text-gray-400 flex items-center gap-1">

package/src/widget/components/TokenSelector.tsx

@@ -477,6 +477,17 @@ export const TokenSelector: React.FC<TokenSelectorProps> = ({
         </div>
       )}
 
+      {/* Fund method label */}
+      {(fundMethod === "qr-code" || fundMethod === "exchange") && (
+        <div className="text-center pt-2 pb-1">
+          <p className="text-sm font-medium text-gray-600 dark:text-gray-400">
+            {fundMethod === "qr-code"
+              ? "Paying with QR Code Deposit"
+              : "Paying with Exchange Deposit"}
+          </p>
+        </div>
+      )}
+
       {/* Pay with another method button */}
       {onNavigateToFundMethods && !isLoadingTokens && (
         <div className="text-center pt-1">

package/src/widget/components/TransferPendingVertical.tsx

@@ -368,7 +368,7 @@ export const TransferPending: React.FC<TransferPendingProps> = ({
           headerContent={
             mode === "swap" ? "Swap in progress" : "Transaction Status"
           }
-          headerContentAlign="left"
+          headerContentAlign="center"
         />
       </div>
 

package/src/widget/components/UserPreferences.tsx

@@ -14,8 +14,7 @@ interface UserPreferencesProps {
 export const UserPreferences: React.FC<UserPreferencesProps> = ({ onBack }) => {
   const { isBalanceVisible, toggleBalanceVisible, resetBalanceVisible } =
     useBalanceVisible()
-  const { isSimpleSwapMode, toggleSimpleSwapMode, resetSwapSettings } =
-    useSwapSettings()
+  const { resetSwapSettings } = useSwapSettings()
   const { selectedTheme, setSelectedTheme, resetThemePreference } =
     useThemePreference()
   const { customCss, theme: widgetTheme } = useWidgetProps()
@@ -77,7 +76,7 @@ export const UserPreferences: React.FC<UserPreferencesProps> = ({ onBack }) => {
         </div>
 
         {/* Simple Swap UI Setting */}
-        <div className="flex items-center justify-between">
+        {/* <div className="flex items-center justify-between">
           <span className="text-sm font-medium text-gray-900 dark:text-gray-100">
             Simple Swap UI
           </span>
@@ -94,7 +93,7 @@ export const UserPreferences: React.FC<UserPreferencesProps> = ({ onBack }) => {
               }`}
             />
           </button>
-        </div>
+        </div> */}
 
         {/* Theme Setting */}
         <div className="flex items-center justify-between">

package/src/widget/hooks/useBack.tsx

@@ -8,6 +8,7 @@ interface BackContextType {
   canGoBack: boolean
   clearHistory: () => void
   isNavigatingBack: boolean
+  getHistory: () => Screen[]
 }
 
 const BackContext = createContext<BackContextType | null>(null)
@@ -83,11 +84,14 @@ export function BackProvider({ children }: BackProviderProps) {
     setHistory([currentScreen])
   }
 
+  const getHistory = () => history
+
   const value: BackContextType = {
     goBack,
     canGoBack,
     clearHistory,
     isNavigatingBack,
+    getHistory,
   }
 
   return <BackContext.Provider value={value}>{children}</BackContext.Provider>

package/src/widget/hooks/useCurrentScreen.tsx

@@ -16,6 +16,7 @@ export type Screen =
   | "pending"
   | "receipt"
   | "mesh-connect"
+  | "mesh-connect-exchanges"
   | "wallet-connect"
   | "wallet-list"
   | "wallet-connection-pending"

package/src/widget/hooks/useDefaultTokenSelection.tsx

@@ -12,7 +12,6 @@ import { useIndexerGatewayClient } from "../../indexerClient.js"
 import { useSupportedTokens } from "../../tokens.js"
 import { getChainInfo } from "../../chains.js"
 import { logger } from "../../logger.js"
-import { MINIMUM_USD_AMOUNT_FOR_SWAP } from "../../constants.js"
 
 const MINIMUM_24H_VOLUME_USD = 1_000_000 // $1M
 
@@ -253,9 +252,8 @@ function useDefaultTokenSelectionInternal(): UseDefaultTokenSelectionReturn {
     if (toToken && toChainId) {
       const targetChainId = Number(toChainId)
 
-      // Use targetAmountUsd if available, otherwise use minimum amount for swap when toToken is set
-      const effectiveTargetAmount =
-        targetAmountUsd ?? Number(MINIMUM_USD_AMOUNT_FOR_SWAP)
+      // Use targetAmountUsd if available, otherwise use a minimal threshold when toToken is set
+      const effectiveTargetAmount = targetAmountUsd ?? 0.01
 
       // Filter tokens that can cover the target amount
       const tokensWithSufficientBalance = tokensWithBalance.filter(
@@ -428,9 +426,7 @@ function useDefaultTokenSelectionInternal(): UseDefaultTokenSelectionReturn {
       toChainId,
       targetAmountUsd,
       effectiveTargetAmount:
-        toToken && toChainId
-          ? (targetAmountUsd ?? Number(MINIMUM_USD_AMOUNT_FOR_SWAP))
-          : null,
+        toToken && toChainId ? (targetAmountUsd ?? 0.01) : null,
     })
 
     return {