The source code of the front-end app of Knives Legacy
View Live Version
ยท
Knives Collection
Table of Contents
This repository contains the source code of the DAPP used by Knives Legacy.
The framework used for the development is VueJS version 2.0 under typescript
Knives Legacy is a collection of ERC721 tokens available on the Avalanche blockchain.
The collection sold out at 4444 NFT, they were released for free.
Once staked, your knives will start producing $SUPPLY, a utility token (ERC20) which is non-tradable, non-transferable and only usable in our system.
Each knife produces its own tokens independently of the others, so you have to think about claiming the generated tokens to turn them into ERC20 tokens usable in our eco-system.
๐ Check the collection on Kalao$SUPPLY is the Knives staking rewards token. It's an ERC20 token.
$SUPPLY has no max supply.
There is no liquidity pool behind the token, as it is not connected to the economy, and only usable intrinsically for the raffle system.
It's what we can call a utility token.
The $SUPPLY token can only be utilized to buy raffle tickets.
๐ Check the token on SnowtraceThe raffle system is a way to give back to the community, and to reward the holders of Knives Legacy.
These are fully on-chain raffles, which means that the winners are chosen randomly thanks to chainlink VRF.
Stake your knives, produce your $SUPPLY, and choose the raffles you like to participate in!
The raffle tickets can be bought with $SUPPLY, or with others specific tokens.
I was commissioned by the Knives Legacy team to develop the front-end of their DAPP, With a very tight deadline ( one week ).
I chose to use VueJS version 2.0 under typescript for development and tried to use the Store in the most typed way possible.
Indeed, it was something that I missed a lot during my previous development with VueJS.
The Store was very unorganized, and it was difficult to know what was being used and why.
So I decided to organize the logic in the following way:
- One folder per module
- The state types in a sepate file (types.ts)
- The state in a separate file (state.ts)
- The mutations in a separate file (mutations.ts)
- The actions in a separate file (actions.ts)
I found that this organization allowed me to do better and to use less code in the components. Moreover, it will allow me to reuse the modules in other projects.
As for the design, I had to work with an existing design that was already implemented under react on another website.
So I had to inspect this website, improve the design and make it responsive as it wasn't usable on mobile.
I am not very comfortable with css, but I find that I am improving from project to project.
To get a local copy up and running follow these simple example steps.
- npm
npm install npm@latest -g
- Clone the repo
git clone https://github.com/YassineSMARA/knives-legacy-front.git
- Install NPM packages
npm install
- Launch the app
npm run serve
- Navigate to http://localhost:8080/
Yassine SMARA
Discord: Krabs#9454
Mail: 1yassine.smara@gmail.com