fix: raw tab on transaction pages should show tx response from `rip…

…pled` (#1033)

## High Level Overview of Change

<!--
Please include a summary/list of the changes.
If too broad, please consider splitting into multiple PRs.
-->
Resolve #358

### Type of Change

<!--
Please check relevant options, delete irrelevant ones.
-->

- [x] 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

## 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

![Screenshot 2024-08-26 at 4 51
58 PM](https://github.com/user-attachments/assets/7ead2467-486a-45df-ae42-009545ff626c)


### After

![Screenshot 2024-08-26 at 5 20
23 PM](https://github.com/user-attachments/assets/46a21400-90d2-45bd-b948-32d4770defb4)

src/containers/App/test/App.test.jsx

@@ -43,7 +43,7 @@ jest.mock('../../../rippled', () => {
     ...originalModule,
     getTransaction: () =>
       Promise.resolve({
-        raw: formatTransaction({
+        processed: formatTransaction({
           TransactionType: 'OfferCreate',
           meta: {
             TransactionResult: 'tecKILLED',

src/containers/Transactions/SimpleTab.tsx

@@ -72,13 +72,13 @@ export const SimpleTab: FC<{ data: any; width: number }> = ({
     </>
   )
 
-  const { raw } = data
+  const { processed } = data
   const numberOptions = { ...CURRENCY_OPTIONS, currency: 'XRP' }
-  const time = localizeDate(new Date(raw.date), language, DATE_OPTIONS)
-  const ledgerIndex = raw.ledger_index
-  const fee = raw.tx.Fee
+  const time = localizeDate(new Date(processed.date), language, DATE_OPTIONS)
+  const ledgerIndex = processed.ledger_index
+  const fee = processed.tx.Fee
     ? localizeNumber(
-        Number.parseFloat(raw.tx.Fee) / XRP_BASE,
+        Number.parseFloat(processed.tx.Fee) / XRP_BASE,
         language,
         numberOptions,
       )
@@ -88,16 +88,16 @@ export const SimpleTab: FC<{ data: any; width: number }> = ({
     time,
     ledgerIndex,
     fee,
-    raw.tx.Account,
-    raw.tx.Sequence,
-    raw.tx.TicketSequence,
-    !!raw.tx.EmitDetails,
+    processed.tx.Account,
+    processed.tx.Sequence,
+    processed.tx.TicketSequence,
+    !!processed.tx.EmitDetails,
   )
 
   return (
     <div className="simple-body simple-body-tx">
       <div className="rows">
-        <Simple type={raw.tx.TransactionType} data={data.summary} />
+        <Simple type={processed.tx.TransactionType} data={data.summary} />
         {width < BREAKPOINTS.landscape && rowIndex}
       </div>
       {width >= BREAKPOINTS.landscape && (

src/containers/Transactions/index.tsx

@@ -75,10 +75,10 @@ export const Transaction = () => {
   const { width } = useWindowSize()
 
   useEffect(() => {
-    if (!data?.raw) return
+    if (!data?.processed) return
 
-    const type = data?.raw.tx.TransactionType
-    const status = data?.raw.meta.TransactionResult
+    const type = data?.processed.tx.TransactionType
+    const status = data?.processed.meta.TransactionResult
 
     const transactionProperties: AnalyticsFields = {
       transaction_action: getAction(type),
@@ -91,22 +91,22 @@ export const Transaction = () => {
     }
 
     trackScreenLoaded(transactionProperties)
-  }, [identifier, data?.raw, tab, trackScreenLoaded])
+  }, [identifier, data?.processed, tab, trackScreenLoaded])
 
   function renderSummary() {
-    const type = data?.raw.tx.TransactionType
+    const type = data?.processed.tx.TransactionType
     return (
       <div className="summary">
         <div className="type">{type}</div>
-        <TxStatus status={data?.raw.meta.TransactionResult} />
-        <div className="txid" title={data?.raw.hash}>
+        <TxStatus status={data?.processed.meta.TransactionResult} />
+        <div className="txid" title={data?.processed.hash}>
           <div className="title">{t('hash')}: </div>
-          {data?.raw.hash}
+          {data?.processed.hash}
         </div>
-        {data?.raw.tx.ctid && (
-          <div className="txid" title={data.raw.tx.ctid}>
+        {data?.processed.tx.ctid && (
+          <div className="txid" title={data.processed.tx.ctid}>
             <div className="title">CTID: </div>
-            {data.raw.tx.ctid}
+            {data.processed.tx.ctid}
           </div>
         )}
       </div>
@@ -126,7 +126,7 @@ export const Transaction = () => {
 
     switch (tab) {
       case 'detailed':
-        body = <DetailTab data={data.raw} />
+        body = <DetailTab data={data.processed} />
         break
       case 'raw':
         body = <JsonView data={data.raw} />
@@ -149,7 +149,7 @@ export const Transaction = () => {
   if (isError) {
     const message = getErrorMessage(error)
     body = <NoMatch title={message.title} hints={message.hints} />
-  } else if (data?.raw && data?.raw.hash) {
+  } else if (data?.processed && data?.processed.hash) {
     body = renderTransaction()
   } else if (!identifier) {
     body = (

src/containers/Transactions/test/SimpleTab.test.tsx

@@ -15,7 +15,7 @@ describe('SimpleTab container', () => {
       <Router>
         <I18nextProvider i18n={i18n}>
           <SimpleTab
-            data={{ raw: tx, summary: summarize(tx, true).details }}
+            data={{ processed: tx, summary: summarize(tx, true).details }}
             width={width}
           />
         </I18nextProvider>

src/containers/Transactions/test/Transaction.test.tsx

@@ -104,7 +104,7 @@ describe('Transaction container', () => {
 
     beforeEach(async () => {
       const transaction = {
-        raw: mockTransaction,
+        processed: mockTransaction,
         summary: mockTransactionSummary,
       }
 

src/containers/shared/components/Transaction/UNLModify/test/UNLModifySimple.test.tsx

@@ -44,7 +44,7 @@ describe('UNLModify: Simple', () => {
       <QuickHarness i18n={i18n}>
         <SimpleTab
           data={{
-            raw: mockUNLModifyDisable,
+            processed: mockUNLModifyDisable,
             summary: summarizeTransaction(mockUNLModifyDisable, true).details,
           }}
           width={800}

src/rippled/transactions.js

@@ -8,11 +8,14 @@ const log = logger({ name: 'transactions' })
 const getTransaction = (transactionId, rippledSocket) => {
   log.info(`get tx: ${transactionId}`)
   return getRippledTransaction(rippledSocket, transactionId)
-    .then((response) => formatTransaction(response))
-    .then((data) => ({
-      summary: summarizeTransaction(data, true).details,
-      raw: data,
-    }))
+    .then((data) => {
+      const formattedTransaction = formatTransaction(data)
+      return {
+        summary: summarizeTransaction(formattedTransaction, true).details,
+        processed: formattedTransaction,
+        raw: data,
+      }
+    })
     .catch((error) => {
       log.error(error.toString())
       throw error