Cycle Redesign Transaction History

Cycles, a virtual token that can be earned or purchased to increase computational power and functionality for your Repls, were introduced to the platform earlier this year.

The number of transactions has reached hundreds of thousands of cycles. And thanks to bounties, more members of the Replit community can now earn their own cycles!

Replit transactions once appeared something like this:

Although this view is straightforward, it can be challenging to understand exactly where your cycles are going—whether they are being spent on powerups, purchased, or given to other members of the Replit community via tips and bounties. Additionally, there is nothing useful you can do with this knowledge.

For the first version, the functionality of the cycles was our sole area of attention. We're rethinking the experience to concentrate on assisting you in learning where you spent or earned cycles on Replit now that there are even more things you can do with them!

I took on this project because I wanted to work on a more challenging engineering problem during my internship and discover more about the cycles team.

This project's objectives are to:

Create an expandable cycles transaction page for any future cycles products we develop based on replit Surface transaction IDs (so it is clear that each transaction is distinct).
Organize transactions into categories.
basic information about the transaction
The new page appears as follows:
Cycles, a virtual token that can be earned or purchased to increase computational power and functionality for your Repls, were introduced to the platform earlier this year.

The number of transactions has reached hundreds of thousands of cycles. And thanks to bounties, more members of the Replit community can now earn their own cycles!

How did we get there, then?
I divided my project into three stages:

interacting with the replit community to learn what they want to see on the transaction history page
Creating a rough concept and collaborating with our talented designer Larry to turn the requirements I gathered into designs.
working on the front-end implementation and database design in engineering.
Let's explore how cycles and transactions function on replit:

In Google Cloud Spanner, we have a table that represents transactions, users, balances, and wallets for interactions that call for holding cycles. For all transactions carried out on replit in this system, the transactions table serves as the source of truth.

Each form of purchase you may make on Replit has a database in Postgres, such as a table for powerups, bounties, tips, and more.