feat: use subscription to listen for certificates

src/App.tsx

@@ -25,8 +25,6 @@ import {
 import useToposSubnetGetFromEndpoint from './hooks/useToposSubnetGetFromEndpoint'
 import AppInternals from './AppInternals'
 import { TourRefsContext } from './contexts/tourRefs'
-import useSubnetGetLatestBlockNumber from './hooks/useSubnetGetLatestBlockNumber'
-import { CrossSubnetMessagesGraphContext } from './contexts/crossSubnetMessagesGraph'
 
 const Errors = styled.div`
   margin: 1rem auto;
@@ -52,9 +50,6 @@ const App = () => {
   const [errors, setErrors] = useState<string[]>([])
   const { registeredSubnets } = useRegisteredSubnets(selectedToposSubnet)
   const { getToposSubnetFromEndpoint } = useToposSubnetGetFromEndpoint()
-  const [subnetsLatestBlockNumbers, setSubnetsLatestBlockNumbers] =
-    useState<Map<string, number>>()
-  const { getSubnetLatestBlockNumber } = useSubnetGetLatestBlockNumber()
 
   const tourRefs = {
     MenuRef: useRef<HTMLDivElement>(null),
@@ -127,27 +122,6 @@ const App = () => {
     [routeParamsProcessing, subnets]
   )
 
-  useEffect(() => {
-    async function getSubnetsLatestBlockNumbers() {
-      if (subnets) {
-        const newSubnetsLatestBlockNumbers = new Map<string, number>()
-        await Promise.all(
-          subnets.map(async (subnet) => {
-            const latestBlockNumber = await getSubnetLatestBlockNumber(subnet)
-
-            if (latestBlockNumber !== undefined) {
-              newSubnetsLatestBlockNumbers.set(subnet.id, latestBlockNumber)
-            }
-          })
-        )
-
-        setSubnetsLatestBlockNumbers(newSubnetsLatestBlockNumbers)
-      }
-    }
-
-    getSubnetsLatestBlockNumbers()
-  }, [subnets])
-
   return (
     <ThemeProvider theme={theme}>
       <BrowserRouter>
@@ -168,32 +142,28 @@ const App = () => {
               >
                 <SubnetsContext.Provider value={{ data: subnets }}>
                   <BlocksContext.Provider value={blocks}>
-                    <CrossSubnetMessagesGraphContext.Provider
-                      value={{ subnetsLatestBlockNumbers }}
-                    >
-                      <TourRefsContext.Provider value={tourRefs}>
-                        <AppInternals>
-                          <Layout>
-                            <Header />
-                            {Boolean(errors.length) && (
-                              <Errors>
-                                {errors.map((e) => (
-                                  <Alert
-                                    type="error"
-                                    showIcon
-                                    closable
-                                    message={e}
-                                    key={e}
-                                  />
-                                ))}
-                              </Errors>
-                            )}
-                            <Content />
-                            <Footer />
-                          </Layout>
-                        </AppInternals>
-                      </TourRefsContext.Provider>
-                    </CrossSubnetMessagesGraphContext.Provider>
+                    <TourRefsContext.Provider value={tourRefs}>
+                      <AppInternals>
+                        <Layout>
+                          <Header />
+                          {Boolean(errors.length) && (
+                            <Errors>
+                              {errors.map((e) => (
+                                <Alert
+                                  type="error"
+                                  showIcon
+                                  closable
+                                  message={e}
+                                  key={e}
+                                />
+                              ))}
+                            </Errors>
+                          )}
+                          <Content />
+                          <Footer />
+                        </Layout>
+                      </AppInternals>
+                    </TourRefsContext.Provider>
                   </BlocksContext.Provider>
                 </SubnetsContext.Provider>
               </SelectedNetworksContext.Provider>

src/AppInternals.tsx

@@ -1,6 +1,5 @@
 import { ReactNode, useContext } from 'react'
 
-import { BlocksContext } from './contexts/blocks'
 import { SelectedNetworksContext } from './contexts/selectedNetworks'
 import useSubnetSubscribeToCertificates from './hooks/useSubnetSubscribeToCertificates'
 import { CertificatesContext } from './contexts/certificates'
@@ -18,17 +17,10 @@ interface Props {
 
 const AppInternals = ({ children }: Props) => {
   const { selectedSubnet } = useContext(SelectedNetworksContext)
-  const blocks = useContext(BlocksContext)
   const { certificates } = useSubnetSubscribeToCertificates({
-    sourceSubnetIds: selectedSubnet
-      ? [
-          {
-            position: blocks[0]?.number,
-            sourceSubnetId: { value: selectedSubnet.id },
-          },
-        ]
-      : undefined,
-    limit: 1,
+    filter: {
+      source: selectedSubnet?.id,
+    },
   })
 
   return (