0xtrails 0.1.13 → 0.2.1

package/src/widget/hooks/useTheme.tsx

@@ -0,0 +1,80 @@
+import React, {
+  createContext,
+  useContext,
+  useState,
+  useCallback,
+  type ReactNode,
+} from "react"
+import { logger } from "../../logger.js"
+
+type Theme = "auto" | "light" | "dark"
+
+interface ThemeContextType {
+  selectedTheme: Theme | null
+  setSelectedTheme: (theme: Theme) => void
+  resetThemePreference: () => void
+}
+
+const ThemeContext = createContext<ThemeContextType | undefined>(undefined)
+
+interface ThemeProviderProps {
+  children: ReactNode
+}
+
+const THEME_KEY = "trails-theme"
+
+export const ThemeProvider: React.FC<ThemeProviderProps> = ({ children }) => {
+  // Initialize state from localStorage or return null if no preference is stored
+  const [selectedTheme, setSelectedThemeState] = useState<Theme | null>(() => {
+    try {
+      const stored = localStorage.getItem(THEME_KEY)
+      if (stored && ["auto", "light", "dark"].includes(stored)) {
+        return stored as Theme
+      }
+      return null // No user preference stored
+    } catch (error) {
+      logger.console.warn("Failed to read theme from localStorage:", error)
+      return null
+    }
+  })
+
+  // Function that updates state and saves to localStorage
+  const setSelectedTheme = useCallback((theme: Theme) => {
+    setSelectedThemeState(theme)
+    try {
+      localStorage.setItem(THEME_KEY, theme)
+    } catch (error) {
+      logger.console.warn("Failed to save theme to localStorage:", error)
+    }
+  }, [])
+
+  const resetThemePreference = useCallback(() => {
+    try {
+      localStorage.removeItem(THEME_KEY)
+      setSelectedThemeState(null) // Clear user preference
+    } catch (error) {
+      logger.console.warn("Failed to reset theme preference:", error)
+      setSelectedThemeState(null) // Still reset state even if localStorage fails
+    }
+  }, [])
+
+  const value: ThemeContextType = {
+    selectedTheme,
+    setSelectedTheme,
+    resetThemePreference,
+  }
+
+  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>
+}
+
+export const useThemePreference = (): ThemeContextType => {
+  const context = useContext(ThemeContext)
+
+  if (context === undefined) {
+    throw new Error(
+      "useThemePreference must be used within a ThemePreferenceProvider",
+    )
+  }
+
+  return context
+}

package/src/widget/hooks/useTokenList.ts

@@ -310,9 +310,14 @@ export function useTokenList({
   }, [balanceError, onError])
 
   const handleTokenSelect = (token: TokenFormatted) => {
-    const isNative = !("contractAddress" in token)
+    const isNative =
+      !("contractAddress" in token) || token.contractAddress === zeroAddress
     const chainInfo = getChainInfo(token.chainId)
     const imageUrl = token.imageUrl
+    const decimals = isNative ? 18 : token.contractInfo?.decimals
+    if (!decimals) {
+      throw new Error("Decimals not found")
+    }
 
     let formattedToken: Token
     if (isNative) {
@@ -328,7 +333,7 @@ export function useTokenList({
           (token as TokenBalanceExtended).balanceUsdFormatted ?? "",
         tokenPriceUsd: (token as TokenBalanceExtended).price?.value ?? 0,
         contractInfo: {
-          decimals: 18,
+          decimals,
           symbol: chainInfo?.nativeCurrency.symbol || "ETH",
           name: chainInfo?.nativeCurrency.name || "Native Token",
         },
@@ -346,7 +351,7 @@ export function useTokenList({
           ...token.contractInfo,
           name: token.contractInfo?.name ?? "Unknown Token",
           symbol: token.contractInfo?.symbol ?? "???",
-          decimals: token.contractInfo?.decimals ?? 18,
+          decimals,
         },
         balanceUsdFormatted: token.balanceUsdFormatted ?? "",
         tokenPriceUsd: token.price?.value ?? 0,
@@ -373,7 +378,8 @@ export function useTokenList({
   const isTokenSelected = (token: TokenBalanceExtended): boolean => {
     if (!selectedToken) return false
 
-    const isNative = !("contractAddress" in token)
+    const isNative =
+      !("contractAddress" in token) || token.contractAddress === zeroAddress
     return (
       selectedToken.chainId === token.chainId &&
       (isNative
@@ -395,7 +401,8 @@ export function useTokenList({
 
     const matchingTokens = sortedTokens.filter(
       (token: TokenBalanceExtended) => {
-        const isNative = !("contractAddress" in token)
+        const isNative =
+          !("contractAddress" in token) || token.contractAddress === zeroAddress
         const chainInfo = getChainInfo(token.chainId)
         const chainName = chainInfo?.name || ""
         const chainNameLower = chainName.toLowerCase()
@@ -506,7 +513,8 @@ export function useTokenList({
     // Get base formatted tokens
     const baseFormattedTokens = filteredTokens.map(
       (token: TokenBalanceExtended): TokenFormatted => {
-        const isNative = !("contractAddress" in token)
+        const isNative =
+          !("contractAddress" in token) || token.contractAddress === zeroAddress
         const chainInfo = getChainInfo(token.chainId)
         const nativeSymbol = chainInfo?.nativeCurrency.symbol || "ETH"
         const tokenSymbol = isNative
@@ -525,13 +533,14 @@ export function useTokenList({
           tokenSymbol,
           token.chainId,
         )
-        const formattedBalance = formatRawAmount(
-          token.balance,
-          isNative ? 18 : token.contractInfo?.decimals,
-        )
+        const decimals = isNative ? 18 : token.contractInfo?.decimals
+        if (!decimals) {
+          throw new Error("Decimals not found")
+        }
+        const formattedBalance = formatRawAmount(token.balance, decimals)
         const priceUsd = Number(token.price?.value) ?? 0
         const balanceUsdFormatted = token.balanceUsdFormatted ?? ""
-        const decimals = isNative ? 18 : (token.contractInfo?.decimals ?? 18)
+
         let isSufficientBalance = true
         if (targetAmountUsd) {
           isSufficientBalance = (token.balanceUsd ?? 0) >= targetAmountUsd

package/src/widget/index.css

@@ -29,14 +29,14 @@
   --trails-widget-border: 1px solid rgb(229 231 235); /* Default widget border */
 
   /* Primary Colors - These apply to both themes */
-  --trails-primary: rgb(59 130 246); /* blue-500 - Change this to customize */
-  --trails-primary-hover: rgb(37 99 235); /* blue-600 - Change this for hover state */
-  --trails-primary-disabled: rgb(209 213 219); /* gray-300 - Disabled state */
+  --trails-primary: rgb(21 93 252); /* #155DFC - Change this to customize */
+  --trails-primary-hover: rgb(17 75 202); /* Darker shade of #155DFC - Change this for hover state */
+  --trails-primary-disabled: rgb(212 212 216); /* #D4D4D8 - Disabled state */
   --trails-primary-disabled-text: rgb(107 114 128); /* gray-500 - Disabled text */
 
   /* Modal Button Colors - Customizable modal trigger button */
-  --trails-modal-button-bg: var(--trails-primary, rgb(59 130 246)); /* Defaults to primary color */
-  --trails-modal-button-hover-bg: var(--trails-primary-hover, rgb(37 99 235)); /* Defaults to primary hover */
+  --trails-modal-button-bg: var(--trails-primary, rgb(21 93 252)); /* Defaults to primary color */
+  --trails-modal-button-hover-bg: var(--trails-primary-hover, rgb(17 75 202)); /* Defaults to primary hover */
   --trails-modal-button-text: rgb(255 255 255); /* white text */
   --trails-modal-button-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); /* subtle shadow */
 }
@@ -50,6 +50,14 @@
   background-color: var(--trails-bg-secondary);
 }
 
+.trails-bg-secondary-hover:hover {
+  background-color: var(--trails-bg-secondary-hover);
+}
+
+.trails-focus-border-secondary:focus-within {
+  border-color: var(--trails-bg-secondary-focus-border);
+}
+
 .trails-bg-tertiary {
   background-color: var(--trails-bg-tertiary);
 }
@@ -184,10 +192,18 @@
   background-color: var(--trails-dropdown-hover-bg);
 }
 
+.trails-list-item {
+  background-color: var(--trails-list-item-bg);
+}
+
 .trails-list-item:hover {
   background-color: var(--trails-list-hover-bg);
 }
 
+.trails-list-item-selected {
+  background-color: var(--trails-list-item-selected-bg);
+}
+
 /* Token List Utility Classes */
 .trails-list {
   background-color: var(--trails-list-bg);
@@ -207,7 +223,9 @@
 [data-theme="light"] {
   /* Background Colors */
   --trails-bg-primary: rgb(255 255 255); /* white */
-  --trails-bg-secondary: rgb(249 250 251); /* gray-50 */
+  --trails-bg-secondary: rgb(244 244 245); /* #F4F4F5 */
+  --trails-bg-secondary-hover: rgb(228 228 231); /* #E4E4E7 */
+  --trails-bg-secondary-focus-border: rgb(244 244 245); /* #F4F4F5 - same as secondary bg */
   --trails-bg-tertiary: rgb(243 244 246); /* gray-100 */
   --trails-bg-card: rgb(255 255 255); /* white */
   --trails-bg-overlay: rgb(255 255 255); /* white */
@@ -233,7 +251,7 @@
   --trails-input-border: rgb(209 213 219); /* gray-300 */
   --trails-input-text: rgb(17 24 39); /* gray-900 */
   --trails-input-placeholder: rgb(156 163 175); /* gray-400 */
-  --trails-input-focus-border: rgb(59 130 246); /* blue-500 */
+  --trails-input-focus-border: rgb(21 93 252); /* #155DFC */
 
   /* Dropdown Colors */
   --trails-dropdown-bg: rgb(255 255 255); /* white */
@@ -242,18 +260,20 @@
   --trails-dropdown-hover-bg: rgb(249 250 251); /* gray-50 */
   --trails-dropdown-selected-bg: rgb(243 244 246); /* gray-100 */
   --trails-dropdown-selected-text: rgb(17 24 39); /* gray-900 */
-  --trails-dropdown-focus-border: rgb(59 130 246); /* blue-500 - matches input focus border */
+  --trails-dropdown-focus-border: rgb(21 93 252); /* #155DFC - matches input focus border */
 
   /* Modal Button Colors - Light Mode */
-  --trails-modal-button-bg: var(--trails-primary, rgb(59 130 246)); /* blue-500 for light mode */
-  --trails-modal-button-hover-bg: var(--trails-primary-hover, rgb(37 99 235)); /* blue-600 for light mode */
+  --trails-modal-button-bg: var(--trails-primary, rgb(21 93 252)); /* #155DFC for light mode */
+  --trails-modal-button-hover-bg: var(--trails-primary-hover, rgb(17 75 202)); /* Darker shade of #155DFC for light mode */
   --trails-modal-button-text: rgb(255 255 255); /* white text */
   --trails-modal-button-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); /* subtle shadow for light mode */
 
   /* Token List Colors */
   --trails-list-bg: rgb(255 255 255); /* white background for token list */
   --trails-list-border: rgb(229 231 235); /* gray-200 border */
-  --trails-list-hover-bg: rgb(249 250 251); /* gray-50 hover */
+  --trails-list-hover-bg: rgb(250 250 250); /* #FAFAFA hover */
+  --trails-list-item-bg: transparent; /* transparent background for list items */
+  --trails-list-item-selected-bg: rgb(239 246 255); /* #EFF6FF selected */
 
   /* Widget Border - Customizable widget border */
   --trails-widget-border: none; /* Default widget border */
@@ -291,6 +311,8 @@
   /* Background Colors */
   --trails-bg-primary: rgb(17 24 39); /* gray-900 */
   --trails-bg-secondary: rgb(31 41 55); /* gray-800 */
+  --trails-bg-secondary-hover: rgb(55 65 81); /* gray-700 */
+  --trails-bg-secondary-focus-border: rgb(31 41 55); /* gray-800 - same as secondary bg */
   --trails-bg-tertiary: rgb(55 65 81); /* gray-700 */
   --trails-bg-card: rgb(31 41 55); /* gray-800 */
   --trails-bg-overlay: rgb(17 24 39); /* gray-900 */
@@ -316,7 +338,7 @@
   --trails-input-border: rgb(75 85 99); /* gray-600 */
   --trails-input-text: rgb(255 255 255); /* white */
   --trails-input-placeholder: rgb(107 114 128); /* gray-500 */
-  --trails-input-focus-border: rgb(59 130 246); /* blue-500 */
+  --trails-input-focus-border: rgb(21 93 252); /* #155DFC */
 
   /* Dropdown Colors */
   --trails-dropdown-bg: rgb(31 41 55); /* gray-800 */
@@ -325,11 +347,11 @@
   --trails-dropdown-hover-bg: rgb(55 65 81); /* gray-700 */
   --trails-dropdown-selected-bg: rgb(55 65 81); /* gray-700 */
   --trails-dropdown-selected-text: rgb(255 255 255); /* white */
-  --trails-dropdown-focus-border: rgb(59 130 246); /* blue-500 - matches input focus border */
+  --trails-dropdown-focus-border: rgb(21 93 252); /* #155DFC - matches input focus border */
 
   /* Modal Button Colors - Dark Mode */
-  --trails-modal-button-bg: var(--trails-primary, rgb(37 99 235)); /* blue-600 for dark mode */
-  --trails-modal-button-hover-bg: var(--trails-primary-hover, rgb(29 78 216)); /* blue-700 for dark mode */
+  --trails-modal-button-bg: var(--trails-primary, rgb(21 93 252)); /* #155DFC for dark mode */
+  --trails-modal-button-hover-bg: var(--trails-primary-hover, rgb(17 75 202)); /* Darker shade of #155DFC for dark mode */
   --trails-modal-button-text: rgb(255 255 255); /* white text */
   --trails-modal-button-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.1); /* subtle shadow for dark mode */
 
@@ -337,6 +359,8 @@
   --trails-list-bg: rgb(31 41 55); /* gray-800 background for token list */
   --trails-list-border: rgb(55 65 81); /* gray-700 border - good balance */
   --trails-list-hover-bg: rgb(55 65 81); /* gray-700 hover */
+  --trails-list-item-bg: transparent; /* transparent background for list items */
+  --trails-list-item-selected-bg: rgb(30 58 138); /* blue-800 selected for dark mode */
 
   /* Widget Border - Customizable widget border */
   --trails-widget-border: none; /* Default widget border */
@@ -433,27 +457,27 @@
 /* Primary Button Override Classes - These will override Tailwind classes */
 /* Light mode primary button */
 .bg-blue-500 {
-  background-color: var(--trails-primary, rgb(59 130 246));
+  background-color: var(--trails-primary, rgb(21 93 252));
 }
 
 /* Dark mode primary button */
 .dark .bg-blue-500 {
-  background-color: var(--trails-primary, rgb(37 99 235)); /* blue-600 for dark mode */
+  background-color: var(--trails-primary, rgb(21 93 252)); /* #155DFC for dark mode */
 }
 
 /* Light mode hover */
 .hover\:bg-blue-600:hover {
-  background-color: var(--trails-primary-hover, rgb(37 99 235));
+  background-color: var(--trails-primary-hover, rgb(17 75 202));
 }
 
 /* Dark mode hover */
 .dark .hover\:bg-blue-600:hover {
-  background-color: var(--trails-primary-hover, rgb(29 78 216)); /* blue-700 for dark mode */
+  background-color: var(--trails-primary-hover, rgb(17 75 202)); /* Darker shade of #155DFC for dark mode */
 }
 
 /* Light mode disabled background */
 .disabled\:bg-gray-300:disabled {
-  background-color: var(--trails-primary-disabled, rgb(209 213 219));
+  background-color: var(--trails-primary-disabled, rgb(212 212 216));
 }
 
 /* Dark mode disabled background */
@@ -484,7 +508,7 @@
 }
 
 .trails-btn-primary:disabled {
-  background-color: var(--trails-primary-disabled, rgb(209 213 219));
+  background-color: var(--trails-primary-disabled, rgb(212 212 216));
   color: var(--trails-primary-disabled-text, rgb(107 114 128));
   cursor: not-allowed;
 }