docs: polished Identity intro (coinbase#331)

CHANGELOG.md

@@ -4,13 +4,13 @@
 
 ### Patch Changes
 
-- 78319ec: - **feat**: added missing CSS radius on `Avatar` component. By @zizzamia #329
+- **feat**: added missing CSS radius on `Avatar` component. By @zizzamia #329 78319ec
 
 ## 0.14.1
 
 ### Patch Changes
 
-- **chore**: deprecated root level imports for `getFrameMetadata`, `FrameMetadata`, `Avatar`, `Name`, `useAvatar`, `useName` utilities and components. a83f9f0
+- **chore**: deprecated root level imports for `getFrameMetadata`, `FrameMetadata`, `Avatar`, `Name`, `useAvatar`, `useName` utilities and components. By @zizzamia a83f9f0
 
 ## 0.14.0
 

site/docs/pages/identity/introduction.mdx

@@ -3,21 +3,127 @@ title: Introduction to Identity Kit · OnchainKit
 deescription: Introduction to Identity Kit
 ---
 
+import { base } from 'viem/chains';
+import { OnchainKitProvider } from '@coinbase/onchainkit';
+import { Avatar, Badge, Name } from '@coinbase/onchainkit/identity';
+import App from './App';
+
 # Introduction to Identity Kit
 
 OnchainKit provides TypeScript utilities and React components to help you build applications that interact with onchain identity.
 
-- Components:
-  - [`<Avatar />`](/identity/avatar): A component to display an ENS avatar.
-  - [`<Badge />`](/identity/badge): A component to display an EAS attestation badge.
-  - [`<Name />`](/identity/name): A component to display an ENS name.
-- Hooks:
-  - [`useName`](/identity/use-name): A hook to get an onchain name for a given address. (ENS only for now)
-  - [`useAvatar`](/identity/use-avatar): A hook to get avatar image src. (ENS only for now)
-- Utilities:
-  - [`getEASAttestations`](/identity/get-eas-attestations): A function to fetch EAS attestations.
+## Components
+
+The available components are:
 
-Required depedencies for using the Identity utilities and components are:
+- [`<Avatar />`](/identity/avatar): Display an ENS avatar.
+- [`<Badge />`](/identity/badge): Display an Attestation badge.
+- [`<Name />`](/identity/name): Display an ENS name.
+
+:::code-group
+
+```tsx [code]
+<OnchainKitProvider
+  chain={base}
+  schemaId="0xf8b05c79f090979bf4a80270aba232dff11a10d9ca55c4f88de95317970f0de9"
+>
+  <div className="flex h-10 items-center space-x-4">
+    <Avatar address="0x838aD0EAE54F99F1926dA7C3b6bFbF617389B4D9" showAttestation /> // [!code focus]
+    <div className="flex flex-col text-sm">
+      <b>
+        <Name address="0x838aD0EAE54F99F1926dA7C3b6bFbF617389B4D9" /> // [!code focus]
+      </b>
+      <Name address="0x838aD0EAE54F99F1926dA7C3b6bFbF617389B4D9" showAddress /> // [!code focus]
+    </div>
+  </div>
+</OnchainKitProvider>
+```
+
+```html [return html]
+<div class="flex h-10 items-center space-x-4">
+  <div data-testid="ockAvatarBadgeInner" style="position: relative; width: 32px; height: 32px;">
+    <img
+      loading="lazy"
+      width="32"
+      height="32"
+      decoding="async"
+      src="https://euc.li/nickprince.eth"
+      alt="nickprince.eth"
+      style="border-radius: 50%;"
+    />
+    <div
+      style="position: absolute; bottom: -2px; right: -2px; background: transparent; display: flex; justify-content: center; align-items: center; width: 15px; height: 15px; border-radius: 9999px;"
+    >
+      <div
+        style="width: 11px; height: 11px; display: flex; justify-content: center; align-items: center;"
+      >
+        <span data-testid="ockBadge" style="border-radius: 50%; height: 12px; width: 12px;">
+          <svg
+            width="12"
+            height="12"
+            viewBox="0 0 12 12"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M6 12C9.31371 12 12 9.31371 12 6C12 2.68629 9.31371 0 6 0C2.68629 0 0 2.68629 0 6C0 9.31371 2.68629 12 6 12Z"
+              data-testid="ockBadgeBackground"
+              fill="#0052FF"
+            ></path>
+            <path
+              d="M8.12957 3.73002L5.11957 6.74002L3.77957 5.40002C3.49957 5.12002 3.04957 5.12002 2.76957 5.40002C2.48957 5.68002 2.48957 6.13002 2.76957 6.41002L4.10957 7.75002L4.59957 8.24002C4.90957 8.55002 5.41957 8.55002 5.72957 8.24002L9.17957 4.79002C9.45957 4.51002 9.45957 4.06002 9.17957 3.78002L9.12957 3.73002C8.84957 3.45002 8.39957 3.45002 8.11957 3.73002H8.12957Z"
+              data-testid="ockBadgeTicker"
+              fill="white"
+            ></path>
+          </svg>
+        </span>
+      </div>
+    </div>
+  </div>
+  <div class="flex flex-col text-sm">
+    <b><span>nickprince.eth</span></b>
+    <span>0x838...B4D9</span>
+  </div>
+</div>
+```
+
+:::
+
+<App>
+  <OnchainKitProvider
+    chain={base}
+    schemaId="0xf8b05c79f090979bf4a80270aba232dff11a10d9ca55c4f88de95317970f0de9"
+  >
+    <div className="flex h-10 items-center space-x-4">
+      <Avatar address="0x838aD0EAE54F99F1926dA7C3b6bFbF617389B4D9" showAttestation />
+      <div className="flex flex-col text-sm">
+        <b>
+          <Name address="0x838aD0EAE54F99F1926dA7C3b6bFbF617389B4D9" />
+        </b>
+        <Name address="0x838aD0EAE54F99F1926dA7C3b6bFbF617389B4D9" showAddress />
+      </div>
+    </div>
+  </OnchainKitProvider>
+</App>
+
+## Hooks
+
+The available hooks are:
+
+- [`useAvatar`](/identity/use-avatar): Get avatar image src. (ENS only for now)
+- [`useName`](/identity/use-name): Get an onchain name for a given address. (ENS only for now)
+
+## Utilities
+
+The available utilities are:
+
+- [`getAvatar`](/identity/get-avatar): Get avatar image src. (ENS only for now)
+- [`getEASAttestations`](/identity/get-eas-attestations): Fetch EAS attestations.
+- [`getName`](/identity/get-name): Get an onchain name for a given address. (ENS only for now)
+
+## Required dependencies
+
+To use the Identity utilities and components install:
 
 :::code-group
 
@@ -38,7 +144,7 @@ pnpm add react@18 react-dom@18 @tanstack/react-query graphql@14 graphql-request@
 
 :::
 
-## Components
+## Required providers
 
 If you are using any of the provided components, you will need to install and configure `@tanstack/react-query` and wrap your app in `<QueryClientProvider>`.
 

site/package.json

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

site/yarn.lock

@@ -325,9 +325,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@coinbase/onchainkit@npm:0.14.1":
-  version: 0.14.1
-  resolution: "@coinbase/onchainkit@npm:0.14.1"
+"@coinbase/onchainkit@npm:0.14.2":
+  version: 0.14.2
+  resolution: "@coinbase/onchainkit@npm:0.14.2"
   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: e3b842211caf18a5daa0b06b334bdd153969dadd583e7bf9f2701121a689268890d1ade67ee9908ba83b70f625bd0d6ed118a2d070b7b3b122366df0a44755ef
+  checksum: caecd0b873ee8139a27190a84492ea0af15c465fac591bcbf41da229eb903a718fe6374ef73a43937be440d06c00fb75abe8fe0fc077e8a90c58a2f0c33910e4
   languageName: node
   linkType: hard
 
@@ -5329,7 +5329,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "onchainkit@workspace:."
   dependencies:
-    "@coinbase/onchainkit": "npm:0.14.1"
+    "@coinbase/onchainkit": "npm:0.14.2"
     "@tanstack/react-query": "npm:^5.28.4"
     "@types/react": "npm:latest"
     graphql: "npm:14"

src/version.ts

@@ -1 +1 @@
-export const version = '0.14.1';
+export const version = '0.14.2';