feat: page runtime detail info (#644)

* runtime detail api

* fix runtime detail page path

* feat: fetch runtime detail

* init page runtime

* init to runtime detail item

* runtime, add detail item

* fill list data

site/src/App.js

@@ -62,7 +62,8 @@ function App() {
         <Route path="/calls" element={<Calls />} />
         <Route path="/calls/:id" element={<Call />} />
         <Route path="/runtimes" element={<Runtimes />} />
-        <Route path="/runtimes/:version" element={<Runtime />} />
+        {/* /runtimes/:version_:startHeight */}
+        <Route path="/runtimes/:runtimeSlug" element={<Runtime />} />
       </Routes>
     </HashRouter>
   );

site/src/components/runtime/runtimesTable.js

@@ -14,7 +14,7 @@ const SpecName = styled.span`
 export default function RuntimesTable({ data = [], loading }) {
   const tableData = data?.map?.((item) => {
     return [
-      <ColoredLink to={`/runtimes/${item.specVersion}`}>
+      <ColoredLink to={`/runtimes/${item.specVersion}_${item.startHeight}`}>
         {item.specVersion}
       </ColoredLink>,
       <SpecName>{item.specName}</SpecName>,

site/src/pages/runtime.js

@@ -1,3 +1,59 @@
+import { useEffect } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { useParams } from "react-router-dom";
+import BreadCrumb from "../components/breadCrumb";
+import DetailLayout from "../components/layout/detailLayout";
+import List from "../components/list";
+import { Panel } from "../components/styled/panel";
+import {
+  clearRuntimeDetail,
+  runtimeDetailSelector,
+  runtimeFetchDetail,
+} from "../store/reducers/runtimeSlice";
+import {
+  clearHttpError,
+  handleApiError,
+} from "../utils/viewFuncs/errorHandles";
+import { toRuntimeDetailItem } from "../utils/viewFuncs/toDetailItem";
+
 export default function Runtime() {
-  return <div>page runtime</div>;
+  const { runtimeSlug } = useParams();
+  const [version, startHeight] = runtimeSlug.split("_");
+
+  const dispatch = useDispatch();
+  const runtime = useSelector(runtimeDetailSelector);
+
+  const listData = runtime ? toRuntimeDetailItem(runtime) : {};
+
+  useEffect(() => {
+    if (version && startHeight) {
+      clearHttpError(dispatch);
+      dispatch(runtimeFetchDetail(version, startHeight)).catch((e) =>
+        handleApiError(e, dispatch),
+      );
+    }
+
+    return () => {
+      dispatch(clearRuntimeDetail());
+    };
+  }, [version, dispatch, startHeight]);
+
+  const breadCrumb = (
+    <BreadCrumb
+      data={[
+        { name: "Runtimes", path: "/runtimes" },
+        {
+          name: version,
+        },
+      ]}
+    />
+  );
+
+  return (
+    <DetailLayout breadCrumb={breadCrumb}>
+      <Panel>
+        <List data={listData} />
+      </Panel>
+    </DetailLayout>
+  );
 }

site/src/services/urls.js

@@ -39,6 +39,8 @@ export const nftInstanceApi = (classId, instanceId) =>
 
 // runtimes
 export const runtimeListApi = "/runtimes";
+export const runtimeDetailApi = (version, startHeight) =>
+  `/runtimes/${version}_${startHeight}`;
 
 // dotreasury
 const dotreasuryApiEndPoint =

site/src/store/reducers/runtimeSlice.js

@@ -1,6 +1,6 @@
 import { createSlice } from "@reduxjs/toolkit";
 import api from "../../services/api";
-import { runtimeListApi } from "../../services/urls";
+import { runtimeDetailApi, runtimeListApi } from "../../services/urls";
 
 const name = "runtime";
 
@@ -50,4 +50,18 @@ export const clearRuntimeList = () => (dispatch) => {
   dispatch(setList(null));
 };
 
+export const runtimeFetchDetail = (version, startHeight) => (dispatch) => {
+  return api
+    .fetch(runtimeDetailApi(version, startHeight))
+    .then(({ result }) => {
+      if (result) {
+        dispatch(setDetail(result));
+      }
+    });
+};
+
+export const clearRuntimeDetail = () => (dispatch) => {
+  dispatch(setDetail(null));
+};
+
 export default runtimeSlice.reducer;

site/src/utils/viewFuncs/toDetailItem.js

@@ -29,6 +29,7 @@ import { bigNumberToLocaleString } from ".";
 import { time } from "./time";
 import { isCid } from "../cid";
 import { getNftInstanceParsedMetadata } from "../nft";
+import capitalize from "lodash.capitalize";
 
 const TextSecondaryWithCopy = withCopy(TextSecondary);
 const ColoredMonoLinkWithCopy = withCopy(ColoredMonoLink);
@@ -237,6 +238,26 @@ export const toCallDetailItem = (indexer, section, method) => {
   };
 };
 
+export const toRuntimeDetailItem = (runtime) => {
+  return {
+    Version: (
+      <TextSecondary>{runtime?.runtimeVersion?.specVersion}</TextSecondary>
+    ),
+    ID: <TextSecondary>-</TextSecondary>,
+    "Start Height": (
+      <ColoredInterLink to={`/blocks/${runtime?.height}`}>
+        {runtime?.height?.toLocaleString?.()}
+      </ColoredInterLink>
+    ),
+    "Spec Name": (
+      <TextSecondary>
+        {capitalize(runtime?.runtimeVersion?.specName)}
+      </TextSecondary>
+    ),
+    Pallets: <TextSecondary>-</TextSecondary>,
+  };
+};
+
 export const toEventDetailItem = (event) => {
   return {
     "Event Time": <DetailedTime ts={event?.indexer?.blockTime} />,