Permission Delegation support

public/locales/ca-CA/translations.json

@@ -761,6 +761,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,

public/locales/en-US/translations.json

@@ -763,6 +763,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",
   "tx_hash": "Tx Hash",
   "timestamp": "Timestamp (UTC)",
   "amount_in": "Amount In",

public/locales/es-ES/translations.json

@@ -762,6 +762,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,

public/locales/fr-FR/translations.json

@@ -762,6 +762,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,

public/locales/ja-JP/translations.json

@@ -762,6 +762,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,

public/locales/ko-KR/translations.json

@@ -762,6 +762,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,

public/locales/my-MM/translations.json

@@ -762,6 +762,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,

src/containers/Accounts/AccountAsset/index.tsx

@@ -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'
@@ -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"
@@ -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"
@@ -336,7 +304,7 @@ export default function AccountAsset({
         >
           <IssuedNFTs accountId={accountId} onChange={updateIssuedNFTs} />
         </div>
-      </div>
+      </CollapsibleSection>
     </section>
   )
 }

src/containers/Accounts/AccountAsset/styles.scss

@@ -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;
@@ -268,9 +223,3 @@
     max-height: 400px;
   }
 }
-
-@media (max-width: $tablet-portrait-upper-boundary) {
-  .account-asset-title {
-    font-size: 18px;
-  }
-}

src/containers/Accounts/AccountAsset/test/AccountAsset.test.tsx

@@ -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(() => {
@@ -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(() => {

src/containers/Accounts/AccountSummary/index.tsx

@@ -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'
@@ -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>
   )
 }