Inspiration

We both really like the idea of trading card games in real life and in games. The rise of NFTs and collectibles in the blockchain world and trading of these unique assets on popular sites like OpenSea inspired us to build something similar for the Lisk Ecosystem. We also wanted to use blockchain technology to create something fun and unique.

What it does

Lisk Cards are digital trading cards that are stored on the blockchain. Users are able to mint new cards using LCA tokens. New cards are generated randomly so it's always a surprise what you will get! After creating a new card the user now owns it in their account, they can keep it and grow their collection, sell it on the public marketplace or even destroy it.

The marketplace is where collectors are able to buy and sell cards. If someone has two identical cards, they might want to get rid of one by selling. Or if someone has a very rare card, for example a golden card with a Lisk logo and 4 stars, they can ask a lot of tokens for it on the marketplace. If you buy a card then it will become your property and it's assigned to the buyers account.

The statistics page gives a quick overview of the rarest card on the chain, the most sold and the most expensive card sold. And it shows all the cards that are destroyed by the Lisk Cards users.

The theme and images of the cards are inspired by the Lisk and crypto community. For example, we've implemented cards displaying the founders of Lisk, Max & Oliver, and other familiar images like the Moon and the Lisk Rocket.

For demo purposes, after someone logs-in with a new account they can simply add funds. This works similar to a traditional faucet.

How we built it

For our collaboration we used a shared repository on GitHub to be able to develop on it simultaneously. We went with a Typescript codebase to make use of its type magic and all the benefits that comes with that. Our frontend utilizes the React framework and Ant Design was our choice to create most of the components. The blockchain application is using the new Lisk SDK version 5.1.0. We created a custom module called 'lc'. This module contains the following custom assets (also known as custom transactions):

  • MintAsset
  • SellAsset
  • BuyAsset
  • DestroyAsset
  • CancelAsset

Also, there are two events which the frontend can subscribe to:

  • cardMinted
  • cardSold

To make it easier to retrieve information from the blockchain, a custom plugin was also created: ‘lcApi’. The plugin can invoke the following actions:

  • getAllCards
  • getCardsOnSale
  • getGraveyard
  • getCardById
  • getCardsByOwner
  • getCardsOfType
  • getNewestCard
  • getStatistics

The cards are created using the SVG image format, which allows developers to build high quality scalable graphics with only code. This code can be adjusted using JavaScript, so the card images are all created dynamically without the need to 'pre-render' images. Each card is represented by a simple short code string. For example "c3s2i8" or "c7s3i5" this makes storing the cards on the blockchain far more effective and cheaper than storing the actual image file. Also no other, centralized, storage method is needed.

Challenges we ran into

One of the challenges was using random in a blockchain world. This was solved by using the package seedrandom and using the transaction id as a seed, since this is the same across nodes. And then generating deterministic random numbers.

Accomplishments that we're proud of

We really enjoy the result and being able to bring something new to the Lisk ecosystem. Lisk Cards has become a fun and addicting collectibles trading platform powered by Lisk which hopefully can grow in a mature and popular product.

What we learned

We really liked learning how to use the new things that comes with this version of the Lisk SDK. It brings a lot of handy features to the table that greatly increases the speed in which you can build a blockchain application. Bootstrapping the blockchain with Lisk Commander and adding boilerplate for custom modules and assets became a real piece of cake!

What's next for Lisk Cards

One of the next steps is to test the project with multiple nodes running the blockchain and make improvements to the front and backend where necessary.

We also have a lot of ideas to improve Lisk Cards, some examples:

  • Transfer a card to another owner without the need of the marketplace.
  • A feature to have a card on sale for a limited time, for example only for 7 days and until a certain block height is reached.
  • Use the Lisk NFT standard.
  • Trade in a certain amount of cards for a new one.
  • A completely new cards theme, or perhaps several themes.

Feel free to try out the project at lisk.cards and check out the code at github

Share this project:

Updates