Flow hackathon is all about building innovative on-chain experiences. Participants have to use Cadence smart contract programming languages to build Dapp, like NFT minting, mobile games, DeFi, or building experiences on top of existing apps like NBA TopShot. For this time, my team built Mindtrixverse, and I was responsible for writing the smart contract and frontend code.🧑‍💻

What’s Mindtrixverse?

Mindtrixverse is a 3D interactive world built on Flow Blockchain to onboard Podcasters and their communities to Web3. Seeing that lots of awesome 2D or pixel art exists in the crypto world, it will bring the Web3 experience to another level if we build a Dapp in 3D and sound. We designed nine landmarks with a narrative and utility. For example, the Sound Gallery links to the primary marketplace of Podcast NFT. When a new Podcaster issues their creations, we can put them on the list for fans to follow.

In the Alpha Phase, we plan a Pack Drop to offer users a fun collecting experience. You may notice that six landmarks show a purchase dialog, but don’t worry; we’ll share more details about the Pack Drop mechanism. Let’s dive into how we build Mindtrixverse on Flow Hackathon.

Materials Preparation

Constructing a world from scratch takes a plan. One of our three teammates, Sduffy, put pencil to paper to create the whole story including the association between Otter, the main character, and the Voice, each landmark’s descriptions and styles.

Then, the 3D Designer, Ray, sculpted the landscape from narratives. After the 3D models are ready, it’s time to import them into the Web. The scene is based on Three.js, a fantastic JavaScript 3D Library containing cameras, lights, and meshes (actors), which make 3D models live on the Web.

During the integration, we notice performance issues causing browser freeze. One of our conducted solutions is to replace the realistic water reflection shader with a low-poly effect. For another, we’re trying to reduce the number of 3D surfaces. Though people are hard to aware of the difference between the two, the size of the file And web page load is reduced a lot. The scene size has been reduced from 15 MB to 2 MB. We will continue optimizing the performance to provide a smoother experience on mobiles.

Walletless Onboarding Development

Another big challenge is to provide a seamless onboarding experience for mainstream and blockchain users. We decided to implement Hybrid Custody which empowers users to use their custodial wallets to claim Dapp-custodial ones. That is, users no longer need to register a wallet when first landing and the Dapp keeps their wallets until users decide to claim. The Flow team defines this user journey as “Walletless Onboarding.” The following are our four implementation steps:

1.Pre-generated Accounts Reducing user wait time is a better user experience. Creating an account needs to send a transaction, and it takes time. Our solution is always to reserve at least five Dapp-custodial accounts so Dapp can swiftly distribute one whenever a new user joins.

// The Node.js code to generate a keypair in ECDSA_P256 Algorithm
import { ec as EC } from 'elliptic';
import { promisify } from 'util';
async generateKey(password: string, salt: string): Promise<KeyPair> {
    const privateKey = (await promisify(scrypt)(password, salt, 32)) as Buffer;
    const ec = new EC('p256');
    const kp = ec.keyFromPrivate(privateKey, 'hex');
    const publicKey = kp.getPublic().encode('hex').substr(2);
    return {
      privateKey: privateKey.toString('hex'),
      publicKey,
    };
  }

After generating a key pair off-chain, you can take the public key to send a create account transaction.

2.Walletless Onboarding for NFT Purchasing We use Firebase Auth to implement the Google Single Sign-On. For payment integration, you can use Stripe to support credit card payments. In our case, we use Dapper Wallet for credit card payments.

3.Claim the Dapp-Custodial Account There are two ways to claim the Dapp-custodial account: “Publish & Claim “ and “Multisig.” Publish & Claim would be easier to implement without interacting with Dapp’s back-end service, but it takes two transactions. For Multisig, we need to provide our service account’s signature and user’s into one transaction to achieve the account delegation, so the process has to be verified in Dapp’s back-end service. You can learn more details about Multisig in Jacob’s tutorial.🤓 (Jacob is the founder of Emerald City DAO expert in Cadence)

4.Query All Owned NFT/FT Assets By claiming the Dapp-custodial(child) account, the user has the ability to access it from their self-custodial(parent) one. Below is an example of how to query all digital assets from associated accounts.

In the real scenario, the parent account should not take full control over the child for security reasons. For example, that’s saying a child account stores game points that should only be operated by the Dapp. The user might accidentally withdraw and transfer those points to another account by approving a malicious transaction. The ongoing RestrictedChildAccount standard provides CapabilityProxy that allows Dapp to define the exact capability a parent account can borrow.

Finally, in nine days, we completed a prototype combining 3D scene and Walletless Onboarding. You can check out Mindtrixverse’s demo video:

Walletless Onboarding on Flow Blockchain is an eye-opening innovation that releases Dapp's potential to onboard mainstream users. We’ll continue to polish the Mindtrixverse based on that.

Special thanks to @bz_bbclub for helping clarify the charts above. 😎