Amm rankings explorer page by cybele-ripple · Pull Request #1295 · ripple/explorer

cybele-ripple · 2026-03-16T19:13:46Z

High Level Overview of Change

These changes add an AMM page to the explorer.

Context of Change

The new AMMs page includes:

a graph for TVL and volume
- toggle for USD and XRP
- selectable timeframe (1D, 1M, 6M, 1Y, 5Y)
- color coded superimposed graphs
top 1000 AMMs
- entry includes: pair, clickable AMM account ids, TVL, number of LPs, volume in past 24 hours, feed in past 24 hours, and APR in past 24 hours
- toggle switch from USD and WRP
- filters for AMMs (RWA, Stablecoins, Memes, DeFi)
- search box for specific AMM
general info section to show current TVL, total number of AMMs, total number of LPs and the current 24 hour volume

Type of Change

Bug fix (non-breaking change which fixes an issue)
New feature (non-breaking change which adds functionality)
Breaking change (fix or feature that would cause existing functionality to not work as expected)
Refactor (non-breaking change that only restructures code)
Tests (You added tests for code that already exists, or your new feature included in this PR)
Documentation Updates
Translation Updates
Release

semgrep-code-ripple-github-org · 2026-03-16T19:20:17Z

Semgrep found 10 ssc-7ae6e5c3-b6de-4d40-8faa-c9762551977a findings:

src/containers/AMMRankings/api.ts
- L63 - Triage
- L121-127 - Triage
- L163 - Triage
- L173-178 - Triage
- L189-194 - Triage
server/routes/v1/tokens.js
- L220 - Triage
- L245 - Triage
server/routes/v1/amms.js
- L17-23 - Triage
- L48 - Triage
- L74-79 - Triage

Risk: Affected versions of axios are vulnerable to Improper Check for Unusual or Exceptional Conditions. It fails to correctly validate configuration keys during merging. This allows a crafted proto property to trigger an internal TypeError, causing the application to crash.

Fix: Upgrade this library to at least version 1.13.5 at explorer/package-lock.json:27214.

Reference(s): GHSA-43fc-jf86-j433, CVE-2026-25639

pdp2121 · 2026-03-26T16:33:04Z

server/routes/v1/amms.js

+ * GET /api/v1/amms
+ * Fetch top AMMs with sorting
+ */
+const getAMMs = async (req, res) => {


You should cache these results so that Explorer server will not make a call to LOS on every page load (rate limiting)
See this example: https://github.com/ripple/explorer/blob/main/server/routes/v1/tokens.js#L85-L119

Added to the top of this file https://github.com/ripple/explorer/pull/1295/changes#diff-3d739c4ee7d382a3089fc92fe71742ee94b21e2d701aa157f072f31446d89fd7R5-R11

pdp2121 · 2026-03-26T16:33:53Z

server/routes/v1/amms.js

+    log.info(`Fetched ${response.data.results?.length || 0} AMMs`)
+
+    return res.status(200).json(response.data)
+  } catch (error) {


Also with caching if the call failed we can still use stale data

Added to this file here https://github.com/ripple/explorer/pull/1295/changes#diff-3d739c4ee7d382a3089fc92fe71742ee94b21e2d701aa157f072f31446d89fd7R279-R298

pdp2121 · 2026-03-26T16:34:11Z

server/routes/v1/amms.js

+ * Fetch aggregated AMM statistics
+ * This fetches the special "aggregated" document from the amms index
+ */
+const getAggregatedStats = async (req, res) => {


Same here, this should be cached

Added https://github.com/ripple/explorer/pull/1295/changes#diff-3d739c4ee7d382a3089fc92fe71742ee94b21e2d701aa157f072f31446d89fd7R279-R298

pdp2121 · 2026-03-26T16:34:22Z

server/routes/v1/amms.js

+ * Fetch historical trends for AMM data
+ */
+const getHistoricalTrends = async (req, res) => {
+  try {


Added: https://github.com/ripple/explorer/pull/1295/changes#diff-3d739c4ee7d382a3089fc92fe71742ee94b21e2d701aa157f072f31446d89fd7R11

pdp2121 · 2026-03-26T16:39:45Z

server/routes/v1/index.js

  api.use('/metrics', getCurrentMetrics)
  api.use('/tokens/search/:query', getTokensSearch)
+  api.post('/tokens/batch-get', batchGetTokens)
+  api.use('/tokens/:tokenId', getTokenById)


Is there a reason for this to be done server-side? For single token fetching without the need for caching I would prefer doing it on client-side to avoid rate limiting (IP of user browser vs IP of Explorer server)

Changed to cache the data serverside instead of fetching per request here https://github.com/ripple/explorer/pull/1295/changes#diff-3d739c4ee7d382a3089fc92fe71742ee94b21e2d701aa157f072f31446d89fd7R236-R250

src/containers/AMMRankings/TVLVolumeChart.tsx

public/locales/en-US/translations.json

src/containers/AMMRankings/TVLVolumeChart.tsx

src/containers/AMMRankings/svg.d.ts

src/containers/App/legacyRedirects.tsx

server/routes/v1/index.js

src/containers/AMMRankings/AMMRankingsTable.tsx

src/containers/AMMRankings/GeneralInfoCard.tsx

src/containers/AMMRankings/index.tsx

src/containers/AMMRankings/AMMRankingsTable.tsx

server/routes/v1/amms.js

## High Level Overview of Change react-test-renderer isn't used in our code and has been deprecated (see [details](https://github.com/facebook/react/tree/HEAD/packages/react-test-renderer)). Relevant dependabot PR #1256  ### Context of Change  ### Type of Change  - [ ] Bug fix (non-breaking change which fixes an issue) - [ ] New feature (non-breaking change which adds functionality) - [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected) - [ ] Refactor (non-breaking change that only restructures code) - [ ] Tests (You added tests for code that already exists, or your new feature included in this PR) - [ ] Documentation Updates - [ ] Translation Updates - [ ] Release ### Codebase Modernization  - [ ] Updated files to React Hooks - [ ] Updated files to TypeScript ## Before / After  ## Test Plan

…CursorPaginatedQuery

…fers

…s back to 200

…te components

…-dom' because in React Router v6 for browser applications, hooks like useLocation(), useParams(), and Routes must be imported from 'react-router-dom' (which provides browser context) and addressed PR issues

pdp2121 · 2026-04-07T15:24:00Z

src/containers/AMMRankings/index.tsx

+    ['ammRankings', sortField, sortOrder],
+    () => fetchAMMRankings(sortField, sortOrder),
+    {
+      refetchInterval: 60 * 1000,


nit: you can set a common refetch interval variable

public/locales/en-US/translations.json

kuan121 · 2026-04-08T13:52:24Z

public/locales/en-US/translations.json

@@ -911,5 +911,15 @@
  "asset_2": "Asset 2",


Once you’ve finalized all the new keys for the AMM Ranking page, please add the same keys to translations.json for the other languages and set their values to null (you can refer to the AMM Object PR for examples).

Added changes from this translations.json to the following:
ca-CA
es-ES
fr-FR
ja-JP
ko-KR
my-MM

src/containers/AMMRankings/AMMRankingsTable.tsx

kuan121 · 2026-04-08T14:31:58Z

src/containers/AMMRankings/ammRankings.scss

+          color: $white;
+          font-size: 14px;
+          white-space: nowrap;
+          @include semibold;


The asset pair name, e.g., CRYPTO/XRP, isn't semibold or bold according to the Figma design.

src/containers/AMMRankings/ammRankings.scss

src/containers/AMMRankings/AMMRankingsTable.tsx

pdp2121 reviewed Mar 26, 2026

View reviewed changes

kuan121 reviewed Apr 1, 2026

View reviewed changes

kuan121 reviewed Apr 2, 2026

View reviewed changes

cybele-ripple force-pushed the amm-rankings-explorer-page branch from f1682aa to ec81759 Compare April 3, 2026 23:04

cybele-ripple changed the base branch from main to amm-object-page April 3, 2026 23:08

kuan121 added 20 commits April 6, 2026 09:37

Initial commit for AMM Pool page

50f3c13

Correctly handle fully liquidated AMM pools

d1848ed

Fix chart not displaying the latest data point

12d36db

Add unit tests

5fc2d81

Fix pagination flash by using useEffect instead of react-query in use…

6341f16

…CursorPaginatedQuery

Migrate MPT page to use shared useCursorPaginatedQuery hook for trans…

dd52fab

…fers

Fix amount formatting issue

d292e35

Set batch size for DEX Trades, Transfers and Deposits/Withdraws table…

c6bc5dd

…s back to 200

delete planning file

11b915b

add translations for other languages

248a285

Fix linting issue

73388de

minor refactoring

25cb9ac

Delete old AMM Pool code

0ec692e

remove unused or duplicate keys

e89daef

remove one more duplicate key 'volume'

0818f89

minor refactoring: move files around and extract elements into separa…

f05b609

…te components

update style to match exactly with figma design

6eb6949

update styles for mobile and tablet views

ce4c7ff

Update style and text content for liquidated amm pool alert

4c79e06

kuan121 and others added 10 commits April 6, 2026 13:54

Use 'deleted' rather than 'liquidated' for deleted AMM pool

bdfc61a

Updated copyabletext tooltip text to white

08b5f4d

initial commit for AMM rankings page

b740250

make TVL volume chart reusable

30eef81

added caching and move from client side to serverside for token fetching

5c672e3

addressed PR comments related to wording and unused variables

2a0ebb7

Changed all React Router imports from 'react-router' to 'react-router…

6690125

…-dom' because in React Router v6 for browser applications, hooks like useLocation(), useParams(), and Routes must be imported from 'react-router-dom' (which provides browser context) and addressed PR issues

fixed failing tests

cde1ea2

addressed PR comments

8f4499f

merge from main

c030e5b

cybele-ripple force-pushed the amm-rankings-explorer-page branch from b6341b2 to c030e5b Compare April 6, 2026 21:03

cybele-ripple added 5 commits April 6, 2026 14:09

Merge branch 'amm-object-page' into amm-rankings-explorer-page

f276aed

update translations file to adhere to unit tests

5b0acf2

fix linter errors

dd9b57f

remove duplication

f60b823

end of file fix

fb3ac00

pdp2121 reviewed Apr 7, 2026

View reviewed changes

cybele-ripple added 6 commits April 7, 2026 12:50

resolved missing code from rebase; adjusted APR display

b2cc8ef

dont multiply APR by 100

29fc0c3

resolved linting issue

b61ffb3

remove unused terms

43cc138

consolidated code and addressed comments

4c0d2ed

lint fix

1852fec

kuan121 reviewed Apr 8, 2026

View reviewed changes

src/containers/AMMRankings/AMMRankingsTable.tsx Outdated Show resolved Hide resolved

cybele-ripple added 5 commits April 8, 2026 14:25

addressed PR comments

1962033

linting fix

a634435

Merge branch 'amm-object-page' into amm-rankings-explorer-page

d1011d7

fix mobile view

78f8683

remove bolded

f0a8006

Conversation

cybele-ripple commented Mar 16, 2026

High Level Overview of Change

Context of Change

Type of Change

Uh oh!

semgrep-code-ripple-github-org bot commented Mar 16, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

cybele-ripple Apr 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

cybele-ripple Apr 7, 2026 •

edited

Loading