0xtrails 0.1.13 → 0.2.1

package/src/widget/components/TransactionDetails.tsx

@@ -3,7 +3,7 @@ import type { IntentTransaction } from "../../transactions.js"
 import { TokenImage } from "./TokenImage.js"
 import { ChainImage } from "./ChainImage.js"
 import { getExplorerUrlForAddress } from "../../explorer.js"
-import { truncateAddress } from "../../address.js"
+import { truncateAddress } from "../../utils.js"
 import { formatRawAmount } from "../../tokenBalances.js"
 
 interface TransactionDetailsProps {
@@ -20,7 +20,9 @@ export const TransactionDetails: React.FC<TransactionDetailsProps> = ({
       {/* Origin Intent */}
       {transaction.originIntentAddress && transaction.originToken && (
         <div className="flex justify-between items-center">
-          <span className="text-xs text-gray-600">Origin Intent:</span>
+          <span className="text-xs text-gray-600 dark:text-gray-400">
+            Origin Intent:
+          </span>
           {transaction.originToken && (
             <a
               href={getExplorerUrlForAddress({
@@ -29,7 +31,7 @@ export const TransactionDetails: React.FC<TransactionDetailsProps> = ({
               })}
               target="_blank"
               rel="noopener noreferrer"
-              className="text-xs hover:underline flex items-center gap-1 text-gray-900"
+              className="text-xs hover:underline flex items-center gap-1 text-gray-900 dark:text-gray-100"
             >
               <ChainImage chainId={transaction.originToken.chainId} size={16} />
               {truncateAddress(transaction.originIntentAddress)}
@@ -54,7 +56,9 @@ export const TransactionDetails: React.FC<TransactionDetailsProps> = ({
       {/* Origin Token */}
       {transaction.originToken && (
         <div className="flex justify-between items-start">
-          <span className="text-xs text-gray-600">Origin Token:</span>
+          <span className="text-xs text-gray-600 dark:text-gray-400">
+            Origin Token:
+          </span>
           <div className="text-right">
             {transaction.originTokenAddress &&
             transaction.originTokenAddress !==
@@ -66,7 +70,7 @@ export const TransactionDetails: React.FC<TransactionDetailsProps> = ({
                 })}
                 target="_blank"
                 rel="noopener noreferrer"
-                className="flex items-center gap-1 justify-end hover:underline text-xs text-gray-900"
+                className="flex items-center gap-1 justify-end hover:underline text-xs text-gray-900 dark:text-gray-100"
               >
                 <TokenImage
                   symbol={transaction.originToken.symbol}
@@ -96,7 +100,7 @@ export const TransactionDetails: React.FC<TransactionDetailsProps> = ({
                 </svg>
               </a>
             ) : (
-              <div className="flex items-center gap-1 justify-end text-xs text-gray-900">
+              <div className="flex items-center gap-1 justify-end text-xs text-gray-900 dark:text-gray-100">
                 <TokenImage
                   symbol={transaction.originToken.symbol}
                   imageUrl={transaction.originToken.imageUrl}
@@ -120,7 +124,9 @@ export const TransactionDetails: React.FC<TransactionDetailsProps> = ({
       {transaction.destinationIntentAddress &&
         transaction.destinationChainId && (
           <div className="flex justify-between items-center">
-            <span className="text-xs text-gray-600">Destination Intent:</span>
+            <span className="text-xs text-gray-600 dark:text-gray-400">
+              Destination Intent:
+            </span>
             <a
               href={getExplorerUrlForAddress({
                 address: transaction.destinationIntentAddress,
@@ -128,7 +134,7 @@ export const TransactionDetails: React.FC<TransactionDetailsProps> = ({
               })}
               target="_blank"
               rel="noopener noreferrer"
-              className="text-xs hover:underline flex items-center gap-1 text-gray-900"
+              className="text-xs hover:underline flex items-center gap-1 text-gray-900 dark:text-gray-100"
             >
               <ChainImage chainId={transaction.destinationChainId} size={16} />
               {truncateAddress(transaction.destinationIntentAddress)}
@@ -152,7 +158,9 @@ export const TransactionDetails: React.FC<TransactionDetailsProps> = ({
       {/* Destination Token */}
       {transaction.destinationToken && (
         <div className="flex justify-between items-start">
-          <span className="text-xs text-gray-600">Destination Token:</span>
+          <span className="text-xs text-gray-600 dark:text-gray-400">
+            Destination Token:
+          </span>
           <div className="text-right">
             {transaction.destinationTokenAddress &&
             transaction.destinationTokenAddress !==
@@ -164,7 +172,7 @@ export const TransactionDetails: React.FC<TransactionDetailsProps> = ({
                 })}
                 target="_blank"
                 rel="noopener noreferrer"
-                className="flex items-center gap-1 justify-end hover:underline text-xs text-gray-900"
+                className="flex items-center gap-1 justify-end hover:underline text-xs text-gray-900 dark:text-gray-100"
               >
                 <TokenImage
                   symbol={transaction.destinationToken.symbol}
@@ -194,7 +202,7 @@ export const TransactionDetails: React.FC<TransactionDetailsProps> = ({
                 </svg>
               </a>
             ) : (
-              <div className="flex items-center gap-1 justify-end text-xs text-gray-900">
+              <div className="flex items-center gap-1 justify-end text-xs text-gray-900 dark:text-gray-100">
                 <TokenImage
                   symbol={transaction.destinationToken.symbol}
                   imageUrl={transaction.destinationToken.imageUrl}
@@ -219,7 +227,7 @@ export const TransactionDetails: React.FC<TransactionDetailsProps> = ({
         transaction.destinationToAddress !==
           "0x0000000000000000000000000000000000000000" && (
           <div className="flex justify-between items-center">
-            <span className="text-xs text-gray-600">
+            <span className="text-xs text-gray-600 dark:text-gray-400">
               Destination To Address:
             </span>
             <a
@@ -229,7 +237,7 @@ export const TransactionDetails: React.FC<TransactionDetailsProps> = ({
               })}
               target="_blank"
               rel="noopener noreferrer"
-              className="text-xs hover:underline flex items-center gap-1 text-gray-900"
+              className="text-xs hover:underline flex items-center gap-1 text-gray-900 dark:text-gray-100"
             >
               {transaction.destinationChainId && (
                 <ChainImage
@@ -254,6 +262,138 @@ export const TransactionDetails: React.FC<TransactionDetailsProps> = ({
             </a>
           </div>
         )}
+
+      {/* Origin Intent Deposit Tx Hash */}
+      {transaction.originIntentDepositTxHash &&
+        transaction.originIntentDepositTxExplorerUrl &&
+        transaction.originChainId && (
+          <div className="flex justify-between items-center">
+            <span className="text-xs text-gray-600 dark:text-gray-400">
+              Origin Deposit Tx:
+            </span>
+            <a
+              href={transaction.originIntentDepositTxExplorerUrl}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-xs hover:underline flex items-center gap-1 text-gray-900 dark:text-gray-100"
+            >
+              <ChainImage chainId={transaction.originChainId} size={16} />
+              {truncateAddress(transaction.originIntentDepositTxHash)}
+              <svg
+                className="w-3 h-3"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
+                />
+              </svg>
+            </a>
+          </div>
+        )}
+
+      {/* Origin Intent Action Tx Hash */}
+      {transaction.originIntentTxHash &&
+        transaction.originIntentTxExplorerUrl &&
+        transaction.originChainId && (
+          <div className="flex justify-between items-center">
+            <span className="text-xs text-gray-600 dark:text-gray-400">
+              Origin Intent Tx:
+            </span>
+            <a
+              href={transaction.originIntentTxExplorerUrl}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-xs hover:underline flex items-center gap-1 text-gray-900 dark:text-gray-100"
+            >
+              <ChainImage chainId={transaction.originChainId} size={16} />
+              {truncateAddress(transaction.originIntentTxHash)}
+              <svg
+                className="w-3 h-3"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
+                />
+              </svg>
+            </a>
+          </div>
+        )}
+
+      {/* Destination Intent Deposit Tx Hash */}
+      {transaction.destinationIntentDepositTxHash &&
+        transaction.destinationIntentDepositTxExplorerUrl &&
+        transaction.destinationChainId && (
+          <div className="flex justify-between items-center">
+            <span className="text-xs text-gray-600 dark:text-gray-400">
+              Destination Deposit Tx:
+            </span>
+            <a
+              href={transaction.destinationIntentDepositTxExplorerUrl}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-xs hover:underline flex items-center gap-1 text-gray-900 dark:text-gray-100"
+            >
+              <ChainImage chainId={transaction.destinationChainId} size={16} />
+              {truncateAddress(transaction.destinationIntentDepositTxHash)}
+              <svg
+                className="w-3 h-3"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
+                />
+              </svg>
+            </a>
+          </div>
+        )}
+
+      {/* Destination Intent Action Tx Hash */}
+      {transaction.destinationIntentTxHash &&
+        transaction.destinationIntentTxExplorerUrl &&
+        transaction.destinationChainId && (
+          <div className="flex justify-between items-center">
+            <span className="text-xs text-gray-600 dark:text-gray-400">
+              Destination Intent Tx:
+            </span>
+            <a
+              href={transaction.destinationIntentTxExplorerUrl}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-xs hover:underline flex items-center gap-1 text-gray-900 dark:text-gray-100"
+            >
+              <ChainImage chainId={transaction.destinationChainId} size={16} />
+              {truncateAddress(transaction.destinationIntentTxHash)}
+              <svg
+                className="w-3 h-3"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
+                />
+              </svg>
+            </a>
+          </div>
+        )}
     </div>
   )
 }

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/TruncatedAddress.tsx

@@ -7,6 +7,8 @@ interface TruncatedAddressProps {
   chainId: number
   className?: string
   expandOnHover?: boolean
+  sliceStart?: number
+  sliceEnd?: number
 }
 
 export const TruncatedAddress: React.FC<TruncatedAddressProps> = ({
@@ -14,10 +16,12 @@ export const TruncatedAddress: React.FC<TruncatedAddressProps> = ({
   chainId,
   className = "",
   expandOnHover = false,
+  sliceStart = 6,
+  sliceEnd = 4,
 }) => {
   const [isHovered, setIsHovered] = useState(false)
 
-  const truncatedAddress = `${address.slice(0, 6)}…${address.slice(-4)}`
+  const truncatedAddress = `${address.slice(0, sliceStart)}…${address.slice(-sliceEnd)}`
   const explorerUrl = getExplorerUrlForAddress({ address, chainId })
 
   if (!expandOnHover) {

package/src/widget/components/UserPreferences.tsx

@@ -0,0 +1,155 @@
+import { ChevronDown, RotateCcw } from "lucide-react"
+import type React from "react"
+import { useBalanceVisible } from "../hooks/useBalanceVisible.js"
+import { useSwapSettings } from "../hooks/useSwapSettings.js"
+import { useThemePreference } from "../hooks/useTheme.js"
+import { useWidgetProps } from "../hooks/useWidgetProps.js"
+import { ScreenHeader } from "./ScreenHeader.js"
+import { logger } from "../../logger.js"
+
+interface UserPreferencesProps {
+  onBack?: () => void
+}
+
+export const UserPreferences: React.FC<UserPreferencesProps> = ({ onBack }) => {
+  const { isBalanceVisible, toggleBalanceVisible, resetBalanceVisible } =
+    useBalanceVisible()
+  const { resetSwapSettings } = useSwapSettings()
+  const { selectedTheme, setSelectedTheme, resetThemePreference } =
+    useThemePreference()
+  const { customCss, theme: widgetTheme } = useWidgetProps()
+
+  const handleThemeChange = (newTheme: "auto" | "light" | "dark") => {
+    // Only allow theme changes if customCss is not set
+    if (!customCss) {
+      setSelectedTheme(newTheme)
+      // ThemeSyncer component will handle applying the theme
+    }
+  }
+
+  const handleResetPreferences = () => {
+    try {
+      // Reset all preferences using their respective hook methods
+      resetBalanceVisible()
+      resetSwapSettings()
+      resetThemePreference()
+
+      logger.console.log(
+        "[UserPreferences] All preferences have been reset to defaults",
+      )
+    } catch (error) {
+      logger.console.warn(
+        "[UserPreferences] Failed to reset preferences:",
+        error,
+      )
+    }
+  }
+
+  return (
+    <div className="flex flex-col h-full">
+      <ScreenHeader
+        headerContent="User Preferences"
+        headerContentAlign="left"
+        onBack={onBack}
+        showAccountActions={false}
+      />
+
+      <div className="space-y-6">
+        {/* Hide Balances Setting */}
+        <div className="flex items-center justify-between">
+          <span className="text-sm font-medium text-gray-900 dark:text-gray-100">
+            Hide Balances
+          </span>
+          <button
+            type="button"
+            onClick={toggleBalanceVisible}
+            className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 ${
+              !isBalanceVisible ? "bg-blue-600" : "bg-gray-200 dark:bg-gray-700"
+            }`}
+          >
+            <span
+              className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
+                !isBalanceVisible ? "translate-x-6" : "translate-x-1"
+              }`}
+            />
+          </button>
+        </div>
+
+        {/* Simple Swap UI Setting */}
+        {/* <div className="flex items-center justify-between">
+          <span className="text-sm font-medium text-gray-900 dark:text-gray-100">
+            Simple Swap UI
+          </span>
+          <button
+            type="button"
+            onClick={toggleSimpleSwapMode}
+            className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 ${
+              isSimpleSwapMode ? "bg-blue-600" : "bg-gray-200 dark:bg-gray-700"
+            }`}
+          >
+            <span
+              className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
+                isSimpleSwapMode ? "translate-x-6" : "translate-x-1"
+              }`}
+            />
+          </button>
+        </div> */}
+
+        {/* Theme Setting */}
+        <div className="flex items-center justify-between">
+          <span
+            className={`text-sm font-medium ${
+              customCss
+                ? "text-gray-500 dark:text-gray-500"
+                : "text-gray-900 dark:text-gray-100"
+            }`}
+          >
+            Theme
+            {customCss && (
+              <span className="text-xs text-gray-400 dark:text-gray-500 block">
+                Controlled by custom CSS
+              </span>
+            )}
+          </span>
+          <div className="relative">
+            <select
+              value={selectedTheme || widgetTheme || "auto"}
+              onChange={(e) =>
+                handleThemeChange(e.target.value as "auto" | "light" | "dark")
+              }
+              disabled={!!customCss}
+              className={`appearance-none border text-sm rounded-xl focus:ring-blue-500 focus:border-blue-500 block w-24 p-2 pr-8 ${
+                customCss
+                  ? "bg-gray-100 dark:bg-gray-800 border-gray-200 dark:border-gray-700 text-gray-500 dark:text-gray-500 cursor-not-allowed"
+                  : "bg-gray-50 dark:bg-gray-700 border-gray-300 dark:border-gray-600 text-gray-900 dark:text-gray-100 cursor-pointer"
+              }`}
+            >
+              <option value="auto">Auto</option>
+              <option value="light">Light</option>
+              <option value="dark">Dark</option>
+            </select>
+            <ChevronDown
+              className={`absolute right-2 top-1/2 transform -translate-y-1/2 h-4 w-4 pointer-events-none ${
+                customCss ? "text-gray-300 dark:text-gray-600" : "text-gray-400"
+              }`}
+            />
+          </div>
+        </div>
+
+        {/* Reset Preferences Button */}
+        <div className="pt-4 dark:border-gray-700">
+          <button
+            type="button"
+            onClick={handleResetPreferences}
+            className="flex items-center gap-1 px-2 py-1.5 text-xs font-medium text-gray-700 dark:text-gray-300 trails-bg-secondary rounded-xl hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors cursor-pointer"
+          >
+            <RotateCcw className="w-3 h-3" />
+            Reset
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default UserPreferences

package/src/widget/components/WalletList.tsx

@@ -87,7 +87,7 @@ export const WalletList: React.FC<WalletListProps> = ({
               key={wallet.id}
               data-wallet-id={wallet.id}
               onClick={() => handleWalletSelect(wallet.id)}
-              className="w-full flex items-center justify-between cursor-pointer font-semibold py-4 px-6 trails-border-radius-large-button transition-all duration-200 trails-bg-secondary trails-hover-bg trails-text-primary"
+              className="w-full flex items-center justify-between cursor-pointer font-semibold py-4 px-6 trails-border-radius-large-button transition-all duration-200 trails-list-item trails-text-primary"
             >
               <div className="flex items-center space-x-3">
                 {wallet.icon ? (

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/useBalanceVisible.tsx

@@ -2,6 +2,7 @@ import React, {
   createContext,
   useContext,
   useState,
+  useEffect,
   type ReactNode,
 } from "react"
 
@@ -9,6 +10,7 @@ interface BalanceVisibleContextType {
   isBalanceVisible: boolean
   setIsBalanceVisible: (visible: boolean) => void
   toggleBalanceVisible: () => void
+  resetBalanceVisible: () => void
 }
 
 const BalanceVisibleContext = createContext<
@@ -20,21 +22,57 @@ interface BalanceVisibleProviderProps {
   initialVisible?: boolean
 }
 
+const BALANCE_VISIBLE_KEY = "trails-balance-visible"
+
 export const BalanceVisibleProvider: React.FC<BalanceVisibleProviderProps> = ({
   children,
   initialVisible = true,
 }) => {
-  const [isBalanceVisible, setIsBalanceVisible] =
-    useState<boolean>(initialVisible)
+  // Initialize state from localStorage or use initialVisible as fallback
+  const [isBalanceVisible, setIsBalanceVisible] = useState<boolean>(() => {
+    try {
+      const stored = localStorage.getItem(BALANCE_VISIBLE_KEY)
+      return stored !== null ? JSON.parse(stored) : initialVisible
+    } catch (error) {
+      console.warn(
+        "Failed to read balance visibility from localStorage:",
+        error,
+      )
+      return initialVisible
+    }
+  })
+
+  // Update localStorage whenever isBalanceVisible changes
+  useEffect(() => {
+    try {
+      localStorage.setItem(
+        BALANCE_VISIBLE_KEY,
+        JSON.stringify(isBalanceVisible),
+      )
+    } catch (error) {
+      console.warn("Failed to save balance visibility to localStorage:", error)
+    }
+  }, [isBalanceVisible])
 
   const toggleBalanceVisible = () => {
     setIsBalanceVisible(!isBalanceVisible)
   }
 
+  const resetBalanceVisible = () => {
+    try {
+      localStorage.removeItem(BALANCE_VISIBLE_KEY)
+      setIsBalanceVisible(true) // Default: balances visible
+    } catch (error) {
+      console.warn("Failed to reset balance visibility:", error)
+      setIsBalanceVisible(true) // Still reset state even if localStorage fails
+    }
+  }
+
   const value: BalanceVisibleContextType = {
     isBalanceVisible,
     setIsBalanceVisible,
     toggleBalanceVisible,
+    resetBalanceVisible,
   }
 
   return (

package/src/widget/hooks/useCheckout.ts

@@ -1,6 +1,7 @@
 import { useCallback, useRef } from "react"
 import { getSessionId } from "../../analytics.js"
 import { logger } from "../../logger.js"
+import { updatePersistentToast } from "../../toast.js"
 
 export type CheckoutCallbacks = {
   onCheckoutStart?: (data: { sessionId: string }) => void
@@ -93,6 +94,12 @@ export function useCheckout({
         )
       }
     }
+
+    updatePersistentToast(
+      "Transaction Complete",
+      "Your transaction has been successfully processed",
+      "success",
+    )
   }, [onCheckoutComplete])
 
   const triggerCheckoutError = useCallback(
@@ -110,6 +117,12 @@ export function useCheckout({
           )
         }
       }
+
+      updatePersistentToast(
+        "Transaction Failed",
+        error || "An error occurred while processing your transaction",
+        "error",
+      )
     },
     [onCheckoutError],
   )

package/src/widget/hooks/useCurrentScreen.tsx

@@ -6,6 +6,7 @@ export type Screen =
   | "send-form"
   | "fund-form"
   | "fund-methods"
+  | "recipients"
   | "earn-pools"
   | "earn"
   | "swap"
@@ -15,10 +16,13 @@ export type Screen =
   | "pending"
   | "receipt"
   | "mesh-connect"
+  | "mesh-connect-exchanges"
   | "wallet-connect"
   | "wallet-list"
   | "wallet-connection-pending"
   | "account-history"
+  | "account-settings"
+  | "user-preferences"
   | "chain-list"
   | "disconnect"
 

package/src/widget/hooks/useDebugScreens.ts

@@ -10,6 +10,7 @@ type Screen =
   | "send-form"
   | "fund-form"
   | "fund-methods"
+  | "recipients"
   | "earn"
   | "earn-pools"
   | "swap"
@@ -23,6 +24,8 @@ type Screen =
   | "wallet-list"
   | "wallet-connection-pending"
   | "account-history"
+  | "account-settings"
+  | "user-preferences"
   | "chain-list"
 
 interface UseDebugScreensProps {
@@ -118,6 +121,9 @@ export const useDebugScreens = ({
           setTransactionStates([])
           setCurrentScreen("fund-form")
           break
+        case "recipients":
+          setCurrentScreen("recipients")
+          break
         case "wallet-confirmation":
           // Set dummy USDC token for debug mode
           setSelectedToken(dummySelectedToken)
@@ -577,10 +583,14 @@ export const useDebugScreens = ({
           setCurrentScreen("receive")
           break
         case "account-history":
-          setSelectedToken(null)
-          setTransactionStates([])
           setCurrentScreen("account-history")
           break
+        case "account-settings":
+          setCurrentScreen("account-settings")
+          break
+        case "user-preferences":
+          setCurrentScreen("user-preferences")
+          break
       }
     },
     [