balancer · garethfuller · Sep 18, 2024 · Sep 18, 2024
diff --git 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 (
     <DefaultPageContainer minH="100vh">
       <PortfolioProvider>{children}</PortfolioProvider>

diff --git 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
@@ -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<SandPatternsProps> = ({ children, ...rest }) => {
+const SandPatterns: React.FC<PropsWithChildren> = ({ 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
@@ -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 (
     <html lang="en" suppressHydrationWarning>
       <head>

diff --git 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
@@ -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
@@ -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<UsePortfolio | null>(null)
 
-interface PortfolioProviderProps {
-  children: React.ReactNode
-}
-
-export function PortfolioProvider({ children }: PortfolioProviderProps) {
+export function PortfolioProvider({ children }: PropsWithChildren) {
   const hook = _usePortfolio()
   return <PortfolioContext.Provider value={hook}>{children}</PortfolioContext.Provider>
 }

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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<T> 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
@@ -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
@@ -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({