feat: Add basic ledger entry page

public/locales/en-US/translations.json

@@ -136,7 +136,7 @@
   "close_request": "close channel request",
   "renew_channel": "renew chanel",
   "payment_channel_closed": "payment channel closed",
-  "paychannel_node_line1": "It <1><0>{{action}}</0></1> a PayChannel node from <3><0>{{account}}</0></3> to <5><0>{{counterAccount}}</0></5>",
+  "paychannel_node_line1": "It <1><0>{{action}}</0></1> a PayChannel <3><0>{{node}}</0></3> from <5><0>{{account}}</0></5> to <7><0>{{counterAccount}}</0></7>",
   "paychannel_amount_changed": "Amount changed by <1><0>{{difference}}</0><1><0>{{currency}}</0></1></1> from <3><0>{{previous}}</0><1><0>{{currency}}</0></1></3> to <5><0>{{final}}</0><1><0>{{currency}}</0></1></5>",
   "paychannel_balance_changed": "Balance changed by <1><0>{{difference}}</0><1><0>{{currency}}</0></1></1> from <3><0>{{previous}}</0><1><0>{{currency}}</0></1></3> to <5><0>{{final}}</0><1><0>{{currency}}</0></1></5>",
   "setfee_fees_description": "Future transactions will require a minimum fee of <amount />.",
@@ -263,20 +263,20 @@
   "meta": "Meta",
   "number_of_affected_node": "It affected {{count}} nodes in the ledger:",
   "nodes_type": "{{action}} nodes",
-  "node_meta_type": "It {{action}} a node with type",
-  "transaction_balance_line_one": "It <1><0>{{action}}</0></1> a <3><0>{{currency}}</0></3> RippleState node between <5><0>{{account}}</0></5> and <7><0>{{counterAccount}}</0></7>",
+  "node_meta_type": "It {{action}} a <Link>node</Link> with type",
+  "transaction_balance_line_one": "It <1><0>{{action}}</0></1> a <3><0>{{currency}}</0></3> RippleState <5><0>{{node}}</0></5> between <7><0>{{account}}</0></7> and <9><0>{{counterAccount}}</0></9>",
   "transaction_balance_line_two": "Balance changed by <1><0>{{change}}</0></1> from <3><0>{{previousBalance}}</0></3> to <5><0>{{finalBalance}}</0></5>",
   "transaction_outstanding_balance_line_two": "Outstanding balance changed by <1><0>{{change}}</0></1> from <3><0>{{previousBalance}}</0></3> to <5><0>{{finalBalance}}</0></5>",
-  "transaction_owned_directory": "It {{action}} a DirectoryNode node owned by",
-  "transaction_unowned_directory": "It {{action}} a DirectoryNode node",
+  "transaction_owned_directory": "It {{action}} a DirectoryNode <Link>node</Link> owned by",
+  "transaction_unowned_directory": "It {{action}} a DirectoryNode <Link>node</Link>",
   "transaction_mptoken_line_one": "It <1><0>{{action}}</0></1> an MPToken node of <3><0>{{account}}</0></3>",
-  "transaction_mpt_issuance_line_one": "It <1><0>{{action}}</0></1> an MPTokenIssuance node of <3><0>{{account}}</0></3>",
+  "transaction_mpt_issuance_line_one": "It <1><0>{{action}}</0></1> an MPTokenIssuance <3><0>node</0></3> of <5><0>{{account}}</0></5>",
   "owned_account_root": "It {{action}} the AccountRoot node of",
   "unowned_account_root": "It {{action}} the AccountRoot node",
   "account_balance_increased": "Balance increased by <1><0>{{difference}}</0><1><0>{{currency}}</0></1></1> from <3><0>{{previous}}</0><1><0>{{currency}}</0></1></3> to <5><0>{{final}}</0><1><0>{{currency}}</0></1></5>",
   "account_balance_decreased": "Balance decreased by <1><0>{{difference}}</0><1><0>{{currency}}</0></1></1> from <3><0>{{previous}}</0><1><0>{{currency}}</0></1></3> to <5><0>{{final}}</0><1><0>{{currency}}</0></1></5>",
   "decreased_from_to": "decreased by <1><0>{{change}}</0></1> from <3><0>{{previous}}</0></3> to <5><0>{{final}}</0></5>",
-  "offer_node_meta": "It <1><0>{{action}}</0></1> a <3><0>{{pair}}</0></3> offer node owned by <5><0>{{account}}</0></5> with sequence # <7><0>{{sequence}}</0></7>",
+  "offer_node_meta": "It <1><0>{{action}}</0></1> a <3><0>{{pair}}</0></3> offer <5><0>{{node}}</0></5> owned by <7><0>{{account}}</0></7> with sequence # <9><0>{{sequence}}</0></9>",
   "offer_replaces": "This offer replaces the existing offer #",
   "offer_partially_filled": "The offer was partially filled",
   "offer_filled": "The offer was filled",
@@ -700,5 +700,15 @@
   "account_page_asset_table_no_iou": "No IOUs found",
   "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_asset_table_no_nft": "No NFTs found",
+  "prev_ledger_index": "Previous Ledger Index",
+  "prev_tx_id": "Previous Modifying Transaction",
+  "entry_not_found": "Entry not found",
+  "entry_empty_title": "No entry hash supplied",
+  "entry_empty_hint": "Enter a entry hash in the search box",
+  "check_entry_id": "Please check your entry ID.",
+  "entry_short": "Entry",
+  "entry": "Entry",
+  "invalid_entry_id": "The entry ID is invalid",
+  "id": "ID"
 }

src/containers/Accounts/AMM/AMMAccounts/index.tsx

@@ -64,7 +64,7 @@ export const AMMAccounts = () => {
     */
     return getAccountInfo(rippledSocket, accountId)
       .then((accountInfo) =>
-        getLedgerEntry(rippledSocket, { index: accountInfo.AMMID })
+        getLedgerEntry(rippledSocket, accountInfo.AMMID)
           .then((ammLedgerEntry) => {
             asset1 = formatAsset(ammLedgerEntry.node.Asset)
             asset2 = formatAsset(ammLedgerEntry.node.Asset2)

src/containers/Accounts/AccountAsset/styles.scss

@@ -115,8 +115,8 @@
 }
 
 .account-asset-table-wrapper-fixed .account-asset-table {
-  overflow: auto;               /* Vertical scroll when overflowing, keep horizontal if needed */
-  max-height: 255px;            /* Fixed viewport height for the table area */
+  overflow: auto; /* Vertical scroll when overflowing, keep horizontal if needed */
+  max-height: 255px; /* Fixed viewport height for the table area */
   background: transparent;
   -webkit-overflow-scrolling: touch;
 
@@ -161,7 +161,10 @@
   z-index: 2;
   top: 0;
   padding: 10px 12px;
-  backdrop-filter: blur(100px); /* As table rows scroll under the header, they appear blurred behind it */
+  backdrop-filter: blur(
+    100px
+  ); /* As table rows scroll under the header, they appear blurred behind it */
+
   color: $black-50;
   font-size: 12px;
   text-align: left;

src/containers/Accounts/AccountSummary/styles.scss

@@ -338,7 +338,7 @@
           grid-row: 1;
         }
 
-        > .details-box:nth-child(n+3) {
+        > .details-box:nth-child(n + 3) {
           grid-column: 1 / span 2;
         }
       }
@@ -371,7 +371,7 @@
         }
 
         /* Ensure all boxes span full width in grid */
-        > .details-box:nth-child(n+3) {
+        > .details-box:nth-child(n + 3) {
           grid-column: 1;
         }
       }
@@ -397,8 +397,14 @@
         padding: 12px;
         gap: 8px;
       }
-      .details-label { font-size: 12px; }
-      .details-value { font-size: 14px; }
+
+      .details-label {
+        font-size: 12px;
+      }
+
+      .details-value {
+        font-size: 14px;
+      }
     }
 
     /* Extra narrow screens - force better text wrapping */
@@ -442,12 +448,16 @@
         flex: none;
       }
 
-      .xrp, .usd, .reserve {
+      .xrp,
+      .usd,
+      .reserve {
         height: auto;
         padding: 20px;
       }
 
-      .balance-value { font-size: 18px; }
+      .balance-value {
+        font-size: 18px;
+      }
 
       .balance-icon {
         width: 20px;
@@ -458,7 +468,10 @@
     .properties {
       .properties-header {
         gap: 8px;
-        .properties-toggle { padding: 4px; }
+
+        .properties-toggle {
+          padding: 4px;
+        }
 
         .properties-arrow {
           width: 16px;
@@ -476,15 +489,22 @@
           padding: 16px;
         }
 
-        .flags-card { grid-column: auto; }
-        .signers-card { grid-column: auto; }
+        .flags-card {
+          grid-column: auto;
+        }
 
-        .flags-list, .signers-list {
+        .signers-card {
+          grid-column: auto;
+        }
+
+        .flags-list,
+        .signers-list {
           max-height: calc(5 * 64px);
           padding-inline: 4px;
         }
 
-        .flag-item, .signer-item {
+        .flag-item,
+        .signer-item {
           padding: 10px;
         }
       }
@@ -494,7 +514,9 @@
   @media (max-width: $tablet-portrait-upper-boundary) {
     .properties {
       .properties-header {
-        h3 { font-size: 18px; }
+        h3 {
+          font-size: 18px;
+        }
       }
 
       .properties-grid .card-header .header-title {

src/containers/App/index.tsx

@@ -24,6 +24,7 @@ import {
   AMENDMENTS_ROUTE,
   AMENDMENT_ROUTE,
   MPT_ROUTE,
+  ENTRY_ROUTE,
   NODES_ROUTE,
   VALIDATORS_ROUTE,
   UPGRADE_STATUS_ROUTE,
@@ -38,6 +39,7 @@ import { NFT } from '../NFT/NFT'
 import { legacyRedirect } from './legacyRedirects'
 import { useCustomNetworks } from '../shared/hooks'
 import { Amendments } from '../Amendments'
+import { Entry } from '../Entry'
 import { Amendment } from '../Amendment'
 import { MPT } from '../MPT/MPT'
 import { Nodes } from '../Network/Nodes'
@@ -68,6 +70,7 @@ export const AppWrapper = () => {
     [LEDGERS_ROUTE, Ledgers],
     [LEDGER_ROUTE, Ledger],
     [ACCOUNT_ROUTE, AccountsRouter],
+    [ENTRY_ROUTE, Entry],
     [TRANSACTION_ROUTE, Transaction],
     [NODES_ROUTE, Nodes],
     [VALIDATORS_ROUTE, Validators],

src/containers/App/routes.ts

@@ -5,7 +5,7 @@ export const ACCOUNT_ROUTE: RouteDefinition<{
   tab?: 'assets' | 'transactions'
   assetType?: 'issued' | 'nfts' | 'mpts'
 }> = {
-  path: '/accounts/:id?/:tab?/:assetType?',
+  path: '/accounts/:id/:tab?/:assetType?',
 }
 
 export const LEDGERS_ROUTE: RouteDefinition = {
@@ -49,7 +49,14 @@ export const TRANSACTION_ROUTE: RouteDefinition<{
   identifier: string
   tab?: 'simple' | 'detailed' | 'raw'
 }> = {
-  path: `/transactions/:identifier?/:tab?`,
+  path: `/transactions/:identifier/:tab?`,
+}
+
+export const ENTRY_ROUTE: RouteDefinition<{
+  id: string
+  tab?: 'simple' | 'raw'
+}> = {
+  path: `/entry/:id/:tab?`,
 }
 
 export const VALIDATOR_ROUTE: RouteDefinition<{