Change sponsored transactions dApp to use grpc

sponsoredTransactions/frontend/CHANGELOG.md

@@ -1,5 +1,9 @@
 ## Unreleased changes
 
+## 2.1.0
+
+- Migrate dApp from using deprecated JSON-RPC client to new gRPC client.
+
 ## 2.0.0
 
 - Remove tab to register public key 

sponsoredTransactions/frontend/package.json

@@ -1,7 +1,7 @@
 {
     "name": "sponsored-transactions",
     "packageManager": "yarn@3.2.0",
-    "version": "2.0.0",
+    "version": "2.1.0",
     "license": "Apache-2.0",
     "engines": {
         "node": ">=16.x"

sponsoredTransactions/frontend/src/SponsoredTransactions.tsx

@@ -3,9 +3,15 @@
 /* eslint-disable consistent-return */
 import React, { useEffect, useState, ChangeEvent, useCallback } from 'react';
 import Switch from 'react-switch';
-import { toBuffer, serializeTypeValue, deserializeTypeValue } from '@concordium/web-sdk';
 import {
-    withJsonRpcClient,
+    toBuffer,
+    serializeTypeValue,
+    deserializeTypeValue,
+    AccountAddress,
+    ConcordiumGRPCClient,
+} from '@concordium/web-sdk';
+import {
+    useGrpcClient,
     WalletConnectionProps,
     useConnection,
     useConnect,
@@ -15,6 +21,7 @@ import { version } from '../package.json';
 
 import { submitUpdateOperator, submitTransfer, mint } from './utils';
 import {
+    STAGENET,
     SPONSORED_TX_CONTRACT_NAME,
     NONCE_OF_PARAMETER_SCHEMA,
     NONCE_OF_RETURN_VALUE_SCHEMA,
@@ -219,14 +226,14 @@ async function generateUpdateOperatorMessage(
 }
 
 // eslint-disable-next-line  @typescript-eslint/no-explicit-any
-async function getPublicKey(rpcClient: any, account: string) {
-    const res = await rpcClient.getAccountInfo(account);
+async function getPublicKey(rpcClient: ConcordiumGRPCClient, account: string) {
+    const res = await rpcClient.getAccountInfo(new AccountAddress(account));
     const publicKey = res?.accountCredentials[0].value.contents.credentialPublicKeys.keys[0].verifyKey;
     return publicKey;
 }
 
 // eslint-disable-next-line  @typescript-eslint/no-explicit-any
-async function getNonceOf(rpcClient: any, account: string) {
+async function getNonceOf(rpcClient: ConcordiumGRPCClient, account: string) {
     const param = serializeTypeValue(
         {
             queries: [
@@ -240,7 +247,7 @@ async function getNonceOf(rpcClient: any, account: string) {
 
     const res = await rpcClient.invokeContract({
         method: `${SPONSORED_TX_CONTRACT_NAME}.nonceOf`,
-        contract: { index: Number(process.env.SMART_CONTRACT_INDEX), subindex: CONTRACT_SUB_INDEX },
+        contract: { index: BigInt(Number(process.env.SMART_CONTRACT_INDEX)), subindex: CONTRACT_SUB_INDEX },
         parameter: param,
     });
 
@@ -306,6 +313,7 @@ export default function SponsoredTransactions(props: WalletConnectionProps) {
 
     const { connection, setConnection, account, genesisHash } = useConnection(connectedAccounts, genesisHashes);
     const { connect, isConnecting, connectError } = useConnect(activeConnector, setConnection);
+    const grpcClient = useGrpcClient(STAGENET);
 
     const [publicKeyError, setPublicKeyError] = useState('');
     const [nextNonceError, setNextNonceError] = useState('');
@@ -359,10 +367,11 @@ export default function SponsoredTransactions(props: WalletConnectionProps) {
 
     useEffect(() => {
         // Refresh next nonce periodically.
-        if (connection && account) {
+        if (grpcClient && account) {
             const interval = setInterval(() => {
                 console.log('refreshing');
-                withJsonRpcClient(connection, (rpcClient) => getNonceOf(rpcClient, account))
+
+                getNonceOf(grpcClient, account)
                     .then((nonceValue) => {
                         if (nonceValue !== undefined) {
                             setNextNonce(nonceValue);
@@ -376,12 +385,12 @@ export default function SponsoredTransactions(props: WalletConnectionProps) {
             }, REFRESH_INTERVAL.asMilliseconds());
             return () => clearInterval(interval);
         }
-    }, [connection, account]);
+    }, [grpcClient, account]);
 
     useEffect(() => {
         // Get next nonce record from smart contract.
-        if (connection && account) {
-            withJsonRpcClient(connection, (rpcClient) => getNonceOf(rpcClient, account))
+        if (grpcClient && account) {
+            getNonceOf(grpcClient, account)
                 .then((nonceValue) => {
                     if (nonceValue !== undefined) {
                         setNextNonce(nonceValue);
@@ -393,12 +402,12 @@ export default function SponsoredTransactions(props: WalletConnectionProps) {
                     setNextNonce(0);
                 });
         }
-    }, [connection, account]);
+    }, [grpcClient, account]);
 
     useEffect(() => {
         // Get publicKey record from chain.
-        if (connection && account) {
-            withJsonRpcClient(connection, (rpcClient) => getPublicKey(rpcClient, account))
+        if (grpcClient && account) {
+            getPublicKey(grpcClient, account)
                 .then((publicKey) => {
                     if (publicKey !== undefined) {
                         setAccountInfoPublicKey(publicKey);
@@ -410,7 +419,7 @@ export default function SponsoredTransactions(props: WalletConnectionProps) {
                     setAccountInfoPublicKey('');
                 });
         }
-    }, [connection, account]);
+    }, [grpcClient, account]);
 
     const [txHash, setTxHash] = useState('');
     const [transactionError, setTransactionError] = useState('');

sponsoredTransactions/frontend/src/constants.ts

@@ -1,13 +1,16 @@
-import { BrowserWalletConnector, ephemeralConnectorType, WalletConnectConnector } from '@concordium/react-components';
+import {
+    BrowserWalletConnector,
+    ephemeralConnectorType,
+    Network,
+    WalletConnectConnector,
+} from '@concordium/react-components';
 import { SignClientTypes } from '@walletconnect/types';
 import moment from 'moment';
 
 export const VERIFIER_URL = '/api';
 
 export const REFRESH_INTERVAL = moment.duration(5, 'seconds');
 
-export const TESTNET_GENESIS_BLOCK_HASH = '4221332d34e1694168c2a0c0b3fd0f273809612cb13d000d5c2e00e85f50f796';
-
 export const SPONSORED_TX_CONTRACT_NAME = 'cis3_nft';
 
 export const CONTRACT_SUB_INDEX = 0n;
@@ -37,6 +40,16 @@ const WALLET_CONNECT_OPTS: SignClientTypes.Options = {
     },
 };
 
+export const STAGENET: Network = {
+    name: 'stagenet',
+    genesisHash: '38bf770b4c247f09e1b62982bb71000c516480c5a2c5214dadac6da4b1ad50e5',
+    grpcOpts: {
+        baseUrl: 'https://grpc.stagenet.concordium.com:20000',
+    },
+    jsonRpcUrl: 'https://json-rpc.stagenet.concordium.com/',
+    ccdScanBaseUrl: 'https://stagenet.ccdscan.io/',
+};
+
 export const BROWSER_WALLET = ephemeralConnectorType(BrowserWalletConnector.create);
 export const WALLET_CONNECT = ephemeralConnectorType(
     WalletConnectConnector.create.bind(undefined, WALLET_CONNECT_OPTS)