fix: improve support for OnchainKit in Next.js 14+ apps (#1771)

.gitignore

@@ -62,3 +62,6 @@ docs/.vitepress/dist
 
 *storybook.log
 storybook-static/
+
+# Tarballs  
+*.tgz

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;

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

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

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

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

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

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

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

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