https://tome.app/super-play/superplay-eth-global-tokyo-clghe2hqm08gl8x40sfbt81qe
As a gamer, I want to try out web3 games without having to go through the hassle of setting up a wallet and buying assets, so that I can understand how to play the game with no knowledge about crypto.
- I visit the gaming project's website and register my email address to create a wallet.
- Upon registration, the system automatically creates a subdomain of ENS for my wallet.
- The private key is sent to my email address, which I can use to access my wallet.
- Inside the wallet, I own a small amount of the gaming project's ERC20 token, which is used for the subscription.
- I can start playing the game without using any assets in my wallet for a limited time (e.g., 1 week).
- During the trial, the gaming project covers the gas fees for my transactions using Biconomy.
- After the trial, I can choose to subscribe to the game by paying a fee in the gaming project's ERC20 token, which will be charged to my wallet automatically every week.
SuperPlay aims to provide a streamlined and user-friendly onboarding process for new players by removing the complexity of setting up a wallet and buying assets. The use of contract wallets and gas-less transactions with Safe Onramp and Relay Kits enables a seamless payment experience with credit cards, reducing the need for users to hold cryptocurrency or understand gas fees.
Additionally, by providing a limited time trial period with a small amount of the gaming project's ERC20 token, SuperPlay allows users to try out the game without any investment, reducing the barrier to entry and encouraging more users to explore decentralized gaming.
Overall, SuperPlay's UX optimization strategies aim to create a user-friendly and accessible environment that allows both seasoned and non-technical users to experience and enjoy decentralized gaming with ease.
Account abstraction:
- Email registration to create a wallet
- Automatic subdomain creation using ENS
- Limited time trial without requiring any assets in the wallet
- Subscription service using the gaming project's ERC20 token
- Gas fee coverage during the trial using Biconomy
Example app with chakra-ui and TypeScript
This example features how to use chakra-ui as the component library within a Next.js app with TypeScript.
Next.js and chakra-ui have built-in TypeScript declarations, so we'll get autocompletion for their modules straight away.
We are connecting the Next.js _app.js with chakra-ui's Provider and theme so the pages can have app-wide dark/light mode. We are also creating some components which shows the usage of chakra-ui's style props.
Deploy the example using Vercel or preview live with StackBlitz
Execute create-next-app with npm, Yarn, or pnpm to bootstrap the example:
npx create-next-app --example with-chakra-ui with-chakra-ui-appyarn create next-app --example with-chakra-ui with-chakra-ui-apppnpm create next-app --example with-chakra-ui with-chakra-ui-appDeploy it to the cloud with Vercel (Documentation).
Chakra has supported Gradients and RTL in v1.1. To utilize RTL, add RTL direction and swap.
If you don't have multi-direction app, you should make <Html lang="ar" dir="rtl"> inside _document.ts.