[CHORE]: Remove transaction inconsistencies and improve type safety

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/__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.js → src/components/Divider.tsx

@@ -3,10 +3,12 @@ import React from 'react';
 import { magicMemo } from '../utils';
 import styled from '@/styled-thing';
 import { borders, position } from '@/styles';
+import { View } from 'react-native';
+import { ThemeContextProps, useTheme } from '@/theme';
 
 export const DividerSize = 2;
 
-const buildInsetFromProps = inset => {
+const buildInsetFromProps = (inset: number | number[]): number[] => {
   if (!inset) return [0, 0, 0, 0];
   if (isNumber(inset)) return [inset, inset, inset, inset];
 
@@ -15,35 +17,41 @@ const buildInsetFromProps = inset => {
   return [inset[0], rightInset, inset[2] || inset[0], !isNil(inset[3]) ? inset[3] : rightInset];
 };
 
-const horizontalBorderLineStyles = inset => `
+const horizontalBorderLineStyles = (inset: number[]): string => `
   ${inset[3] ? borders.buildRadius('left', 2) : ''}
   ${inset[1] ? borders.buildRadius('right', 2) : ''}
   left: ${inset[3]};
   right: ${inset[1]};
 `;
 
-horizontalBorderLineStyles.object = inset => ({
+horizontalBorderLineStyles.object = (inset: number[]): object => ({
   ...(inset[3] ? borders.buildRadiusAsObject('left', 2) : {}),
   ...(inset[1] ? borders.buildRadiusAsObject('right', 2) : {}),
   left: inset[3],
   right: inset[1],
 });
 
-const verticalBorderLineStyles = inset => `
+const verticalBorderLineStyles = (inset: number[]): string => `
   ${inset[2] ? borders.buildRadius('bottom', 2) : ''}
   ${inset[0] ? borders.buildRadius('top', 2) : ''}
   bottom: ${inset[2]};
   top: ${inset[0]};
 `;
 
-verticalBorderLineStyles.object = inset => ({
+verticalBorderLineStyles.object = (inset: number[]): object => ({
   ...(inset[2] ? borders.buildRadiusAsObject('bottom', 2) : {}),
   ...(inset[0] ? borders.buildRadiusAsObject('top', 2) : {}),
   bottom: inset[2],
   top: inset[0],
 });
 
-const BorderLine = styled.View(({ color, horizontal, inset }) => {
+interface BorderLineProps {
+  color: string;
+  horizontal: boolean;
+  inset: number | number[];
+}
+
+const BorderLine = styled(View)(({ color, horizontal, inset }: BorderLineProps) => {
   const insetFromProps = buildInsetFromProps(inset);
   return {
     ...position.coverAsObject,
@@ -52,14 +60,30 @@ const BorderLine = styled.View(({ color, horizontal, inset }) => {
   };
 });
 
-const Container = styled.View({
-  backgroundColor: ({ backgroundColor, theme: { colors } }) => backgroundColor || colors.white,
+interface ContainerProps {
+  backgroundColor: string;
+  horizontal: boolean;
+  size: number;
+  theme: ThemeContextProps;
+}
+
+const Container = styled(View)(({ backgroundColor, theme: { colors } }: ContainerProps) => ({
+  backgroundColor: backgroundColor || colors.white,
   flexShrink: 0,
-  height: ({ horizontal, size }) => (horizontal ? size : '100%'),
-  width: ({ horizontal, size }) => (horizontal ? '100%' : size),
-});
+  height: ({ horizontal, size }: { horizontal: boolean; size: number }) => (horizontal ? size : '100%'),
+  width: ({ horizontal, size }: { horizontal: boolean; size: number }) => (horizontal ? '100%' : size),
+}));
+
+interface DividerProps {
+  backgroundColor?: string;
+  color?: string;
+  horizontal?: boolean;
+  inset?: number | number[];
+  size?: number;
+  [key: string]: any;
+}
 
-const Divider = ({ backgroundColor, color, horizontal = true, inset = [0, 0, 0, 19], size = DividerSize, ...props }) => {
+const Divider = ({ backgroundColor, color, horizontal = true, inset = [0, 0, 0, 19], size = DividerSize, ...props }: DividerProps) => {
   const { colors } = useTheme();
   return (
     <Container {...props} backgroundColor={backgroundColor} horizontal={horizontal} size={size}>