Skip to content

Commit 1d1f100

Browse files
authored
Explorer Account page revamp: Balances, Summary and Assets (#1245)
## High Level Overview of Change Refactoring the Explorer Account page 1. Add a Balance section showing XRP Balance, XRP Balance (USD) and Reserve Balance 1. Group account information, flags and Signer into a Account Properties section 1. Replace Balance Dropdown and Asset Tab with two Assets sections * Held Assets: IOUs, MPTs, LP Tokens and NFTs * Issued Assets: IOUs, MPTs and NFTs <!-- Please include a summary/list of the changes. If too broad, please consider splitting into multiple PRs. --> ### Context of Change <!-- Please include the context of a change. If a bug fix, when was the bug introduced? What was the behavior? If a new feature, why was this architecture chosen? What were the alternatives? If a refactor, how is this better than the previous implementation? If there is a design document for this feature, please link it here. --> The current XRPL Explorer Account page provides functional access to raw ledger data and transaction history, but lacks the clarity, structure, and usability expected by both casual users and developers. Key information—such as account properties, AMM participation, trustlines, and assets held/issued—is presented in a fragmented way, making it difficult to interpret an account's status, asset relationships, and overall activity at a glance. This is a revamp of the Explorer Account page to deliver a more organized, performant, and informative experience. ### Type of Change <!-- Please check relevant options, delete irrelevant ones. --> - [ ] Bug fix (non-breaking change which fixes an issue) - [x] New feature (non-breaking change which adds functionality) - [x] Breaking change (fix or feature that would cause existing functionality to not work as expected) - [ ] Refactor (non-breaking change that only restructures code) - [x] Tests (You added tests for code that already exists, or your new feature included in this PR) - [ ] Documentation Updates - [x] Translation Updates - [ ] Release ### Codebase Modernization <!-- In an effort to modernize the codebase, you should convert the files that you work with to React Hooks and TypeScript, and update tests to use the React Testing Library instead of Enzyme. If this is not possible (e.g. it's too many changes, touching too many files, etc.) please explain why here. --> - [ ] Updated files to React Hooks - [ ] Updated files to TypeScript - [x] Updated tests to React Testing Library ## Before / After <!-- If just refactoring / back-end changes, this can be just an in-English description of the change at a technical level. If a UI change, screenshots should be included. --> #### Before - Account Information and XRP Balance <img width="1028" height="707" alt="Before - Account Information and XRP Balance" src="https://github.com/user-attachments/assets/bf8f9908-6080-4619-a0e6-d0960754853e" /> #### After - Account Information and XRP Balance <img width="1077" height="811" alt="After - Account Information and XRP Balance" src="https://github.com/user-attachments/assets/a45a6efa-e86e-43de-b716-0e8fa0d35f9e" /> #### Before - Account Assets <img width="1027" height="890" alt="Before - Account Assets" src="https://github.com/user-attachments/assets/75b4c6ae-1931-4fa5-b0cd-84b55700ade2" /> #### After - Account Assets <img width="1148" height="890" alt="After - Account Assets" src="https://github.com/user-attachments/assets/9a4fa4e9-624e-4047-b6f4-bcf3f7958190" /> ## Test Plan <!-- Please describe the tests that you ran to verify your changes and provide instructions so that others can reproduce. --> * Unit Tests * Manual Tests 1. npm run build && npm start 2. Visit account page for various accounts containing different types of assets and confirm that the page and data show as expected.
1 parent a473e16 commit 1d1f100

File tree

101 files changed

+10332
-2490
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

101 files changed

+10332
-2490
lines changed

.env.example

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,3 +28,6 @@ VITE_DATA_URL=https://data.xrpl.org/v1/network
2828
# Whether to use ws instead of wss (boolean)
2929
# Only used locally (the deployed Explorer requires wss)
3030
VITE_INSECURE_WS=0
31+
32+
# LOS Endpoint URL
33+
VITE_LOS_URL=https://los.dev.ripplex.io

package-lock.json

Lines changed: 216 additions & 34 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

package.json

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,8 @@
44
"version": "1.5.0",
55
"dependencies": {
66
"@rollup/plugin-inject": "^5.0.5",
7-
"@testing-library/jest-dom": "^5.17.0",
8-
"@testing-library/react": "^12.1.5",
97
"@vitejs/plugin-react": "^4.2.1",
108
"@xrplf/isomorphic": "^1.0.0-beta.1",
11-
"@xrplf/prettier-config": "^1.9.1",
129
"assert": "^2.1.0",
1310
"autoprefixer": "^10.4.20",
1411
"axios": "^1.6.5",
@@ -58,6 +55,9 @@
5855
"@babel/eslint-parser": "^7.22.6",
5956
"@babel/preset-env": "^7.25.7",
6057
"@babel/preset-react": "^7.27.1",
58+
"@testing-library/jest-dom": "^5.17.0",
59+
"@testing-library/react": "^12.1.5",
60+
"@testing-library/react-hooks": "^8.0.1",
6161
"@types/create-hash": "^1.2.6",
6262
"@types/enzyme": "^3.10.12",
6363
"@types/jest": "^26.0.24",
@@ -69,6 +69,7 @@
6969
"@types/testing-library__jest-dom": "^5.14.9",
7070
"@typescript-eslint/eslint-plugin": "^8.32.1",
7171
"@typescript-eslint/parser": "^8.32.1",
72+
"@xrplf/prettier-config": "^1.9.1",
7273
"babel-jest": "^29.7.0",
7374
"cheerio": "1.0.0-rc.3",
7475
"enzyme": "3.11.0",

public/locales/ca-CA/translations.json

Lines changed: 86 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,6 @@
11
{
22
"action": "acció",
33
"assets": "Actius",
4-
"assets.nft_tab_title": "NFTs",
5-
"assets.issued_tab_title": "Tokens encunyats",
6-
"assets.no_issued_message": "No s'han trobat Tokens",
74
"assets.no_nfts_message": "No s'han trobat NFTs",
85
"network": "Xarxa",
96
"amendments": "Amendments",
@@ -540,7 +537,6 @@
540537
"holders": null,
541538
"trustlines": null,
542539
"website": null,
543-
"assets.mpt_tab_title": null,
544540
"assets.no_mpts_message": null,
545541
"transaction_type_name_MPTokenIssuanceCreate": null,
546542
"transaction_type_name_MPTokenIssuanceDestroy": null,
@@ -610,5 +606,90 @@
610606
"vault_create_table_detail": null,
611607
"withdraws": null,
612608
"deletes": null,
613-
"vault_delete_table_detail": null
609+
"vault_delete_table_detail": null,
610+
"account_flag_title_lsf_global_freeze": null,
611+
"account_flag_title_lsf_disable_master": null,
612+
"account_flag_title_lsf_default_ripple": null,
613+
"account_flag_title_lsf_allow_trustline_clawback": null,
614+
"account_flag_title_lsf_require_destination_tag": null,
615+
"account_flag_title_lsf_no_freeze": null,
616+
"account_flag_title_lsf_require_auth": null,
617+
"account_flag_title_lsf_disallow_xrp": null,
618+
"account_flag_title_lsf_disallow_incoming_trustline": null,
619+
"account_flag_title_lsf_disallow_incoming_pay_chan": null,
620+
"account_flag_title_lsf_disallow_incoming_nft_token_offer": null,
621+
"account_flag_title_asf_authorized_nft_token_minter": null,
622+
"account_flag_title_lsf_disallow_incoming_check": null,
623+
"account_flag_title_lsf_deposit_auth": null,
624+
"account_flag_title_asf_account_txn_id": null,
625+
"account_flag_description_lsf_global_freeze": null,
626+
"account_flag_description_lsf_disable_master": null,
627+
"account_flag_description_lsf_default_ripple": null,
628+
"account_flag_description_lsf_allow_trustline_clawback": null,
629+
"account_flag_description_lsf_require_destination_tag": null,
630+
"account_flag_description_lsf_no_freeze": null,
631+
"account_flag_description_lsf_require_auth": null,
632+
"account_flag_description_lsf_disallow_xrp": null,
633+
"account_flag_description_lsf_disallow_incoming_trustline": null,
634+
"account_flag_description_lsf_disallow_incoming_pay_chan": null,
635+
"account_flag_description_lsf_disallow_incoming_nft_token_offer": null,
636+
"account_flag_description_asf_authorized_nft_token_minter": null,
637+
"account_flag_description_lsf_disallow_incoming_check": null,
638+
"account_flag_description_lsf_deposit_auth": null,
639+
"account_flag_description_asf_account_txn_id": null,
640+
"account_page_address": null,
641+
"account_page_address_tag": null,
642+
"account_page_classic_address": null,
643+
"account_page_deleted_account_label": null,
644+
"account_page_deleted_account_warning": null,
645+
"account_page_extended_address": null,
646+
"account_page_domain": null,
647+
"account_page_reserve_balance": null,
648+
"account_page_xrp_balance": null,
649+
"account_page_xrp_balance_in_usd": null,
650+
"account_page_account_properties": null,
651+
"account_page_flags": null,
652+
"account_page_flag_status_enabled": null,
653+
"account_page_flag_status_disabled": null,
654+
"account_page_signers": null,
655+
"account_page_signer_weight": null,
656+
"account_page_details": null,
657+
"account_page_current_sequence": null,
658+
"account_page_ticket_count": null,
659+
"account_page_email_hash": null,
660+
"account_page_payment_channels": null,
661+
"account_page_payment_channels_text": null,
662+
"account_page_nft_minter": null,
663+
"account_page_asset_held_title": null,
664+
"account_page_asset_issued_title": null,
665+
"account_page_asset_tab_iou": null,
666+
"account_page_asset_tab_lptoken": null,
667+
"account_page_asset_tab_mpt": null,
668+
"account_page_asset_tab_nft": null,
669+
"account_page_asset_table_column_amm_instance": null,
670+
"account_page_asset_table_column_amm_pair": null,
671+
"account_page_asset_table_column_asset_class": null,
672+
"account_page_asset_table_column_balance": null,
673+
"account_page_asset_table_column_balance_usd": null,
674+
"account_page_asset_table_column_currency_code": null,
675+
"account_page_asset_table_column_frozen": null,
676+
"account_page_asset_table_column_highest_bid": null,
677+
"account_page_asset_table_column_holders": null,
678+
"account_page_asset_table_column_issuer": null,
679+
"account_page_asset_table_column_locked": null,
680+
"account_page_asset_table_column_lowest_ask": null,
681+
"account_page_asset_table_column_price_usd": null,
682+
"account_page_asset_table_column_share": null,
683+
"account_page_asset_table_column_supply": null,
684+
"account_page_asset_table_column_ticker": null,
685+
"account_page_asset_table_column_token_id": null,
686+
"account_page_asset_table_column_transfer_fee": null,
687+
"account_page_asset_table_column_trustlines": null,
688+
"account_page_asset_table_column_url": null,
689+
"account_page_asset_table_mpt_locked_global": null,
690+
"account_page_asset_table_mpt_locked_individual": null,
691+
"account_page_asset_table_no_iou": null,
692+
"account_page_asset_table_no_lptoken": null,
693+
"account_page_asset_table_no_mpt": null,
694+
"account_page_asset_table_no_nft": null
614695
}

public/locales/en-US/translations.json

Lines changed: 86 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,6 @@
11
{
22
"action": "action",
33
"assets": "Assets",
4-
"assets.nft_tab_title": "Non-Fungible Tokens",
5-
"assets.mpt_tab_title": "Multi-Purpose Tokens",
6-
"assets.issued_tab_title": "Issued Tokens",
7-
"assets.no_issued_message": "No tokens found.",
84
"assets.no_nfts_message": "No NFTs found.",
95
"assets.no_mpts_message": "No MPTs found.",
106
"network": "Network",
@@ -617,5 +613,90 @@
617613
"vault_create_table_detail": "vault for <Asset/>",
618614
"withdraws": "withdraws",
619615
"deletes": "deletes",
620-
"vault_delete_table_detail": "vault with id"
616+
"vault_delete_table_detail": "vault with id",
617+
"account_flag_title_lsf_global_freeze": "Global Freeze",
618+
"account_flag_title_lsf_disable_master": "Master Key Disabled",
619+
"account_flag_title_lsf_default_ripple": "Rippling",
620+
"account_flag_title_lsf_allow_trustline_clawback": "Clawback",
621+
"account_flag_title_lsf_require_destination_tag": "Require Destination Tag",
622+
"account_flag_title_lsf_no_freeze": "No Freeze",
623+
"account_flag_title_lsf_require_auth": "Require Authorization",
624+
"account_flag_title_lsf_disallow_xrp": "No XRP Allowed",
625+
"account_flag_title_lsf_disallow_incoming_trustline": "Block Trustlines",
626+
"account_flag_title_lsf_disallow_incoming_pay_chan": "Block Payment Channels",
627+
"account_flag_title_lsf_disallow_incoming_nft_token_offer": "Block NFT Offers",
628+
"account_flag_title_asf_authorized_nft_token_minter": "NFT Minter",
629+
"account_flag_title_lsf_disallow_incoming_check": "Block Checks",
630+
"account_flag_title_lsf_deposit_auth": "Deposit Authorization",
631+
"account_flag_title_asf_account_txn_id": "Track Account Latest Transaction",
632+
"account_flag_description_lsf_global_freeze": "Freeze all assets issued by this account.",
633+
"account_flag_description_lsf_disable_master": "Disable the account's master key pair.",
634+
"account_flag_description_lsf_default_ripple": "Enable rippling on this account's trust lines by default.",
635+
"account_flag_description_lsf_allow_trustline_clawback": "Allow account to claw back tokens it has issued.",
636+
"account_flag_description_lsf_require_destination_tag": "Require a destination tag to send transactions to this account.",
637+
"account_flag_description_lsf_no_freeze": "Permanently give up the ability to freeze individual trust lines or disable Global Freeze. This flag can never be disabled after being enabled.",
638+
"account_flag_description_lsf_require_auth": "Require authorization for users to hold balances issued by this address.",
639+
"account_flag_description_lsf_disallow_xrp": "XRP should not be sent to this account.",
640+
"account_flag_description_lsf_disallow_incoming_trustline": "Block incoming trust lines.",
641+
"account_flag_description_lsf_disallow_incoming_pay_chan": "Block incoming Payment Channels.",
642+
"account_flag_description_lsf_disallow_incoming_nft_token_offer": "Block incoming NFTokenOffers.",
643+
"account_flag_description_asf_authorized_nft_token_minter": "Enable to allow another account to mint non-fungible tokens (NFTokens) on this account's behalf.",
644+
"account_flag_description_lsf_disallow_incoming_check": "Block incoming Checks.",
645+
"account_flag_description_lsf_deposit_auth": "Enable Deposit Authorization on this account.",
646+
"account_flag_description_asf_account_txn_id": "Track the ID of this account's most recent transaction.",
647+
"account_page_address": "Address",
648+
"account_page_address_tag": "Tag",
649+
"account_page_classic_address": "Classic Address",
650+
"account_page_deleted_account_label": "Account Deleted",
651+
"account_page_deleted_account_warning": "This account has been deleted from the XRP Ledger. Historical data is shown for reference only.",
652+
"account_page_extended_address": "Extended Address (X-Address)",
653+
"account_page_domain": "Domain",
654+
"account_page_reserve_balance": "Reserve Balance",
655+
"account_page_xrp_balance": "XRP Balance",
656+
"account_page_xrp_balance_in_usd": "XRP Balance (USD)",
657+
"account_page_account_properties": "Account Properties",
658+
"account_page_flags": "Flags",
659+
"account_page_flag_status_enabled": "Enabled",
660+
"account_page_flag_status_disabled": "Disabled",
661+
"account_page_signers": "Signers",
662+
"account_page_signer_weight": "Weight",
663+
"account_page_details": "Details",
664+
"account_page_current_sequence": "Current Sequence",
665+
"account_page_ticket_count": "Ticket Count",
666+
"account_page_email_hash": "Email Hash",
667+
"account_page_payment_channels": "Payment Channels",
668+
"account_page_payment_channels_text": "{{currency}} available in {{number}} channel(s)",
669+
"account_page_nft_minter": "NFT Minter",
670+
"account_page_asset_held_title": "Assets Held",
671+
"account_page_asset_issued_title": "Assets Issued",
672+
"account_page_asset_tab_iou": "IOUs ({{count}})",
673+
"account_page_asset_tab_lptoken": "LP Tokens ({{count}})",
674+
"account_page_asset_tab_mpt": "MPTs ({{count}})",
675+
"account_page_asset_tab_nft": "NFTs ({{count}})",
676+
"account_page_asset_table_column_amm_instance": "AMM Instance",
677+
"account_page_asset_table_column_amm_pair": "AMM Pair",
678+
"account_page_asset_table_column_asset_class": "Asset Class",
679+
"account_page_asset_table_column_balance": "Balance",
680+
"account_page_asset_table_column_balance_usd": "Balance (USD)",
681+
"account_page_asset_table_column_currency_code": "Currency Code",
682+
"account_page_asset_table_column_frozen": "Frozen",
683+
"account_page_asset_table_column_highest_bid": "Highest Bid",
684+
"account_page_asset_table_column_holders": "Holders",
685+
"account_page_asset_table_column_issuer": "Issuer",
686+
"account_page_asset_table_column_locked": "Locked",
687+
"account_page_asset_table_column_lowest_ask": "Lowest Ask",
688+
"account_page_asset_table_column_price_usd": "Price (USD)",
689+
"account_page_asset_table_column_share": "Share (%)",
690+
"account_page_asset_table_column_supply": "Supply",
691+
"account_page_asset_table_column_ticker": "Ticker",
692+
"account_page_asset_table_column_token_id": "Token ID",
693+
"account_page_asset_table_column_transfer_fee": "Transfer Fee",
694+
"account_page_asset_table_column_trustlines": "Trustlines",
695+
"account_page_asset_table_column_url": "URL",
696+
"account_page_asset_table_mpt_locked_global": "Global",
697+
"account_page_asset_table_mpt_locked_individual": "Individual",
698+
"account_page_asset_table_no_iou": "No IOUs found",
699+
"account_page_asset_table_no_lptoken": "No LP Tokens found",
700+
"account_page_asset_table_no_mpt": "No MPTs found",
701+
"account_page_asset_table_no_nft": "No NFTs found"
621702
}

public/locales/es-ES/translations.json

Lines changed: 86 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,6 @@
11
{
22
"action": "acción",
33
"assets": "Activos",
4-
"assets.nft_tab_title": "Tokens No-Fungibles",
5-
"assets.issued_tab_title": "Tokens Emitidos",
6-
"assets.no_issued_message": "No se han encontrado tokens.",
74
"assets.no_nfts_message": "NFTs no encontrados.",
85
"network": "Red",
96
"amendments": null,
@@ -551,7 +548,6 @@
551548
"can_transfer": "Puede Transferir",
552549
"can_clawback": "Puede Recuperar",
553550
"search_results_banner": "¡La búsqueda de tokens por nombre y cuenta ya está disponible! Intenta buscar USD",
554-
"assets.mpt_tab_title": null,
555551
"assets.no_mpts_message": null,
556552
"transaction_type_name_MPTokenIssuanceCreate": null,
557553
"transaction_type_name_MPTokenIssuanceDestroy": null,
@@ -611,5 +607,90 @@
611607
"vault_create_table_detail": null,
612608
"withdraws": null,
613609
"deletes": null,
614-
"vault_delete_table_detail": null
610+
"vault_delete_table_detail": null,
611+
"account_flag_title_lsf_global_freeze": null,
612+
"account_flag_title_lsf_disable_master": null,
613+
"account_flag_title_lsf_default_ripple": null,
614+
"account_flag_title_lsf_allow_trustline_clawback": null,
615+
"account_flag_title_lsf_require_destination_tag": null,
616+
"account_flag_title_lsf_no_freeze": null,
617+
"account_flag_title_lsf_require_auth": null,
618+
"account_flag_title_lsf_disallow_xrp": null,
619+
"account_flag_title_lsf_disallow_incoming_trustline": null,
620+
"account_flag_title_lsf_disallow_incoming_pay_chan": null,
621+
"account_flag_title_lsf_disallow_incoming_nft_token_offer": null,
622+
"account_flag_title_asf_authorized_nft_token_minter": null,
623+
"account_flag_title_lsf_disallow_incoming_check": null,
624+
"account_flag_title_lsf_deposit_auth": null,
625+
"account_flag_title_asf_account_txn_id": null,
626+
"account_flag_description_lsf_global_freeze": null,
627+
"account_flag_description_lsf_disable_master": null,
628+
"account_flag_description_lsf_default_ripple": null,
629+
"account_flag_description_lsf_allow_trustline_clawback": null,
630+
"account_flag_description_lsf_require_destination_tag": null,
631+
"account_flag_description_lsf_no_freeze": null,
632+
"account_flag_description_lsf_require_auth": null,
633+
"account_flag_description_lsf_disallow_xrp": null,
634+
"account_flag_description_lsf_disallow_incoming_trustline": null,
635+
"account_flag_description_lsf_disallow_incoming_pay_chan": null,
636+
"account_flag_description_lsf_disallow_incoming_nft_token_offer": null,
637+
"account_flag_description_asf_authorized_nft_token_minter": null,
638+
"account_flag_description_lsf_disallow_incoming_check": null,
639+
"account_flag_description_lsf_deposit_auth": null,
640+
"account_flag_description_asf_account_txn_id": null,
641+
"account_page_address": null,
642+
"account_page_address_tag": null,
643+
"account_page_classic_address": null,
644+
"account_page_deleted_account_label": null,
645+
"account_page_deleted_account_warning": null,
646+
"account_page_extended_address": null,
647+
"account_page_domain": null,
648+
"account_page_reserve_balance": null,
649+
"account_page_xrp_balance": null,
650+
"account_page_xrp_balance_in_usd": null,
651+
"account_page_account_properties": null,
652+
"account_page_flags": null,
653+
"account_page_flag_status_enabled": null,
654+
"account_page_flag_status_disabled": null,
655+
"account_page_signers": null,
656+
"account_page_signer_weight": null,
657+
"account_page_details": null,
658+
"account_page_current_sequence": null,
659+
"account_page_ticket_count": null,
660+
"account_page_email_hash": null,
661+
"account_page_payment_channels": null,
662+
"account_page_payment_channels_text": null,
663+
"account_page_nft_minter": null,
664+
"account_page_asset_held_title": null,
665+
"account_page_asset_issued_title": null,
666+
"account_page_asset_tab_iou": null,
667+
"account_page_asset_tab_lptoken": null,
668+
"account_page_asset_tab_mpt": null,
669+
"account_page_asset_tab_nft": null,
670+
"account_page_asset_table_column_amm_instance": null,
671+
"account_page_asset_table_column_amm_pair": null,
672+
"account_page_asset_table_column_asset_class": null,
673+
"account_page_asset_table_column_balance": null,
674+
"account_page_asset_table_column_balance_usd": null,
675+
"account_page_asset_table_column_currency_code": null,
676+
"account_page_asset_table_column_frozen": null,
677+
"account_page_asset_table_column_highest_bid": null,
678+
"account_page_asset_table_column_holders": null,
679+
"account_page_asset_table_column_issuer": null,
680+
"account_page_asset_table_column_locked": null,
681+
"account_page_asset_table_column_lowest_ask": null,
682+
"account_page_asset_table_column_price_usd": null,
683+
"account_page_asset_table_column_share": null,
684+
"account_page_asset_table_column_supply": null,
685+
"account_page_asset_table_column_ticker": null,
686+
"account_page_asset_table_column_token_id": null,
687+
"account_page_asset_table_column_transfer_fee": null,
688+
"account_page_asset_table_column_trustlines": null,
689+
"account_page_asset_table_column_url": null,
690+
"account_page_asset_table_mpt_locked_global": null,
691+
"account_page_asset_table_mpt_locked_individual": null,
692+
"account_page_asset_table_no_iou": null,
693+
"account_page_asset_table_no_lptoken": null,
694+
"account_page_asset_table_no_mpt": null,
695+
"account_page_asset_table_no_nft": null
615696
}

0 commit comments

Comments
 (0)