[CHORE]: Remove transaction inconsistencies and improve type safety

package.json

@@ -342,6 +342,7 @@
     "@types/qs": "6.9.7",
     "@types/react": "18.2.65",
     "@types/react-native-extra-dimensions-android": "1.2.3",
+    "@types/react-native-indicators": "0.16.6",
     "@types/react-test-renderer": "18.3.0",
     "@types/styled-components": "5.1.7",
     "@types/url-parse": "1.4.3",

src/__swaps__/types/refraction.ts

@@ -1,6 +1,6 @@
 import { ZerionAsset } from '@/__swaps__/types/assets';
 import { ChainId, ChainName } from '@/chains/types';
-import { PaginatedTransactionsApiResponse } from '@/resources/transactions/types';
+import { PaginatedTransactionsApiResponse } from '@/entities';
 
 /**
  * Metadata for a message from the Zerion API.

src/components/ActivityIndicator.js → src/components/ActivityIndicator.tsx

@@ -5,9 +5,15 @@ import { Centered } from './layout';
 import styled from '@/styled-thing';
 import { position } from '@/styles';
 
-const Container = styled(Centered)(({ size }) => position.sizeAsObject(Number(size)));
+const Container = styled(Centered)(({ size }: { size: number }) => position.sizeAsObject(Number(size)));
 
-export default function ActivityIndicator({ color, isInteraction = false, size = 25, ...props }) {
+type ActivityIndicatorProps = {
+  color?: string;
+  isInteraction?: boolean;
+  size?: number;
+};
+
+export default function ActivityIndicator({ color, isInteraction = false, size = 25, ...props }: ActivityIndicatorProps) {
   const { colors } = useTheme();
   return (
     <Container size={size} {...props}>

src/components/Divider.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { magicMemo } from '../utils';
 import styled from '@/styled-thing';
 import { borders, position } from '@/styles';
-import { StyleProp, View, ViewProps, ViewStyle } from 'react-native';
+import { View } from 'react-native';
 import { ThemeContextProps, useTheme } from '@/theme';
 
 export const DividerSize = 2;

src/components/activity-list/ActivityList.tsx

@@ -0,0 +1,133 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { SectionList, StyleSheet, View } from 'react-native';
+import sectionListGetItemLayout from 'react-native-section-list-get-item-layout';
+import ActivityIndicator from '../ActivityIndicator';
+import Spinner from '../Spinner';
+import { ButtonPressAnimation } from '../animations';
+import { CoinRowHeight } from '../coin-row/CoinRow';
+import Text from '../text/Text';
+import ActivityListEmptyState from './ActivityListEmptyState';
+import ActivityListHeader from './ActivityListHeader';
+import styled from '@/styled-thing';
+import { ThemeContextProps, useTheme } from '@/theme';
+import { useSectionListScrollToTopContext } from '@/navigation/SectionListScrollToTopContext';
+import { safeAreaInsetValues } from '@/utils';
+import { useAccountSettings, useAccountTransactions } from '@/hooks';
+import { usePendingTransactionsStore } from '@/state/pendingTransactions';
+import { TransactionSections, TransactionItemForSectionList } from '@/helpers/buildTransactionsSectionsSelector';
+
+const sx = StyleSheet.create({
+  sectionHeader: {
+    paddingVertical: 18,
+  },
+});
+
+const ActivityListHeaderHeight = 42;
+const TRANSACTION_COIN_ROW_VERTICAL_PADDING = 7;
+
+const getItemLayout = sectionListGetItemLayout({
+  getItemHeight: () => CoinRowHeight + TRANSACTION_COIN_ROW_VERTICAL_PADDING * 2,
+  getSectionHeaderHeight: () => ActivityListHeaderHeight,
+});
+
+const keyExtractor = (data: TransactionSections['data'][number]) => {
+  if ('hash' in data) {
+    return (data.hash || data.timestamp ? data.timestamp?.toString() : performance.now().toString()) ?? performance.now().toString();
+  }
+  return (
+    (data.displayDetails?.timestampInMs ? data.displayDetails.timestampInMs.toString() : performance.now().toString()) ??
+    performance.now().toString()
+  );
+};
+
+const renderSectionHeader = ({ section, colors }: { section: TransactionSections; colors: ThemeContextProps['colors'] }) => {
+  return (
+    <View style={[sx.sectionHeader, { backgroundColor: colors.white }]}>
+      <ActivityListHeader {...section} />
+    </View>
+  );
+};
+
+const LoadingSpinner = android ? Spinner : ActivityIndicator;
+
+const FooterWrapper = styled(ButtonPressAnimation)({
+  alignItems: 'center',
+  height: 40,
+  justifyContent: 'center',
+  paddingBottom: 10,
+  width: '100%',
+});
+
+function ListFooterComponent({ label, onPress }: { label: string; onPress: () => void }) {
+  const [isLoading, setIsLoading] = useState(false);
+  const { colors } = useTheme();
+
+  useEffect(() => {
+    if (isLoading) {
+      onPress();
+      setIsLoading(false);
+    }
+  }, [isLoading, setIsLoading, onPress]);
+  const onPressWrapper = () => {
+    setIsLoading(true);
+  };
+  return (
+    <FooterWrapper onPress={onPressWrapper}>
+      {isLoading ? (
+        <LoadingSpinner />
+      ) : (
+        <Text align="center" color={colors.alpha(colors.blueGreyDark, 0.3)} lineHeight="loose" size="smedium" weight="bold">
+          {label}
+        </Text>
+      )}
+    </FooterWrapper>
+  );
+}
+
+const ActivityList = () => {
+  const { accountAddress, nativeCurrency } = useAccountSettings();
+
+  const { setScrollToTopRef } = useSectionListScrollToTopContext();
+  const { sections, nextPage, transactionsCount, remainingItemsLabel } = useAccountTransactions();
+  const pendingTransactions = usePendingTransactionsStore(state => state.pendingTransactions[accountAddress] || []);
+
+  const { colors } = useTheme();
+  const renderSectionHeaderWithTheme = useCallback(
+    ({ section }: { section: TransactionSections }) => renderSectionHeader({ colors, section }),
+    [colors]
+  );
+
+  const handleScrollToTopRef = (ref: SectionList<TransactionItemForSectionList, TransactionSections> | null) => {
+    if (!ref) return;
+    // @ts-expect-error - no idea why this is not working
+    setScrollToTopRef(ref);
+  };
+
+  return (
+    <SectionList<TransactionItemForSectionList, TransactionSections>
+      ListFooterComponent={() => remainingItemsLabel && <ListFooterComponent label={remainingItemsLabel} onPress={nextPage} />}
+      ref={handleScrollToTopRef}
+      alwaysBounceVertical={false}
+      contentContainerStyle={{ paddingBottom: !transactionsCount ? 0 : 90 }}
+      extraData={{
+        hasPendingTransaction: pendingTransactions.length > 0,
+        nativeCurrency,
+        pendingTransactionsCount: pendingTransactions.length,
+      }}
+      testID={'wallet-activity-list'}
+      ListEmptyComponent={<ActivityListEmptyState />}
+      // @ts-expect-error - mismatch between react-native-section-list-get-item-layout and SectionList
+      getItemLayout={getItemLayout}
+      initialNumToRender={12}
+      keyExtractor={keyExtractor}
+      removeClippedSubviews
+      renderSectionHeader={renderSectionHeaderWithTheme}
+      scrollIndicatorInsets={{
+        bottom: safeAreaInsetValues.bottom + 14,
+      }}
+      sections={sections}
+    />
+  );
+};
+
+export default ActivityList;

src/components/activity-list/ActivityListEmptyState.js → src/components/activity-list/ActivityListEmptyState.tsx

@@ -16,7 +16,13 @@ const Container = styled(Column)({
   width: 200,
 });
 
-const ActivityListEmptyState = ({ children, emoji, label }) => {
+type ActivityListEmptyStateProps = {
+  children?: React.ReactNode;
+  emoji: string;
+  label: string;
+};
+
+const ActivityListEmptyState = ({ children, emoji, label }: ActivityListEmptyStateProps) => {
   const { top: topInset } = useSafeAreaInsets();
   const { colors, isDarkMode } = useTheme();
 

src/components/activity-list/LoadingState.js → src/components/activity-list/LoadingState.tsx

@@ -3,7 +3,11 @@ import { AssetListItemSkeleton } from '../asset-list';
 import { Column } from '../layout';
 import { times } from '@/helpers/utilities';
 
-const LoadingState = ({ children }) => (
+type LoadingStateProps = {
+  children: React.ReactNode;
+};
+
+const LoadingState = ({ children }: LoadingStateProps) => (
   <Column flex={1}>
     {children}
     <Column flex={1}>

src/components/cards/GasCard.tsx

@@ -1,4 +1,3 @@
-// @ts-expect-error
 import AnimateNumber from '@bankify/react-native-animate-number';
 import { useIsFocused } from '@react-navigation/native';
 import * as i18n from '@/languages';
@@ -60,8 +59,7 @@ export const GasCard = () => {
   const isCurrentGweiLoaded = currentGwei && Number(currentGwei) > 0;
 
   const renderGweiText = useCallback(
-    // @ts-expect-error passed to an untyped JS component
-    animatedNumber => {
+    (animatedNumber: number) => {
       const priceText =
         animatedNumber === 0
           ? isCurrentGweiLoaded