fix: set client boundary for Swap and Token components

packemon.config.ts

@@ -24,7 +24,6 @@ const config = {
           // Remove the original directive and split into lines
           const lines = code.replace("'use client';", '').split('\n');
           // Filter out any empty lines and reconstruct
-
           return {
             code: `'use client';\n${lines.filter((line) => line.trim()).join('\n')}`,
             map: null,

src/core-react/internal/utils/findComponent.test.tsx

@@ -1,8 +1,8 @@
-import type { ReactNode } from 'react';
+import type { ReactElement, ReactNode } from 'react';
 import { describe, expect, it } from 'vitest';
 import { Avatar } from '../../../ui/react/identity/components/Avatar';
 import { Name } from '../../../ui/react/identity/components/Name';
-import { findComponent } from './findComponent';
+import { type ServerComponentPayload, findComponent } from './findComponent';
 
 describe('findComponent', () => {
   it('should find the Name component in the array', () => {
@@ -32,4 +32,43 @@ describe('findComponent', () => {
     const foundNameComponent = childrenArray.find(findComponent(Name));
     expect(foundNameComponent).toBeUndefined();
   });
+
+  it('should find component in Next.js server component payload', () => {
+    const serverComponent: ReactElement & { type: ServerComponentPayload } = {
+      type: {
+        _payload: {
+          value: ['/path/to/Name', ['chunk1', 'chunk2'], 'Name'],
+        },
+      },
+      props: { address: '0x123456789' },
+      key: null,
+      ref: null,
+    } as unknown as ReactElement & { type: ServerComponentPayload };
+
+    const childrenArray: ReactNode[] = [
+      <div key="1">Random div</div>,
+      serverComponent,
+      <Avatar key="3" address="0x123456789" />,
+    ];
+
+    const foundNameComponent = childrenArray.find(findComponent(Name));
+    expect(foundNameComponent).toBeDefined();
+  });
+
+  it('should return undefined for server component with different name', () => {
+    const serverComponent: ReactElement & { type: ServerComponentPayload } = {
+      type: {
+        _payload: {
+          value: ['/path/to/Different', ['chunk1'], 'Different'],
+        },
+      },
+      props: {},
+      key: null,
+      ref: null,
+    } as unknown as ReactElement & { type: ServerComponentPayload };
+
+    const childrenArray: ReactNode[] = [serverComponent];
+    const foundNameComponent = childrenArray.find(findComponent(Name));
+    expect(foundNameComponent).toBeUndefined();
+  });
 });

src/core-react/internal/utils/findComponent.ts

@@ -1,8 +1,25 @@
 import { isValidElement } from 'react';
 import type { ComponentType, ReactElement, ReactNode } from 'react';
 
-export function findComponent<T>(component: ComponentType<T>) {
+// Type for Next.js Server Component Payload
+// Temporary patch until we update to deafult children and remove internal findComponent
+export interface ServerComponentPayload {
+  _payload: {
+    value: [string, string[], string]; // [modulePath, chunks, componentName]
+  };
+}
+
+export function findComponent<T>(Component: ComponentType<T>) {
   return (child: ReactNode): child is ReactElement<T> => {
-    return isValidElement(child) && child.type === component;
+    const childType = (child as ReactElement<T>)?.type;
+
+    // Handle server component payload
+    if (childType && typeof childType === 'object' && '_payload' in childType) {
+      const serverPayload = childType as ServerComponentPayload;
+      return serverPayload._payload.value[2] === Component.name;
+    }
+
+    // Handle client component
+    return isValidElement(child) && child.type === Component;
   };
 }

src/swap/components/Swap.tsx

@@ -1,3 +1,4 @@
+'use client';
 import { Children, useMemo } from 'react';
 import { useIsMounted } from '../../core-react/internal/hooks/useIsMounted';
 import { useTheme } from '../../core-react/internal/hooks/useTheme';

src/swap/components/SwapAmountInput.tsx

@@ -1,3 +1,4 @@
+'use client';
 import { useCallback, useEffect, useMemo } from 'react';
 import { useValue } from '../../core-react/internal/hooks/useValue';
 import { getRoundedAmount } from '../../core/utils/getRoundedAmount';

src/swap/components/SwapButton.tsx

@@ -1,3 +1,4 @@
+'use client';
 import { Spinner } from '@/internal/components/Spinner';
 import { background, border, cn, color, pressable, text } from '@/styles/theme';
 import { ConnectWallet } from '@/wallet/components/ConnectWallet';

src/swap/components/SwapDefault.tsx

@@ -1,3 +1,4 @@
+'use client';
 import type { SwapDefaultReact } from '../types';
 import { Swap } from './Swap';
 import { SwapAmountInput } from './SwapAmountInput';

src/swap/components/SwapMessage.tsx

@@ -1,3 +1,4 @@
+'use client';
 import { cn, color, text } from '../../styles/theme';
 import type { SwapMessageReact } from '../types';
 import { getSwapMessage } from '../utils/getSwapMessage';

src/swap/components/SwapSettingsSlippageDescription.test.tsx

@@ -1,3 +1,4 @@
+'use client';
 import { render, screen } from '@testing-library/react';
 import { describe, expect, it, vi } from 'vitest';
 import { SwapSettingsSlippageDescription } from './SwapSettingsSlippageDescription';

src/swap/components/SwapSettingsSlippageInput.tsx

@@ -1,3 +1,4 @@
+'use client';
 import { useCallback, useState } from 'react';
 import {
   background,

src/swap/components/SwapSettingsSlippageTitle.tsx

@@ -1,3 +1,4 @@
+'use client';
 import { cn, color, text } from '../../styles/theme';
 import type { SwapSettingsSlippageTitleReact } from '../types';
 

src/swap/components/SwapToast.tsx

@@ -1,3 +1,4 @@
+'use client';
 import { useCallback } from 'react';
 import { cn, color, text } from '../../styles/theme';
 

src/swap/components/SwapToggleButton.tsx

@@ -1,3 +1,4 @@
+'use client';
 import { toggleSvg } from '../../internal/svg/toggleSvg';
 import { border, cn, pressable } from '../../styles/theme';
 import type { SwapToggleButtonReact } from '../types';

src/swap/index.ts

@@ -1,4 +1,5 @@
 // 🌲☀🌲
+// Components
 export { Swap } from './components/Swap';
 export { SwapAmountInput } from './components/SwapAmountInput';
 export { SwapButton } from './components/SwapButton';
@@ -10,6 +11,8 @@ export { SwapSettingsSlippageInput } from './components/SwapSettingsSlippageInpu
 export { SwapSettingsSlippageTitle } from './components/SwapSettingsSlippageTitle';
 export { SwapToast } from './components/SwapToast';
 export { SwapToggleButton } from './components/SwapToggleButton';
+
+// Types
 export type {
   /** @deprecated Prefer import from `api` module */
   BuildSwapTransaction,

src/token/components/TokenChip.tsx

@@ -1,10 +1,12 @@
+'use client';
+
 import { useTheme } from '../../core-react/internal/hooks/useTheme';
 import { background, cn, pressable, text } from '../../styles/theme';
 import type { TokenChipReact } from '../types';
 import { TokenImage } from './TokenImage';
 
 /**
- * Small button that display a given token symbol and image.
+ * Small button that displays a given token symbol and image.
  *
  * WARNING: This component is under development and
  *          may change in the next few weeks.

src/token/components/TokenImage.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { useMemo } from 'react';
 import { cn } from '../../styles/theme';
 import type { TokenImageReact } from '../types';

src/token/components/TokenRow.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { memo } from 'react';
 import { useTheme } from '../../core-react/internal/hooks/useTheme';
 import { cn, color, pressable, text } from '../../styles/theme';

src/token/components/TokenSearch.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { useCallback, useState } from 'react';
 import { useTheme } from '../../core-react/internal/hooks/useTheme';
 import { TextInput } from '../../internal/components/TextInput';

src/token/components/TokenSelectDropdown.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { useTheme } from '../../core-react/internal/hooks/useTheme';
 import { background, border, cn } from '../../styles/theme';

src/token/components/TokenSelectModal.tsx

@@ -1,3 +1,4 @@
+'use client';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { background, cn, text } from '../../styles/theme';
 import type { Token, TokenSelectModalReact } from '../types';

src/token/index.ts

@@ -1,11 +1,16 @@
 // 🌲☀🌲
+// Components
 export { TokenChip } from './components/TokenChip';
 export { TokenImage } from './components/TokenImage';
 export { TokenRow } from './components/TokenRow';
 export { TokenSearch } from './components/TokenSearch';
 export { TokenSelectDropdown } from './components/TokenSelectDropdown';
 export { TokenSelectModal } from './components/TokenSelectModal';
+
+// Utils
 export { formatAmount } from './utils/formatAmount';
+
+// Types
 export type {
   FormatAmountOptions,
   FormatAmountResponse,