Practical overview
When it fits
Use it when an existing React frontend needs reusable Substrate connection, account, balance or ink! contract functionality; its documented provider-and-hook setup is designed to be added to an app.
Who it is for
- React developers building Substrate-connected applications.
- Frontend teams integrating ink! contracts and managing contract metadata across deployments.
Documented uses
- Connect an application to a Substrate-based network and expose connection and account state to components.
- Read balances, make transfers and build contract queries or transactions with helper utilities.
- Organize contract metadata and deployment addresses for retrieval through a hook.
- Use typed contract integrations with typechain-polkadot.
Requirements & limits
The library is identified as open source under GPL-3.0 and is distributed through the npm registry, with pnpm, npm and yarn installation documented.
- It is a frontend library, not the separate ink!athon boilerplate for starting a dApp from scratch.
- The provider needs a default chain; registry use also needs deployment metadata such as ABI and address.
- Typed-contract setup lists additional dependencies: @727-ventures/typechain-types, bn.js and @types/bn.js.
- The README describes access to the underlying polkadot{.js} API alongside the library's abstractions.
Check current requirements in the official documentation. Source-based guidance does not mean OpenViST has run or independently tested this project.
Add useInkathon to an existing React app
Install the library, provide its context to the app, and access its connection and API hook.
Before you start
- An existing React application.
- A package manager: pnpm, npm or yarn.
- A default chain value for the provider.
Steps
Install @scio-labs/use-inkathon using pnpm, npm or yarn.
Import UseInkathonProvider and a chain value from the package.
Wrap the app or parent component in UseInkathonProvider, setting appName and defaultChain.
Import and call useInkathon in a component to access values such as api, connect, activeChain and activeAccount.
Expected outcome
The app's components can use the library's provider context and primary connection/API hook.
Guide limitations
- This setup does not document deploying a contract or implementing a complete dApp.
- The guide describes an existing app, not a from-scratch boilerplate.
Register contract deployments for hook access
Define contract deployment metadata and pass it to the provider so a component can retrieve a registered contract.
Before you start
- The useInkathon package in a React project.
- Contract metadata and deployment addresses for the relevant networks.
- An async getDeployments function returning SubstrateDeployment entries.
Steps
Create an async getDeployments function that returns contract deployment entries with contractId, networkId, ABI and address.
Pass the function result as the deployments prop to UseInkathonProvider.
Use useRegisteredContract with the contract identifier in a component to access the contract.
Expected outcome
Contract metadata and deployment addresses can be defined centrally and retrieved through the registered-contract hook.
Guide limitations
- The documented example illustrates registry wiring; it does not cover contract deployment.
- The README points to the ink!athon boilerplate for an advanced example of dynamically importing metadata.
Sources & review
Source record details
- Source availability
- Active
- Sources checked
- 9 October 2026
- Original website title
- scio-labs/use-inkathon · Official homepage title · retained in its source language