Add subscription

explorer/codegen.ts

@@ -6,10 +6,10 @@ dotenv.config()
 
 const config: CodegenConfig = {
   generates: {
-    './gql/graphql.ts': {
+    './gql/graphql.tsx': {
       schema: defaultIndexer.indexer,
       documents: ['./src/**/query.ts'],
-      plugins: ['typescript', 'typescript-operations'],
+      plugins: ['typescript', 'typescript-operations', 'typescript-react-apollo'],
     },
   },
 }

explorer/package.json

@@ -29,8 +29,8 @@
     "format": "prettier --write 'src/**/*.{js,jsx,ts,tsx,css,md,json}' --config ./.prettierrc"
   },
   "dependencies": {
-    "@apollo/client": "^3.7.0",
-    "@apollo/experimental-nextjs-app-support": "^0.8.0",
+    "@apollo/client": "^3.10.4",
+    "@apollo/experimental-nextjs-app-support": "^0.11.6",
     "@autonomys/auto-consensus": "^1.0.10",
     "@autonomys/auto-utils": "^1.0.10",
     "@headlessui/react": "^1.7.18",
@@ -56,6 +56,7 @@
     "faunadb": "^4.8.0",
     "formik": "^2.4.5",
     "graphql": "^16.6.0",
+    "graphql-ws": "^5.16.0",
     "jsonwebtoken": "^9.0.2",
     "lodash": "^4.17.21",
     "lottie-react": "^2.4.0",
@@ -84,7 +85,8 @@
   "devDependencies": {
     "@discordjs/rest": "^2.2.0",
     "@graphql-codegen/cli": "^4.0.1",
-    "@graphql-codegen/client-preset": "4.0.0",
+    "@graphql-codegen/client-preset": "^4.5.1",
+    "@graphql-codegen/typescript-react-apollo": "^4.3.2",
     "@next/eslint-plugin-next": "^14.1.3",
     "@svgr/webpack": "^8.1.0",
     "@types/jest": "^29.5.12",

explorer/src/app/[chain]/consensus/image/route.tsx

@@ -55,7 +55,7 @@ function Screen({
 }) {
   const block = {
     height: data.consensus_blocks[0]?.height ?? '0',
-    timestamp: data.consensus_blocks[0]?.state_root ?? '0',
+    timestamp: data.consensus_blocks[0]?.timestamp ?? '0',
     extrinsicsCount: data.consensus_extrinsics_aggregate.aggregate?.count ?? 0,
     spacePledged: data.consensus_blocks[0]?.space_pledged ?? '',
     historySize: data.consensus_blocks[0]?.blockchain_size ?? '',

explorer/src/components/Consensus/Home/HomeBlockList.tsx

@@ -1,25 +1,31 @@
 'use client'
 
+import { Spinner } from '@/components/common/Spinner'
+import { NotFound } from '@/components/layout/NotFound'
+import { PAGE_SIZE } from '@/constants/general'
 import { ArrowLongRightIcon } from '@heroicons/react/24/outline'
 import { SortedTable } from 'components/common/SortedTable'
 import { INTERNAL_ROUTES } from 'constants/routes'
-import { HomeQueryQuery } from 'gql/graphql'
+import {
+  HomeSubscriptionBlocksListSubscription,
+  useHomeSubscriptionBlocksListSubscription,
+} from 'gql/graphql'
 import useIndexers from 'hooks/useIndexers'
 import Link from 'next/link'
 import { FC, useMemo } from 'react'
 import type { Cell } from 'types/table'
 import { utcToLocalRelativeTime } from 'utils/time'
 
-interface HomeBlockListProps {
-  data: HomeQueryQuery
-}
-
-type Row = HomeQueryQuery['consensus_blocks'][number]
+type Row = HomeSubscriptionBlocksListSubscription['consensus_blocks'][number]
 
-export const HomeBlockList: FC<HomeBlockListProps> = ({ data }) => {
+export const HomeBlockList: FC = () => {
   const { network, section } = useIndexers()
 
-  const blocks = useMemo(() => data.consensus_blocks, [data.consensus_blocks])
+  const { loading, data, error } = useHomeSubscriptionBlocksListSubscription({
+    variables: { limit: PAGE_SIZE, offset: 0 },
+  })
+
+  const blocks = useMemo(() => data?.consensus_blocks, [data?.consensus_blocks])
 
   const columns = useMemo(
     () => [
@@ -63,6 +69,12 @@ export const HomeBlockList: FC<HomeBlockListProps> = ({ data }) => {
     [network, section],
   )
 
+  const noData = useMemo(() => {
+    if (loading) return <Spinner isXSmall />
+    if (!blocks || error) return <NotFound />
+    return null
+  }, [blocks, loading, error])
+
   return (
     <div className='w-full flex-col rounded-[20px] border border-gray-200 bg-white p-4 dark:border-none dark:bg-gradient-to-r dark:from-gradientFrom dark:via-gradientVia dark:to-gradientTo'>
       <div className='mb-6 inline-flex w-full items-center justify-between align-middle'>
@@ -77,13 +89,17 @@ export const HomeBlockList: FC<HomeBlockListProps> = ({ data }) => {
           <ArrowLongRightIcon stroke='#DE67E4' className='size-6' />
         </Link>
       </div>
-      <SortedTable
-        data={blocks}
-        columns={columns}
-        showNavigation={false}
-        pageCount={1}
-        filename='home-latest-blocks'
-      />
+      {noData || !blocks ? (
+        noData
+      ) : (
+        <SortedTable
+          data={blocks}
+          columns={columns}
+          showNavigation={false}
+          pageCount={1}
+          filename='home-latest-blocks'
+        />
+      )}
     </div>
   )
 }

explorer/src/components/Consensus/Home/HomeCards.tsx

@@ -5,9 +5,7 @@ import { HomeInfoCard } from './HomeInfoCard'
 type Props = {
   blocksCount?: string
   extrinsicsCount?: string
-  signedExtrinsicsCount?: string
   accountsCount?: string
-  accountsWithBalanceCount?: string
   spacePledged?: string
   spacePledgedBinary?: string
   historySize?: string
@@ -17,9 +15,7 @@ type Props = {
 export const HomeCards: FC<Props> = ({
   blocksCount = '0',
   extrinsicsCount = '0',
-  signedExtrinsicsCount = '0',
   accountsCount = '0',
-  accountsWithBalanceCount = '0',
   spacePledged = '0',
   spacePledgedBinary = '0',
   historySize = '0',
@@ -38,14 +34,12 @@ export const HomeCards: FC<Props> = ({
         title: 'Extrinsics',
         icon: <DocIcon />,
         value: extrinsicsCount,
-        tooltip: <p className='whitespace-nowrap'>{signedExtrinsicsCount} signed</p>,
         darkBgClass: 'dark:bg-gradient-to-b dark:from-purpleUndertone dark:to-pastelBlue',
       },
       {
         title: 'Wallet addresses',
         icon: <WalletIcon />,
         value: accountsCount,
-        tooltip: <p className='whitespace-nowrap'>{accountsWithBalanceCount} &gt;= 1</p>,
         darkBgClass: 'dark:bg-gradient-to-b dark:from-pastelPurple dark:to-pastelPink',
       },
       {
@@ -69,8 +63,6 @@ export const HomeCards: FC<Props> = ({
       historySize,
       accountsCount,
       extrinsicsCount,
-      signedExtrinsicsCount,
-      accountsWithBalanceCount,
       spacePledged,
       spacePledgedBinary,
       historySizeBinary,

explorer/src/components/Consensus/Home/HomeChainInfo.tsx

@@ -23,22 +23,16 @@ export const HomeChainInfo: FC<HomeChainInfo> = ({ data }) => {
   const accountsCount = numberWithCommas(
     Number(data.consensus_accounts_aggregate?.aggregate?.count),
   )
-  const accountsWithBalanceCount = numberWithCommas(
-    Number(data.accountsWithBalanceCount?.aggregate?.count),
-  )
   const extrinsicsCount = numberWithCommas(
     Number(data.consensus_extrinsics_aggregate?.aggregate?.count),
   )
-  const signedExtrinsicsCount = numberWithCommas(Number(data.signedExtrinsics?.aggregate?.count))
   const blocksCount = numberWithCommas(Number(block.height))
 
   return (
     <HomeCards
       blocksCount={blocksCount}
       extrinsicsCount={extrinsicsCount}
-      signedExtrinsicsCount={signedExtrinsicsCount}
       accountsCount={accountsCount}
-      accountsWithBalanceCount={accountsWithBalanceCount}
       spacePledged={spacePledged}
       spacePledgedBinary={spacePledgedBinary}
       historySize={historySize}

explorer/src/components/Consensus/Home/HomeExtrinsicList.tsx

@@ -1,27 +1,33 @@
 'use client'
 
+import { Spinner } from '@/components/common/Spinner'
+import { NotFound } from '@/components/layout/NotFound'
+import { PAGE_SIZE } from '@/constants/general'
 import { shortString } from '@autonomys/auto-utils'
 import { ArrowLongRightIcon } from '@heroicons/react/24/outline'
 import { SortedTable } from 'components/common/SortedTable'
 import { StatusIcon } from 'components/common/StatusIcon'
 import { INTERNAL_ROUTES } from 'constants/routes'
-import { HomeQueryQuery } from 'gql/graphql'
+import {
+  HomeSubscriptionExtrinsicsListSubscription,
+  useHomeSubscriptionExtrinsicsListSubscription,
+} from 'gql/graphql'
 import useIndexers from 'hooks/useIndexers'
 import Link from 'next/link'
 import { FC, useMemo } from 'react'
 import type { Cell } from 'types/table'
 import { utcToLocalRelativeTime } from 'utils/time'
 
-interface HomeExtrinsicListProps {
-  data: HomeQueryQuery
-}
-
-type Row = HomeQueryQuery['consensus_extrinsics'][number]
+type Row = HomeSubscriptionExtrinsicsListSubscription['consensus_extrinsics'][number]
 
-export const HomeExtrinsicList: FC<HomeExtrinsicListProps> = ({ data }) => {
+export const HomeExtrinsicList: FC = () => {
   const { network, section } = useIndexers()
 
-  const extrinsics = useMemo(() => data.consensus_extrinsics, [data.consensus_extrinsics])
+  const { loading, data, error } = useHomeSubscriptionExtrinsicsListSubscription({
+    variables: { limit: PAGE_SIZE, offset: 0 },
+  })
+
+  const extrinsics = useMemo(() => data?.consensus_extrinsics, [data?.consensus_extrinsics])
 
   const columns = useMemo(
     () => [
@@ -79,6 +85,12 @@ export const HomeExtrinsicList: FC<HomeExtrinsicListProps> = ({ data }) => {
     [network, section],
   )
 
+  const noData = useMemo(() => {
+    if (loading) return <Spinner isXSmall />
+    if (!extrinsics || error) return <NotFound />
+    return null
+  }, [extrinsics, loading, error])
+
   return (
     <div className='w-full flex-col rounded-[20px] border border-gray-200 bg-white p-4 dark:border-none dark:bg-gradient-to-r dark:from-purpleUndertone dark:to-gradientToSecondary'>
       <div className='mb-6 inline-flex w-full items-center justify-between align-middle'>
@@ -93,13 +105,17 @@ export const HomeExtrinsicList: FC<HomeExtrinsicListProps> = ({ data }) => {
           <ArrowLongRightIcon stroke='#DE67E4' className='size-6' />
         </Link>
       </div>
-      <SortedTable
-        data={extrinsics}
-        columns={columns}
-        showNavigation={false}
-        pageCount={1}
-        filename='home-latest-extrinsics'
-      />
+      {noData || !extrinsics ? (
+        noData
+      ) : (
+        <SortedTable
+          data={extrinsics}
+          columns={columns}
+          showNavigation={false}
+          pageCount={1}
+          filename='home-latest-extrinsics'
+        />
+      )}
     </div>
   )
 }

explorer/src/components/Consensus/Home/index.tsx

@@ -5,7 +5,6 @@ import { Spinner } from 'components/common/Spinner'
 import { Routes } from 'constants/routes'
 import type { HomeQueryQuery, HomeQueryQueryVariables } from 'gql/graphql'
 import { useIndexersQuery } from 'hooks/useIndexersQuery'
-import useMediaQuery from 'hooks/useMediaQuery'
 import { FC, useEffect, useMemo } from 'react'
 import { useInView } from 'react-intersection-observer'
 import { hasValue, isLoading, useQueryStates } from 'states/query'
@@ -17,13 +16,10 @@ import { QUERY_HOME } from './query'
 
 export const Home: FC = () => {
   const { ref, inView } = useInView()
-  const isDesktop = useMediaQuery('(min-width: 640px)')
-  const PAGE_SIZE = useMemo(() => (isDesktop ? 10 : 3), [isDesktop])
 
   const { loading, setIsVisible } = useIndexersQuery<HomeQueryQuery, HomeQueryQueryVariables>(
     QUERY_HOME,
     {
-      variables: { limit: PAGE_SIZE, offset: 0 },
       pollInterval: 6000,
     },
     Routes.consensus,
@@ -54,8 +50,8 @@ export const Home: FC = () => {
           <>
             <HomeChainInfo data={data} />
             <div className='flex w-full flex-col items-center gap-5 xl:flex-row'>
-              <HomeBlockList data={data} />
-              <HomeExtrinsicList data={data} />
+              <HomeBlockList />
+              <HomeExtrinsicList />
             </div>
           </>
         ) : (

explorer/src/components/Consensus/Home/query.ts

@@ -1,7 +1,28 @@
 import { gql } from '@apollo/client'
 
 export const QUERY_HOME = gql`
-  query HomeQuery($limit: Int!, $offset: Int!) {
+  query HomeQuery {
+    consensus_blocks(limit: 1, order_by: { sort_id: desc }) {
+      height
+      timestamp
+      space_pledged
+      blockchain_size
+    }
+    consensus_accounts_aggregate {
+      aggregate {
+        count
+      }
+    }
+    consensus_extrinsics_aggregate {
+      aggregate {
+        count
+      }
+    }
+  }
+`
+
+export const QUERY_HOME_BLOCKS_LIST = gql`
+  subscription HomeSubscriptionBlocksList($limit: Int!, $offset: Int!) {
     consensus_blocks(limit: $limit, offset: $offset, order_by: { sort_id: desc }) {
       id
       hash
@@ -13,6 +34,11 @@ export const QUERY_HOME = gql`
       extrinsics_count
       events_count
     }
+  }
+`
+
+export const QUERY_HOME_EXTRINSICS_LIST = gql`
+  subscription HomeSubscriptionExtrinsicsList($limit: Int!, $offset: Int!) {
     consensus_extrinsics(limit: $limit, offset: $offset, order_by: { timestamp: desc }) {
       hash
       id
@@ -22,31 +48,5 @@ export const QUERY_HOME = gql`
       block_height
       name
     }
-    consensus_accounts_aggregate {
-      aggregate {
-        count
-      }
-    }
-    accountsWithBalanceCount: consensus_accounts_aggregate(where: { total: { _gt: 1 } }) {
-      aggregate {
-        count
-      }
-    }
-    consensus_extrinsics_aggregate {
-      aggregate {
-        count
-      }
-    }
-    signedExtrinsics: consensus_extrinsics_aggregate(
-      where: {
-        signature: {
-          _neq: "0x00000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000"
-        }
-      }
-    ) {
-      aggregate {
-        count
-      }
-    }
   }
 `