Development Grant Request: Implement new Validators page from provided UI design
Figma URL: Validator page
Current Page URL:
/validators for All Validators page/validator/:validator_address for Validators Details page
Implementation Period Until 30 November 2023
Additional Details:
- This grant request is for the frontend development of All Validator and Validator Details page.
- This project is written in ReScript
- We recommend to read through the codebase to see which component can be reused
- See reusable components in the
src/components/reusable folder
- When creating a new Component. The component should be abstract and pure
Development Guidelines
All Validators page
- Modify
src/page/ValidatorsPage.res
- Use mock data from
src/example-data/ValidatorExample.res
- Active Validators is used to filter the validators that have
jailed attribute (from mock data) equal to false
- Inactive Validators is used to filter the validators that have
jailed attribute (from mock data) equal to true
- All Show all validator
- Make sure that the validator list can be functionally sorted (ASC/DESC) by clicking on it's header
- By searching the validator's name with the search component, the table should show only matched validators
Validator Details page
- Modify
src/page/ValidatorDetailPage.res
- Show the details of the validator by using mock data from
src/example-data/ValidatorExample.res
- For
Voting Power, Node Uptime, and Oracle Data Report Uptime. you can design the parameter type as you wish
- the table shown at the bottom of the page showing "Oracle Report", "Reporters", "Proposed Blocks", and "Delegators" Tabs is slightly different from existing page, you can modify it directly
- For the Voting Power please use the existing component
<HistoricalBondedGraph /> as shown in src/pages/ValidatorDetailsPage.res
- The Node Uptime component is already implemented in the
<BlockUptimeChart /> component; however, it differs slightly from the mockup. You have the option to either make direct changes to the existing component or create a new one.
- You may create a new component for the Oracle Data Report Uptime or modify the ` component.
- The red color showing as the percentage of the downtime in 24 hours (100%)
- The green color showing as the percentage of the uptime in 24 hours
- The grey color showing as for a default state
table column width
if you see in pattern in image above in Figma
To explain further, if we consider the parent div to have a total width of 1072 pixels, I'd like to divide it into five equal parts, where each part is 214 pixels wide (equivalent to 20% of the parent's width). Additionally, I want one of the child columns to be 1.5 times wider than the others, which means it should take up 30% of the parent's width
Rescript code you create parent div with style below with percent width of child
code example
let tableGrid = style(. [
display(#flex),
alignItems(#center),
flexWrap(#wrap),
justifyContent(#spaceBetween),
width(#percent(100.)),
selector("> div:first-child", [minWidth(#percent(10.)), textAlign(#center)]),
selector("> div:nth-child(2)", [width(#percent(40.))]),
selector("> div:nth-child(3)", [width(#percent(10.))]),
selector("> div:nth-child(4)", [width(#percent(15.))]),
selector("> div:nth-child(5)", [width(#percent(10.))]),
])
Web Page Checklist
Contribution Guideline
Welcome to the Cosmoscan open-source project! We appreciate your interest in contributing to our repository. To ensure a smooth and collaborative development process, please follow these guidelines when submitting your contributions.
- Fork the Repository: Click the "Fork" button on the top right corner of the repository's GitHub page. This will create a copy of the repository in your GitHub account.
- Create a new branch for your changes.
- Ensure that your changes follow the project's documentation style and formatting guidelines.
- Test your changes
- Please submit only one pull request per issue.
- Please use pull request template as shown below:
Pull Request Template
**Issue:** #[Issue Number]
**Your Name**:
**Your Discord ID**:
**Your Email Address**:
**Overview:**
Briefly describe the changes made in this pull request and why they are necessary.
**Changes Made:**
List the specific changes made in bullet points.
**Screenshots or Visuals (if applicable):**
Include screenshots, GIFs, or any visual materials that help reviewers understand the changes.
**Testing:**
Explain how you have tested these changes, including any relevant commands or steps.
**Checklist:**
- [ ] Code follows our coding standards.
- [ ] All checks and tests must pass successfully on every existing criterion. Please do not introduce any additional test criteria in this assignment.
- [ ] Code must be reviewed by at least one of Band Protocol's designated reviewer.
---
By submitting this pull request, I confirm that I have read and agreed to the Contributor License Agreement.
**[Optional: Include any other relevant information or guidelines here]**
---
Review Process
All contributions will be reviewed by project maintainers. We aim to provide feedback and merge contributions in a timely manner. Please be patient during the review process, and feel free to respond to any feedback or questions from reviewers.
Getting Help
If you have any questions or need assistance, please don't hesitate to reach out to our team in Open Source Channel in Discord
Thank you for your interest in contributing to our Grants Program. We appreciate your support and look forward to your contributions!
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent