0xtrails 0.12.2 → 0.13.0

package/src/widget/components/WidgetProviders.tsx

@@ -2,8 +2,6 @@ import type { ReactNode } from "react"
 import type { TrailsWidgetProps } from "../widget.js"
 import { WidgetPropsProvider } from "../hooks/useWidgetProps.js"
 import { ToastProvider } from "./Toast.js"
-import { CurrentScreenProvider } from "../hooks/useCurrentScreen.js"
-import { BackProvider } from "../hooks/useBack.js"
 import { WalletConnectionProvider } from "../hooks/useWalletConnectionContext.js"
 import { OriginSelectedTokenProvider } from "../hooks/useOriginSelectedToken.js"
 import { DestinationSelectedTokenProvider } from "../hooks/useDestinationSelectedToken.js"
@@ -19,9 +17,8 @@ import { DisplayCurrencyPreferenceProvider } from "../hooks/useDisplayCurrencyPr
 import { SelectedFundMethodProvider } from "../hooks/useSelectedFundMethod.js"
 import { EarnPoolProvider } from "../hooks/useEarnPool.js"
 import { SwapStateProvider } from "../hooks/useSwapState.js"
-import { PreviousScreenProvider } from "../hooks/usePreviousScreen.js"
-import { ModeProvider } from "../hooks/useMode.js"
 import { DEFAULT_MODE } from "../../constants.js"
+import { ViewManagerProvider } from "../hooks/useViewManager.js"
 
 // Default props for hook modal (minimal required config)
 const DEFAULT_HOOK_MODAL_PROPS: TrailsWidgetProps = {
@@ -45,47 +42,41 @@ export function WidgetProviders({
 }: WidgetProvidersProps) {
   return (
     <WidgetPropsProvider props={props}>
-      <ModeProvider configuredMode={props?.mode ?? DEFAULT_MODE}>
+      <ViewManagerProvider configuredMode={props?.mode ?? DEFAULT_MODE}>
         <ToastProvider>
-          <CurrentScreenProvider initialScreen="home">
-            <PreviousScreenProvider>
-              <BackProvider>
-                <WalletConnectionProvider>
-                  <OriginSelectedTokenProvider>
-                    <DestinationSelectedTokenProvider>
-                      <FiatSelectedCurrencyProvider>
-                        <SelectedFeeOptionProvider>
-                          <SelectedRecipientProvider>
-                            <SwapAmountProvider>
-                              <SwapStateProvider>
-                                <ChainFilterProvider>
-                                  <BalanceVisibleProvider>
-                                    <ThemePreferenceProvider>
-                                      <LocalePreferenceProvider>
-                                        <DisplayCurrencyPreferenceProvider>
-                                          <SelectedFundMethodProvider>
-                                            <EarnPoolProvider>
-                                              {children}
-                                            </EarnPoolProvider>
-                                          </SelectedFundMethodProvider>
-                                        </DisplayCurrencyPreferenceProvider>
-                                      </LocalePreferenceProvider>
-                                    </ThemePreferenceProvider>
-                                  </BalanceVisibleProvider>
-                                </ChainFilterProvider>
-                              </SwapStateProvider>
-                            </SwapAmountProvider>
-                          </SelectedRecipientProvider>
-                        </SelectedFeeOptionProvider>
-                      </FiatSelectedCurrencyProvider>
-                    </DestinationSelectedTokenProvider>
-                  </OriginSelectedTokenProvider>
-                </WalletConnectionProvider>
-              </BackProvider>
-            </PreviousScreenProvider>
-          </CurrentScreenProvider>
+          <WalletConnectionProvider>
+            <OriginSelectedTokenProvider>
+              <DestinationSelectedTokenProvider>
+                <FiatSelectedCurrencyProvider>
+                  <SelectedFeeOptionProvider>
+                    <SelectedRecipientProvider>
+                      <SwapAmountProvider>
+                        <SwapStateProvider>
+                          <ChainFilterProvider>
+                            <BalanceVisibleProvider>
+                              <ThemePreferenceProvider>
+                                <LocalePreferenceProvider>
+                                  <DisplayCurrencyPreferenceProvider>
+                                    <SelectedFundMethodProvider>
+                                      <EarnPoolProvider>
+                                        {children}
+                                      </EarnPoolProvider>
+                                    </SelectedFundMethodProvider>
+                                  </DisplayCurrencyPreferenceProvider>
+                                </LocalePreferenceProvider>
+                              </ThemePreferenceProvider>
+                            </BalanceVisibleProvider>
+                          </ChainFilterProvider>
+                        </SwapStateProvider>
+                      </SwapAmountProvider>
+                    </SelectedRecipientProvider>
+                  </SelectedFeeOptionProvider>
+                </FiatSelectedCurrencyProvider>
+              </DestinationSelectedTokenProvider>
+            </OriginSelectedTokenProvider>
+          </WalletConnectionProvider>
         </ToastProvider>
-      </ModeProvider>
+      </ViewManagerProvider>
     </WidgetPropsProvider>
   )
 }

package/src/widget/components/Withdraw.tsx

@@ -1,3 +1,4 @@
+import { ArrowLeftRight } from "lucide-react"
 import type React from "react"
 import { useCallback, useEffect, useRef, useState } from "react"
 import { getChainInfo } from "../../chains.js"
@@ -10,12 +11,11 @@ import {
   formatUsdAmountLocaleDisplay,
 } from "../../utils/format.js"
 import { useSupportedTokens, type Token } from "../../tokens.js"
-import { useBack } from "../hooks/useBack.js"
+import { useViewManager, useScreenGuard } from "../hooks/useViewManager.js"
 import { useBalanceVisible } from "../hooks/useBalanceVisible.js"
 import { useDefaultDestinationToken } from "../hooks/useDefaultDestinationToken.js"
 import { useDefaultOriginToken } from "../hooks/useDefaultOriginToken.js"
 import { useDestinationSelectedToken } from "../hooks/useDestinationSelectedToken.js"
-import { useMode } from "../hooks/useMode.js"
 import { useOriginSelectedToken } from "../hooks/useOriginSelectedToken.js"
 import type { ProcessedFeeOption } from "../hooks/useSelectedFeeOption.js"
 import { useSelectedRecipient } from "../hooks/useSelectedRecipient.js"
@@ -77,9 +77,8 @@ const Withdraw: React.FC<WithdrawProps> = ({
   fromChainId: fromChainIdProp,
   defaultInputMode,
 }) => {
-  const { mode } = useMode()
+  const { mode, navigate } = useViewManager()
   const isGenericLayout = !fromToken
-  const { setCurrentScreenWithBack } = useBack()
   const { isBalanceVisible } = useBalanceVisible()
   const {
     selectedToken: originToken,
@@ -136,11 +135,11 @@ const Withdraw: React.FC<WithdrawProps> = ({
     enterFormMode("withdraw")
   }, [])
 
-  useEffect(() => {
-    if ((toRecipient == null || toRecipient === "") && !selectedRecipient) {
-      setCurrentScreenWithBack("recipients", "withdraw")
-    }
-  }, [toRecipient, selectedRecipient, setCurrentScreenWithBack])
+  useScreenGuard(
+    (toRecipient == null || toRecipient === "") && !selectedRecipient,
+    "recipients",
+    { backTarget: "withdraw" },
+  )
 
   // Initialize and update selected recipient from toRecipient prop
   useEffect(() => {
@@ -672,6 +671,17 @@ const Withdraw: React.FC<WithdrawProps> = ({
         headerContent="Withdraw"
         headerContentAlign="left"
         showAccountActions={true}
+        customActions={
+          <button
+            type="button"
+            onClick={() => navigate("swap", { backTarget: "withdraw" })}
+            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"
+          >
+            <ArrowLeftRight className="h-4 w-4" />
+            <span className="text-sm font-medium">Swap</span>
+          </button>
+        }
       />
 
       <form
@@ -767,7 +777,9 @@ const Withdraw: React.FC<WithdrawProps> = ({
             <div className="mt-3 flex justify-center">
               <div className="flex items-center space-x-1 text-sm">
                 <span className="text-gray-500 dark:text-gray-400">To:</span>
-                <RecipientSelectorButton />
+                <RecipientSelectorButton
+                  selectedRecipient={selectedRecipient}
+                />
               </div>
             </div>
           )}
@@ -928,7 +940,9 @@ const Withdraw: React.FC<WithdrawProps> = ({
               </span>
               {isGenericLayout && (
                 <div className="mt-1">
-                  <RecipientSelectorButton />
+                  <RecipientSelectorButton
+                    selectedRecipient={selectedRecipient}
+                  />
                 </div>
               )}
             </div>

package/src/widget/hooks/useClickTracking.ts

@@ -1,6 +1,7 @@
 import { useCallback, useRef } from "react"
 import { trackWidgetClick } from "../../analytics.js"
 import { logger } from "../../logger.js"
+import { useViewManager } from "./useViewManager.js"
 
 export interface ClickTrackingOptions {
   component?: string
@@ -12,6 +13,9 @@ export interface ClickTrackingOptions {
 }
 
 export function useClickTracking() {
+  const { screen } = useViewManager()
+  const screenRef = useRef(screen)
+  screenRef.current = screen
   const lastClickRef = useRef<{ [key: string]: number }>({})
 
   const trackClick = useCallback((options: ClickTrackingOptions = {}) => {
@@ -46,6 +50,7 @@ export function useClickTracking() {
 
     // Track the click event - ensure all values are strings
     trackWidgetClick({
+      screen: screenRef.current,
       component: component?.toString() || "unknown",
       action: action?.toString() || "click",
       label: label?.toString(),

package/src/widget/hooks/useDebugScreens.ts

@@ -4,41 +4,9 @@ import { getNormalizedQuoteObject } from "../../prepareSend.js"
 import type { PrepareSendQuote } from "../../prepareSend.js"
 import type { TransactionState } from "../../transactions.js"
 import { useTrails } from "../providers/TrailsProvider.js"
-import { useMode } from "./useMode.js"
-
-type Screen =
-  | "connect"
-  | "tokens"
-  | "select-origin-token"
-  | "select-origin-amount"
-  | "send-form"
-  | "fund-form"
-  | "fund-methods"
-  | "payment-methods"
-  | "onramp-payment-methods"
-  | "recipients"
-  | "earn"
-  | "earn-pools"
-  | "swap"
-  | "wallet-confirmation"
-  | "qr-code-wallet-select"
-  | "direct-transfer-screen"
-  | "pending"
-  | "receipt"
-  | "onramp-meld"
-  | "meld-onramp"
-  | "onramp-mesh"
-  | "wallet-connect"
-  | "wallet-list"
-  | "wallet-connection-pending"
-  | "account-history"
-  | "account-settings"
-  | "user-preferences"
-  | "chain-list"
-  | "qrcode-options"
+import { useViewManager } from "./useViewManager.js"
 
 interface UseDebugScreensProps {
-  setCurrentScreen: (screen: Screen) => void
   setSelectedToken: (token: any) => void
   setTransactionStates: (states: TransactionState[]) => void
   setPrepareSendQuote: (quote: PrepareSendQuote | null) => void
@@ -46,20 +14,10 @@ interface UseDebugScreensProps {
   setSelectedWalletId: (id: string | null) => void
   setShowWalletConnectionRetry: (show: boolean) => void
   setError: (error: string | null) => void
-  setIsConnecting: (connecting: boolean) => void
-  setOnrampProps: (
-    props: {
-      toTokenSymbol?: string
-      toTokenAmount?: string
-      toChainId?: number
-      toRecipientAddress?: string
-    } | null,
-  ) => void
   isConnected: boolean
 }
 
 export const useDebugScreens = ({
-  setCurrentScreen,
   setSelectedToken,
   setTransactionStates,
   setPrepareSendQuote,
@@ -70,7 +28,7 @@ export const useDebugScreens = ({
   isConnected,
 }: UseDebugScreensProps) => {
   const trailsConfig = useTrails()
-  const { setMode: setCurrentMode } = useMode()
+  const { navigate, overrideMode: setCurrentMode } = useViewManager()
   const handleDebugScreenSelect = useCallback(
     async (screen: string) => {
       // Reset necessary state based on the target screen
@@ -112,42 +70,42 @@ export const useDebugScreens = ({
         case "connect":
           setSelectedToken(null)
           setTransactionStates([])
-          setCurrentScreen("connect")
+          navigate("connect")
           break
         case "tokens":
           if (isConnected) {
             setSelectedToken(null)
             setTransactionStates([])
-            setCurrentScreen("tokens")
+            navigate("tokens")
           }
           break
         case "select-origin-token":
-          setCurrentScreen("select-origin-token")
+          navigate("select-origin-token")
           break
         case "select-origin-amount":
-          setCurrentScreen("select-origin-amount")
+          navigate("select-origin-amount")
           break
         case "chain-list":
           setSelectedToken(null)
           setTransactionStates([])
-          setCurrentScreen("chain-list")
+          navigate("chain-list")
           break
         case "send-form":
           // Set dummy USDC token for debug mode and set mode to pay
           setCurrentMode("pay")
           setSelectedToken(dummySelectedToken)
           setTransactionStates([])
-          setCurrentScreen("send-form")
+          navigate("send-form")
           break
         case "fund-form":
           // Set dummy USDC token for debug mode and set mode to fund
           setCurrentMode("fund")
           setSelectedToken(dummySelectedToken)
           setTransactionStates([])
-          setCurrentScreen("fund-form")
+          navigate("fund-form")
           break
         case "recipients":
-          setCurrentScreen("recipients")
+          navigate("recipients")
           break
         case "wallet-confirmation":
           // Set dummy USDC token for debug mode
@@ -155,11 +113,11 @@ export const useDebugScreens = ({
           setPrepareSendQuote(dummyQuote)
           setTransactionStates([])
           setShowWalletConfirmRetry(false)
-          setCurrentScreen("wallet-confirmation")
+          navigate("wallet-confirmation")
           break
         case "qr-code-wallet-select":
           setPrepareSendQuote(dummyQuote)
-          setCurrentScreen("qr-code-wallet-select")
+          navigate("qr-code-wallet-select")
           break
         case "wallet-confirmation-retry":
           // Set dummy USDC token for debug mode
@@ -167,7 +125,7 @@ export const useDebugScreens = ({
           setPrepareSendQuote(dummyQuote)
           setTransactionStates([])
           setShowWalletConfirmRetry(true)
-          setCurrentScreen("wallet-confirmation")
+          navigate("wallet-confirmation")
           break
         case "pending-1-item-0-confirmed":
           // Set dummy transaction states for debug mode - showing all steps
@@ -183,7 +141,7 @@ export const useDebugScreens = ({
             },
           ])
           setPrepareSendQuote(dummyQuote)
-          setCurrentScreen("pending")
+          navigate("pending")
           break
         case "pending-1-item-1-confirmed":
           // Set dummy transaction states for debug mode - showing all steps
@@ -199,7 +157,7 @@ export const useDebugScreens = ({
             },
           ])
           setPrepareSendQuote(dummyQuote)
-          setCurrentScreen("pending")
+          navigate("pending")
           break
         case "pending-2-item-0-confirmed":
           // Set dummy transaction states for debug mode - showing all steps
@@ -224,7 +182,7 @@ export const useDebugScreens = ({
             },
           ])
           setPrepareSendQuote(dummyQuote)
-          setCurrentScreen("pending")
+          navigate("pending")
           break
         case "pending-2-item-1-confirmed":
           // Set dummy transaction states for debug mode - showing all steps
@@ -249,7 +207,7 @@ export const useDebugScreens = ({
             },
           ])
           setPrepareSendQuote(dummyQuote)
-          setCurrentScreen("pending")
+          navigate("pending")
           break
         case "pending-2-item-2-confirmed":
           // Set dummy transaction states for debug mode - showing all steps
@@ -274,7 +232,7 @@ export const useDebugScreens = ({
             },
           ])
           setPrepareSendQuote(dummyQuote)
-          setCurrentScreen("pending")
+          navigate("pending")
           break
         case "pending-3-item-0-confirmed":
           // Set dummy transaction states for debug mode - showing all steps
@@ -308,7 +266,7 @@ export const useDebugScreens = ({
             },
           ])
           setPrepareSendQuote(dummyQuote)
-          setCurrentScreen("pending")
+          navigate("pending")
           break
         case "pending-3-item-1-confirmed":
           // Set dummy transaction states for debug mode - showing all steps
@@ -342,7 +300,7 @@ export const useDebugScreens = ({
             },
           ])
           setPrepareSendQuote(dummyQuote)
-          setCurrentScreen("pending")
+          navigate("pending")
           break
         case "pending-3-item-2-confirmed":
           // Set dummy transaction states for debug mode - showing all steps
@@ -376,7 +334,7 @@ export const useDebugScreens = ({
             },
           ])
           setPrepareSendQuote(dummyQuote)
-          setCurrentScreen("pending")
+          navigate("pending")
           break
         case "pending-3-item-3-confirmed":
           // Set dummy transaction states for debug mode - showing all steps
@@ -410,7 +368,7 @@ export const useDebugScreens = ({
             },
           ])
           setPrepareSendQuote(dummyQuote)
-          setCurrentScreen("pending")
+          navigate("pending")
           break
         case "pending-3-item-2-confirmed-with-error":
           // Set dummy transaction states for debug mode - second item has CallFailed event
@@ -453,7 +411,7 @@ export const useDebugScreens = ({
             },
           ])
           setPrepareSendQuote(dummyQuote)
-          setCurrentScreen("pending")
+          navigate("pending")
           break
         case "receipt":
           // Set dummy transaction states data for debug mode
@@ -487,7 +445,7 @@ export const useDebugScreens = ({
             },
           ])
 
-          setCurrentScreen("receipt")
+          navigate("receipt")
           break
         case "receipt-failed":
           // Set dummy transaction states data for debug mode
@@ -519,7 +477,7 @@ export const useDebugScreens = ({
             },
           ])
 
-          setCurrentScreen("receipt")
+          navigate("receipt")
           break
         case "receipt-refunded":
           // Set dummy transaction states data for debug mode
@@ -571,62 +529,58 @@ export const useDebugScreens = ({
             },
           ])
 
-          setCurrentScreen("receipt")
+          navigate("receipt")
           break
         case "onramp":
-          setCurrentScreen("onramp-meld")
-          break
-        case "meld-onramp":
-          // Direct access to MeldForm within MeldStepsFlow
-          setCurrentScreen("meld-onramp")
+          navigate("onramp-meld")
           break
         case "wallet-connect":
-          setCurrentScreen("wallet-connect")
+          navigate("wallet-connect")
           break
         case "wallet-list":
-          setCurrentScreen("wallet-list")
+          navigate("wallet-list")
           break
         case "wallet-connection-pending":
           setSelectedWalletId("metamask")
-          setCurrentScreen("wallet-connection-pending")
+          navigate("wallet-connection-pending")
           break
         case "wallet-connection-pending-retry":
           setSelectedWalletId("metamask")
           setShowWalletConnectionRetry(true)
-          setCurrentScreen("wallet-connection-pending")
+          navigate("wallet-connection-pending")
           break
         case "fund-methods":
-          setCurrentScreen("fund-methods")
+          navigate("fund-methods")
           break
         case "payment-methods":
-          setCurrentScreen("payment-methods")
+          navigate("payment-methods")
           break
         case "earn":
           setCurrentMode("earn")
-          setCurrentScreen("earn")
+          navigate("earn")
           break
         case "earn-pools":
-          setCurrentScreen("earn-pools")
+          navigate("earn-pools")
           break
         case "swap":
           setCurrentMode("swap")
           setSelectedToken(null)
           setTransactionStates([])
-          setCurrentScreen("swap")
+          navigate("swap")
           break
         case "account-history":
-          setCurrentScreen("account-history")
+          navigate("account-history")
           break
         case "account-settings":
-          setCurrentScreen("account-settings")
+          navigate("account-settings")
           break
         case "user-preferences":
-          setCurrentScreen("user-preferences")
+          navigate("user-preferences")
           break
       }
     },
     [
-      setCurrentScreen,
+      navigate,
       setSelectedToken,
       setTransactionStates,
       setPrepareSendQuote,