Permission Delegation support by cybele-ripple · Pull Request #1315 · ripple/explorer

cybele-ripple · 2026-04-17T19:11:25Z

High Level Overview of Change

This PR includes a permission delegation section in the account account page.

Context of Change

The new permission delegation section appears between account properties and assets held in the account page. If the account does not have any permission delegations associated with it, then the section will now appear

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

Example of the account page before any permission delegations (or if the account does not have any permission delegations associated with it):

Screenshots for both desktop and mobile after the permission delegation changes are made:

Test Plan

There are tests that cover this change:

src/containers/Accounts/test/index.test.tsx
src/containers/Accounts/PermissionDelegation/test/PermissionDelegation.test.tsx

kuan121 · 2026-04-23T20:15:22Z

  "account_page_asset_table_no_lptoken": "No LP Tokens found",
  "account_page_asset_table_no_mpt": "No MPTs found",
  "account_page_asset_table_no_nft": "No NFTs found",
+  "account_page_permission_delegation": "Permission delegation",


Permission Delegation?

Resolved here

kuan121 · 2026-04-23T20:17:27Z

+
+  // Don't render the section if there are no delegations and we're done loading
+  if (!isLoading && delegates.length === 0) {
+    return null


If we return null, the component isn't rendered? Do we test that?

Correct. There is a test in place for this case.

kuan121 · 2026-04-23T20:19:00Z

+      <div className="asset-section-header">
+        <h3 className="account-asset-title">
+          {t('account_page_permission_delegation')}
+        </h3>
+        <button
+          type="button"
+          className="asset-section-toggle"
+          onClick={() => setIsOpen((s) => !s)}
+          aria-expanded={isOpen}
+          aria-label="Toggle permission delegation"
+        >
+          <ArrowIcon
+            className={`asset-section-arrow ${isOpen ? 'open' : ''}`}
+          />
+        </button>
+      </div>


Do we use the same style and HTML code for Account Properties?

Yes there are shared components. I made a CollapsibleSection component that is now shared between Account Properties (AccountSummary) and PermissionDelegation:
src/containers/shared/components/CollapsibleSection/index.tsx
src/containers/shared/components/CollapsibleSection/styles.scss

kuan121 · 2026-04-23T20:26:20Z

+                  {delegates.length === 0 ? (
+                    <EmptyMessageTableRow colSpan={3}>
+                      {t('account_page_permission_delegation_no_delegations')}
+                    </EmptyMessageTableRow>
+                  ) : (


Is this unnecessary since we don't show the component when delegates is empty.

Yes. Removed this section which is now reflected in the latest commits

kuan121 · 2026-04-23T20:27:14Z

+  "account_page_permission_delegation_column_granted_to": "Granted To",
+  "account_page_permission_delegation_column_status": "Status",
+  "account_page_permission_delegation_status_active": "Active",
+  "account_page_permission_delegation_status_expired": "Expired",


Where is this used?

It's stale code from a previous change. Updated the translations pages so that only account_page_permission_delegation is added:
public/locales/ca-CA/translations.json
public/locales/en-US/translations.json
public/locales/es-ES/translations.json
public/locales/fr-FR/translations.json
public/locales/ja-JP/translations.json
public/locales/ko-KR/translations.json
public/locales/my-MM/translations.json

kuan121 · 2026-04-23T20:28:06Z

+                    </th>
+                  </tr>
+                </thead>
+                <tbody>


What if we have 100 permissions, do we just show a giant and long table? Do we ask the design about this?

Yes the plan is to show a large table. This section (along with the others) can be minimized

kuan121 · 2026-04-23T20:31:12Z

+                          </td>
+                          <td>
+                            {t(
+                              'account_page_permission_delegation_status_active',


Is the status always Active? If yes, we don't need this column?

This section is now removed

kuan121 · 2026-04-23T20:32:55Z

+  .account-asset-table table {
+    min-width: 0;
+  }


Is it a good idea to just reuse this without any renaming? This table isn't an asset table. I would rather create new CSS rule. Do we have share table CSS or component in explorer that we can reuse?

I replaced the table with a custom card here. Custom CSS for this card is now here.

kuan121 · 2026-04-23T20:35:00Z

+   from AccountAsset via the shared .account-asset / .asset-section-header /
+   .account-asset-table classes. */
+
+.permission-delegation .permission-delegation-table-wrapper {


Is it good UX to have a table span the full width of the screen when it only contains three columns? Bringing this up for consideration—could we instead use a layout similar to the Account Properties or Signers sections, like those shown here: https://livenet.xrpl.org/accounts/rMxCKbEDwqr76QuheSUMdEGf4B9xJ8m5De

Yes and good idea. Implemented this in src/containers/Accounts/PermissionDelegation/styles.scss. I replaced the table with a delegate-list.

kuan121 · 2026-04-23T20:35:37Z

  default: () => <div data-testid="account-asset">Account Asset</div>,
 }))

+jest.mock('../PermissionDelegation', () => ({


Why do we need this if we aren't verify anything in this test file?

The mock is needed for isolation, not verification. I am mocking ../PermissionDelegation so rendering <Accounts> does not pull in the actual PermissionDelegation since this is for a unit test on Accounts specifically

Then, should we do something similar to other component and verify the content of in it('renders static parts', async () => {

mvadari · 2026-04-23T21:15:36Z

Not sure if this is happening in another PR, but IMO the transaction page (maybe also the table detail section) should also show that the tx was sent by a delegate

- Extract shared CollapsibleSection component used by PermissionDelegation, AccountAsset, and AccountSummary (removes 3 duplicate implementations) - Redesign PermissionDelegation as a card layout (address + permission chips) instead of a full-width table - Drop the always-"Active" Status column and unused EmptyMessageTableRow branch - Remove unused in-branch translation keys (permission_delegation column/ status/no_delegations, assets_available, other_data, not_available, percent_of_supply, currency_toggle_help)

CI fails to resolve react-router-dom from the new test file. Use MemoryRouter from react-router (the pattern used by QuickHarness) to avoid the resolution issue.

- Reorder padding/gap in delegate-item to satisfy stylelint - Wait for rendered state (not just mock call) in the empty and card-structure tests to avoid CI timing failures - Re-prettier AccountAsset styles.scss

Restore assets_available, other_data, not_available, percent_of_supply, and currency_toggle_help at their original positions. These were added earlier in this branch and should be preserved even if not yet wired up.

kuan121 · 2026-04-27T19:06:32Z

  default: () => <div data-testid="account-asset">Account Asset</div>,
 }))

+jest.mock('../PermissionDelegation', () => ({


Then, should we do something similar to other component and verify the content of in it('renders static parts', async () => {

kuan121 · 2026-04-27T19:06:53Z

  "account_page_asset_table_no_lptoken": "No LP Tokens found",
  "account_page_asset_table_no_mpt": "No MPTs found",
  "account_page_asset_table_no_nft": "No NFTs found",
+  "account_page_permission_delegation": "Permission Delegation",


Can you update the screenshots in the PR description?

cybele-ripple added 4 commits April 16, 2026 16:23

inital commit

9fad955

added new definitions to all translation files

ca28cc1

linter fix

ca076ad

fix test error

beb5a3b

kuan121 reviewed Apr 23, 2026

View reviewed changes

cybele-ripple added 4 commits April 24, 2026 11:27

Switch PermissionDelegation test to MemoryRouter from react-router

5e01781

CI fails to resolve react-router-dom from the new test file. Use MemoryRouter from react-router (the pattern used by QuickHarness) to avoid the resolution issue.

Fix lint and deflake PermissionDelegation tests

fe5e0ab

- Reorder padding/gap in delegate-item to satisfy stylelint - Wait for rendered state (not just mock call) in the empty and card-structure tests to avoid CI timing failures - Re-prettier AccountAsset styles.scss

Restore translation keys removed from branch

f38c14d

Restore assets_available, other_data, not_available, percent_of_supply, and currency_toggle_help at their original positions. These were added earlier in this branch and should be preserved even if not yet wired up.

kuan121 reviewed Apr 27, 2026

View reviewed changes

Conversation

cybele-ripple commented Apr 17, 2026

High Level Overview of Change

Context of Change

Type of Change

Codebase Modernization

Before / After

Test Plan

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

kuan121 Apr 23, 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!

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!

kuan121 Apr 23, 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!

kuan121 Apr 23, 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!

kuan121 Apr 23, 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!

kuan121 Apr 23, 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!

mvadari commented Apr 23, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

kuan121 Apr 23, 2026 •

edited

Loading

kuan121 Apr 23, 2026 •

edited

Loading

kuan121 Apr 23, 2026 •

edited

Loading

kuan121 Apr 23, 2026 •

edited

Loading

kuan121 Apr 23, 2026 •

edited

Loading