Web2 UX with Sui's zkLogin and sponsored transactions

Homepage of our [demo](https://demo.shinami.com/). — Homepage of our demo.

User experience has been a big barrier to Web3 app adoption. The requirement for users to set up a wallet, complete KYC checks to buy tokens, manage private keys, and address signing popups is too much friction for the average user coming from the free-to-play, easy-onboarding Web2 world.

With Sui’s zkLogin feature, apps can give users the best of both worlds: a Web2 user experience along with ownership of a Web3 wallet and the assets it contains. By incorporating sponsored transactions, apps can also eliminate the need for users to have to go through KYC to buy SUI to pay the extremely small transaction fees.

At Shinami, we believe these features can help onboard the next billion users to Web3! We wanted to show developers how easy it is to incorporate them into an app, so we created a game dashboard demo that shows them in action.

Demo Overview

Web3 that feels like Web2

As we show in the sections below, we've used zkLogin and sponsored transactions to create a demo that feels like a Web2 experience. While the full, logged-in experience is currently limited to Shinami customers, anyone can view a hero's page. For example, this one:

This means users can easily show off their heroes to friends and other gamers by sharing the link. These word-of-mouth interactions can drive new users to an app and create a deeper sense of user-engagement.

zkLogin uses a username + password users already know

Logging in with zkLogin is as easy as logging in with the Google, Facebook, or Twitch account credentials the user already knows. Behind the scenes, data generated from the login is a required part of sending transactions from the associated zkLogin wallet. This means that the user has control over the wallet because signing transactions requires the user's successful login.

zkLogin enables Web3 ownership with a Web2 UX

Web3 offers users the promise of ownership. This gives users a reward for the time they put into an app that cannot be taken away from them, increasing engagement. In our demo, we let players create the hero character they’ll play the game with. This character is an NFT on the Sui blockchain that lives in the user's zkLogin wallet.

zkLogin + sponsored transactions for an immersive in-app experience

When a hero is created - or upgraded as shown below - behind the scenes, a couple of key things happen that ensure a great user experience:

The transaction that mints or upgrades the hero can be automatically and securely signed because the user has authenticated with Google, Twitch, or Facebook. No additional user input like a context switching signing popup is needed!
Shinami's Gas Station is used to sponsor the transaction so that the player - who may not even know that there's a Web3 wallet behind the scenes - doesn't have to buy and transfer SUI into the wallet to cover the tiny transaction fee needed to mint the NFT. The user can just focus on playing the game!

Dynamic, mutable NFTs make for a more engaging experience

Typically when players play a game, their hero levels up after gaining experience. This allows them to take on even tougher enemies. We've modeled this with a level-up feature (shown above). Not only does this take advantage of the smooth user experience that zkLogin and sponsored transactions provide, it also takes advantage of Sui's dynamic, mutable NFTs. Whether or not your app is a game, you can reward users for the time and effort they put into your app by upgrading the assets they own.

For those curious, you can see the transactions on chain

While a common user experience goal in Web3 games is to hide on-chain activity so users can focus on gameplay, we’ve added a link on each hero's page to "View on Sui" so you can see how the hero is represented on chain:

Here we see how Anna's traits are represented on chain. — Here we see the transactions that created Anna and upgraded her skills.

Conclusion

We hope our demo app has shown you how Sui's zkLogin and sponsored transaction features make it easy to create a great user experience. Here at Shinami, we’re proud to provide developers with industry-leading infrastructure that powers these features at scale. We're excited to see what the community builds with these tools!

Developer Resources

We have great resources for developers who want to offer a better user experience.

zkLogin

To practice these concepts and launch an instance of the game to tinker with and explore, see our tutorial.
To start from a production-ready template for a zkLogin app, see our zkLogin wallet Next.js Tutorial.
To incorporate zkLogin into an existing app, see our zkLogin wallet API.
To read more about zkLogin, see Sui's zkLogin page with links to helpful docs like an implementation guide and an FAQ.

zkLogin Game Dashboard Demo