diff --git a/app/(app)/portfolio/layout.tsx b/app/(app)/portfolio/layout.tsx index 5b80222d4..8d929f5cb 100644 --- a/app/(app)/portfolio/layout.tsx +++ b/app/(app)/portfolio/layout.tsx @@ -1,11 +1,8 @@ import { PortfolioProvider } from '@/lib/modules/portfolio/PortfolioProvider' import { DefaultPageContainer } from '@/lib/shared/components/containers/DefaultPageContainer' +import { PropsWithChildren } from 'react' -type Props = { - children: React.ReactNode -} - -export default async function PortfolioLayout({ children }: Props) { +export default async function PortfolioLayout({ children }: PropsWithChildren) { return ( {children} diff --git a/app/(app)/vebal/layout.tsx b/app/(app)/vebal/layout.tsx index 349f5b165..195341a1d 100644 --- a/app/(app)/vebal/layout.tsx +++ b/app/(app)/vebal/layout.tsx @@ -4,10 +4,7 @@ import { TokenBalancesProvider } from '@/lib/modules/tokens/TokenBalancesProvide import { useTokens } from '@/lib/modules/tokens/TokensProvider' import { DefaultPageContainer } from '@/lib/shared/components/containers/DefaultPageContainer' import mainnetNetworkConfig from '@/lib/config/networks/mainnet' - -type PropsWithChildren = { - children: React.ReactNode -} +import { PropsWithChildren } from 'react' export default function VebalLayout({ children }: PropsWithChildren) { const { getTokensByChain } = useTokens() diff --git a/app/(marketing)/components/SandPatterns.tsx b/app/(marketing)/components/SandPatterns.tsx index aca9482a3..bef1af8d3 100644 --- a/app/(marketing)/components/SandPatterns.tsx +++ b/app/(marketing)/components/SandPatterns.tsx @@ -1,12 +1,8 @@ -import React from 'react' -import { Box, Flex, FlexProps } from '@chakra-ui/react' +import React, { PropsWithChildren } from 'react' +import { Box, Flex } from '@chakra-ui/react' import { motion, MotionStyle, useAnimation, useReducedMotion } from 'framer-motion' -interface SandPatternsProps extends FlexProps { - children: React.ReactNode -} - -const SandPatterns: React.FC = ({ children, ...rest }) => { +const SandPatterns: React.FC = ({ children, ...rest }) => { const circles = Array.from({ length: 10 }, (_, i) => i + 1) const controls = useAnimation() const shouldReduceMotion = useReducedMotion() diff --git a/app/layout.tsx b/app/layout.tsx index 4a47f5597..742bb3931 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -10,6 +10,7 @@ import { SpeedInsights } from '@vercel/speed-insights/next' import '@/lib/assets/css/global.css' import { Fathom } from '@/lib/shared/services/fathom/Fathom' import { GlobalAlerts } from '@/lib/shared/components/navs/GlobalAlerts' +import { PropsWithChildren } from 'react' const { projectName } = getProjectConfig() @@ -33,7 +34,7 @@ export const metadata: Metadata = { ], } -export default function RootLayout({ children }: { children: React.ReactNode }) { +export default function RootLayout({ children }: PropsWithChildren) { return ( diff --git a/lib/modules/pool/PoolDetail/PoolInfo/RateProviderInfo.tsx b/lib/modules/pool/PoolDetail/PoolInfo/RateProviderInfo.tsx index 5c3fa0e41..aab01eaa5 100644 --- a/lib/modules/pool/PoolDetail/PoolInfo/RateProviderInfo.tsx +++ b/lib/modules/pool/PoolDetail/PoolInfo/RateProviderInfo.tsx @@ -16,13 +16,13 @@ import { import Link from 'next/link' import { ArrowUpRight } from 'react-feather' import { getRateProviderWarnings } from '../../pool.helpers' +import { PropsWithChildren } from 'react' type RateProviderInfoPopOverProps = { token: GqlToken data: GqlPriceRateProviderData | null level: number - children: React.ReactNode -} +} & PropsWithChildren type PopoverInfoBodyProps = { data: GqlPriceRateProviderData diff --git a/lib/modules/portfolio/PortfolioClaim/ClaimNetworkPools/ClaimNetworkPoolsLayout.tsx b/lib/modules/portfolio/PortfolioClaim/ClaimNetworkPools/ClaimNetworkPoolsLayout.tsx index 466935995..9bae5112d 100644 --- a/lib/modules/portfolio/PortfolioClaim/ClaimNetworkPools/ClaimNetworkPoolsLayout.tsx +++ b/lib/modules/portfolio/PortfolioClaim/ClaimNetworkPools/ClaimNetworkPoolsLayout.tsx @@ -1,10 +1,10 @@ import { Card, CardProps, HStack, Heading, IconButton, Stack } from '@chakra-ui/react' import Link from 'next/link' +import { PropsWithChildren } from 'react' import { ArrowLeft } from 'react-feather' -interface Props extends CardProps { +interface Props extends CardProps, PropsWithChildren { backLink: string - children: React.ReactNode title: string } diff --git a/lib/modules/portfolio/PortfolioProvider.tsx b/lib/modules/portfolio/PortfolioProvider.tsx index 1bd4b9ba2..f086a64ab 100644 --- a/lib/modules/portfolio/PortfolioProvider.tsx +++ b/lib/modules/portfolio/PortfolioProvider.tsx @@ -2,7 +2,7 @@ import { GetPoolsDocument } from '@/lib/shared/services/api/generated/graphql' import { useQuery as useApolloQuery } from '@apollo/experimental-nextjs-app-support/ssr' -import { createContext, useCallback, useMemo } from 'react' +import { createContext, PropsWithChildren, useCallback, useMemo } from 'react' import { useProtocolRewards } from './PortfolioClaim/useProtocolRewards' import { ClaimableReward, useClaimableBalances } from './PortfolioClaim/useClaimableBalances' import { BalTokenReward, useBalTokenRewards } from './PortfolioClaim/useBalRewards' @@ -252,11 +252,7 @@ function _usePortfolio() { export const PortfolioContext = createContext(null) -interface PortfolioProviderProps { - children: React.ReactNode -} - -export function PortfolioProvider({ children }: PortfolioProviderProps) { +export function PortfolioProvider({ children }: PropsWithChildren) { const hook = _usePortfolio() return {children} } diff --git a/lib/modules/transactions/transaction-steps/lib.tsx b/lib/modules/transactions/transaction-steps/lib.tsx index c1b2eb1b4..515a08419 100644 --- a/lib/modules/transactions/transaction-steps/lib.tsx +++ b/lib/modules/transactions/transaction-steps/lib.tsx @@ -1,5 +1,5 @@ import { TransactionBundle } from '@/lib/modules/web3/contracts/contract.types' -import React from 'react' +import { ReactNode } from 'react' import { LockActionType } from '../../vebal/lock/lock.helpers' export enum TransactionState { @@ -72,7 +72,7 @@ export type TransactionStep = { stepType: StepType labels: TransactionLabels isComplete: () => boolean - renderAction: () => React.ReactNode + renderAction: () => ReactNode // All callbacks should be idempotent onSuccess?: () => void onActivated?: () => void diff --git a/lib/shared/components/containers/FadeInOnView.tsx b/lib/shared/components/containers/FadeInOnView.tsx index a8742265f..77babe24c 100644 --- a/lib/shared/components/containers/FadeInOnView.tsx +++ b/lib/shared/components/containers/FadeInOnView.tsx @@ -1,10 +1,9 @@ 'use client' -import { useRef } from 'react' +import { PropsWithChildren, useRef } from 'react' import { useInView } from 'framer-motion' -interface FadeInOnViewProps { - children: React.ReactNode +interface FadeInOnViewProps extends PropsWithChildren { animateOnce?: boolean } diff --git a/lib/shared/components/modals/TransactionModalHeader.tsx b/lib/shared/components/modals/TransactionModalHeader.tsx index ae781ac09..8bed5ee23 100644 --- a/lib/shared/components/modals/TransactionModalHeader.tsx +++ b/lib/shared/components/modals/TransactionModalHeader.tsx @@ -2,7 +2,7 @@ import { useBlockExplorer } from '@/lib/shared/hooks/useBlockExplorer' import { GqlChain } from '@/lib/shared/services/api/generated/graphql' import { Center, HStack, ModalHeader, VStack, Text, Link } from '@chakra-ui/react' import { AnimatePresence, motion } from 'framer-motion' -import React from 'react' +import { ReactNode } from 'react' import { ArrowUpRight, Check } from 'react-feather' import { Hash } from 'viem' @@ -17,7 +17,7 @@ export function TransactionModalHeader({ label: string txHash?: Hash chain: GqlChain - timeout?: React.ReactNode + timeout?: ReactNode isReceiptLoading?: boolean }) { const { getBlockExplorerTxUrl } = useBlockExplorer(chain) diff --git a/lib/shared/components/navs/Navbar.tsx b/lib/shared/components/navs/Navbar.tsx index b52fc537f..bc7472237 100644 --- a/lib/shared/components/navs/Navbar.tsx +++ b/lib/shared/components/navs/Navbar.tsx @@ -14,13 +14,13 @@ import { motion, useMotionTemplate, useMotionValue, useScroll, useTransform } fr import { VeBalLink } from '@/lib/modules/vebal/VebalRedirectModal' import { MobileNav } from './MobileNav' import { useNav } from './useNav' -import { useEffect, useMemo, useState } from 'react' +import { ReactNode, useEffect, useMemo, useState } from 'react' import { usePathname } from 'next/navigation' import { useUserAccount } from '@/lib/modules/web3/UserAccountProvider' type Props = { - leftSlot?: React.ReactNode - rightSlot?: React.ReactNode + leftSlot?: ReactNode + rightSlot?: ReactNode disableBlur?: boolean } diff --git a/lib/shared/components/tables/PaginatedTable.tsx b/lib/shared/components/tables/PaginatedTable.tsx index 0a51f2e10..3bc671382 100644 --- a/lib/shared/components/tables/PaginatedTable.tsx +++ b/lib/shared/components/tables/PaginatedTable.tsx @@ -1,12 +1,12 @@ -import React from 'react' +import { ReactNode } from 'react' import { Box, BoxProps, Center, Text, Spinner, VStack, Skeleton } from '@chakra-ui/react' import { Pagination } from '@/lib/shared/components/pagination/Pagination' interface Props extends BoxProps { items: T[] loading: boolean - renderTableHeader: () => React.ReactNode - renderTableRow: (item: T, index: number) => React.ReactNode + renderTableHeader: () => ReactNode + renderTableRow: (item: T, index: number) => ReactNode showPagination: boolean paginationProps: any // TODO: type this noItemsFoundLabel: string diff --git a/lib/shared/components/tooltips/apr-tooltip/BaseAprTooltip.tsx b/lib/shared/components/tooltips/apr-tooltip/BaseAprTooltip.tsx index 48d8a4f2c..0ffe0a649 100644 --- a/lib/shared/components/tooltips/apr-tooltip/BaseAprTooltip.tsx +++ b/lib/shared/components/tooltips/apr-tooltip/BaseAprTooltip.tsx @@ -23,6 +23,7 @@ import { TooltipAprItem } from './TooltipAprItem' import BigNumber from 'bignumber.js' import { bn, fNum } from '@/lib/shared/utils/numbers' import { isVebalPool } from '@/lib/modules/pool/pool.helpers' +import { ReactNode } from 'react' interface Props { aprItems: GqlPoolAprItem[] @@ -35,11 +36,11 @@ interface Props { totalBaseVeBalText: string totalVeBalTitle?: string maxVeBalText: string - customPopoverContent?: React.ReactNode + customPopoverContent?: ReactNode shouldDisplayBaseTooltip?: boolean shouldDisplayMaxVeBalTooltip?: boolean usePortal?: boolean - children?: React.ReactNode | (({ isOpen }: { isOpen: boolean }) => React.ReactNode) + children?: ReactNode | (({ isOpen }: { isOpen: boolean }) => ReactNode) } const balRewardGradient = diff --git a/lib/shared/components/tooltips/apr-tooltip/TooltipAprItem.tsx b/lib/shared/components/tooltips/apr-tooltip/TooltipAprItem.tsx index 1ccb5a6a7..e00a85b90 100644 --- a/lib/shared/components/tooltips/apr-tooltip/TooltipAprItem.tsx +++ b/lib/shared/components/tooltips/apr-tooltip/TooltipAprItem.tsx @@ -1,6 +1,7 @@ import { useThemeColorMode } from '@/lib/shared/services/chakra/useThemeColorMode' import { BoxProps, TextProps, Box, HStack, Text, Tooltip } from '@chakra-ui/react' import BigNumber from 'bignumber.js' +import { ReactNode } from 'react' const tooltipTextDecorationStyles: TextProps = { textDecoration: 'underline', @@ -22,7 +23,7 @@ interface PopoverAprItemProps extends BoxProps { textBackgroundClip?: string tooltipText?: string textVariant?: string - children?: React.ReactNode + children?: ReactNode } export function TooltipAprItem({