BoStaking

This project makes depositing, withdrawing and viewing the history of your XAVA token staking easy and accessible. Users can chose an amount that they want to stake or withdraw, and have a discrete overview the history of their stake. It showcases the power and ease of use of creating a decentralized frontend for interacting with any smart contract, and capturing and displaying blockchain state in a chronological order.

This projects was built on BOS and powered by thegraph for chain indexing. The BOS component directly interacts with contracts on Avalanche chain for showing user its funds, staked tokens and allowing users to stake or withdraw their tokens. The BOS component requests data about users activity, that is stored with thegraph by listening and capturing data at emitted contract events. Tailwindcss was used for styling of the app. BOS doesn't support tailwindcss by default because developing on it does not include a node runtime, so there is no way to utilize tailwinds JIT compiler. The way I found a way around this issue is that for development pourpeses I used a precompiled all-included tailwind bundle (aprox. 3.3MB) which is ok for development but very slow for production. That way all of the tailwind classes are accessible to use during development. When its time to deploy the app to the users, the final jsx source code is parsed threw the tailwind compiler (or e.g. play.tailwindcss.com enviorment) and minimized css bundle with only the required classes (Usually couple of hundreds of KBs) is ready to be shipped to users