Squirelfi

Overview

Squirrellfi.io is the prettiest and fastest platform to track all your De-Fi moviments on the TELOS EVM. 

In just one click you are able to check your portfolio net worth, it’s composition, your transactions and many more.

Sections

All the relevant DeFi data is represented in one page in the next sections:

Price Moviments

In this section you are able to track the moviment value of your TLOS tokens in the last month.

You  can hover it to see the net value day by day.

Portfolio

Right here you can see the composition of your portfolio: TLOS tokens + ERC 20 tokens.

In the middle the net worth of the portfolio   in USD it’s displayed.

You can hover the chart to see its individual value.

As a plus, you can mark the labels of  as many tokens you want to to hide them and highlight the rest.

Historial

Here is listed all  your DeFi  transactions with the information necessary only: 

• Time 
• Asset (s) manipulated
• Addresses involved
• value of the transaction 
• Fee.

Tokens

Here is displayed a list with all the Defi ERC 20  tokens in posetion by the address with each amount

Design

The Designing Process was primordial for the team. We were aware about we don't wanted: another platform with irrelevant information for the users.  

We want to make a DeFI Platform with the next carachteritic

• Intuituitive
• Astonishing and Modern UI
• With only the revelant information

We took inspiration of the best platforms and finally we combine two design currents:

• Glassomorphism: to reflect the transparentness of the TELOS EVM
• Gradient Background: To show how the users can mix themselves in  the Web3 throuhg the TELOS EVM

You can check the result in site , the mockups in Figma and the Design Process in the Assets Section.

Code

The Source Code is on Github (github.com/Mengeroshi/telos-hackaton-project) as an Open Source Project. It was build with the next technologies:

• React js: Used as a base framework but modified to support Web3js.
• Material UI: Used to construct  the layout of the page and the Table of Transactions
• Web3js : To do the RPC querys to the TELOS EVM
• Chart Js: Library used to build the Line and Doughnut Charts
• React Router: To manage the routes on the page flow
• Telos.net Load Balancer : To obtain the data of the TELOS EVM
• Coingecko API: To fetch the month prices of TLOS and  last prices of ERC 20 tokens

The code is flow is the next:

A user type its address and press the button. The page makes a GRPC query to check its balance on TELOS EVM in order to verified if the address is valid. If it is, then it call the  balance of every ERC20 token balance listed here. After that the router takes you to "/portfolio" that do  the next as the page renders itself:

• A call to Coingecko API to fetch month prices of TLOS and paint the on the Line Chart.
• Another call  to Coingecko API to obtain the prices of ERC 20 tokens and paint them on Doughnut Chart.
• A call to the internal state to paint the ERC20 balances on Tokens Section
• A last call to TLOS EVM to bring the transactions of the last 1000 blocks.