Update and add doc

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

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.

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;
 }

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.
  */