\n setQuestion(e.target.value)}\n placeholder=\"Ask a question...\"\n />\n \n\n
\n )\n}\n```\n\n#### `use0gBalance`\nQuery balance from the 0G broker:\n\n```tsx\nimport { use0gBalance } from '0g-wagmi'\n\nfunction BalanceComponent() {\n const { balance, isLoading, refetch } = use0gBalance({\n enabled: true,\n refetchInterval: 30000, // Refetch every 30 seconds\n })\n\n if (isLoading) return Thinking Reason:
\n \n \n {reason}\n \n
\n\n Response:
\n \n \n {response}\n \n
\n\n {error && Error: {error}
}\n Loading...
\n \n return (\n \n
\n )\n}\n```\n\n#### `use0gAddFunds`\nAdd funds to the 0G broker:\n\n```tsx\nimport { use0gAddFunds } from '0g-wagmi'\n\nfunction AddFundsComponent() {\n const { addFunds, isLoading } = use0gAddFunds({\n onSuccess: (txHash) => {\n console.log('Transaction successful:', txHash)\n },\n onError: (error) => {\n console.error('Transaction failed:', error)\n },\n })\n\n return (\n \n )\n}\n```\n\n#### `use0gWithdrawFunds`\nWithdraw funds from the 0G broker:\n\n```tsx\nimport { use0gWithdrawFunds } from '0g-wagmi'\n\nfunction WithdrawComponent() {\n const { withdrawFunds, isLoading } = use0gWithdrawFunds({\n onSuccess: (txHash) => {\n console.log('Withdrawal successful:', txHash)\n },\n onError: (error) => {\n console.error('Withdrawal failed:', error)\n },\n })\n\n return (\n \n )\n}\n```\n\n#### `use0gServices`\nList available AI services on the 0G network:\n\n```tsx\nimport { use0gServices } from '0g-wagmi'\n\nfunction ServicesComponent() {\n const { services, isLoading, error } = use0gServices()\n\n if (isLoading) return Total: {balance ? (Number(balance.totalBalance) / 1e18).toFixed(6) : '0'} OG
\nAvailable: {balance ? (Number(balance.availableBalance) / 1e18).toFixed(6) : '0'} OG
\n \nLoading services...
\n if (error) return Error loading services
\n \n return (\n \n {services?.map((service, index) => (\n
\n )\n}\n```\n\n#### `use0gInferenceBalance`\nQuery inference-specific balance for a provider:\n\n```tsx\nimport { use0gInferenceBalance } from '0g-wagmi'\n\nfunction InferenceBalanceComponent({ providerAddress }: { providerAddress: string }) {\n const { balance, isLoading, error, refetch } = use0gInferenceBalance(providerAddress)\n\n if (isLoading) return \n
\n ))}\n {service.model}
\nProvider: {service.provider}
\nInput Price: {service.inputPrice.toString()} per 1M tokens
\nOutput Price: {service.outputPrice.toString()} per 1M tokens
\nLoading balance...
\n if (error) return Error loading balance
\n \n return (\n \n
\n )\n}\n```\n\n#### `use0gInferenceAddFunds`\nAdd funds to a specific inference provider:\n\n```tsx\nimport { use0gInferenceAddFunds } from '0g-wagmi'\n\nfunction AddInferenceFundsComponent({ providerAddress }: { providerAddress: string }) {\n const { addFunds, isLoading } = use0gInferenceAddFunds()\n\n const handleAddFunds = async () => {\n try {\n await addFunds(providerAddress, '0.1')\n console.log('Funds added successfully')\n } catch (err) {\n console.error('Failed to add funds:', err)\n }\n }\n\n return (\n \n )\n}\n```\n\n#### `use0gBroker`\nGet the underlying 0G broker instance:\n\n```tsx\nimport { use0gBroker } from '0g-wagmi'\n\nfunction BrokerComponent() {\n const { broker, isLoading, error } = use0gBroker()\n\n if (isLoading) return Allocated Credit: {balance ? (Number(balance) / 1e18).toFixed(6) : '0'} OG
\n \nInitializing broker...
\n if (error) return Error: {error.message}
\n if (!broker) return Connect wallet to continue
\n\n // Use broker directly for advanced operations\n return Broker initialized
\n}\n```\n\n#### `use0gServiceMetadata`\nGet detailed metadata for a specific service provider:\n\n```tsx\nimport { use0gServiceMetadata } from '0g-wagmi'\n\nfunction ServiceMetadataComponent({ providerAddress }: { providerAddress: string }) {\n const { metadata, modelName, endpoint, isLoading, error } = use0gServiceMetadata(providerAddress)\n\n if (isLoading) return Loading service metadata...
\n if (error) return Error loading metadata
\n\n return (\n \n
\n )\n}\n```\n\n## Storage Hooks\n\n#### `use0gStorageUpload`\nUpload files to 0G Storage:\n\n```tsx\nimport { use0gStorageUpload } from '0g-wagmi'\n\nfunction UploadComponent() {\n const [file, setFile] = useStateService Details
\nModel: {modelName}
\nEndpoint: {endpoint}
\n\n setFile(e.target.files?.[0] || null)}\n />\n \n\n {isSuccess && data && (\n
\n )\n}\n```\n\n#### `use0gStorageDownload`\nDownload files from 0G Storage:\n\n```tsx\nimport { use0gStorageDownload } from '0g-wagmi'\n\nfunction DownloadComponent() {\n const [rootHash, setRootHash] = useState('')\n const { download, downloadAndSave, isLoading, data, error } = use0gStorageDownload({\n onSuccess: (result) => {\n console.log('File downloaded:', result.fileName)\n console.log('Size:', result.fileData.byteLength, 'bytes')\n },\n })\n\n const handleDownload = async () => {\n if (!rootHash) return\n try {\n // Option 1: Download and get the data\n const result = await download(rootHash, 'my-file.txt')\n\n // Option 2: Download and automatically save to user's computer\n // await downloadAndSave(rootHash, 'my-file.txt')\n } catch (err) {\n console.error('Download error:', err)\n }\n }\n\n return (\n \n
\n )}\n\n {error && Root Hash: {data.rootHash}
\nTransaction: {data.txHash}
\nError: {error.message}
}\n \n setRootHash(e.target.value)}\n />\n \n\n {data && (\n
\n )\n}\n```\n\n#### `use0gStorageFile`\nCreate 0G file objects and compute merkle root hash from browser files:\n\n```tsx\nimport { use0gStorageFile } from '0g-wagmi'\n\nfunction FileInfoComponent() {\n const [file, setFile] = useState\n
\n )}\n\n {error && File: {data.fileName}
\nSize: {(data.fileData.byteLength / 1024).toFixed(2)} KB
\nError: {error.message}
}\n \n setFile(e.target.files?.[0] || null)}\n />\n\n {isLoading &&
\n )\n}\n```\n\n## Key-Value Storage\n\n#### `use0gKeyValue`\nStore and retrieve key-value pairs on 0G Network:\n\n```tsx\nimport { use0gKeyValue } from '0g-wagmi'\n\nfunction KeyValueComponent() {\n const streamId = 'your-stream-id'\n const {\n setValue,\n getValue,\n cachedValues,\n isSettingValue,\n setSuccess\n } = use0gKeyValue({\n streamId,\n onSetSuccess: (result) => {\n console.log('Value set successfully!')\n console.log('Transaction:', result.txHash)\n },\n })\n\n // Set a value\n const handleSet = async () => {\n try {\n await setValue('myKey', 'myValue')\n } catch (err) {\n console.error('Set error:', err)\n }\n }\n\n // Get a value\n const MyValueDisplay = () => {\n const { data: value, isLoading } = getValue('myKey')\n\n if (isLoading) return Computing merkle root...
}\n\n {rootHash && (\n \n
\n )}\n\n {error && File ready for upload
\nRoot Hash: {rootHash}
\nError: {error.message}
}\n Loading...
\n return Value: {value || 'Not set'}
\n }\n\n return (\n \n \n\n
\n )\n}\n```\n\n## Intelligent NFT (iNFT) Hooks\n\n#### `use0gInftMint`\nMint intelligent NFTs with encrypted metadata stored on 0G Storage:\n\n```tsx\nimport { use0gInftMint, InftMetadata } from '0g-wagmi'\n\nfunction MintInftComponent() {\n const { mint, isLoading, data, error, isSuccess } = use0gInftMint({\n onSuccess: (result) => {\n console.log('iNFT minted!')\n console.log('Token ID:', result.tokenId)\n console.log('Metadata Hash:', result.metadataHash)\n },\n })\n\n const handleMint = async () => {\n const metadata: InftMetadata = {\n name: 'My AI Agent',\n description: 'An intelligent agent with unique capabilities',\n aiModel: 'GPT-4',\n image: 'https://example.com/image.png',\n modelWeights: 'ipfs://weights-hash',\n configuration: {\n temperature: 0.7,\n maxTokens: 2048,\n },\n attributes: [\n { trait_type: 'Type', value: 'Conversational' },\n { trait_type: 'Intelligence', value: 95 },\n ],\n }\n\n try {\n await mint(metadata)\n } catch (err) {\n console.error('Mint error:', err)\n }\n }\n\n return (\n Cached: {cachedValues['myKey'] || 'Not in cache'}
\n \n \n\n {isSuccess && data && (\n
\n )\n}\n```\n\n#### `use0gInftList`\nList all iNFTs owned by the connected wallet:\n\n```tsx\nimport { use0gInftList } from '0g-wagmi'\n\nfunction MyInftsComponent() {\n const { infts, isLoading, refetch } = use0gInftList({\n enabled: true,\n })\n\n if (isLoading) return \n
\n )}\n\n {error && Token ID: {data.tokenId}
\nMetadata Hash: {data.metadataHash}
\nTransaction: {data.txHash}
\nError: {error.message}
}\n Loading iNFTs...
\n\n return (\n \n
\n )\n}\n```\n\n#### `use0gInftMetadata`\nFetch and decrypt iNFT metadata from 0G Storage:\n\n```tsx\nimport { use0gInftMetadata } from '0g-wagmi'\n\nfunction InftMetadataComponent({ metadataHash }: { metadataHash: string }) {\n const { data: metadata, isLoading, error } = use0gInftMetadata({\n metadataHash,\n enabled: !!metadataHash,\n })\n\n if (isLoading) return My iNFTs ({infts.length})
\n \n\n {infts.map((inft) => (\n\n
\n ))}\n Token ID: {inft.tokenId}
\nMetadata Hash: {inft.metadataHash}
\nOwner: {inft.owner}
\nMinted: {new Date(inft.mintedAt).toLocaleDateString()}
\nLoading metadata...
\n if (error) return Error: {error.message}
\n if (!metadata) return null\n\n return (\n \n 
\n )}\n\n {metadata.attributes && (\n
\n )\n}\n```\n\n## Utility Hooks\n\n#### `useEthersSigner`\nConvert wagmi wallet client to ethers.js signer (useful for advanced integrations):\n\n```tsx\nimport { useEthersSigner } from '0g-wagmi'\nimport { ethers } from 'ethers'\n\nfunction CustomContractComponent() {\n const signer = useEthersSigner()\n\n const interactWithContract = async () => {\n if (!signer) return\n\n // Use signer with ethers.js contracts\n const contract = new ethers.Contract(contractAddress, abi, signer)\n const tx = await contract.someFunction()\n await tx.wait()\n }\n\n return (\n \n )\n}\n```\n\n## Polyfills\n\nThe `@0glabs/0g-serving-broker` package depends on several Node.js server-side modules that are not available in the browser. To prevent build errors, make sure to exclude these modules from the Vite build process by creating `app/empty.js` and updating your configuration as shown below. You also need to include a Buffer polyfill.\n\n### app/empty.js\n\n```javascript\nconst unsupported = (name) => (..._args) => {\n throw new Error(`child_process.${name} is not supported in this environment`);\n};\n\n// Functions\nexport const spawn = unsupported(\"spawn\");\nexport const exec = unsupported(\"exec\");\nexport const execFile = unsupported(\"execFile\");\nexport const fork = unsupported(\"fork\");\nexport const execSync = unsupported(\"execSync\");\nexport const spawnSync = unsupported(\"spawnSync\");\nexport const execFileSync = unsupported(\"execFileSync\");\n\n// Classes / symbols that libraries sometimes reference\nexport class ChildProcess {}\nexport const forkOpts = {}; // placeholder sometimes used in examples\n\n// Default export with the same members (helps with `import cp from 'child_process'`)\nexport default {\n spawn,\n exec,\n execFile,\n fork,\n execSync,\n spawnSync,\n execFileSync,\n ChildProcess,\n forkOpts,\n};\n```\n\n### vite.config.ts\n\n```typescript\nexport default defineConfig({\n ...,\n resolve: {\n alias: {\n child_process: \"/src/empty.js\",\n \"fs/promises\": \"/src/empty.js\",\n fs: \"/src/empty.js\",\n path: \"/src/empty.js\",\n },\n },\n define: {\n global: \"globalThis\",\n },\n optimizeDeps: {\n include: [\"buffer\"],\n },\n});\n```\n\n### package.json\nInstall `buffer` package\n\n## iNFT Smart Contracts\n\nThis repository includes complete smart contract infrastructure for Intelligent NFTs (iNFTs). See the dedicated documentation:\n\n- **[Quick Start Guide](./INFT_QUICKSTART.md)** - Get started in 5 minutes\n- **[Integration Guide](./INFT_INTEGRATION.md)** - Complete API reference and examples\n- **[Contract Documentation](./packages/contracts/README.md)** - Smart contract details and deployment\n\n### iNFT Features\n\n- 🤖 **AI-Powered NFTs** - Store AI models, weights, and configurations\n- 🔐 **Encrypted Metadata** - Secure storage on 0G Network\n- 🎨 **ERC-721 Compatible** - Works with existing NFT infrastructure\n- 📦 **Full Type Safety** - TypeScript support throughout\n- 🚀 **Production Ready** - Audited OpenZeppelin contracts\n\nTo deploy the iNFT contract:\n\n```bash\ncd packages/contracts\npnpm install\ncp .env.example .env\n# Edit .env with your private key\npnpm deploy\n```\n\nSee [INFT_QUICKSTART.md](./INFT_QUICKSTART.md) for detailed instructions.\n\n## Development\n\n1. **Install dependencies:**\n ```bash\n pnpm install\n ```\n\n2. **Build the SDK and examples:**\n ```bash\n pnpm build\n ```\n\n3. **Set up environment variables for the example app:**\n ```bash\n cp packages/examples/.env.example packages/examples/.env\n ```\n\n Edit `packages/examples/.env` and add your Reown (WalletConnect) project ID:\n ```\n REOWN_PROJECT_ID=your_project_id_here\n ```\n\n Optionally, add your deployed iNFT contract address:\n ```\n VITE_INFT_CONTRACT_ADDRESS=0x_your_contract_address\n ```\n\n Get your project ID from [Reown Cloud](https://cloud.reown.com/)\n\n4. **Run the example app:**\n ```bash\n pnpm dev\n ```\n\n The app will be available at `http://localhost:5173` (or next available port)\n\n## Examples\n\nThe examples package demonstrates all available hooks:\n\n- **AI Inference** - Chat with AI models on 0G Network\n- **Storage** - Upload and download files to/from 0G Storage\n- **Key-Value** - Store and retrieve key-value pairs\n- **iNFT** - Mint and manage intelligent NFTs\n- **Broker Management** - Add/withdraw funds, check balances\n\nNavigate through the tabs in the demo app to explore each feature.\n\n## Additional Resources\n\n- [0G Network Documentation](https://docs.0g.ai)\n- [0G iNFT Integration Docs](https://docs.0g.ai/developer-hub/building-on-0g/inft/integration)\n- [Reown (WalletConnect) Setup](https://cloud.reown.com/)\n\n## License\n\nMIT","readmeFilename":"README.md"}{metadata.name}
\n{metadata.description}
\n\n {metadata.aiModel &&AI Model: {metadata.aiModel}
}\n\n {metadata.image && (\n\n
\n )}\n