0xtrails 0.1.13 → 0.2.1

package/src/widget/components/AccountSettings.tsx

@@ -0,0 +1,102 @@
+import { LogOut, Plus, User, ChevronRight, History } from "lucide-react"
+import type React from "react"
+import { useWidgetProps } from "../hooks/useWidgetProps.js"
+import { useCurrentScreen, type Screen } from "../hooks/useCurrentScreen.js"
+import { ConnectedWallets } from "./ConnectedWallets.js"
+import { ScreenHeader } from "./ScreenHeader.js"
+import { logger } from "../../logger.js"
+
+const ACTIONS = [
+  {
+    label: "History",
+    screen: "account-history",
+    icon: History,
+    disabled: false,
+  },
+  {
+    label: "User preferences",
+    screen: "user-preferences",
+    icon: User,
+    disabled: false,
+  },
+  { label: "Disconnect", screen: "disconnect", icon: LogOut, disabled: false },
+] as const
+
+interface AccountSettingsProps {
+  onBack?: () => void
+}
+
+export const AccountSettings: React.FC<AccountSettingsProps> = ({ onBack }) => {
+  const { hideDisconnect, decoupleWagmi } = useWidgetProps()
+  const { setCurrentScreen } = useCurrentScreen()
+
+  return (
+    <div className="flex flex-col h-full">
+      <ScreenHeader
+        headerContent="Settings"
+        headerContentAlign="left"
+        onBack={onBack}
+        showAccountActions={false}
+      />
+
+      {/* Connected Wallets */}
+      <div>
+        <ConnectedWallets />
+      </div>
+
+      {/* Link a Wallet */}
+      <div className="mb-4">
+        <button
+          type="button"
+          onClick={() => {
+            logger.console.log(
+              "[trails-sdk] Navigating from account-settings to wallet-list",
+            )
+            setCurrentScreen("wallet-list")
+          }}
+          className="w-full text-left px-0 py-3 text-sm trails-list-item flex items-center justify-between cursor-pointer transition-colors border-b border-gray-200 dark:border-gray-700 trails-text-primary"
+        >
+          <div className="flex items-center gap-3">
+            <Plus className="w-4 h-4" />
+            Link a Wallet
+          </div>
+          <span className="text-sm text-gray-500 dark:text-gray-400">›</span>
+        </button>
+      </div>
+
+      {/* Actions */}
+      <div className="space-y-0">
+        {ACTIONS.map((action) => {
+          if (action.disabled) return null
+          // Hide disconnect action if hideDisconnect is true
+          if (
+            (hideDisconnect || decoupleWagmi) &&
+            action.screen === "disconnect"
+          )
+            return null
+
+          const IconComponent = action.icon
+
+          return (
+            <button
+              key={action.screen}
+              type="button"
+              onClick={() => {
+                setCurrentScreen(action.screen as Screen)
+              }}
+              className={`w-full text-left px-0 py-3 text-sm trails-list-item flex items-center justify-between cursor-pointer transition-colors trails-text-primary`}
+            >
+              <div className="flex items-center gap-3">
+                <IconComponent className="w-4 h-4" />
+                {action.label}
+              </div>
+              <ChevronRight className="w-4 h-4 text-gray-400" />
+            </button>
+          )
+        })}
+      </div>
+    </div>
+  )
+}
+
+export default AccountSettings

package/src/widget/components/ChainFilterDropdown.tsx

@@ -119,7 +119,7 @@ export const ChainFilterDropdown: React.FC<ChainFilterDropdownProps> = ({
           />
         )}
         <ChevronDown
-          className={`h-4 w-4 text-gray-400 transition-all duration-200 ${
+          className={`h-5 w-5 text-gray-400 transition-all duration-200 ${
             isOpen ? "rotate-180" : ""
           }`}
         />

package/src/widget/components/ChainList.tsx

@@ -1,4 +1,4 @@
-import { useState, useMemo, useEffect } from "react"
+import { useState, useMemo } from "react"
 import type React from "react"
 import { AnimatePresence, motion } from "framer-motion"
 import { ScreenHeader } from "./ScreenHeader.js"
@@ -6,8 +6,7 @@ import { ChainImage } from "./ChainImage.js"
 import { AllChainsIcon } from "./AllChainsIcon.js"
 import { SearchInputField } from "./SearchInputField.js"
 import { useChainFilter } from "../hooks/useChainFilter.js"
-import { getSupportedSequenceChains } from "../../chains.js"
-import type { Chain } from "viem"
+import { useSupportedChains } from "../../chains.js"
 
 export interface ChainListItem {
   chainId: number
@@ -16,33 +15,22 @@ export interface ChainListItem {
 }
 
 interface ChainListProps {
-  chains?: ChainListItem[]
   onBack: () => void
 }
 
-export const ChainList: React.FC<ChainListProps> = ({ chains, onBack }) => {
+export const ChainList: React.FC<ChainListProps> = ({ onBack }) => {
   const [searchQuery, setSearchQuery] = useState("")
-  const [supportedChains, setSupportedChains] = useState<Chain[]>([])
   const { selectedChainId, setSelectedChainId } = useChainFilter()
-
-  // Load supported chains on mount if no chains provided
-  useEffect(() => {
-    if (!chains) {
-      getSupportedSequenceChains().then(setSupportedChains)
-    }
-  }, [chains])
+  const { supportedChains } = useSupportedChains()
 
   // Convert chains to ChainListItem format
   const chainList = useMemo(() => {
-    if (chains) {
-      return chains
-    }
     return supportedChains.map((chain) => ({
       chainId: chain.id,
       name: chain.name,
       imageUrl: "", // ChainImage component handles the icons
     }))
-  }, [chains, supportedChains])
+  }, [supportedChains])
 
   // Filter chains based on search query
   const filteredChains = useMemo(() => {
@@ -83,7 +71,7 @@ export const ChainList: React.FC<ChainListProps> = ({ chains, onBack }) => {
           <motion.button
             type="button"
             onClick={() => handleChainSelect(null)}
-            className="w-full py-2 px-4 flex items-center space-x-3 transition-all duration-200 trails-bg-secondary trails-hover-bg trails-border-radius-list-button cursor-pointer"
+            className="w-full py-2 px-4 flex items-center space-x-3 transition-all duration-200 trails-list-item trails-border-radius-list-button cursor-pointer"
             title="Show tokens from all chains"
             initial={{ opacity: 0, y: 20 }}
             animate={{ opacity: 1, y: 0 }}
@@ -112,8 +100,10 @@ export const ChainList: React.FC<ChainListProps> = ({ chains, onBack }) => {
                 key={chain.chainId}
                 type="button"
                 onClick={() => handleChainSelect(chain.chainId)}
-                className={`w-full py-2 px-4 flex items-center space-x-3 transition-all duration-200 trails-bg-secondary trails-hover-bg trails-border-radius-list-button cursor-pointer ${
-                  selectedChainId === chain.chainId ? "trails-bg-card" : ""
+                className={`w-full py-2 px-4 flex items-center space-x-3 transition-all duration-200 trails-list-item trails-border-radius-list-button cursor-pointer ${
+                  selectedChainId === chain.chainId
+                    ? "trails-list-item-selected"
+                    : ""
                 }`}
                 title={`Select ${chain.name}`}
                 initial={{ opacity: 0, y: 20 }}