From 27e0ac336254c372af1829422fd7ed05fcc40670 Mon Sep 17 00:00:00 2001
From: roushou <roushou9@gmail.com>
Date: Fri, 21 Jun 2024 06:54:41 +0700
Subject: [PATCH] feat: add `use client` directives to swap components

---
 .changeset/three-bottles-kiss.md         | 5 +++++
 src/swap/components/Swap.tsx             | 2 ++
 src/swap/components/SwapAmountInput.tsx  | 2 ++
 src/swap/components/SwapButton.tsx       | 2 ++
 src/swap/components/SwapMessage.tsx      | 2 ++
 src/swap/components/SwapToggleButton.tsx | 2 ++
 6 files changed, 15 insertions(+)
 create mode 100644 .changeset/three-bottles-kiss.md

diff --git a/.changeset/three-bottles-kiss.md b/.changeset/three-bottles-kiss.md
new file mode 100644
index 0000000000..b6148c003a
--- /dev/null
+++ b/.changeset/three-bottles-kiss.md
@@ -0,0 +1,5 @@
+---
+"@coinbase/onchainkit": patch
+---
+
+feat: add `use client` directives to swap components
diff --git a/src/swap/components/Swap.tsx b/src/swap/components/Swap.tsx
index d103c5aae9..ed0d3ba932 100644
--- a/src/swap/components/Swap.tsx
+++ b/src/swap/components/Swap.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import { Children, useCallback, useMemo, useState } from 'react';
 import { SwapAmountInput } from './SwapAmountInput';
 import { SwapButton } from './SwapButton';
diff --git a/src/swap/components/SwapAmountInput.tsx b/src/swap/components/SwapAmountInput.tsx
index a4bf6dceb1..d89c564c14 100644
--- a/src/swap/components/SwapAmountInput.tsx
+++ b/src/swap/components/SwapAmountInput.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import { useCallback, useEffect, useMemo } from 'react';
 
 import { useSwapContext } from '../context';
diff --git a/src/swap/components/SwapButton.tsx b/src/swap/components/SwapButton.tsx
index b7b33affdf..f9aa9db1b8 100644
--- a/src/swap/components/SwapButton.tsx
+++ b/src/swap/components/SwapButton.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import { useCallback } from 'react';
 import { useSwapContext } from '../context';
 import { buildSwapTransaction } from '../core/buildSwapTransaction';
diff --git a/src/swap/components/SwapMessage.tsx b/src/swap/components/SwapMessage.tsx
index a8bd4c024d..10eb70f5d6 100644
--- a/src/swap/components/SwapMessage.tsx
+++ b/src/swap/components/SwapMessage.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import { useSwapContext } from '../context';
 import { text } from '../../styles/theme';
 import { getSwapMessage } from '../core/getSwapMessage';
diff --git a/src/swap/components/SwapToggleButton.tsx b/src/swap/components/SwapToggleButton.tsx
index c01100316b..e6ad1514ae 100644
--- a/src/swap/components/SwapToggleButton.tsx
+++ b/src/swap/components/SwapToggleButton.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import { cn, pressable } from '../../styles/theme';
 import { useSwapContext } from '../context';