Merge pull request #130 from topmonks/implement-caller-squids-for-all…

…-api-calls Implement caller squids for all api calls
topmonks · Feb 8, 2023 · fe8ceea · fe8ceea
2 parents 3d9ec04 + 4c75caf
commit fe8ceea
Show file tree

Hide file tree

Showing 56 changed files with 1,393 additions and 549 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -38,6 +38,7 @@ module.exports = {
 		"@typescript-eslint/no-empty-interface": ["off"],
 		"@typescript-eslint/no-empty-function": ["off"],
 		"prefer-const": ["warn"],
-		"no-debugger": ["warn"]
+		"no-debugger": ["warn"],
+		"no-constant-condition": ["warn"]
 	}
 };
diff --git a/package.json b/package.json
@@ -40,6 +40,7 @@
     "start:test": "serve ./build -s",
     "build": "cross-env CI=false react-scripts build",
     "test": "playwright test",
+    "test:debug": "playwright test --debug",
     "test:report": "playwright show-report test/report",
     "lint": "eslint ./src",
     "lint:fix": "eslint ./src --fix"

diff --git a/playwright.config.ts b/playwright.config.ts
@@ -47,6 +47,10 @@ const config: Config = {
 		trace: process.env.CI ? "retain-on-failure" : "on",
 
 		testIdAttribute: "data-test",
+
+		launchOptions: {
+			devtools: process.env.PWDEBUG ? true : false
+		}
 	},
 	/* Configure projects for major browsers */
 	projects: [

diff --git a/src/components/CopyToClipboardButton.tsx b/src/components/CopyToClipboardButton.tsx
@@ -7,8 +7,8 @@ const buttonStyle = css`
 	padding: 0;
 `;
 
-export type CopyToClipboardButtonProps = IconButtonProps & {
-	value?: string;
+export type CopyToClipboardButtonProps = Omit<IconButtonProps, "value"> & {
+	value: string|null|undefined;
 }
 
 const CopyToClipboardButton = (props: CopyToClipboardButtonProps) => {

diff --git a/src/components/InfoTable.tsx b/src/components/InfoTable.tsx
@@ -86,7 +86,7 @@ export type InfoTableAttributeProps<T, A extends any[]> = {
 	labelCss?: Interpolation<Theme>;
 	valueCss?: Interpolation<Theme>;
 	render: InfoTableGetter<T, A, ReactNode>;
-	copyToClipboard?: InfoTableGetter<T, A, string|undefined>;
+	copyToClipboard?: InfoTableGetter<T, A, string|null|undefined>;
 	hide?: InfoTableGetter<T, A, boolean>;
 	_data?: T;
 	_additionalData?: A;

diff --git a/src/components/blocks/BlockInfoTable.tsx b/src/components/blocks/BlockInfoTable.tsx
@@ -76,7 +76,7 @@ export const BlockInfoTable = (props: BlockInfoTableProps) => {
 			/>
 			<BlockInfoTableAttribute
 				label="Spec version"
-				render={(data) => data.spec.specVersion}
+				render={(data) => data.specVersion}
 			/>
 		</InfoTable>
 

diff --git a/src/components/calls/CallInfoTable.tsx b/src/components/calls/CallInfoTable.tsx
@@ -37,62 +37,56 @@ export const CallInfoTable = (props: CallInfoTableProps) => {
 			<CallInfoTableAttribute
 				label="Timestamp"
 				render={(data) =>
-					<Time time={data.block.timestamp} utc />
+					<Time time={data.timestamp} utc />
 				}
 			/>
 			<CallInfoTableAttribute
 				label="Block time"
 				render={(data) =>
-					<Time time={data.block.timestamp} fromNow />
+					<Time time={data.timestamp} fromNow />
 				}
 			/>
 			<CallInfoTableAttribute
 				label="Block"
 				render={(data) =>
-					<Link to={`/${network}/block/${data.block.id}`}>
-						{data.block.height}
+					<Link to={`/${network}/block/${data.blockId}`}>
+						{data.blockHeight}
 					</Link>
 				}
-				copyToClipboard={(data) => data.block.id}
+				copyToClipboard={(data) => data.blockId}
 			/>
 			<CallInfoTableAttribute
 				label="Extrinsic"
 				render={(data) =>
-					<Link to={`/${network}/extrinsic/${data.extrinsic.id}`}>
-						{data.extrinsic.id}
+					<Link to={`/${network}/extrinsic/${data.extrinsicId}`}>
+						{data.extrinsicId}
 					</Link>
 				}
-				copyToClipboard={(data) => data.extrinsic.id}
+				copyToClipboard={(data) => data.extrinsicId}
 			/>
 			<CallInfoTableAttribute
 				label="Parent call"
-				render={(data) => data.parent &&
-					<Link to={`/${network}/call/${data.parent.id}`}>
-						{data.parent.id}
+				render={(data) => data.parentId &&
+					<Link to={`/${network}/call/${data.parentId}`}>
+						{data.parentId}
 					</Link>
 				}
-				copyToClipboard={(data) => data.parent?.id}
-				hide={(data) => !data.parent}
+				copyToClipboard={(data) => data.parentId}
+				hide={(data) => !data.parentId}
 			/>
 			<CallInfoTableAttribute
 				label="Sender"
-				render={(data) =>
-					data.origin && data.origin.value.__kind !== "None" && (
-						<AccountAddress
-							network={network}
-							address={data.origin.value.value}
-							prefix={data.runtimeSpec.metadata.ss58Prefix}
-						/>
-					)
+				render={(data) => data.caller &&
+					<AccountAddress
+						network={network}
+						address={data.caller}
+						prefix={data.runtimeSpec.metadata.ss58Prefix}
+					/>
 				}
-				copyToClipboard={(data) =>
-					data.origin && data.origin.value.__kind !== "None" &&
-					encodeAddress(
-						data.origin.value.value,
-						data.runtimeSpec.metadata.ss58Prefix
-					)
+				copyToClipboard={(data) => data.caller &&
+					encodeAddress(data.caller, data.runtimeSpec.metadata.ss58Prefix)
 				}
-				hide={(data) => !data.origin || data.origin.value.__kind === "None"}
+				hide={(data) => !data.caller}
 			/>
 			<CallInfoTableAttribute
 				label="Result"
@@ -108,11 +102,11 @@ export const CallInfoTable = (props: CallInfoTableProps) => {
 				label="Name"
 				render={(data) =>
 					<ButtonLink
-						to={`/${network}/search?query=${data.name}`}
+						to={`/${network}/search?query=${data.palletName}.${data.callName}`}
 						size="small"
 						color="secondary"
 					>
-						{data.name}
+						{data.palletName}.{data.callName}
 					</ButtonLink>
 				}
 			/>
@@ -125,7 +119,8 @@ export const CallInfoTable = (props: CallInfoTableProps) => {
 						metadata={
 							getCallMetadataByName(
 								data.runtimeSpec.metadata,
-								data.name
+								data.palletName,
+								data.callName
 							)?.args
 						}
 						runtimeSpec={data.runtimeSpec}
@@ -135,7 +130,7 @@ export const CallInfoTable = (props: CallInfoTableProps) => {
 			/>
 			<CallInfoTableAttribute
 				label="Spec version"
-				render={(data) => data.block.spec.specVersion}
+				render={(data) => data.specVersion}
 			/>
 		</InfoTable>
 	);

diff --git a/src/components/calls/CallsTable.tsx b/src/components/calls/CallsTable.tsx
@@ -1,6 +1,5 @@
 import { Call } from "../../model/call";
 import { PaginatedResource } from "../../model/paginatedResource";
-
 import { AccountAddress } from "../AccountAddress";
 import { ButtonLink } from "../ButtonLink";
 import { ItemsTable, ItemsTableAttribute } from "../ItemsTable";
@@ -9,12 +8,13 @@ import { Link } from "../Link";
 export type CallsTableProps = {
 	network: string;
 	calls: PaginatedResource<Call>;
+	showAccount?: boolean;
 };
 
 const CallsTableAttribute = ItemsTableAttribute<Call>;
 
 export const CallsTable = (props: CallsTableProps) => {
-	const { network, calls } = props;
+	const { network, calls, showAccount } = props;
 
 	return (
 		<ItemsTable
@@ -38,32 +38,32 @@ export const CallsTable = (props: CallsTableProps) => {
 				label="Name"
 				render={(call) =>
 					<ButtonLink
-						to={`/${network}/search?query=${call.name}`}
+						to={`/${network}/search?query=${call.palletName}.${call.callName}`}
 						size="small"
 						color="secondary"
 					>
-						{call.name}
+						{call.palletName}.{call.callName}
 					</ButtonLink>
 				}
 			/>
-			<CallsTableAttribute
-				label="Sender"
-				render={(call) =>
-					call.origin && call.origin.value.__kind !== "None" && (
+			{showAccount && (
+				<CallsTableAttribute
+					label="Sender"
+					render={(call) => call.caller &&
 						<AccountAddress
 							network={network}
-							address={call.origin.value.value}
+							address={call.caller}
 							prefix={call.runtimeSpec.metadata.ss58Prefix}
 							shorten
 						/>
-					)
-				}
-			/>
+					}
+				/>
+			)}
 			<CallsTableAttribute
 				label="Extrinsic"
 				render={(call) =>
-					<Link to={`/${network}/extrinsic/${call.extrinsic.id}`}>
-						{call.extrinsic.id}
+					<Link to={`/${network}/extrinsic/${call.extrinsicId}`}>
+						{call.extrinsicId}
 					</Link>
 				}
 			/>

diff --git a/src/components/events/EventInfoTable.tsx b/src/components/events/EventInfoTable.tsx
@@ -29,57 +29,57 @@ export const EventInfoTable = (props: EventInfoTableProps) => {
 			<EventInfoTableAttribute
 				label="Timestamp"
 				render={(data) =>
-					<Time time={data.block.timestamp} utc />
+					<Time time={data.timestamp} utc />
 				}
 			/>
 			<EventInfoTableAttribute
 				label="Block time"
 				render={(data) =>
-					<Time time={data.block.timestamp} fromNow />
+					<Time time={data.timestamp} fromNow />
 				}
 			/>
 			<EventInfoTableAttribute
 				label="Block"
 				render={(data) =>
 					<Link
-						to={`/${network}/block/${data.block.id}`}
+						to={`/${network}/block/${data.blockId}`}
 					>
-						{data.block.height}
+						{data.blockHeight}
 					</Link>
 				}
-				copyToClipboard={(data) => data.block.height.toString()}
+				copyToClipboard={(data) => data.blockHeight.toString()}
 			/>
 			<EventInfoTableAttribute
 				label="Extrinsic"
-				render={(data) => data.extrinsic &&
+				render={(data) => data.extrinsicId &&
 					<Link
-						to={`/${network}/extrinsic/${data.extrinsic.id}`}
+						to={`/${network}/extrinsic/${data.extrinsicId}`}
 					>
-						{data.extrinsic.id}
+						{data.extrinsicId}
 					</Link>
 				}
-				copyToClipboard={(data) => data.extrinsic?.id}
+				copyToClipboard={(data) => data.extrinsicId}
 			/>
 			<EventInfoTableAttribute
 				label="Call"
-				render={(data) => data.call &&
+				render={(data) => data.callId &&
 					<Link
-						to={`/${network}/call/${data.call.id}`}
+						to={`/${network}/call/${data.callId}`}
 					>
-						{data.call.id}
+						{data.callId}
 					</Link>
 				}
-				copyToClipboard={(data) => data.call?.id}
+				copyToClipboard={(data) => data.callId}
 			/>
 			<EventInfoTableAttribute
 				label="Name"
 				render={(data) =>
 					<ButtonLink
-						to={`/${network}/search?query=${data.name}`}
+						to={`/${network}/search?query=${data.palletName}.${data.eventName}`}
 						size="small"
 						color="secondary"
 					>
-						{data.name}
+						{data.palletName}.{data.eventName}
 					</ButtonLink>
 				}
 			/>
@@ -89,7 +89,7 @@ export const EventInfoTable = (props: EventInfoTableProps) => {
 					<DataViewer
 						network={network}
 						data={data.args}
-						metadata={getEventMetadataByName(data.runtimeSpec.metadata, data.name)?.args}
+						metadata={getEventMetadataByName(data.runtimeSpec.metadata, data.palletName, data.eventName)?.args}
 						runtimeSpec={data.runtimeSpec}
 						copyToClipboard
 					/>
@@ -98,7 +98,7 @@ export const EventInfoTable = (props: EventInfoTableProps) => {
 			/>
 			<EventInfoTableAttribute
 				label="Spec version"
-				render={(data) => data.block.spec.specVersion}
+				render={(data) => data.specVersion}
 			/>
 		</InfoTable>
 	);

diff --git a/src/components/events/EventsTable.tsx b/src/components/events/EventsTable.tsx
@@ -36,32 +36,32 @@ function EventsTable(props: EventsTableProps) {
 			pagination={events.pagination}
 			data-test="events-table"
 		>
-			<ItemsTableAttribute
+			<EventsItemsTableAttribute
 				label="ID"
 				render={(event) => (
 					<Link to={`/${network}/event/${event.id}`}>
 						{event.id}
 					</Link>
 				)}
 			/>
-			<ItemsTableAttribute
+			<EventsItemsTableAttribute
 				label="Name"
 				render={(event) =>
 					<ButtonLink
-						to={`/${network}/search?query=${event.name}`}
+						to={`/${network}/search?query=${event.palletName}.${event.eventName}`}
 						size="small"
 						color="secondary"
 					>
-						{event.name}
+						{event.palletName}.{event.eventName}
 					</ButtonLink>
 				}
 			/>
 			{showExtrinsic && (
-				<ItemsTableAttribute
+				<EventsItemsTableAttribute
 					label="Extrinsic"
-					render={(event) => event.extrinsic?.id && (
-						<Link to={`/${network}/extrinsic/${event.extrinsic.id}`}>
-							{event.extrinsic.id}
+					render={(event) => event.extrinsicId && (
+						<Link to={`/${network}/extrinsic/${event.extrinsicId}`}>
+							{event.extrinsicId}
 						</Link>
 					)}
 				/>
@@ -78,7 +78,11 @@ function EventsTable(props: EventsTableProps) {
 						<DataViewer
 							network={network}
 							data={event.args}
-							metadata={getEventMetadataByName(event.runtimeSpec.metadata, event.name)?.args}
+							metadata={getEventMetadataByName(
+								event.runtimeSpec.metadata,
+								event.palletName,
+								event.eventName
+							)?.args}
 							runtimeSpec={event.runtimeSpec}
 							copyToClipboard
 						/>