[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__/screens/Swap/components/AnimatedChainImage.android.tsx

@@ -2,17 +2,17 @@
 import React, { useMemo } from 'react';
 import { Image, StyleSheet, View } from 'react-native';
 
+const ApechainBadge = require('@/assets/badges/apechain.png');
 const ArbitrumBadge = require('@/assets/badges/arbitrum.png');
+const AvalancheBadge = require('@/assets/badges/avalanche.png');
 const BaseBadge = require('@/assets/badges/base.png');
+const BlastBadge = require('@/assets/badges/blast.png');
 const BscBadge = require('@/assets/badges/bsc.png');
+const DegenBadge = require('@/assets/badges/degen.png');
 const EthereumBadge = require('@/assets/badges/ethereum.png');
 const OptimismBadge = require('@/assets/badges/optimism.png');
 const PolygonBadge = require('@/assets/badges/polygon.png');
 const ZoraBadge = require('@/assets/badges/zora.png');
-const AvalancheBadge = require('@/assets/badges/avalanche.png');
-const BlastBadge = require('@/assets/badges/blast.png');
-const DegenBadge = require('@/assets/badges/degen.png');
-const ApechainBadge = require('@/assets/badges/apechainBadge.png');
 
 import { ChainId } from '@/chains/types';
 import { globalColors } from '@/design-system';

src/__swaps__/screens/Swap/components/AnimatedChainImage.ios.tsx

@@ -1,17 +1,6 @@
 import React from 'react';
 import { Image, StyleSheet, View } from 'react-native';
 
-import ArbitrumBadge from '@/assets/badges/arbitrum.png';
-import BaseBadge from '@/assets/badges/base.png';
-import BscBadge from '@/assets/badges/bsc.png';
-import EthereumBadge from '@/assets/badges/ethereum.png';
-import OptimismBadge from '@/assets/badges/optimism.png';
-import PolygonBadge from '@/assets/badges/polygon.png';
-import ZoraBadge from '@/assets/badges/zora.png';
-import AvalancheBadge from '@/assets/badges/avalanche.png';
-import BlastBadge from '@/assets/badges/blast.png';
-import DegenBadge from '@/assets/badges/degen.png';
-import ApechainBadge from '@/assets/badges/apechainBadge.png';
 import { ChainId } from '@/chains/types';
 import { useAnimatedProps, useDerivedValue } from 'react-native-reanimated';
 import { AnimatedFasterImage } from '@/components/AnimatedComponents/AnimatedFasterImage';
@@ -22,6 +11,18 @@ import { PIXEL_RATIO } from '@/utils/deviceUtils';
 import { useSwapContext } from '../providers/swap-provider';
 import { BLANK_BASE64_PIXEL } from '@/components/DappBrowser/constants';
 
+import ApechainBadge from '@/assets/badges/apechain.png';
+import ArbitrumBadge from '@/assets/badges/arbitrum.png';
+import AvalancheBadge from '@/assets/badges/avalanche.png';
+import BaseBadge from '@/assets/badges/base.png';
+import BlastBadge from '@/assets/badges/blast.png';
+import BscBadge from '@/assets/badges/bsc.png';
+import DegenBadge from '@/assets/badges/degen.png';
+import EthereumBadge from '@/assets/badges/ethereum.png';
+import OptimismBadge from '@/assets/badges/optimism.png';
+import PolygonBadge from '@/assets/badges/polygon.png';
+import ZoraBadge from '@/assets/badges/zora.png';
+
 const networkBadges = {
   [ChainId.apechain]: Image.resolveAssetSource(ApechainBadge).uri,
   [ChainId.arbitrum]: Image.resolveAssetSource(ArbitrumBadge).uri,

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,132 @@
+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<TransactionItemForSectionList, TransactionSections>();
+  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;
+    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();