Build a Passkey Powered Guestbook Dapp
This section walks you through designing and building a decentralized application (dapp) that interacts with a smart contract guestbook, allowing users to read and write public messages. The tutorial also implements a passkey-powered smart wallet for user authentication.
That smart wallet is built with Smart Account Kit and the OpenZeppelin Smart Account contracts, and its transactions are submitted by the OpenZeppelin Relayer running the Stellar Channels plugin.
Overview
In this tutorial, we'll walk you through building an old-timey internet guestbook. (Trust me, they were all the rage back in the day.) We'll examine how the project is constructed, starting with the smart contract, then turn that deployed contract into a "bindings package" we can integrate into our frontend. To authenticate users we'll use Stellar's passkey support via Smart Account Kit, giving each user their very own OpenZeppelin Smart Account. After this tutorial, you'll have a solid understanding of how smart contracts and web applications can work together, plus practical examples for integrating passkey-powered smart wallets into your own projects.
The Guestbook Contract
The heart of this project starts with our smart contract. This smart contract will, in essence, act as a database for our guestbook messages. Users will be able to write messages, read them, and edit their own previously submitted message(s). Additionally, the contract will be upgradeable, and it will require initialization.
Generate Bindings
Let's turn our attention to how we'll interact with the deployed smart contract. This is where the TypeScript bindings come in! But, I hear you ask: What are TypeScript bindings?
Passkeys Prerequisites
Passkeys are a great way to connect users with your dapp without the friction of seed phrases or browser extensions. Learn more on the smart wallets guide.
Setup Passkeys
With the relayer key in place, we're ready to put Smart Account Kit to work and get our users connected. This takes two files:
Dapp Frontend Walkthrough
So, we now have all the pieces in place, and we're ready to connect the dots.