From c229c68f7a0763196d950e3b10c6e611c799f970 Mon Sep 17 00:00:00 2001 From: nhussein11 Date: Tue, 18 Nov 2025 17:25:28 -0300 Subject: [PATCH 1/2] fix: wagmi lib --- .../libraries/wagmi/StorageContract.tsx | 2 +- .../libraries/wagmi/wagmi-testnet.ts | 2 +- smart-contracts/libraries/wagmi.md | 14 +++++--------- 3 files changed, 7 insertions(+), 11 deletions(-) diff --git a/.snippets/code/smart-contracts/libraries/wagmi/StorageContract.tsx b/.snippets/code/smart-contracts/libraries/wagmi/StorageContract.tsx index cd6fa7c72..ee357e311 100644 --- a/.snippets/code/smart-contracts/libraries/wagmi/StorageContract.tsx +++ b/.snippets/code/smart-contracts/libraries/wagmi/StorageContract.tsx @@ -8,7 +8,7 @@ import { } from "wagmi"; const CONTRACT_ADDRESS = - "0xabBd46Ef74b88E8B1CDa49BeFb5057710443Fd29" as `0x${string}`; + "INSERT_CONTRACT_ADDRESS" as `0x${string}`; export function StorageContract() { const [number, setNumber] = useState("42"); diff --git a/.snippets/code/smart-contracts/libraries/wagmi/wagmi-testnet.ts b/.snippets/code/smart-contracts/libraries/wagmi/wagmi-testnet.ts index 7b4f060a0..ec9354be8 100644 --- a/.snippets/code/smart-contracts/libraries/wagmi/wagmi-testnet.ts +++ b/.snippets/code/smart-contracts/libraries/wagmi/wagmi-testnet.ts @@ -12,7 +12,7 @@ const assetHub = { }, rpcUrls: { default: { - http: ['https://testnet-passet-hub-eth-rpc.polkadot.io'], + http: ['https://testnet-passet-hub-eth-rpc.polkadot.io'], // TODO: change to paseo asset hub once ready }, }, } as const; diff --git a/smart-contracts/libraries/wagmi.md b/smart-contracts/libraries/wagmi.md index 2228deef8..8223c0891 100644 --- a/smart-contracts/libraries/wagmi.md +++ b/smart-contracts/libraries/wagmi.md @@ -6,8 +6,6 @@ categories: Smart Contracts, Tooling # Wagmi ---8<-- 'text/smart-contracts/polkaVM-warning.md' - ## Introduction [Wagmi](https://wagmi.sh/){target=\_blank} is a collection of [React Hooks](https://wagmi.sh/react/api/hooks){target=\_blank} for interacting with Ethereum-compatible blockchains, focusing on developer experience, feature richness, and reliability. @@ -19,9 +17,8 @@ This guide demonstrates how to use Wagmi to interact with and deploy smart contr To start working with Wagmi, create a new React project and initialize it by running the following commands in your terminal: ```bash -# Create a new React project using Next.js -npx create-next-app@latest wagmi-asset-hub -cd wagmi-asset-hub +npx create-next-app@latest wagmi-polkadot-hub +cd wagmi-polkadot-hub ``` ## Install Dependencies @@ -29,7 +26,6 @@ cd wagmi-asset-hub Install Wagmi and its peer dependencies: ```bash -# Install Wagmi and its dependencies npm install wagmi viem @tanstack/react-query ``` @@ -37,7 +33,7 @@ npm install wagmi viem @tanstack/react-query Create a configuration file to initialize Wagmi with Polkadot Hub. In your project, create a file named `src/lib/wagmi.ts` and add the code below. Be sure to replace `INSERT_RPC_URL`, `INSERT_CHAIN_ID`, `INSERT_CHAIN_NAME`, `INSERT_NETWORK_NAME`, `INSERT_CHAIN_DECIMALS`, `INSERT_CURRENCY_NAME`, and `INSERT_CURRENCY_SYMBOL` with your specific values. -```typescript title="src/lib/wagmi.ts" +```typescript title="app/lib/wagmi.ts" --8<-- 'code/smart-contracts/libraries/wagmi/wagmi.ts' ``` @@ -87,7 +83,7 @@ This component uses the following React hooks: ## Interact with Deployed Contract -This guide uses a simple Storage contract already deployed to the Polkadot Hub TestNet (`0x58053f0e8ede1a47a1af53e43368cd04ddcaf66f`). The code of that contract is: +This guide uses a simple Storage contract already deployed to the Polkadot Hub TestNet. The code of that contract is: ??? code "Storage.sol" @@ -95,7 +91,7 @@ This guide uses a simple Storage contract already deployed to the Polkadot Hub T --8<-- 'code/smart-contracts/libraries/wagmi/Storage.sol' ``` -Create a component to interact with your deployed contract. Create a file named `app/components/StorageContract.tsx`: +Create a component to interact with your deployed contract. Create a file named `components/StorageContract.tsx`: ```typescript title="app/components/StorageContract.tsx" --8<-- 'code/smart-contracts/libraries/wagmi/StorageContract.tsx' From e5a4d68e4c8ab04b1b0b9acc7745a486ae3e7b14 Mon Sep 17 00:00:00 2001 From: nhussein11 Date: Tue, 18 Nov 2025 17:25:41 -0300 Subject: [PATCH 2/2] fix: llms --- .ai/categories/smart-contracts.md | 18 +++++++----------- .ai/categories/tooling.md | 18 +++++++----------- .ai/pages/smart-contracts-libraries-wagmi.md | 18 +++++++----------- .ai/site-index.json | 10 +++++----- llms-full.jsonl | 20 ++++++++++---------- 5 files changed, 36 insertions(+), 48 deletions(-) diff --git a/.ai/categories/smart-contracts.md b/.ai/categories/smart-contracts.md index 5412f63f8..dd2241639 100644 --- a/.ai/categories/smart-contracts.md +++ b/.ai/categories/smart-contracts.md @@ -9840,8 +9840,6 @@ Page Title: Wagmi for Polkadot Hub Smart Contracts # Wagmi -!!! smartcontract "PolkaVM Preview Release" - PolkaVM smart contracts with Ethereum compatibility are in **early-stage development and may be unstable or incomplete**. ## Introduction [Wagmi](https://wagmi.sh/){target=\_blank} is a collection of [React Hooks](https://wagmi.sh/react/api/hooks){target=\_blank} for interacting with Ethereum-compatible blockchains, focusing on developer experience, feature richness, and reliability. @@ -9853,9 +9851,8 @@ This guide demonstrates how to use Wagmi to interact with and deploy smart contr To start working with Wagmi, create a new React project and initialize it by running the following commands in your terminal: ```bash -# Create a new React project using Next.js -npx create-next-app@latest wagmi-asset-hub -cd wagmi-asset-hub +npx create-next-app@latest wagmi-polkadot-hub +cd wagmi-polkadot-hub ``` ## Install Dependencies @@ -9863,7 +9860,6 @@ cd wagmi-asset-hub Install Wagmi and its peer dependencies: ```bash -# Install Wagmi and its dependencies npm install wagmi viem @tanstack/react-query ``` @@ -9871,7 +9867,7 @@ npm install wagmi viem @tanstack/react-query Create a configuration file to initialize Wagmi with Polkadot Hub. In your project, create a file named `src/lib/wagmi.ts` and add the code below. Be sure to replace `INSERT_RPC_URL`, `INSERT_CHAIN_ID`, `INSERT_CHAIN_NAME`, `INSERT_NETWORK_NAME`, `INSERT_CHAIN_DECIMALS`, `INSERT_CURRENCY_NAME`, and `INSERT_CURRENCY_SYMBOL` with your specific values. -```typescript title="src/lib/wagmi.ts" +```typescript title="app/lib/wagmi.ts" import { http, createConfig } from 'wagmi' // Configure the Polkadot Hub chain @@ -9917,7 +9913,7 @@ export const config = createConfig({ }, rpcUrls: { default: { - http: ['https://testnet-passet-hub-eth-rpc.polkadot.io'], + http: ['https://testnet-passet-hub-eth-rpc.polkadot.io'], // TODO: change to paseo asset hub once ready }, }, } as const; @@ -10057,7 +10053,7 @@ This component uses the following React hooks: ## Interact with Deployed Contract -This guide uses a simple Storage contract already deployed to the Polkadot Hub TestNet (`0x58053f0e8ede1a47a1af53e43368cd04ddcaf66f`). The code of that contract is: +This guide uses a simple Storage contract already deployed to the Polkadot Hub TestNet. The code of that contract is: ??? code "Storage.sol" @@ -10085,7 +10081,7 @@ This guide uses a simple Storage contract already deployed to the Polkadot Hub T } ``` -Create a component to interact with your deployed contract. Create a file named `app/components/StorageContract.tsx`: +Create a component to interact with your deployed contract. Create a file named `components/StorageContract.tsx`: ```typescript title="app/components/StorageContract.tsx" "use client"; @@ -10098,7 +10094,7 @@ import { } from "wagmi"; const CONTRACT_ADDRESS = - "0xabBd46Ef74b88E8B1CDa49BeFb5057710443Fd29" as `0x${string}`; + "INSERT_CONTRACT_ADDRESS" as `0x${string}`; export function StorageContract() { const [number, setNumber] = useState("42"); diff --git a/.ai/categories/tooling.md b/.ai/categories/tooling.md index 7b85f85c4..e7194917a 100644 --- a/.ai/categories/tooling.md +++ b/.ai/categories/tooling.md @@ -11850,8 +11850,6 @@ Page Title: Wagmi for Polkadot Hub Smart Contracts # Wagmi -!!! smartcontract "PolkaVM Preview Release" - PolkaVM smart contracts with Ethereum compatibility are in **early-stage development and may be unstable or incomplete**. ## Introduction [Wagmi](https://wagmi.sh/){target=\_blank} is a collection of [React Hooks](https://wagmi.sh/react/api/hooks){target=\_blank} for interacting with Ethereum-compatible blockchains, focusing on developer experience, feature richness, and reliability. @@ -11863,9 +11861,8 @@ This guide demonstrates how to use Wagmi to interact with and deploy smart contr To start working with Wagmi, create a new React project and initialize it by running the following commands in your terminal: ```bash -# Create a new React project using Next.js -npx create-next-app@latest wagmi-asset-hub -cd wagmi-asset-hub +npx create-next-app@latest wagmi-polkadot-hub +cd wagmi-polkadot-hub ``` ## Install Dependencies @@ -11873,7 +11870,6 @@ cd wagmi-asset-hub Install Wagmi and its peer dependencies: ```bash -# Install Wagmi and its dependencies npm install wagmi viem @tanstack/react-query ``` @@ -11881,7 +11877,7 @@ npm install wagmi viem @tanstack/react-query Create a configuration file to initialize Wagmi with Polkadot Hub. In your project, create a file named `src/lib/wagmi.ts` and add the code below. Be sure to replace `INSERT_RPC_URL`, `INSERT_CHAIN_ID`, `INSERT_CHAIN_NAME`, `INSERT_NETWORK_NAME`, `INSERT_CHAIN_DECIMALS`, `INSERT_CURRENCY_NAME`, and `INSERT_CURRENCY_SYMBOL` with your specific values. -```typescript title="src/lib/wagmi.ts" +```typescript title="app/lib/wagmi.ts" import { http, createConfig } from 'wagmi' // Configure the Polkadot Hub chain @@ -11927,7 +11923,7 @@ export const config = createConfig({ }, rpcUrls: { default: { - http: ['https://testnet-passet-hub-eth-rpc.polkadot.io'], + http: ['https://testnet-passet-hub-eth-rpc.polkadot.io'], // TODO: change to paseo asset hub once ready }, }, } as const; @@ -12067,7 +12063,7 @@ This component uses the following React hooks: ## Interact with Deployed Contract -This guide uses a simple Storage contract already deployed to the Polkadot Hub TestNet (`0x58053f0e8ede1a47a1af53e43368cd04ddcaf66f`). The code of that contract is: +This guide uses a simple Storage contract already deployed to the Polkadot Hub TestNet. The code of that contract is: ??? code "Storage.sol" @@ -12095,7 +12091,7 @@ This guide uses a simple Storage contract already deployed to the Polkadot Hub T } ``` -Create a component to interact with your deployed contract. Create a file named `app/components/StorageContract.tsx`: +Create a component to interact with your deployed contract. Create a file named `components/StorageContract.tsx`: ```typescript title="app/components/StorageContract.tsx" "use client"; @@ -12108,7 +12104,7 @@ import { } from "wagmi"; const CONTRACT_ADDRESS = - "0xabBd46Ef74b88E8B1CDa49BeFb5057710443Fd29" as `0x${string}`; + "INSERT_CONTRACT_ADDRESS" as `0x${string}`; export function StorageContract() { const [number, setNumber] = useState("42"); diff --git a/.ai/pages/smart-contracts-libraries-wagmi.md b/.ai/pages/smart-contracts-libraries-wagmi.md index 8b4ffe803..89da5bd2d 100644 --- a/.ai/pages/smart-contracts-libraries-wagmi.md +++ b/.ai/pages/smart-contracts-libraries-wagmi.md @@ -7,8 +7,6 @@ url: https://docs.polkadot.com/smart-contracts/libraries/wagmi/ # Wagmi -!!! smartcontract "PolkaVM Preview Release" - PolkaVM smart contracts with Ethereum compatibility are in **early-stage development and may be unstable or incomplete**. ## Introduction [Wagmi](https://wagmi.sh/){target=\_blank} is a collection of [React Hooks](https://wagmi.sh/react/api/hooks){target=\_blank} for interacting with Ethereum-compatible blockchains, focusing on developer experience, feature richness, and reliability. @@ -20,9 +18,8 @@ This guide demonstrates how to use Wagmi to interact with and deploy smart contr To start working with Wagmi, create a new React project and initialize it by running the following commands in your terminal: ```bash -# Create a new React project using Next.js -npx create-next-app@latest wagmi-asset-hub -cd wagmi-asset-hub +npx create-next-app@latest wagmi-polkadot-hub +cd wagmi-polkadot-hub ``` ## Install Dependencies @@ -30,7 +27,6 @@ cd wagmi-asset-hub Install Wagmi and its peer dependencies: ```bash -# Install Wagmi and its dependencies npm install wagmi viem @tanstack/react-query ``` @@ -38,7 +34,7 @@ npm install wagmi viem @tanstack/react-query Create a configuration file to initialize Wagmi with Polkadot Hub. In your project, create a file named `src/lib/wagmi.ts` and add the code below. Be sure to replace `INSERT_RPC_URL`, `INSERT_CHAIN_ID`, `INSERT_CHAIN_NAME`, `INSERT_NETWORK_NAME`, `INSERT_CHAIN_DECIMALS`, `INSERT_CURRENCY_NAME`, and `INSERT_CURRENCY_SYMBOL` with your specific values. -```typescript title="src/lib/wagmi.ts" +```typescript title="app/lib/wagmi.ts" import { http, createConfig } from 'wagmi' // Configure the Polkadot Hub chain @@ -84,7 +80,7 @@ export const config = createConfig({ }, rpcUrls: { default: { - http: ['https://testnet-passet-hub-eth-rpc.polkadot.io'], + http: ['https://testnet-passet-hub-eth-rpc.polkadot.io'], // TODO: change to paseo asset hub once ready }, }, } as const; @@ -224,7 +220,7 @@ This component uses the following React hooks: ## Interact with Deployed Contract -This guide uses a simple Storage contract already deployed to the Polkadot Hub TestNet (`0x58053f0e8ede1a47a1af53e43368cd04ddcaf66f`). The code of that contract is: +This guide uses a simple Storage contract already deployed to the Polkadot Hub TestNet. The code of that contract is: ??? code "Storage.sol" @@ -252,7 +248,7 @@ This guide uses a simple Storage contract already deployed to the Polkadot Hub T } ``` -Create a component to interact with your deployed contract. Create a file named `app/components/StorageContract.tsx`: +Create a component to interact with your deployed contract. Create a file named `components/StorageContract.tsx`: ```typescript title="app/components/StorageContract.tsx" "use client"; @@ -265,7 +261,7 @@ import { } from "wagmi"; const CONTRACT_ADDRESS = - "0xabBd46Ef74b88E8B1CDa49BeFb5057710443Fd29" as `0x${string}`; + "INSERT_CONTRACT_ADDRESS" as `0x${string}`; export function StorageContract() { const [number, setNumber] = useState("42"); diff --git a/.ai/site-index.json b/.ai/site-index.json index 6fe83e689..4a49e2c10 100644 --- a/.ai/site-index.json +++ b/.ai/site-index.json @@ -8626,7 +8626,7 @@ ], "raw_md_url": "https://raw.githubusercontent.com/polkadot-developers/polkadot-docs/master/.ai/pages/smart-contracts-libraries-wagmi.md", "html_url": "https://docs.polkadot.com/smart-contracts/libraries/wagmi/", - "preview": "!!! smartcontract \"PolkaVM Preview Release\" PolkaVM smart contracts with Ethereum compatibility are in **early-stage development and may be unstable or incomplete**. ## Introduction", + "preview": "[Wagmi](https://wagmi.sh/){target=\\_blank} is a collection of [React Hooks](https://wagmi.sh/react/api/hooks){target=\\_blank} for interacting with Ethereum-compatible blockchains, focusing on developer experience, feature richness, and reliability.", "outline": [ { "depth": 2, @@ -8680,12 +8680,12 @@ } ], "stats": { - "chars": 13604, - "words": 1515, + "chars": 13336, + "words": 1487, "headings": 10, - "estimated_token_count_total": 3250 + "estimated_token_count_total": 3238 }, - "hash": "sha256:bc771f912627fa09cad64adab1bc81c052f650d6c5a3b4f0c91883a98f6628da", + "hash": "sha256:79acad3dd784fbf0f6704b74a3d2df2b7ede33f4a157cc28683c0f710a5236b2", "token_estimator": "heuristic-v1" }, { diff --git a/llms-full.jsonl b/llms-full.jsonl index 839eae83d..4b4262d6b 100644 --- a/llms-full.jsonl +++ b/llms-full.jsonl @@ -1130,16 +1130,16 @@ {"page_id": "smart-contracts-libraries-viem", "page_title": "viem for Polkadot Hub Smart Contracts", "index": 11, "depth": 2, "title": "Deploy the Contract", "anchor": "deploy-the-contract", "start_char": 10480, "end_char": 12665, "estimated_token_count": 504, "token_estimator": "heuristic-v1", "text": "## Deploy the Contract\n\nCreate a new file at `src/deploy.ts` for handling contract deployment:\n\n```typescript title=\"src/deploy.ts\"\nimport { readFileSync } from 'fs';\nimport { join } from 'path';\nimport { createWallet } from './createWallet';\nimport { publicClient } from './createClient';\n\nconst deployContract = async (\n contractName: string,\n privateKey: `0x${string}`\n) => {\n try {\n console.log(`Deploying ${contractName}...`);\n\n // Read contract artifacts\n const abi = JSON.parse(\n readFileSync(\n join(__dirname, '../artifacts', `${contractName}.json`),\n 'utf8'\n )\n );\n const bytecode = `0x${readFileSync(\n join(__dirname, '../artifacts', `${contractName}.polkavm`)\n ).toString('hex')}` as `0x${string}`;\n\n // Create wallet\n const wallet = createWallet(privateKey);\n\n // Deploy contract\n const hash = await wallet.deployContract({\n abi,\n bytecode,\n args: [], // Add constructor arguments if needed\n });\n\n // Wait for deployment\n const receipt = await publicClient.waitForTransactionReceipt({ hash });\n const contractAddress = receipt.contractAddress;\n\n console.log(`Contract deployed at: ${contractAddress}`);\n return contractAddress;\n } catch (error) {\n console.error('Deployment failed:', error);\n throw error;\n }\n};\n\nconst privateKey = 'INSERT_PRIVATE_KEY';\ndeployContract('Storage', privateKey);\n```\n\nEnsure to replace `INSERT_PRIVATE_KEY` with the proper value. For further details on private key exportation, refer to the article [How to export an account's private key](https://support.metamask.io/configure/accounts/how-to-export-an-accounts-private-key/){target=\\_blank}.\n\n!!! warning\n Never commit or share your private key. Exposed keys can lead to immediate theft of all associated funds. Use environment variables instead.\n\nTo deploy, run the following command:\n\n```bash\nnpm run deploy\n```\n\nIf everything is successful, you will see the address of your deployed contract displayed in the terminal. This address is unique to your contract on the network you defined in the chain configuration, and you'll need it for any future interactions with your contract."} {"page_id": "smart-contracts-libraries-viem", "page_title": "viem for Polkadot Hub Smart Contracts", "index": 12, "depth": 2, "title": "Interact with the Contract", "anchor": "interact-with-the-contract", "start_char": 12665, "end_char": 14831, "estimated_token_count": 455, "token_estimator": "heuristic-v1", "text": "## Interact with the Contract\n\nCreate a new file at `src/interact.ts` for interacting with your deployed contract:\n\n```typescript title=\"src/interact.ts\"\nimport { publicClient } from './createClient';\nimport { createWallet } from './createWallet';\nimport { readFileSync } from 'fs';\n\nconst STORAGE_ABI = JSON.parse(\n readFileSync('./artifacts/Storage.json', 'utf8')\n);\n\nconst interactWithStorage = async (\n contractAddress: `0x${string}`,\n privateKey: `0x${string}`\n) => {\n try {\n const wallet = createWallet(privateKey);\n const currentNumber = await publicClient.readContract({\n address: contractAddress,\n abi: STORAGE_ABI,\n functionName: 'storedNumber',\n args: [],\n });\n console.log(`Stored number: ${currentNumber}`);\n\n const newNumber = BigInt(42);\n const { request } = await publicClient.simulateContract({\n address: contractAddress,\n abi: STORAGE_ABI,\n functionName: 'setNumber',\n args: [newNumber],\n account: wallet.account,\n });\n\n const hash = await wallet.writeContract(request);\n await publicClient.waitForTransactionReceipt({ hash });\n console.log(`Number updated to ${newNumber}`);\n\n const updatedNumber = await publicClient.readContract({\n address: contractAddress,\n abi: STORAGE_ABI,\n functionName: 'storedNumber',\n args: [],\n });\n console.log('Updated stored number:', updatedNumber);\n } catch (error) {\n console.error('Interaction failed:', error);\n }\n};\n\nconst PRIVATE_KEY = 'INSERT_PRIVATE_KEY';\nconst CONTRACT_ADDRESS = 'INSERT_CONTRACT_ADDRESS';\n\ninteractWithStorage(CONTRACT_ADDRESS, PRIVATE_KEY);\n\n```\n\nEnsure to replace `INSERT_PRIVATE_KEY` and `INSERT_CONTRACT_ADDRESS` with the proper values.\n\nTo interact with the contract:\n\n```bash\nnpm run interact\n```\n\nFollowing a successful interaction, you will see the stored value before and after the transaction. The output will show the initial stored number (0 if you haven't modified it yet), confirm when the transaction to set the number to 42 is complete, and then display the updated stored number value. This demonstrates both reading from and writing to your smart contract."} {"page_id": "smart-contracts-libraries-viem", "page_title": "viem for Polkadot Hub Smart Contracts", "index": 13, "depth": 2, "title": "Where to Go Next", "anchor": "where-to-go-next", "start_char": 14831, "end_char": 16600, "estimated_token_count": 545, "token_estimator": "heuristic-v1", "text": "## Where to Go Next\n\nNow that you have the foundation for using viem with Polkadot Hub, consider exploring:\n\n
\n\n- External __Advanced viem Features__\n\n ---\n Explore viem's documentation:\n
    \n
  • [:octicons-arrow-right-24: Multi call](https://viem.sh/docs/contract/multicall#multicall){target=\\_blank}
    • \n\n
  • [:octicons-arrow-right-24: Batch transactions](https://viem.sh/docs/clients/transports/http#batch-json-rpc){target=\\_blank}
    • \n\n
  • [:octicons-arrow-right-24: Custom actions](https://viem.sh/docs/clients/custom#extending-with-actions-or-configuration){target=\\_blank}
    • \n
\n\n- External __Test Frameworks__\n\n ---\n\n Integrate viem with the following frameworks for comprehensive testing:\n
    \n
  • [:octicons-arrow-right-24: Hardhat](https://hardhat.org/){target=\\_blank}
    • \n\n
  • [:octicons-arrow-right-24: Foundry](https://getfoundry.sh/){target=\\_blank}
    • \n
\n\n- External __Event Handling__\n\n ---\n\n Learn how to subscribe to and process contract events:\n
    \n
  • [:octicons-arrow-right-24: Event subscription](https://viem.sh/docs/actions/public/watchEvent#watchevent){target=\\_blank}
    • \n
\n\n- External __Building dApps__\n\n ---\n\n Combine viem the following technologies to create full-stack applications:\n
    \n
  • [:octicons-arrow-right-24: Next.js](https://nextjs.org/docs){target=\\_blank}
    • \n\n
  • [:octicons-arrow-right-24: Node.js](https://nodejs.org/en){target=\\_blank}
    • \n
\n\n
"} -{"page_id": "smart-contracts-libraries-wagmi", "page_title": "Wagmi for Polkadot Hub Smart Contracts", "index": 0, "depth": 2, "title": "Introduction", "anchor": "introduction", "start_char": 179, "end_char": 607, "estimated_token_count": 97, "token_estimator": "heuristic-v1", "text": "## Introduction\n\n[Wagmi](https://wagmi.sh/){target=\\_blank} is a collection of [React Hooks](https://wagmi.sh/react/api/hooks){target=\\_blank} for interacting with Ethereum-compatible blockchains, focusing on developer experience, feature richness, and reliability.\n\nThis guide demonstrates how to use Wagmi to interact with and deploy smart contracts to Polkadot Hub, providing a seamless frontend integration for your dApps."} -{"page_id": "smart-contracts-libraries-wagmi", "page_title": "Wagmi for Polkadot Hub Smart Contracts", "index": 1, "depth": 2, "title": "Set Up the Project", "anchor": "set-up-the-project", "start_char": 607, "end_char": 875, "estimated_token_count": 65, "token_estimator": "heuristic-v1", "text": "## Set Up the Project\n\nTo start working with Wagmi, create a new React project and initialize it by running the following commands in your terminal:\n\n```bash\n# Create a new React project using Next.js\nnpx create-next-app@latest wagmi-asset-hub\ncd wagmi-asset-hub\n```"} -{"page_id": "smart-contracts-libraries-wagmi", "page_title": "Wagmi for Polkadot Hub Smart Contracts", "index": 2, "depth": 2, "title": "Install Dependencies", "anchor": "install-dependencies", "start_char": 875, "end_char": 1037, "estimated_token_count": 34, "token_estimator": "heuristic-v1", "text": "## Install Dependencies\n\nInstall Wagmi and its peer dependencies:\n\n```bash\n# Install Wagmi and its dependencies\nnpm install wagmi viem @tanstack/react-query\n```"} -{"page_id": "smart-contracts-libraries-wagmi", "page_title": "Wagmi for Polkadot Hub Smart Contracts", "index": 3, "depth": 2, "title": "Configure Wagmi for Polkadot Hub", "anchor": "configure-wagmi-for-polkadot-hub", "start_char": 1037, "end_char": 2725, "estimated_token_count": 381, "token_estimator": "heuristic-v1", "text": "## Configure Wagmi for Polkadot Hub\n\nCreate a configuration file to initialize Wagmi with Polkadot Hub. In your project, create a file named `src/lib/wagmi.ts` and add the code below. Be sure to replace `INSERT_RPC_URL`, `INSERT_CHAIN_ID`, `INSERT_CHAIN_NAME`, `INSERT_NETWORK_NAME`, `INSERT_CHAIN_DECIMALS`, `INSERT_CURRENCY_NAME`, and `INSERT_CURRENCY_SYMBOL` with your specific values.\n\n```typescript title=\"src/lib/wagmi.ts\"\nimport { http, createConfig } from 'wagmi'\n\n// Configure the Polkadot Hub chain\nconst assetHub = {\n id: INSERT_CHAIN_ID,\n name: 'INSERT_CHAIN_NAME',\n network: 'INSERT_NETWORK_NAME',\n nativeCurrency: {\n decimals: INSERT_CHAIN_DECIMALS,\n name: 'INSERT_CURRENCY_NAME',\n symbol: 'INSERT_CURRENCY_SYMBOL',\n },\n rpcUrls: {\n default: {\n http: ['INSERT_RPC_URL'],\n },\n },\n} as const;\n\n// Create Wagmi config\nexport const config = createConfig({\n chains: [assetHub],\n transports: {\n [assetHub.id]: http(),\n },\n})\n```\n\n??? code \"Example Polkadot Hub TestNet Configuration\"\n\n ```typescript title=\"src/lib/wagmi.ts\"\n import { http, createConfig } from 'wagmi';\n\n // Configure the Polkadot Hub chain\n const assetHub = {\n id: 420420422,\n name: 'polkadot-hub-testnet',\n network: 'polkadot-hub-testnet',\n nativeCurrency: {\n decimals: 18,\n name: 'PAS',\n symbol: 'PAS',\n },\n rpcUrls: {\n default: {\n http: ['https://testnet-passet-hub-eth-rpc.polkadot.io'],\n },\n },\n } as const;\n\n // Create wagmi config\n export const config = createConfig({\n chains: [assetHub],\n transports: {\n [assetHub.id]: http(),\n },\n });\n ```"} -{"page_id": "smart-contracts-libraries-wagmi", "page_title": "Wagmi for Polkadot Hub Smart Contracts", "index": 4, "depth": 2, "title": "Set Up the Wagmi Provider", "anchor": "set-up-the-wagmi-provider", "start_char": 2725, "end_char": 3769, "estimated_token_count": 263, "token_estimator": "heuristic-v1", "text": "## Set Up the Wagmi Provider\n\nTo enable Wagmi in your React application, you need to wrap your app with the [`WagmiProvider`](https://wagmi.sh/react/api/WagmiProvider#wagmiprovider){target=\\_blank}. Update your `app/layout.tsx` file (for Next.js app router) with the following code:\n\n```typescript title=\"app/layout.tsx\"\n// For app router (src/app/layout.tsx)\n\"use client\";\n\nimport { WagmiProvider } from \"wagmi\";\nimport { QueryClient, QueryClientProvider } from \"@tanstack/react-query\";\nimport { config } from \"./lib/wagmi\";\n\n// Create a query client\nconst queryClient = new QueryClient();\n\nexport default function RootLayout({\n children,\n}: {\n children: React.ReactNode;\n}) {\n return (\n \n \n \n \n {children}\n \n \n \n \n );\n}\n\n```\n\n!!!note\n If you are using a Next.js pages router, you should modify the `src/pages/_app.tsx` instead."} -{"page_id": "smart-contracts-libraries-wagmi", "page_title": "Wagmi for Polkadot Hub Smart Contracts", "index": 5, "depth": 2, "title": "Connect a Wallet", "anchor": "connect-a-wallet", "start_char": 3769, "end_char": 5220, "estimated_token_count": 367, "token_estimator": "heuristic-v1", "text": "## Connect a Wallet\n\nCreate a component to connect wallets to your dApp. Create a file named `app/components/ConnectWallet.tsx`:\n\n```typescript title=\"app/components/ConnectWallet.tsx\"\n\"use client\";\n\nimport React from \"react\";\nimport { useConnect, useAccount, useDisconnect } from \"wagmi\";\nimport { injected } from \"wagmi/connectors\";\n\nexport function ConnectWallet() {\n const { connect } = useConnect();\n const { address, isConnected } = useAccount();\n const { disconnect } = useDisconnect();\n\n if (isConnected) {\n return (\n
\n
Connected to {address}
\n \n
\n );\n }\n\n return (\n \n );\n}\n\n```\n\nThis component uses the following React hooks:\n\n- **[`useConnect`](https://wagmi.sh/react/api/hooks/useConnect#useconnect){target=\\_blank}**: Provides functions and state for connecting the user's wallet to your dApp. The `connect` function initiates the connection flow with the specified connector.\n- **[`useDisconnect`](https://wagmi.sh/react/api/hooks/useDisconnect#usedisconnect){target=\\_blank}**: Provides a function to disconnect the currently connected wallet.\n- **[`useAccount`](https://wagmi.sh/react/api/hooks/useAccount#useaccount){target=\\_blank}**: Returns data about the connected account, including the address and connection status."} -{"page_id": "smart-contracts-libraries-wagmi", "page_title": "Wagmi for Polkadot Hub Smart Contracts", "index": 6, "depth": 2, "title": "Fetch Blockchain Data", "anchor": "fetch-blockchain-data", "start_char": 5220, "end_char": 6700, "estimated_token_count": 359, "token_estimator": "heuristic-v1", "text": "## Fetch Blockchain Data\n\nWagmi provides various hooks to fetch blockchain data. Here's an example component that demonstrates some of these hooks:\n\n```typescript title=\"app/components/BlockchainInfo.tsx\"\n\"use client\";\n\nimport { useBlockNumber, useBalance, useAccount } from \"wagmi\";\n\nexport function BlockchainInfo() {\n const { address } = useAccount();\n // Get the latest block number\n const { data: blockNumber } = useBlockNumber({ watch: true });\n\n // Get balance for the connected wallet\n const { data: balance } = useBalance({\n address,\n });\n\n return (\n
\n

Blockchain Information

\n
\n

Current Block: {blockNumber?.toString() || \"Loading...\"}

\n\n {address && balance && (\n

\n Balance:{\" \"}\n {(\n BigInt(balance.value) / BigInt(10 ** balance.decimals)\n ).toLocaleString()}{\" \"}\n {balance.symbol}\n

\n )}\n
\n
\n );\n}\n\n```\n\nThis component uses the following React hooks:\n\n- **[`useBlockNumber`](https://wagmi.sh/react/api/hooks/useBlockNumber#useBlockNumber){target=\\_blank}**: Fetches the current block number of the connected chain. The `watch` parameter enables real-time updates when new blocks are mined.\n- **[`useBalance`](https://wagmi.sh/react/api/hooks/useBalance#useBalance){target=\\_blank}**: Retrieves the native token balance for a specified address, including value, symbol, and decimals information."} -{"page_id": "smart-contracts-libraries-wagmi", "page_title": "Wagmi for Polkadot Hub Smart Contracts", "index": 7, "depth": 2, "title": "Interact with Deployed Contract", "anchor": "interact-with-deployed-contract", "start_char": 6700, "end_char": 11209, "estimated_token_count": 989, "token_estimator": "heuristic-v1", "text": "## Interact with Deployed Contract\n\nThis guide uses a simple Storage contract already deployed to the Polkadot Hub TestNet (`0x58053f0e8ede1a47a1af53e43368cd04ddcaf66f`). The code of that contract is:\n\n??? code \"Storage.sol\"\n\n ```solidity title=\"Storage.sol\"\n //SPDX-License-Identifier: MIT\n\n // Solidity files have to start with this pragma.\n // It will be used by the Solidity compiler to validate its version.\n pragma solidity ^0.8.9;\n\n contract Storage {\n // Public state variable to store a number\n uint256 public storedNumber;\n\n /**\n * Updates the stored number.\n *\n * The `public` modifier allows anyone to call this function.\n *\n * @param _newNumber - The new value to store.\n */\n function setNumber(uint256 _newNumber) public {\n storedNumber = _newNumber;\n }\n }\n ```\n\nCreate a component to interact with your deployed contract. Create a file named `app/components/StorageContract.tsx`:\n\n```typescript title=\"app/components/StorageContract.tsx\"\n\"use client\";\n\nimport { useState } from \"react\";\nimport {\n useReadContract,\n useWriteContract,\n useWaitForTransactionReceipt,\n} from \"wagmi\";\n\nconst CONTRACT_ADDRESS =\n \"0xabBd46Ef74b88E8B1CDa49BeFb5057710443Fd29\" as `0x${string}`;\n\nexport function StorageContract() {\n const [number, setNumber] = useState(\"42\");\n\n // Contract ABI (should match your compiled contract)\n const abi = [\n {\n inputs: [],\n name: \"storedNumber\",\n outputs: [{ internalType: \"uint256\", name: \"\", type: \"uint256\" }],\n stateMutability: \"view\",\n type: \"function\",\n },\n {\n inputs: [\n { internalType: \"uint256\", name: \"_newNumber\", type: \"uint256\" },\n ],\n name: \"setNumber\",\n outputs: [],\n stateMutability: \"nonpayable\",\n type: \"function\",\n },\n ];\n\n // Read the current stored number\n const { data: storedNumber, refetch } = useReadContract({\n address: CONTRACT_ADDRESS,\n abi,\n functionName: \"storedNumber\",\n });\n\n // Write to the contract\n const { writeContract, data: hash, error, isPending } = useWriteContract();\n\n // Wait for transaction to be mined\n const { isLoading: isConfirming, isSuccess: isConfirmed } =\n useWaitForTransactionReceipt({\n hash,\n });\n\n const handleSetNumber = () => {\n writeContract({\n address: CONTRACT_ADDRESS,\n abi,\n functionName: \"setNumber\",\n args: [BigInt(number)],\n });\n };\n\n return (\n
\n

Storage Contract Interaction

\n
\n

Contract Address: {CONTRACT_ADDRESS}

\n

Current Stored Number: {storedNumber?.toString() || \"Loading...\"}

\n
\n\n
\n setNumber(e.target.value)}\n disabled={isPending || isConfirming}\n />\n \n
\n\n {error &&
Error: {error.message}
}\n\n {isConfirmed && (\n
\n Successfully updated!{\" \"}\n \n
\n )}\n
\n );\n}\n\n```\n\nThis component demonstrates how to interact with a smart contract using Wagmi's hooks:\n\n- **[`useReadContract`](https://wagmi.sh/react/api/hooks/useReadContract#useReadContract){target=\\_blank}**: Calls a read-only function on your smart contract to retrieve data without modifying the blockchain state.\n- **[`useWriteContract`](https://wagmi.sh/react/api/hooks/useWriteContract#useWriteContract){target=\\_blank}**: Calls a state-modifying function on your smart contract, which requires a transaction to be signed and sent.\n- **[`useWaitForTransactionReceipt`](https://wagmi.sh/react/api/hooks/useWaitForTransactionReceipt#useWaitForTransactionReceipt){target=\\_blank}**: Tracks the status of a transaction after it's been submitted, allowing you to know when it's been confirmed.\n\nThe component also includes proper state handling to:\n\n- Show the current value stored in the contract.\n- Allow users to input a new value.\n- Display transaction status (pending, confirming, or completed).\n- Handle errors.\n- Provide feedback when a transaction is successful."} -{"page_id": "smart-contracts-libraries-wagmi", "page_title": "Wagmi for Polkadot Hub Smart Contracts", "index": 8, "depth": 2, "title": "Integrate Components", "anchor": "integrate-components", "start_char": 11209, "end_char": 11961, "estimated_token_count": 183, "token_estimator": "heuristic-v1", "text": "## Integrate Components\n\nUpdate your main page to combine all the components. Create or update the file `src/app/page.tsx`:\n\n```typescript title=\"src/app/page.tsx\"\n\"use client\";\n\nimport { BlockchainInfo } from \"./components/BlockchainInfo\";\nimport { ConnectWallet } from \"./components/ConnectWallet\";\nimport { StorageContract } from \"./components/StorageContract\";\nimport { useAccount } from \"wagmi\";\n\nexport default function Home() {\n const { isConnected } = useAccount();\n\n return (\n
\n

Wagmi - Polkadot Hub Smart Contracts

\n \n {isConnected ? : Connect your wallet}\n {isConnected ? : Connect your wallet}\n
\n );\n}\n\n```"} -{"page_id": "smart-contracts-libraries-wagmi", "page_title": "Wagmi for Polkadot Hub Smart Contracts", "index": 9, "depth": 2, "title": "Where to Go Next", "anchor": "where-to-go-next", "start_char": 11961, "end_char": 13604, "estimated_token_count": 512, "token_estimator": "heuristic-v1", "text": "## Where to Go Next\n\nNow that you have the foundational knowledge to use Wagmi with Polkadot Hub, consider exploring:\n\n
\n\n- External __Advanced Wagmi__\n\n ---\n\n Explore Wagmi's advanced features:\n\n
    \n
  • [:octicons-arrow-right-24: Watch Contract Events](https://wagmi.sh/core/api/actions/watchContractEvent#eventname){target=\\_blank}
    • \n
  • [:octicons-arrow-right-24: Different Transports](https://wagmi.sh/react/api/transports){target=\\_blank}
    • \n
  • [:octicons-arrow-right-24: Actions](https://wagmi.sh/react/api/actions){target=\\_blank}
    • \n
\n\n- External __Wallet Integration__\n\n ---\n\n Connect your dApp with popular wallet providers:\n\n
    \n
  • [:octicons-arrow-right-24: MetaMask](https://wagmi.sh/core/api/connectors/metaMask){target=\\_blank}
    • \n
  • [:octicons-arrow-right-24: WalletConnect](https://wagmi.sh/core/api/connectors/walletConnect){target=\\_blank}
    • \n
  • [:octicons-arrow-right-24: Coinbase Wallet](https://wagmi.sh/core/api/connectors/coinbaseWallet){target=\\_blank}
    • \n
\n\n- External __Testing & Development__\n\n ---\n\n Enhance your development workflow:\n\n
    \n
  • [:octicons-arrow-right-24: Test Suite](https://wagmi.sh/dev/contributing#_6-running-the-test-suite){target=\\_blank}
    • \n
  • [:octicons-arrow-right-24: Dev Playground](https://wagmi.sh/dev/contributing#_5-running-the-dev-playgrounds){target=\\_blank}
    • \n
\n
"} +{"page_id": "smart-contracts-libraries-wagmi", "page_title": "Wagmi for Polkadot Hub Smart Contracts", "index": 0, "depth": 2, "title": "Introduction", "anchor": "introduction", "start_char": 9, "end_char": 437, "estimated_token_count": 97, "token_estimator": "heuristic-v1", "text": "## Introduction\n\n[Wagmi](https://wagmi.sh/){target=\\_blank} is a collection of [React Hooks](https://wagmi.sh/react/api/hooks){target=\\_blank} for interacting with Ethereum-compatible blockchains, focusing on developer experience, feature richness, and reliability.\n\nThis guide demonstrates how to use Wagmi to interact with and deploy smart contracts to Polkadot Hub, providing a seamless frontend integration for your dApps."} +{"page_id": "smart-contracts-libraries-wagmi", "page_title": "Wagmi for Polkadot Hub Smart Contracts", "index": 1, "depth": 2, "title": "Set Up the Project", "anchor": "set-up-the-project", "start_char": 437, "end_char": 668, "estimated_token_count": 55, "token_estimator": "heuristic-v1", "text": "## Set Up the Project\n\nTo start working with Wagmi, create a new React project and initialize it by running the following commands in your terminal:\n\n```bash\nnpx create-next-app@latest wagmi-polkadot-hub\ncd wagmi-polkadot-hub\n```"} +{"page_id": "smart-contracts-libraries-wagmi", "page_title": "Wagmi for Polkadot Hub Smart Contracts", "index": 2, "depth": 2, "title": "Install Dependencies", "anchor": "install-dependencies", "start_char": 668, "end_char": 793, "estimated_token_count": 28, "token_estimator": "heuristic-v1", "text": "## Install Dependencies\n\nInstall Wagmi and its peer dependencies:\n\n```bash\nnpm install wagmi viem @tanstack/react-query\n```"} +{"page_id": "smart-contracts-libraries-wagmi", "page_title": "Wagmi for Polkadot Hub Smart Contracts", "index": 3, "depth": 2, "title": "Configure Wagmi for Polkadot Hub", "anchor": "configure-wagmi-for-polkadot-hub", "start_char": 793, "end_char": 2527, "estimated_token_count": 392, "token_estimator": "heuristic-v1", "text": "## Configure Wagmi for Polkadot Hub\n\nCreate a configuration file to initialize Wagmi with Polkadot Hub. In your project, create a file named `src/lib/wagmi.ts` and add the code below. Be sure to replace `INSERT_RPC_URL`, `INSERT_CHAIN_ID`, `INSERT_CHAIN_NAME`, `INSERT_NETWORK_NAME`, `INSERT_CHAIN_DECIMALS`, `INSERT_CURRENCY_NAME`, and `INSERT_CURRENCY_SYMBOL` with your specific values.\n\n```typescript title=\"app/lib/wagmi.ts\"\nimport { http, createConfig } from 'wagmi'\n\n// Configure the Polkadot Hub chain\nconst assetHub = {\n id: INSERT_CHAIN_ID,\n name: 'INSERT_CHAIN_NAME',\n network: 'INSERT_NETWORK_NAME',\n nativeCurrency: {\n decimals: INSERT_CHAIN_DECIMALS,\n name: 'INSERT_CURRENCY_NAME',\n symbol: 'INSERT_CURRENCY_SYMBOL',\n },\n rpcUrls: {\n default: {\n http: ['INSERT_RPC_URL'],\n },\n },\n} as const;\n\n// Create Wagmi config\nexport const config = createConfig({\n chains: [assetHub],\n transports: {\n [assetHub.id]: http(),\n },\n})\n```\n\n??? code \"Example Polkadot Hub TestNet Configuration\"\n\n ```typescript title=\"src/lib/wagmi.ts\"\n import { http, createConfig } from 'wagmi';\n\n // Configure the Polkadot Hub chain\n const assetHub = {\n id: 420420422,\n name: 'polkadot-hub-testnet',\n network: 'polkadot-hub-testnet',\n nativeCurrency: {\n decimals: 18,\n name: 'PAS',\n symbol: 'PAS',\n },\n rpcUrls: {\n default: {\n http: ['https://testnet-passet-hub-eth-rpc.polkadot.io'], // TODO: change to paseo asset hub once ready\n },\n },\n } as const;\n\n // Create wagmi config\n export const config = createConfig({\n chains: [assetHub],\n transports: {\n [assetHub.id]: http(),\n },\n });\n ```"} +{"page_id": "smart-contracts-libraries-wagmi", "page_title": "Wagmi for Polkadot Hub Smart Contracts", "index": 4, "depth": 2, "title": "Set Up the Wagmi Provider", "anchor": "set-up-the-wagmi-provider", "start_char": 2527, "end_char": 3571, "estimated_token_count": 263, "token_estimator": "heuristic-v1", "text": "## Set Up the Wagmi Provider\n\nTo enable Wagmi in your React application, you need to wrap your app with the [`WagmiProvider`](https://wagmi.sh/react/api/WagmiProvider#wagmiprovider){target=\\_blank}. Update your `app/layout.tsx` file (for Next.js app router) with the following code:\n\n```typescript title=\"app/layout.tsx\"\n// For app router (src/app/layout.tsx)\n\"use client\";\n\nimport { WagmiProvider } from \"wagmi\";\nimport { QueryClient, QueryClientProvider } from \"@tanstack/react-query\";\nimport { config } from \"./lib/wagmi\";\n\n// Create a query client\nconst queryClient = new QueryClient();\n\nexport default function RootLayout({\n children,\n}: {\n children: React.ReactNode;\n}) {\n return (\n \n \n \n \n {children}\n \n \n \n \n );\n}\n\n```\n\n!!!note\n If you are using a Next.js pages router, you should modify the `src/pages/_app.tsx` instead."} +{"page_id": "smart-contracts-libraries-wagmi", "page_title": "Wagmi for Polkadot Hub Smart Contracts", "index": 5, "depth": 2, "title": "Connect a Wallet", "anchor": "connect-a-wallet", "start_char": 3571, "end_char": 5022, "estimated_token_count": 367, "token_estimator": "heuristic-v1", "text": "## Connect a Wallet\n\nCreate a component to connect wallets to your dApp. Create a file named `app/components/ConnectWallet.tsx`:\n\n```typescript title=\"app/components/ConnectWallet.tsx\"\n\"use client\";\n\nimport React from \"react\";\nimport { useConnect, useAccount, useDisconnect } from \"wagmi\";\nimport { injected } from \"wagmi/connectors\";\n\nexport function ConnectWallet() {\n const { connect } = useConnect();\n const { address, isConnected } = useAccount();\n const { disconnect } = useDisconnect();\n\n if (isConnected) {\n return (\n
\n
Connected to {address}
\n \n
\n );\n }\n\n return (\n \n );\n}\n\n```\n\nThis component uses the following React hooks:\n\n- **[`useConnect`](https://wagmi.sh/react/api/hooks/useConnect#useconnect){target=\\_blank}**: Provides functions and state for connecting the user's wallet to your dApp. The `connect` function initiates the connection flow with the specified connector.\n- **[`useDisconnect`](https://wagmi.sh/react/api/hooks/useDisconnect#usedisconnect){target=\\_blank}**: Provides a function to disconnect the currently connected wallet.\n- **[`useAccount`](https://wagmi.sh/react/api/hooks/useAccount#useaccount){target=\\_blank}**: Returns data about the connected account, including the address and connection status."} +{"page_id": "smart-contracts-libraries-wagmi", "page_title": "Wagmi for Polkadot Hub Smart Contracts", "index": 6, "depth": 2, "title": "Fetch Blockchain Data", "anchor": "fetch-blockchain-data", "start_char": 5022, "end_char": 6502, "estimated_token_count": 359, "token_estimator": "heuristic-v1", "text": "## Fetch Blockchain Data\n\nWagmi provides various hooks to fetch blockchain data. Here's an example component that demonstrates some of these hooks:\n\n```typescript title=\"app/components/BlockchainInfo.tsx\"\n\"use client\";\n\nimport { useBlockNumber, useBalance, useAccount } from \"wagmi\";\n\nexport function BlockchainInfo() {\n const { address } = useAccount();\n // Get the latest block number\n const { data: blockNumber } = useBlockNumber({ watch: true });\n\n // Get balance for the connected wallet\n const { data: balance } = useBalance({\n address,\n });\n\n return (\n
\n

Blockchain Information

\n
\n

Current Block: {blockNumber?.toString() || \"Loading...\"}

\n\n {address && balance && (\n

\n Balance:{\" \"}\n {(\n BigInt(balance.value) / BigInt(10 ** balance.decimals)\n ).toLocaleString()}{\" \"}\n {balance.symbol}\n

\n )}\n
\n
\n );\n}\n\n```\n\nThis component uses the following React hooks:\n\n- **[`useBlockNumber`](https://wagmi.sh/react/api/hooks/useBlockNumber#useBlockNumber){target=\\_blank}**: Fetches the current block number of the connected chain. The `watch` parameter enables real-time updates when new blocks are mined.\n- **[`useBalance`](https://wagmi.sh/react/api/hooks/useBalance#useBalance){target=\\_blank}**: Retrieves the native token balance for a specified address, including value, symbol, and decimals information."} +{"page_id": "smart-contracts-libraries-wagmi", "page_title": "Wagmi for Polkadot Hub Smart Contracts", "index": 7, "depth": 2, "title": "Interact with Deployed Contract", "anchor": "interact-with-deployed-contract", "start_char": 6502, "end_char": 10941, "estimated_token_count": 982, "token_estimator": "heuristic-v1", "text": "## Interact with Deployed Contract\n\nThis guide uses a simple Storage contract already deployed to the Polkadot Hub TestNet. The code of that contract is:\n\n??? code \"Storage.sol\"\n\n ```solidity title=\"Storage.sol\"\n //SPDX-License-Identifier: MIT\n\n // Solidity files have to start with this pragma.\n // It will be used by the Solidity compiler to validate its version.\n pragma solidity ^0.8.9;\n\n contract Storage {\n // Public state variable to store a number\n uint256 public storedNumber;\n\n /**\n * Updates the stored number.\n *\n * The `public` modifier allows anyone to call this function.\n *\n * @param _newNumber - The new value to store.\n */\n function setNumber(uint256 _newNumber) public {\n storedNumber = _newNumber;\n }\n }\n ```\n\nCreate a component to interact with your deployed contract. Create a file named `components/StorageContract.tsx`:\n\n```typescript title=\"app/components/StorageContract.tsx\"\n\"use client\";\n\nimport { useState } from \"react\";\nimport {\n useReadContract,\n useWriteContract,\n useWaitForTransactionReceipt,\n} from \"wagmi\";\n\nconst CONTRACT_ADDRESS =\n \"INSERT_CONTRACT_ADDRESS\" as `0x${string}`;\n\nexport function StorageContract() {\n const [number, setNumber] = useState(\"42\");\n\n // Contract ABI (should match your compiled contract)\n const abi = [\n {\n inputs: [],\n name: \"storedNumber\",\n outputs: [{ internalType: \"uint256\", name: \"\", type: \"uint256\" }],\n stateMutability: \"view\",\n type: \"function\",\n },\n {\n inputs: [\n { internalType: \"uint256\", name: \"_newNumber\", type: \"uint256\" },\n ],\n name: \"setNumber\",\n outputs: [],\n stateMutability: \"nonpayable\",\n type: \"function\",\n },\n ];\n\n // Read the current stored number\n const { data: storedNumber, refetch } = useReadContract({\n address: CONTRACT_ADDRESS,\n abi,\n functionName: \"storedNumber\",\n });\n\n // Write to the contract\n const { writeContract, data: hash, error, isPending } = useWriteContract();\n\n // Wait for transaction to be mined\n const { isLoading: isConfirming, isSuccess: isConfirmed } =\n useWaitForTransactionReceipt({\n hash,\n });\n\n const handleSetNumber = () => {\n writeContract({\n address: CONTRACT_ADDRESS,\n abi,\n functionName: \"setNumber\",\n args: [BigInt(number)],\n });\n };\n\n return (\n
\n

Storage Contract Interaction

\n
\n

Contract Address: {CONTRACT_ADDRESS}

\n

Current Stored Number: {storedNumber?.toString() || \"Loading...\"}

\n
\n\n
\n setNumber(e.target.value)}\n disabled={isPending || isConfirming}\n />\n \n
\n\n {error &&
Error: {error.message}
}\n\n {isConfirmed && (\n
\n Successfully updated!{\" \"}\n \n
\n )}\n
\n );\n}\n\n```\n\nThis component demonstrates how to interact with a smart contract using Wagmi's hooks:\n\n- **[`useReadContract`](https://wagmi.sh/react/api/hooks/useReadContract#useReadContract){target=\\_blank}**: Calls a read-only function on your smart contract to retrieve data without modifying the blockchain state.\n- **[`useWriteContract`](https://wagmi.sh/react/api/hooks/useWriteContract#useWriteContract){target=\\_blank}**: Calls a state-modifying function on your smart contract, which requires a transaction to be signed and sent.\n- **[`useWaitForTransactionReceipt`](https://wagmi.sh/react/api/hooks/useWaitForTransactionReceipt#useWaitForTransactionReceipt){target=\\_blank}**: Tracks the status of a transaction after it's been submitted, allowing you to know when it's been confirmed.\n\nThe component also includes proper state handling to:\n\n- Show the current value stored in the contract.\n- Allow users to input a new value.\n- Display transaction status (pending, confirming, or completed).\n- Handle errors.\n- Provide feedback when a transaction is successful."} +{"page_id": "smart-contracts-libraries-wagmi", "page_title": "Wagmi for Polkadot Hub Smart Contracts", "index": 8, "depth": 2, "title": "Integrate Components", "anchor": "integrate-components", "start_char": 10941, "end_char": 11693, "estimated_token_count": 183, "token_estimator": "heuristic-v1", "text": "## Integrate Components\n\nUpdate your main page to combine all the components. Create or update the file `src/app/page.tsx`:\n\n```typescript title=\"src/app/page.tsx\"\n\"use client\";\n\nimport { BlockchainInfo } from \"./components/BlockchainInfo\";\nimport { ConnectWallet } from \"./components/ConnectWallet\";\nimport { StorageContract } from \"./components/StorageContract\";\nimport { useAccount } from \"wagmi\";\n\nexport default function Home() {\n const { isConnected } = useAccount();\n\n return (\n
\n

Wagmi - Polkadot Hub Smart Contracts

\n \n {isConnected ? : Connect your wallet}\n {isConnected ? : Connect your wallet}\n
\n );\n}\n\n```"} +{"page_id": "smart-contracts-libraries-wagmi", "page_title": "Wagmi for Polkadot Hub Smart Contracts", "index": 9, "depth": 2, "title": "Where to Go Next", "anchor": "where-to-go-next", "start_char": 11693, "end_char": 13336, "estimated_token_count": 512, "token_estimator": "heuristic-v1", "text": "## Where to Go Next\n\nNow that you have the foundational knowledge to use Wagmi with Polkadot Hub, consider exploring:\n\n
\n\n- External __Advanced Wagmi__\n\n ---\n\n Explore Wagmi's advanced features:\n\n
    \n
  • [:octicons-arrow-right-24: Watch Contract Events](https://wagmi.sh/core/api/actions/watchContractEvent#eventname){target=\\_blank}
    • \n
  • [:octicons-arrow-right-24: Different Transports](https://wagmi.sh/react/api/transports){target=\\_blank}
    • \n
  • [:octicons-arrow-right-24: Actions](https://wagmi.sh/react/api/actions){target=\\_blank}
    • \n
\n\n- External __Wallet Integration__\n\n ---\n\n Connect your dApp with popular wallet providers:\n\n
    \n
  • [:octicons-arrow-right-24: MetaMask](https://wagmi.sh/core/api/connectors/metaMask){target=\\_blank}
    • \n
  • [:octicons-arrow-right-24: WalletConnect](https://wagmi.sh/core/api/connectors/walletConnect){target=\\_blank}
    • \n
  • [:octicons-arrow-right-24: Coinbase Wallet](https://wagmi.sh/core/api/connectors/coinbaseWallet){target=\\_blank}
    • \n
\n\n- External __Testing & Development__\n\n ---\n\n Enhance your development workflow:\n\n
    \n
  • [:octicons-arrow-right-24: Test Suite](https://wagmi.sh/dev/contributing#_6-running-the-test-suite){target=\\_blank}
    • \n
  • [:octicons-arrow-right-24: Dev Playground](https://wagmi.sh/dev/contributing#_5-running-the-dev-playgrounds){target=\\_blank}
    • \n
\n
"} {"page_id": "smart-contracts-libraries-web3-js", "page_title": "Web3.js", "index": 0, "depth": 2, "title": "Introduction", "anchor": "introduction", "start_char": 468, "end_char": 1027, "estimated_token_count": 102, "token_estimator": "heuristic-v1", "text": "## Introduction\n\nInteracting with blockchains typically requires an interface between your application and the network. [Web3.js](https://web3js.readthedocs.io/){target=\\_blank} offers this interface through a comprehensive collection of libraries, facilitating seamless interaction with the nodes using HTTP or WebSocket protocols. This guide illustrates how to utilize Web3.js specifically for interactions with Polkadot Hub.\n\nThis guide is intended for developers who are familiar with JavaScript and want to interact with the Polkadot Hub using Web3.js."} {"page_id": "smart-contracts-libraries-web3-js", "page_title": "Web3.js", "index": 1, "depth": 2, "title": "Prerequisites", "anchor": "prerequisites", "start_char": 1027, "end_char": 1383, "estimated_token_count": 110, "token_estimator": "heuristic-v1", "text": "## Prerequisites\n\nBefore getting started, ensure you have the following installed:\n\n- **Node.js**: v22.13.1 or later, check the [Node.js installation guide](https://nodejs.org/en/download/current/){target=\\_blank}.\n- **npm**: v6.13.4 or later (comes bundled with Node.js).\n- **Solidity**: This guide uses Solidity `^0.8.9` for smart contract development."} {"page_id": "smart-contracts-libraries-web3-js", "page_title": "Web3.js", "index": 2, "depth": 2, "title": "Project Structure", "anchor": "project-structure", "start_char": 1383, "end_char": 1868, "estimated_token_count": 136, "token_estimator": "heuristic-v1", "text": "## Project Structure\n\nThis project organizes contracts, scripts, and compiled artifacts for easy development and deployment.\n\n```text title=\"Web3.js Polkadot Hub\"\nweb3js-project\n├── contracts\n│ ├── Storage.sol\n├── scripts\n│ ├── connectToProvider.js\n│ ├── fetchLastBlock.js\n│ ├── compile.js\n│ ├── deploy.js\n│ ├── updateStorage.js\n├── abis\n│ ├── Storage.json\n├── artifacts\n│ ├── Storage.polkavm\n├── node_modules/\n├── package.json\n├── package-lock.json\n└── README.md\n```"}