Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: default accountChain for Identity component #1071

Merged
merged 3 commits into from
Aug 15, 2024
Merged
Show file tree
Hide file tree
Changes from 2 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/shaggy-pumpkins-rule.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@coinbase/onchainkit": patch
---

- **fix**: default accountChain for `Identity` component. By @zizzamia #1071
23 changes: 0 additions & 23 deletions src/identity/components/Avatar.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand All @@ -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();
Expand All @@ -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');
Expand All @@ -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...');
Expand All @@ -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');
Expand All @@ -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();
Expand All @@ -191,9 +177,7 @@ describe('Avatar Component', () => {
useIdentityContextMock.mockReturnValue({
address: testIdentityProviderAddress,
});

render(<Avatar />);

expect(useNameMock).toHaveBeenCalledWith({
address: testIdentityProviderAddress,
});
Expand All @@ -203,9 +187,7 @@ describe('Avatar Component', () => {
useIdentityContextMock.mockReturnValue({
address: testIdentityProviderAddress,
});

render(<Avatar address={testAvatarComponentAddress} />);

expect(useNameMock).toHaveBeenCalledWith({
address: testAvatarComponentAddress,
});
Expand All @@ -216,9 +198,7 @@ describe('Avatar Component', () => {
chain: optimism,
address: testIdentityProviderAddress,
});

render(<Avatar />);

expect(useNameMock).toHaveBeenCalledWith({
address: testIdentityProviderAddress,
chain: optimism,
Expand All @@ -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,
Expand Down
2 changes: 1 addition & 1 deletion src/identity/components/Avatar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
9 changes: 3 additions & 6 deletions src/identity/components/Identity.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@abcrane123 that's why we were getting confused. We had the wrong order.


const handleCopy = useCallback(async () => {
if (!address) {
Expand All @@ -30,7 +28,6 @@ export function Identity({
}
}, [address]);

// istanbul ignore next
const onClick = hasCopyAddressOnClick ? handleCopy : undefined;

return (
Expand Down
2 changes: 1 addition & 1 deletion src/version.ts
Original file line number Diff line number Diff line change
@@ -1 +1 @@
export const version = '0.29.0';
export const version = '0.29.1';
4 changes: 2 additions & 2 deletions vitest.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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,
},
Expand Down