Integrate getTxInfo reports server API

Author: samholmes

CHANGELOG.md

@@ -3,6 +3,7 @@
 ## Unreleased (develop)
 
 - added: `ReturnKeyTypeButton` to `FlipInputModal2`
+- added: Integrated reports server order status to transaction details.
 
 ## 4.32.0 (staging)
 

package.json

@@ -80,6 +80,7 @@
     "@react-navigation/native": "^6.1.3",
     "@react-navigation/stack": "^6.3.12",
     "@sentry/react-native": "^6.14.0",
+    "@tanstack/react-query": "^5.83.0",
     "@types/jsrsasign": "^10.5.13",
     "@unstoppabledomains/resolution": "^9.3.0",
     "@walletconnect/react-native-compat": "^2.11.0",

src/__tests__/scenes/__snapshots__/TransactionDetailsScene.test.tsx.snap

@@ -1738,6 +1738,170 @@ exports[`TransactionDetailsScene should render 1`] = `
           </View>
         </View>
       </View>
+      <View
+        entering={BaseAnimationMock {}}
+        layout={BaseAnimationMock {}}
+      >
+        <View
+          style={
+            [
+              {
+                "alignSelf": "stretch",
+                "borderRadius": 16,
+              },
+              {
+                "marginBottom": 11,
+                "marginLeft": 11,
+                "marginRight": 11,
+                "marginTop": 11,
+              },
+              {
+                "paddingBottom": 11,
+                "paddingLeft": 11,
+                "paddingRight": 11,
+                "paddingTop": 11,
+              },
+              undefined,
+            ]
+          }
+        >
+          <View
+            style={
+              {
+                "backgroundColor": "rgba(255, 255, 255, .1)",
+                "borderRadius": 16,
+                "bottom": 0,
+                "left": 0,
+                "overflow": "hidden",
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+              }
+            }
+          />
+          <View
+            style={
+              [
+                {
+                  "flexDirection": "column",
+                  "flexGrow": 1,
+                  "flexShrink": 1,
+                },
+                {
+                  "marginVertical": 0,
+                },
+              ]
+            }
+          >
+            <View
+              style={
+                {
+                  "height": 135,
+                  "position": "relative",
+                }
+              }
+            >
+              <View
+                onLayout={[Function]}
+                style={
+                  {
+                    "backgroundColor": "rgba(255, 255, 255, .05)",
+                    "borderRadius": 16,
+                    "bottom": 0,
+                    "left": 0,
+                    "overflow": "hidden",
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  }
+                }
+              >
+                <View
+                  style={
+                    [
+                      {
+                        "bottom": 0,
+                        "display": "flex",
+                        "flexDirection": "row",
+                        "left": 0,
+                        "position": "absolute",
+                        "top": 0,
+                      },
+                      {
+                        "width": 0,
+                      },
+                      {
+                        "transform": [
+                          {
+                            "translateX": 0,
+                          },
+                        ],
+                      },
+                    ]
+                  }
+                >
+                  <BVLinearGradient
+                    colors={
+                      [
+                        0,
+                        452984831,
+                      ]
+                    }
+                    endPoint={
+                      {
+                        "x": 1,
+                        "y": 1,
+                      }
+                    }
+                    locations={null}
+                    startPoint={
+                      {
+                        "x": 0,
+                        "y": 0,
+                      }
+                    }
+                    style={
+                      {
+                        "flex": 1,
+                        "height": "100%",
+                        "width": "100%",
+                      }
+                    }
+                  />
+                  <BVLinearGradient
+                    colors={
+                      [
+                        0,
+                        452984831,
+                      ]
+                    }
+                    endPoint={
+                      {
+                        "x": 0,
+                        "y": 1,
+                      }
+                    }
+                    locations={null}
+                    startPoint={
+                      {
+                        "x": 1,
+                        "y": 0,
+                      }
+                    }
+                    style={
+                      {
+                        "flex": 1,
+                        "height": "100%",
+                        "width": "100%",
+                      }
+                    }
+                  />
+                </View>
+              </View>
+            </View>
+          </View>
+        </View>
+      </View>
       <View
         entering={BaseAnimationMock {}}
         layout={BaseAnimationMock {}}

src/components/App.tsx

@@ -1,6 +1,7 @@
 import '@ethersproject/shims'
 
 import { ErrorBoundary, Scope, wrap } from '@sentry/react-native'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import * as React from 'react'
 import { StyleSheet } from 'react-native'
 import { GestureHandlerRootView } from 'react-native-gesture-handler'
@@ -12,26 +13,30 @@ import { EdgeCoreManager } from './services/EdgeCoreManager'
 import { StatusBarManager } from './services/StatusBarManager'
 import { ThemeProvider } from './services/ThemeContext'
 
+const queryClient = new QueryClient()
+
 function MainApp() {
   const handleBeforeCapture = useHandler((scope: Scope) => {
     scope.setLevel('fatal')
     scope.setTag('handled', false)
   })
 
   return (
-    <SafeAreaProvider>
-      <ThemeProvider>
-        <GestureHandlerRootView style={StyleSheet.absoluteFill}>
-          <ErrorBoundary
-            beforeCapture={handleBeforeCapture}
-            fallback={<CrashScene />}
-          >
-            <StatusBarManager />
-            <EdgeCoreManager />
-          </ErrorBoundary>
-        </GestureHandlerRootView>
-      </ThemeProvider>
-    </SafeAreaProvider>
+    <QueryClientProvider client={queryClient}>
+      <SafeAreaProvider>
+        <ThemeProvider>
+          <GestureHandlerRootView style={StyleSheet.absoluteFill}>
+            <ErrorBoundary
+              beforeCapture={handleBeforeCapture}
+              fallback={<CrashScene />}
+            >
+              <StatusBarManager />
+              <EdgeCoreManager />
+            </ErrorBoundary>
+          </GestureHandlerRootView>
+        </ThemeProvider>
+      </SafeAreaProvider>
+    </QueryClientProvider>
   )
 }
 

src/components/scenes/TransactionDetailsScene.tsx

@@ -1,3 +1,4 @@
+import { useQuery } from '@tanstack/react-query'
 import { abs } from 'biggystring'
 import {
   EdgeAccount,
@@ -36,6 +37,7 @@ import { EdgeAppSceneProps } from '../../types/routerTypes'
 import { getCurrencyCodeWithAccount } from '../../util/CurrencyInfoHelpers'
 import { matchJson } from '../../util/matchJson'
 import { getMemoTitle } from '../../util/memoUtils'
+import { fetchGetTxInfo } from '../../util/reportsServer'
 import {
   convertCurrencyFromExchangeRates,
   convertNativeToExchange,
@@ -44,6 +46,7 @@ import {
 } from '../../util/utils'
 import { ButtonsView } from '../buttons/ButtonsView'
 import { AdvancedDetailsCard } from '../cards/AdvancedDetailsCard'
+import { AlertCardUi4 } from '../cards/AlertCard'
 import { EdgeCard } from '../cards/EdgeCard'
 import { FiatExchangeDetailsCard } from '../cards/FiatExchangeDetailsCard'
 import { SwapDetailsCard } from '../cards/SwapDetailsCard'
@@ -58,6 +61,7 @@ import {
   ContactModalResult
 } from '../modals/ContactListModal'
 import { TextInputModal } from '../modals/TextInputModal'
+import { Shimmer } from '../progress-indicators/Shimmer'
 import { EdgeRow } from '../rows/EdgeRow'
 import { TxCryptoAmountRow } from '../rows/TxCryptoAmountRow'
 import { Airship, showError, showToast } from '../services/AirshipInstance'
@@ -86,6 +90,37 @@ const TransactionDetailsComponent = (props: Props) => {
   const styles = getStyles(theme)
   const iconColor = useIconColor({ pluginId: currencyInfo.pluginId, tokenId })
 
+  // Query for transaction info from reports server
+  const receiveAddress = transaction.ourReceiveAddresses?.[0]
+  const transactionDate = new Date(date * 1000)
+
+  const shouldShowTradeDetails = !transaction.isSend && receiveAddress != null
+  const {
+    data: txInfo,
+    isLoading: isTxInfoLoading,
+    error: txInfoError
+  } = useQuery({
+    queryKey: ['txInfo', receiveAddress, transactionDate.toISOString()],
+    queryFn: async () => {
+      if (!shouldShowTradeDetails) return null
+
+      // Set time range: 24 hours before and after transaction
+      const startDate = new Date(transactionDate)
+      startDate.setHours(startDate.getHours() - 24)
+
+      const endDate = new Date(transactionDate)
+      endDate.setHours(endDate.getHours() + 24)
+
+      return await fetchGetTxInfo({
+        address: receiveAddress,
+        startDate,
+        endDate
+      })
+    },
+    enabled: shouldShowTradeDetails,
+    retry: false
+  })
+
   // Choose a default category based on metadata or the txAction
   const {
     action,
@@ -580,6 +615,43 @@ const TransactionDetailsComponent = (props: Props) => {
         </EdgeCard>
       </EdgeAnim>
 
+      {/* Trade details */}
+      {shouldShowTradeDetails ? (
+        <EdgeAnim enter={{ type: 'fadeInDown', distance: 130 }}>
+          <EdgeCard sections>
+            {isTxInfoLoading ? (
+              <View style={{ height: theme.rem(6), position: 'relative' }}>
+                <Shimmer />
+              </View>
+            ) : txInfoError ? (
+              <AlertCardUi4
+                type="error"
+                title={lstrings.error_unexpected_title}
+                body={txInfoError.message}
+              />
+            ) : txInfo != null ? (
+              <>
+                <EdgeRow
+                  rightButtonType="none"
+                  title={lstrings.transaction_details_exchange_order_id}
+                  body={txInfo.orderId}
+                />
+                <EdgeRow
+                  rightButtonType="none"
+                  title={lstrings.transaction_details_exchange_service}
+                  body={txInfo.providerId}
+                />
+                <EdgeRow
+                  rightButtonType="none"
+                  title={lstrings.transaction_details_exchange_status}
+                  body={txInfo.status}
+                />
+              </>
+            ) : null}
+          </EdgeCard>
+        </EdgeAnim>
+      ) : null}
+
       <EdgeAnim enter={{ type: 'fadeInDown', distance: 120 }}>
         <AdvancedDetailsCard
           transaction={transaction}
@@ -591,6 +663,7 @@ const TransactionDetailsComponent = (props: Props) => {
           )}
         />
       </EdgeAnim>
+
       <EdgeAnim enter={{ type: 'fadeInDown', distance: 140 }}>
         <ButtonsView
           layout="column"

src/locales/en_US.ts

@@ -857,6 +857,7 @@ const strings = {
   transaction_details_empty_note_placeholder: 'Tap to Add Note (Optional)',
   transaction_details_exchange_details: 'Exchange Details',
   transaction_details_exchange_service: 'Exchange Service',
+  transaction_details_exchange_status: 'Exchange Status',
   transaction_details_exchange_order_id: 'Order ID',
   transaction_details_exchange_source_wallet: 'Source Wallet',
   transaction_details_exchange_destination_wallet: 'Destination Wallet',

src/locales/strings/enUS.json

@@ -681,6 +681,7 @@
   "transaction_details_empty_note_placeholder": "Tap to Add Note (Optional)",
   "transaction_details_exchange_details": "Exchange Details",
   "transaction_details_exchange_service": "Exchange Service",
+  "transaction_details_exchange_status": "Exchange Status",
   "transaction_details_exchange_order_id": "Order ID",
   "transaction_details_exchange_source_wallet": "Source Wallet",
   "transaction_details_exchange_destination_wallet": "Destination Wallet",