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/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/cards/SwapDetailsCard.tsx

@@ -16,8 +16,10 @@ import {
 } from '../../selectors/DenominationSelectors'
 import { useSelector } from '../../types/reactRedux'
 import { getWalletName } from '../../util/CurrencyWalletHelpers'
+import { ReportsTxInfo } from '../../util/reportsServer'
 import { convertNativeToDisplay, unixToLocaleDateTime } from '../../util/utils'
 import { DataSheetModal, 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'
@@ -27,12 +29,27 @@ 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}}'
 
 export function SwapDetailsCard(props: Props) {
-  const { swapData, transaction, sourceWallet } = props
+  const {
+    swapData,
+    transaction,
+    sourceWallet,
+    reportsTxInfo,
+    isReportsTxInfoLoading = false
+  } = props
   const { memos = [], spendTargets = [], tokenId } = transaction
 
   const formattedOrderUri =
@@ -199,7 +216,15 @@ export function SwapDetailsCard(props: Props) {
             body: swapData.isEstimate
               ? lstrings.estimated_quote
               : lstrings.fixed_quote
-          }
+          },
+          ...(reportsTxInfo == null
+            ? []
+            : [
+                {
+                  title: lstrings.transaction_details_exchange_status,
+                  body: reportsTxInfo.swapInfo.status
+                }
+              ])
         ]
       },
       {
@@ -288,6 +313,19 @@ export function SwapDetailsCard(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 { View } from 'react-native'
+import LinearGradient from 'react-native-linear-gradient'
+import Animated, {
+  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 = (props: Props) => {
+  const { isShown = true, characters, lines = 1 } = props
+  const theme = useTheme()
+
+  const containerHeight = React.useMemo(
+    () => theme.rem(lines * 1.5),
+    [lines, theme]
+  )
+  const containerWidth = React.useMemo(
+    () =>
+      characters
+        ? characters * theme.rem(0.75)
+        : Math.floor(Math.random() * 80) + 20 + '%',
+    [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: string | number
+  height: string | number
+}>(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: string | number
+  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

@@ -10,6 +10,7 @@ import { lstrings } from '../../locales/strings'
 import { triggerHaptic } from '../../util/haptic'
 import { fixSides, mapSides, sidesToMargin } from '../../util/sides'
 import { EdgeTouchableOpacity } from '../common/EdgeTouchableOpacity'
+import { ShimmerText } from '../progress-indicators/ShimmerText'
 import { showToast } from '../services/AirshipInstance'
 import { cacheStyles, Theme, useTheme } from '../services/ThemeContext'
 import { EdgeText } from '../themed/EdgeText'
@@ -34,6 +35,7 @@ interface Props {
   error?: boolean
   icon?: React.ReactNode
   loading?: boolean
+  shimmer?: boolean
   maximumHeight?: 'small' | 'medium' | 'large'
   rightButtonType?: RowActionIcon
   title?: string
@@ -118,7 +120,9 @@ export const EdgeRow = (props: Props) => {
             {title}
           </EdgeText>
         )}
-        {loading ? (
+        {props.shimmer ? (
+          <ShimmerText characters={title?.length} />
+        ) : loading ? (
           <ActivityIndicator
             style={styles.loader}
             color={theme.primaryText}