From 2a31cee627e2b3107a84a6d44de33c3a4f2afdcf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Richard=20Jedli=C4=8Dka?= Date: Mon, 13 Nov 2023 11:16:49 +0100 Subject: [PATCH] add network info to items --- src/components/NetworkBadge.tsx | 35 +++++++++++++++++++ src/components/ResultLayout.tsx | 16 +++++---- src/components/SearchInput.tsx | 9 ++--- src/components/account/AccountInfoTable.tsx | 7 ++++ src/components/blocks/BlockInfoTable.tsx | 7 ++++ src/components/calls/CallInfoTable.tsx | 7 ++++ src/components/events/EventInfoTable.tsx | 7 ++++ .../extrinsics/ExtrinsicInfoTable.tsx | 8 +++++ src/components/search/SearchResultsTable.tsx | 21 ++--------- src/hooks/useNetworkLoaderData.ts | 7 ++++ src/hooks/useRootLoaderData.ts | 7 ---- src/screens/account.tsx | 2 +- src/screens/block.tsx | 2 +- src/screens/call.tsx | 2 +- src/screens/event.tsx | 2 +- src/screens/extrinsic.tsx | 2 +- src/screens/network.tsx | 2 +- src/screens/runtime.tsx | 2 +- 18 files changed, 102 insertions(+), 43 deletions(-) create mode 100644 src/components/NetworkBadge.tsx create mode 100644 src/hooks/useNetworkLoaderData.ts delete mode 100644 src/hooks/useRootLoaderData.ts diff --git a/src/components/NetworkBadge.tsx b/src/components/NetworkBadge.tsx new file mode 100644 index 00000000..340c813d --- /dev/null +++ b/src/components/NetworkBadge.tsx @@ -0,0 +1,35 @@ +/** @jsxImportSource @emotion/react */ +import { HTMLAttributes } from "react"; +import { css } from "@emotion/react"; + +import { Network } from "../model/network"; + +const networkStyle = css` + display: flex; + align-items: center; + + white-space: nowrap; +`; + +const networkIconStyle = css` + width: 20px; + height: 20px; + object-fit: contain; + margin-right: 12px; + flex: 0 0 auto; +`; + +export interface NetworkBadgeProps extends HTMLAttributes { + network: Network; +} + +export const NetworkBadge = (props: NetworkBadgeProps) => { + const {network, ...divProps} = props; + + return ( +
+ +
{network.displayName}
+
+ ); +}; diff --git a/src/components/ResultLayout.tsx b/src/components/ResultLayout.tsx index 664312de..840d79d9 100644 --- a/src/components/ResultLayout.tsx +++ b/src/components/ResultLayout.tsx @@ -1,17 +1,15 @@ /** @jsxImportSource @emotion/react */ -import { Outlet, useLoaderData, useLocation } from "react-router-dom"; +import { Outlet, useLocation } from "react-router-dom"; import { css, Theme } from "@emotion/react"; import Background from "../assets/detail-page-bgr.svg"; import { ReactComponent as Logo } from "../assets/calamar-logo-export-02.svg"; -import { Network } from "../model/network"; +import { useNetworkLoaderData } from "../hooks/useNetworkLoaderData"; -import { NotFoundPage } from "../screens/notFound"; - -import SearchInput from "./SearchInput"; -import { Link } from "./Link"; import { Footer } from "./Footer"; +import { Link } from "./Link"; +import SearchInput from "./SearchInput"; const containerStyle = (theme: Theme) => css` --content-wrapper-min-height: 450px; @@ -161,6 +159,10 @@ export const ResultLayout = () => { const location = useLocation(); console.log("LOCATION", location.pathname, location.search); + const { network } = useNetworkLoaderData(); + + console.log("network", network); + return (
@@ -173,7 +175,7 @@ export const ResultLayout = () => {
- +
diff --git a/src/components/SearchInput.tsx b/src/components/SearchInput.tsx index 80f089d8..a75eefb5 100644 --- a/src/components/SearchInput.tsx +++ b/src/components/SearchInput.tsx @@ -97,14 +97,15 @@ const buttonStyle = (theme: Theme) => css` export type SearchInputProps = FormHTMLAttributes & { persist?: boolean; + defaultNetworks?: Network[]; }; function SearchInput(props: SearchInputProps) { - const { persist, ...restProps } = props; + const { persist, defaultNetworks, ...restProps } = props; const [qs] = useSearchParams(); - const [networks, setNetworks] = useState(getNetworks(qs.getAll("network") || [])); + const [networks, setNetworks] = useState(defaultNetworks || getNetworks(qs.getAll("network") || [])); const [query, setQuery] = useState(qs.get("query") || ""); const navigate = useNavigate(); @@ -143,8 +144,8 @@ function SearchInput(props: SearchInputProps) { useEffect(() => { setQuery(qs.get("query") || ""); - setNetworks(getNetworks(qs.getAll("network") || [])); - }, [qs]); + setNetworks(defaultNetworks || getNetworks(qs.getAll("network") || [])); + }, [qs, defaultNetworks]); useEffect(() => { if (persist) { diff --git a/src/components/account/AccountInfoTable.tsx b/src/components/account/AccountInfoTable.tsx index 84aad101..fe0c41a7 100644 --- a/src/components/account/AccountInfoTable.tsx +++ b/src/components/account/AccountInfoTable.tsx @@ -8,6 +8,7 @@ import { Resource } from "../../model/resource"; import { encodeAddress } from "../../utils/address"; import {InfoTable, InfoTableAttribute } from "../InfoTable"; +import { NetworkBadge } from "../NetworkBadge"; export type AccountInfoTableProps = HTMLAttributes & { network: Network; @@ -28,6 +29,12 @@ export const AccountInfoTable = (props: AccountInfoTableProps) => { error={account.error} {...tableProps} > + + + } + /> encodeAddress(data.address, network.prefix)} diff --git a/src/components/blocks/BlockInfoTable.tsx b/src/components/blocks/BlockInfoTable.tsx index 8818cf78..84f5f4e3 100644 --- a/src/components/blocks/BlockInfoTable.tsx +++ b/src/components/blocks/BlockInfoTable.tsx @@ -6,6 +6,7 @@ import { encodeAddress } from "../../utils/address"; import { AccountAddress } from "../AccountAddress"; import { InfoTable, InfoTableAttribute } from "../InfoTable"; import { Link } from "../Link"; +import { NetworkBadge } from "../NetworkBadge"; import { Time } from "../Time"; export type BlockInfoTableProps = { @@ -26,6 +27,12 @@ export const BlockInfoTable = (props: BlockInfoTableProps) => { notFoundMessage="No block found" error={block.error} > + + + } + /> diff --git a/src/components/calls/CallInfoTable.tsx b/src/components/calls/CallInfoTable.tsx index 03b3b3d7..2465b47c 100644 --- a/src/components/calls/CallInfoTable.tsx +++ b/src/components/calls/CallInfoTable.tsx @@ -14,6 +14,7 @@ import { ButtonLink } from "../ButtonLink"; import { DataViewer } from "../DataViewer"; import { InfoTable, InfoTableAttribute } from "../InfoTable"; import { Link } from "../Link"; +import { NetworkBadge } from "../NetworkBadge"; import { Time } from "../Time"; export type CallInfoTableProps = { @@ -34,6 +35,12 @@ export const CallInfoTable = (props: CallInfoTableProps) => { notFoundMessage="No call found" error={call.error} > + + + } + /> diff --git a/src/components/events/EventInfoTable.tsx b/src/components/events/EventInfoTable.tsx index 388f71c1..be765676 100644 --- a/src/components/events/EventInfoTable.tsx +++ b/src/components/events/EventInfoTable.tsx @@ -6,6 +6,7 @@ import { ButtonLink } from "../ButtonLink"; import { DataViewer } from "../DataViewer"; import { InfoTable, InfoTableAttribute } from "../InfoTable"; import { Link } from "../Link"; +import { NetworkBadge } from "../NetworkBadge"; import { Time } from "../Time"; export type EventInfoTableProps = { @@ -26,6 +27,12 @@ export const EventInfoTable = (props: EventInfoTableProps) => { notFoundMessage="No event found" error={event.error} > + + + } + /> diff --git a/src/components/extrinsics/ExtrinsicInfoTable.tsx b/src/components/extrinsics/ExtrinsicInfoTable.tsx index 95afd436..421f99e0 100644 --- a/src/components/extrinsics/ExtrinsicInfoTable.tsx +++ b/src/components/extrinsics/ExtrinsicInfoTable.tsx @@ -1,3 +1,4 @@ +/** @jsxImportSource @emotion/react */ import { Chip } from "@mui/material"; import CrossIcon from "../../assets/cross-icon.png"; @@ -14,6 +15,7 @@ import { ButtonLink } from "../ButtonLink"; import { DataViewer } from "../DataViewer"; import { InfoTable, InfoTableAttribute } from "../InfoTable"; import { Link } from "../Link"; +import { NetworkBadge } from "../NetworkBadge"; import { Time } from "../Time"; export type ExtrinsicInfoTableProps = { @@ -34,6 +36,12 @@ export const ExtrinsicInfoTable = (props: ExtrinsicInfoTableProps) => { notFoundMessage="No extrinsic found" error={extrinsic.error} > + + + } + /> diff --git a/src/components/search/SearchResultsTable.tsx b/src/components/search/SearchResultsTable.tsx index c9abfa3f..c43aeb50 100644 --- a/src/components/search/SearchResultsTable.tsx +++ b/src/components/search/SearchResultsTable.tsx @@ -4,12 +4,12 @@ import { Alert } from "@mui/material"; import { css } from "@emotion/react"; import { Network } from "../../model/network"; -import { ItemsResponse } from "../../model/itemsResponse"; +import { SearchResultItem } from "../../model/searchResultItem"; import { formatNumber } from "../../utils/number"; import { ItemsTable, ItemsTableAttribute, ItemsTableAttributeProps, ItemsTableProps } from "../ItemsTable"; import { Link } from "../Link"; -import { SearchResultItem } from "../../model/searchResultItem"; +import { NetworkBadge } from "../NetworkBadge"; const tableStyle = css` `; @@ -19,19 +19,7 @@ const networkColumnStyle = css` `; const networkStyle = css` - display: flex; - align-items: center; margin-right: 80px; - - white-space: nowrap; -`; - -const networkIconStyle = css` - width: 20px; - height: 20px; - object-fit: contain; - margin-right: 16px; - flex: 0 0 auto; `; type SearchResultsTableChild = ReactElement>; @@ -114,10 +102,7 @@ export const SearchResultsTable = (pro label="Network" colCss={networkColumnStyle} render={(item) => ( -
- -
{item.network.displayName}
-
+ )} /> {itemAttributes} diff --git a/src/hooks/useNetworkLoaderData.ts b/src/hooks/useNetworkLoaderData.ts new file mode 100644 index 00000000..059ca7ef --- /dev/null +++ b/src/hooks/useNetworkLoaderData.ts @@ -0,0 +1,7 @@ +import { useRouteLoaderData } from "react-router"; + +import { NetworkLoaderData } from "../model/rootLoaderData"; + +export function useNetworkLoaderData() { + return (useRouteLoaderData("network") || {}) as DataEnsured extends false ? Partial : NetworkLoaderData; +} diff --git a/src/hooks/useRootLoaderData.ts b/src/hooks/useRootLoaderData.ts deleted file mode 100644 index 40f0ddfe..00000000 --- a/src/hooks/useRootLoaderData.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { useRouteLoaderData } from "react-router"; - -import { NetworkLoaderData } from "../model/rootLoaderData"; - -export function useNetworkLoaderData() { - return useRouteLoaderData("network") as NetworkLoaderData; -} diff --git a/src/screens/account.tsx b/src/screens/account.tsx index 2d2b983f..79fe8fb0 100644 --- a/src/screens/account.tsx +++ b/src/screens/account.tsx @@ -21,7 +21,7 @@ import { useCalls } from "../hooks/useCalls"; import { useDOMEventTrigger } from "../hooks/useDOMEventTrigger"; import { useExtrinsics } from "../hooks/useExtrinsics"; import { usePage } from "../hooks/usePage"; -import { useNetworkLoaderData } from "../hooks/useRootLoaderData"; +import { useNetworkLoaderData } from "../hooks/useNetworkLoaderData"; import { useTab } from "../hooks/useTab"; import { useTransfers } from "../hooks/useTransfers"; import { useUsdRates } from "../hooks/useUsdRates"; diff --git a/src/screens/block.tsx b/src/screens/block.tsx index 0dc75b23..3d657d2a 100644 --- a/src/screens/block.tsx +++ b/src/screens/block.tsx @@ -13,7 +13,7 @@ import { useCalls } from "../hooks/useCalls"; import { useEvents } from "../hooks/useEvents"; import { useExtrinsics } from "../hooks/useExtrinsics"; import { useDOMEventTrigger } from "../hooks/useDOMEventTrigger"; -import { useNetworkLoaderData } from "../hooks/useRootLoaderData"; +import { useNetworkLoaderData } from "../hooks/useNetworkLoaderData"; import { usePage } from "../hooks/usePage"; import { useTab } from "../hooks/useTab"; diff --git a/src/screens/call.tsx b/src/screens/call.tsx index 2bc30f6f..106484e4 100644 --- a/src/screens/call.tsx +++ b/src/screens/call.tsx @@ -10,7 +10,7 @@ import { useCall } from "../hooks/useCall"; import { useEvents } from "../hooks/useEvents"; import { useDOMEventTrigger } from "../hooks/useDOMEventTrigger"; import { usePage } from "../hooks/usePage"; -import { useNetworkLoaderData } from "../hooks/useRootLoaderData"; +import { useNetworkLoaderData } from "../hooks/useNetworkLoaderData"; import { useTab } from "../hooks/useTab"; export type CallPageParams = { diff --git a/src/screens/event.tsx b/src/screens/event.tsx index 4191090e..3b555861 100644 --- a/src/screens/event.tsx +++ b/src/screens/event.tsx @@ -5,7 +5,7 @@ import CopyToClipboardButton from "../components/CopyToClipboardButton"; import { EventInfoTable } from "../components/events/EventInfoTable"; import { useDOMEventTrigger } from "../hooks/useDOMEventTrigger"; import { useEvent } from "../hooks/useEvent"; -import { useNetworkLoaderData } from "../hooks/useRootLoaderData"; +import { useNetworkLoaderData } from "../hooks/useNetworkLoaderData"; export type EventPageParams = { id: string; diff --git a/src/screens/extrinsic.tsx b/src/screens/extrinsic.tsx index ccc303dd..5a22df5e 100644 --- a/src/screens/extrinsic.tsx +++ b/src/screens/extrinsic.tsx @@ -13,7 +13,7 @@ import { useEvents } from "../hooks/useEvents"; import { useExtrinsic } from "../hooks/useExtrinsic"; import { useDOMEventTrigger } from "../hooks/useDOMEventTrigger"; import { usePage } from "../hooks/usePage"; -import { useNetworkLoaderData } from "../hooks/useRootLoaderData"; +import { useNetworkLoaderData } from "../hooks/useNetworkLoaderData"; import { useTab } from "../hooks/useTab"; type ExtrinsicPageParams = { diff --git a/src/screens/network.tsx b/src/screens/network.tsx index 08987992..e214d7a3 100644 --- a/src/screens/network.tsx +++ b/src/screens/network.tsx @@ -15,7 +15,7 @@ import { useBlocks } from "../hooks/useBlocks"; import { useDOMEventTrigger } from "../hooks/useDOMEventTrigger"; import { useExtrinsicsWithoutTotalCount } from "../hooks/useExtrinsicsWithoutTotalCount"; import { usePage } from "../hooks/usePage"; -import { useNetworkLoaderData } from "../hooks/useRootLoaderData"; +import { useNetworkLoaderData } from "../hooks/useNetworkLoaderData"; import { useStats } from "../hooks/useStats"; import { useTab } from "../hooks/useTab"; import { useTransfers } from "../hooks/useTransfers"; diff --git a/src/screens/runtime.tsx b/src/screens/runtime.tsx index 74885e13..d08050ba 100644 --- a/src/screens/runtime.tsx +++ b/src/screens/runtime.tsx @@ -4,7 +4,7 @@ import { MenuItem, Select } from "@mui/material"; import { Card, CardHeader } from "../components/Card"; import { Devtool } from "../components/Devtool"; import { useRuntimeSpecVersions } from "../hooks/useRuntimeSpecVersions"; -import { useNetworkLoaderData } from "../hooks/useRootLoaderData"; +import { useNetworkLoaderData } from "../hooks/useNetworkLoaderData"; import { useRuntimeMetadataPallets } from "../hooks/useRuntimeMetadataPallets"; import { tryParseInt } from "../utils/string";