From bb79e091f74603c119c68cc0c863b0a8bd79809e Mon Sep 17 00:00:00 2001
From: Daniel Schlabach <31226559+dschlabach@users.noreply.github.com>
Date: Thu, 9 Jan 2025 12:22:37 -0500
Subject: [PATCH] fix: improve support for OnchainKit in Next.js 14+ apps
 (#1771)

---
 .gitignore                                      |  3 +++
 packemon.config.ts                              | 17 +++++++++++++++++
 src/ui/react/identity/components/Address.tsx    |  1 +
 src/ui/react/identity/components/Avatar.tsx     |  1 +
 src/ui/react/identity/components/Badge.tsx      |  1 +
 src/ui/react/identity/components/EthBalance.tsx |  1 +
 src/ui/react/identity/components/Identity.tsx   |  1 +
 .../react/identity/components/IdentityCard.tsx  |  1 +
 src/ui/react/identity/components/Name.tsx       |  1 +
 src/ui/react/identity/components/Socials.tsx    |  1 +
 10 files changed, 28 insertions(+)

diff --git a/.gitignore b/.gitignore
index e0ff430bad..63a732117b 100644
--- a/.gitignore
+++ b/.gitignore
@@ -62,3 +62,6 @@ docs/.vitepress/dist
 
 *storybook.log
 storybook-static/
+
+# Tarballs  
+*.tgz
diff --git a/packemon.config.ts b/packemon.config.ts
index e2f8149fd4..872336750b 100644
--- a/packemon.config.ts
+++ b/packemon.config.ts
@@ -13,6 +13,23 @@ const config = {
       },
     ]);
   },
+
+  // Adding support for React 18's "use client" directive
+  // Mostly used with Next.js apps
+  rollupOutput(config) {
+    config.plugins.push({
+      name: 'fix-use-client',
+      renderChunk(code) {
+        if (code.includes("'use client'")) {
+          // Remove the original directive and split into lines
+          const lines = code.replace("'use client';", '').split('\n');
+          // Filter out any empty lines and reconstruct
+          return `'use client';\n${lines.filter((line) => line.trim()).join('\n')}`;
+        }
+        return null; // Return null to keep the original code (https://rollupjs.org/plugin-development/#renderchunk)
+      },
+    });
+  },
 };
 
 export default config;
diff --git a/src/ui/react/identity/components/Address.tsx b/src/ui/react/identity/components/Address.tsx
index 9392f604f6..1b5358fb11 100644
--- a/src/ui/react/identity/components/Address.tsx
+++ b/src/ui/react/identity/components/Address.tsx
@@ -1,3 +1,4 @@
+'use client';
 import { useIdentityContext } from '@/core-react/identity/providers/IdentityProvider';
 import type { AddressReact } from '@/core-react/identity/types';
 import { getSlicedAddress } from '@/core/identity/utils/getSlicedAddress';
diff --git a/src/ui/react/identity/components/Avatar.tsx b/src/ui/react/identity/components/Avatar.tsx
index 6e12d732f4..a7b09e7f61 100644
--- a/src/ui/react/identity/components/Avatar.tsx
+++ b/src/ui/react/identity/components/Avatar.tsx
@@ -1,3 +1,4 @@
+'use client';
 import { useAvatar } from '@/core-react/identity/hooks/useAvatar';
 import { useName } from '@/core-react/identity/hooks/useName';
 import { useIdentityContext } from '@/core-react/identity/providers/IdentityProvider';
diff --git a/src/ui/react/identity/components/Badge.tsx b/src/ui/react/identity/components/Badge.tsx
index fe793c9ad7..d243552f9a 100644
--- a/src/ui/react/identity/components/Badge.tsx
+++ b/src/ui/react/identity/components/Badge.tsx
@@ -1,3 +1,4 @@
+'use client';
 import type { BadgeReact } from '../../../../core-react/identity/types';
 import { badgeSvg } from '../../../../internal/svg/badgeSvg';
 import { background, cn } from '../../../../styles/theme';
diff --git a/src/ui/react/identity/components/EthBalance.tsx b/src/ui/react/identity/components/EthBalance.tsx
index 52212698be..3955541af2 100644
--- a/src/ui/react/identity/components/EthBalance.tsx
+++ b/src/ui/react/identity/components/EthBalance.tsx
@@ -1,3 +1,4 @@
+'use client';
 import { useIdentityContext } from '@/core-react/identity/providers/IdentityProvider';
 import type { EthBalanceReact } from '@/core-react/identity/types';
 import { getRoundedAmount } from '@/core/utils/getRoundedAmount';
diff --git a/src/ui/react/identity/components/Identity.tsx b/src/ui/react/identity/components/Identity.tsx
index 0a186862b2..e8e981b4fe 100644
--- a/src/ui/react/identity/components/Identity.tsx
+++ b/src/ui/react/identity/components/Identity.tsx
@@ -1,3 +1,4 @@
+'use client';
 import { IdentityProvider } from '@/core-react/identity/providers/IdentityProvider';
 import type { IdentityReact } from '@/core-react/identity/types';
 import { useOnchainKit } from '@/core-react/useOnchainKit';
diff --git a/src/ui/react/identity/components/IdentityCard.tsx b/src/ui/react/identity/components/IdentityCard.tsx
index 3b7bf18820..56029e62fc 100644
--- a/src/ui/react/identity/components/IdentityCard.tsx
+++ b/src/ui/react/identity/components/IdentityCard.tsx
@@ -1,3 +1,4 @@
+'use client';
 import type { Address, Chain } from 'viem';
 import { Address as AddressComponent } from './Address';
 import { Avatar } from './Avatar';
diff --git a/src/ui/react/identity/components/Name.tsx b/src/ui/react/identity/components/Name.tsx
index 5ccf009fe9..4b8d537d70 100644
--- a/src/ui/react/identity/components/Name.tsx
+++ b/src/ui/react/identity/components/Name.tsx
@@ -1,3 +1,4 @@
+'use client';
 import { useName } from '@/core-react/identity/hooks/useName';
 import { useIdentityContext } from '@/core-react/identity/providers/IdentityProvider';
 import type { NameReact } from '@/core-react/identity/types';
diff --git a/src/ui/react/identity/components/Socials.tsx b/src/ui/react/identity/components/Socials.tsx
index 08c1a11019..711670d6d0 100644
--- a/src/ui/react/identity/components/Socials.tsx
+++ b/src/ui/react/identity/components/Socials.tsx
@@ -1,3 +1,4 @@
+'use client';
 import type { Address, Chain } from 'viem';
 import { useName } from '../../../../core-react/identity/hooks/useName';
 import { useSocials } from '../../../../core-react/identity/hooks/useSocials';