About @taquito/beacon-wallet

[vdt000]

Merhaba (Hi),

I am software eng from Turkey, Tezos team.
We work on web app that connects users wallet.
But when we try a simple code on node.js that we copied your documents.
We get an error like this and we can't work around.

TypeError: sodium.randombytes_buf is not a function
    at Object.<anonymous> (D:\Projects\bitay\NFT\NFT-tq\node_modules\@airgap\beacon-sdk\dist\cjs\utils\generate-uuid.js:72:34)
    at step (D:\Projects\bitay\NFT\NFT-tq\node_modules\@airgap\beacon-sdk\dist\cjs\utils\generate-uuid.js:52:23)
    at Object.next (D:\Projects\bitay\NFT\NFT-tq\node_modules\@airgap\beacon-sdk\dist\cjs\utils\generate-uuid.js:33:53)
    at fulfilled (D:\Projects\bitay\NFT\NFT-tq\node_modules\@airgap\beacon-sdk\dist\cjs\utils\generate-uuid.js:24:58)

and code is:

beacon.js

import { TezosToolkit } from "@taquito/taquito";
import { BeaconWallet } from "@taquito/beacon-wallet";
import { TezosOperationType } from "@airgap/beacon-sdk";
//import { localStorage } from "localstorage-polyfill";
import pkg from 'localstorage-polyfill'; //because we are on server-side, browser localstorage must be implemented like this
const { localStorage } = pkg;
//check for borwser or server
if (typeof window !== "undefined") {
    console.log("Rendering on browser")
} else {
    console.log("Rendering on server");
}

const Tezos = new TezosToolkit("https://mainnet-tezos.giganode.io");
const wallet = new BeaconWallet({ name: "Beacon Docs Taquito" }); // Takes the same arguments as the DAppClient constructor

Tezos.setWalletProvider(wallet);

let myAddress = "";

// This code should be called every time the page is loaded or refreshed to see if the user has already connected to a wallet.
const activeAccount = await wallet.client.getActiveAccount();
if (activeAccount) {
    // If defined, the user is connected to a wallet.
    // You can now do an operation request, sign request, or send another permission request to switch wallet
    console.log("Already connected:", activeAccount.address);
    myAddress = activeAccount.address;
} else {
    await wallet.requestPermissions();
    myAddress = await wallet.getPKH();
    console.log("New connection:", myAddress);
}

// At this point we are connected to an account.
// Let's send a simple transaction to the wallet that sends 1 mutez to ourselves.
const hash = await wallet.sendOperations([
    {
        kind: TezosOperationType.TRANSACTION,
        destination: myAddress, // Send to ourselves
        amount: "1", // Amount in mutez, the smallest unit in Tezos
    },
]);

console.log("Operation Hash: ", hash);

package.json

{
  "name": "nft-tq",
  "version": "1.0.0",
  "description": "",
  "main": "b.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "type": "module",
  "dependencies": {
    "@taquito/beacon-wallet": "^9.2.0",
    "@taquito/taquito": "^9.2.0"
  }
}

I think it is an issue with Taquito import system. Any help appreciated...

Vedat Arslan
Tesekkurler (Thanks)

[claudebarde]

You cannot use the Wallet API server-side. The Beacon SDK uses some libraries based on browser APIs that are not available in NodeJS. The use of the Wallet API also requires an action from the user of the app to sign the transaction, which is impossible server-side. For server-side apps, you should use the InMemorySigner class in the @taquito/signer package.

[vdt000]

I am very glad for your quick answer. I know client and server side wallet implemantation logic a bit. I am working on Tezos contract space. Just the issue is a bug and still there. I wanted to be able to run a sample code.

[jevonearth]

@vdt000 Can you describe the use-case you are trying to implement? Are implementing a server-side service that you want to be able to pair with a user's wallet? This isn't a typical use-case we have seen. I suspect there may be a different approach that will meet your needs, or you have a new interesting use case. Either way, we'd like to hear more so we can help. :)

[vdt000]

I am very glad for your quick answer. I know client and server side wallet implemantation logic a bit. I am working on Tezos contract space. Just the issue is a bug and still there. I wanted to be able to run a sample code.
BUT the same issue was valid for "walletbeacon.min.js" version 1.x, today I tried new version "https://unpkg.com/@airgap/beacon-sdk@2.2.9/dist/walletbeacon.min.js" and worked. I think I must ask you before, because after your answer issue solved :)

[Innkst]

see also #882

[vdt000]

Hi,
I got an email from airgap, says that: we thank you for your bug message, we deploy new version of wallet-min.js.
And new version working, no "sodium lib bug." Also "\node_modules@airgap\beacon-sdk" has new version 10. BUT still :
"TypeError: sodium.randombytes_buf is not a function
at Object. (\node_modules@airgap\beacon-sdk\dist\cjs\utils\generate-uuid.js:72:34)"
BUG is there.
We use this function:
const wallet = new BeaconWallet({ name: "Beacon Docs Taquito" });
and bug comes.
We must send tez money to our users via nodejs wallet library.
URGENT...