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',