Add a "Fund Contract" panel to the Settings page showing the contract's live XLM and USDC balance and a copyable contract address for token deposits

[thegreatfeez]

Frontend — Dashboard

Summary

Before a proposal can be executed, the multisig contract must hold enough tokens to cover the transfer. This issue adds a "Fund Contract" panel to the Settings page so owners can quickly see the current contract balance and copy the deposit address without hunting for it in a block explorer.

Background

A Settings page was planned at the /settings route but SettingsPage.tsx does not yet exist in frontend/src/pages/. The contract address is available from the VITE_CONTRACT_ADDRESS environment variable. Token balances can be fetched by calling the balance function on the relevant token contract via the existing simulateView helper in frontend/src/lib/contract.ts. The rpc.Server instance in that file can also be used to fetch the contract's native XLM balance via getAccount.

What Needs to Be Done

1. Create frontend/src/pages/SettingsPage.tsx and wire it into App.tsx as the "settings" page option, adding a "Settings" entry to the header navigation alongside "Dashboard" and "History".
2. In frontend/src/lib/contract.ts, add two exported async functions: one that returns the contract's XLM balance in stroops and one that returns its USDC balance using the token contract address from the environment. Both should use the existing server instance and simulateView helper respectively.
3. In SettingsPage.tsx, add a "Fund Contract" panel that fetches and displays the live XLM and USDC balances on mount, formatted as human-readable amounts (not raw stroops).
4. In the same panel, display the full contract address with a copy-to-clipboard button beside it. Show brief visual confirmation (e.g. "Copied!" for 1.5 seconds) after a successful copy, using local component state only.

Acceptance Criteria

• A "Settings" link appears in the header navigation and routes to the Settings page.
• The Settings page displays a "Fund Contract" panel with the contract's live XLM balance.
• The panel also displays the contract's live USDC balance.
• Both balances are shown in human-readable form, not raw stroops.
• The panel shows the full contract address with a working copy-to-clipboard button.
• The copy button shows brief confirmation text after being clicked.

Files to Look At

• frontend/src/pages/SettingsPage.tsx — create this file; it does not exist yet
• frontend/src/App.tsx — add the settings navigation entry and render the new page
• frontend/src/lib/contract.ts — add balance-fetching functions using the existing server instance

Difficulty: Medium