@@ -135,7 +135,8 @@ export function Availabilities() {
- );
+ )
}
}
-export const Route = createFileRoute("/dashboard/availabilities")({
+export const Route = createLazyFileRoute('/dashboard/availabilities')({
component: () => (
(
- )}>
+ )}
+ >
),
-});
+})
diff --git a/src/routes/dashboard/peers.tsx b/src/routes/dashboard/peers.lazy.tsx
similarity index 59%
rename from src/routes/dashboard/peers.tsx
rename to src/routes/dashboard/peers.lazy.tsx
index 491e867..2dcfbb6 100644
--- a/src/routes/dashboard/peers.tsx
+++ b/src/routes/dashboard/peers.lazy.tsx
@@ -1,28 +1,28 @@
-import { Cell, Row, Table } from "@codex-storage/marketplace-ui-components";
-import { createFileRoute } from "@tanstack/react-router";
-import { getMapJSON } from "dotted-map";
-import DottedMap from "dotted-map/without-countries";
-import { Promises } from "../../utils/promises";
-import { useQuery } from "@tanstack/react-query";
-import { PeerCountryCell } from "../../components/Peers/PeerCountryCell";
-import { useCallback, useState } from "react";
-import { PeerPin } from "../../components/Peers/types";
-import "./peers.css";
-import { CodexSdk } from "../../sdk/codex";
-import { ErrorBoundary } from "@sentry/react";
-import { ErrorPlaceholder } from "../../components/ErrorPlaceholder/ErrorPlaceholder";
+import { Cell, Row, Table } from '@codex-storage/marketplace-ui-components'
+import { createLazyFileRoute } from '@tanstack/react-router'
+import { getMapJSON } from 'dotted-map'
+import DottedMap from 'dotted-map/without-countries'
+import { Promises } from '../../utils/promises'
+import { useQuery } from '@tanstack/react-query'
+import { PeerCountryCell } from '../../components/Peers/PeerCountryCell'
+import { useCallback, useState } from 'react'
+import { PeerPin } from '../../components/Peers/types'
+import './peers.css'
+import { CodexSdk } from '../../sdk/codex'
+import { ErrorBoundary } from '@sentry/react'
+import { ErrorPlaceholder } from '../../components/ErrorPlaceholder/ErrorPlaceholder'
// This function accepts the same arguments as DottedMap in the example above.
-const mapJsonString = getMapJSON({ height: 60, grid: "diagonal" });
+const mapJsonString = getMapJSON({ height: 60, grid: 'diagonal' })
const Peers = () => {
- const [pins, setPins] = useState<[PeerPin, number][]>([]);
+ const [pins, setPins] = useState<[PeerPin, number][]>([])
const { data } = useQuery({
queryFn: () =>
CodexSdk.debug()
.info()
.then((s) => Promises.rejectOnError(s)),
- queryKey: ["debug"],
+ queryKey: ['debug'],
// No need to retry because if the connection to the node
// is back again, all the queries will be invalidated.
@@ -38,36 +38,36 @@ const Peers = () => {
// Throw the error to the error boundary
throwOnError: true,
- });
+ })
const onPinAdd = useCallback((pin: PeerPin) => {
setPins((val) => {
const [, quantity = 0] =
- val.find(([p]) => p.lat === pin.lat && p.lng == pin.lng) || [];
- return [...val, [pin, quantity + 1]];
- });
- }, []);
+ val.find(([p]) => p.lat === pin.lat && p.lng == pin.lng) || []
+ return [...val, [pin, quantity + 1]]
+ })
+ }, [])
// It’s safe to re-create the map at each render, because of the
// pre-computation it’s super fast ⚡️
- const map = new DottedMap({ map: JSON.parse(mapJsonString) });
+ const map = new DottedMap({ map: JSON.parse(mapJsonString) })
pins.map(([pin, quantity]) =>
map.addPin({
lat: pin.lat,
lng: pin.lng,
- svgOptions: { color: "#d6ff79", radius: 0.8 * quantity },
- })
- );
+ svgOptions: { color: '#d6ff79', radius: 0.8 * quantity },
+ }),
+ )
const svgMap = map.getSVG({
radius: 0.42,
- color: "#423B38",
- shape: "circle",
- backgroundColor: "#020300",
- });
+ color: '#423B38',
+ shape: 'circle',
+ backgroundColor: '#020300',
+ })
- const headers = ["Country", "PeerId", "Active"];
+ const headers = ['Country', 'PeerId', 'Active']
const rows =
(data?.table?.nodes || []).map((node) => (
@@ -75,7 +75,8 @@ const Peers = () => {
cells={[
,
+ address={node.address}
+ >,
{node.peerId} | ,
{node.seen ? (
@@ -84,8 +85,9 @@ const Peers = () => {
)}
| ,
- ]}>
- )) || [];
+ ]}
+ >
+ )) || []
return (
@@ -96,20 +98,22 @@ const Peers = () => {
+ dangerouslySetInnerHTML={{ __html: svgMap }}
+ >