-
Notifications
You must be signed in to change notification settings - Fork 10
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Adds tooltip to the vouch chip icons (#65)
- Loading branch information
Showing
15 changed files
with
205 additions
and
149 deletions.
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
9 changes: 9 additions & 0 deletions
9
web-app/src/modules/core/routes/Validators/components/Vouch/FamilyIcon.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| export const FamilyIcon: React.FC<{ family: string }> = ({ family }) => { | ||
| const bgColor = family && family.length > 8 ? `#${family.slice(2, 8)}` : `#f87171`; | ||
| return ( | ||
| <span | ||
| className="inline-block w-3 h-3 rounded-full ml-2" | ||
| style={{ backgroundColor: bgColor }} | ||
| ></span> | ||
| ); | ||
| }; |
76 changes: 76 additions & 0 deletions
76
web-app/src/modules/core/routes/Validators/components/Vouch/VouchChip.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,76 @@ | ||
| // VouchChip.tsx | ||
| import React from 'react'; | ||
| import clsx from 'clsx'; | ||
| import { legendItems } from './legendItems'; | ||
| import { formatAddress } from '../../../../../../utils'; | ||
| import { FamilyIcon } from './FamilyIcon'; | ||
|
|
||
| interface VouchDetails { | ||
| inSet: boolean; | ||
| compliant: boolean; | ||
| epochsToExpire: number; | ||
| handle?: string; | ||
| address: string; | ||
| family: string; | ||
| } | ||
|
|
||
| export const VouchChip: React.FC<{ vouch: VouchDetails; index: number }> = ({ vouch, index }) => { | ||
| // Determine which icons to display based on vouch properties | ||
| const activeIcons = legendItems.filter((item) => { | ||
| switch (item.title) { | ||
| case 'In Set': | ||
| return vouch.inSet; | ||
| case 'Compliant': | ||
| return vouch.compliant; | ||
| case 'Non-Compliant': | ||
| return !vouch.compliant; | ||
| case 'Expiring Soon': | ||
| return vouch.epochsToExpire <= 7 && vouch.epochsToExpire > 0; | ||
| case 'Expired': | ||
| return vouch.epochsToExpire <= 0; | ||
| default: | ||
| return false; | ||
| } | ||
| }); | ||
|
|
||
| return ( | ||
| <span | ||
| key={index} | ||
| className={clsx( | ||
| 'inline-flex items-center px-2 py-1 rounded-full text-sm font-medium text-black', | ||
| )} | ||
| style={{ | ||
| backgroundColor: '#F0F0F0', | ||
| marginRight: '8px', | ||
| marginBottom: '8px', | ||
| }} | ||
| > | ||
| {activeIcons.map((item, idx) => ( | ||
| <span key={idx} className="relative group mr-1"> | ||
| <item.Icon className={clsx('w-4 h-4', item.color)} /> | ||
| <span className="absolute bottom-full mb-1 hidden group-hover:block bg-black text-white text-xs rounded py-1 px-2 whitespace-nowrap"> | ||
| {item.title} | ||
| </span> | ||
| </span> | ||
| ))} | ||
|
|
||
| {/* Display Family Icon */} | ||
| {vouch.family && ( | ||
| <span className="relative group mr-1"> | ||
| <FamilyIcon family={vouch.family} /> | ||
| <span className="absolute bottom-full mb-1 hidden group-hover:block bg-black text-white text-xs rounded py-1 px-2 whitespace-nowrap"> | ||
| Family Color | ||
| </span> | ||
| </span> | ||
| )} | ||
|
|
||
| {/* Display Handle or Address */} | ||
| {vouch.handle || formatAddress(vouch.address)} | ||
| <span className="ml-1" style={{ fontSize: 8 }}> | ||
| ({vouch.epochsToExpire}) | ||
| </span> | ||
| </span> | ||
| ); | ||
| }; | ||
|
|
||
| export default VouchChip; |
22 changes: 22 additions & 0 deletions
22
web-app/src/modules/core/routes/Validators/components/Vouch/VouchLegend.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
| import React from 'react'; | ||
| import clsx from 'clsx'; | ||
| import { legendItems } from './legendItems'; | ||
|
|
||
| const VouchLegend: React.FC = () => { | ||
| return ( | ||
| <div className="mt-4 p-4 bg-[#F5F5F5] text-[#525252] rounded-md"> | ||
| <h2 className="text-lg font-bold mb-2">Vouch Legend</h2> | ||
| <ul className="list-disc pl-5 space-y-1"> | ||
| {legendItems.map((item, index) => ( | ||
| <li key={index} className="flex items-center space-x-2"> | ||
| <item.Icon className={clsx('w-5 h-5', item.color)} /> | ||
| <span className="font-bold">{item.title}:</span> | ||
| <span>{item.description}</span> | ||
| </li> | ||
| ))} | ||
| </ul> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default VouchLegend; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
59 changes: 59 additions & 0 deletions
59
web-app/src/modules/core/routes/Validators/components/Vouch/legendItems.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,59 @@ | ||
| // legendItems.tsx | ||
| import { | ||
| GlobeAltIcon, | ||
| CheckIcon, | ||
| XMarkIcon, | ||
| ExclamationTriangleIcon, | ||
| ClockIcon, | ||
| } from '@heroicons/react/20/solid'; | ||
|
|
||
| export interface LegendItem { | ||
| Icon: React.ComponentType<React.SVGProps<SVGSVGElement>>; | ||
| color: string; | ||
| title: string; | ||
| description: string; | ||
| } | ||
|
|
||
| export const legendItems: LegendItem[] = [ | ||
| { | ||
| Icon: GlobeAltIcon, | ||
| color: 'text-blue-500', // Color for "In Set" | ||
| title: 'In Set', | ||
| description: 'The validator is part of the current active set.', | ||
| }, | ||
| { | ||
| Icon: CheckIcon, | ||
| color: 'text-green-500', // Color for "Compliant" | ||
| title: 'Compliant', | ||
| description: 'The validator is compliant with audit qualifications.', | ||
| }, | ||
| { | ||
| Icon: XMarkIcon, | ||
| color: 'text-red-500', // Color for "Non-Compliant" | ||
| title: 'Non-Compliant', | ||
| description: 'The validator is not compliant with audit qualifications.', | ||
| }, | ||
| { | ||
| Icon: ExclamationTriangleIcon, | ||
| color: 'text-yellow-500', // Color for "Expiring Soon" | ||
| title: 'Expiring Soon', | ||
| description: 'Vouch will expire in less than 7 epochs.', | ||
| }, | ||
| { | ||
| Icon: ClockIcon, | ||
| color: 'text-red-500', // Color for "Expired" | ||
| title: 'Expired', | ||
| description: 'The vouch has expired.', | ||
| }, | ||
| { | ||
| Icon: () => ( | ||
| <span | ||
| className="inline-block w-3 h-3 rounded-full" | ||
| style={{ backgroundColor: 'purple', margin: '0px 4px' }} // Color for "Family" | ||
| ></span> | ||
| ), | ||
| color: '', // No icon, so no color | ||
| title: 'Family Color', | ||
| description: 'Represents the vouch family grouping.', | ||
| }, | ||
| ]; |
Oops, something went wrong.