October 15

0 comments

How to add WAX wallets to your Website

Utilizing web3 as your user system can be a very smooth experience for both users and developers. It's an awesome way to ensure that only the correct user has rights to perform specific actions in your application, while not handling any passwords. If you want you can also utilize even further features such as NFTs as another way to verify users. 

Now, NFTs are not just some jpeg sold for tons of money, but is really just a term that describes something verifiable unique. The Image is just the front, what a user sees, and what can be the percieved value of the NFT. But in reality, NFTs are so much more. Any time you want to have a way to verify the authenticity of anything online, an NFT is a great way to do that. 

All blockchains are not equal, and some solutions are better for some usecases.. If you are building a web app, and want to use NFTs for a user as a way to give specific access, or some user program... You might not want to utilize a Blockchain where creating these NFTs comes at a great cost. 

Perhaps you have an education platform, and after a course is finalized, the user recieves an NFT cerficate for that course. This ensures that the certificate can't be faked, but it can only be acquired by passing the course.

Perhaps you instead have some membership where you use an NFT to gain access to some specific content. Where that user are able to later transfer the NFT to another user, or sell it on a third party marketplace. Through doing that, a new user has access to the specific content instead of the old user. Giving that user back some money through that sale, while also providing you with a % fee of that sale. 

Why use WAX for your web3 account system?

There are many benefits to using WAX over other options. 

  • Readable account names
  • Built in on-chain account recovery features
  • Free Transactions
  • Shared on-chain NFT market contract
  • Easy to use NFT contracts
  • Easy to use NFT tools
  • Built in collection fees
  • Simple account creation
  • Easy to use wallets
  • Mutable &/ immutable contracts

Some of the biggest features for an application is the ease of use and account system of WAX. But on top of that, the moment you create an NFT collection, it can instantly show up an all available NFT markets on WAX. The same goes for listing your NFTs for sale. You can list it on one marketplace, yet a user can find it and buy it from another marketplace. Giving your assets better reach and the entire chain more liquidity. 

Anyone can set up an NFT marketplace and instantly have a lot of listed assets, making the main aspect of competition being the user interface, features and attracting returning users. 

With this shared NFT market contract, collection fees can be enforced, which allows projects to build business models that adds value to existing NFTs, instead of always selling more and more. 

How to add WAX wallets

Depending on your frontend framework, you might find some of these tools more suitable or less suitable. I will mention the 3 most common ways, and show an example of how to use vanilla JavaScript. Hopefully that will give you a good idea of all you need to do, and how simple it is to get started. 

For the future, I would likely recommend to use Wharfkit to manage WAX wallet integrations, but building your own solution is always an option. 

Wharfkit - Multiwallet session manager by Greymass
The next generation of Wallet integration for WAX and all other Antelope based blockchains. Currently working, but in early development. 
- Wharfkit Session: https://github.com/wharfkit/session
- Wharfkit NPM Packs: https://www.npmjs.com/org/wharfkit
- Wharfkit Anchor Plugin: https://github.com/wharfkit/wallet-plugin-anchor
- Wharfkit Cloud Wallet Plugin: https://github.com/wharfkit/wallet-plugin-cloudwallet

UAL (Universal authentication Library - Wallet Manager)
A powerful and quick solution to handle multiple wallets. Probably the most used solution across WAX. Although moving forward Wharfkit is likely going to be more used. 
WAX-UALhttps://github.com/eosdac/ual-wax
EOSIO UAL (More info & Examples):  https://github.com/EOSIO/ual-eosio-reference-authenticator

WAXJS & Anchorlink
The most commonly used wallet for WAX is the Cloud Wallet, followed by Anchor and then probably wombat. To integrate the cloud wallet you just need the WAXJS javascript file, and if you also want to support anchor, you can use the anchorlink tools.
- WAXJS: https://github.com/worldwide-asset-exchange/waxjs/blob/develop/dist-web/waxjs.js
- Anchorlink: https://github.com/greymass/anchor-link

WAXJS is built from EOSJS, so much of the EOSJS documention applies for WAXJS as well. 

Example using WAXJS for login

This is a simple example of you can interact with the Cloud wallet, and get the account name of the user. You can then use that for your session handling as you would any user management system. 

Login and get your WAX wallet trust score

Sign Transaction

Click once you're logged in.
It's just a 0.00000001 WAXP transfer, just decline it if you want.

Transaction Response

You find the code for the above example here: https://gist.github.com/coachbjork/fbe7f1e30ac637f2d78bc36bd98b4769

Depending on how you intend to utilize the web3 features, you might want to further verify that the user is actually able to sign transactions on the account. This is commonly done by creating a dummy transaction to verify that the user has access to the keys. 

After that, you can just take that account name, query an API to get user specific NFTs, tokens or other information. 

For more information on API's and other dev tools, you can check out this big document I maintain. https://academy.anyo.io/course/developer-resources/

Summary

Depending on what you want to do, and how you want to utilize web3, it's really not more difficult than above. To add anchor as well, you just need to add the anchorlink javascript files, and it's just as simple. 

Worth mentioning is that waxjs and the cloud wallet has no session handling, so the session doesn't stick with a new page load. However, there's a built in function "wax.isAutoLoginAvailable" which checks if the user has allowed your application to automagically login to the cloud wallet for them, else they will have to sign a login before each action they take. Anchorlink however, has support for sessions from the start. 


Tags

developers, NFT, wax


You may also like

Leave a Reply

Your email address will not be published. Required fields are marked

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}

Support my work through NFTs!