Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

convert sends to typescript #6120

Merged
merged 12 commits into from
Oct 2, 2024
6 changes: 3 additions & 3 deletions src/components/AddFundsInterstitial.js
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
53 changes: 42 additions & 11 deletions src/components/Divider.js → src/components/Divider.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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];

Expand All @@ -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,
Expand All @@ -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}>
Expand Down
2 changes: 1 addition & 1 deletion src/components/L2Disclaimer.js
Original file line number Diff line number Diff line change
@@ -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';
Expand Down
2 changes: 1 addition & 1 deletion src/components/change-wallet/WalletList.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
3 changes: 1 addition & 2 deletions src/components/coin-row/CollectiblesSendRow.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -114,7 +114,6 @@ const CollectiblesSendRow = React.memo(
<Fragment>
{isFirstRow && (
<Centered height={dividerHeight}>
{/* @ts-expect-error JavaScript component */}
<Divider color={colors.rowDividerLight} />
</Centered>
)}
Expand Down
1 change: 0 additions & 1 deletion src/components/exchange/CurrencySelectModalHeader.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
6 changes: 3 additions & 3 deletions src/components/exchange/NetworkSwitcher.js
Original file line number Diff line number Diff line change
@@ -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';
Expand Down
2 changes: 1 addition & 1 deletion src/components/expanded-state/AvailableNetworks.js
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
4 changes: 2 additions & 2 deletions src/components/expanded-state/AvailableNetworksv2.tsx
Original file line number Diff line number Diff line change
@@ -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';
Expand Down
2 changes: 1 addition & 1 deletion src/components/expanded-state/CustomGasState.js
Original file line number Diff line number Diff line change
@@ -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';
Expand Down
2 changes: 1 addition & 1 deletion src/components/expanded-state/profile/ProfileModal.tsx
Original file line number Diff line number Diff line change
@@ -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';
Expand Down
Original file line number Diff line number Diff line change
@@ -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';
Expand Down
8 changes: 4 additions & 4 deletions src/components/gas/GasSpeedButton.js
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down
2 changes: 1 addition & 1 deletion src/components/layout/LayoutWithDividers.js
Original file line number Diff line number Diff line change
@@ -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) => {
Expand Down
4 changes: 2 additions & 2 deletions src/components/list/ListHeader.js
Original file line number Diff line number Diff line change
@@ -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';
Expand Down
2 changes: 1 addition & 1 deletion src/components/list/ListItemDivider.js
Original file line number Diff line number Diff line change
@@ -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';

Expand Down
2 changes: 1 addition & 1 deletion src/components/modal/ModalFooterButtonsRow.js
Original file line number Diff line number Diff line change
@@ -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';

Expand Down
2 changes: 1 addition & 1 deletion src/components/send/SendAssetList.js
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
Loading
Loading