Skip to content

Permission Delegation support #1315

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
cybele-ripple wants to merge 10 commits into
base: main
Choose a base branch
from
Open

Permission Delegation support #1315

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
9fad955
inital commit
cybele-ripple Apr 16, 2026
ca28cc1
added new definitions to all translation files
cybele-ripple Apr 17, 2026
ca076ad
linter fix
cybele-ripple Apr 17, 2026
beb5a3b
fix test error
cybele-ripple Apr 17, 2026
ea371bb
Refactor PermissionDelegation and unify collapsible sections
cybele-ripple Apr 24, 2026
5e01781
Switch PermissionDelegation test to MemoryRouter from react-router
cybele-ripple Apr 24, 2026
fe5e0ab
Fix lint and deflake PermissionDelegation tests
cybele-ripple Apr 24, 2026
f38c14d
Restore translation keys removed from branch
cybele-ripple Apr 24, 2026
3090e55
test: assert permission-delegation renders in static parts test
cybele-ripple May 22, 2026
fa880a2
Merge remote-tracking branch 'ripple/main' into explorer-permission-d…
cybele-ripple May 22, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions public/locales/ca-CA/translations.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -756,6 +756,7 @@
"account_page_asset_table_no_lptoken": null,
"account_page_asset_table_no_mpt": null,
"account_page_asset_table_no_nft": null,
"account_page_permission_delegation": null,
"tx_hash": null,
"timestamp": null,
"amount_in": null,
Expand Down
1 change: 1 addition & 0 deletions public/locales/en-US/translations.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -757,6 +757,7 @@
"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",

@kuan121 kuan121 Apr 27, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Can you update the screenshots in the PR description?

"tx_hash": "Tx Hash",
"timestamp": "Timestamp (UTC)",
"amount_in": "Amount In",
Expand Down
1 change: 1 addition & 0 deletions public/locales/es-ES/translations.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -757,6 +757,7 @@
"account_page_asset_table_no_lptoken": null,
"account_page_asset_table_no_mpt": null,
"account_page_asset_table_no_nft": null,
"account_page_permission_delegation": null,
"tx_hash": null,
"timestamp": null,
"amount_in": null,
Expand Down
1 change: 1 addition & 0 deletions public/locales/fr-FR/translations.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -757,6 +757,7 @@
"account_page_asset_table_no_lptoken": null,
"account_page_asset_table_no_mpt": null,
"account_page_asset_table_no_nft": null,
"account_page_permission_delegation": null,
"tx_hash": null,
"timestamp": null,
"amount_in": null,
Expand Down
1 change: 1 addition & 0 deletions public/locales/ja-JP/translations.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -757,6 +757,7 @@
"account_page_asset_table_no_lptoken": null,
"account_page_asset_table_no_mpt": null,
"account_page_asset_table_no_nft": null,
"account_page_permission_delegation": null,
"tx_hash": null,
"timestamp": null,
"amount_in": null,
Expand Down
1 change: 1 addition & 0 deletions public/locales/ko-KR/translations.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -757,6 +757,7 @@
"account_page_asset_table_no_lptoken": null,
"account_page_asset_table_no_mpt": null,
"account_page_asset_table_no_nft": null,
"account_page_permission_delegation": null,
"tx_hash": null,
"timestamp": null,
"amount_in": null,
Expand Down
1 change: 1 addition & 0 deletions public/locales/my-MM/translations.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -757,6 +757,7 @@
"account_page_asset_table_no_lptoken": null,
"account_page_asset_table_no_mpt": null,
"account_page_asset_table_no_nft": null,
"account_page_permission_delegation": null,
"tx_hash": null,
"timestamp": null,
"amount_in": null,
Expand Down
58 changes: 13 additions & 45 deletions src/containers/Accounts/AccountAsset/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import './styles.scss'
import { useTranslation } from 'react-i18next'
import { localizeNumber } from '../../shared/utils'
import { useLanguage } from '../../shared/hooks'
import ArrowIcon from '../../shared/images/down_arrow.svg'
import { CollapsibleSection } from '../../shared/components/CollapsibleSection'
import { HeldIOUs } from './assetTables/HeldIOUs'
import { HeldMPTs } from './assetTables/HeldMPTs'
import { HeldLPTokens } from './assetTables/HeldLPTokens'
Expand Down Expand Up @@ -143,32 +143,14 @@ export default function AccountAsset({
const [heldTab, setHeldTab] = useState<HeldAssetTabKey>('iou')
const [issuedTab, setIssuedTab] = useState<IssuedAssetTabKey>('iou')

// Collapse state - default to expanded (true means open)
const [heldSectionOpen, setHeldSectionOpen] = useState(true)
const [issuedSectionOpen, setIssuedSectionOpen] = useState(true)

return (
<section className="account-asset">
{/* Assets Held */}
<div className="asset-section-header">
<h3 className="account-asset-title">
{t('account_page_asset_held_title')}
</h3>
<button
type="button"
className="asset-section-toggle"
onClick={() => setHeldSectionOpen((s) => !s)}
aria-expanded={heldSectionOpen}
aria-label="Toggle assets held section"
>
<ArrowIcon
className={`asset-section-arrow ${heldSectionOpen ? 'open' : ''}`}
/>
</button>
</div>
<div
className="account-asset-content"
style={{ display: heldSectionOpen ? 'block' : 'none' }}
<CollapsibleSection
title={t('account_page_asset_held_title')}
ariaLabel="Toggle assets held section"
defaultOpen
keepMounted
>
<div
className="account-asset-tabs"
Expand Down Expand Up @@ -250,28 +232,14 @@ export default function AccountAsset({
>
<HeldNFTs accountId={accountId} onChange={updateHeldNFTs} />
</div>
</div>
</CollapsibleSection>

{/* Assets Issued */}
<div className="asset-section-header">
<h3 className="account-asset-title">
{t('account_page_asset_issued_title')}
</h3>
<button
type="button"
className="asset-section-toggle"
onClick={() => setIssuedSectionOpen((s) => !s)}
aria-expanded={issuedSectionOpen}
aria-label="Toggle assets issued section"
>
<ArrowIcon
className={`asset-section-arrow ${issuedSectionOpen ? 'open' : ''}`}
/>
</button>
</div>
<div
className="account-asset-content"
style={{ display: issuedSectionOpen ? 'block' : 'none' }}
<CollapsibleSection
title={t('account_page_asset_issued_title')}
ariaLabel="Toggle assets issued section"
defaultOpen
keepMounted
>
<div
className="account-asset-tabs"
Expand Down Expand Up @@ -336,7 +304,7 @@ export default function AccountAsset({
>
<IssuedNFTs accountId={accountId} onChange={updateIssuedNFTs} />
</div>
</div>
</CollapsibleSection>
</section>
)
}
51 changes: 0 additions & 51 deletions src/containers/Accounts/AccountAsset/styles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,51 +4,6 @@
padding: 24px 0px;
}

.account-asset-title {
@include bold;

font-size: 20px;
}

.asset-section-header {
display: flex;
align-items: center;
justify-content: flex-start;
margin: 24px 0 20px;
gap: 2px;

&:first-child {
margin-top: 0;
}

.account-asset-title {
margin: 0;
}

.asset-section-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 6px;
border: 0;
background: transparent;
color: inherit;
cursor: pointer;
}

.asset-section-arrow {
display: inline-block;
width: 18px;
height: 18px;
transform-origin: center;
transition: transform 180ms ease;
}

.asset-section-arrow.open {
transform: rotate(180deg);
}
}

.account-asset-tabs {
display: flex;
height: 30px;
Expand Down Expand Up @@ -254,9 +209,3 @@
max-height: 400px;
}
}

@media (max-width: $tablet-portrait-upper-boundary) {
.account-asset-title {
font-size: 18px;
}
}
8 changes: 6 additions & 2 deletions src/containers/Accounts/AccountAsset/test/AccountAsset.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -362,7 +362,9 @@ describe('AccountAsset Component', () => {
})

// Verify all 4 held asset table wrappers and asset tables are rendered
const allSections = container.querySelectorAll('.account-asset-content')
const allSections = container.querySelectorAll(
'.collapsible-section-body',
)
const heldSection = allSections[0] // First section (Held)

await waitFor(() => {
Expand Down Expand Up @@ -394,7 +396,9 @@ describe('AccountAsset Component', () => {
})

// Verify all 3 issued asset table wrappers and asset tables are rendered
const allSections = container.querySelectorAll('.account-asset-content')
const allSections = container.querySelectorAll(
'.collapsible-section-body',
)
const issuedSection = allSections[1] // Second section (Issued)

await waitFor(() => {
Expand Down
41 changes: 14 additions & 27 deletions src/containers/Accounts/AccountSummary/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
import { useState } from 'react'
import { useTranslation } from 'react-i18next'

import { useLanguage } from '../../shared/hooks'
import ArrowIcon from '../../shared/images/down_arrow.svg'
import { CollapsibleSection } from '../../shared/components/CollapsibleSection'
import Balances from './Balances'
import DetailsCard from './DetailsCard'
import FlagsCard from './FlagsCard'
Expand All @@ -21,37 +20,25 @@ export const AccountSummary = ({
}: AccountSummaryProps) => {
const { t } = useTranslation()
const lang = useLanguage()
const [propertiesOpen, setPropertiesOpen] = useState(false)

return (
<section className="account-summary">
<Balances account={account} xrpToUSDRate={xrpToUSDRate} />

<div className="properties">
<div className="properties-header">
<h3>{t('account_page_account_properties')}</h3>
<button
type="button"
className="properties-toggle"
onClick={() => setPropertiesOpen((s) => !s)}
aria-expanded={propertiesOpen}
aria-label="Toggle account properties"
>
<ArrowIcon
className={`properties-arrow ${propertiesOpen ? 'open' : ''}`}
/>
</button>
<CollapsibleSection
className="properties"
title={t('account_page_account_properties')}
ariaLabel="Toggle account properties"
defaultOpen={false}
>
<div className="properties-grid">
<FlagsCard account={account} />
{account.signerList?.signers && (
<SignersCard signers={account.signerList.signers} />
)}
<DetailsCard account={account} lang={lang} />
</div>
{propertiesOpen && (
<div className="properties-grid">
<FlagsCard account={account} />
{account.signerList?.signers && (
<SignersCard signers={account.signerList.signers} />
)}
<DetailsCard account={account} lang={lang} />
</div>
)}
</div>
</CollapsibleSection>
</section>
)
}
Expand Down
Loading
Loading