0xtrails 0.2.4 → 0.2.6

package/src/widget/components/AccountSettings.tsx

@@ -1,11 +1,10 @@
-import { LogOut, Plus, User, ChevronRight, History } from "lucide-react"
+import { LogOut, User, ChevronRight, History } from "lucide-react"
 import type React from "react"
 import { useWidgetProps } from "../hooks/useWidgetProps.js"
 import type { Screen } from "../hooks/useCurrentScreen.js"
 import { useBack } from "../hooks/useBack.js"
 import { ConnectedWallets } from "./ConnectedWallets.js"
 import { ScreenHeader } from "./ScreenHeader.js"
-import { logger } from "../../logger.js"
 
 const ACTIONS = [
   {
@@ -37,64 +36,59 @@ export const AccountSettings: React.FC<AccountSettingsProps> = ({ onBack }) => {
         headerContent="Settings"
         headerContentAlign="left"
         onBack={onBack}
-        showAccountActions={false}
       />
 
-      {/* Connected Wallets */}
-      <div>
-        <ConnectedWallets />
-      </div>
+      <div className="flex-1">
+        <div className="space-y-4">
+          {/* Connected Wallets */}
+          <ConnectedWallets
+            showConnectNewWallet={true}
+            showDisconnect={true}
+            backScreen="account-settings"
+          />
 
-      {/* Link a Wallet */}
-      <div className="mb-4">
-        <button
-          type="button"
-          onClick={() => {
-            logger.console.log(
-              "[trails-sdk] Navigating from account-settings to wallet-list",
-            )
-            setCurrentScreenWithBack("wallet-list", "account-settings")
-          }}
-          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>
+          {/* Divider */}
+          <div className="border-t border-gray-200 dark:border-gray-700"></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
+          {/* Actions */}
+          <div className="trails-border-radius-container border trails-border-primary">
+            {ACTIONS.map((action, index) => {
+              if (action.disabled) return null
+              // Hide disconnect action if hideDisconnect is true
+              if (
+                (hideDisconnect || decoupleWagmi) &&
+                action.screen === "disconnect"
+              )
+                return null
 
-          const IconComponent = action.icon
+              const IconComponent = action.icon
+              const isLast = index === ACTIONS.length - 1
 
-          return (
-            <button
-              key={action.screen}
-              type="button"
-              onClick={() => {
-                setCurrentScreenWithBack(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>
-          )
-        })}
+              return (
+                <div key={action.screen}>
+                  <button
+                    type="button"
+                    onClick={() => {
+                      setCurrentScreenWithBack(action.screen as Screen)
+                    }}
+                    className="w-full text-left px-3 py-4 text-sm flex items-center justify-between cursor-pointer transition-colors trails-text-primary trails-hover-bg"
+                  >
+                    <div className="flex items-center gap-3">
+                      <IconComponent className="w-4 h-4" />
+                      <span className="text-sm font-bold">{action.label}</span>
+                    </div>
+                    <ChevronRight className="w-5 h-5 text-gray-400" />
+                  </button>
+
+                  {/* Divider between buttons (except for the last one) */}
+                  {!isLast && (
+                    <div className="border-b border-gray-200 dark:border-gray-700"></div>
+                  )}
+                </div>
+              )
+            })}
+          </div>
+        </div>
       </div>
     </div>
   )

package/src/widget/components/ChainFilterDropdown.tsx

@@ -3,6 +3,7 @@ import type React from "react"
 import { useEffect, useMemo, useRef, useState } from "react"
 import { ChainImage } from "./ChainImage.js"
 import { AllChainsIcon } from "./AllChainsIcon.js"
+import { getChainInfo } from "../../chains.js"
 
 export interface Chain {
   chainId: number
@@ -94,9 +95,29 @@ export const ChainFilterDropdown: React.FC<ChainFilterDropdownProps> = ({
     }
   }
 
-  const selectedChain = chains.find(
-    (chain) => chain.chainId === selectedChainId,
-  )
+  // Find selected chain in the chains array, or get it from getChainInfo if not found
+  // This handles the case where user selects a chain with no tokens
+  const selectedChain = useMemo(() => {
+    if (selectedChainId === null) return null
+
+    const chainInList = chains.find(
+      (chain) => chain.chainId === selectedChainId,
+    )
+
+    if (chainInList) return chainInList
+
+    // If chain not in list (e.g., no tokens on that chain), get info from getChainInfo
+    const chainInfo = getChainInfo(selectedChainId)
+    if (chainInfo) {
+      return {
+        chainId: chainInfo.id,
+        name: chainInfo.name,
+        imageUrl: chainInfo.imageUrl,
+      }
+    }
+
+    return null
+  }, [chains, selectedChainId])
 
   return (
     <div className={`relative ${className}`} ref={dropdownRef}>