Merge pull request #205 from chain4travel/feat-validator-badge

fix fetching validators data and updating it after network change

src/components/Partners/PartnerCard.tsx

@@ -1,9 +1,11 @@
 import { Box, Typography } from '@mui/material'
 
 import React, { useEffect, useState } from 'react'
-import { PartnerDataType, Validator } from '../../@types/partners'
+import { PartnerDataType } from '../../@types/partners'
+import { useAppSelector } from '../../hooks/reduxHooks'
 import { useEffectOnce } from '../../hooks/useEffectOnce'
 import useWallet from '../../hooks/useWallet'
+import { selectValidators } from '../../redux/slices/app-config'
 import PartnerBusinessFields from './PartnerBusinessFields'
 import PartnerFlag from './PartnerFlag'
 import PartnerLogo from './PartnerLogo'
@@ -13,17 +15,17 @@ interface PartnerCardProps {
     clickable: boolean
     partner: PartnerDataType
     index: number
-    validators: Validator[]
 }
 
-const PartnerCard: React.FC<PartnerCardProps> = ({ partner, clickable, onClick, validators }) => {
+const PartnerCard: React.FC<PartnerCardProps> = ({ partner, clickable, onClick }) => {
     useEffectOnce(() => {})
     const { getRegisteredNode } = useWallet()
     const [isValidator, setIsValidator] = useState(false)
-
+    const validators = useAppSelector(selectValidators)
+    const { getAddress } = useWallet()
     const chackValidatorStatus = async (address: string) => {
         if (!pChainAddress) setIsValidator(false)
-        let nodeID = await getRegisteredNode(address)
+        let nodeID = await getRegisteredNode(getAddress(address))
         setIsValidator(!!validators.find(v => v.nodeID === nodeID))
     }
     const {
@@ -38,8 +40,8 @@ const PartnerCard: React.FC<PartnerCardProps> = ({ partner, clickable, onClick,
         },
     } = partner
     useEffect(() => {
-        chackValidatorStatus(pChainAddress)
-    }, [partner])
+        if (pChainAddress) chackValidatorStatus(pChainAddress)
+    }, [partner, validators])
     return (
         <Box
             onClick={onClick}

src/hooks/useNetwork.ts

@@ -15,6 +15,7 @@ import { useStore } from 'Explorer/useStore'
 import { AvaNetwork } from 'wallet/AvaNetwork'
 import store from 'wallet/store'
 import { Status } from '../@types'
+import { getCurrentValidators } from '../redux/slices/utils'
 
 const useNetwork = (): {
     handleChangeNetwork: (arg: string) => void
@@ -73,6 +74,7 @@ const useNetwork = (): {
                     severity: 'success',
                 }),
             )
+            dispatch(getCurrentValidators())
             localStorage.setItem('selectedNetwork', network.name.toLowerCase())
         } catch (e) {
             store.state.Network.selectedNetwork = null

src/hooks/useWallet.ts

@@ -6,12 +6,18 @@ 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 getAddress = address => {
+        if (address) {
+            let res = caminoClient
+                .PChain()
+                .addressFromBuffer(caminoClient.PChain().parseAddress(address))
+            return res
+        }
+        return ''
+    }
     const updateStore = (type, params) => {
         switch (type) {
             case 'updateName':
@@ -23,7 +29,7 @@ const useWallet = () => {
                 )
         }
     }
-    return { updateStore, getRegisteredNode, getCurrentValidators }
+    return { updateStore, getRegisteredNode, getAddress }
 }
 
 export default useWallet

src/layout/MainLayout.tsx

@@ -30,7 +30,6 @@ import { useEffectOnce } from '../hooks/useEffectOnce'
 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)
@@ -67,7 +66,6 @@ const MainLayout = ({ children }) => {
     useEffectOnce(() => {
         init()
     })
-    dispatch(getCurrentValidators())
     useEffect(() => {
         const html = document.documentElement
         if (loading || loadNetworks) html.style.overflow = 'hidden'

src/redux/slices/utils.ts

@@ -1,5 +1,5 @@
 import { createAsyncThunk } from '@reduxjs/toolkit'
-import useWallet from '../../hooks/useWallet'
+import { ava as caminoClient } from 'wallet/caminoClient'
 
 export const updateAuthStatus = createAsyncThunk(
     'appConfig/updateAuthStatus',
@@ -12,8 +12,7 @@ export const updateAuthStatus = createAsyncThunk(
 )
 
 export const getCurrentValidators = createAsyncThunk('appConfig/getCurrentValidators', async () => {
-    const { getCurrentValidators } = useWallet()
     try {
-        return (await getCurrentValidators()).validators
+        return (await caminoClient.PChain().getCurrentValidators()).validators
     } catch (e) {}
 })

src/views/partners/ListPartners.tsx

@@ -1,19 +1,22 @@
 import { PartnersResponseType } from '../../@types/partners'
 
 import { Box } from '@mui/material'
-import React from 'react'
+import React, { useEffect } 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'
+import { useAppDispatch } from '../../hooks/reduxHooks'
+import { getCurrentValidators } from '../../redux/slices/utils'
 
 interface ListPartnersProps {
     partners: PartnersResponseType
 }
 
 const ListPartners: React.FC<ListPartnersProps> = ({ partners }) => {
     const navigate = useNavigate()
-    const validators = useAppSelector(selectValidators)
+    const dispatch = useAppDispatch()
+    useEffect(() => {
+        dispatch(getCurrentValidators())
+    }, [])
     return (
         <Box
             sx={{
@@ -25,7 +28,6 @@ const ListPartners: React.FC<ListPartnersProps> = ({ partners }) => {
         >
             {partners.data.map((partner, index) => (
                 <PartnerCard
-                    validators={validators}
                     onClick={() => {
                         if (
                             !!(
@@ -42,7 +44,7 @@ const ListPartners: React.FC<ListPartnersProps> = ({ partners }) => {
                         }
                     }}
                     partner={partner}
-                    key={index}
+                    key={partner.attributes.companyName}
                     clickable={
                         !!(
                             partner.attributes.companyName &&

src/views/partners/Partner.tsx

@@ -52,19 +52,7 @@ const Partner = () => {
         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
-        )
-    ) {
+    if (error || (!partner && !isFetching && !isLoading)) {
         navigate('/partners')
         return null
     }