feat: add animation for block and transaction

AstraProtocol · Sep 28, 2022 · b7ff487 · b7ff487
1 parent a4ea472
commit b7ff487
Show file tree

Hide file tree

Showing 15 changed files with 242 additions and 205 deletions.
diff --git a/components/Animation/RowShowAnimation.tsx b/components/Animation/RowShowAnimation.tsx
@@ -0,0 +1,43 @@
+import { useEffect, useState } from 'react'
+import { CSSTransition } from 'react-transition-group'
+
+/**
+ * @param action true: exec animation
+ * @param minHeight hold element space
+ */
+type RowShowAnimationProps = {
+	children: React.ReactNode
+	action: boolean
+	minHeight?: string
+}
+export default function RowShowAnimation({ children, action, minHeight = 'unset' }: RowShowAnimationProps) {
+	const [show, setShow] = useState(false)
+	useEffect(() => {
+		if (action) {
+			setTimeout(() => {
+				setShow(true)
+			}, 100)
+		}
+	}, [])
+	return (
+		<>
+			{action ? (
+				<div style={{ minHeight: minHeight }}>
+					<CSSTransition
+						in={show}
+						timeout={300}
+						classNames="alert"
+						// nodeRef={childrenRef}
+						unmountOnExit
+						// onEnter={() => setShowButton(false)}
+						// onExited={() => setShowButton(true)}
+					>
+						{children}
+					</CSSTransition>
+				</div>
+			) : (
+				children
+			)}
+		</>
+	)
+}
diff --git a/package.json b/package.json
@@ -30,6 +30,7 @@
 		"react-dom": "18.2.0",
 		"react-markdown": "8.0.0",
 		"react-redux": "^8.0.2",
+		"react-transition-group": "^4.4.5",
 		"redux": "^4.2.0",
 		"redux-persist": "^6.0.0",
 		"swr": "^1.3.0",

diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -7,6 +7,7 @@ import '@astraprotocol/astra-ui/lib/shared/style.css'
 import { cosmosFetcher, evmFetcher } from 'api'
 import { SWRConfig } from 'swr'
 import store, { persistor } from '../store'
+import '../styles.css'
 
 const App = ({ Component, pageProps }: AppProps) => {
 	const _detectFetcher = (rest: any[]) => {

diff --git a/pages/blocks/index.tsx b/pages/blocks/index.tsx
@@ -33,6 +33,7 @@ const BlockDetailPage: React.FC<NextPage> = _ => {
 									updatedAt={item.timestamp}
 									size={item.size}
 									value={0}
+									newBlock={item.newBlock}
 								/>
 							))}
 						</div>

diff --git a/project.d.ts b/project.d.ts
@@ -31,6 +31,7 @@ interface BlockItem {
 	timestamp: string
 	total_difficulty: string
 	updated_at: string
+	newBlock?: boolean
 }
 
 interface BlockResponse {
@@ -61,6 +62,7 @@ interface TransactionItem {
 		value: string
 	}
 	revert_reason: null
+	newTransaction?: boolean
 }
 
 interface TransactionResponse {

diff --git a/styles.css b/styles.css
@@ -0,0 +1,17 @@
+.alert-enter {
+	opacity: 0;
+	transform: scale(0.9);
+}
+.alert-enter-active {
+	opacity: 1;
+	transform: translateX(0);
+	transition: opacity 300ms, transform 300ms;
+}
+.alert-exit {
+	opacity: 1;
+}
+.alert-exit-active {
+	opacity: 0;
+	transform: scale(0.9);
+	transition: opacity 300ms, transform 300ms;
+}
diff --git a/view/Block/BlockBriefRow.tsx b/view/Block/BlockBriefRow.tsx
@@ -1,4 +1,5 @@
 import clsx from 'clsx'
+import RowShowAnimation from 'components/Animation/RowShowAnimation'
 import DotSpace from 'components/DotSpace'
 import Timer from 'components/Timer'
 import Typography from 'components/Typography'
@@ -11,32 +12,41 @@ type BlockBriefRowProps = {
 	updatedAt: number | string
 	transactions: number
 	proposerAddress: string
+	newBlock?: boolean
 }
 
-export default function BlockBriefRow({ blockNumber, updatedAt, transactions, proposerAddress }: BlockBriefRowProps) {
+export default function BlockBriefRow({
+	blockNumber,
+	updatedAt,
+	transactions,
+	proposerAddress,
+	newBlock
+}: BlockBriefRowProps) {
 	return (
-		<div className={clsx(styles.rowBrief, 'padding-left-lg padding-right-lg padding-top-sm padding-bottom-sm')}>
-			<div className={clsx(styles.icon, 'margin-right-sm')}>
-				<Image src={'/images/icons/blockchain.png'} height={24} width={24} />
-			</div>
-			<div className={styles.content}>
-				<div>
-					<Typography.LinkText
-						href={LinkMaker.block(blockNumber)}
-						children={`#${blockNumber}`}
-						className={['money', 'money-sm']}
-					/>
+		<RowShowAnimation action={newBlock} minHeight="65px">
+			<div className={clsx(styles.rowBrief, 'padding-left-lg padding-right-lg padding-top-sm padding-bottom-sm')}>
+				<div className={clsx(styles.icon, 'margin-right-sm')}>
+					<Image src={'/images/icons/blockchain.png'} height={24} width={24} />
 				</div>
-				<div className={clsx('block-ver-center', styles.info)}>
-					<div className="block-ver-center">
-						<span className={clsx('contrast-color-30 padding-right-2xs')}>Block Proposer</span>
-						<span className="contrast-color-70 money">{ellipseBetweenText(proposerAddress, 6, 6)}</span>
-						<DotSpace />
-						<span className="contrast-color-70">{transactions} Transactions</span>
+				<div className={styles.content}>
+					<div>
+						<Typography.LinkText
+							href={LinkMaker.block(blockNumber)}
+							children={`#${blockNumber}`}
+							className={['money', 'money-sm']}
+						/>
+					</div>
+					<div className={clsx('block-ver-center', styles.info)}>
+						<div className="block-ver-center">
+							<span className={clsx('contrast-color-30 padding-right-2xs')}>Block Proposer</span>
+							<span className="contrast-color-70 money">{ellipseBetweenText(proposerAddress, 6, 6)}</span>
+							<DotSpace />
+							<span className="contrast-color-70">{transactions} Transactions</span>
+						</div>
+						<Timer updatedAt={updatedAt} />
 					</div>
-					<Timer updatedAt={updatedAt} />
 				</div>
 			</div>
-		</div>
+		</RowShowAnimation>
 	)
 }
diff --git a/view/Block/BlockRow.tsx b/view/Block/BlockRow.tsx
@@ -1,4 +1,5 @@
 import clsx from 'clsx'
+import RowShowAnimation from 'components/Animation/RowShowAnimation'
 import DotSpace from 'components/DotSpace'
 import Timer from 'components/Timer'
 import Typography from 'components/Typography'
@@ -14,6 +15,7 @@ type BlockRowProps = {
 	proposerAddress: string
 	mine?: boolean
 	value: number
+	newBlock?: boolean
 }
 
 export default function BlockRow({
@@ -23,62 +25,65 @@ export default function BlockRow({
 	proposerAddress,
 	mine,
 	size,
-	value
+	value,
+	newBlock
 }: BlockRowProps) {
 	return (
-		<div
-			className={clsx(
-				styles.rowBrief,
-				styles.blockRow,
-				'row padding-left-lg',
-				'padding-right-lg padding-top-sm padding-bottom-sm',
-				'radius-lg',
-				'margin-bottom-xs'
-			)}
-		>
-			<div className={clsx(styles.icon, 'margin-right-sm')}>
-				<Image src={'/images/icons/blockchain.png'} height={24} width={24} />
-			</div>
-			{mine ? (
-				<>
-					<div className="col-2" />
-					<div className="contrast-color-70">Block mined, awaiting import...</div>
-				</>
-			) : (
-				<>
-					<div className="col-2">
-						<Typography.LinkText
-							href={LinkMaker.block(blockNumber)}
-							children={`#${blockNumber}`}
-							className={['money', 'money-sm']}
-						/>
-					</div>
-					<div className="col-6">
-						<div>
+		<RowShowAnimation action={newBlock}>
+			<div
+				className={clsx(
+					styles.rowBrief,
+					styles.blockRow,
+					'row padding-left-lg',
+					'padding-right-lg padding-top-sm padding-bottom-sm',
+					'radius-lg',
+					'margin-bottom-xs'
+				)}
+			>
+				<div className={clsx(styles.icon, 'margin-right-sm')}>
+					<Image src={'/images/icons/blockchain.png'} height={24} width={24} />
+				</div>
+				{mine ? (
+					<>
+						<div className="col-2" />
+						<div className="contrast-color-70">Block mined, awaiting import...</div>
+					</>
+				) : (
+					<>
+						<div className="col-2">
 							<Typography.LinkText
-								href={LinkMaker.address(proposerAddress)}
-								children={proposerAddress}
+								href={LinkMaker.block(blockNumber)}
+								children={`#${blockNumber}`}
 								className={['money', 'money-sm']}
 							/>
 						</div>
-						<div className={clsx('block-ver-center', styles.info)}>
-							<div className="block-ver-center">
-								<span className={clsx('text text-sm contrast-color-30 padding-right-2xs')}>
-									{transactions} Transactions
-								</span>
-								<DotSpace />
-								<span className="text text-sm contrast-color-30">{size} bytes</span>
+						<div className="col-6">
+							<div>
+								<Typography.LinkText
+									href={LinkMaker.address(proposerAddress)}
+									children={proposerAddress}
+									className={['money', 'money-sm']}
+								/>
+							</div>
+							<div className={clsx('block-ver-center', styles.info)}>
+								<div className="block-ver-center">
+									<span className={clsx('text text-sm contrast-color-30 padding-right-2xs')}>
+										{transactions} Transactions
+									</span>
+									<DotSpace />
+									<span className="text text-sm contrast-color-30">{size} bytes</span>
+								</div>
 							</div>
 						</div>
-					</div>
 
-					<div className="col-2">
-						<Timer updatedAt={updatedAt} />
-					</div>
+						<div className="col-2">
+							<Timer updatedAt={updatedAt} />
+						</div>
 
-					<div className="money money-xs contrast-color-70">{value}</div>
-				</>
-			)}
-		</div>
+						<div className="money money-xs contrast-color-70">{value}</div>
+					</>
+				)}
+			</div>
+		</RowShowAnimation>
 	)
 }
diff --git a/view/Block/HomeBlock.tsx b/view/Block/HomeBlock.tsx
@@ -30,6 +30,7 @@ export function HomeBlock() {
 							proposerAddress={item.miner_hash}
 							transactions={0}
 							updatedAt={item.timestamp}
+							newBlock={item.newBlock}
 						/>
 					))}
 				</BackgroundCard>

diff --git a/view/Block/HomeTransactions.tsx b/view/Block/HomeTransactions.tsx