Introduce DataSheetModal for exchange details

samholmes · samholmes · commit 27dfca9a4b32 · 2025-07-16T16:41:25.000-07:00
diff --git a/src/components/cards/SwapDetailsCard.tsx b/src/components/cards/SwapDetailsCard.tsx
@@ -18,7 +18,7 @@ import {
 import { useSelector } from '../../types/reactRedux'
 import { getWalletName } from '../../util/CurrencyWalletHelpers'
 import { convertNativeToDisplay, unixToLocaleDateTime } from '../../util/utils'
-import { RawTextModal } from '../modals/RawTextModal'
+import { DataSheetModal, DataSheetSection } from '../modals/DataSheetModal'
 import { EdgeRow } from '../rows/EdgeRow'
 import { Airship, showError } from '../services/AirshipInstance'
 import { EdgeText } from '../themed/EdgeText'
@@ -61,16 +61,26 @@ export function SwapDetailsCard(props: Props) {
 
   const handleExchangeDetails = useHandler(async () => {
     await Airship.show(bridge => (
-      <RawTextModal
+      <DataSheetModal
         bridge={bridge}
-        body={createExchangeDataString()}
+        sections={createExchangeDataSheetSections()}
         title={lstrings.transaction_details_exchange_details}
       />
     ))
   })
 
   const handleEmail = useHandler(() => {
-    const body = createExchangeDataString('<br />')
+    // Serialize the data sheet sections to a string:
+    const sections = createExchangeDataSheetSections()
+    const body = sections
+      .map(section =>
+        // Separate rows with a newline
+        section.rows.map(row => row.title + ': ' + row.body).join('\n')
+      )
+      // Separate sections with two newlines
+      .join('\n\n')
+      // Replace newlines with <br/> tags
+      .replaceAll('\n', '<br/>')
 
     Mailer.mail(
       {
@@ -156,48 +166,98 @@ export function SwapDetailsCard(props: Props) {
           getExchangeDenom(destinationWallet.currencyConfig, null).name
         })`
 
-  const createExchangeDataString = (newline: string = '\n') => {
+  const createExchangeDataSheetSections = (): DataSheetSection[] => {
     const uniqueIdentifier = memos
       .map(
         (memo, index) =>
-          `${memo.value}${index + 1 !== memos.length ? newline : ''}`
+          `${memo.value}${index + 1 !== memos.length ? '\n' : ''}`
       )
       .toString()
     const exchangeAddresses = spendTargets
       .map(
         (target, index) =>
           `${target.publicAddress}${
-            index + 1 !== spendTargets.length ? newline : ''
+            index + 1 !== spendTargets.length ? '\n' : ''
           }`
       )
       .toString()
     const { dateTime } = unixToLocaleDateTime(transaction.date)
 
-    return `${lstrings.fio_date_label}: ${dateTime}${newline}${
-      lstrings.transaction_details_exchange_service
-    }: ${plugin.displayName}${newline}${
-      lstrings.transaction_details_exchange_order_id
-    }: ${orderId || ''}${newline}${
-      lstrings.transaction_details_exchange_source_wallet
-    }: ${walletName}${newline}${
-      lstrings.fragment_send_from_label
-    }: ${sourceAmount} ${sourceAssetName}${newline}${
-      lstrings.string_to_capitalize
-    }: ${destinationAmount} ${destinationAssetName}${newline}${
-      lstrings.transaction_details_exchange_destination_wallet
-    }: ${destinationWalletName}${newline}${
-      isEstimate ? lstrings.estimated_quote : lstrings.fixed_quote
-    }${newline}${newline}${lstrings.transaction_details_tx_id_modal_title}: ${
-      transaction.txid
-    }${newline}${newline}${
-      lstrings.transaction_details_exchange_exchange_address
-    }:${newline}${exchangeAddresses}${newline}${newline}${
-      lstrings.transaction_details_exchange_exchange_unique_id
-    }:${newline}${uniqueIdentifier}${newline}${newline}${
-      lstrings.transaction_details_exchange_payout_address
-    }:${newline}${payoutAddress}${newline}${newline}${
-      lstrings.transaction_details_exchange_refund_address
-    }:${newline}${refundAddress || ''}${newline}`
+    return [
+      {
+        rows: [
+          {
+            title: lstrings.fio_date_label,
+            body: dateTime
+          },
+          {
+            title: lstrings.transaction_details_exchange_service,
+            body: plugin.displayName
+          },
+          {
+            title: lstrings.transaction_details_exchange_order_id,
+            body: orderId || ''
+          },
+          {
+            title: lstrings.quote_type,
+            body: isEstimate ? lstrings.estimated_quote : lstrings.fixed_quote
+          }
+        ]
+      },
+      {
+        rows: [
+          {
+            title: lstrings.transaction_details_exchange_source_wallet,
+            body: walletName
+          },
+          {
+            title: lstrings.string_send_amount,
+            body: `${sourceAmount} ${sourceAssetName}`
+          }
+        ]
+      },
+      {
+        rows: [
+          {
+            title: lstrings.transaction_details_exchange_destination_wallet,
+            body: destinationWalletName
+          },
+          {
+            title: lstrings.string_receive_amount,
+            body: `${destinationAmount} ${destinationAssetName}`
+          }
+        ]
+      },
+      {
+        rows: [
+          {
+            title: lstrings.transaction_details_tx_id_modal_title,
+            body: transaction.txid
+          },
+          {
+            title: lstrings.transaction_details_exchange_exchange_address,
+            body: exchangeAddresses
+          },
+          ...(uniqueIdentifier !== ''
+            ? [
+                {
+                  title:
+                    lstrings.transaction_details_exchange_exchange_unique_id,
+                  body: uniqueIdentifier
+                }
+              ]
+            : []),
+          {
+            title: lstrings.transaction_details_exchange_payout_address,
+            body: payoutAddress
+          },
+          {
+            title: lstrings.transaction_details_exchange_refund_address,
+            body: refundAddress || ''
+          }
+        ]
+      }
+    ]
   }
 
   return (
diff --git a/src/components/modals/DataSheetModal.tsx b/src/components/modals/DataSheetModal.tsx
@@ -0,0 +1,65 @@
+import * as React from 'react'
+import { Fragment } from 'react'
+import { ScrollView } from 'react-native'
+import { AirshipBridge } from 'react-native-airship'
+
+import { SCROLL_INDICATOR_INSET_FIX } from '../../constants/constantSettings'
+import { EdgeCard } from '../cards/EdgeCard'
+import { SectionHeader } from '../common/SectionHeader'
+import { EdgeRow } from '../rows/EdgeRow'
+import { EdgeModal } from './EdgeModal'
+
+interface Props {
+  bridge: AirshipBridge<void>
+
+  /** The sections data to display in the modal. */
+  sections: DataSheetSection[]
+
+  /** The title of the modal. */
+  title?: string
+}
+
+export interface DataSheetSection {
+  /** The title of the section. */
+  title?: string
+
+  /** The rows of the section. */
+  rows: DataSheetRow[]
+}
+
+export interface DataSheetRow {
+  /** The title or label of the row. */
+  title: string
+
+  /** The body text of the row. */
+  body: string
+}
+
+export function DataSheetModal(props: Props) {
+  const { bridge, sections, title } = props
+
+  const handleCancel = () => bridge.resolve(undefined)
+
+  return (
+    <EdgeModal bridge={bridge} title={title} onCancel={handleCancel}>
+      <ScrollView scrollIndicatorInsets={SCROLL_INDICATOR_INSET_FIX}>
+        {sections.map((section, index) => (
+          <Fragment key={index + (section.title ?? '')}>
+            {section.title == null ? null : (
+              <SectionHeader leftTitle={section.title} />
+            )}
+            <EdgeCard>
+              {section.rows.map((row, index) => (
+                <EdgeRow
+                  key={index + row.title}
+                  title={row.title}
+                  body={row.body}
+                />
+              ))}
+            </EdgeCard>
+          </Fragment>
+        ))}
+      </ScrollView>
+    </EdgeModal>
+  )
+}
diff --git a/src/locales/en_US.ts b/src/locales/en_US.ts
@@ -731,6 +731,8 @@ const strings = {
   string_save: 'Save',
   string_share: 'Share',
   string_to_capitalize: 'To',
+  string_send_amount: 'Send Amount',
+  string_receive_amount: 'Receive Amount',
   string_show_balance: 'Show Balance',
   string_amount: 'Amount',
   string_tap_next_for_quote: 'Tap "Next" for Quote',
@@ -1114,6 +1116,7 @@ const strings = {
     'This swap will create an order to exchange funds at the quoted rate but might only fulfill a portion of your order.\n\nFunds that fail to swap will remain in your source wallet or be returned.',
   fixed_quote: 'Fixed Quote',
   estimated_quote: 'Estimated Quote',
+  quote_type: 'Quote Type',
   estimated_exchange_rate: 'Estimated Exchange Rate',
   estimated_exchange_rate_body:
     'No exchange providers are able to provide a fixed quote for the exchange requested. This exchange may result in less funds received than quoted.',
diff --git a/src/locales/strings/enUS.json b/src/locales/strings/enUS.json
@@ -565,6 +565,8 @@
   "string_save": "Save",
   "string_share": "Share",
   "string_to_capitalize": "To",
+  "string_send_amount": "Send Amount",
+  "string_receive_amount": "Receive Amount",
   "string_show_balance": "Show Balance",
   "string_amount": "Amount",
   "string_tap_next_for_quote": "Tap \"Next\" for Quote",
@@ -882,6 +884,7 @@
   "can_be_partial_quote_body": "This swap will create an order to exchange funds at the quoted rate but might only fulfill a portion of your order.\n\nFunds that fail to swap will remain in your source wallet or be returned.",
   "fixed_quote": "Fixed Quote",
   "estimated_quote": "Estimated Quote",
+  "quote_type": "Quote Type",
   "estimated_exchange_rate": "Estimated Exchange Rate",
   "estimated_exchange_rate_body": "No exchange providers are able to provide a fixed quote for the exchange requested. This exchange may result in less funds received than quoted.",
   "estimated_exchange_message": "The amount above is an estimate. This exchange may result in less funds received than quoted.",
