AAU, I see the trust graph of an user

[dayksx]

As a user, I see the trust graph of an account So that I see transparently the trusted peers of any account

---

Technical notes:

• Go with a list similar to the list of snaps assertions, except if using a graph libraries is approximatively the same effort
• If graph representation: Possible Graph libraries (d3js.org, deck.gl, D3.js, Chart.js, Highcharts, Three.js, Vis.js, Plotly.js)

Out of scope:

• Cover in the user profile header

Acceptance Criteria:

• [x] Given that I am navigating in an user profile I see on the header the trust graph with a max length of two edges

Definition of Ready

• [x] Figma design ready
• [x] Acceptance criteria ready
• [ ] Technical grooming done

Mockup design

=> FIGMA

[alainncls]

@dayksx I'd need a bit more info on:

• What is the "pre-set" MM trust graph info
• Is the trust graph the cool 3D graph on top of the profile page?

[dayksx]

@alainncls I have updated the user story, I removed the concept of "pre-set MetaMask trust graph. The cool 3D Graph on top of the profile page is out of scope, we are going to display a simple graph on the main page, leveraging a library such as:

• D3.js: This is one of the most powerful and flexible libraries for creating complex and beautiful data visualizations. It allows you to bind arbitrary data to a Document Object Model (DOM), and then apply data-driven transformations to the document.
• Chart.js: This is a simple yet flexible JavaScript charting library for designers and developers. It's easy to get started with and has a great API.
• Highcharts: Highcharts is a very popular library that makes it easy for developers to add interactive charts to their web site or web application. Highcharts currently supports line, spline, area, areaspline, column, bar, pie, scatter, angular gauges, arearange, areasplinerange, columnrange, bubble, box plot, error bars, funnel, waterfall and polar chart types.
• Three.js: If you're looking to create 3D visualizations, Three.js is a great choice. It's a cross-browser JavaScript library and Application Programming Interface (API) used to create and display animated 3D computer graphics in a web browser.
• Vis.js: A dynamic, browser-based visualization library. The library is designed to be easy to use, to handle large amounts of dynamic data, and to enable manipulation of and interaction with the data.
• Plotly.js: Plotly.js is a high-level, declarative charting library. It ships with over 40 chart types, including 3D charts, statistical graphs, and SVG maps.

[eriknson]

Let's go with d3.js imo

[jvelasquez]

I can see the graph in dev, but no "add to your circle" button at all. @alainncls , @satyajeetkolhapure we need to clarify this, but from the graph standpoint this is correct.

e.g. https://permissionless.snaps.metamask.io/dev/account/?address=0x381c5dd2c5f13d4d7d63f0c2318d58070a538c79