docs: live explain components with Vocs (#261)

site/docs/pages/identity/App.tsx

@@ -0,0 +1,17 @@
+'use client';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { ReactNode } from 'react';
+
+const queryClient = new QueryClient();
+
+export default function App({ children }: { children: ReactNode }) {
+  const isServer = typeof window === 'undefined';
+  if (isServer) {
+    return null;
+  }
+  return (
+    <QueryClientProvider client={queryClient}>
+      <div style={{ display: 'flex', flexDirection: 'column' }}>{children}</div>
+    </QueryClientProvider>
+  );
+}

site/docs/pages/identity/avatar.mdx

@@ -1,16 +1,35 @@
+import { Avatar } from '@coinbase/onchainkit/identity';
+import App from './App';
+
 # `<Avatar />`
 
 The `Avatar` component is used to display ENS avatar associated with Ethereum addresses.
 When an ENS avatar is not available, it defaults to blue color avatar.
 
 ## Usage
 
+Address with an ENS avatar:
+
 ```tsx
 import { Avatar } from '@coinbase/onchainkit/identity';
+<Avatar address="0x02feeb0AdE57b6adEEdE5A4EEea6Cf8c21BeB6B1" />; // [!code focus]
+```
+
+<App>
+  <Avatar address="0x02feeb0AdE57b6adEEdE5A4EEea6Cf8c21BeB6B1" />
+</App>
 
+Address without an ENS avatar, and it defaults to a blue color avatar:
+
+```tsx
+import { Avatar } from '@coinbase/onchainkit/identity';
 <Avatar address="0x1234567890abcdef1234567890abcdef12345678" />; // [!code focus]
 ```
 
+<App>
+  <Avatar address="0x1234567890abcdef1234567890abcdef12345678" />
+</App>
+
 ## Props
 
 ```ts

site/docs/pages/identity/introduction.mdx

@@ -21,15 +21,18 @@ Required depedencies for using the Identity utilities and components are:
 :::code-group
 
 ```bash [npm]
-npm install @coinbase/onchainkit react@18 react-dom@18 graphql@14 graphql-request@6
+npm install @coinbase/onchainkit
+npm install react@18 react-dom@18 @tanstack/react-query graphql@14 graphql-request@6
 ```
 
 ```bash [yarn]
-yarn add @coinbase/onchainkit react@18 react-dom@18 graphql@14 graphql-request@6
+yarn add @coinbase/onchainkit
+yarn add react@18 react-dom@18 @tanstack/react-query graphql@14 graphql-request@6
 ```
 
 ```bash [pnpm]
-pnpm add @coinbase/onchainkit react@18 react-dom@18 graphql@14 graphql-request@6
+pnpm add @coinbase/onchainkit
+pnpm add react@18 react-dom@18 @tanstack/react-query graphql@14 graphql-request@6
 ```
 
 :::

site/package.json

@@ -9,12 +9,15 @@
   },
   "dependencies": {
     "@coinbase/onchainkit": "0.9.10",
+    "@tanstack/react-query": "^5.28.4",
     "@types/react": "latest",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "graphql": "14",
+    "graphql-request": "6",
+    "react": "18",
+    "react-dom": "18",
     "tailwindcss": "^3.4.1",
     "typescript": "latest",
     "viem": "^2.7.10",
-    "vocs": "1.0.0-alpha.42"
+    "vocs": "1.0.0-alpha.44"
   }
 }

site/tsconfig.json

@@ -1,24 +1,24 @@
 {
   "compilerOptions": {
     "target": "ES2020",
-    "useDefineForClassFields": true,
     "lib": [
       "DOM",
       "DOM.Iterable",
       "esnext"
     ],
-    "module": "esnext",
-    "skipLibCheck": true,
-    "moduleResolution": "bundler",
     "allowImportingTsExtensions": true,
-    "resolveJsonModule": true,
     "isolatedModules": true,
-    "noEmit": true,
     "jsx": "react-jsx",
-    "strict": true,
+    "module": "NodeNext",
+    "moduleResolution": "NodeNext",
+    "noEmit": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true
+    "noFallthroughCasesInSwitch": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "useDefineForClassFields": true
   },
   "include": [
     "**/*.ts",

site/yarn.lock

@@ -559,6 +559,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@graphql-typed-document-node/core@npm:^3.2.0":
+  version: 3.2.0
+  resolution: "@graphql-typed-document-node/core@npm:3.2.0"
+  peerDependencies:
+    graphql: ^0.8.0 || ^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0
+  checksum: 94e9d75c1f178bbae8d874f5a9361708a3350c8def7eaeb6920f2c820e82403b7d4f55b3735856d68e145e86c85cbfe2adc444fdc25519cd51f108697e99346c
+  languageName: node
+  linkType: hard
+
 "@hono/node-server@npm:^1.2.3":
   version: 1.8.0
   resolution: "@hono/node-server@npm:1.8.0"
@@ -1604,6 +1613,24 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@tanstack/query-core@npm:5.28.4":
+  version: 5.28.4
+  resolution: "@tanstack/query-core@npm:5.28.4"
+  checksum: 0aca64c0e20c56fb4b6c0497f29613b0eb5c02eb2e2f99f2ed5616d7c119c18259c7171d25f593d00cd50e9ee1d2e629388968fcd53d0aa7fa95d820fc58cf9c
+  languageName: node
+  linkType: hard
+
+"@tanstack/react-query@npm:^5.28.4":
+  version: 5.28.4
+  resolution: "@tanstack/react-query@npm:5.28.4"
+  dependencies:
+    "@tanstack/query-core": "npm:5.28.4"
+  peerDependencies:
+    react: ^18.0.0
+  checksum: 5ffc31cedea548b697770c018fab7fcd35724caf6cf7d40a7370ef6ffeb2427f510ea9745a92ebd6e74f2c4c39a255eabcd2a181c97b54991563ad842945866e
+  languageName: node
+  linkType: hard
+
 "@types/acorn@npm:^4.0.0":
   version: 4.0.6
   resolution: "@types/acorn@npm:4.0.6"
@@ -2405,6 +2432,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"cross-fetch@npm:^3.1.5":
+  version: 3.1.8
+  resolution: "cross-fetch@npm:3.1.8"
+  dependencies:
+    node-fetch: "npm:^2.6.12"
+  checksum: 4c5e022ffe6abdf380faa6e2373c0c4ed7ef75e105c95c972b6f627c3f083170b6886f19fb488a7fa93971f4f69dcc890f122b0d97f0bf5f41ca1d9a8f58c8af
+  languageName: node
+  linkType: hard
+
 "cross-spawn@npm:^7.0.0, cross-spawn@npm:^7.0.3":
   version: 7.0.3
   resolution: "cross-spawn@npm:7.0.3"
@@ -3095,6 +3131,27 @@ __metadata:
   languageName: node
   linkType: hard
 
+"graphql-request@npm:6":
+  version: 6.1.0
+  resolution: "graphql-request@npm:6.1.0"
+  dependencies:
+    "@graphql-typed-document-node/core": "npm:^3.2.0"
+    cross-fetch: "npm:^3.1.5"
+  peerDependencies:
+    graphql: 14 - 16
+  checksum: f8167925a110e8e1de93d56c14245e7e64391dc8dce5002dd01bf24a3059f345d4ca1bb6ce2040e2ec78264211b0704e75da3e63984f0f74d2042f697a4e8cc6
+  languageName: node
+  linkType: hard
+
+"graphql@npm:14":
+  version: 14.7.0
+  resolution: "graphql@npm:14.7.0"
+  dependencies:
+    iterall: "npm:^1.2.2"
+  checksum: 7f8085d4d8f4cd20bde0a2c327d21a0beaf2d0539775dc4fc093d2193c51f3c268ab43d11d539ce0ef26ffea227de7c7bd47788636bd66c5a944c95ad0870727
+  languageName: node
+  linkType: hard
+
 "has-flag@npm:^3.0.0":
   version: 3.0.0
   resolution: "has-flag@npm:3.0.0"
@@ -3557,6 +3614,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"iterall@npm:^1.2.2":
+  version: 1.3.0
+  resolution: "iterall@npm:1.3.0"
+  checksum: 40de624e5fe937c4c0e511981b91caea9ff2142bfc0316cccc8506eaa03aa253820cc17c5bc5f0a98706c7268a373e5ebee9af9a0c8a359730cf7c05938b57b5
+  languageName: node
+  linkType: hard
+
 "jackspeak@npm:^2.3.5":
   version: 2.3.6
   resolution: "jackspeak@npm:2.3.6"
@@ -4726,6 +4790,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"node-fetch@npm:^2.6.12":
+  version: 2.7.0
+  resolution: "node-fetch@npm:2.7.0"
+  dependencies:
+    whatwg-url: "npm:^5.0.0"
+  peerDependencies:
+    encoding: ^0.1.0
+  peerDependenciesMeta:
+    encoding:
+      optional: true
+  checksum: b55786b6028208e6fbe594ccccc213cab67a72899c9234eb59dba51062a299ea853210fcf526998eaa2867b0963ad72338824450905679ff0fa304b8c5093ae8
+  languageName: node
+  linkType: hard
+
 "node-gyp@npm:latest":
   version: 10.0.1
   resolution: "node-gyp@npm:10.0.1"
@@ -4838,13 +4916,16 @@ __metadata:
   resolution: "onchainkit@workspace:."
   dependencies:
     "@coinbase/onchainkit": "npm:0.9.10"
+    "@tanstack/react-query": "npm:^5.28.4"
     "@types/react": "npm:latest"
-    react: "npm:^18.2.0"
-    react-dom: "npm:^18.2.0"
+    graphql: "npm:14"
+    graphql-request: "npm:6"
+    react: "npm:18"
+    react-dom: "npm:18"
     tailwindcss: "npm:^3.4.1"
     typescript: "npm:latest"
     viem: "npm:^2.7.10"
-    vocs: "npm:1.0.0-alpha.42"
+    vocs: "npm:1.0.0-alpha.44"
   languageName: unknown
   linkType: soft
 
@@ -5156,7 +5237,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-dom@npm:^18.2.0":
+"react-dom@npm:18":
   version: 18.2.0
   resolution: "react-dom@npm:18.2.0"
   dependencies:
@@ -5301,7 +5382,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react@npm:^18.2.0":
+"react@npm:18":
   version: 18.2.0
   resolution: "react@npm:18.2.0"
   dependencies:
@@ -6067,6 +6148,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"tr46@npm:~0.0.3":
+  version: 0.0.3
+  resolution: "tr46@npm:0.0.3"
+  checksum: 047cb209a6b60c742f05c9d3ace8fa510bff609995c129a37ace03476a9b12db4dbf975e74600830ef0796e18882b2381fb5fb1f6b4f96b832c374de3ab91a11
+  languageName: node
+  linkType: hard
+
 "trim-lines@npm:^3.0.0":
   version: 3.0.1
   resolution: "trim-lines@npm:3.0.1"
@@ -6464,9 +6552,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"vocs@npm:1.0.0-alpha.42":
-  version: 1.0.0-alpha.42
-  resolution: "vocs@npm:1.0.0-alpha.42"
+"vocs@npm:1.0.0-alpha.44":
+  version: 1.0.0-alpha.44
+  resolution: "vocs@npm:1.0.0-alpha.44"
   dependencies:
     "@floating-ui/react": "npm:^0.26.6"
     "@hono/node-server": "npm:^1.2.3"
@@ -6533,7 +6621,24 @@ __metadata:
     react-dom: ^18.2.0
   bin:
     vocs: _lib/cli/index.js
-  checksum: a022c76b1fc761ba7e32bf056b6234c077274f8a10bb146bcd29ecafd0eab0085f05dc7a8097d502f74bea49b9129fb3e49e5477d5252a8e55b36f82069cf1f2
+  checksum: b5636b9b1b17e5c23db72eba3016ea5e414222d4e1b2cb018e106fe4c26621e335edf344e5865bb569bf093e55d9e2e04dbaea88bd53b07cc0ac53e0def44b1c
+  languageName: node
+  linkType: hard
+
+"webidl-conversions@npm:^3.0.0":
+  version: 3.0.1
+  resolution: "webidl-conversions@npm:3.0.1"
+  checksum: 5612d5f3e54760a797052eb4927f0ddc01383550f542ccd33d5238cfd65aeed392a45ad38364970d0a0f4fea32e1f4d231b3d8dac4a3bdd385e5cf802ae097db
+  languageName: node
+  linkType: hard
+
+"whatwg-url@npm:^5.0.0":
+  version: 5.0.0
+  resolution: "whatwg-url@npm:5.0.0"
+  dependencies:
+    tr46: "npm:~0.0.3"
+    webidl-conversions: "npm:^3.0.0"
+  checksum: 1588bed84d10b72d5eec1d0faa0722ba1962f1821e7539c535558fb5398d223b0c50d8acab950b8c488b4ba69043fd833cc2697056b167d8ad46fac3995a55d5
   languageName: node
   linkType: hard