good lord

package.json

@@ -339,6 +339,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/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/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,13 +16,19 @@ 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();
 
   return (
     <View>
-      {children}
+      {children && children}
       <Container height={deviceUtils.dimensions.height - (navbarHeight + topInset) * 2}>
         <Centered>
           <Text align="center" letterSpacing="zero" size="h2">

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}>