feat: added missing radius on Avatar component

.changeset/lovely-peaches-relax.md

@@ -0,0 +1,5 @@
+---
+'@coinbase/onchainkit': patch
+---
+
+- **feat**: added missing CSS radius on `Avatar` component. By @zizzamia #329

CHANGELOG.md

@@ -4,7 +4,7 @@
 
 ### Patch Changes
 
-- a83f9f0: - **chore**: deprecated root level imports for `getFrameMetadata`, `FrameMetadata`, `Avatar`, `Name`, `useAvatar`, `useName` utilities and components.
+- **chore**: deprecated root level imports for `getFrameMetadata`, `FrameMetadata`, `Avatar`, `Name`, `useAvatar`, `useName` utilities and components. a83f9f0
 
 ## 0.14.0
 

site/docs/pages/identity/avatar.mdx

@@ -1,3 +1,4 @@
+{/* import { Avatar } from '../../../../src/identity'; */}
 import { Avatar } from '@coinbase/onchainkit/identity';
 import App from './App';
 
@@ -14,7 +15,7 @@ Address with an ENS avatar:
 
 ```tsx [code]
 import { Avatar } from '@coinbase/onchainkit/identity';
-<Avatar address="0x02feeb0AdE57b6adEEdE5A4EEea6Cf8c21BeB6B1" />; // [!code focus]
+<Avatar address="0x838aD0EAE54F99F1926dA7C3b6bFbF617389B4D9" />; // [!code focus]
 ```
 
 ```html [return html]
@@ -31,7 +32,7 @@ import { Avatar } from '@coinbase/onchainkit/identity';
 :::
 
 <App>
-  <Avatar address="0x02feeb0AdE57b6adEEdE5A4EEea6Cf8c21BeB6B1" />
+  <Avatar address="0x838aD0EAE54F99F1926dA7C3b6bFbF617389B4D9" />
 </App>
 
 Address without an ENS avatar, and it defaults to a blue color avatar:

site/docs/pages/identity/badge.mdx

@@ -94,7 +94,7 @@ import { base } from 'viem/chains';
 import { OnchainKitProvider } from '@coinbase/onchainkit';
 import { Name } from '@coinbase/onchainkit/identity';
 
-const address = '0x02feeb0AdE57b6adEEdE5A4EEea6Cf8c21BeB6B1';
+const address = '0x838aD0EAE54F99F1926dA7C3b6bFbF617389B4D9';
 const COINBASE_VERIFIED_ACCOUNT_SCHEMA_ID =
   '0xf8b05c79f090979bf4a80270aba232dff11a10d9ca55c4f88de95317970f0de9';
 
@@ -138,7 +138,7 @@ const COINBASE_VERIFIED_ACCOUNT_SCHEMA_ID =
     chain={base}
     schemaId="0xf8b05c79f090979bf4a80270aba232dff11a10d9ca55c4f88de95317970f0de9"
   >
-    <Name address="0x02feeb0AdE57b6adEEdE5A4EEea6Cf8c21BeB6B1" showAttestation />
+    <Name address="0x838aD0EAE54F99F1926dA7C3b6bFbF617389B4D9" showAttestation />
   </OnchainKitProvider>
 </App>
 
@@ -151,7 +151,7 @@ import { base } from 'viem/chains';
 import { OnchainKitProvider } from '@coinbase/onchainkit';
 import { Avatar } from '@coinbase/onchainkit/identity';
 
-const address = '0x02feeb0AdE57b6adEEdE5A4EEea6Cf8c21BeB6B1';
+const address = '0x838aD0EAE54F99F1926dA7C3b6bFbF617389B4D9';
 const COINBASE_VERIFIED_ACCOUNT_SCHEMA_ID =
   '0xf8b05c79f090979bf4a80270aba232dff11a10d9ca55c4f88de95317970f0de9';
 
@@ -208,6 +208,6 @@ const COINBASE_VERIFIED_ACCOUNT_SCHEMA_ID =
     chain={base}
     schemaId="0xf8b05c79f090979bf4a80270aba232dff11a10d9ca55c4f88de95317970f0de9"
   >
-    <Avatar address="0x02feeb0AdE57b6adEEdE5A4EEea6Cf8c21BeB6B1" showAttestation />
+    <Avatar address="0x838aD0EAE54F99F1926dA7C3b6bFbF617389B4D9" showAttestation />
   </OnchainKitProvider>
 </App>

site/package.json

@@ -8,7 +8,7 @@
     "preview": "vocs preview"
   },
   "dependencies": {
-    "@coinbase/onchainkit": "0.14.0",
+    "@coinbase/onchainkit": "0.14.1",
     "@tanstack/react-query": "^5.28.4",
     "@types/react": "latest",
     "graphql": "14",

site/vocs.config.tsx

@@ -1,4 +1,4 @@
-import { FrameMetadata } from '@coinbase/onchainkit';
+import { FrameMetadata } from '@coinbase/onchainkit/frame';
 import { defineConfig } from 'vocs';
 import pkg from '../package.json';
 import { sidebar } from './sidebar';

site/yarn.lock

@@ -325,9 +325,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@coinbase/onchainkit@npm:0.14.0":
-  version: 0.14.0
-  resolution: "@coinbase/onchainkit@npm:0.14.0"
+"@coinbase/onchainkit@npm:0.14.1":
+  version: 0.14.1
+  resolution: "@coinbase/onchainkit@npm:0.14.1"
   peerDependencies:
     "@tanstack/react-query": ^5
     "@xmtp/frames-validator": ^0.6.0
@@ -336,7 +336,7 @@ __metadata:
     react: ^18
     react-dom: ^18
     viem: ^2.7.0
-  checksum: 09a200656d192cbf4bb594689aac3203c743de0786c31bf547fcde5af4174bc3188d4575e1838789b003df14da26d7110b36e1bb6907964d500004ba8d5d9955
+  checksum: e3b842211caf18a5daa0b06b334bdd153969dadd583e7bf9f2701121a689268890d1ade67ee9908ba83b70f625bd0d6ed118a2d070b7b3b122366df0a44755ef
   languageName: node
   linkType: hard
 
@@ -5329,7 +5329,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "onchainkit@workspace:."
   dependencies:
-    "@coinbase/onchainkit": "npm:0.14.0"
+    "@coinbase/onchainkit": "npm:0.14.1"
     "@tanstack/react-query": "npm:^5.28.4"
     "@types/react": "npm:latest"
     graphql: "npm:14"

src/identity/components/Avatar.tsx

@@ -12,14 +12,6 @@ import { AvatarReact } from '../types';
  *
  * If the ENS name or avatar is not available, it shows a default SVG avatar.
  * Otherwise, it displays the custom avatar obtained from ENS.
- *
- * @param {Address} props.address - The Ethereum address for which to display the avatar.
- * @param {string} [props.className] - Optional additional CSS class to apply to the avatar.
- * @param {JSX.Element} [props.defaultComponent] - Optional custom component to display when no ENS name or avatar is available.
- * @param {JSX.Element} [props.loadingComponent] - Optional custom component to display while the avatar data is loading.
- * @param {React.ImgHTMLAttributes<HTMLImageElement>} [props.props] - Optional additional image attributes to apply to the avatar.
- * @param {Boolean} [props.showAttestation] - Optional flag to show the EAS attestation badge.
- * @returns {JSX.Element} The JSX element representing the avatar, which could be a loading SVG, a default SVG, or an image.
  */
 export function Avatar({
   address,
@@ -95,6 +87,7 @@ export function Avatar({
         decoding="async"
         src={avatar}
         alt={name}
+        style={{ borderRadius: '50%' }}
         {...props}
       />
     </WithAvatarBadge>