feat: add main query

package.json

@@ -35,7 +35,7 @@
     "@emotion/styled": "11.10.6",
     "@topos-protocol/topos-smart-contracts": "^1.2.2",
     "3d-force-graph": "^1.71.4",
-    "antd": "^5.8.4",
+    "antd": "^5.10.1",
     "axios": "^1.4.0",
     "ethers": "^5.7.2",
     "force-graph": "^1.43.1",

src/components/MainQuery.tsx

@@ -0,0 +1,160 @@
+import styled from '@emotion/styled'
+import { AutoComplete, Form, Input } from 'antd'
+import { useContext, useMemo } from 'react'
+
+import _Link from './Link'
+import useSubnetGetBlock from '../hooks/useSubnetGetBlock'
+import { SelectedNetworksContext } from '../contexts/selectedNetworks'
+import useSubnetGetTransactionAndReceipt from '../hooks/useSubnetGetTransactionAndReceipt'
+import useSubnetGetCertificateById from '../hooks/useSubnetGetCertificateById'
+import useSubnetGetCertificates from '../hooks/useSubnetGetCertificates'
+import useSubnetGetAccountBalance from '../hooks/useSubnetGetAccountBalance'
+
+const Link = styled(_Link)`
+  color: ${({ theme }) => theme.colorText};
+
+  &:hover {
+    color: ${({ theme }) => theme.colorText} !important;
+  }
+`
+
+const { Search } = Input
+
+const MainQuery = () => {
+  const [form] = Form.useForm()
+  const query = Form.useWatch('query', form)
+  const { selectedSubnet } = useContext(SelectedNetworksContext)
+  const { block } = useSubnetGetBlock(selectedSubnet, query)
+  const { transaction } = useSubnetGetTransactionAndReceipt(
+    selectedSubnet,
+    query
+  )
+  const { certificate } = useSubnetGetCertificateById({
+    certificateId: query,
+    sourceSubnetId: selectedSubnet?.id,
+  })
+  const { certificates: certificatesByPosition } = useSubnetGetCertificates({
+    limit: 1,
+    sourceStreamPosition: {
+      position: isNaN(+query) ? Infinity : parseInt(query),
+      sourceSubnetId: { value: selectedSubnet?.id || '' },
+    },
+  })
+  const { balance } = useSubnetGetAccountBalance(selectedSubnet, query)
+
+  const options = useMemo(() => {
+    const options = []
+
+    if (block) {
+      options.push({
+        label: (
+          <span>
+            Blocks
+            <_Link
+              style={{ float: 'right' }}
+              to={`/subnet/${selectedSubnet?.id}/blocks`}
+            >
+              more
+            </_Link>
+          </span>
+        ),
+        options: [
+          {
+            label: (
+              <Link to={`/subnet/${selectedSubnet?.id}/block/${block.hash}`}>
+                {block.hash}
+              </Link>
+            ),
+            value: block.hash,
+          },
+        ],
+      })
+    }
+
+    if (transaction) {
+      options.push({
+        label: <span>Transactions</span>,
+        options: [
+          {
+            label: (
+              <Link
+                to={`/subnet/${selectedSubnet?.id}/transaction/${transaction.hash}`}
+              >
+                {transaction.hash}
+              </Link>
+            ),
+            value: transaction.hash,
+          },
+        ],
+      })
+    }
+
+    if (
+      certificate ||
+      (certificatesByPosition && certificatesByPosition?.length)
+    ) {
+      options.push({
+        label: (
+          <span>
+            Certificates
+            <_Link
+              style={{ float: 'right' }}
+              to={`/subnet/${selectedSubnet?.id}/certificates`}
+            >
+              more
+            </_Link>
+          </span>
+        ),
+        options: [
+          {
+            label: (
+              <Link
+                to={`/subnet/${selectedSubnet?.id}/certificate/${
+                  certificate ? certificate.id : certificatesByPosition![0].id
+                }`}
+              >
+                {certificate ? certificate.id : certificatesByPosition![0].id}
+              </Link>
+            ),
+            value: certificate ? certificate.id : certificatesByPosition![0].id,
+          },
+        ],
+      })
+    }
+
+    if (balance) {
+      options.push({
+        label: <span>Accounts</span>,
+        options: [
+          {
+            label: (
+              <Link to={`/subnet/${selectedSubnet?.id}/account/${query}`}>
+                {query}
+              </Link>
+            ),
+            value: query,
+          },
+        ],
+      })
+    }
+
+    return options
+  }, [block, transaction, certificate, certificatesByPosition, balance])
+
+  return (
+    <Form form={form}>
+      <Form.Item name="query">
+        <AutoComplete options={options} popupMatchSelectWidth={700}>
+          <Search
+            allowClear
+            placeholder="Query by tx, block, certificate, or account"
+            size="large"
+            style={{ maxWidth: 700 }}
+          />
+        </AutoComplete>
+      </Form.Item>
+    </Form>
+  )
+}
+
+export default MainQuery

src/components/Routes.tsx

@@ -5,14 +5,16 @@ import { createPortal } from 'react-dom'
 import { Route, Routes as RouterRoutes } from 'react-router-dom'
 
 import { RouteParamsFirstContext } from '../contexts/routeParamsFirst'
-import Home from '../routes/Home'
 import _404 from '../routes/404'
-import SubnetBlock from '../routes/SubnetBlock'
-import Subnet from '../routes/Subnet'
-import Certificates from '../routes/Certificates'
 import CrossSubnetMessages from '../routes/CrossSubnetMessages'
-import SubnetTransaction from '../routes/SubnetTransaction'
+import Home from '../routes/Home'
+import Subnet from '../routes/Subnet'
+import SubnetAccount from '../routes/SubnetAccount'
+import SubnetBlock from '../routes/SubnetBlock'
+import SubnetBlocks from '../routes/SubnetBlocks'
 import SubnetCertificate from '../routes/SubnetCertificate'
+import SubnetCertificates from '../routes/SubnetCertificates'
+import SubnetTransaction from '../routes/SubnetTransaction'
 import LoadingScreen from './LoadingScreen'
 
 const { Content: AntdContent } = Layout
@@ -58,11 +60,19 @@ const Routes = () => {
           path="/subnet/:subnetId/transaction/:transactionHash"
           element={<SubnetTransaction />}
         />
-        <Route path="/subnet/certificates" element={<Certificates />} />
+        <Route path="/subnet/:subnetId/blocks" element={<SubnetBlocks />} />
+        <Route
+          path="/subnet/:subnetId/certificates"
+          element={<SubnetCertificates />}
+        />
         <Route
           path="/subnet/:subnetId/certificate/:certificatePositionOrId"
           element={<SubnetCertificate />}
         />
+        <Route
+          path="/subnet/:subnetId/account/:accountAddress"
+          element={<SubnetAccount />}
+        />
         <Route
           path="/cross-subnet-messages"
           element={<CrossSubnetMessages />}

src/components/SubnetAccountInfo.tsx

@@ -0,0 +1,100 @@
+import {
+  Card,
+  Col,
+  Descriptions,
+  Divider,
+  Row,
+  Space,
+  Spin,
+  Statistic,
+  Tag,
+} from 'antd'
+import { utils } from 'ethers'
+import { useContext, useEffect } from 'react'
+
+import { ErrorsContext } from '../contexts/errors'
+import { SelectedNetworksContext } from '../contexts/selectedNetworks'
+import useSubnetGetAccountBalance from '../hooks/useSubnetGetAccountBalance'
+import useSubnetGetAccountTxCount from '../hooks/useSubnetGetAccountTxCount'
+import useSubnetGetAccountCode from '../hooks/useSubnetGetAccountCode'
+
+interface Props {
+  address: string
+}
+
+const SubnetAccountInfo = ({ address }: Props) => {
+  const { setErrors } = useContext(ErrorsContext)
+  const { selectedSubnet } = useContext(SelectedNetworksContext)
+  const {
+    balance,
+    errors: getBalanceErrors,
+    loading: getBalanceLoading,
+  } = useSubnetGetAccountBalance(selectedSubnet, address)
+  const {
+    txCount,
+    errors: getTxCountErrors,
+    loading: getTxCountLoading,
+  } = useSubnetGetAccountTxCount(selectedSubnet, address)
+  const {
+    code,
+    errors: getCodeErrors,
+    loading: getCodeLoading,
+  } = useSubnetGetAccountCode(selectedSubnet, address)
+
+  useEffect(
+    function bubbleErrors() {
+      setErrors((e) => [
+        ...e,
+        ...getBalanceErrors,
+        ...getTxCountErrors,
+        ...getCodeErrors,
+      ])
+    },
+    [getBalanceErrors, getTxCountErrors, getCodeErrors]
+  )
+
+  return (
+    <Space direction="vertical">
+      <Divider orientation="left" style={{ margin: '2rem 0' }}>
+        Account Info
+      </Divider>
+      <Descriptions>
+        <Descriptions.Item label="Type">
+          {getCodeLoading ? (
+            <Spin />
+          ) : code === '0x' ? (
+            <Tag color="cyan">EOA</Tag>
+          ) : (
+            <Tag color="gold">Contract</Tag>
+          )}
+        </Descriptions.Item>
+      </Descriptions>
+      <Descriptions>
+        <Descriptions.Item label="Address">{address}</Descriptions.Item>
+      </Descriptions>
+      <Row gutter={16}>
+        <Col span={12}>
+          <Card>
+            <Statistic
+              title="Balance"
+              loading={getBalanceLoading}
+              suffix={selectedSubnet?.currencySymbol}
+              value={balance !== undefined ? utils.formatUnits(balance) : ''}
+            />
+          </Card>
+        </Col>
+        <Col span={4}>
+          <Card>
+            <Statistic
+              title="Transaction count"
+              loading={getTxCountLoading}
+              value={txCount}
+            />
+          </Card>
+        </Col>
+      </Row>
+    </Space>
+  )
+}
+
+export default SubnetAccountInfo

src/components/SubnetBlockInfo.tsx

@@ -1,3 +1,4 @@
+import { CaretRightOutlined } from '@ant-design/icons'
 import styled from '@emotion/styled'
 import { BlockWithTransactions } from '@ethersproject/abstract-provider'
 import {
@@ -14,10 +15,9 @@ import {
 import { ethers } from 'ethers'
 import { useContext } from 'react'
 
-import Link from './Link'
 import { SelectedNetworksContext } from '../contexts/selectedNetworks'
+import Link from './Link'
 import SubnetNameAndLogo from './SubnetNameAndLogo'
-import { CaretRightOutlined } from '@ant-design/icons'
 import AddressInfo from './AddressInfo'
 
 const { Text } = Typography