[Explorer]: update TXN page header (MystenLabs#13105)

## Description https://mysten.atlassian.net/browse/APPS-1484 ![txn-ok](https://github.com/MystenLabs/sui/assets/127577476/2f5743dd-9c7c-4552-9dbb-048eb64c19e4) ![txn-error](https://github.com/MystenLabs/sui/assets/127577476/273f7246-c799-4c4e-852a-a5070c80fac8) ## Test Plan How did you test the new or updated feature? --- If your changes are not user-facing and not a breaking change, you can skip the following section. Otherwise, please indicate what changed, and then add to the Release Notes section as highlighted during the release process. ### Type of Change (Check all that apply) - [ ] protocol change - [ ] user-visible impact - [ ] breaking change for a client SDKs - [ ] breaking change for FNs (FN binary must upgrade) - [ ] breaking change for validators or node operators (must upgrade binaries) - [ ] breaking change for on-chain data layout - [ ] necessitate either a data wipe or data migration ### Release notes
ronny-mysten · Jul 26, 2023 · 4e77730 · 4e77730
1 parent 53612a1
commit 4e77730
Show file tree

Hide file tree

Showing 18 changed files with 322 additions and 143 deletions.
diff --git a/apps/core/tailwind.config.ts b/apps/core/tailwind.config.ts
@@ -85,7 +85,8 @@ export default {
 			colors: {
 				'gradient-blue-start': '#589AEA',
 				'gradient-blue-end': '#4C75A6',
-				'gradient-graph-bg-01-start': '#D2EBFA',
+				'gradients-graph-cards-start': '#D2EBFA',
+				'gradients-failure-start': '#FBF0FF',
 			},
 			// Line-heights that are found in the design:
 			lineHeight: {
@@ -105,6 +106,7 @@ export default {
 				drop: '0px 0px 10px rgba(111, 188, 240, 0.2)',
 				mistyEdge:
 					'0px 0px 0px 1px rgba(160, 182, 195, 0.08), 0px 5px 30px 0px rgba(86, 104, 115, 0.20)',
+				cardSoft: '1px 2px 8px 2px rgba(21, 82, 123, 0.05)',
 			},
 			fontSize: {
 				// Text sizes:
@@ -152,6 +154,9 @@ export default {
 				3.75: '0.9375rem',
 				4.5: '1.125rem',
 				7.5: '1.875rem',
+				17: '4.25rem',
+				18: '4.5rem',
+				19: '4.75rem',
 				50: '12.5rem',
 				verticalListShort: '13.0625rem',
 				verticalListLong: '35.6875rem',
@@ -166,6 +171,8 @@ export default {
 				walletLogo: '4.813rem',
 			},
 			minWidth: {
+				10: '2.5rem',
+				18: '4.5rem',
 				transactionColumn: '31.875rem',
 			},
 			transitionTimingFunction: {
@@ -179,7 +186,8 @@ export default {
 				placeholderGradient01: 'linear-gradient(165.96deg, #e6f5ff 10%, #ebecff 95%)',
 				placeholderShimmer:
 					'linear-gradient(90deg, #ecf1f4 -24.18%, rgba(237 242 245 / 40%) 73.61%, #f3f7f9 114.81%, #ecf1f4 114.82%)',
-				main: 'linear-gradient(176deg, #D2EBFA 51.68%, #D5F7EE 100%)',
+				'gradients-graph-cards': 'linear-gradient(176deg, #D2EBFA 51.68%, #D5F7EE 100%)',
+				'gradients-failure': 'linear-gradient(166deg, #FBF0FF 0%, #FFF0F0 100%)',
 			},
 			rotate: {
 				135: '135deg',

diff --git a/apps/explorer/src/components/Layout/PageLayout.tsx b/apps/explorer/src/components/Layout/PageLayout.tsx
@@ -13,11 +13,16 @@ import { Banner } from '~/ui/Banner';
 import { Network } from '~/utils/api/DefaultRpcClient';
 
 export type PageLayoutProps = {
-	gradientContent?: ReactNode;
+	gradient?: {
+		content: ReactNode;
+		size: 'lg' | 'md';
+		type?: 'success' | 'error';
+	};
 	content: ReactNode;
+	error?: string;
 };
 
-export function PageLayout({ gradientContent, content }: PageLayoutProps) {
+export function PageLayout({ gradient, content }: PageLayoutProps) {
 	const [network] = useNetworkContext();
 	const { request } = useAppsBackend();
 	const { data } = useQuery({
@@ -31,33 +36,53 @@ export function PageLayout({ gradientContent, content }: PageLayoutProps) {
 		retry: false,
 		enabled: network === Network.MAINNET,
 	});
-	const isGradientVisible = !!gradientContent;
+	const isGradientVisible = !!gradient;
+	const isError = gradient?.type === 'error';
+
 	return (
-		<div className={clsx('w-full', isGradientVisible && 'bg-gradient-graph-bg-01-start')}>
+		<div
+			className={clsx(
+				'w-full',
+				isGradientVisible && isError && 'bg-gradients-failure-start',
+				isGradientVisible && !isError && 'bg-gradients-graph-cards-start',
+			)}
+		>
 			<Header />
 			<main className="relative z-10 min-h-screen bg-offwhite">
-				{network === Network.MAINNET && data?.degraded && (
-					<div className={clsx(isGradientVisible && 'bg-gradient-graph-bg-01-start')}>
-						<div className="mx-auto max-w-[1440px] px-4 pt-3 lg:px-6 xl:px-10">
-							<Banner variant="warning" border fullWidth>
-								We&rsquo;re sorry that the explorer is running slower than usual. We&rsquo;re
-								working to fix the issue and appreciate your patience.
-							</Banner>
-						</div>
-					</div>
-				)}
 				{isGradientVisible ? (
-					<section className="bg-main">
-						<div className="mx-auto max-w-[1440px] px-4 py-8 lg:px-6 xl:px-10 xl:py-12">
-							{gradientContent}
+					<section
+						className={clsx(
+							'group/gradientContent',
+							isGradientVisible && isError && 'bg-gradients-failure',
+							isGradientVisible && !isError && 'bg-gradients-graph-cards',
+						)}
+					>
+						{network === Network.MAINNET && data?.degraded && (
+							<div className={clsx(isGradientVisible && 'bg-gradients-graph-cards-bg')}>
+								<div className="mx-auto max-w-[1440px] px-4 pt-3 lg:px-6 xl:px-10">
+									<Banner variant="warning" border fullWidth>
+										We&rsquo;re sorry that the explorer is running slower than usual. We&rsquo;re
+										working to fix the issue and appreciate your patience.
+									</Banner>
+								</div>
+							</div>
+						)}
+						<div
+							className={clsx(
+								'mx-auto max-w-[1440px] py-8 lg:px-6 xl:px-10',
+								gradient.size === 'lg' && 'px-4 xl:py-12',
+								gradient.size === 'md' && 'px-4',
+							)}
+						>
+							{gradient.content}
 						</div>
 					</section>
 				) : null}
-				<section className="mx-auto max-w-[1440px] px-4 py-6 pb-16 lg:px-6 xl:p-10 xl:pb-16">
-					{content}
-				</section>
+				<section className="mx-auto max-w-[1440px] p-5 sm:py-8 md:p-10">{content}</section>
 			</main>
 			<Footer />
 		</div>
 	);
 }
+
+//mx-auto max-w-[1440px] px-5 py-8 md:p-10
diff --git a/apps/explorer/src/pages/home/Home.tsx b/apps/explorer/src/pages/home/Home.tsx
@@ -4,15 +4,15 @@
 import clsx from 'clsx';
 import { lazy, Suspense } from 'react';
 
-import { ErrorBoundary } from '../../components/error-boundary/ErrorBoundary';
-import { TopValidatorsCard } from '../../components/top-validators-card/TopValidatorsCard';
 import { AccountsCardGraph } from '~/components/AccountCardGraph';
 import { Activity } from '~/components/Activity';
 import { CurrentEpoch, OnTheNetwork } from '~/components/HomeMetrics';
 import { PageLayout } from '~/components/Layout/PageLayout';
 import { SuiTokenCard } from '~/components/SuiTokenCard';
 import { TransactionsCardGraph } from '~/components/TransactionsCardGraph';
+import { ErrorBoundary } from '~/components/error-boundary/ErrorBoundary';
 import { TopPackagesCard } from '~/components/top-packages/TopPackagesCard';
+import { TopValidatorsCard } from '~/components/top-validators-card/TopValidatorsCard';
 import { useNetwork } from '~/context';
 import { Card } from '~/ui/Card';
 import { TabHeader } from '~/ui/Tabs';
@@ -27,30 +27,33 @@ function Home() {
 	const isSuiTokenCardEnabled = network === Network.MAINNET;
 	return (
 		<PageLayout
-			gradientContent={
-				<div
-					data-testid="home-page"
-					className={clsx('home-page-grid-container-top', isSuiTokenCardEnabled && 'with-token')}
-				>
-					<div style={{ gridArea: 'network' }} className="overflow-hidden">
-						<OnTheNetwork />
-					</div>
-					<div style={{ gridArea: 'epoch' }}>
-						<CurrentEpoch />
-					</div>
-					{isSuiTokenCardEnabled ? (
-						<div style={{ gridArea: 'token' }}>
-							<SuiTokenCard />
+			gradient={{
+				content: (
+					<div
+						data-testid="home-page"
+						className={clsx('home-page-grid-container-top', isSuiTokenCardEnabled && 'with-token')}
+					>
+						<div style={{ gridArea: 'network' }} className="overflow-hidden">
+							<OnTheNetwork />
+						</div>
+						<div style={{ gridArea: 'epoch' }}>
+							<CurrentEpoch />
+						</div>
+						{isSuiTokenCardEnabled ? (
+							<div style={{ gridArea: 'token' }}>
+								<SuiTokenCard />
+							</div>
+						) : null}
+						<div style={{ gridArea: 'transactions' }}>
+							<TransactionsCardGraph />
+						</div>
+						<div style={{ gridArea: 'accounts' }}>
+							<AccountsCardGraph />
 						</div>
-					) : null}
-					<div style={{ gridArea: 'transactions' }}>
-						<TransactionsCardGraph />
-					</div>
-					<div style={{ gridArea: 'accounts' }}>
-						<AccountsCardGraph />
 					</div>
-				</div>
-			}
+				),
+				size: 'lg',
+			}}
 			content={
 				<div className="home-page-grid-container-bottom">
 					<div style={{ gridArea: 'activity' }}>

diff --git a/apps/explorer/src/pages/transaction-result/TransactionResult.tsx b/apps/explorer/src/pages/transaction-result/TransactionResult.tsx
@@ -1,19 +1,55 @@
 // Copyright (c) Mysten Labs, Inc.
 // SPDX-License-Identifier: Apache-2.0
 
+import { getExecutionStatusError, type SuiTransactionBlockResponse } from '@mysten/sui.js';
 import { LoadingIndicator } from '@mysten/ui';
 import { useParams } from 'react-router-dom';
 
 import { TransactionView } from './TransactionView';
 import { PageLayout } from '~/components/Layout/PageLayout';
 import { useGetTransaction } from '~/hooks/useGetTransaction';
 import { Banner } from '~/ui/Banner';
+import { PageHeader } from '~/ui/PageHeader';
+import { StatusIcon } from '~/ui/StatusIcon';
+
+function TransactionResultPageHeader({
+	transaction,
+	error,
+}: {
+	transaction: SuiTransactionBlockResponse;
+	error?: string;
+}) {
+	const txnKindName = transaction.transaction?.data.transaction?.kind;
+	const txnDigest = transaction.digest;
+	const txnStatus = transaction.effects?.status.status;
+
+	const isProgrammableTransaction = txnKindName === 'ProgrammableTransaction';
+
+	return (
+		<PageHeader
+			type="Transaction"
+			title={txnDigest}
+			subtitle={!isProgrammableTransaction ? txnKindName : undefined}
+			error={error}
+			before={<StatusIcon success={txnStatus === 'success'} />}
+		/>
+	);
+}
 
 export default function TransactionResult() {
 	const { id } = useParams();
 	const { isLoading, isError, data } = useGetTransaction(id as string);
+	const txError = data ? getExecutionStatusError(data) : undefined;
+
 	return (
 		<PageLayout
+			gradient={
+				data && {
+					content: <TransactionResultPageHeader transaction={data} error={txError} />,
+					size: 'md',
+					type: txError ? 'error' : 'success',
+				}
+			}
 			content={
 				isLoading ? (
 					<LoadingIndicator text="Loading..." />

diff --git a/apps/explorer/src/pages/transaction-result/TransactionView.tsx b/apps/explorer/src/pages/transaction-result/TransactionView.tsx
@@ -1,37 +1,35 @@
 // Copyright (c) Mysten Labs, Inc.
 // SPDX-License-Identifier: Apache-2.0
 
-import {
-	getExecutionStatusError,
-	getExecutionStatusType,
-	getTransactionDigest,
-	getTransactionKind,
-	getTransactionKindName,
-	type SuiTransactionBlockResponse,
-} from '@mysten/sui.js';
+import { type SuiTransactionBlockResponse } from '@mysten/sui.js';
 import clsx from 'clsx';
+import { type ReactNode } from 'react';
 
 import { Signatures } from './Signatures';
 import { ErrorBoundary } from '~/components/error-boundary/ErrorBoundary';
 import { useBreakpoint } from '~/hooks/useBreakpoint';
 import { Events } from '~/pages/transaction-result/Events';
 import { TransactionData } from '~/pages/transaction-result/TransactionData';
 import { TransactionSummary } from '~/pages/transaction-result/transaction-summary';
-import { Banner } from '~/ui/Banner';
-import { PageHeader } from '~/ui/PageHeader';
 import { SplitPanes } from '~/ui/SplitPanes';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '~/ui/Tabs';
 
 import styles from './TransactionResult.module.css';
 
+function TabsContentContainer({ value, children }: { value: string; children: ReactNode }) {
+	return (
+		<TabsContent value={value}>
+			<div className="mt-6 md:mt-10">{children}</div>
+		</TabsContent>
+	);
+}
+
 export function TransactionView({ transaction }: { transaction: SuiTransactionBlockResponse }) {
 	const isMediumOrAbove = useBreakpoint('md');
 
 	const hasEvents = !!transaction.events?.length;
 
-	const txError = getExecutionStatusError(transaction);
-
-	const transactionKindName = getTransactionKindName(getTransactionKind(transaction)!);
+	const transactionKindName = transaction.transaction?.data.transaction?.kind;
 
 	const isProgrammableTransaction = transactionKindName === 'ProgrammableTransaction';
 
@@ -44,25 +42,19 @@ export function TransactionView({ transaction }: { transaction: SuiTransactionBl
 						{hasEvents && <TabsTrigger value="events">Events</TabsTrigger>}
 						{isProgrammableTransaction && <TabsTrigger value="signatures">Signatures</TabsTrigger>}
 					</TabsList>
-					<TabsContent value="summary">
-						<div className="mt-10">
-							<TransactionSummary transaction={transaction} />
-						</div>
-					</TabsContent>
+					<TabsContentContainer value="summary">
+						<TransactionSummary transaction={transaction} />
+					</TabsContentContainer>
 					{hasEvents && (
-						<TabsContent value="events">
-							<div className="mt-10">
-								<Events events={transaction.events!} />
-							</div>
-						</TabsContent>
+						<TabsContentContainer value="events">
+							<Events events={transaction.events!} />
+						</TabsContentContainer>
 					)}
-					<TabsContent value="signatures">
-						<div className="mt-10">
-							<ErrorBoundary>
-								<Signatures transaction={transaction} />
-							</ErrorBoundary>
-						</div>
-					</TabsContent>
+					<TabsContentContainer value="signatures">
+						<ErrorBoundary>
+							<Signatures transaction={transaction} />
+						</ErrorBoundary>
+					</TabsContentContainer>
 				</Tabs>
 			</div>
 		),
@@ -84,19 +76,6 @@ export function TransactionView({ transaction }: { transaction: SuiTransactionBl
 
 	return (
 		<div className={clsx(styles.txdetailsbg)}>
-			<div className="mb-10">
-				<PageHeader
-					type="Transaction"
-					title={getTransactionDigest(transaction)}
-					subtitle={!isProgrammableTransaction ? transactionKindName : undefined}
-					status={getExecutionStatusType(transaction)}
-				/>
-				{txError && (
-					<div className="mt-2">
-						<Banner variant="error">{txError}</Banner>
-					</div>
-				)}
-			</div>
 			<div className="h-screen md:h-full">
 				<SplitPanes
 					splitPanels={[leftPane, rightPane]}

diff --git a/apps/explorer/src/ui/Banner.tsx b/apps/explorer/src/ui/Banner.tsx
@@ -18,7 +18,7 @@ const bannerStyles = cva(
 				error: 'bg-issue-light text-issue-dark',
 				message: 'bg-sui-light text-hero',
 				neutralGrey: 'bg-steel text-white',
-				neutralWhite: 'bg-white text-steel-darker',
+				neutralWhite: 'bg-white/80 text-steel-darker',
 			},
 			align: {
 				left: 'justify-start',

diff --git a/apps/explorer/src/ui/Card.tsx b/apps/explorer/src/ui/Card.tsx
@@ -33,7 +33,7 @@ const cardStyles = cva('overflow-hidden', {
 			steel: 'border border-steel',
 		},
 		shadow: {
-			true: 'shadow',
+			true: 'shadow-cardSoft',
 		},
 		growOnHover: {
 			true: 'hover:scale-101 ease-in-out duration-200',