convert sends to typescript (#6120)

* convert sends to typescript

* more conversions

* fix lint

* fix optimism security fee

* fix file renaming weirdness

* fix rotation from max asset to nft not working

* fix some typescript bs

* fix lint

* fix nft sends

src/components/AddFundsInterstitial.js

@@ -7,9 +7,9 @@ import showWalletErrorAlert from '../helpers/support';
 import { useNavigation } from '../navigation/Navigation';
 import { useTheme } from '../theme/ThemeContext';
 import { deviceUtils, magicMemo } from '../utils';
-import Divider from './Divider';
-import { ButtonPressAnimation, ScaleButtonZoomableAndroid } from './animations';
-import { Icon } from './icons';
+import Divider from '@/components/Divider';
+import { ButtonPressAnimation, ScaleButtonZoomableAndroid } from '@/components/animations';
+import { Icon } from '@/components/icons';
 import { Centered, Row, RowWithMargins } from './layout';
 import { Text } from './text';
 import { analyticsV2 } from '@/analytics';

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 { StyleProp, View, ViewProps, ViewStyle } from 'react-native';
+import { ThemeContextProps, useTheme } from '@/theme';
 
 export const DividerSize = 2;
 
-const buildInsetFromProps = inset => {
+const buildInsetFromProps = (inset: 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[]) => `
   ${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[]) => ({
   ...(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[]) => `
   ${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[]) => ({
   ...(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 }) => {
+type 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,37 @@ const BorderLine = styled.View(({ color, horizontal, inset }) => {
   };
 });
 
-const Container = styled.View({
-  backgroundColor: ({ backgroundColor, theme: { colors } }) => backgroundColor || colors.white,
+type ContainerProps = {
+  backgroundColor: string;
+  horizontal: boolean;
+  size: number;
+  theme: ThemeContextProps;
+};
+
+const Container = styled(View)({
+  backgroundColor: ({ backgroundColor, theme: { colors } }: ContainerProps) => backgroundColor || colors.white,
   flexShrink: 0,
-  height: ({ horizontal, size }) => (horizontal ? size : '100%'),
-  width: ({ horizontal, size }) => (horizontal ? '100%' : size),
+  height: ({ horizontal, size }: ContainerProps) => (horizontal ? size : '100%'),
+  width: ({ horizontal, size }: ContainerProps) => (horizontal ? '100%' : size),
 });
 
-const Divider = ({ backgroundColor, color, horizontal = true, inset = [0, 0, 0, 19], size = DividerSize, ...props }) => {
+type DividerProps = {
+  backgroundColor?: string;
+  color?: string;
+  horizontal?: boolean;
+  inset?: number | number[];
+  size?: number;
+  flex?: number;
+};
+
+const Divider = ({
+  backgroundColor = undefined,
+  color = undefined,
+  horizontal = true,
+  inset = [0, 0, 0, 19],
+  size = DividerSize,
+  ...props
+}: DividerProps) => {
   const { colors } = useTheme();
   return (
     <Container {...props} backgroundColor={backgroundColor} horizontal={horizontal} size={size}>

src/components/L2Disclaimer.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import RadialGradient from 'react-native-radial-gradient';
-import Divider from './Divider';
+import Divider from '@/components/Divider';
 import ButtonPressAnimation from './animations/ButtonPressAnimation';
 import ChainBadge from './coin-icon/ChainBadge';
 import { Column, Row } from './layout';

src/components/change-wallet/WalletList.tsx

@@ -6,7 +6,7 @@ import { FlatList } from 'react-native-gesture-handler';
 import Animated, { Easing, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
 import WalletTypes from '../../helpers/walletTypes';
 import { address } from '../../utils/abbreviations';
-import Divider from '../Divider';
+import Divider from '@/components/Divider';
 import { EmptyAssetList } from '../asset-list';
 import { Column } from '../layout';
 import AddressRow from './AddressRow';

src/components/coin-row/CollectiblesSendRow.tsx

@@ -3,7 +3,7 @@ import { PressableProps, TouchableWithoutFeedback } from 'react-native';
 import { buildAssetUniqueIdentifier } from '../../helpers/assets';
 import { useTheme } from '../../theme/ThemeContext';
 import { deviceUtils, getUniqueTokenType, magicMemo } from '../../utils';
-import Divider from '../Divider';
+import Divider from '@/components/Divider';
 import { ButtonPressAnimation } from '../animations';
 import { RequestVendorLogoIcon } from '../coin-icon';
 import { Centered } from '../layout';
@@ -114,7 +114,6 @@ const CollectiblesSendRow = React.memo(
       <Fragment>
         {isFirstRow && (
           <Centered height={dividerHeight}>
-            {/* @ts-expect-error JavaScript component */}
             <Divider color={colors.rowDividerLight} />
           </Centered>
         )}

src/components/exchange/CurrencySelectModalHeader.tsx

@@ -39,7 +39,6 @@ export default function CurrencySelectModalHeader({
 
   return (
     <Box height={{ custom: CurrencySelectModalHeaderHeight }} justifyContent="center" alignItems="center" width="full" flexDirection="row">
-      {/** @ts-expect-error JavaScript component */}
       {showHandle && <SheetHandleFixedToTop />}
       {showBackButton && (
         <Box position="absolute" bottom="0px" left="0px" top={{ custom: 3 }} justifyContent="center" alignItems="center">

src/components/exchange/NetworkSwitcher.js

@@ -1,9 +1,9 @@
 import lang from 'i18n-js';
 import React from 'react';
 import RadialGradient from 'react-native-radial-gradient';
-import Divider from '../Divider';
-import ChainBadge from '../coin-icon/ChainBadge';
-import { ContextMenuButton } from '../context-menu';
+import Divider from '@/components/Divider';
+import ChainBadge from '@/components/coin-icon/ChainBadge';
+import { ContextMenuButton } from '@/components/context-menu';
 import { Column, Row } from '../layout';
 import { Text } from '../text';
 import { padding, position } from '@/styles';

src/components/expanded-state/AvailableNetworks.js

@@ -10,7 +10,7 @@ import { useTheme } from '@/theme';
 import { ButtonPressAnimation } from '../animations';
 import { Column, Row } from '../layout';
 import { ChainBadge } from '../coin-icon';
-import Divider from '../Divider';
+import Divider from '@/components/Divider';
 import { Text } from '../text';
 import { EthCoinIcon } from '../coin-icon/EthCoinIcon';
 import { ChainId } from '@/chains/types';

src/components/expanded-state/AvailableNetworksv2.tsx

@@ -1,8 +1,8 @@
 import lang from 'i18n-js';
 import React, { useCallback, useMemo } from 'react';
 import RadialGradient from 'react-native-radial-gradient';
-import Divider from '../Divider';
-import ChainBadge from '../coin-icon/ChainBadge';
+import Divider from '@/components/Divider';
+import ChainBadge from '@/components/coin-icon/ChainBadge';
 import { Box, Inline, Text } from '@/design-system';
 import { useNavigation } from '@/navigation';
 import Routes from '@/navigation/routesNames';

src/components/expanded-state/CustomGasState.js

@@ -1,7 +1,7 @@
 import { useIsFocused, useRoute } from '@react-navigation/native';
 import React, { useEffect, useState } from 'react';
 import { getSoftMenuBarHeight } from 'react-native-extra-dimensions-android';
-import Divider from '../Divider';
+import Divider from '@/components/Divider';
 import { ExchangeHeader } from '../exchange';
 import { FloatingPanel } from '../floating-panels';
 import { GasSpeedButton } from '../gas';

src/components/expanded-state/profile/ProfileModal.tsx

@@ -1,7 +1,7 @@
 import lang from 'i18n-js';
 import React, { useCallback, useRef } from 'react';
 import { View } from 'react-native';
-import Divider from '../../Divider';
+import Divider from '@/components/Divider';
 import { ButtonPressAnimation } from '../../animations';
 import { BiometricButtonContent } from '../../buttons';
 import CopyTooltip from '../../copy-tooltip';

src/components/expanded-state/swap-details/SwapDetailsSlippageMessage.js

@@ -1,6 +1,6 @@
 import lang from 'i18n-js';
 import React from 'react';
-import Divider from '../../Divider';
+import Divider from '@/components/Divider';
 import { Centered, Column, ColumnWithMargins, Row } from '../../layout';
 import { Emoji, Text } from '../../text';
 import styled from '@/styled-thing';

src/components/gas/GasSpeedButton.js

@@ -139,13 +139,13 @@ const GasSpeedButton = ({
   marginBottom = 20,
   marginTop = 18,
   speeds = null,
-  testID,
+  testID = 'gas-speed-button',
   theme = 'dark',
   canGoBack = true,
-  showGasOptions,
-  validateGasParams,
+  showGasOptions = false,
+  validateGasParams = undefined,
   flashbotTransaction = false,
-  crossChainServiceTime,
+  crossChainServiceTime = undefined,
   loading = false,
 }) => {
   const { colors } = useTheme();

src/components/layout/LayoutWithDividers.js

@@ -1,5 +1,5 @@
 import React, { Children, createElement, Fragment, useMemo } from 'react';
-import Divider from '../Divider';
+import Divider from '@/components/Divider';
 import Flex from './Flex';
 
 const LayoutWithDividers = ({ children, dividerHorizontal, dividerRenderer = Divider, ...props }, ref) => {

src/components/list/ListHeader.js

@@ -1,7 +1,7 @@
 import lang from 'i18n-js';
-import React, { createElement, Fragment } from 'react';
+import React, { Fragment } from 'react';
 import { Share } from 'react-native';
-import Divider from '../Divider';
+import Divider from '@/components/Divider';
 import { ButtonPressAnimation } from '../animations';
 import CoinDividerButtonLabel from '../coin-divider/CoinDividerButtonLabel';
 import { ContextMenu } from '../context-menu';

src/components/list/ListItemDivider.js

@@ -1,5 +1,5 @@
 import { PropTypes } from 'prop-types';
-import Divider from '../Divider';
+import Divider from '@/components/Divider';
 import styled from '@/styled-thing';
 import { neverRerender } from '@/utils';
 

src/components/modal/ModalFooterButtonsRow.js

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React, { Children, Fragment } from 'react';
-import Divider from '../Divider';
+import Divider from '@/components/Divider';
 import { Row } from '../layout';
 import styled from '@/styled-thing';
 

src/components/send/SendAssetList.js

@@ -4,7 +4,7 @@ import { View } from 'react-primitives';
 import { DataProvider, LayoutProvider, RecyclerListView } from 'recyclerlistview';
 import { buildCoinsList } from '../../helpers/assets';
 import { deviceUtils } from '../../utils';
-import Divider, { DividerSize } from '../Divider';
+import Divider, { DividerSize } from '@/components/Divider';
 import { FlyInAnimation } from '../animations';
 import { CoinDividerOpenButton } from '../coin-divider';
 import { CollectiblesSendRow, SendCoinRow } from '../coin-row';