feat: enhance account list and open commands with better UX (#2)

- Fix account list to update UI independently for each account
  - Replace Promise.all with independent async fetches
  - Each account's live data updates as soon as it's available
  - Fast RPCs no longer blocked by slow ones
  - Improved perceived performance

- Add optional address parameter to account open command
  - Support EIP-3770 format (shortName:address) for one-step opening
  - Support bare address with chain prompt
  - Support fully interactive mode (no arguments)
  - Better error handling for empty chains configuration

- Update README with new account open usage examples

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-authored-by: Claude <noreply@anthropic.com>

Author: katspaugh

AGENTS.md

@@ -0,0 +1,10 @@
+Run the following commands before committing:
+
+* npm run lint
+* npm run format
+* npm run typecheck
+* npm run test
+
+If any errors pop up, fix them before committing.
+
+If in the course of development or testing you need to clear or modify the local configs, back up the existing ones first, and restore them when finished.

README.md

@@ -78,7 +78,7 @@ safe wallet remove            # Remove a wallet
 ```bash
 safe account create                   # Create new Safe account
 safe account deploy [account]         # Deploy predicted Safe (EIP-3770 format)
-safe account open                     # Open existing Safe
+safe account open [address]           # Open existing Safe (EIP-3770 format or bare address)
 safe account list                     # List all Safe accounts
 safe account info [account]           # Show Safe details (EIP-3770 format)
 safe account add-owner [account]      # Add a new owner to a Safe
@@ -96,6 +96,27 @@ Examples:
 
 This makes it clear which chain a Safe belongs to. Commands will interactively prompt for Safe selection when needed.
 
+**Opening an Existing Safe:**
+
+The `account open` command supports three usage modes:
+
+1. **EIP-3770 format** - Provide both chain and address in one argument:
+   ```bash
+   safe account open sep:0x742d35Cc6634C0532925a3b844Bc454e4438f44e
+   ```
+
+2. **Bare address** - Provide just the address, CLI will ask for chain:
+   ```bash
+   safe account open 0x742d35Cc6634C0532925a3b844Bc454e4438f44e
+   # → Prompts for chain selection
+   ```
+
+3. **Interactive** - No arguments, CLI asks for both chain and address:
+   ```bash
+   safe account open
+   # → Prompts for chain and address
+   ```
+
 ### Transaction Management
 
 ```bash

src/cli.ts

@@ -178,11 +178,11 @@ account
   })
 
 account
-  .command('open')
-  .description('Open an existing Safe')
-  .action(async () => {
+  .command('open [address]')
+  .description('Open an existing Safe (EIP-3770 format: shortName:address)')
+  .action(async (address?: string) => {
     try {
-      await openSafe()
+      await openSafe(address)
     } catch (error) {
       handleError(error)
     }

src/commands/account/open.ts

@@ -1,6 +1,6 @@
 import * as p from '@clack/prompts'
 import pc from 'picocolors'
-import { type Address } from 'viem'
+import { type Address, isAddress } from 'viem'
 import { getConfigStore } from '../../storage/config-store.js'
 import { getSafeStorage } from '../../storage/safe-store.js'
 import { SafeService } from '../../services/safe-service.js'
@@ -9,47 +9,98 @@ import { checksumAddress, shortenAddress } from '../../utils/ethereum.js'
 import { logError } from '../../ui/messages.js'
 import { renderScreen } from '../../ui/render.js'
 import { SafeOpenSuccessScreen } from '../../ui/screens/index.js'
+import { parseEIP3770, getChainIdFromShortName } from '../../utils/eip3770.js'
 
-export async function openSafe() {
+export async function openSafe(addressArg?: string) {
   p.intro(pc.bgCyan(pc.black(' Open Existing Safe ')))
 
   const configStore = getConfigStore()
   const safeStorage = getSafeStorage()
+  const chains = configStore.getAllChains()
 
-  // Select chain
-  const chains = Object.values(configStore.getAllChains())
-  const chainId = await p.select({
-    message: 'Select chain:',
-    options: chains.map((chain) => ({
-      value: chain.chainId,
-      label: `${chain.name} (${chain.chainId})`,
-    })),
-  })
-
-  if (p.isCancel(chainId)) {
-    p.cancel('Operation cancelled')
+  if (Object.keys(chains).length === 0) {
+    logError('No chains configured. Please run "safe config init" first.')
     return
   }
 
-  const chain = configStore.getChain(chainId as string)!
-
-  // Get Safe address
-  const address = await p.text({
-    message: 'Safe address:',
-    placeholder: '0x...',
-    validate: (value) => {
-      if (!value) return 'Address is required'
-      if (!isValidAddress(value)) return 'Invalid Ethereum address'
-      return undefined
-    },
-  })
-
-  if (p.isCancel(address)) {
-    p.cancel('Operation cancelled')
-    return
+  let chainId: string
+  let safeAddress: Address
+
+  // Scenario 1: EIP-3770 format provided (shortName:address)
+  if (addressArg && addressArg.includes(':')) {
+    try {
+      const { shortName, address } = parseEIP3770(addressArg)
+      chainId = getChainIdFromShortName(shortName, chains)
+      safeAddress = address
+    } catch (error) {
+      logError(error instanceof Error ? error.message : 'Invalid address format')
+      return
+    }
+  }
+  // Scenario 2: Bare address provided - ask for chain
+  else if (addressArg) {
+    if (!isAddress(addressArg)) {
+      logError('Invalid Ethereum address')
+      return
+    }
+    safeAddress = checksumAddress(addressArg) as Address
+
+    // Ask for chain
+    const chainsList = Object.values(chains)
+    const selectedChainId = await p.select({
+      message: 'Select chain:',
+      options: chainsList.map((chain) => ({
+        value: chain.chainId,
+        label: `${chain.name} (${chain.chainId})`,
+      })),
+    })
+
+    if (p.isCancel(selectedChainId)) {
+      p.cancel('Operation cancelled')
+      return
+    }
+
+    chainId = selectedChainId as string
+  }
+  // Scenario 3: No address provided - ask for both chain and address
+  else {
+    const chainsList = Object.values(chains)
+
+    const selectedChainId = await p.select({
+      message: 'Select chain:',
+      options: chainsList.map((chain) => ({
+        value: chain.chainId,
+        label: `${chain.name} (${chain.chainId})`,
+      })),
+    })
+
+    if (p.isCancel(selectedChainId)) {
+      p.cancel('Operation cancelled')
+      return
+    }
+
+    chainId = selectedChainId as string
+
+    // Get Safe address
+    const address = await p.text({
+      message: 'Safe address:',
+      placeholder: '0x...',
+      validate: (value) => {
+        if (!value) return 'Address is required'
+        if (!isValidAddress(value)) return 'Invalid Ethereum address'
+        return undefined
+      },
+    })
+
+    if (p.isCancel(address)) {
+      p.cancel('Operation cancelled')
+      return
+    }
+
+    safeAddress = checksumAddress(address as string) as Address
   }
 
-  const safeAddress = checksumAddress(address as string) as Address
+  const chain = configStore.getChain(chainId)!
 
   // Check if already exists
   if (safeStorage.safeExists(safeAddress, chain.chainId)) {

src/ui/screens/AccountListScreen.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect, useRef } from 'react'
 import { Box, Text } from 'ink'
 import type { Address } from 'viem'
 import { useSafes } from '../hooks/index.js'
@@ -37,6 +37,7 @@ export function AccountListScreen({ onExit }: AccountListScreenProps): React.Rea
   const { safes, loading, error } = useSafes()
   const [liveData, setLiveData] = useState<Map<string, SafeLiveData>>(new Map())
   const [fetchingLive, setFetchingLive] = useState(false)
+  const completedCountRef = useRef(0)
 
   // Fetch live data for deployed Safes
   useEffect(() => {
@@ -46,43 +47,40 @@ export function AccountListScreen({ onExit }: AccountListScreenProps): React.Rea
     if (deployedSafes.length === 0) return
 
     setFetchingLive(true)
-
-    // Fetch live data in parallel
-    Promise.all(
-      deployedSafes.map(async (safe) => {
-        const configStore = getConfigStore()
-        const chain = configStore.getChain(safe.chainId)
-
-        if (!chain) {
-          return { address: safe.address, data: { error: true } }
+    completedCountRef.current = 0
+
+    // Fetch live data independently for each safe
+    deployedSafes.forEach(async (safe) => {
+      const configStore = getConfigStore()
+      const chain = configStore.getChain(safe.chainId)
+
+      if (!chain) {
+        setLiveData((prev) => new Map(prev).set(safe.address, { error: true }))
+        completedCountRef.current++
+        if (completedCountRef.current === deployedSafes.length) {
+          setFetchingLive(false)
+          if (onExit) onExit()
         }
+        return
+      }
 
-        try {
-          const txService = new TransactionService(chain)
-          const [owners, threshold] = await Promise.all([
-            txService.getOwners(safe.address as Address),
-            txService.getThreshold(safe.address as Address),
-          ])
-
-          return {
-            address: safe.address,
-            data: { owners, threshold },
-          }
-        } catch {
-          return { address: safe.address, data: { error: true } }
+      try {
+        const txService = new TransactionService(chain)
+        const [owners, threshold] = await Promise.all([
+          txService.getOwners(safe.address as Address),
+          txService.getThreshold(safe.address as Address),
+        ])
+
+        // Update state independently as soon as data is available
+        setLiveData((prev) => new Map(prev).set(safe.address, { owners, threshold }))
+      } catch {
+        setLiveData((prev) => new Map(prev).set(safe.address, { error: true }))
+      } finally {
+        completedCountRef.current++
+        if (completedCountRef.current === deployedSafes.length) {
+          setFetchingLive(false)
+          if (onExit) onExit()
         }
-      })
-    ).then((results) => {
-      const newLiveData = new Map<string, SafeLiveData>()
-      results.forEach(({ address, data }) => {
-        newLiveData.set(address, data)
-      })
-      setLiveData(newLiveData)
-      setFetchingLive(false)
-
-      // Auto-exit after live data is loaded
-      if (onExit) {
-        onExit()
       }
     })
   }, [loading, safes, onExit])