diff --git a/packages/react-components/CHANGELOG.md b/packages/react-components/CHANGELOG.md index ac19880..78610cb 100644 --- a/packages/react-components/CHANGELOG.md +++ b/packages/react-components/CHANGELOG.md @@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file. The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). +## [Unreleased] + +### Added + +- Hook `useContractSchemaRpc` for fetching the schema of a smart contract from the chain. + ## [0.5.1] - 2024-03-22 - Dependency on `@concordium/wallet-connectors` bumped to v0.5.1+. @@ -38,10 +44,6 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - `useContractSelector`: Fix docstring of `rpc` parameter. -### Added - -- Hook `useContractSchemaRpc` for fetching the schema of a smart contract from the chain. - ## [0.3.0] - 2023-06-04 ### Added diff --git a/packages/react-components/README.md b/packages/react-components/README.md index 61165ef..e64a368 100644 --- a/packages/react-components/README.md +++ b/packages/react-components/README.md @@ -123,7 +123,7 @@ _Example: Look up the info of a smart contract by its index specified in an inpu ```typescript jsx import React, { useState } from 'react'; -import { Network, useContractSelector, WalletConnection } from '@concordium/react-components'; +import { Network, useContractSelector } from '@concordium/react-components'; import { ConcordiumGRPCClient } from '@concordium/web-sdk'; interface Props { @@ -143,6 +143,34 @@ export function ContractStuff({ rpc }: Props) { Use the hook [`useGrpcClient`](#usegrpcclient) below to obtain a `ConcordiumGRPCClient` instance. See [the sample dApp](../../samples/contractupdate/src/Root.tsx) for a complete example. +### [`useContractSchemaRpc`](./src/useContractSchemaRpc.ts) + +Hook for resolving the schema of a smart contract from the chain. +The schema is used to construct the payload of invocations of the smart contract. + +_Example: Fetch schema of a provided smart contract_ + +```typescript jsx +import React, { useState } from 'react'; +import { Network, useContractSchemaRpc, Info, Schema } from '@concordium/react-components'; +import { ConcordiumGRPCClient } from '@concordium/web-sdk'; + +interface Props { + rpc: ConcordiumGRPCClient; + contract: Info; +} + +export function ContractSchemaStuff({ rpc }: Props) { + const [schemaRpcError, setSchemaRpcError] = useState(''); + const schemaRpcResult = useContractSchemaRpc(rpc, contract, setSchemaRpcError); + const schema: Schema = schemaRpcResult?.schema; + // ... +} +``` + +Use the hook [`useGrpcClient`](#usegrpcclient) below to obtain a `ConcordiumGRPCClient` instance. +See [the sample dApp](../../samples/contractupdate/src/Root.tsx) for a complete example. + ### [`useGrpcClient`](./src/useGrpcClient.ts) React hook that obtains a gRPC Web client for interacting with a node on the appropriate network. diff --git a/packages/react-components/src/useContractSchemaRpc.ts b/packages/react-components/src/useContractSchemaRpc.ts index 31f6418..685fcbe 100644 --- a/packages/react-components/src/useContractSchemaRpc.ts +++ b/packages/react-components/src/useContractSchemaRpc.ts @@ -45,7 +45,7 @@ function findSchema(m: WebAssembly.Module, moduleVersion: 0 | 1): SchemaRpcResul } async function fetchSchema(rpc: ConcordiumGRPCClient, contract: Info) { - const { version, source } = await rpc.getModuleSource(new ModuleReference(contract.moduleRef)); + const { version, source } = await rpc.getModuleSource(ModuleReference.fromHexString(contract.moduleRef)); if (source.length === 0) { throw new Error('module source is empty'); } @@ -73,6 +73,6 @@ export function useContractSchemaRpc(rpc: ConcordiumGRPCClient, contract: Info, .catch((err) => { setError(err); }); - }, [contract, rpc]); + }, [rpc, contract]); return result; } diff --git a/packages/react-components/src/useContractSelector.ts b/packages/react-components/src/useContractSelector.ts index 17cb72d..8eff5c8 100644 --- a/packages/react-components/src/useContractSelector.ts +++ b/packages/react-components/src/useContractSelector.ts @@ -104,7 +104,7 @@ export interface ContractSelector { /** * React hook to look up a smart contract's data and state from its index. - * @param rpc gRPC client through which to perform the lookup. The JSON-RPC client is supported for backwards compatibility only. + * @param rpc gRPC client through which to perform the lookup. * @param input The index of the contract to look up. * @return The resolved contract and related state. */