Thx, I get following error
chunk-NTZW7WAF.js?v=861a4795:9145 Uncaught TypeError: setActiveConnectorType is not a function
at App.tsx:129:5
at commitHookEffectListMount (chunk-NTZW7WAF.js?v=861a4795:16936:34)
at commitPassiveMountOnFiber (chunk-NTZW7WAF.js?v=861a4795:18184:19)
at commitPassiveMountEffects_complete (chunk-NTZW7WAF.js?v=861a4795:18157:17)
at commitPassiveMountEffects_begin (chunk-NTZW7WAF.js?v=861a4795:18147:15)
at commitPassiveMountEffects (chunk-NTZW7WAF.js?v=861a4795:18137:11)
at flushPassiveEffectsImpl (chunk-NTZW7WAF.js?v=861a4795:19518:11)
at flushPassiveEffects (chunk-NTZW7WAF.js?v=861a4795:19475:22)
at chunk-NTZW7WAF.js?v=861a4795:19356:17
at workLoop (chunk-NTZW7WAF.js?v=861a4795:197:42)
Code for App.tsx
import { useEffect, useState } from ‘react’
import reactLogo from ‘./assets/react.svg’
import viteLogo from ‘/vite.svg’
import { parseEndpoint } from ‘./shared/util’;
import { credentials } from ‘@grpc/grpc-js’;
import ‘./App.css’
// import { ConcordiumGRPCWebClient, ContractAddress } from ‘@concordium/web-sdk’;
import {
AccountAddress,
BlockHash,
CcdAmount,
ContractAddress,
ContractContext,
ContractTraceEvent,
Energy,
Parameter,
ReceiveName,
ReturnValue,
ConcordiumGRPCWebClient,
CIS2Contract,
} from ‘@concordium/web-sdk’;
import { WalletConnectorButton } from ‘./WalletConnectorButton’;
import { Network, WalletConnection } from ‘@concordium/react-components’;
import { MAINNET, TESTNET, WalletConnectionProps, WithWalletConnector,ephemeralConnectorType, BrowserWalletConnector} from ‘@concordium/react-components’;
import { useConnect, useConnection, useGrpcClient } from ‘@concordium/react-components’;
// import { BROWSER_WALLET, WALLET_CONNECT } from ‘./config’;
const BROWSER_WALLET = ephemeralConnectorType(BrowserWalletConnector.create);
// import meow from ‘meow’;
const address =‘http://node.testnet.concordium.com’
const port = Number(20000)
// const [address, port] = parseEndpoint(cli.flags.endpoint);
const client = new ConcordiumGRPCWebClient(
address,
port,
{ timeout: 15000 }
);
console.log(client)
function App(props: WalletConnectionProps) {
const [count, setCount] = useState(0)
const { activeConnectorType, setActiveConnectorType, activeConnector, activeConnectorError, network, connectedAccounts, genesisHashes } =
props;
const { connection, setConnection, account, genesisHash } = useConnection(connectedAccounts, genesisHashes);
const { connect, isConnecting, connectError } = useConnect(activeConnector, setConnection);
function callMint() {
}
async function connectWallet() {
}
async function transferTokens() {
const tokenId = ‘00000003’; // HEX string representing a token ID defined in the contract.
const from = ‘3SfHLNkmy61ZUQkAhMvAwKj47EYDBiUPbn3wHghFD6qGr8WDGc’;
const to = ‘4GyTSko7UZ9iTeUHSLD2c4f3KR6C2nRyyNWbrFMWyC7rRLWDE9’; // An account receiver.
// const to = {address: {index: 1234n, subindex: 0n}, hookName: ‘someReceiveHookName’} // A contract receiver can be specified as such.
const tokenAmount = 1n;
const contractAddressT = ContractAddress.create(8665n, 0n);
const contract = await CIS2Contract.create(client, contractAddressT);
const transfer = {
tokenId: tokenId,
to: to,
from: from,
tokenAmount: tokenAmount,
}
// const transfer [{ from, to, tokenAmount, tokenId }, { from, to, tokenAmount, tokenId }] // Example of batch update.
const {
type:t1, // The transaction type.
payload, // The transaction payload
parameter: {
json, // The parameter to be supplied to the contract receive function in JSON format.
hex, // The parameter to be supplied to the contract receive function as a hex encoded string
},
schema: {
value, // The contract schema for the parameter. This is needed to translate the JSON format to a byte array.
type:t2, // The type of the schema. This is always 'parameter', meaning it can be used for the JSON formatted parameter only.
}
} = contract.createTransfer(
{ energy: Energy.create(1000000) },
{
tokenId: ‘00000003’,
to: AccountAddress.fromBase58(
‘4GyTSko7UZ9iTeUHSLD2c4f3KR6C2nRyyNWbrFMWyC7rRLWDE9’
),
from: AccountAddress.fromBase58(
‘3SfHLNkmy61ZUQkAhMvAwKj47EYDBiUPbn3wHghFD6qGr8WDGc’
),
tokenAmount: 1n,
}
);
connection?.signAndSendTransaction()
console.log(t1)
console.log(payload)
// console.log(parameter)
alert('calling Transfer')
}
async function viewTokens() {
const contractAddressT = ContractAddress.create(8665n, 0n);
const contract = await CIS2Contract.create(client, contractAddressT);
const tokenId = '00000001'; // HEX string representing a token ID defined in the contract.
const metadataUrl = await contract.tokenMetadata(tokenId);
console.log(metadataUrl);
alert('tokenmeta '+metadataUrl.url)
}
useEffect(() => {
setActiveConnectorType(BROWSER_WALLET);
}, [setActiveConnectorType]);
return (
<>
<h1>Call Mint</h1>
<div className="card">
<button onClick={() => callMint()}>
Mint
</button>
<button onClick={() => transferTokens()}>
Transfer
</button>
<button onClick={() => viewTokens()}>
View
</button>
<WalletConnectorButton
connectorType={BROWSER_WALLET}
connectorName="Browser Wallet"
connection={connection}
{...props}
/>
</div>
</>
)
}
export default App
