Dev subDAO: Dashboard Portfolio design enhancements to add value for user - Part #2

Bounty
1

Type: Developer DAO
Title: Addition of structured information for each token in wallet to add more value for the user
Funding: Pre-Funded
Max Reward (Create): 20,000 $GRAPE
Max Reward (Complete): 500 $USDC
Date Created: 04/26/2022
Date Complete: 05/18/2022
Restrictions: implement into live dashboard after testing and grant approval
Language: CSS / React / Javascript

Submission Instructions:

Contribute to the Grape GitHub repo Grape Labs · GitHub in specific Grape-Labs/grape-dashboard

Description:

The information available when a users views a token in the dashboard is limited and with a little effort can be improved dramatically. This is part #2 of an overhaul in the portfolio area of the Grape dashboard. The current display is shown below for a token:

image

This bounty focuses on adding an improved informational tabbed area called “info” which is displayed when a user clicks the down arrow for each token and selected the Info tab.

It is necessary for the first bounty to be implemented with the tabbed area before this can be started. Developers could coordinate if there is more than one person working on these two connected bounties.

Deliverable:

  1. When a user clicks on the “down arrow” the content display is broken into two sub sections. This bounty focuses on the second “Info” section. The user will need to select the “Info” section for it to be displayed as the “Price” section is the default display.

image

  1. It should include up-to-date information with the:
  • Mint address with a copy and link icon
  • Max Total supply.
  • Fully Diluted Market Cap
  • The two existing sections that grape offers (top holders, recent transactions)
  • Token website
  • Social Channels (if available)
  1. When a user clicks on the Top Holders and the Recent Transactions links, the existing Grape pop-up screens will be displayed as-is.

Ref: I took the sample info from Sonar with modifications only as an example. It is not the intention to copy them exactly. But their setup gives the a good illustration of what is needed with additional information added.

Acceptance Criteria:

  1. Design works in a responsive manner (on phones, smaller screens), is clean and follows the existing Grape color scheme / theme. All required items in the deliverable area has been included and is tested as working on various icons (big and small cap)
  2. Any code added will not break any existing dependencies and is integrated into the existing repo. Libraries may be updated and build can be updated as long as all existing functionality is compliable.
3 Likes