User Preview
Explanation Modal (not filled)
Depth Example
Table Data

Magic Analytics System [MAS]

By: Reflex

MAS is a bare-bones replicated version of Magic Eden a well known NFT online marketplace, similar to those of Opensea but running on the Solana blockchain. While this is just a bare-bones version it adds in a whole new system for analytics to allow users of any experience to read charts and understand their purchases and how they can replicate good and bad trades from their previous trades.

Project Story from devpost is at bottom FYI

Issues

While at the moment there is nothing major, I would set for the future potential plans to increase API limit from 500 to a larger number or even an option to get all. Secondly, I would also fix some minor chart issues (not a big deal)

[ ] Chart Adjustments
[ ] Magic Eden API Changes (Noted in the Documentation section)
[x] Re-render too much (fixed)

Features

Chart with easily readable data and specific grouping based by day
Table with values of the collection name, purchase price, date action was completed, type of action, and, the token ID. Having these you can search for items of the collection name or even go to see your old NFT for some nostalgia or to share with others.
Simple integration if needed, where a separate webpage could be constructed using this and you can instead just ask the user for wallet ID or scrape from Magic Eden if implemented.

Documentation

All you need to get started with this program is to initially run

npm install

Followed with, after installing modules

npm run start

It's as simple as that!

API Info As far as API usage goes, I used the https://api-mainnet.magiceden.dev/v2/wallets/wallet:/activities?offset=0&limit=500 endpoint as I needed to get all activity/transaction history and sort it by date of occurring and group them together. As I mentioned in the Issues is the endpoint, I would prefer if there was an option to start at offset 0 and also have the limit empty allowing for a list of ALL activities.

Also seeing an additional return item of the image itself or some sort of documentation to that would be helpful so you don't have to hit the collection or wallet tokens endpoint to get the image.

Framework & Other Info

Name	Info
React	[https://reactjs.org/][PlDb]
Axios	[https://www.npmjs.com/package/axios][PlGh]

Inspiration

The inspiration behind this project was based on the way the current analytics system is built. Well, more specifically where I believe it lacks heavy utilization and clear understanding for some users as it's tucked behind in the user tab.

What it does

Primarily what this new tab we have added to the Magic Eden (mock) frontend allows users to get more in-depth detail on how frequently they are spending and doing actions on Magic Eden and potentially identify patterns they consistently buy into that may have been profitable that they can return to and make another similar play. We would like to clarify though that the idea behind this is to actually be added to Magic Eden and not be a separate application but could also easily be made separate.

How we built it

This application was built on the react framework, and we utilized the activities endpoint in order to fetch 500 activities either recently or for a long time. Next after getting the information we decided to format all information and make a table and bar chart so the information can be more in-depth reviewed by the user such as seeing how many lists or sales they had in a singular day.

Challenges we ran into

More specifically because of this not "needing" blockchain connection we left that out and the actual wallet address to connect to the API is within the code but this can EASILY be swapped out to just grab wallet address either from the front or backend. The last issue would be the hard limit of 500 activities in the past and hopefully, if this does ever get integrated we can increase the limited activities request.

What's next for Magic Analytics System

Who knows? Magic Eden actual integration? Or maybe seperate and better integration and potentially a change of the chart and adding more specific rendering for the table to help with lag if any.

[dill]: https://github.com/joemccann/dillinger [git-repo-url]: https://github.com/joemccann/dillinger.git [john gruber]: http://daringfireball.net [df1]: http://daringfireball.net/projects/markdown/ [markdown-it]: https://github.com/markdown-it/markdown-it [Ace Editor]: http://ace.ajax.org [node.js]: http://nodejs.org [Twitter Bootstrap]: http://twitter.github.com/bootstrap/ [jQuery]: http://jquery.com [@tjholowaychuk]: http://twitter.com/tjholowaychuk [express]: http://expressjs.com [AngularJS]: http://angularjs.org [Gulp]: http://gulpjs.com