Merge pull request #57 from scio-labs/feat/27-typechain-integration

Feat/27 typechain integration

.changeset/spicy-geckos-love.md

@@ -0,0 +1,5 @@
+---
+'@scio-labs/use-inkathon': minor
+---
+
+Add support for type-safe contract-interactions via `typechain-polkadot`. A new hook `useRegisteredTypedContract` enables easy instantiation with automatic assignment of api instance, network-dependant contract address, and the connected signer. Currently, only queries (read-only) are supported with those instances. – See README.md for more information.

README.md

@@ -26,8 +26,9 @@ Other projects include:
 
 1. [Getting started 🚀](#getting-started-)
 2. [Features ✨](#features-)
-3. [Contract Registry 🗳️](#contract-registry-️)
+3. [Contract Registry 🗳️](#contract-registry-️%EF%B8%8F)
    1. [How it works](#how-it-works)
+   2. [Typed Contracts](#typed-contracts)
 4. [Examples 📚](#examples-)
 5. [Package Development 🛠](#package-development-)
 
@@ -87,6 +88,7 @@ At its core, this library serves as a **wrapper for polkadot{.js}, potentially s
   - [`decodeOutput`](https://scio-labs.github.io/use-inkathon/functions/decodeOutput.html)
 - Constants definitions for Substrate-based chains, wallets, and assets
 - Works multichain with live & dynamic chain-switching out of the box
+- Full contract-level type-safety with [`typechain-polkadot`](https://github.com/Brushfam/typechain-polkadot) via [`useRegisteredTypedContract`](https://scio-labs.github.io/use-inkathon/functions/useRegisteredTypedContract.html)
 
 > [!NOTE]  
 > Checkout our [TypeDoc Documentation](https://scio-labs.github.io/use-inkathon/) for more details.
@@ -141,6 +143,25 @@ Then access the contract as above:
 const { contract } = useRegisteredContract('greeter')
 ```
 
+### Typed Contracts
+
+> [!NOTE]  
+> Make sure to also install `@727-ventures/typechain-types`, `bn.js`, and `@types/bn.js` as dependencies in your project. Find a complete setup & usage example in the [`ink!athon boilerplate`](https://github.com/scio-labs/inkathon).
+
+If you are using [`typechain-polkadot`](https://github.com/Brushfam/typechain-polkadot) to generate type-safe contracts, you can use the `useRegisteredTypedContract` hook instead:
+
+```ts
+import GreeterContract from '[…]/typed-contracts/contracts/greeter'
+
+// …
+
+const { typedContract } = useRegisteredTypedContract('greeter', GreeterContract)
+const result = await typedContract.query.greet()
+```
+
+> [!IMPORTANT]  
+> Currently, only queries are supported until [typechain-polkadot#138](https://github.com/Brushfam/typechain-polkadot/pull/138) is merged. Alternatively, we're considering switching to the [`prosopo/typechain-polkadot`](https://github.com/prosopo/typechain-polkadot) fork completely.
+
 ## Examples 📚
 
 Within this repository:

package.json

@@ -83,6 +83,7 @@
     "@polkadot/api": ">=10",
     "@polkadot/api-contract": ">=10",
     "@polkadot/extension-inject": ">=0.46",
+    "@polkadot/keyring": ">=10",
     "@polkadot/types": ">=10",
     "@polkadot/util": ">=10",
     "@polkadot/util-crypto": ">=10",

src/hooks/index.ts

@@ -3,4 +3,5 @@ export * from './useBalance'
 export * from './useContract'
 export * from './usePSP22Balances'
 export * from './useRegisteredContract'
+export * from './useRegisteredTypedContract'
 // @endindex

src/hooks/useRegisteredContract.ts

@@ -4,8 +4,8 @@ import { useContract } from './useContract'
 
 /**
  * React Hook that returns a `ContractPromise` object configured with
- * the active api & chain as well as the given deployment contract id
- * which is looked up from the deployments registry.
+ * the active api & chain with the given deployment contract id which
+ * is looked up from the deployments registry.
  */
 export const useRegisteredContract = (contractId: string, networkId?: string) => {
   const { deployments, activeChain } = useInkathon()

src/hooks/useRegisteredTypedContract.ts

@@ -0,0 +1,37 @@
+import { useRegisteredContract } from '@/hooks/useRegisteredContract'
+import { useInkathon } from '@/provider'
+import { TypechainContractConstructor } from '@/types'
+import { useEffect, useState } from 'react'
+
+/**
+ * React Hook that returns a type-safe contract object by `typechain-polkadot`,
+ * configured with the active api & chain for the given deployment contract id
+ * which is looked up from the deployments registry.
+ */
+export const useRegisteredTypedContract = <T>(
+  contractId: string,
+  Contract: TypechainContractConstructor<T>,
+  networkId?: string,
+) => {
+  const { api, activeAccount } = useInkathon()
+  const registeredContract = useRegisteredContract(contractId, networkId)
+
+  const [typedContract, setTypedContract] = useState<T | undefined>(undefined)
+  useEffect(() => {
+    if (!registeredContract?.address || !activeAccount?.address || !api) {
+      setTypedContract(undefined)
+      return
+    }
+
+    // IMPORTANT: Right now, only KeyringPair is supported as signer, but as we don't have
+    //            those anyways in the frontend, we can alreaday start using the new API.
+    const typedContract = new Contract(
+      registeredContract.address.toString(),
+      activeAccount.address as any,
+      api,
+    )
+    setTypedContract(typedContract)
+  }, [registeredContract?.address, activeAccount?.address])
+
+  return { ...registeredContract, typedContract }
+}

src/types/TypechainContractConstructor.ts

@@ -0,0 +1,8 @@
+import { ApiPromise } from '@polkadot/api'
+import { KeyringPair } from '@polkadot/keyring/types'
+
+export type TypechainContractConstructor<T> = new (
+  address: string,
+  signer: KeyringPair,
+  nativeAPI: ApiPromise,
+) => T

src/types/index.ts

@@ -4,5 +4,6 @@ export * from './DeployedContract'
 export * from './SubstrateChain'
 export * from './SubstrateDeployment'
 export * from './SubstrateWallet'
+export * from './TypechainContractConstructor'
 export * from './UseInkathonProviderContext'
 // @endindex