From 827c3f2a6d5b78a9f77b42adbe18a25724b1355b Mon Sep 17 00:00:00 2001 From: Doris Benda Date: Tue, 15 Aug 2023 14:16:16 +0200 Subject: [PATCH 1/2] Change dApp to use grpc --- sponsoredTransactions/frontend/CHANGELOG.md | 4 ++ sponsoredTransactions/frontend/package.json | 2 +- .../frontend/src/SponsoredTransactions.tsx | 39 ++++++++++++------- .../frontend/src/constants.ts | 19 +++++++-- 4 files changed, 45 insertions(+), 19 deletions(-) diff --git a/sponsoredTransactions/frontend/CHANGELOG.md b/sponsoredTransactions/frontend/CHANGELOG.md index 73b89de3..3801d82d 100644 --- a/sponsoredTransactions/frontend/CHANGELOG.md +++ b/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 diff --git a/sponsoredTransactions/frontend/package.json b/sponsoredTransactions/frontend/package.json index bce4d667..f5379a13 100644 --- a/sponsoredTransactions/frontend/package.json +++ b/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" diff --git a/sponsoredTransactions/frontend/src/SponsoredTransactions.tsx b/sponsoredTransactions/frontend/src/SponsoredTransactions.tsx index 8198105d..9033e225 100644 --- a/sponsoredTransactions/frontend/src/SponsoredTransactions.tsx +++ b/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(''); diff --git a/sponsoredTransactions/frontend/src/constants.ts b/sponsoredTransactions/frontend/src/constants.ts index 8bb80405..ac772571 100644 --- a/sponsoredTransactions/frontend/src/constants.ts +++ b/sponsoredTransactions/frontend/src/constants.ts @@ -1,4 +1,9 @@ -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'; @@ -6,8 +11,6 @@ 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) From ecf61a625510aec466f39edcd6bd71aa8e5133cc Mon Sep 17 00:00:00 2001 From: Doris Benda Date: Wed, 16 Aug 2023 12:38:04 +0200 Subject: [PATCH 2/2] Remove unused linting comments --- sponsoredTransactions/frontend/CHANGELOG.md | 2 +- sponsoredTransactions/frontend/package.json | 2 +- sponsoredTransactions/frontend/src/SponsoredTransactions.tsx | 2 -- 3 files changed, 2 insertions(+), 4 deletions(-) diff --git a/sponsoredTransactions/frontend/CHANGELOG.md b/sponsoredTransactions/frontend/CHANGELOG.md index 3801d82d..4cd0a1b5 100644 --- a/sponsoredTransactions/frontend/CHANGELOG.md +++ b/sponsoredTransactions/frontend/CHANGELOG.md @@ -1,6 +1,6 @@ ## Unreleased changes -## 2.1.0 +## 2.0.1 - Migrate dApp from using deprecated JSON-RPC client to new gRPC client. diff --git a/sponsoredTransactions/frontend/package.json b/sponsoredTransactions/frontend/package.json index f5379a13..8e771d39 100644 --- a/sponsoredTransactions/frontend/package.json +++ b/sponsoredTransactions/frontend/package.json @@ -1,7 +1,7 @@ { "name": "sponsored-transactions", "packageManager": "yarn@3.2.0", - "version": "2.1.0", + "version": "2.0.1", "license": "Apache-2.0", "engines": { "node": ">=16.x" diff --git a/sponsoredTransactions/frontend/src/SponsoredTransactions.tsx b/sponsoredTransactions/frontend/src/SponsoredTransactions.tsx index 9033e225..42613871 100644 --- a/sponsoredTransactions/frontend/src/SponsoredTransactions.tsx +++ b/sponsoredTransactions/frontend/src/SponsoredTransactions.tsx @@ -225,14 +225,12 @@ async function generateUpdateOperatorMessage( return serializedMessage; } -// eslint-disable-next-line @typescript-eslint/no-explicit-any 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: ConcordiumGRPCClient, account: string) { const param = serializeTypeValue( {