dashboard initial implementation

[digitalimplementer]

• [x] Menu
• [x] Hero
• [x] Token
• [x] Backers
• [x] History
• [x] Traction
• [x] Engineering
• [x] Community
• [x] Team
• [x] Community
• [x] Comparison
• [x] Roadmap

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
joystream-org	✅ Ready (Inspect)	Visit Preview	Feb 29, 2024 0:05am
joystream-org-storybook	✅ Ready (Inspect)	Visit Preview	Feb 29, 2024 0:05am
joystream-org-translation	✅ Ready (Inspect)	Visit Preview	Feb 29, 2024 0:05am

[bedeho]

Does not look right.

[digitalimplementer]

When working on token section I sticked to mobile-first and bem approaches. I ensured the markup is semantic and code is reusable. For instance, I created reusable components to represent info in widgets, tables, etc. To simplify styling of components I used such SCSS features as variables, mixins, functions (created those in a separate directory (styles/layout/dashboard). I ensured components have prop types specified. To implement complex features I used libraries that're already present in the project like recharts, react-responsive, pure-react-carousel. Token price chart includes area and bar charts combined. They have common x axis and separate y axises (bar chart's y axis is hidden) to represent info properly. The chart has custom active dot (active dot is represented by circle and line svgs, line is equal to chart's width and needed to intersect with tooltip's vertical line) and tooltip components. As for token release schedule chart, it is an area chart that has static reference line and custom legend in addition. As for token minting chart, it is a pie chart with custom labels and legend. It has support of mouseenter and mouseleave events applying conditional styling using classnames library. All charts have custom styling, functions to format tick labels, custom labels, tooltips, cursors, etc. As for the carousel, it has different quantity of visible slides specified according to media rules. It also has logic implemented to show or hide buttons to change slides. And the last but not least section feature is a table. I made it reusable so that it accepts columns (column must have accessor key specified), data and a classname to adjust styling if needed (it's populated than to table with classnames library) as props. Look forward to your feedback.

[bedeho]

@DzhideX are you able to perform a code review at this stage, as quite a lot has already been done?

[bedeho]

@msmadeline are you able to provide a preliminary design review of the implementation of the website so far, compared to the final designs: https://github.com/Joystream/joystream-org/issues/650#issuecomment-1845910654

Remember to check responsiveness across all screen sizes also.

Here is an example of an excellent detailed review from @KubaMikolajczyk

https://github.com/Joystream/joystream-org/pull/713#issuecomment-1815016413

[digitalimplementer]

Hey @DzhideX! Thank you for taking the time to review my PR. Your detailed feedback is incredibly valuable. I've planned to address your suggestions as follows: I am going to check the recharts responsive container behavior in terms of responsiveness as I think it causes the issue, then I am going to change the structure of dashboard-related components so that they are gathered in a single directory and after completing next sections I think I'll be able to take on translations. Thank you again for your time and expertise!

[bedeho]

After doing some review, I think its clear we need to revise the design of the exchange section, but we can do it as a last item, description here: https://github.com/Joystream/joystream-org/issues/776

[msmadeline]

Hey @digitalimplementer the implementation looks great!⭐ Nice job. Please have in mind that I did the review yesterday/today and I know that you are currently fixing some things so If any of my points is already fixed - don't worry about it.

Overall

1. Top nav

• buttons in a top navigation container should have 32px hight instead of 34px
• Top navigation buttons are not scrolling to sections

  2. Copy link button

• When opening the page from copy link button it's not opening with the section focused

  3. Charts

• Tapping on a price chart on mobile does not show the correct position of my tap
• It would be perfect If we could do the same interaction in the "Release schedule" chart as in "Minting" chart

  4. Tooltips

• tooltips cannot be cut when expanded

  5. Table

• Token allocation widget title should not be scrollable

  6. Gap

• I saw some issues with gaps beetween some sections so please see that from the MD breakpoint up - there should be 24px gap not 16px

  Button in the carousel section

• Please have in mind that the button should appear only when there is more exchange cards than the amount to fill the space but when the amount is not bigger than that or even smaller - the button shuld disappear. Please remember to add fade right where the button is

RWD - listed by sections

XXS bp

• The font size of a Token price in widget should be 32px not 24px
• The echange cards should all have 272px fixed width. Also please see that the gap between cards should equal 16px
• In the release schedule widgget the numerical scale in the chart should be responsive to the scale of numbers we have
• in addition to the prior point the tooltips should be responsive according to different screen sizes so they have to be display in a whole - not be for example cut in half
• In the supply distribution table the cells should fill the container that way they should distribute evenly

XS bp

• There's the same isssue with the exchange cards as in the XXS breakpoint
• Same for the numerical scale in the release schedule wdget
• Same with the token allocation widget

SM bp

• The font size in the token price widget should be 42px instead for 32px
• The exchange cards should have 360pc fixed width. Also There should be fade at the end of the section so please add it
• In the "Release schedule" widget there is the same issue with the numerical scale as in the previous breakpoints
• The same issue with "Supply distribution" widget as in previous bp's

MD bp

• The font size of the token price in a widget should beb 55px not 42px
• There is an issue with the stroke - there is overflow hidden on a slider container, It has to be there but it is positioned wrong and cuts the bottom border
• Also there should be a fade as well right where the button is
• In the "Supply staked for validation" widget and "APR on staking" widget the procentage data shoud be 55px of font size not 42px
• The same issue with the "Suply distribution" widget as in the previous bp's

LG breakpoint

• The font size of the token price in a widget should beb 55px not 42px
• In the "Supply" widget there is an additional 40px space on the bottom that shouldn't be here
• In the "Supply staked for validation" widget and the "Apr on staking" widget the text size of the procentage data should be 55px not 42px
• The same issue with the "Suply distribution" widget as in the previous bp's

XL bp

• he font size of the token price in a widget should beb 55px not 42px
• In the "Supply" widget there is an additional 40px space on the bottom that shouldn't be here
• In the "Supply staked for validation" widget and "APR on staking" widget the procentage data shoud be 55px of font size not 42px
• The same issue with the "Suply distribution" widget as in the previous bp's

XXL bp

• Same issues as in the XL bp

[digitalimplementer]

Hey @msmadeline! I truly appreciate you taking the time to review in detail my pull request. I am going to address the issues you indicated. Thank you again for your time and expertise!

[digitalimplementer]

Hi @DzhideX! The code of "Backers" and "History" sections is located in /components/DashboardBackers and /components/DashboardHistory directories accordingly. I bear in mind your proposal to restructure dashboard-specific components so I'll be gradually moving the code in /components/dashboard-page directory. I've also addressed previously specified issues with horizontal overflow.

Hi @msmadeline! Apart from implementing "Backers" and "History" sections I've also addressed the issues you specified. Moreover, I've made "Release schedule" chart interactive. The only issues specified I have doubts about are position of an active chart's dot on mobile devices that does not correspond to the position of tap and values of x axis of token release chart not being dynamic. As for the first one, the position of tap is represented by tooltip and an active dot vertical position will vary depending corresponding to Y axis value. As for the second one, the values are dynamic. In our case we have months from 0 to 29 and a function to format ticks, as per figma I specified the x axis to show only numbers divisibe by 5. Let me know if I am missing anything here!

[msmadeline]

Hey @digitalimplementer amazing implementation! Very impressed, the list of issues is pretty short⭐

XXS breakpoint

• There was a small mistake made by the last designer - sorry for that! The gap between backers cards should be 16px instead of 15px

XS breakpoint

• Same situation as in a previous breakpoint

SM breakpoint

• Something went wrong in the Backers section in a "Final venture tound" widget. The paddings are right but the content inside is not in the middle. There is wrong gap between the title and content - it should be 16px. Also the size of the number data should be 42px instead of 32px

MD breakpoint

• In the Backers section in the "Final venture round" widget the data number has a wrong text size - it should be 55px instead of 42px
• The space between 2 sections should be 160px - please check again If you got it right because I can't really tell

LG breakpoint

• There is a wrong margin from the right side of the page - it should be 32px
• In the Backers section in the "Final venture round" widget the data number has a wrong text size - it should be 55px instead of 42px
• I think that in the history cards the image is a little bit too big and takes away space for the next - because of that the space for the text is too small. Cards have a good hight though so the image should be shorter imo.

XL breakpoint

• The hight of the backers cards should be 96px

• In the Backers section in the "Final venture round" widget the data number has a wrong text size - it should be 55px instead of 42px
• The same issue with the image as in the previous bp

When it comes to my previous feedback

1. Please can you explain the first matter to me again because I'm struggling to understand
2. When it comes to the scale - it's fine but please make it that it always shows the first and the last number ( regardless of wheather they are divisibe by 5) - then it will be perfect

[digitalimplementer]

Hi @DzhideX! Bearing in mind your proposal to restructure dashboard-specific components I've created dashboard-page directory in /components and placed the code of "Traction", "Engineering" and "Community" sections there. If you confirm the approach is okay I'll gradually move previously created components there.

[digitalimplementer]

Hi @msmadeline! I've addressed previosuly specified issues. The only proposal I've not yet addressed is the image height ("History" section) due to the fact to change image's height and make it fill in the container I need to change its ascpet-ratio. Thus, image's quality gets worse. Please let me know if this should be done anyway so that you can take a look. As for your request to clarify the issue with an active chart's dot on mobile devices not corresponding to the position of tap ("Token Price" chart), my point is that an active dot would be as high as its corresponding Y axis value (screenshot) and tooltip would reflect the tap (or click) position. Please let me know if I am missing anything here!

[digitalimplementer]

@bedeho

Stage	Estimated, h
Exchange	8
Team	12
Community	12
Comparison	8
Roadmap	6
Possible fixes	16

[msmadeline]

Hey @digitalimplementer Nice job 👍I found a couple of issues

Overall

1. There is an issue with all of the widgets form the traction section as they should fill the container, also something is wrong with the bottom padding inside the widgets with charts - I think the charts overlap the bottom padding and it creates less space from the bottom. Remember that charts shoulld also fill it’s container and with that said the size of the columns should adjust

2. There seems to be an repetitive ssue with the gap between the larger sections - plese have that in mind

3. Also the title in the first widget of the "Engineering" section is missing everywhere ( "Github stats")

4. There is also a wrong gap between the community cards - should be 16px form the XXS - SM bp - but that's all my fault I forgot to adjust this in the deisgn, very sorry!

5. The number of the contributors next to the section title is missing everywhere

XXS bp

• There is an issue with all of the widgets form the traction section as they should fill the container, also something is wrong with the bottom padding inside the widgets with charts - I think the charts overlap the bottom padding and it creates less space from the bottom. Remember that charts shoulld also fill it’s container and with that said the size of the columns should adjust

• There is a wrong gap between larger sections - it should be 80px

• There is a title missing in the first widget of the Engineering section - “Github stats”

• Something went wrong with the image in the DAO daily standup card - it should be visible from the left side

• Gap between community cards should be 16px

• The number of the contributors next to the section title is missing

XS

• the same issues as in the previous bp

• The same issue with the gap between all of the big sections - should be 96px

SM bp

• The same issues as in previous bp's

• The text size of the data inside of the traction section widgets should be 42px instead of 55px

• The same issue with the gap between the big sections - should be 128px

MD bp

• The same issues as in previous bp's

• There is a wrong layout of the widgets in traction section. There should be 2 widgets in one row instead of all of them just placed vertically

• The same issue with the gap between the big sections - should be 160px

LG bp

• The same issues as in previous bp's

• The gap between big sections should be 160 px

XL bp and XXL bp

• The same issues as in the previous breakpoints

[digitalimplementer]

Hey @DzhideX! Following your suggestion, I have relocated the code for the page to the dedicated "dashboard-page" directory. So, the code for "Team", "Comparison" and "Roadmap" sections can be found there (e.g., /components/dashboard-page/Team). I've also ensured that the previously identified issues have been addressed. With ui being complete for the page I am moving on to api integration.

Hey @msmadeline! I've ensured that the previously identified issues have been addressed. For the "Roadmap" section I've leveraged the data currently presented on the dedicated /roadmap page to implement the functionality outlined in the "User stories".

[msmadeline]

Hey @digitalimplementer Incredible job! ⭐ Very impressed. Found only few issues.

XXS

• there is an issue with a working groups carousel. When I click on the button it’s not displaying the next card properly. The last one is not displayed at all. Also there is too much fade which makes it hard to read the actual data from cards.

SM

• Something is wrong wth the look of the $ bar on the "Positioning" widget - there is not enough space for the last amount

MD

• The gap between the Jsgenesis cards should be 24px instead of 16px

LG

• There is something wrong with the padding of the entire page - should be 32px from both sides
• Wrong gap between the Jsgenesis cards - it should 24px
• The same issue with the last $ bar on the positioning widget

XL

• Wrong gap between the Jsgenesis cards - it should 24px
• The same issue with the last $ bar on the positioning widget

XXL

• the same issues as in the XL breakpoint

[DzhideX]

Here's the updated copy for all of the text on the page (let me know if I've missed anything) @digitalimplementer:

• Price: Displays the current trading price of the token, its percentage change from the last week, and a detailed daily price chart with a volume chart overlay.
• Marketcap: The total market capitalization, derived from multiplying the current price by the circulating supply of tokens. Percentage change from the previous week is also shown.
• Volume: Total trading volume over the past 24 hours for markets trading Joystream. Percentage change from the previous week is also shown.
• FDV: The theoretical market cap if all tokens were in circulation, calculated by multiplying the current price by the total supply.
• Supply: Shows the circulating supply (total number of tokens currently in circulation) and total supply (the total amount of tokens that exist, including those not currently circulating) of Joystream tokens.
• Where to Buy JOY: Lists trading markets for JOY, the current 24-hour trading volume, and the capital needed to move the price by 2%.
• Release Schedule: A graph showing the release of JOY tokens into circulation from the genesis block to when all tokens will be fully circulated. Note: The vesting happens linearly (i.e., a chunk of JOY is released every block or every ~6 seconds).
• Token Allocation: Displays allocation of tokens on genesis block for different purposes. It shows absolute values, percentages of total supply as well as liquidity percentages of those tokens at genesis block.
• Minting: A pie chart indicating the percentage of tokens minted within the last year allocated for different purposes.
• Annual Inflation: The annual increase in the number of tokens, presented as a percentage of the total supply.
• Supply Staked for Validation: The percentage of the total JOY supply staked for validation purposes.
• APR: The Annual Percentage Rate (APR) represents the yearly return you can expect from staking your assets on our platform. It quantifies the rewards earned from supporting the network through staking over a one-year period.
• ROI: A table showing the potential return on investment based on the time the tokens were purchased.
• Supply Distribution: A table displaying the distribution of JOY tokens across various address ranges and the percentage of the circulating supply they represent.
• Including: Highlights several of Joystream's most significant investors. The complete list includes over 40 backers.
• Final Venture Round: At its final venture round in March of 2022, Joystream raised $5.85 million which brought the total fundraise to $13 million at a $60 million valuation.
• Content creators: The current number of content creators, the weekly change, and a graph showing the trend over the last few months.
• Videos: The current number of videos, the weekly change, and a graph showing the trend over the last few months.
• Comments and reactions: The current number of comments and reactions, the weekly change, and a graph showing the trend over the last few months.
• NFTs: The current trading volume of NFTs, the weekly change, and a graph showing the trend over the last few months.
• NFTs: The current trading volume of CRTs, the weekly change, and a graph showing the trend over the last few months.
• Chain Metrics: This section provides key performance indicators for the blockchain's health and activity.
• Average block time: The average duration in seconds for the network to produce a new block
• Transactions: The number of transactions created on the blockchain since the genesis block. The weekly change in this value is also shown.
• Holders: The total number of accounts holding more than 0 JOY. The weekly change in this value is also shown.
• DAA: The number of accounts that have interacted with the blockchain in the last 24 hours. The weekly change in this value is also shown.
• Github stats: Statistics from the Joystream GitHub organization, covering all active public repositories.
• Stars: The total number of stars across all public Joystream repositories.
• Commits: The total number of commits across all public Joystream repositories.
• Commits this week: Number of commits made to Joystream’s repositories in this week.
• Open PRs: The total number of open Pull Requests across all public Joystream repositories.
• Open issues: The total number of open Issues across all public Joystream repositories.
• Repositories: Total number of public repositories associated with the Joystream GitHub organization.
• The total number of users following the Joystream organization.
• Contributions: A graph tracking the number of commits to Joystream’s repositories over time.
• Contributors: Key contributors and developers involved in Joystream’s projects and repositories.
• TweetScout: The TweetScout score and level of the official Joystream twitter account. To learn more about it, follow the link below.
• Featured followers: Joystream Twitter account's most prominent followers.
• Open Events: Upcoming events on Joystream’s official Discord server.
• Council: Council Members are elected by stakeholders in the system to act in the long-term interest of the platform. They are responsible for allocating resources, and hiring working group leads to run the platform's day-to-day operations.
• Current Term: The term number associated with the current council. This number denotes the number of different councils that were elected since the genesis block.
• Term Length: The duration of the current council term.
• Information about the current council, including election time, term duration, salary, and council members.
• Times Served: The total number of terms served by an individual as a councilor.
• Working Groups: A working group is an organizational body, subject to the oversight of the council, which is responsible for the day-to-day functioning of some subsystem of the Joystream platform. There is exactly one working group per subsystem.
• Jsgenesis: Jsgenesis is the company and legal entity initially responsible for building and developing the Joystream platform. Our role is to build the infrastructure, network and tools so that the users have a reliable foundation to keep the project running.
• Positioning: Compares Joystream with other content protocols and services in both the web2 and web3 spaces.

[bedeho]

@DzhideX Questions

Do we want the gleev link at top middle of page to link to gleev?

No, actually I don't know why that even made it on the page.

Do we want the button in the top right to be a discord chat widget or just redirect to our discord server?

No, lets remove it, we don't have an obvious solution

Where do we get the content for the history section?

No, actually we don't. Lets hide for first release.

What values do we want to use for the Comparison section? Is FDV ok atm?

Yes, FDV is fine.

[bedeho]

Can we do this as well?

https://github.com/Joystream/joystream-org/issues/764#issuecomment-1937045704

[digitalimplementer]

Can we do this as well?

#764 (comment)

I'm sure that we can add this feature.

[bedeho]

TODO

1. Magda finds better breakpoints for header on landing page.
2. Magda prepares loading states
3. Alex will hide history section for now
4. Alex will add a section to the documentation which describes how a non-technical user and add or remove history milestones to the website.
5. Alex fixes broken FDV value presentation in positioning table
6. Alex implements loading states
7. Alex removes Gleev & chat buttons on standalone dashboard page
8. Magda does final design review
9. Edvin does final engineering review
10. Alex implements any required changes
11. We go live 🚀

[msmadeline]

Hey @bedeho @digitalimplementer @DzhideX My part is done. I've designed a version of the dashboard with all of the widgets in a loading state. I displayed it for you in a single user story but basically we need to take a "Skeleton loader" component, make it a fixed proper size and replace any widget/card that we want with it. It is also animated

figma link: https://www.figma.com/file/w458eXFjDWdJVrablD8aBs/Dashboard?type=design&node-id=3798-153889&mode=design&t=6EPwDJkK4iB9SRoX-4

Also I've adjusted the larger breakpoints for header ✅

[msmadeline]

Hey @digitalimplementer Nice job , these are some issues that I found

Overall

• Seems like you deleted the "+smth last month" copy from twitter and telegram - telegram is fine but you need to make the main data so (22k etc) and logo be in the same line because now it looks a little bit off

• there seem to be an issue with the pacing between numbers in a contributions widget, Can we improve it?

XXS

• Something is wrong with the color of the numbers in a token price widget

• On this breakpoint there’s no need for the placement card

• In the minting widget - the numbers are slightly going out of the widget, maybe they should be a little smaller like 12px

• Something is wrong in the open events section - the “today”copy is not visible and the card is cutting in the off place - you can barely see the information in the card and when you scroll using the button it’s even more off - I think it’s better to remove the fade and the button and just let user scroll the cards carousel If they want

XS

• The same issue with th color of the numbers in a token price widget
• Inside the exchange cards there is wrong padding - it’s suppose to be 16 px

• In the videos uploaded widget the numbers on the left are too close to the end of the widget. It makes it look like there is no padding. Can we change that?

• There’s no “today” events, did we drop it or smth?

SM

• Wrong text size of the procentage data in the supply staked for validation and APR on staking cards - should be 42px

• In the videos uploaded widget there is the same issue with numbers going beyond the widget. Maybe we should align numbers to the left

MD

• till weird spacing between numbers under the contributions widget

• In the councl card the “View past councils “ button shuld be under the term length info - so aligned to right

LG

• In the minting widget - there’s to much space under the chart data pins. Also you can make the chart bigget at this point?

• Also there is overall wrong padding on the entire page - on the right side it's less than 32 px

• There is wrong layout of the information in the enginenring card

XL

• The same issue with the button in the council card
• Same here with the minting widget
• Same with the layout of the github stats card content
• In the council card there is something wrong with the padding inside the button and also with the positioning of the button - should be more aligned to the right

[DzhideX]

(pasting from Discord)

Here are some final thoughts:

• Traction cards really should use M when they go over 1 million in value.
• Contribution graph is still wrong. The months are ordered but now the days aren’t.
• Working groups carousel still needs a bit work, the last one is hard to scroll to (maybe a hidden element might be a fix idea?). Can we also remove all WGs here which don’t have a lead, workers and where budget == 0?
• What link do we want to use in Jsgenesis section @bedeho?

[bedeho]

What link do we want to use in Jsgenesis section @bedeho?

Which link?

[DzhideX]

@bedeho I meant for the anchor element in the bottom left corner in this section (the "Read more ->" link):

[bedeho]

ah ok, lets link to www.jsgenesis.com

[digitalimplementer]

Hey @DzhideX! I've addressed the issues you raised. As for "Comparison" table, as I see, there is no dynamic data to populate the table with, so I've just changed the value of Joystream's FDV and provided the skeleton for the section.

Hey @msmadeline! There are a couple of things I'd like to clarify:

• "Contributions" x-axis ticks are formatted according to Figma. To address the issue of large gaps between ticks, I added a value of "30" to the daysToShow parameter;
• I'm not quite sure I understand, could you clarify what "placement cards" mean?
• "Exchange" options (xs bp) have 13.75px inline gap between data container and border; if padding-inline is set to 16px at 425px, the layout breaks. So, I set padding-inline to 16px from 435px;
• "Today" events were not visible because there were no events that day;
• could you elaborate on padding issue at lg bp? It seems it's 32px (screenshot);
• since "Minting" chart is in a grid, it has the same height as "Token allocation" table. Increasing the height of the chart container seems not to be influencing the size of the chart, so to address the issue of large gap between the chart and the legend I set margin-top: auto for legend container;
• could not reproduce the problem of "View past councils" button text wrapping after changing the position of button. Let me know please if the problem persists;
• could you elaborate on "Comparison" table. Should I wait for you to change some text properties in the design file or just increase the font-size to 14px, for example?

Thanks in advance for your time!

[msmadeline]

@digitalimplementer

Contributions" x-axis ticks are formatted according to Figma. To address the issue of large gaps between ticks, I added a value of "30" to the daysToShow parameter;

• Yes but arent they wrong still? There is a random "Feb" in the middle of it. which I think should be at the end of the line. If we can't do anything about the gap between, then I guess it's fine but maybe we can at least put the numbers in a right order? Correct me If my thinking is wrong

I'm not quite sure I understand, could you clarify what "placement cards" mean?

• I meant the "placeholder cards" sorry

"Exchange" options (xs bp) have 13.75px inline gap between data container and border; if padding-inline is set to 16px at 425px, the layout breaks. So, I set padding-inline to 16px from 435px;

• When it comes to the exchange cards. In the screenshot you can see that the content is going outside the card from the bottom of it - that's the issue there. The card have to hug the content properly

could you elaborate on padding issue at lg bp? It seems it's 32px (screenshot)

• Yes the lg padding seems fine now. Maybe something broke on my side before

since "Minting" chart is in a grid, it has the same height as "Token allocation" table. Increasing the height of the chart container seems not to be influencing the size of the chart, so to address the issue of large gap between the chart and the legend I set margin-top: auto for legend container;

• Ok I understand that, Overall it seems fine

could not reproduce the problem of "View past councils" button text wrapping after changing the position of button. Let me know please if the problem persists;

• The positioning of the button is good now but still there's a problem that the copy should be in one line

could you elaborate on "Comparison" table. Should I wait for you to change some text properties in the design file or just increase the font-size to 14px, for example?

• I though we just droped it. But If we keep it then I need to try it out first in figma. Please work on the columns I show on the screenshot. I think they should be a bit higher maybe like 20px height. Right now they are not huggin the data properly