Rethinking and Relaunching the Demo Wallet

At the Stellar Development Foundation, we spend a lot of time thinking about how to help partners build on the network. Whether it’s closing gaps in documentation or adding details to make our protocols more robust, we make sure anyone who wants to integrate has the information and support they need, so we’re excited to announce a major upgrade to our demo wallet.

The demo wallet is an open-source mock wallet application, with an open-source code repository, that lets anyone test out our ecosystem protocols. It replicates the experience of creating or importing a Stellar account, adding assets, and performing transactions with those assets — all with an explanatory log that shows network calls and the payloads sent between them as well as informative tooltips that help teach users about what’s possible on the Stellar network.

Previously, we offered various protocol demo clients — for our deposit, withdrawal, and cross-border payment APIs — in separate repos. Then, our ecosystem evangelist, Tyler, built the origins of the demo wallet for a tutorial that would allow users to clone the repo and create their own wallet. Each element was helpful on its own, but we needed to tie them all together to create a unified source for testing with an intuitive UI that would make it easy for both software engineers and less technically inclined users to learn the happy path for a protocol. As a bonus, we created one codebase for all demoing to increase the ease of further development and maintenance.

Looking at the usage of the original tools gave us a baseline feature set, but we also wanted to look at the new tool as a product instead of a legacy tool we need to keep updating. Consolidating separate tools into one is an easier way of maintaining code and streamlining the look and feel. To that end we updated the design to be more in-line with the Account Viewer and utilized our new Stellar Design System. This design system is a modular React system that allows us to quickly build-out UI for our web tools. We’re undergoing a general push across tooling to streamline the SDF look and feel. Keep your eye out for a blog post on the Stellar Design System!

Instead of asking developers to come up with a UI design on their own, we collaborated across teams; the team that develops and maintains our web tools, and the team that works closest with anchors. This dedicated design effort transitioned the look from this:

To this:

Instead of continuing the focus of a mobile wallet, we expanded on the idea of a general wallet client that can utilize a variety of assets and interface with more than one protocol without the need to change URLs and reset user information.

We’ve also added more links to resources so it’s easier to find information on each SEP as well as general terms.

When we built the wallet, we wanted to create both a robust testing tool for our partner engineers as well as an educational experience for anyone wanting to better understand how Stellar protocols work.

Developers who want to test their integrations on testnet can provide a keypair to an existing account or generate a new one. They can create trustlines with any asset and perform any transactions that the asset's issuer allows. For advanced users, the Stellar Laboratory is an additional resource that can be used to build and sign transactions; for example, if you want to test the withdrawal of an asset you’ve issued, you can use the “Trade” transaction to swap XLM for the asset.

But usage isn’t just limited to developers — anyone who wants to witness a deposit or payment via Stellar protocol can visit the page, use the instructions to acquire Stellar reference tokens (SRT), which are our example tokenized assets for use on the test server, and get a feel for what’s involved in a deposit, withdrawal or sending a payment.

We’re looking forward to adding even more functionality to the demo wallet. In addition to Hosted Deposit and Withdrawal (SEP-24) and the Cross-Border Payments API (SEP-31), we’ve recently added Deposit and Withdrawal API (SEP-6) and Regulated Assets (SEP-8). We’d love to hear from the Stellar community about what else you’d like to see in this tool!