Added a badge to the validator partners.

package.json

@@ -32,11 +32,11 @@
         "@emotion/styled": "^11.10.5",
         "@mdi/js": "^7.0.96",
         "@mdi/react": "^1.6.1",
-        "@mui/icons-material": "5.10.14",
-        "@mui/material": "5.10.14",
-        "@mui/system": "5.10.14",
         "@reduxjs/toolkit": "^1.8.1",
         "@testing-library/dom": "^8.19.0",
+        "@mui/icons-material": "^5.15.11",
+        "@mui/material": "^5.15.11",
+        "@mui/system": "^5.15.11",
         "@testing-library/jest-dom": "^5.16.4",
         "@testing-library/react": "^13.0.1",
         "@testing-library/user-event": "^14.1.1",

src/@types/partners.ts

@@ -11,6 +11,7 @@ export interface AttributesType {
     contactFirstname?: string
     contactLastname?: string
     contactPhone?: string
+    pChainAddress?: string
     companyShortDescription?: string
     companyLongDescription?: string
     isConsortiumMember?: boolean
@@ -146,3 +147,33 @@ export interface PaginationType {
     pageCount: number
     total: number
 }
+
+type RewardOwner = {
+    locktime: string
+    threshold: string
+    addresses: string[]
+}
+
+type RewardInfo = {
+    locktime: string
+    threshold: string
+    addresses: string[]
+}
+
+export type Validator = {
+    txID: string
+    startTime: string
+    endTime: string
+    weight: string
+    nodeID: string
+    stakeAmount: string
+    rewardOwner: RewardOwner
+    validationRewardOwner: RewardInfo
+    delegationRewardOwner: RewardInfo
+    potentialReward: string
+    delegationFee: string
+    uptime: string
+    connected: boolean
+    delegatorCount: string
+    delegatorWeight: string
+}

src/components/Partners/PartnerCard.tsx

@@ -1,7 +1,9 @@
 import { Box, Typography } from '@mui/material'
 
-import React from 'react'
-import { PartnerDataType } from '../../@types/partners'
+import React, { useEffect, useState } from 'react'
+import { PartnerDataType, Validator } from '../../@types/partners'
+import { useEffectOnce } from '../../hooks/useEffectOnce'
+import useWallet from '../../hooks/useWallet'
 import PartnerBusinessFields from './PartnerBusinessFields'
 import PartnerFlag from './PartnerFlag'
 import PartnerLogo from './PartnerLogo'
@@ -11,21 +13,33 @@
     clickable: boolean
     partner: PartnerDataType
     index: number
+    validators: Validator[]
 }
 
-const PartnerCard: React.FC<PartnerCardProps> = ({ partner, clickable, onClick }) => {
+const PartnerCard: React.FC<PartnerCardProps> = ({ partner, clickable, onClick, validators }) => {
+    useEffectOnce(() => {})
+    const { getRegisteredNode } = useWallet()
+    const [isValidator, setIsValidator] = useState(false)
+
+    const chackValidatorStatus = async (address: string) => {
+        if (!pChainAddress) setIsValidator(false)
+        let nodeID = await getRegisteredNode(address)
+        setIsValidator(!!validators.find(v => v.nodeID === nodeID))
+    }
     const {
         attributes: {
-            isConsortiumMember,
             companyName,
             companyShortDescription,
             business_fields,
             companyLogoColor,
             country_flag,
             logoBox,
+            pChainAddress,
         },
     } = partner
-
+    useEffect(() => {
+        chackValidatorStatus(pChainAddress)
+    }, [partner])
     return (
         <Box
             onClick={onClick}
@@ -45,13 +59,11 @@
                 overflow: 'hidden',
             }}
         >
-            {/*
-            // this value is incorrect, it should be based on the pchain addres but its not yet added to the api
-             {!!isConsortiumMember && (
+            {!!isValidator && (
                 <Box
                     sx={{
                         position: 'absolute',
-                        background: theme => theme.palette.background.gradient,
+                        background: theme => theme.palette.blue[50],
                         padding: '10px 14px 8px 12px',
                         display: 'flex',
                         alignItems: 'center',
@@ -61,9 +73,11 @@
                         top: '0',
                     }}
                 >
-                    <Typography sx={{ color: 'common.white' }}>Validator</Typography>
+                    <Typography sx={{ color: theme => theme.palette.grey[950] }} variant="overline">
+                        Validator
+                    </Typography>
                 </Box>
-            )} */}
+            )}
             {!!companyLogoColor && !!companyName && (
                 <PartnerLogo
                     colorLogo={companyLogoColor}

src/components/Partners/PartnersFilter.tsx

@@ -1,8 +1,8 @@
 import { ActionType, StatePartnersType, partnersActions } from '../../helpers/partnersReducer'
 
-import { Box } from '@mui/material'
-import BusinessFieldFilter from './BusinessFieldFilter'
+import { Box, Checkbox, FormControlLabel, Typography } from '@mui/material'
 import React from 'react'
+import BusinessFieldFilter from './BusinessFieldFilter'
 import SearchInput from './SearchInput'
 
 interface PartnersFilterProps {
@@ -17,11 +17,9 @@ const PartnersFilter: React.FC<PartnersFilterProps> = ({ state, dispatchPartners
         <Box sx={{ display: 'flex', gap: '1rem', alignItems: 'center', flexWrap: 'wrap' }}>
             <SearchInput searchByName={searchByName} />
             <BusinessFieldFilter state={state} dispatchPartnersActions={dispatchPartnersActions} />
-            {/*
-            disabled for now because we don't have the pchain address for the partner in strapi 
             <Box sx={{ display: 'flex', alignItems: 'center', gap: '.5rem' }}>
                 <FormControlLabel
-                    label="Only Validators"
+                    label={<Typography variant="body2">Only Validators</Typography>}
                     control={
                         <Checkbox
                             sx={{
@@ -40,7 +38,7 @@ const PartnersFilter: React.FC<PartnersFilterProps> = ({ state, dispatchPartners
                         />
                     }
                 />
-            </Box> */}
+            </Box>
         </Box>
     )
 }

src/hooks/useWallet.ts

@@ -1,10 +1,17 @@
+import { ava as caminoClient } from 'wallet/caminoClient'
 import { getNameOfWallet, getPchainAddress } from '../helpers/walletStore'
 import { updatePchainAddress } from '../redux/slices/app-config'
 import { useAppDispatch } from './reduxHooks'
 
 const useWallet = () => {
     const dispatch = useAppDispatch()
 
+    async function getCurrentValidators() {
+        return caminoClient.PChain().getCurrentValidators()
+    }
+    async function getRegisteredNode(address: string): Promise<string> {
+        return await caminoClient.PChain().getRegisteredShortIDLink(address)
+    }
     const updateStore = (type, params) => {
         switch (type) {
             case 'updateName':
@@ -16,7 +23,7 @@ const useWallet = () => {
                 )
         }
     }
-    return { updateStore }
+    return { updateStore, getRegisteredNode, getCurrentValidators }
 }
 
 export default useWallet

src/layout/MainLayout.tsx

@@ -1,5 +1,12 @@
-import { Backdrop, CircularProgress, Paper, Typography } from '@mui/material'
-import { Box, Toolbar, useTheme } from '@mui/material'
+import {
+    Backdrop,
+    Box,
+    CircularProgress,
+    Paper,
+    Toolbar,
+    Typography,
+    useTheme,
+} from '@mui/material'
 import React, { useState } from 'react'
 import {
     addNetworks,
@@ -8,21 +15,22 @@ import {
     changeNetworkStatus,
 } from '../redux/slices/network'
 
+import { Status } from '../@types'
 import Footer from '../components/Footer'
 import Navbar from '../components/Navbar'
 import Notifications from '../components/Notification'
-import { Status } from '../@types'
 import { changeActiveApp } from '../redux/slices/app-config'
 import { matchNetworkStatus } from '../utils/componentsUtils'
 // @ts-ignore
+import { useEffect } from 'react'
+import { useLocation } from 'react-router-dom'
 import store from 'wallet/store'
 import { useAppDispatch } from '../hooks/reduxHooks'
-import { useEffect } from 'react'
 import { useEffectOnce } from '../hooks/useEffectOnce'
-import { useLocation } from 'react-router-dom'
 import useNetwork from '../hooks/useNetwork'
 // @ts-ignore
 import { useStore } from 'Explorer/useStore'
+import { getCurrentValidators } from '../redux/slices/utils'
 
 const MainLayout = ({ children }) => {
     const [loadNetworks, setLoadNetworks] = useState(true)
@@ -59,7 +67,7 @@ const MainLayout = ({ children }) => {
     useEffectOnce(() => {
         init()
     })
-
+    dispatch(getCurrentValidators())
     useEffect(() => {
         const html = document.documentElement
         if (loading || loadNetworks) html.style.overflow = 'hidden'

src/redux/services/partners.ts

@@ -28,7 +28,7 @@ export const partnersApi = createApi({
                     query += `&filters[companyName][$contains]=${companyName}`
                 }
                 if (validators) {
-                    query += `&filters[isConsortiumMember][$eq]=true`
+                    query += `&filters[pChainAddress][$ne]=null`
                 }
 
                 return query

src/redux/slices/app-config.ts

@@ -1,9 +1,10 @@
 import { createSlice } from '@reduxjs/toolkit'
 import store from 'wallet/store'
 import { Status, SuitePlatforms } from '../../@types'
+import { Validator } from '../../@types/partners'
 import { APPS_CONSTS } from '../../constants/apps-consts'
 import { RootState } from '../store'
-import { updateAuthStatus } from './utils'
+import { getCurrentValidators, updateAuthStatus } from './utils'
 type NotificationSeverityType = 'success' | 'warning' | 'info' | 'error'
 
 interface InitialStateAppConfigType {
@@ -19,6 +20,7 @@ interface InitialStateAppConfigType {
     account: any
     showButton: boolean
     pChainAddress: string
+    validators: Validator[]
 }
 
 let initialState: InitialStateAppConfigType = {
@@ -34,6 +36,7 @@ let initialState: InitialStateAppConfigType = {
     notificationMessage: '',
     account: null,
     showButton: false,
+    validators: [],
 }
 
 const appConfigSlice = createSlice({
@@ -94,6 +97,9 @@ const appConfigSlice = createSlice({
         builder.addCase(updateAuthStatus.rejected, (state, { payload }) => {
             state.isAuth = false
         })
+        builder.addCase(getCurrentValidators.fulfilled, (state, { payload }) => {
+            state.validators = payload
+        })
     },
 })
 
@@ -130,6 +136,8 @@ export const getPChainAddress = (state: RootState) => state.appConfig.pChainAddr
 // getWalletName
 export const getWalletName = (state: RootState) => state.appConfig.walletName
 
+export const selectValidators = (state: RootState) => state.appConfig.validators
+
 export const {
     changeActiveApp,
     updateValues,

src/redux/slices/utils.ts

@@ -1,4 +1,5 @@
 import { createAsyncThunk } from '@reduxjs/toolkit'
+import useWallet from '../../hooks/useWallet'
 
 export const updateAuthStatus = createAsyncThunk(
     'appConfig/updateAuthStatus',
@@ -9,3 +10,10 @@ export const updateAuthStatus = createAsyncThunk(
         return false
     },
 )
+
+export const getCurrentValidators = createAsyncThunk('appConfig/getCurrentValidators', async () => {
+    const { getCurrentValidators } = useWallet()
+    try {
+        return (await getCurrentValidators()).validators
+    } catch (e) {}
+})

src/theme/typography.ts

@@ -140,7 +140,7 @@ const typography = {
     },
     overline: {
         fontFamily: FONT,
-        fontWeight: 700,
+        fontWeight: 600,
         lineHeight: '18px',
         fontSize: pxToRem(12),
         letterSpacing: '-1.1%',

src/views/partners/ListPartners.tsx

@@ -4,13 +4,16 @@ import { Box } from '@mui/material'
 import React from 'react'
 import { useNavigate } from 'react-router'
 import PartnerCard from '../../components/Partners/PartnerCard'
+import { useAppSelector } from '../../hooks/reduxHooks'
+import { selectValidators } from '../../redux/slices/app-config'
 
 interface ListPartnersProps {
     partners: PartnersResponseType
 }
 
 const ListPartners: React.FC<ListPartnersProps> = ({ partners }) => {
     const navigate = useNavigate()
+    const validators = useAppSelector(selectValidators)
     return (
         <Box
             sx={{
@@ -22,6 +25,7 @@ const ListPartners: React.FC<ListPartnersProps> = ({ partners }) => {
         >
             {partners.data.map((partner, index) => (
                 <PartnerCard
+                    validators={validators}
                     onClick={() => {
                         if (
                             !!(

src/views/partners/Partner.tsx

@@ -47,10 +47,27 @@ const Partner = () => {
         data: partner,
         isLoading,
         isFetching,
+        error,
     } = useFetchPartnerDataQuery({
         companyName: partnerID,
     })
     const navigate = useNavigate()
+    if (
+        error ||
+        !partner ||
+        !!(
+            partner.attributes.companyName &&
+            partner.attributes.companyLongDescription &&
+            partner.attributes.companyWebsite &&
+            partner.attributes.contactEmail &&
+            partner.attributes.contactFirstname &&
+            partner.attributes.contactLastname &&
+            partner.attributes.contactPhone
+        )
+    ) {
+        navigate('/partners')
+        return null
+    }
     if (isLoading || isFetching) return <></>
     return (
         <Box sx={{ height: '100%', mb: '2rem' }}>