Redesign the token details page following the Figma designs.

Hey, we had made a change in the route for liquidity in this PR in swapr-dapp : SwaprHQ/swapr-dapp#996

This will have impact in some places in the dxstats. Would be good to take a look and fix this and we can plan a release when both of this goes Live together. We need to investigate where all we need to make this change and make in all those places. :)

The new fee Receiver address is 0xa68fad1e05a644414f4878ce5c5357be634bcf4c

Similar to how Uniswap has in their homepage and Pairs page.

This can be searched with the pair address though.

As part of the farming page, we need to redesign this page to have a better look and feel.

• Improve the readability of the page
• Add a link to the Swapr campaign, clicking on the link should take the user to Swapr farming page.
• remove the column TVL and add it as a % of Total value staked
• Add what tokens are being rewarded

• Add unique wallets interacted everyday, group by chain (swapped and liquidity provided)
• Add no of traded wallets
• Add cumulative volume (total volume of Swapr)
• Add cumulative transactions
• Total unique wallets interacted
  The above are things from DODO dashboard, could be good to add in our stats page.

We need to know which pools are being effectively used to make sure we incentivise the right pools.
The calculation for the pool's utilisation is

Utilisation = Volume / TVL of the pool in %

For this task, we would like to build a view to view the utilisation.

Pairs page

In this page(https://dxstats.eth.link/#/pairs), add 2 columns that calculates the utilisation for 24h and 7d.

Utilization(24h) = 24h volume / 24h average TVL
Utilization(7d) = 7d volume / 7d average TVL

Individual pairs page

https://dxstats.eth.link/#/pair/0xd45c3a746a22016b2ac77210bdc1cbde2b1aeee6

In this CRV-ETH pair, we should display the same detail as above, maybe under the chart. Also, display a bar chart that tracks the daily utilisation for the last 28 days.

Redesing the tokens page following the latest designs on Figma.

Add another page called Farms

The page design can be a simple table like the other pages like pairs and tokens.

The columns needed are:

FARM
TVL or total staked
How many tokens
Total LP tokens
Yield per $1000
APR and APY

Picking the inspiration from sushi.zippo.io

Post the first cut, we need to also include a filter for the following:

Active, Upcoming and Expired
if a farm is created by the DAO

• Move all useMedia() usages in a common place, and improve the naming.
• Remove TYPE component from theme.
• Use modules from swapr-sdk (e.g. chain mappings, utility functions, ...).
• Check for unused/useless code across the application.
• Reduce the margin between the sections' titles and the top bar on mobile.

Add top TVL pairs component on the pair list page.

Would be good to display a background for the textbar we have. Feels very buggy when interacting with it.

https://gyazo.com/d141021c74345a73f279b19b347d0870

https://gyazo.com/ec7cdd36c1fe6909a7d3b4083ad3ab12 on Uniswap Info, maybe good to "inspire" from this :)

The farming page was built as a stop gap arrangement. We need to have a look into it and see if we can make it better for desktop in terms of design.
And its totally broken in mobile, so we need a new design for how we could condense all that data into mobile viewport.

Fix incorrect prices and prices changes for a few tokens, on mainnet.

For an account that has staked tokens to a reward campaign, goto https://dxstats.eth.link/#/accounts and load that particular account.

The staked positions are not shown here.

Redesign the overview page accordingly to the new design.

When we open dxstats, the loader looks like this below:

2 things to update if possible,

1. Update the loader to look similar to how the loader is in Swapr (when loading the Swapr balance)
2. The value of the liquidity is available (as we can see from the charts), but for some reason the loader keeps on and on for about 20 seconds. Would be good to display the current time's liquidity and figure out what is causing this loading.

Mobile viewport is just buggy. Need to think about how to fix this.

Redesign the account section following the latest designs.

Replace blockscout with gnosisscan across the application.

We need to have a multi chain dashboard to view the summarised view of different parameters in our dxstats page.

1. Create a link "Dashboard" at the top of the menu
2. Display combined TVL and Volume for the last 60 days. We have this data already in charts, we could just use a stacked chart to show each networks data on top of each other.

Design could be similar to how DODO is using. https://legacy.dodoex.io/dashboard?network=mainnet

This task is part of building an overall multi chain dashboard and in future we would add data related to DAU, MAU, unique wallets connected, total fees received, SWPR bought back, best utilised pair, farms and more.

• Under farming page, sort by TVL by default
• Fix the broken icons. Can we use the hash from this? SwaprHQ/swapr-dapp@4d3a2e1
• Rename XDAI to Gnosis under network switcher

Modify the dashboard page accordingly to the new design:

The pair chart for liquidity/fees of a single pair, in the account page, never renders.

One of our users came to our Discord and messaged that he sees his data incorrect in Accounts page. Would be good to investigate and see if this look okay. If something is negative, change it to Red atleast. :)

Add the possibility to aggregate data by week on the overview charts, when M or Y is active.

Currently, a lot of tokens in dxstats do not have images, would be good to fix those.

In dxstats, it would be good to show what fees are we making and how much we are making across networks.

Would be good to show the Protocol fees that is in the FeeReceiver and also what are the different LP tokens that are in the FeeReceiver.
If there has been fees collected, we could also display the fees collected.

A small info about how much SWPR could be bought back with the total fees collected would be a good thing to display.

Redesign the pairs page following the latest designs on Figma.

We need to find a way to add the following metric to our dashboard.

DAU - Count of number of unique wallets that has transacted.
WAU - Count of the unique number of wallets that has transacted within the current week.
MAU - Count of the unique number of wallets that has transacted within the current month.

We discussed about this earlier and found that this will be too performance heavy in the frontend. So, if this needs update and aggregation in the graph side, feel free to have a go! :)

Top Bar that looks something like Uniswap info and it should contain the following data - Last synced, ETH price, SWPR price and DXD price
To the right, it contains link to Swapr, DXdao, Github of dxstats