Skip to content

Autocomplete for Recipient Address Input Field #481

Description

@Kingsman-99

Description

Entering Stellar addresses manually is tedious and error-prone because there is no suggestion mechanism drawing on previously used addresses. An autocomplete dropdown on recipient address fields should surface recently used addresses as the user types.

Technical Context

src/components/invoice/RecipientAddressInput.tsx (new) uses @headlessui/react Combobox backed by src/hooks/useRecentAddresses.ts, which reads a capped list from localStorage keyed by the connected wallet's public key. Suggestions are filtered by the typed prefix using a simple startsWith check. On selection, the full address is inserted into the react-hook-form field managed by src/hooks/useInvoiceForm.ts. A maximum of 20 recent addresses are retained.

Acceptance Criteria

  • Typing the first three characters of a Stellar address opens a dropdown with matching recent addresses
  • Each suggestion shows the full address truncated to the first 8 and last 6 characters with the middle replaced by ellipsis
  • Selecting a suggestion fills the input with the full address and closes the dropdown
  • Successfully saved addresses are added to the recents list automatically after invoice creation
  • The dropdown is navigable by keyboard arrow keys, and pressing Escape closes it without selecting
  • All CI checks (npm test, npm run build, ESLint/TypeScript) pass and the branch has no merge conflicts

Metadata

Metadata

Labels

Stellar WaveIssues in the Stellar wave programcomplexity: highuiUI styling and visual changes

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions