Skip to content

Add AMM dashboard card UI#84

Merged
bidzyyys merged 3 commits intomainfrom
port/amm-dashboard-main
Mar 12, 2026
Merged

Add AMM dashboard card UI#84
bidzyyys merged 3 commits intomainfrom
port/amm-dashboard-main

Conversation

@CoveMB
Copy link
Collaborator

@CoveMB CoveMB commented Mar 11, 2026

Parts of #21

Summary

Adds the AMM dashboard card in the UI with on-chain config read support.

Scope

  • Network-level AMM config ID wiring
  • Read-only AMM config hooks/view model
  • Dashboard card and page integration
  • URL/network sync and UI config docs updates

@coderabbitai
Copy link

coderabbitai bot commented Mar 11, 2026

Important

Review skipped

Auto incremental reviews are disabled on this repository.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: c8be8f47-c6e9-467c-977d-dbeb0b4f3a46

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

  • 🔍 Trigger review

Walkthrough

This PR introduces UI infrastructure for displaying AMM (Automated Market Maker) configuration details. It adds React components, custom hooks, TypeScript types, and network configuration support for managing AMM config IDs across different networks, along with a legacy query parameter cleanup.

Changes

Cohort / File(s) Summary
Configuration & Environment
.env.exemple, README.md, packages/ui/src/app/config/network.ts, packages/ui/src/app/hooks/useNetworkConfig.tsx
Added AMM config ID environment variables and network-specific constants (LOCALNET, DEVNET, TESTNET, MAINNET). Updated documentation to reflect new configuration requirements and variable naming.
Type Definitions
packages/ui/src/app/types/TAmmConfigCard.ts
Introduced discriminated union types for AMM config card state management, including TAmmConfigCardViewModel, TAmmConfigCardContent, TAmmConfigDetails, and related badge types.
React Components
packages/ui/src/app/components/AmmConfigCard.tsx, packages/ui/src/app/components/AmmConfigCardView.tsx
Added AmmConfigCard as a client-side wrapper component and AmmConfigCardView as a presentational component with state-aware rendering (loading, error, ready states) and styled tiles for config display.
Custom Hooks
packages/ui/src/app/hooks/useAmmConfigCardViewModel.ts, packages/ui/src/app/hooks/useAmmConfigOverview.ts, packages/ui/src/app/hooks/useResolvedAmmConfigId.ts
Introduced three interconnected hooks: useAmmConfigOverview for fetching AMM config data, useResolvedAmmConfigId for resolving network-specific config IDs, and useAmmConfigCardViewModel for composing view models with network labels and formatted badge details.
Page Integration & Provider Cleanup
packages/ui/src/app/page.tsx, packages/ui/src/app/providers/NetworkUrlSync.tsx
Integrated AmmConfigCard component into main page with NetworkSupportChecker wrapper; removed legacy network query parameter handling.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant AmmConfigCard as AmmConfigCard<br/>(Component)
    participant ViewModel as useAmmConfigCardViewModel<br/>(Hook)
    participant ResolvedId as useResolvedAmmConfigId<br/>(Hook)
    participant Overview as useAmmConfigOverview<br/>(Hook)
    participant Network as Network Config<br/>(Context)
    participant API as API Layer<br/>(getAmmConfigOverview)
    participant View as AmmConfigCardView<br/>(Presentational)

    User->>AmmConfigCard: Mount component
    AmmConfigCard->>ViewModel: useAmmConfigCardViewModel()
    ViewModel->>ResolvedId: useResolvedAmmConfigId()
    ResolvedId->>Network: useNetworkVariable(AMM_CONFIG_VARIABLE_NAME)
    Network-->>ResolvedId: rawAmmConfigId
    ResolvedId-->>ViewModel: resolvedAmmConfigId
    ViewModel->>Overview: useAmmConfigOverview(ammConfigId)
    Overview->>API: getAmmConfigOverview(ammConfigId, suiClient)
    API-->>Overview: ammConfig data
    Overview-->>ViewModel: { status, ammConfig, error }
    ViewModel->>ViewModel: resolveContentState(status, ammConfig)
    ViewModel-->>AmmConfigCard: viewModel
    AmmConfigCard->>View: AmmConfigCardView(viewModel)
    View-->>User: Render AMM config display
Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

  • Add create scripts, domain and PTB #80 — This PR directly consumes AMM domain entities and APIs (AmmConfigOverview, getAmmConfigOverview) introduced in that pull request, establishing a code-level dependency.

Suggested reviewers

  • qalisander
  • bidzyyys

Poem

🐰 A card to show configs so fine,
Network-aware, with states aligned,
Hooks that fetch and compose with care,
Badges sparkle, data laid bare,
AMM details now on display! ✨

🚥 Pre-merge checks | ✅ 1 | ❌ 2

❌ Failed checks (2 warnings)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
Description check ⚠️ Warning The PR description is generic and lacks required template sections; missing issue reference, detailed context, tests, documentation, and changelog checklist. Add issue number reference, expand context/rationale, and include all PR checklist items (Tests, Documentation, Changelog) with completion status.
✅ Passed checks (1 passed)
Check name Status Explanation
Title check ✅ Passed The title 'Add AMM dashboard card UI' clearly and concisely summarizes the main change—introducing a new UI component for displaying AMM configuration details.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch port/amm-dashboard-main

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🧹 Nitpick comments (1)
packages/ui/src/app/hooks/useNetworkConfig.tsx (1)

75-82: Consider: Custom networks lack AMM config ID support.

Custom networks default to AMM_CONFIG_ID_NOT_DEFINED. If custom networks need AMM functionality, consider extending the custom network configuration to accept an ammConfigId property.

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@packages/ui/src/app/hooks/useNetworkConfig.tsx` around lines 75 - 82, The
code always assigns AMM_CONFIG_ID_NOT_DEFINED to AMM_CONFIG_VARIABLE_NAME for
custom networks; update the network config type (the network object used in
useNetworkConfig) to optionally include ammConfigId and change the accumulator
assignment in useNetworkConfig (where accumulator[network.networkKey] is built)
to set [AMM_CONFIG_VARIABLE_NAME]: network.ammConfigId ??
AMM_CONFIG_ID_NOT_DEFINED so custom networks can provide an ammConfigId when
available; also update any related types/interfaces and tests that construct
network fixtures to include the optional ammConfigId.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@packages/ui/src/app/components/AmmConfigCardView.tsx`:
- Around line 91-123: AmmConfigCardView currently drops the computed
networkLabel so the card never shows which network the values belong to; update
the TAmmConfigCardViewModel to include networkLabel (string), accept it in the
AmmConfigCardView props, and render it in the card header (for example next to
or below the description/h2) with the same small-uppercase styling used
elsewhere so users can see the environment; keep a sensible fallback like
"unknown network" when networkLabel is missing and do not change renderContent
or CopyableId behavior.

---

Nitpick comments:
In `@packages/ui/src/app/hooks/useNetworkConfig.tsx`:
- Around line 75-82: The code always assigns AMM_CONFIG_ID_NOT_DEFINED to
AMM_CONFIG_VARIABLE_NAME for custom networks; update the network config type
(the network object used in useNetworkConfig) to optionally include ammConfigId
and change the accumulator assignment in useNetworkConfig (where
accumulator[network.networkKey] is built) to set [AMM_CONFIG_VARIABLE_NAME]:
network.ammConfigId ?? AMM_CONFIG_ID_NOT_DEFINED so custom networks can provide
an ammConfigId when available; also update any related types/interfaces and
tests that construct network fixtures to include the optional ammConfigId.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: f2270ceb-bd0c-402c-a371-2f25d7d41689

📥 Commits

Reviewing files that changed from the base of the PR and between cd649b5 and 0627c26.

📒 Files selected for processing (12)
  • packages/ui/.env.exemple
  • packages/ui/README.md
  • packages/ui/src/app/components/AmmConfigCard.tsx
  • packages/ui/src/app/components/AmmConfigCardView.tsx
  • packages/ui/src/app/config/network.ts
  • packages/ui/src/app/hooks/useAmmConfigCardViewModel.ts
  • packages/ui/src/app/hooks/useAmmConfigOverview.ts
  • packages/ui/src/app/hooks/useNetworkConfig.tsx
  • packages/ui/src/app/hooks/useResolvedAmmConfigId.ts
  • packages/ui/src/app/page.tsx
  • packages/ui/src/app/providers/NetworkUrlSync.tsx
  • packages/ui/src/app/types/TAmmConfigCard.ts

Copy link
Contributor

@bidzyyys bidzyyys left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I do not have UI/Frontend knowledge, so just leaving my approval. Make sure to solve all CodeRabbitAI comments please.

Copy link
Member

@qalisander qalisander left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM!

@bidzyyys bidzyyys merged commit 5c5accf into main Mar 12, 2026
16 of 17 checks passed
@bidzyyys bidzyyys deleted the port/amm-dashboard-main branch March 12, 2026 12:03
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants