= ({ validator, showExpired }) => {
);
};
-const FamilyIcon: React.FC<{ family: string }> = ({ family }) => {
- const bgColor = family && family.length > 8 ? `#${family.slice(2, 8)}` : `#f87171`;
- return (
-
- );
-};
-
-const VouchChip: React.FC<{ vouch: VouchDetails; index: number }> = ({ vouch, index }) => {
- // Generate background color for the chip based on the family (hexadecimal)
- return (
-
- {vouch.inSet && }
- {vouch.compliant ? (
-
- ) : (
-
- )}
-
- {vouch.epochsToExpire <= 7 && vouch.epochsToExpire > 0 && (
-
- )}
-
- {vouch.epochsToExpire <= 0 && }
-
- {/* handle or address 1234...5678*/}
- {vouch.handle || formatAddress(vouch.address)}
-
- {' '}
- ({vouch.epochsToExpire})
-
-
-
-
- );
-};
-
export default VouchesRow;
diff --git a/web-app/src/modules/core/routes/Validators/components/VouchesRowSkeleton.tsx b/web-app/src/modules/core/routes/Validators/components/Vouch/VouchesRowSkeleton.tsx
similarity index 100%
rename from web-app/src/modules/core/routes/Validators/components/VouchesRowSkeleton.tsx
rename to web-app/src/modules/core/routes/Validators/components/Vouch/VouchesRowSkeleton.tsx
diff --git a/web-app/src/modules/core/routes/Validators/components/VouchesTable.tsx b/web-app/src/modules/core/routes/Validators/components/Vouch/VouchesTable.tsx
similarity index 96%
rename from web-app/src/modules/core/routes/Validators/components/VouchesTable.tsx
rename to web-app/src/modules/core/routes/Validators/components/Vouch/VouchesTable.tsx
index ff288cf..12742f4 100644
--- a/web-app/src/modules/core/routes/Validators/components/VouchesTable.tsx
+++ b/web-app/src/modules/core/routes/Validators/components/Vouch/VouchesTable.tsx
@@ -1,10 +1,10 @@
import React, { useState } from 'react';
import { gql, useQuery } from '@apollo/client';
-import SortableTh from './SortableTh';
+import SortableTh from '../SortableTh';
import VouchesRow from './VouchesRow';
-import { ValidatorVouches } from '../../../../interface/Validator.interface';
+import { ValidatorVouches } from '../../../../../interface/Validator.interface';
import VouchesRowSkeleton from './VouchesRowSkeleton';
-import VouchesLegend from './VouchesLegend';
+import VouchLegend from './VouchLegend';
const GET_VALIDATORS = gql`
query GetValidatorsVouches {
@@ -179,7 +179,7 @@ const VouchesTable: React.FC = () => {
))}
-
+
The data in this table is updated every 60 seconds.
diff --git a/web-app/src/modules/core/routes/Validators/components/Vouch/legendItems.tsx b/web-app/src/modules/core/routes/Validators/components/Vouch/legendItems.tsx
new file mode 100644
index 0000000..a9a9116
--- /dev/null
+++ b/web-app/src/modules/core/routes/Validators/components/Vouch/legendItems.tsx
@@ -0,0 +1,59 @@
+// legendItems.tsx
+import {
+ GlobeAltIcon,
+ CheckIcon,
+ XMarkIcon,
+ ExclamationTriangleIcon,
+ ClockIcon,
+} from '@heroicons/react/20/solid';
+
+export interface LegendItem {
+ Icon: React.ComponentType>;
+ 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: () => (
+
+ ),
+ color: '', // No icon, so no color
+ title: 'Family Color',
+ description: 'Represents the vouch family grouping.',
+ },
+];
diff --git a/web-app/src/modules/core/routes/Validators/components/VouchesLegend.tsx b/web-app/src/modules/core/routes/Validators/components/VouchesLegend.tsx
deleted file mode 100644
index bc4909e..0000000
--- a/web-app/src/modules/core/routes/Validators/components/VouchesLegend.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import React from 'react';
-import {
- GlobeAltIcon,
- CheckIcon,
- XMarkIcon,
- ExclamationTriangleIcon,
- ClockIcon,
-} from '@heroicons/react/20/solid';
-import clsx from 'clsx';
-
-const VouchLegend: React.FC = () => {
- const legendItems = [
- {
- 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: () => (
-
- ),
- color: '', // No icon, so no color
- title: 'Family Color',
- description: 'Represents the vouch family grouping.',
- },
- ];
-
- return (
-
-
Vouch Legend
-
- {legendItems.map((item, index) => (
- -
-
- {item.title}:
- {item.description}
-
- ))}
-
-