1

we are currently encountering a bug using Beacon wallet in our Dapp.



Our current feature functionality:

We are offering the ability to Connect, Change, and Disconnect Wallet. Our disconnect works well, no problems with it. When I try to change wallets or when I connect with Beacon to my Temple Wallet and press the Cancel button inside the temple wallet popup, all works as it should. However, if after that cancel I try to change/connect wallet again or perform an operation it will throw this type error:

enter image description here

On our deployed version, we receive this error but it’s not it works fine after that, we are able to do transactions and so on. On localhost, it crashes the whole app.

 I’m sure how its as I have a try/catch all across my code, and wallet instance is created only 1 time.

Any idea where this error is from and/or how to fix it?

Thanks in advance!

Our current taquito versions:

"@airgap/beacon-sdk": "^3.3.0",
"@taquito/beacon-wallet": "^15.0.1",
"@taquito/signer": "^15.0.1",
"@taquito/taquito": "^15.0.1",
"@taquito/utils": "^15.0.1",

Connect Wallet Code:

import { BeaconWallet } from '@taquito/beacon-wallet'
import { NetworkType } from '@airgap/beacon-sdk'

const WALLET_INSTANCE = new BeaconWallet({
  name: process.env.REACT_APP_NAME || 'TEST_DAPP',
  preferredNetwork: NetworkType.GHOSTNET,
})

export const CONNECT = 'CONNECT'
export const connect = () => async (dispatch: AppDispatch, getState: GetState) => {
  const {
    preferences: { headData },
    tokens: { dipDupTokens },
    dataFeeds: { feedsLedger },
    stakingStorage: {
      stakingStorage: { activeNodes },
    },
    wallet: { tezos },
  } = getState()

  try {
    // checking whether we have user from last session in local storage
    const activeAcc = await WALLET_INSTANCE?.client.getActiveAccount()

    // if we don't have user from last session request to select wallet
    if (!activeAcc) {
      await WALLET_INSTANCE.client.clearActiveAccount()
      await WALLET_INSTANCE.client.requestPermissions({
        network: { type: NetworkType.GHOSTNET },
      })
    }
    // getting address of the wallet to load data
    const { address } = activeAcc ? activeAcc : (await WALLET_INSTANCE?.client.getActiveAccount()) ?? {}

    // set upping tezos instance
    await tezos.setWalletProvider(WALLET_INSTANCE)

    // getting userData
    const userData = address
      ? await fetchUserData(address, activeNodes, dipDupTokens, feedsLedger, headData?.level)
      : DEFAULT_USER

    await dispatch({
      type: CONNECT,
      wallet: WALLET_INSTANCE,
      userData,
      accountPkh: address,
    })

    // updating sections that are loaded and depends on user's wallet
    await dispatch(updateWalletDependedDataOnWalletChange())
  } catch (e) {
    console.error(`Failed to connect wallet:`, e)
    if (e instanceof Error) {
      dispatch(showToaster(ERROR, `Failed to connect wallet:`, e.message))
    }
  }
}

Disconnect Wallet Code:

export const DISCONNECT = 'DISCONNECT'
export const disconnect = () => async (dispatch: AppDispatch, getState: GetState) => {
  const {
    wallet: { wallet },
  } = getState()
  try {
    if (wallet) {
      await wallet.client.clearActiveAccount()
      await wallet.disconnect()

      await dispatch({ type: DISCONNECT })
      await dispatch(updateWalletDependedDataOnWalletChange())
    }
  } catch (e) {
    console.error('Failed to disconnect TempleWallet: ', e)
    if (e instanceof Error) {
      dispatch(showToaster(ERROR, 'Failed to disconnect TempleWallet', e.message))
    }
  }
}

Change Wallet Code:

export const CHANGE_WALLET = 'CHANGE_WALLET'
export const changeWallet = () => async (dispatch: AppDispatch, getState: GetState) => {
  const {
    wallet: { wallet, tezos },
  } = getState()
  try {
    if (wallet && tezos) {
      // getting current wallet
      const prevWalletAccount = await wallet.client.getActiveAccount()

      // clearing wallet logged in
      await wallet.client.clearActiveAccount()

      try {
        // triggering popups for wallet selection
        await wallet.client.requestPermissions({
          network: { type: NetworkType.GHOSTNET },
        })
      } catch (e) {
        console.error('selecting wallet error', e)
      }

      // getting newly selected vault
      const newAccount = await wallet.client.getActiveAccount()

      if (newAccount) {
        // setting newly selected wallet
        await wallet.client.setActiveAccount(newAccount)
        await tezos.setWalletProvider(wallet)

        await dispatch({
          type: CHANGE_WALLET,
          accountPkh: newAccount.address,
        })

        await dispatch(updateUserData())
        await dispatch(updateWalletDependedDataOnWalletChange())
      } else {
        await wallet.client.setActiveAccount(prevWalletAccount)
        await tezos.setWalletProvider(wallet)
      }
    }
  } catch (e) {
    console.error(`Failed to change wallet: `, e)
    if (e instanceof Error) {
      dispatch(showToaster(ERROR, 'Failed to change wallet', e.message))
    }
  }
}
1

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.