Merge pull request #160 from topmonks/147-use-network-prefix

fix #147 - use ss58 prefix from network & refactoring
topmonks · Aug 28, 2023 · cad7c51 · cad7c51
2 parents ea2b2cb + 6f4ef4f
commit cad7c51
Show file tree

Hide file tree

Showing 26 changed files with 189 additions and 121 deletions.
diff --git a/src/components/AccountAddress.tsx b/src/components/AccountAddress.tsx
@@ -3,6 +3,7 @@ import { useMemo } from "react";
 import { Tooltip } from "@mui/material";
 import { css } from "@emotion/react";
 
+import { Network } from "../model/network";
 import { encodeAddress } from "../utils/formatAddress";
 import { shortenHash } from "../utils/shortenHash";
 
@@ -24,9 +25,8 @@ const copyToClipboardStyle = css`
 `;
 
 export type AccountLinkProps = {
-	network: string;
+	network: Network;
 	address: string;
-	prefix: number;
 	icon?: boolean;
 	link?: boolean;
 	shorten?: boolean;
@@ -37,21 +37,20 @@ export const AccountAddress = (props: AccountLinkProps) => {
 	const {
 		network,
 		address,
-		prefix,
 		icon = true,
 		link = true,
 		shorten,
 		copyToClipboard
 	} = props;
 
-	const encodedAddress = useMemo(() => encodeAddress(address, prefix), [address]);
+	const encodedAddress = useMemo(() => encodeAddress(address, network.prefix), [address]);
 
 	const content = useMemo(() => {
 		let content = <span>{shorten ? shortenHash(encodedAddress) : encodedAddress}</span>;
 
 		if (link) {
 			content = (
-				<Link to={`/${network}/account/${address}`}>
+				<Link to={`/${network.name}/account/${address}`}>
 					{content}
 				</Link>
 			);
@@ -83,7 +82,7 @@ export const AccountAddress = (props: AccountLinkProps) => {
 				<AccountAvatar
 					css={iconStyle}
 					address={address}
-					prefix={prefix}
+					prefix={network.prefix}
 					size={20}
 				/>
 			)}

diff --git a/src/components/DataViewer.tsx b/src/components/DataViewer.tsx
@@ -7,6 +7,7 @@ import { Close } from "@mui/icons-material";
 import { config } from "../config";
 
 import { DecodedArg } from "../model/decodedMetadata";
+import { Network } from "../model/network";
 import { RuntimeSpec } from "../model/runtimeSpec";
 
 import CopyToClipboardButton from "./CopyToClipboardButton";
@@ -203,7 +204,7 @@ const DataViewerModalHandle = (props: DataViewerModalHandleProps) => {
 };
 
 export type DataViewerProps = {
-	network: string;
+	network: Network;
 	data: any;
 	metadata?: DecodedArg[];
 	runtimeSpec?: RuntimeSpec;

diff --git a/src/components/DataViewerValueParsed.tsx b/src/components/DataViewerValueParsed.tsx
@@ -7,6 +7,7 @@ import { noCase } from "../utils/string";
 
 import { AccountAddress } from "./AccountAddress";
 import { RuntimeSpec } from "../model/runtimeSpec";
+import { Network } from "../model/network";
 
 // found in https://github.com/polkadot-js/apps/blob/59c2badf87c29fd8cb5b7dfcc045c3ce451a54bc/packages/react-params/src/Param/findComponent.ts#L51
 const ADDRESS_TYPES = ["AccountId", "AccountId20", "AccountId32", "Address", "LookupSource", "MultiAddress"];
@@ -72,7 +73,7 @@ const valueStyle = css`
 `;
 
 type ValueOfKindProps = {
-	network: string;
+	network: Network;
 	value: {
 		__kind: string,
 		value: any;
@@ -111,7 +112,7 @@ const ValueOfKind = (props: ValueOfKindProps) => {
 };
 
 type MaybeAccountLinkValueProps = {
-	network: string;
+	network: Network;
 	value: any;
 	valueMetadata: DecodedArg;
 	runtimeSpec: RuntimeSpec;
@@ -147,15 +148,14 @@ const AccountValue = (props: MaybeAccountLinkValueProps) => {
 			<AccountAddress
 				network={network}
 				address={value}
-				prefix={runtimeSpec.metadata.ss58Prefix}
 				copyToClipboard="small"
 			/>
 		</div>
 	);
 };
 
 export type DataViewerValueParsedProps = {
-	network: string;
+	network: Network;
 	value: any;
 	metadata?: DecodedArg[]|DecodedArg;
 	runtimeSpec?: RuntimeSpec;

diff --git a/src/components/account/AccountBalancesTable.tsx b/src/components/account/AccountBalancesTable.tsx
@@ -144,8 +144,7 @@ export const AccountBalancesTable = (props: AccountBalanceOverview) => {
 										<div>
 											<AccountAddress
 												address={balance.encodedAddress}
-												network={balance.network.name}
-												prefix={balance.network.prefix}
+												network={balance.network}
 												icon={false}
 												shorten
 												copyToClipboard="small"

diff --git a/src/components/account/AccountInfoTable.tsx b/src/components/account/AccountInfoTable.tsx
@@ -2,15 +2,15 @@
 import { HTMLAttributes } from "react";
 import { isEthereumAddress } from "@polkadot/util-crypto";
 
-import { useNetwork } from "../../hooks/useNetwork";
 import { Account } from "../../model/account";
+import { Network } from "../../model/network";
 import { Resource } from "../../model/resource";
 import { encodeAddress } from "../../utils/formatAddress";
 
 import {InfoTable, InfoTableAttribute } from "../InfoTable";
 
 export type AccountInfoTableProps = HTMLAttributes<HTMLDivElement> & {
-	network: string;
+	network: Network;
 	account: Resource<Account>;
 }
 
@@ -19,8 +19,6 @@ const AccountInfoTableAttribute = InfoTableAttribute<Account>;
 export const AccountInfoTable = (props: AccountInfoTableProps) => {
 	const {network, account, ...tableProps} = props;
 
-	const networkData = useNetwork(network);
-
 	return (
 		<InfoTable
 			data={account.data}
@@ -31,9 +29,9 @@ export const AccountInfoTable = (props: AccountInfoTableProps) => {
 			{...tableProps}
 		>
 			<AccountInfoTableAttribute
-				label={`${networkData?.displayName} address`}
-				render={(data) => encodeAddress(data.address, data.runtimeSpec.metadata.ss58Prefix)}
-				copyToClipboard={(data) => encodeAddress(data.address, data.runtimeSpec.metadata.ss58Prefix)}
+				label={`${network.displayName} address`}
+				render={(data) => encodeAddress(data.address, network.prefix)}
+				copyToClipboard={(data) => encodeAddress(data.address, network.prefix)}
 				hide={(data) => isEthereumAddress(data.address)}
 			/>
 			<AccountInfoTableAttribute

diff --git a/src/components/balances/BalancesTable.tsx b/src/components/balances/BalancesTable.tsx
@@ -1,16 +1,17 @@
 import { Balance } from "../../model/balance";
+import { Network } from "../../model/network";
 import { PaginatedResource } from "../../model/paginatedResource";
 import { Resource } from "../../model/resource";
 import { UsdRates } from "../../model/usdRates";
-import { getNetwork } from "../../services/networksService";
 import { decodeAddress } from "../../utils/formatAddress";
+
 import { AccountAddress } from "../AccountAddress";
 import { Currency } from "../Currency";
 import { ItemsTable, ItemsTableAttribute } from "../ItemsTable";
 import { Link } from "../Link";
 
 export type BalancesTableProps = {
-	network: string;
+	network: Network;
 	balances: PaginatedResource<Balance>;
 	usdRates: Resource<UsdRates>;
 };
@@ -37,7 +38,6 @@ function BalancesTable(props: BalancesTableProps) {
 					<AccountAddress
 						network={network}
 						address={decodeAddress(balance.id)}
-						prefix={balance.runtimeSpec.metadata.ss58Prefix}
 						shorten
 						copyToClipboard="small"
 					/>}
@@ -48,9 +48,9 @@ function BalancesTable(props: BalancesTableProps) {
 				render={(balance, usdRates) =>
 					<Currency
 						amount={balance.total}
-						currency={getNetwork(network).symbol}
+						currency={network.symbol}
 						decimalPlaces="optimal"
-						usdRate={usdRates[network]}
+						usdRate={usdRates[network.name]}
 						showFullInTooltip
 						showUsdValue
 					/>
@@ -62,9 +62,9 @@ function BalancesTable(props: BalancesTableProps) {
 				render={(balance, usdRates) =>
 					<Currency
 						amount={balance.free}
-						currency={getNetwork(network).symbol}
+						currency={network.symbol}
 						decimalPlaces="optimal"
-						usdRate={usdRates[network]}
+						usdRate={usdRates[network.name]}
 						showFullInTooltip
 						showUsdValue
 					/>
@@ -76,9 +76,9 @@ function BalancesTable(props: BalancesTableProps) {
 				render={(balance, usdRates) =>
 					<Currency
 						amount={balance.reserved}
-						currency={getNetwork(network).symbol}
+						currency={network.symbol}
 						decimalPlaces="optimal"
-						usdRate={usdRates[network]}
+						usdRate={usdRates[network.name]}
 						showFullInTooltip
 						showUsdValue
 					/>
@@ -88,7 +88,7 @@ function BalancesTable(props: BalancesTableProps) {
 			<BalancesItemsTableAttribute
 				label="Last update"
 				render={(balance) =>
-					<Link to={`/${network}/search?query=${balance.updatedAtBlock}`}>
+					<Link to={`/${network.name}/search?query=${balance.updatedAtBlock}`}>
 						{balance.updatedAtBlock}
 					</Link>
 				}

diff --git a/src/components/blocks/BlockInfoTable.tsx b/src/components/blocks/BlockInfoTable.tsx
@@ -1,4 +1,5 @@
 import { Block } from "../../model/block";
+import { Network } from "../../model/network";
 import { Resource } from "../../model/resource";
 import { encodeAddress } from "../../utils/formatAddress";
 
@@ -8,7 +9,7 @@ import { Link } from "../Link";
 import { Time } from "../Time";
 
 export type BlockInfoTableProps = {
-	network: string;
+	network: Network;
 	block: Resource<Block>;
 }
 
@@ -51,7 +52,7 @@ export const BlockInfoTable = (props: BlockInfoTableProps) => {
 			<BlockInfoTableAttribute
 				label="Parent hash"
 				render={(data) =>
-					<Link to={`/${network}/search?query=${data.parentHash}`}>
+					<Link to={`/${network.name}/search?query=${data.parentHash}`}>
 						{data.parentHash}
 					</Link>
 				}
@@ -63,13 +64,12 @@ export const BlockInfoTable = (props: BlockInfoTableProps) => {
 					<AccountAddress
 						network={network}
 						address={data.validator}
-						prefix={data.runtimeSpec.metadata.ss58Prefix}
 					/>
 				}
 				copyToClipboard={(data) => data.validator &&
 					encodeAddress(
 						data.validator,
-						data.runtimeSpec.metadata.ss58Prefix
+						network.prefix
 					)
 				}
 				hide={(data) => !data.validator}

diff --git a/src/components/blocks/BlocksTable.tsx b/src/components/blocks/BlocksTable.tsx
@@ -1,4 +1,5 @@
 import { Block } from "../../model/block";
+import { Network } from "../../model/network";
 import { PaginatedResource } from "../../model/paginatedResource";
 
 import { AccountAddress } from "../AccountAddress";
@@ -7,7 +8,7 @@ import { Link } from "../Link";
 import { Time } from "../Time";
 
 export type BlocksTableProps = {
-	network: string;
+	network: Network;
 	blocks: PaginatedResource<Block>,
 	showValidator: boolean,
 	showTime?: boolean;
@@ -36,7 +37,7 @@ function ExtrinsicsTable(props: BlocksTableProps) {
 			<BlocksTableAttribute
 				label="Height"
 				render={(block) =>
-					<Link to={`/${network}/block/${block.id}`}>
+					<Link to={`/${network.name}/block/${block.id}`}>
 						{block.height}
 					</Link>
 				}
@@ -56,7 +57,6 @@ function ExtrinsicsTable(props: BlocksTableProps) {
 					<AccountAddress
 						network={network}
 						address={block.validator}
-						prefix={block.runtimeSpec.metadata.ss58Prefix}
 						shorten
 						copyToClipboard="small"
 					/>

diff --git a/src/components/calls/CallInfoTable.tsx b/src/components/calls/CallInfoTable.tsx
@@ -4,6 +4,7 @@ import CrossIcon from "../../assets/cross-icon.png";
 import CheckIcon from "../../assets/check-icon.png";
 
 import { Call } from "../../model/call";
+import { Network } from "../../model/network";
 import { Resource } from "../../model/resource";
 
 import { encodeAddress } from "../../utils/formatAddress";
@@ -17,7 +18,7 @@ import { Link } from "../Link";
 import { Time } from "../Time";
 
 export type CallInfoTableProps = {
-	network: string;
+	network: Network;
 	call: Resource<Call>;
 }
 
@@ -49,7 +50,7 @@ export const CallInfoTable = (props: CallInfoTableProps) => {
 			<CallInfoTableAttribute
 				label="Block"
 				render={(data) =>
-					<Link to={`/${network}/block/${data.blockId}`}>
+					<Link to={`/${network.name}/block/${data.blockId}`}>
 						{data.blockHeight}
 					</Link>
 				}
@@ -58,7 +59,7 @@ export const CallInfoTable = (props: CallInfoTableProps) => {
 			<CallInfoTableAttribute
 				label="Extrinsic"
 				render={(data) =>
-					<Link to={`/${network}/extrinsic/${data.extrinsicId}`}>
+					<Link to={`/${network.name}/extrinsic/${data.extrinsicId}`}>
 						{data.extrinsicId}
 					</Link>
 				}
@@ -67,7 +68,7 @@ export const CallInfoTable = (props: CallInfoTableProps) => {
 			<CallInfoTableAttribute
 				label="Parent call"
 				render={(data) => data.parentId &&
-					<Link to={`/${network}/call/${data.parentId}`}>
+					<Link to={`/${network.name}/call/${data.parentId}`}>
 						{data.parentId}
 					</Link>
 				}
@@ -80,11 +81,10 @@ export const CallInfoTable = (props: CallInfoTableProps) => {
 					<AccountAddress
 						network={network}
 						address={data.caller}
-						prefix={data.runtimeSpec.metadata.ss58Prefix}
 					/>
 				}
 				copyToClipboard={(data) => data.caller &&
-					encodeAddress(data.caller, data.runtimeSpec.metadata.ss58Prefix)
+					encodeAddress(data.caller, network.prefix)
 				}
 				hide={(data) => !data.caller}
 			/>
@@ -102,7 +102,7 @@ export const CallInfoTable = (props: CallInfoTableProps) => {
 				label="Name"
 				render={(data) =>
 					<ButtonLink
-						to={`/${network}/search?query=${data.palletName}.${data.callName}`}
+						to={`/${network.name}/search?query=${data.palletName}.${data.callName}`}
 						size="small"
 						color="secondary"
 					>