Taquito and Beacon-Wallet, error with wallet.requestPerrmission on network type

Question

I'm trying to connect a webapp to Temple wallet with Taquito. I'm not an expert of Typescript, I'm learning on the way, and I have a problem.

Here's my TS code:

import { BeaconWallet } from '@taquito/beacon-wallet';
import { TezosToolkit } from '@taquito/taquito';

(async () => {

    const Tezos = new TezosToolkit('https://testnet-tezos.giganode.io');

    const options = {
      name: 'avatez'
    };
    const wallet = new BeaconWallet(options);

    await wallet.requestPermissions({ network: { type: "hangzhounet" } });

    Tezos.setWalletProvider(wallet);

    const userAddress = await wallet.getPKH();
    console.log(userAddress);

});

When I do npx tsc, I get

src/tezos.ts:13:50 - error TS2322: Type '"hangzhounet"' is not assignable to type 'NetworkType'.

13     await wallet.requestPermissions({ network: { type: "hangzhounet" } });
                                                    ~~~~

  node_modules/@airgap/beacon-sdk/dist/cjs/types/beacon/Network.d.ts:3:5
    3     type: NetworkType;
          ~~~~
    The expected type comes from property 'type' which is declared here on type 'Network'


Found 1 error.

But reading this: https://tezostaquito.io/docs/wallet_api/, it should be Ok. Do you see what is wrong here ?

Answer 1

This works for me:

const initConnect = async () => {
    try {
        const wallet_instance = new BeaconWallet({
            name: NAME,
            preferredNetwork: PREFERRED_NETWORK,
            disableDefaultEvents: false, // Disable all events / UI. This also disables the pairing alert.
            eventHandlers: {
                // To keep the pairing alert, we have to add the following default event handlers back
                [BeaconEvent.PAIR_INIT]: {
                    handler: defaultEventCallbacks.PAIR_INIT
                },
                [BeaconEvent.PAIR_SUCCESS]: {
                    handler: data => setPublicToken(data.publicKey)
                }
            }
        });
        Tezos.setWalletProvider(wallet_instance);

Then when that's done and we've determined that

const activeAccount = await wallet.client.getActiveAccount() = null/undefined :         
await wallet.requestPermissions({
          network: {
            type: NetworkType.MAINNET,
            rpcUrl: main,
          },
        });

Answer 2

Self answering myself:

As not precised in Taquito documentation, I need to add an import:

import { NetworkType } from '@airgap/beacon-sdk';

And use it:

 await wallet.requestPermissions({ network: { type: NetworkType.HANGZHOUNET } });

If you have any other way to to it, as close as possible to the documentation example, I'm interested in explanations.