feat: Implement key analytics, timelock admin panel, and multi-key st…

[Mutech939]

…aking vault (#964, #966, #968)

• CLOSES Add unique trader count and trade volume stats to key analytics section #966: Add unique trader count and trade volume stats to key analytics section
  • Surface unique trader count and total trade count from contract accumulator
  • Add cumulative trading volume with XLM / USD currency toggle
  • Implement 60-second background polling without layout shift
  • Add hover tooltips explaining each metric
• CLOSES Create timelock pending actions panel for admin key management #964: Create timelock pending actions panel for admin key management
  • Add useTimelockStore with role checking and action governance
  • List pending timelocked actions with live countdown timer and parameters
  • Enable execution only after timelock delay has elapsed
  • Add action cancellation and completed/cancelled history tab
  • Restrict access strictly to authorized admin wallets
• CLOSES Build multi-key staking vault UI for depositing and withdrawing pooled positions #968: Build multi-key staking vault UI for depositing and withdrawing pooled positions
  • Add multi-key deposit form accepting variable key selections and quantities
  • Display user's pool share percentage and underlying creator key breakdown
  • Provide live proportional return preview on share withdrawals
  • Add claimable accrued staking rewards card
  • Track transaction status for deposits, withdrawals, and reward claims
• Tests: Add 33 unit and integration tests across 8 test suites with 100% pass rate

Summary of Completed Issues & Implemented Features

1. Issue Add unique trader count and trade volume stats to key analytics section #966: Unique Trader Count & Trade Volume Stats in Key Analytics
   Contract Analytics Service: Added

src/services/analytics.service.ts
to interface with the contract accumulator endpoint (with deterministic fallback data for development/offline testing).
Zustand Analytics Store: Created

src/hooks/useKeyAnalyticsStore.ts
featuring:
60-second polling interval with automatic background data fetching.
Background refreshing flag (isRefreshing) to ensure zero layout shift during periodic refreshes.
Currency toggle between XLM and USD.
Key Analytics UI Component: Built

src/components/common/KeyAnalyticsPanel.tsx
:
Displays Unique Trader Count and Total Trade Count side-by-side.
Displays Cumulative Volume with currency mode toggle button.
Rich hover tooltips explaining the calculation and significance of each metric.
2. Issue #964: Timelock Pending Actions Panel for Admin Key Management
Timelock Store & Role Enforcement: Created

src/hooks/useTimelockStore.ts
:
Strict role check (isAuthorizedAdminWallet) ensuring non-admin wallets cannot view or execute actions.
Delay enforcement: executeAction checks that Date.now() >= earliestExecutionTime before allowing execution.
Cancellation flow: cancelAction immediately aborts pending actions before execution.
Admin Panel UI Component: Built

src/components/common/TimelockAdminPanel.tsx
:
Pending actions list with action types, parameters table, and live countdown timer down to the second.
Execute button is disabled until the timelock delay has fully elapsed.
Cancel Action button to abort scheduled operations.
Action History tab displaying completed and cancelled actions with resolution timestamps.
3. Issue #968: Multi-Key Staking Vault UI for Depositing & Withdrawing Pooled Positions
Vault Pool Store: Created

src/hooks/useStakingVaultStore.ts
:
Multi-key position and balance management (depositKeys, withdrawShares, claimRewards).
Proportional return calculation (getWithdrawPreview) computing exact underlying key amounts for any given share withdrawal amount.
Transaction state tracker (txStatus, txMessage) for live status banners.
Vault UI Component: Built

src/components/common/MultiKeyStakingVault.tsx
:
Multi-key selection deposit form with balance indicators, quantity inputs, and "MAX" buttons.
Vault position card displaying user pool share percentage and per-creator key breakdown.
Proportional return preview table updating dynamically as the user modifies the share withdrawal input.
Accrued rewards section showing claimable XLM rewards with single-click claim action.
Real-time transaction alert banner with status indicators (submitting, success, error).
Page & App Integration
Landing Page: Integrated all three components into

src/pages/LandingPage.tsx
under the analytics facts and governance sections.
App Routing: Configured routing in

src/App.tsx
.
Verification & Quality Assurance
Unit & Integration Tests: 8 test suites, 33 tests passed (100% pass rate):

src/services/tests/analytics.service.test.ts
(2 tests PASS)

src/hooks/tests/useKeyAnalyticsStore.test.ts
(4 tests PASS)

src/components/common/tests/KeyAnalyticsPanel.test.tsx
(3 tests PASS)

src/hooks/tests/useTimelockStore.test.ts
(5 tests PASS)

src/components/common/tests/TimelockAdminPanel.test.tsx
(5 tests PASS)

src/hooks/tests/useStakingVaultStore.test.ts
(6 tests PASS)

src/components/common/tests/MultiKeyStakingVault.test.tsx
(4 tests PASS)

src/components/common/tests/KeyManagementIntegration.test.tsx
(4 tests PASS)
Linter: pnpm lint passed with 0 errors and 0 warnings.
Production Build: pnpm build (tsc -b && vite build) passed with 0 errors.

[drips-wave]

@Mutech939 Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits