Add wallet connection to your react app
Last updated
Was this helpful?
Last updated
Was this helpful?
This a quick guide walking you through how to manage wallet connection using Mintbase-js. We currently support a stable version only on Next.js, soon we plan to give support to more libraries and frameworks. We strong recommend that you use the first method and build on top of our . Also recommend the read of documentation
You can easily test Mintbase Wallet, using our Simple Login example with Next.js 14 on this repository:
, just do a pnpm install
on the next-js folder and pnpm run dev
any issues or troubleshooting help you can send us a message on our Telegram Channel
or you can also run on the terminal the command npx create-mintbase starter-next
and it will automatically clone the starter-next template
Install the mintbase-js react package
npm install @mintbase-js/react
or
yarn install @mintbase-js/react
Add the WalletContextProvider
to the root entry point of your app.
The below example shows how to do this on a Next.js app but the idea is the same. For React the equivalent should be done in the index.js file.
Import use wallet and use it to get the necessary functions.
Use the connect method to provide the wallet selector UI where you can select which wallets to connect with.
Once the wallet is connected the activeAccountId will be populated
Now that the wallet has been connected it is possible to access these props anywhere in the app through the useWallet()
method.
\
With selector.wallet() it's possible to get the current wallet instance and use it to execute to interact with smart contracts.
For more information on how to execute methods like transfer, mint on your very own token contracts deployed via our deployContract method or on how to list and buy from the mintbase market contracts check out the guide.
Have feedback or perhaps need a hand? Reach out on our public developer support channel where we are happy to help!
Building something cool? Consider .\