0xtrails 0.2.5 → 0.2.6

package/src/widget/widget.tsx

@@ -4,6 +4,7 @@ import { AaveClient, AaveProvider } from "@aave/react"
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
 import { AnimatePresence, motion } from "motion/react"
 import React, {
+  createContext,
   forwardRef,
   StrictMode,
   useCallback,
@@ -152,9 +153,42 @@ import {
   SelectedFundMethodProvider,
   useSelectedFundMethod,
 } from "./hooks/useSelectedFundMethod.js"
+import { DEFAULT_MODE } from "../constants.js"
 
 export const aaveClient = AaveClient.create()
 
+// Modal Context
+interface ModalContextType {
+  closeModal: () => void
+  isModalOpen: boolean
+}
+
+const ModalContext = createContext<ModalContextType | null>(null)
+
+// Modal Provider Component
+const ModalProvider: React.FC<{
+  children: React.ReactNode
+  closeModal: () => void
+  isModalOpen: boolean
+}> = ({ children, closeModal, isModalOpen }) => (
+  <ModalContext.Provider value={{ closeModal, isModalOpen }}>
+    {children}
+  </ModalContext.Provider>
+)
+
+// useModal Hook
+export const useModal = (): ModalContextType => {
+  const context = useContext(ModalContext)
+  if (!context) {
+    // Return a no-op function when not in modal context (e.g., renderInline)
+    return {
+      closeModal: () => {},
+      isModalOpen: false,
+    }
+  }
+  return context
+}
+
 // Validate toToken - must be "ETH", "USDC", or a valid hex address
 const isValidToToToken = (toToken: string | null | undefined) => {
   if (toToken === null || toToken === undefined || toToken === "") {
@@ -252,7 +286,11 @@ const useWalletManager = (
         if (!connector) {
           return
         }
-        const activeProvider = await connector.getProvider?.()
+        if (typeof connector?.getProvider !== "function") {
+          return
+        }
+
+        const activeProvider = await connector.getProvider()
 
         if (activeProvider && address && chainId) {
           const chain = getChainInfo(chainId)
@@ -428,7 +466,7 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
     toCalldata,
     children,
     renderInline = false,
-    mode = "pay",
+    mode = DEFAULT_MODE,
     onOriginConfirmation,
     onDestinationConfirmation,
     onCheckoutStart,
@@ -448,7 +486,7 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
     decoupleWagmi,
     hideDisconnect,
   } = useWidgetProps()
-  const { address, isConnected, chainId, connector } = useAccount()
+  const { address, chainId, connector } = useAccount()
   // const { setOpenConnectModal } = useOpenConnectModal()
 
   // Helper function to detect if the current connector is a Sequence wallet
@@ -470,6 +508,9 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
   }, [connector])
   const connections = useConnections()
   const { disconnectAsync } = useDisconnect()
+
+  // Check if there are any connected accounts across all connectors
+  const isConnected = connections.length > 0
   const { recentTokens, addRecentToken } = useRecentTokens(address)
   const { wallets: allWallets } = useWallets()
   const { selectedToken, setSelectedToken } = useSelectedToken()
@@ -477,13 +518,8 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
   const [isModalOpen, setIsModalOpen] = useState(false)
   const [currentMode, setCurrentMode] = useState<Mode>(mode)
   const { currentScreen, setCurrentScreen } = useCurrentScreen()
-  const {
-    goBack,
-    clearHistory,
-    isNavigatingBack,
-    setCurrentScreenWithBack,
-    getPreviousScreen,
-  } = useBack()
+  const { goBack, clearHistory, setCurrentScreenWithBack, getPreviousScreen } =
+    useBack()
 
   // Wrapper function that clears errors when going back
   const handleBack = () => {
@@ -532,7 +568,6 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
     number | null
   >(null)
   const { connectAsync } = useConnect()
-  const [isInitialScreenSet, setIsInitialScreenSet] = useState(false)
 
   const getInitialScreenForMode = useCallback((mode: Mode) => {
     if (mode === "swap") {
@@ -546,7 +581,7 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
     } else if (mode === "pay") {
       return "send-form"
     } else {
-      return "account-settings"
+      return "send-form"
     }
   }, [])
 
@@ -556,55 +591,27 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
 
     // If connected, navigate to the appropriate screen for the new mode
     if (isConnected) {
-      const newScreen = getInitialScreenForMode(mode)
-      setCurrentScreen(newScreen)
+      setCurrentScreen("home")
     }
-  }, [mode, isConnected, setCurrentScreen, getInitialScreenForMode])
+  }, [mode, isConnected, setCurrentScreen])
 
-  // Use the simple initial redirect hook
-  const { hasConnectedBefore } = useInitialRedirect(
-    isConnected,
-    currentMode,
-    getInitialScreenForMode,
-  )
+  const goHome = useCallback(() => {
+    const initialScreen = getInitialScreenForMode(currentMode)
+    setCurrentScreen(initialScreen)
+  }, [currentMode, setCurrentScreen, getInitialScreenForMode])
 
-  // Set proper initial screen based on connection state and mode
   useEffect(() => {
-    if (isInitialScreenSet) {
-      return
+    if (currentScreen === "home") {
+      goHome()
     }
+  }, [currentScreen, goHome])
 
-    let properInitialScreen: Screen = "connect"
-
-    if (isConnected) {
-      // For initial load, always go to the appropriate mode screen
-      properInitialScreen = getInitialScreenForMode(currentMode)
-      logger.console.log(
-        "[trails-sdk] Initial load with connected wallet, going to mode screen:",
-        properInitialScreen,
-      )
-    } else if (currentMode === "receive") {
-      properInitialScreen = "receive"
-    }
-
-    // Only update if the current screen is still the default
-    if (currentScreen === "connect" || currentScreen === "receive") {
-      logger.console.log(
-        "[trails-sdk] setting currentScreen to",
-        properInitialScreen,
-      )
-      setCurrentScreen(properInitialScreen)
-    }
-
-    setIsInitialScreenSet(true)
-  }, [
+  // Use the simple initial redirect hook
+  const { hasConnectedBefore } = useInitialRedirect(
     isConnected,
     currentMode,
-    currentScreen,
-    setCurrentScreen,
-    isInitialScreenSet,
     getInitialScreenForMode,
-  ])
+  )
 
   const defaultButtonText = useMemo(() => {
     if (currentMode === "fund") {
@@ -632,11 +639,27 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
     const isValidToToken = isValidToToToken(toToken)
     const isValidToAddress = toAddress ? isAddress(toAddress) : true
 
+    // Validate paymasterUrls - each url must be a valid URL
+    let isValidPaymasterUrls = true
+    let invalidPaymasterUrl = ""
+    if (paymasterUrls && Array.isArray(paymasterUrls)) {
+      for (const paymaster of paymasterUrls) {
+        try {
+          new URL(paymaster.url)
+        } catch {
+          isValidPaymasterUrls = false
+          invalidPaymasterUrl = paymaster.url
+          break
+        }
+      }
+    }
+
     if (
       isValidToAmount &&
       isValidToChainId &&
       isValidToToken &&
-      isValidToAddress
+      isValidToAddress &&
+      isValidPaymasterUrls
     ) {
       setError(null)
       return
@@ -680,6 +703,17 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
         toAddress,
       )
       setError("Invalid toAddress: must be a valid hex address")
+      return
+    }
+
+    // Validate paymasterUrls
+    if (!isValidPaymasterUrls) {
+      logger.console.error(
+        "[trails-sdk] Invalid paymasterUrls prop: url must be a valid URL. Received:",
+        invalidPaymasterUrl,
+      )
+      setError("Invalid paymasterUrls: url must be a valid URL")
+      return
     }
 
     if (currentMode === "fund") {
@@ -706,7 +740,7 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
         return
       }
     }
-  }, [toAmount, toChainId, toToken, currentMode, toAddress])
+  }, [toAmount, toChainId, toToken, currentMode, toAddress, paymasterUrls])
 
   const walletClient = useWalletManager(address, chainId, connector)
 
@@ -857,28 +891,6 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
     isConnected,
   })
 
-  // Simple post-connection navigation - let the hook handle the logic
-  useEffect(() => {
-    if (isNavigatingBack) {
-      return
-    }
-
-    // Handle disconnection
-    if (!isConnected) {
-      if (
-        currentScreen !== "connect" &&
-        currentScreen !== "wallet-connect" &&
-        currentScreen !== "wallet-list" &&
-        currentScreen !== "wallet-connection-pending" &&
-        currentScreen !== "receive"
-      ) {
-        setTimeout(() => {
-          setCurrentScreen("connect")
-        }, 0)
-      }
-    }
-  }, [isConnected, currentScreen, isNavigatingBack, setCurrentScreen])
-
   // Auto-detect mode changes and switch screens accordingly
   useEffect(() => {
     if (
@@ -1017,21 +1029,14 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
         // Check if this is the first wallet connection
         if (!hasConnectedBefore) {
           // First connection - go to initial screen for the mode
-          const initialScreen = getInitialScreenForMode(currentMode)
-          logger.console.log(
-            "[trails-sdk] First wallet connection, going to initial screen:",
-            initialScreen,
-          )
-          setCurrentScreen(initialScreen)
+          logger.console.log("[trails-sdk] First wallet connection, going home")
+          goHome()
         } else {
-          // Subsequent connection - go to account-settings
+          // Subsequent connection - go to home which will route to the appropriate screen
           logger.console.log(
-            "[trails-sdk] Subsequent wallet connection, going to account-settings",
-          )
-          setCurrentScreenWithBack(
-            "account-settings",
-            getInitialScreenForMode(currentMode),
+            "[trails-sdk] Subsequent wallet connection, going to home",
           )
+          goHome()
         }
       } else if (config.connector === walletConnectConnector) {
         // Store the current connector as previous before switching to WalletConnect
@@ -1191,7 +1196,7 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
   const resetState = useCallback(() => {
     setSelectedFundMethod("wallet")
     // Reset to appropriate screen based on mode
-    setCurrentScreen(currentMode === "receive" ? "receive" : "connect")
+    setCurrentScreen("home")
     setSelectedToken(null)
     setSelectedPool(null)
     setSelectedWalletId(null)
@@ -1215,7 +1220,6 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
     setOriginChainId,
     setSelectedToken,
     setSelectedPool,
-    currentMode,
     setCurrentScreen,
     clearHistory,
   ])
@@ -1588,12 +1592,11 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
             onSelectExchangeList={handleSelectExchangeList}
             onSelectConnectedAccount={() => {
               setSelectedFundMethod("connected-account")
-              const initialScreen = getInitialScreenForMode(currentMode)
-              setCurrentScreen(initialScreen)
+              setCurrentScreen("home")
             }}
             onSelectQrCode={() => {
               setSelectedFundMethod("qr-code")
-              setCurrentScreen(getInitialScreenForMode(currentMode))
+              setCurrentScreen("home")
             }}
           />
         )
@@ -1613,14 +1616,14 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
           />
         )
       case "send-form":
-        return walletClient?.account ? (
+        return (
           <Pay
             selectedToken={selectedToken}
             onSend={handleOnSend}
             onWaitingForWalletConfirm={handleWaitingForWalletConfirm}
             onConfirm={() => setCurrentScreen("pending")}
             onComplete={handleTransferComplete}
-            account={walletClient.account}
+            account={walletClient?.account}
             toRecipient={
               selectedPool
                 ? selectedPool.depositAddress
@@ -1640,7 +1643,7 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
             toCalldata={
               selectedPool ? generatedCalldata : toCalldata || undefined
             }
-            walletClient={walletClient}
+            walletClient={walletClient ?? undefined}
             isSequenceWallet={isSequenceWallet}
             onTransactionStateChange={handleTransactionStateChange}
             onError={handleSendError}
@@ -1681,26 +1684,22 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
             onRecentTokenSelect={handleRecentTokenSelect}
             onTrackToken={handleTrackToken}
           />
-        ) : (
-          <div className="text-center p-4 rounded-lg text-gray-600 bg-gray-50 dark:text-gray-300 dark:bg-gray-800">
-            Please connect wallet
-          </div>
         )
       case "fund-form":
-        return walletClient?.account ? (
+        return (
           <Fund
             selectedToken={selectedToken}
             onSend={handleOnSend}
             onWaitingForWalletConfirm={handleWaitingForWalletConfirm}
             onConfirm={() => setCurrentScreen("pending")}
             onComplete={handleTransferComplete}
-            account={walletClient.account}
+            account={walletClient?.account}
             toAmount={toAmount || undefined}
             toRecipient={toAddress || undefined}
             toChainId={toChainId ? Number(toChainId) : undefined}
             toToken={toToken || undefined}
             toCalldata={toCalldata || undefined}
-            walletClient={walletClient}
+            walletClient={walletClient ?? undefined}
             isSequenceWallet={isSequenceWallet}
             onTransactionStateChange={handleTransactionStateChange}
             onError={handleSendError}
@@ -1715,10 +1714,6 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
             onRecentTokenSelect={handleRecentTokenSelect}
             onTrackToken={handleTrackToken}
           />
-        ) : (
-          <div className="text-center p-4 rounded-lg text-gray-600 bg-gray-50 dark:text-gray-300 dark:bg-gray-800">
-            Please connect wallet
-          </div>
         )
       case "wallet-confirmation":
         return (
@@ -1821,11 +1816,11 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
           />
         )
       case "earn":
-        return walletClient?.account ? (
+        return (
           <Earn
             onContinue={() => setCurrentScreen("send-form")}
-            account={walletClient.account}
-            walletClient={walletClient}
+            account={walletClient?.account}
+            walletClient={walletClient ?? undefined}
             onTransactionStateChange={handleTransactionStateChange}
             onError={handleSendError}
             onWaitingForWalletConfirm={handleWaitingForWalletConfirm}
@@ -1843,10 +1838,6 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
             onRecentTokenSelect={handleRecentTokenSelect}
             onTrackToken={handleTrackToken}
           />
-        ) : (
-          <div className="text-center p-4 rounded-lg text-gray-600 bg-gray-50 dark:text-gray-300 dark:bg-gray-800">
-            Please connect wallet
-          </div>
         )
       case "earn-pools":
         return (
@@ -1860,20 +1851,20 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
           />
         )
       case "swap":
-        return walletClient?.account ? (
+        return (
           <Swap
             onSend={handleOnSend}
             onWaitingForWalletConfirm={handleWaitingForWalletConfirm}
             onConfirm={() => setCurrentScreen("pending")}
             onComplete={handleTransferComplete}
             selectedToken={selectedToken}
-            account={walletClient.account}
+            account={walletClient?.account}
             toRecipient={toAddress || undefined}
             toAmount={toAmount || undefined}
             toChainId={toChainId ? Number(toChainId) : undefined}
             toToken={toToken || undefined}
             toCalldata={toCalldata || undefined}
-            walletClient={walletClient}
+            walletClient={walletClient ?? undefined}
             isSequenceWallet={isSequenceWallet}
             onTransactionStateChange={handleTransactionStateChange}
             onError={handleSendError}
@@ -1889,10 +1880,6 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
             onRecentTokenSelect={handleRecentTokenSelect}
             onTrackToken={handleTrackToken}
           />
-        ) : (
-          <div className="text-center p-4 rounded-lg text-gray-600 bg-gray-50 dark:text-gray-300 dark:bg-gray-800">
-            Please connect wallet
-          </div>
         )
       case "receive":
         return (
@@ -1928,6 +1915,10 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
           />
         )
       case "account-settings":
+        if (!isConnected) {
+          setCurrentScreen("connect")
+          return
+        }
         return <AccountSettings onBack={handleBack} />
       case "user-preferences":
         return <UserPreferences onBack={handleBack} />
@@ -1943,16 +1934,9 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
           />
         )
       case "mesh-connect-exchanges":
-        return (
-          <MeshConnectExchanges
-            onBack={handleBack}
-            getInitialScreenForMode={getInitialScreenForMode}
-          />
-        )
+        return <MeshConnectExchanges onBack={handleBack} />
       case "home": {
-        // Redirect to the appropriate screen for the current mode
-        const homeScreen = getInitialScreenForMode(currentMode)
-        setCurrentScreen(homeScreen)
+        // Navigation handled by useEffect above, otherwise it would cause a loop
         return null
       }
       default:
@@ -1962,68 +1946,70 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
 
   const renderScreen = () => {
     return (
-      <ModeProvider
-        value={{
-          mode: currentMode,
-        }}
-      >
-        <PriceImpactWarningProvider
+      <ModalProvider closeModal={handleCloseModal} isModalOpen={isModalOpen}>
+        <ModeProvider
           value={{
-            thresholdBps: priceImpactWarningThresholdBps,
-            warningMessage: priceImpactWarningMessage,
-            fallbackBridgeUrl: priceImpactFallbackBridgeUrl,
+            mode: currentMode,
           }}
         >
-          <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,
+          <PriceImpactWarningProvider
+            value={{
+              thresholdBps: priceImpactWarningThresholdBps,
+              warningMessage: priceImpactWarningMessage,
+              fallbackBridgeUrl: priceImpactFallbackBridgeUrl,
             }}
-            className="flex flex-col min-h-[400px] shadow-xl p-4 sm:p-6 relative w-full 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"
-                layout
-              >
-                {renderScreenContent()}
-                {/* Error Display */}
-                {error && (
-                  <div className="mt-2">
-                    <ErrorDisplay
-                      errorPrettified={getPrettifiedErrorMessage(
-                        error,
-                        "An error occured",
-                      )}
-                      error={error}
-                      severity="error"
-                    />
-                  </div>
-                )}
-              </motion.div>
-            </AnimatePresence>
-            <Footer onDebugScreenSelect={handleDebugScreenSelect} />
-          </motion.div>
-        </PriceImpactWarningProvider>
-      </ModeProvider>
+            <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 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"
+                  layout
+                >
+                  {renderScreenContent()}
+                  {/* Error Display */}
+                  {error && (
+                    <div className="mt-2">
+                      <ErrorDisplay
+                        errorPrettified={getPrettifiedErrorMessage(
+                          error,
+                          "An error occured",
+                        )}
+                        error={error}
+                        severity="error"
+                      />
+                    </div>
+                  )}
+                </motion.div>
+              </AnimatePresence>
+              <Footer onDebugScreenSelect={handleDebugScreenSelect} />
+            </motion.div>
+          </PriceImpactWarningProvider>
+        </ModeProvider>
+      </ModalProvider>
     )
   }
 
@@ -2069,8 +2055,7 @@ const WidgetInner = forwardRef<TrailsWidgetRef, TrailsWidgetProps>(
     // Calculate initial screen based on mode and connection state
     // Note: We can't use useAccount here as it needs to be inside WagmiProvider
     // So we'll use a default and let the WidgetContent handle the logic
-    const initialScreen: Screen =
-      props.mode === "receive" ? "receive" : "connect"
+    const initialScreen: Screen = "home"
 
     return (
       <WidgetPropsProvider props={props}>
@@ -2160,7 +2145,7 @@ export const TrailsWidget = forwardRef<TrailsWidgetRef, TrailsWidgetProps>(
       logger.console.log("props.slippageTolerance", props.slippageTolerance)
       setSlippageTolerance(String(props.slippageTolerance))
     }
-    if (typeof props.debug === "boolean" && props.debug === getDebug()) {
+    if (typeof props.debug === "boolean" && props.debug !== getDebug()) {
       logger.console.log("props.debug", props.debug)
       setDebug(props.debug)
     }