Taquitopackage (to interact with the blockchain) and the
BeaconWalletpackage (to interact with the user’s wallet). These packages are available from
NPMand you can easily install them with
npm i @taquito/taquito @taquito/beacon-wallet. At the top of the main component of the dapp, we can now import two classes we need for our dapp, the
Taquitopackage and the
Taquitopackage, we need the
TezosToolkitto communicate with the Tezos blockchain. From the
BeaconWalletpackage, we need the
BeaconWalletclass to interact with the users’ wallets. In addition to that, we are also going to import different things we will need to set up the dapp:
sveltepackage allows us to prepare the dapp environment when the users load the dapp, we will set up their wallet and their connection to the blockchain
Taquitopackage exposes different types and interfaces that we can use with TypeScript to make our code more robust, in this case,
ContractAbstraction(that represents the instance of a contract on the dapp level) and
Wallet(that represents an instance of a wallet)
Note: you don’t need to install the
Beacon SDKpackage yourself, it is part of the
BeaconWalletpackage and will already be present in your
onMountthat is triggered once when the app is mounted. We will set up the dapp within this function:
TezosToolkit. Because it is a class, we can create an instance of it with the
newkeyword and we will save it in the Tezos variable (but you can use whatever variable name you like). The
TezosToolkitexpects as a parameter the URL of the RPC node you want to connect to. You can use the one in the example or any other one of your choice. Be careful that the node you choose will decide the network you connect to (here the Florencenet testnet).
BeaconWalletand passing it an object. This object must have at least 1 property called
namewith the name of your dapp (that’s the name that will be displayed in the wallet when you will ask users to sign transactions). You should also use the
preferredNetworkproperty 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
clientwith a method called
getActiveAccountthat checks if the users had connected their wallets before. If it is the case, this is what we can do:
Tezos.setWalletProvider(wallet): this step is necessary to register the newly created wallet and to use it to sign transactions. The argument is an instance of the
userAddress = activeAccount.address: we get the user’s address which can be useful as much as in the interface (so the users can know with which address they are connected) as in the code (for example, in the following line to fetch the existing tickets)
atmethod of the
walletproperty on the TezosToolkit instance (here, we store this instance in the
storagemethod present on the contract instance =>
bigmap, you can use it as a property on the storage instance and call the
getmethod on it with the key you are looking for to get its value=>
getmethod returns the value associated with the key or
undefinedif the key was not found.
Note: if the key is
undefined, the node will return a 404 error message. This can be confusing if you keep an eye on your console logs as it looks like an error, but it isn’t.
bigmapand are associated with a key represented as a
pairwith the address of the owner on the left and the ticket type on the right. In order to fetch it with Taquito, you can pass an object to the
getfunction with 2 properties:
“0”for the left side of the pair and
“1”for the right side of the pair. The call will return an
objectbecause the values in the
bigmapare pairs. On the left side, you have the timestamp of the last time the user bought tickets, on the right side, the actual ticket. These are the 2 values the function returns.
bigmap, we can save them in variables to use them in the interface.
userAddress, so this is the value we can use to show a Connect/Disconnect button:
requestPermissionsmethod on the wallet instance will open the Beacon popup and request the users to choose a wallet and connect to it:
network. The property itself takes another object with a
typeproperty (accepting a value of type
NetworkType, the enum we imported earlier from
@airgap/beacon-sdk) and a
rpcUrlproperty (with the address of the node you want to connect to). After the user accepts the connection, we can move on and fetch the different information we need.
Note: it is a good idea to put the code to connect to a wallet into a
try…catch…statement. This is prone to bugs and unexpected behaviours (like users not giving their permissions or failing connections) and you should handle them.
getPKHmethod on the wallet instance:
TezosToolkitinstance exposes a method called
setWalletProviderthat you just need to call and pass the newly created wallet to in order to set up the signer. Then, you can get the user’s address with
Note: forgetting to set the wallet provider is a common reason of the
Signer Not Configurederror, along with using the Contract API instead of the Wallet API.
disconnectfunction is pretty simple, the
walletinstance exposes the
clientinstance of the
Beacon SDKas a property on which you can call the
destroymethod. We will also reset
userAddressto return the interface to its original state:
true, which will add the
loadingclass to it and disable it (in order to prevent multiple clicks). At the same time, we only trigger
buyTicketsif the user is not already waiting for the confirmation of a previous buy.
Note: the number of tickets to buy (1) is hard-coded here but you can also request it from the users.
getmethod available on every bigmap of the storage and pass the key we are looking for,
standard. If you remember from earlier, the call is going to fail with a
404error code if the key doesn’t exist and it will be caught in the
try… catch…statement before sending the transaction.
buy_ticketsthat takes 3 parameters: the number of tickets to create, the address to be credited with the tickets and the type of tickets. The number of tickets is passed to the function as
ticketAmount, we will use the address that we stored in
userAddresswhen the user connected their wallet and the ticket type is just going to be “standard”. Every entrypoint of the contract is available by name as a method on the
methodsproperty of the contract abstraction. In order to send the transaction, you call
sendon the return value of the entrypoint function.
op). This object exposes different properties and methods, but the ones you will use the most are the
opHashproperty that holds the hash of the transaction and the
confirmationmethod that waits for the transaction to be confirmed. By default,
op.confirmation()waits for 1 confirmation, but you can wait for more by passing the number of confirmations you want as a parameter (for example,
op.confirmation(10)to wait for ten confirmations).
ticketerStorage = await ticketer.storage(). This creates a representation of the whole storage in your dapp and you can now access all the information available in the storage.
Note: at this point, the transaction has been confirmed and the updated storage is available. The storage you get after
op.confirmation()is the new storage.
ticketsbigmap so we just need to use the right key to access the number of tickets owned by the user. In the case of a pair used as a key in a bigmap, you can simply pass an object to the
getmethod with 2 properties:
“0”for the value in the left field of the pair and
“1”for the value in the right field of the pair. If we get a result, it means the user has tickets and we can update the number of tickets (
userTickets) and their validity (
userTicketValidity). Otherwise, we reset everything to zero.
Note: we’ve just updated the user’s tickets so we know there are tickets but it’s always better to handle unexpected cases.
methodsproperty of the contract abstraction:
sendto send the transaction
confirmationon the operation object to wait for the transaction to be included in a block
storageon the ticketer contract abstraction
Taquito, connecting to the users’ wallets using
Beacon, sending transactions and fetching a contract storage. This is all you need to create a simple dapp.