Beacon wallet
The interface with the Tezos wallet
Last updated
The interface with the Tezos wallet
Last updated
is a Tezos toolkit for wallet pairing. It allows wallet developers to integrate with dApps and dApps developers to give more choices to the user.
In order to implement the connect wallet button, and basic blockchain connectivity, we will start our first provider: WalletProvider
Add a providers
folder in ./components
, and create ./components/providers/WalletProvider.tsx
The imports that will be required:
In all our providers, we will define context props, that will represent the properties that will be made available to children using our context. We will then export a useContext
shorthand, and the provider itself.
Our wallet provider will provide the following:
The properties are self-explanatory:
connect
will request a wallet connection using Beacon
disconnect
will reset the connection
getBalance
will trigger a refresh of the balance (wallet tez balance)
account
provides the wallet address, among other things
wallet
and Tezos
are Beacon/Taquito objects that will be used internally to connect the dots
Now that we have the props, let's define our context, with an empty props instance, and prepare the useContext
shorthand:
The fun part, implementing the provider itself: it will be a React component:
Inside the component, we define the state that will be exposed to the children:
Let's stop here for a moment and analyse what is going on. This is an important part of the Tezos specifics.
First, we create a TezosToolkit
instance (from taquito). It will connect to the given node RPC
We also need to connect the Completium SDK to our TezosToolkit
instance
If there is already an account connected (a returning user) then the connection will be restored
Finally, we set the state of our provider with the account, the toolkit and Beacon
Note that this is only done once, after the page has loaded.
We can now implement the connect
and disconnect
callbacks:
The following fetches the current account's balance from the Tezos node, and is also triggered when the component loads.
Let's wrap all this state and these methods into a memo that we will pass down to the provider's children:
At the end of your file, be sure to append:
That's it for the first provider. We just need to add it to the app hierarchy in ./pages/_app.tsx
such that the App
function returns:
This will cause Visual Studio Code to complain that WalletProvider
is undefined. This is because the file requires the following import:
For the remainder of the tutorial, imports for providers and components such as these may be ommitted and it will be left to the reader to include them where necessary.
The context is now usable in any child with:
In React component lifecycle, to update the state when the component loads or when a dependency is updated, we use an :
Then we create a BeaconWallet
instance and we connect them, as per their