fix: default accountChain for Identity component (#1071)

coinbase · Aug 15, 2024 · a17237a · a17237a
1 parent 814c5c2
commit a17237a
Show file tree

Hide file tree

Showing 7 changed files with 13 additions and 33 deletions.
diff --git a/.changeset/shaggy-pumpkins-rule.md b/.changeset/shaggy-pumpkins-rule.md
@@ -0,0 +1,5 @@
+---
+"@coinbase/onchainkit": patch
+---
+
+- **fix**: default accountChain for `Identity` component. By @zizzamia #1071
diff --git a/playground/nextjs-app-router/next.config.mjs b/playground/nextjs-app-router/next.config.mjs
@@ -1,5 +1,6 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
+  basePath: '/playground',
   typescript: {
     ignoreBuildErrors: true,
   }

diff --git a/src/identity/components/Avatar.test.tsx b/src/identity/components/Avatar.test.tsx
@@ -69,9 +69,7 @@ describe('Avatar Component', () => {
     useIdentityContextMock.mockReturnValue({ address: null });
     useAvatarMock.mockReturnValue({ data: null, isLoading: true });
     useNameMock.mockReturnValue({ data: null, isLoading: true });
-
     render(<Avatar address={testAvatarComponentAddress} />);
-
     await waitFor(() => {
       const svgElement = screen.getByTestId('ockAvatarLoadingSvg');
       expect(svgElement).toBeInTheDocument();
@@ -82,9 +80,7 @@ describe('Avatar Component', () => {
     useIdentityContextMock.mockReturnValue({ address: null });
     useAvatarMock.mockReturnValue({ data: null, isLoading: false });
     useNameMock.mockReturnValue({ data: null, isLoading: false });
-
     render(<Avatar address={testAvatarComponentAddress} />);
-
     await waitFor(() => {
       const defaultAvatarElement = screen.getByTestId('ockAvatarDefaultSvg');
       expect(defaultAvatarElement).toBeInTheDocument();
@@ -101,11 +97,9 @@ describe('Avatar Component', () => {
       data: 'ens_name',
       isLoading: false,
     });
-
     render(
       <Avatar address={testAvatarComponentAddress} className="custom-class" />,
     );
-
     await waitFor(() => {
       const imgElement = screen.getByTestId('ockAvatar_Image');
       expect(imgElement).toHaveAttribute('src', 'avatar_url');
@@ -119,18 +113,15 @@ describe('Avatar Component', () => {
     useIdentityContextMock.mockReturnValue({ address: null });
     useAvatarMock.mockReturnValue({ data: null, isLoading: true });
     useNameMock.mockReturnValue({ data: null, isLoading: true });
-
     const CustomLoadingComponent = (
       <div data-testid="ockAvatarCustomLoading">Loading...</div>
     );
-
     render(
       <Avatar
         address={testAvatarComponentAddress}
         loadingComponent={CustomLoadingComponent}
       />,
     );
-
     const customLoadingElement = screen.getByTestId('ockAvatarCustomLoading');
     expect(customLoadingElement).toBeInTheDocument();
     expect(customLoadingElement).toHaveTextContent('Loading...');
@@ -140,18 +131,15 @@ describe('Avatar Component', () => {
     useIdentityContextMock.mockReturnValue({ address: null });
     useAvatarMock.mockReturnValue({ data: null, isLoading: false });
     useNameMock.mockReturnValue({ data: null, isLoading: false });
-
     const CustomDefaultComponent = (
       <div data-testid="ockAvatarCustomDefault">Default Avatar</div>
     );
-
     render(
       <Avatar
         address={testAvatarComponentAddress}
         defaultComponent={CustomDefaultComponent}
       />,
     );
-
     const customDefaultElement = screen.getByTestId('ockAvatarCustomDefault');
     expect(customDefaultElement).toBeInTheDocument();
     expect(customDefaultElement).toHaveTextContent('Default Avatar');
@@ -172,13 +160,11 @@ describe('Avatar Component', () => {
       data: 'ens_name',
       isLoading: false,
     });
-
     render(
       <Avatar address={testAvatarComponentAddress}>
         <Badge />
       </Avatar>,
     );
-
     await waitFor(() => {
       const inner = screen.getByTestId('ockAvatar_BadgeContainer');
       expect(inner).toBeInTheDocument();
@@ -191,9 +177,7 @@ describe('Avatar Component', () => {
     useIdentityContextMock.mockReturnValue({
       address: testIdentityProviderAddress,
     });
-
     render(<Avatar />);
-
     expect(useNameMock).toHaveBeenCalledWith({
       address: testIdentityProviderAddress,
     });
@@ -203,9 +187,7 @@ describe('Avatar Component', () => {
     useIdentityContextMock.mockReturnValue({
       address: testIdentityProviderAddress,
     });
-
     render(<Avatar address={testAvatarComponentAddress} />);
-
     expect(useNameMock).toHaveBeenCalledWith({
       address: testAvatarComponentAddress,
     });
@@ -216,9 +198,7 @@ describe('Avatar Component', () => {
       chain: optimism,
       address: testIdentityProviderAddress,
     });
-
     render(<Avatar />);
-
     expect(useNameMock).toHaveBeenCalledWith({
       address: testIdentityProviderAddress,
       chain: optimism,
@@ -230,14 +210,11 @@ describe('Avatar Component', () => {
       chain: optimism,
       address: testIdentityProviderAddress,
     });
-
     useNameMock.mockReturnValue({
       data: 'ens_name',
       isLoading: false,
     });
-
     render(<Avatar chain={baseSepolia} />);
-
     expect(useNameMock).toHaveBeenCalledWith({
       address: testIdentityProviderAddress,
       chain: baseSepolia,

diff --git a/src/identity/components/Avatar.tsx b/src/identity/components/Avatar.tsx
@@ -89,7 +89,7 @@ export function Avatar({
         )}
       </div>
       {badge && (
-        <DisplayBadge address={address ?? contextAddress}>
+        <DisplayBadge address={accountAddress}>
           <div
             data-testid="ockAvatar_BadgeContainer"
             className="-bottom-0.5 -right-0.5 absolute flex h-[15px] w-[15px] items-center justify-center rounded-full bg-transparent"

diff --git a/src/identity/components/Identity.tsx b/src/identity/components/Identity.tsx
@@ -6,16 +6,14 @@ import { IdentityProvider } from './IdentityProvider';
 
 export function Identity({
   address,
+  chain,
   children,
   className,
-  schemaId,
   hasCopyAddressOnClick = false,
-  chain,
+  schemaId,
 }: IdentityReact) {
-  // istanbul ignore next
   const { chain: contextChain } = useOnchainKit();
-
-  const accountChain = contextChain || chain;
+  const accountChain = chain ?? contextChain;
 
   const handleCopy = useCallback(async () => {
     if (!address) {
@@ -30,7 +28,6 @@ export function Identity({
     }
   }, [address]);
 
-  // istanbul ignore next
   const onClick = hasCopyAddressOnClick ? handleCopy : undefined;
 
   return (

diff --git a/src/version.ts b/src/version.ts
@@ -1 +1 @@
-export const version = '0.29.0';
+export const version = '0.29.1';
diff --git a/vitest.config.ts b/vitest.config.ts
@@ -23,13 +23,13 @@ export default defineConfig({
       reportOnFailure: true,
       thresholds: {
         statements: 99.58,
-        branches: 99.25,
+        branches: 99.35,
         functions: 97.89,
         lines: 99.58,
       },
     },
     environment: 'jsdom',
-    exclude: ['**/node_modules/**', 'playground/**', 'site/**'],
+    exclude: ['**/node_modules/**', 'framegear/**', 'playground/**', 'site/**'],
     setupFiles: ['./vitest.setup.ts'],
     globals: true,
   },
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		export const version = '0.29.0';
		export const version = '0.29.1';