Error: this.walletProvider.mapTransferParamsToWalletParams is not a function

[borderlessdev]

Description
I'm getting the following error when i try to make any transaction:
TypeError: this.walletProvider.mapTransferParamsToWalletParams is not a function
I know my code works fine because i was using the Temple Wallet from @temple-wallet/dapp and all the functions goes well, but, i moved to the beacon wallet from @airgap/beacon-sdk and starts going this error.
I asked to ChatGPT and says older versions from Taquito won't suport this function (like 9.10 and older), but i'm using the latest one (17.3.1). He also says that @airgap uses the old version: 9.10, but if you set provider of your Tezos instance will be fine, but keeps the same error.
The reason i won't use (at moment) @taquito/beacon-sdk is because my older post mine. I'm using it in Bubble.io, and Bubble kind sucks when you need to import libs.
I don't know if i use @taquito/beacon-wallet will be the solution of my problems because i can't use it.

[ac10n]

Can you please share your code? Or a minimal reproduction?

[borderlessdev]

Sure, i will just describe a bit what i doing. I am building a Bubble.io plugin, and when i need a lib a need to webpack it. I tried to webpack the @taquito/beacon-wallet, but with no success (if you check my post before this you will see). So, i webpacked the @airgap/beacon-sdk. The connection goes fine, but when i try to call any function from my contract show this error.
A bit of my code:
How i setup the Tezos:

    if (typeof taquito === 'object') {
    	//console.log(taquito);
        const tdz = taquito;
        
        instance.data.Tezos = new tdz.TezosToolkit('https://ghostnet.ecadinfra.com')
    }

First is the setup:

     const options = {
      name: 'Borderless',
      iconUrl: 'https://3586245b45ccc31d580bfc8b13a364fa.cdn.bubble.io/f1686950331936x151112096132609340/160x40%20-%20header%20-%20download%20webdesign.svg',
      network: { type: 'ghostnet' },
    };
    if (typeof beaconWallet === 'object') {
        //console.log(beaconWallet)
        instance.data.beacon = new beaconWallet.DAppClient(options)
        instance.data.Tezos.setWalletProvider(instance.data.beacon)

    }

So, i connect to the beacon(i already tried using the setWalletProvider after the connection, but the results are the same):

     try {
        const a = await instance.data.beacon.requestPermissions();
        instance.data.walletAddress = a.address
		
     } catch (error) {
     	console.log(error)
     }

And then, i call any function, like this:

        try { 
            const contract = await instance.data.Tezos.wallet.at(instance.data.contrato_marketplace);
            console.log(contract.methods.buy())
            const op = await contract.methods
            .buy(price * 1000000, quant, seller, token_id)
            .send({ amount: (price * quant) })
            console.log(await op)
            
            instance.triggerEvent('nft_bought')
            
        } catch (e) {
            console.log(e)
        }

I know it's kinda strange, but Bubble is not easy to do. The if typeof is just for safety reasons. I use instance.data but it's like using const or let. The code was working fine with Temple Wallet lib, but when i use Beacon go to this error.

[dsawali]

Hey @borderlessdev,

I don't know if i use @taquito/beacon-wallet will be the solution of my problems because i can't use it.

I am fairly certain it will, the method mapTransferParamsToWalletParams is exported as part of a member of the BeaconWallet class which is from the taquito-beacon-wallet package

[hui-an-yang]

Hello @borderlessdev

We're working on a taquito-beacon-wallet bundle that you can use, will keep you posted.
Will be great to work with you to make sure if the bundle works for your use case with bubble.io.

[hui-an-yang]

Hello @borderlessdev

Would like to reach out to you again I have bundled a taquito-beacon-wallet file, would be great if you could try and see if it works for your use case.
Please can you reach out to me huianyang on ECAD Labs Discord Channel. That we can collaborate to work out something for you.
Would also appreciate you could let us know if you already successfully generated a bundle that works so we can close this ticket.
Thank you

[oldominion]

This error is thrown when from a JS environment, you pass in a vanilla dAppClient instance (e.g. from BeaconSDK's getDAppClientInstance() or an instantiated BeaconWallet object's .client property) to Tezos.setWalletProvider() instead of the wrapped client produced from new BeaconWallet().

setWalletProvider() should probably throw an exception if it doesn't receive an object matching the wrapped client instance's interface.

BTW - I have been able to successfully get this working in a Blazor WASM project (which only supports C# interop with JS, not Node\TS), by building a "compiled" taquito-beacon-wallet.js file, roughly as described in https://github.com/ecadlabs/taquito/tree/bundle-taquito-beacon-wallet, and referencing both in <script> tags in my index.html

<script src="_content/BeaconWalletComponent/taquito.min.js"></script>
<script src="_content/BeaconWalletComponent/taquito_beacon_wallet.js"></script>