fix: set client boundary for Swap and Token components

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

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,