UI — Support Stellar federation addresses as account input (user*domain.com)

[Tinna23]

Description

Stellar supports federation addresses — human-readable aliases like ben*stellarterm.com or alice*lobstr.co that resolve to a full G-address via the Stellar federation protocol. Currently users must paste a 56-character G-address into the search bar. This issue adds automatic federation address resolution so users can type or paste a friendly address and the app resolves it transparently.

How Stellar Federation Works

1. User types alice*lobstr.co
2. App detects the * character and treats it as a federation address
3. App fetches https://lobstr.co/.well-known/stellar.toml to find the federation server URL
4. App calls the federation server: GET {server}?q=alice*lobstr.co&type=name
5. Federation server returns the G-address
6. App proceeds with the G-address as normal

The Stellar JS SDK has a built-in federation resolver — use @stellar/stellar-sdk which is already commonly available, or use the lightweight @stellar/stellar-base package.

What To Build

src/lib/federation.ts

export function isFederationAddress(input: string): boolean
// Returns true if input matches pattern: anything*anything.tld

export async function resolveFederationAddress(
  address: string
): Promise<string>
// Resolves federation address to G-address
// Throws FederationError if not found or server unavailable

Use the @stellar/stellar-sdk Federation class, or implement directly using the Stellar TOML + federation protocol.

Update src/app/app/page.tsx

In handleExplain(), before routing to /account/:address:

1. Check isFederationAddress(input)
2. If yes, show a resolving state ("Resolving federation address...")
3. Call resolveFederationAddress(input)
4. On success, route to /account/:resolvedAddress
5. On failure, show a clear error: "Could not resolve federation address. Check the spelling and try again."

Update src/components/SearchBar.tsx

• Accept resolving prop (boolean) for loading state
• Show subtle animation while resolving
• Placeholder text: e.g. alice*lobstr.co or GABC...

Update src/app/account/[address]/page.tsx

If a federation address was resolved, show it at the top of the account page:

Federation: alice*lobstr.co → GABC...

Pass the original federation address as a URL query param: /account/GABC...?fed=alice*lobstr.co

Package to add

"@stellar/stellar-sdk": "^12.0.0"

Or implement the federation protocol directly without the SDK to keep bundle size small — both approaches are acceptable.

Key Files

New files:

• src/lib/federation.ts

Modified files:

• src/app/app/page.tsx
• src/components/SearchBar.tsx
• src/app/account/[address]/page.tsx
• package.json

Acceptance Criteria

• alice*lobstr.co resolves correctly and loads the account page
• ben*stellarterm.com resolves correctly
• Resolving state shown while federation lookup is in progress
• Clear error shown when federation address cannot be resolved
• Regular G-addresses still work exactly as before (no regression)
• Resolved federation address displayed on the account page
• Invalid federation address format shows validation error immediately (no network call)
• Network timeout on federation server handled gracefully
• TypeScript compiles with no errors

Complexity: Medium · 150 pts

[K1NGD4VID]

Hi

Please assign me this task. I’ll implement Stellar federation address resolution with proper detection, async lookup flow, loading/error states, UI integration across search and account pages, and ensure full backward compatibility for standard G-addresses. I’ll also handle timeouts, validation, and display resolved federation mappings cleanly in the UI.

ETA: 1–2 hours