Integrate getTxInfo reports server API

Author: samholmes

CHANGELOG.md

@@ -3,6 +3,7 @@
 ## Unreleased (develop)
 
 - added: `chooseCaip19Asset` EdgeProvider API for precise wallet selection using CAIP-19 identifiers
+- added: Integrated reports server order status to transaction details.
 - changed: Append chain names to token codes in RampCreateScene
 
 ## 4.42.0 (staging)

src/components/cards/SwapDetailsCard.tsx

@@ -20,8 +20,10 @@ import {
 import { useSelector } from '../../types/reactRedux'
 import { getTokenId } from '../../util/CurrencyInfoHelpers'
 import { getWalletName } from '../../util/CurrencyWalletHelpers'
+import type { ReportsTxInfo } from '../../util/reportsServer'
 import { convertNativeToDisplay, unixToLocaleDateTime } from '../../util/utils'
 import { DataSheetModal, type DataSheetSection } from '../modals/DataSheetModal'
+import { ShimmerText } from '../progress-indicators/ShimmerText'
 import { EdgeRow } from '../rows/EdgeRow'
 import { Airship, showError } from '../services/AirshipInstance'
 import { EdgeText } from '../themed/EdgeText'
@@ -31,6 +33,15 @@ interface Props {
   swapData: EdgeTxSwap
   transaction: EdgeTransaction
   sourceWallet?: EdgeCurrencyWallet
+
+  /** The transaction info from the reports server. */
+  reportsTxInfo?: ReportsTxInfo
+
+  /**
+   * Whether the transaction info from the reports server is loading.
+   * If not provided, the card will not show the status.
+   * */
+  isReportsTxInfoLoading?: boolean
 }
 
 const TXID_PLACEHOLDER = '{{TXID}}'
@@ -58,7 +69,12 @@ const upgradeSwapData = (
 }
 
 export const SwapDetailsCard: React.FC<Props> = (props: Props) => {
-  const { transaction, sourceWallet } = props
+  const {
+    transaction,
+    sourceWallet,
+    reportsTxInfo,
+    isReportsTxInfoLoading = false
+  } = props
   const { memos = [], spendTargets = [], tokenId } = transaction
 
   const swapData = upgradeSwapData(sourceWallet, props.swapData)
@@ -226,7 +242,15 @@ export const SwapDetailsCard: React.FC<Props> = (props: Props) => {
             body: swapData.isEstimate
               ? lstrings.estimated_quote
               : lstrings.fixed_quote
-          }
+          },
+          ...(reportsTxInfo == null
+            ? []
+            : [
+                {
+                  title: lstrings.transaction_details_exchange_status,
+                  body: reportsTxInfo.swapInfo.status
+                }
+              ])
         ]
       },
       {
@@ -315,6 +339,19 @@ export const SwapDetailsCard: React.FC<Props> = (props: Props) => {
             : lstrings.fixed_quote}
         </EdgeText>
       </EdgeRow>
+      {isReportsTxInfoLoading == null ? null : (
+        <EdgeRow title={lstrings.transaction_details_exchange_status}>
+          {isReportsTxInfoLoading ? (
+            <ShimmerText characters={10} />
+          ) : (
+            <EdgeText>
+              {reportsTxInfo == null
+                ? lstrings.string_unknown
+                : reportsTxInfo.swapInfo.status}
+            </EdgeText>
+          )}
+        </EdgeRow>
+      )}
       {swapData.orderUri == null ? null : (
         <EdgeRow
           rightButtonType="touchable"

src/components/progress-indicators/ShimmerText.tsx

@@ -0,0 +1,137 @@
+import * as React from 'react'
+import { type DimensionValue, View } from 'react-native'
+import LinearGradient from 'react-native-linear-gradient'
+import Animated, {
+  type SharedValue,
+  useAnimatedStyle,
+  useSharedValue,
+  withRepeat,
+  withSequence,
+  withTiming
+} from 'react-native-reanimated'
+
+import { useHandler } from '../../hooks/useHandler'
+import { useLayout } from '../../hooks/useLayout'
+import { styled } from '../hoc/styled'
+import { useTheme } from '../services/ThemeContext'
+
+interface Props {
+  /** Whether the component is shown (rendered). Default: true */
+  isShown?: boolean
+
+  /** Number of characters to represent in size for the shimmer. */
+  characters?: number
+
+  /** Number of lines to represent in size for the shimmer. */
+  lines?: number
+}
+
+export const ShimmerText: React.FC<Props> = (props: Props) => {
+  const { isShown = true, characters, lines = 1 } = props
+  const theme = useTheme()
+
+  const containerHeight: DimensionValue = React.useMemo(
+    () => theme.rem(lines * 1.5),
+    [lines, theme]
+  )
+  const containerWidth: DimensionValue = React.useMemo(
+    () =>
+      characters != null
+        ? characters * theme.rem(0.75)
+        : ((Math.floor(Math.random() * 80) + 20 + '%') as DimensionValue),
+    [characters, theme]
+  )
+
+  const [containerLayout, handleContainerLayout] = useLayout()
+  const containerLayoutWidth = containerLayout.width
+  const gradientWidth = containerLayoutWidth * 6
+
+  const offset = useSharedValue(0)
+
+  const startAnimation = useHandler(() => {
+    const duration = 2000
+    const startPosition = -gradientWidth
+    const endPosition = containerLayoutWidth
+    offset.value = startPosition
+    offset.value = withRepeat(
+      withSequence(
+        withTiming(startPosition, { duration: duration / 2 }),
+        withTiming(endPosition, { duration })
+      ),
+      -1,
+      false
+    )
+  })
+
+  React.useEffect(() => {
+    if (gradientWidth > 0) startAnimation()
+  }, [startAnimation, gradientWidth])
+
+  return isShown ? (
+    <ContainerView
+      width={containerWidth}
+      height={containerHeight}
+      onLayout={handleContainerLayout}
+    >
+      <Shimmer width={gradientWidth} offset={offset}>
+        <Gradient
+          start={{ x: 0, y: 0 }}
+          end={{ x: 1, y: 1 }}
+          colors={['rgba(0,0,0,0)', theme.shimmerBackgroundHighlight]}
+        />
+        <Gradient
+          start={{ x: 1, y: 0 }}
+          end={{ x: 0, y: 1 }}
+          colors={['rgba(0,0,0,0)', theme.shimmerBackgroundHighlight]}
+        />
+      </Shimmer>
+    </ContainerView>
+  ) : null
+}
+
+/**
+ * This is the track of the component that contains a gradient that overflows
+ * in width.
+ */
+const ContainerView = styled(View)<{
+  width: DimensionValue
+  height: DimensionValue
+}>(theme => props => ({
+  width: props.width,
+  maxWidth: '100%',
+  height: props.height,
+  borderRadius: theme.rem(0.25),
+  backgroundColor: theme.shimmerBackgroundColor,
+  overflow: 'hidden'
+}))
+
+/**
+ * This is the animated view that within the {@link ContainerView}. It animates
+ * by an offset value which represents the horizontal position of the shimmer.
+ */
+const Shimmer = styled(Animated.View)<{
+  width: DimensionValue
+  offset: SharedValue<number>
+}>(_ => props => [
+  {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    bottom: 0,
+    display: 'flex',
+    flexDirection: 'row',
+    width: props.width
+  },
+  useAnimatedStyle(() => ({
+    transform: [{ translateX: props.offset.value }]
+  }))
+])
+
+/**
+ * This is gradient nested within the {@link Shimmer}.
+ */
+const Gradient = styled(LinearGradient)({
+  flex: 1,
+  width: '100%',
+  height: '100%'
+})

src/components/rows/EdgeRow.tsx

@@ -15,6 +15,7 @@ import { triggerHaptic } from '../../util/haptic'
 import { fixSides, mapSides, sidesToMargin } from '../../util/sides'
 import { EdgeTouchableOpacity } from '../common/EdgeTouchableOpacity'
 import { ChevronRightIcon } from '../icons/ThemedIcons'
+import { ShimmerText } from '../progress-indicators/ShimmerText'
 import { showToast } from '../services/AirshipInstance'
 import { cacheStyles, type Theme, useTheme } from '../services/ThemeContext'
 import { EdgeText } from '../themed/EdgeText'
@@ -39,6 +40,7 @@ interface Props {
   error?: boolean
   icon?: React.ReactNode
   loading?: boolean
+  shimmer?: boolean
   maximumHeight?: 'small' | 'medium' | 'large'
   rightButtonType?: RowActionIcon
   title?: string
@@ -57,6 +59,7 @@ export const EdgeRow: React.FC<Props> = (props: Props) => {
     error,
     icon,
     loading = false,
+    shimmer = false,
     marginRem,
     maximumHeight = 'medium',
     testID,
@@ -123,7 +126,9 @@ export const EdgeRow: React.FC<Props> = (props: Props) => {
             {title}
           </EdgeText>
         )}
-        {loading ? (
+        {shimmer ? (
+          <ShimmerText characters={title?.length} />
+        ) : loading ? (
           <ActivityIndicator
             style={styles.loader}
             color={theme.primaryText}

src/components/scenes/TransactionDetailsScene.tsx

@@ -1,3 +1,4 @@
+import { useQuery } from '@tanstack/react-query'
 import { abs } from 'biggystring'
 import type {
   EdgeAccount,
@@ -8,6 +9,7 @@ import type {
   EdgeTxSwap
 } from 'edge-core-js'
 import * as React from 'react'
+import { useMemo } from 'react'
 import { View } from 'react-native'
 import FastImage from 'react-native-fast-image'
 import IonIcon from 'react-native-vector-icons/Ionicons'
@@ -36,6 +38,11 @@ import type { EdgeAppSceneProps } from '../../types/routerTypes'
 import { getCurrencyCodeWithAccount } from '../../util/CurrencyInfoHelpers'
 import { matchJson } from '../../util/matchJson'
 import { getMemoTitle } from '../../util/memoUtils'
+import {
+  queryReportsTxInfo,
+  toEdgeTxActionSwap,
+  toEdgeTxSwap
+} from '../../util/reportsServer'
 import {
   convertNativeToExchange,
   darkenHexColor,
@@ -86,6 +93,55 @@ export const TransactionDetailsComponent: React.FC<Props> = props => {
   const styles = getStyles(theme)
   const iconColor = useIconColor({ pluginId: currencyInfo.pluginId, tokenId })
 
+  const transactionSwapData = (): EdgeTxSwap | undefined =>
+    convertActionToSwapData(account, transaction) ?? transaction.swapData
+
+  // Query for transaction info from reports server only if the transaction is
+  // a receive (we need to get potential swap data) or the transaction has
+  // swap data (we need to get the status)
+  const shouldShowTradeDetails =
+    !transaction.isSend || transactionSwapData() != null
+  const { data: reportsTxInfo, isLoading: isReportsTxInfoLoading } = useQuery({
+    queryKey: ['txInfo', transaction.txid],
+    queryFn: async () => {
+      return await queryReportsTxInfo(wallet, transaction)
+    },
+    staleTime: query =>
+      // Only cache if the status has resolved, otherwise we'll always consider
+      // the data to be stale:
+      ['processing', 'pending', undefined].includes(
+        query.state.data?.swapInfo.status
+      )
+        ? 0 // No cache
+        : Infinity, // Cache forever
+    enabled: shouldShowTradeDetails,
+    retry: false
+  })
+
+  const swapDataFromReports = useMemo(
+    () =>
+      reportsTxInfo == null
+        ? undefined
+        : toEdgeTxSwap(account, wallet, transaction, reportsTxInfo),
+    [account, reportsTxInfo, transaction, wallet]
+  )
+
+  const edgeTxActionSwapFromReports = useMemo(() => {
+    if (reportsTxInfo == null) return
+    return toEdgeTxActionSwap(account, transaction, reportsTxInfo)
+  }, [account, reportsTxInfo, transaction])
+
+  // Update the transaction object with saveAction data from reports server:
+  if (
+    edgeTxActionSwapFromReports != null &&
+    transaction.savedAction !== edgeTxActionSwapFromReports
+  ) {
+    transaction.savedAction = edgeTxActionSwapFromReports
+    transaction.assetAction = {
+      assetActionType: 'swap'
+    }
+  }
+
   // Choose a default category based on metadata or the txAction
   const {
     action,
@@ -96,8 +152,7 @@ export const TransactionDetailsComponent: React.FC<Props> = props => {
     savedData
   } = getTxActionDisplayInfo(transaction, account, wallet)
 
-  const swapData =
-    convertActionToSwapData(account, transaction) ?? transaction.swapData
+  const swapData = transactionSwapData() ?? swapDataFromReports
 
   const thumbnailPath =
     useContactThumbnail(mergedData.name) ?? pluginIdIcons[iconPluginId ?? '']
@@ -610,7 +665,11 @@ export const TransactionDetailsComponent: React.FC<Props> = props => {
             <SwapDetailsCard
               swapData={swapData}
               transaction={transaction}
-              sourceWallet={wallet}
+              sourceWallet={
+                swapData.payoutWalletId === wallet.id ? undefined : wallet
+              }
+              reportsTxInfo={reportsTxInfo ?? undefined}
+              isReportsTxInfoLoading={isReportsTxInfoLoading}
             />
           )}
         </EdgeAnim>

src/components/services/AccountCallbackManager.tsx

@@ -23,6 +23,7 @@ import { convertCurrency } from '../../selectors/WalletSelectors'
 import { useDispatch, useSelector } from '../../types/reactRedux'
 import type { NavigationBase } from '../../types/routerTypes'
 import { makePeriodicTask } from '../../util/PeriodicTask'
+import { mergeReportsTxInfo } from '../../util/reportsServer'
 import { convertNativeToExchange, datelog, snooze } from '../../util/utils'
 import { Airship, showDevError } from './AirshipInstance'
 
@@ -133,6 +134,17 @@ export const AccountCallbackManager: React.FC<Props> = (props: Props) => {
             }
           )
 
+        const txsNeedingSwapData = transactions.filter(
+          tx => tx.swapData == null && !tx.isSend
+        )
+        if (txsNeedingSwapData.length > 0) {
+          mergeReportsTxInfo(account, wallet, txsNeedingSwapData).catch(
+            (err: unknown) => {
+              console.warn(err)
+            }
+          )
+        }
+
         // Review triggers: deposit & transaction count
         for (const tx of transactions) {
           const actionType =

src/envConfig.ts

@@ -515,6 +515,7 @@ export const asEnvConfig = asObject({
       port: asOptional(asString, '8008')
     })
   ),
+  REPORTS_SERVERS: asOptional(asArray(asString)),
   THEME_SERVER: asOptional(
     asObject({
       host: asOptional(asString, 'localhost'),