How to connect Kukai wallet using Beacon-SDK?

Question

Having trouble connecting Kukai wallet. I don't understand how to add "preferredNetwork" properly. I was told that is needed for Kukai Wallets. The code works fine for Temple wallet.

Not sure what I am missing here.

If anyone could point me to additional documentation I don't mind reading.

useBeacon.js

import { BeaconWallet } from "@taquito/beacon-wallet";
import { PermissionScope, NetworkType } from "@airgap/beacon-sdk";
import { DEFAULT_NETWORK } from "../../defaults";


const options = {
  name: "FA2 deployer",
  preferredNetwork: DEFAULT_NETWORK.id,
  iconUrl: "https://tezostaquito.io/img/favicon.png",
  eventHandlers: {
    PERMISSION_REQUEST_SUCCESS: {
      handler: async (data) => {
        console.log("permission data:", data);
      },
    },
  },
};

const wallet = new BeaconWallet(options);

defaults.js

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

export const NETWORKS = [
  {
    id: NetworkType.GRANADANET  ,
    nextNetworkIndex: 4,
    name: "Granadanet",
    type: "main",
    rpcBaseURL: "https://granadanet.api.tez.ie/",
  },
  {
    id: NetworkType.FLORENCENET,
    nextNetworkIndex: 3,
    name: "Florencenet",
    type: "test",
    rpcBaseURL: "https://florencenet.api.tez.ie/",
  },
  {
    id: NetworkType.DELPHINET,
    nextNetworkIndex: 1,
    name: "Delphinet",
    type: "test",
    rpcBaseURL: "https://delphinet.smartpy.io/",
  },
  {
    id: NetworkType.EDONET,
    nextNetworkIndex: 2,
    name: "Edonet",
    type: "test",
    rpcBaseURL: "https://edonet.smartpy.io/",
  },
  {
    id: NetworkType.MAINNET,
    nextNetworkIndex: 0,
    name: "Mainnet",
    type: "main",
    rpcBaseURL: "https://mainnet.smartpy.io",
  },
];

export const DEFAULT_NETWORK = NETWORKS[0];

Example says... You should also use the preferredNetwork property that allows you to use the Kukai wallet during development. This property takes the name of the network you want to connect to as a value and this is when we can use the NetworkType enum. https://wiki.tezosagora.org/build/dapp-development/create-your-first-dapp

OSS project here https://github.com/KStasi/fa2-deployer

files I want modifying are here

• src\app\defaults.js
• src\app\components\hooks\useBeacon.js

Answer 1

thank you for your question.

The preferredNetwork property is needed only for Kukai and if you want to connect to a testnet. So if your dApp only runs on mainnet, you do not need to set the preferredNetwork. The reason for this is because the URL of the Kukai wallet is different per network. And during the connection establishing (when the popup with the list of wallets is shown), we need to know to which URL we have to redirect the user when he clicks on Kukai. By default it just goes to the mainnet one, but with the preferredNetwork property you can change that.

I'm not sure what this "nextNetworkIndex" is in your example, but it's not something that is needed from the Beacon SDK side. Setting the preferred network is actually very straight forward, this is all you need:

const options = {
  name: "FA2 deployer",
  preferredNetwork: NetworkType.GRANADANET, // Choose the network from the enum that you want to work with.
  iconUrl: "https://tezostaquito.io/img/favicon.png"
};

const wallet = new BeaconWallet(options);