diff --git a/src/identity/components/Avatar.tsx b/src/identity/components/Avatar.tsx index 1fadfc327b..a7431bef6b 100644 --- a/src/identity/components/Avatar.tsx +++ b/src/identity/components/Avatar.tsx @@ -1,6 +1,7 @@ import { Children, useMemo } from 'react'; import { defaultAvatarSVG } from '../../internal/svg/defaultAvatarSVG'; import { defaultLoadingSVG } from '../../internal/svg/defaultLoadingSVG'; +import { findComponent } from '../../internal/utils/findComponent'; import { cn } from '../../styles/theme'; import { useAvatar } from '../hooks/useAvatar'; import { useName } from '../hooks/useName'; @@ -46,8 +47,7 @@ export function Avatar({ ); const badge = useMemo(() => { - // @ts-ignore - return Children.toArray(children).find(({ type }) => type === Badge); + return Children.toArray(children).find(findComponent(Badge)); }, [children]); const defaultAvatar = defaultComponent || defaultAvatarSVG; diff --git a/src/identity/components/Name.tsx b/src/identity/components/Name.tsx index 2fbd493066..69e5d17c3d 100644 --- a/src/identity/components/Name.tsx +++ b/src/identity/components/Name.tsx @@ -1,4 +1,5 @@ import { Children, useMemo } from 'react'; +import { findComponent } from '../../internal/utils/findComponent'; import { cn, text } from '../../styles/theme'; import { useName } from '../hooks/useName'; import type { NameReact } from '../types'; @@ -33,9 +34,7 @@ export function Name({ }); const badge = useMemo(() => { - // @ts-ignore - // istanbul ignore next - return Children.toArray(children).find(({ type }) => type === Badge); + return Children.toArray(children).find(findComponent(Badge)); }, [children]); if (isLoading) { diff --git a/src/internal/utils/findComponent.test.tsx b/src/internal/utils/findComponent.test.tsx index 0a059c85ef..67cc8ac5ee 100644 --- a/src/internal/utils/findComponent.test.tsx +++ b/src/internal/utils/findComponent.test.tsx @@ -1,42 +1,35 @@ import type { ReactNode } from 'react'; import { describe, expect, it } from 'vitest'; -/** - * @vitest-environment jsdom - */ +import { Avatar } from '../../identity/components/Avatar'; +import { Name } from '../../identity/components/Name'; import { findComponent } from './findComponent'; -const ToThe = () =>
Name Component
; -const Moon = () =>
Age Component
; - describe('findComponent', () => { it('should find the Name component in the array', () => { const childrenArray: ReactNode[] = [
Random div
, - , - , + , + , ]; - - const foundNameComponent = childrenArray.find(findComponent(ToThe)); + const foundNameComponent = childrenArray.find(findComponent(Name)); expect(foundNameComponent).toBeDefined(); - expect(foundNameComponent?.type).toBe(ToThe); + expect(foundNameComponent?.type).toBe(Name); }); - it('should find the Age component in the array', () => { + it('should find the Avatar component in the array', () => { const childrenArray: ReactNode[] = [
Random div
, - , - , + , + , ]; - - const foundAgeComponent = childrenArray.find(findComponent(Moon)); + const foundAgeComponent = childrenArray.find(findComponent(Avatar)); expect(foundAgeComponent).toBeDefined(); - expect(foundAgeComponent?.type).toBe(Moon); + expect(foundAgeComponent?.type).toBe(Avatar); }); it('should return undefined if the component is not in the array', () => { const childrenArray: ReactNode[] = [
Random div
]; - - const foundNameComponent = childrenArray.find(findComponent(ToThe)); + const foundNameComponent = childrenArray.find(findComponent(Name)); expect(foundNameComponent).toBeUndefined(); }); }); diff --git a/src/swap/components/Swap.tsx b/src/swap/components/Swap.tsx index 919c21463e..fafc0b6881 100644 --- a/src/swap/components/Swap.tsx +++ b/src/swap/components/Swap.tsx @@ -1,4 +1,5 @@ import { Children, useMemo } from 'react'; +import { findComponent } from '../../internal/utils/findComponent'; import { background, cn, text } from '../../styles/theme'; import type { SwapReact } from '../types'; import { SwapAmountInput } from './SwapAmountInput'; @@ -7,7 +8,6 @@ import { SwapMessage } from './SwapMessage'; import { SwapProvider } from './SwapProvider'; import { SwapToggleButton } from './SwapToggleButton'; -// istanbul ignore next export function Swap({ address, experimental = { useAggregator: true }, @@ -18,16 +18,10 @@ export function Swap({ const { inputs, toggleButton, swapButton, swapMessage } = useMemo(() => { const childrenArray = Children.toArray(children); return { - // @ts-ignore - inputs: childrenArray.filter(({ type }) => type === SwapAmountInput), - // @ts-ignore - toggleButton: childrenArray.find(({ type }) => type === SwapToggleButton), - swapButton: childrenArray.find( - // @ts-ignore - ({ type }) => type.name === SwapButton.name, - ), - // @ts-ignore - swapMessage: childrenArray.find(({ type }) => type === SwapMessage), + inputs: childrenArray.filter(findComponent(SwapAmountInput)), + toggleButton: childrenArray.find(findComponent(SwapToggleButton)), + swapButton: childrenArray.find(findComponent(SwapButton)), + swapMessage: childrenArray.find(findComponent(SwapMessage)), }; }, [children]); diff --git a/src/wallet/components/Wallet.tsx b/src/wallet/components/Wallet.tsx index 35b48c5089..9fa2176b51 100644 --- a/src/wallet/components/Wallet.tsx +++ b/src/wallet/components/Wallet.tsx @@ -1,4 +1,5 @@ import { Children, useEffect, useMemo, useRef } from 'react'; +import { findComponent } from '../../internal/utils/findComponent'; import type { WalletReact } from '../types'; import { ConnectWallet } from './ConnectWallet'; import { WalletDropdown } from './WalletDropdown'; @@ -11,10 +12,8 @@ const WalletContent = ({ children }: WalletReact) => { const { connect, dropdown } = useMemo(() => { const childrenArray = Children.toArray(children); return { - // @ts-ignore - connect: childrenArray.filter(({ type }) => type === ConnectWallet), - // @ts-ignore - dropdown: childrenArray.filter(({ type }) => type === WalletDropdown), + connect: childrenArray.find(findComponent(ConnectWallet)), + dropdown: childrenArray.find(findComponent(WalletDropdown)), }; }, [children]); diff --git a/vitest.config.ts b/vitest.config.ts index b737f6e4a5..03ec0a5704 100644 --- a/vitest.config.ts +++ b/vitest.config.ts @@ -22,10 +22,10 @@ export default defineConfig({ ], reportOnFailure: true, thresholds: { - statements: 99.24, - branches: 98.02, - functions: 93.33, - lines: 99.24, + statements: 99.28, + branches: 98.27, + functions: 94.47, + lines: 99.28, }, }, environment: 'jsdom',