Merge branch 'dev' of https://github.com/astraprotocol/explorer-fe in…

…to feat/asa-195-mobile-home-page
AstraProtocol · Oct 14, 2022 · b914fbd · b914fbd
2 parents 3348940 + 1756339
commit b914fbd
Show file tree

Hide file tree

Showing 44 changed files with 8,874 additions and 343 deletions.
diff --git a/components/Animation/RowShowAnimation.tsx b/components/Animation/RowShowAnimation.tsx
@@ -8,9 +8,8 @@ import { CSSTransition } from 'react-transition-group'
 type RowShowAnimationProps = {
 	children: React.ReactNode
 	action: boolean
-	minHeight?: string
 }
-export default function RowShowAnimation({ children, action, minHeight = 'unset' }: RowShowAnimationProps) {
+export default function RowShowAnimation({ children, action }: RowShowAnimationProps) {
 	const [show, setShow] = useState(false)
 	useEffect(() => {
 		if (action) {
@@ -22,19 +21,17 @@ export default function RowShowAnimation({ children, action, minHeight = 'unset'
 	return (
 		<>
 			{action ? (
-				<div style={{ overflowY: 'hidden', minHeight: minHeight }}>
-					<CSSTransition
-						in={show}
-						timeout={5000}
-						classNames="alert"
-						// nodeRef={childrenRef}
-						unmountOnExit
-						// onEnter={() => setShowButton(false)}
-						// onExited={() => setShowButton(true)}
-					>
-						{children}
-					</CSSTransition>
-				</div>
+				<CSSTransition
+					in={show}
+					timeout={5000}
+					classNames="alert"
+					// nodeRef={childrenRef}
+					unmountOnExit
+					// onEnter={() => setShowButton(false)}
+					// onExited={() => setShowButton(true)}
+				>
+					{children}
+				</CSSTransition>
 			) : (
 				children
 			)}

diff --git a/components/Button/CopyButton.tsx b/components/Button/CopyButton.tsx
@@ -37,9 +37,9 @@ const CopyButton = ({ textCopy, textTitle, onCopy, textColor, textClasses }: Pro
 			<div className={clsx('block-hor-center', textColor || 'contrast-color-100')}>
 				{textTitle && <span className={clsx(styles.text, textClasses)}>{textTitle}</span>}
 				<span
-					className={clsx('padding-left-xs pointer', {
-						'copy-icon contrast-color-100': !copied,
-						'checked-icon alert-color-success': copied
+					className={clsx('padding-left-xs pointer word-break-all', {
+						'icon-copy contrast-color-100': !copied,
+						'icon-checked alert-color-success': copied
 					})}
 				/>
 			</div>

diff --git a/components/Button/QrButton.tsx b/components/Button/QrButton.tsx
@@ -25,7 +25,7 @@ const QrButton = ({ textTitle, textClasses, content, classes }: Props) => {
 	return (
 		<a onClick={onShowQr} className={clsx('link block-hor-center contrast-color-100')}>
 			{textTitle && <span className={clsx(styles.text, textClasses)}>{textTitle}</span>}
-			<span className={clsx('padding-left-xs pointer qrcode-icon contrast-color-100')} />
+			<span className={clsx('padding-left-xs pointer icon-qrcode contrast-color-100')} />
 		</a>
 	)
 }

diff --git a/components/Card/CardInfo/Components/Decode.tsx b/components/Card/CardInfo/Components/Decode.tsx
@@ -37,6 +37,7 @@ export default function Decode({ methodId, call, items }: DecodeProps) {
 				]}
 				rows={[{ method: methodId, call }]}
 				inverted
+				classes={{ wapper: styles.table }}
 			/>
 			<div className="margin-bottom-xs" />
 			<Table
@@ -74,6 +75,7 @@ export default function Decode({ methodId, call, items }: DecodeProps) {
 					}
 				]}
 				rows={items as any[]}
+				classes={{ wapper: styles.table }}
 			/>
 		</div>
 	)

diff --git a/components/Card/CardInfo/Components/Transfers.tsx b/components/Card/CardInfo/Components/Transfers.tsx
@@ -7,7 +7,7 @@ import styles from '../style.module.scss'
 
 const Transfers = ({ content }: { content: Content }) => {
 	return (
-		<div className="block-center">
+		<div className="block-center sm-wrap flex-justify-start">
 			<span
 				className={clsx(
 					styles.smallCard,
@@ -29,7 +29,8 @@ const Transfers = ({ content }: { content: Content }) => {
 					'radius-sm block-center',
 					'contrast-color-100',
 					'padding-left-sm padding-right-sm padding-top-xs padding-bottom-xs',
-					'margin-right-md'
+					'margin-right-md',
+					'sm-margin-top-xs'
 				)}
 			>
 				<span className="padding-right-xs">To</span>
@@ -44,7 +45,8 @@ const Transfers = ({ content }: { content: Content }) => {
 					'radius-sm block-center',
 					'contrast-color-100',
 					'padding-left-sm padding-right-sm padding-top-xs padding-bottom-xs',
-					'margin-right-md'
+					'margin-right-md',
+					'sm-margin-top-xs'
 				)}
 			>
 				<span className="padding-right-xs">For</span>

diff --git a/components/Card/CardInfo/index.tsx b/components/Card/CardInfo/index.tsx
@@ -1,9 +1,10 @@
-import { CryptoIcon, CryptoIconNames, Typography as TypographyUI } from '@astraprotocol/astra-ui'
+import { CryptoIcon, CryptoIconNames, Typography as TypographyUI, useMobileLayout } from '@astraprotocol/astra-ui'
 import clsx from 'clsx'
 import CopyButton from 'components/Button/CopyButton'
 import Typography from 'components/Typography'
 import { LabelBackgroundTypes, LabelTypes } from 'components/Typography/Label'
 import Tag from 'components/Typography/Tag'
+import { ellipseRightText } from 'utils/helper'
 import BackgroundCard from '../Background/BackgroundCard'
 import Decode, { DecodeProps } from './Components/Decode'
 import RawInput from './Components/RawInput'
@@ -43,6 +44,10 @@ export type CardRowItem = {
 		| 'nonce'
 		| 'decode'
 	contents: Content[]
+	responsive?: {
+		wrap?: 'sm' | 'md'
+		ellipsis?: boolean
+	}
 }
 
 type CardInfoProps = {
@@ -60,6 +65,11 @@ export default function CardInfo({
 	background = true,
 	backgroundCardBlur = true
 }: CardInfoProps) {
+	const { isMobile: isSmallDevice } = useMobileLayout('small')
+	const { isMobile: isMediumDevice } = useMobileLayout('medium')
+	const _ellipsis = (text: string | number) =>
+		ellipseRightText(`${text}`, isSmallDevice ? 27 : isMediumDevice ? 45 : 80)
+
 	return (
 		<BackgroundCard
 			classes={`margin-bottom-md ${classes.join(' ')}`}
@@ -68,10 +78,20 @@ export default function CardInfo({
 			backgroundCardBlur={backgroundCardBlur}
 		>
 			{topElement && topElement}
-			<div className={'margin-left-2xl margin-right-2xl margin-top-lg margin-bottom-lg'}>
-				{items.map(({ label, type, contents }, index) => (
-					<div key={label + index} className={clsx(styles.cardRow, 'row margin-bottom-sm')}>
-						<div className={clsx(styles.leftColumn, 'col-2 gutter-right padding-bottom-sm')}>
+			<div
+				className={clsx(
+					'margin-left-2xl margin-right-2xl margin-top-lg margin-bottom-lg',
+					'sm-margin-left-md sm-margin-right-md'
+				)}
+			>
+				{items.map(({ label, type, contents, responsive = { wrap: 'sm' } }, index) => (
+					<div
+						key={label + index}
+						className={clsx(styles.cardRow, 'row margin-bottom-sm', {
+							[`${responsive?.wrap}-flex-column`]: responsive
+						})}
+					>
+						<div className={clsx(styles.leftColumn, 'col-2 gutter-right padding-bottom-sm ')}>
 							<Typography.CardLabel>{label}</Typography.CardLabel>
 							{type === 'nonce' && <Tag text={'Position'} />}
 						</div>
@@ -80,29 +100,27 @@ export default function CardInfo({
 								styles.rightColumn,
 								'col-10',
 								'block-ver-center margin-right-sm padding-bottom-sm',
-								'border border-bottom-base'
+								'border border-bottom-base',
+								{ [`${responsive?.wrap}-full`]: responsive?.wrap }
 							)}
 						>
 							{(contents as Content[]).map((content, index) => (
-								<div key={(content.value as string) + index}>
+								<div key={(content.value as string) + index} style={{ overflowX: 'auto' }}>
 									{type === 'nonce' ? (
 										<div className="block-ver-center money money-sm contrast-color-70">
 											{content.value}
 											<Tag text={content.suffix} />
 										</div>
 									) : null}
 									{type === 'text' ? (
-										<span
-											className="money money-sm contrast-color-100"
-											style={{ wordBreak: 'break-all' }}
-										>
-											{content.value} {content.suffix && content.suffix}
+										<span className="money money-sm contrast-color-100 word-break-all">
+											{_ellipsis(content.value)} {content.suffix && content.suffix}
 										</span>
 									) : null}
 									{type === 'copy' ? (
 										<CopyButton
-											textCopy={content?.value as string}
-											textTitle={content?.value as string}
+											textCopy={_ellipsis(content?.value as string)}
+											textTitle={_ellipsis(content?.value as string)}
 										/>
 									) : null}
 									{type === 'link' ? (
@@ -111,13 +129,13 @@ export default function CardInfo({
 											fontType="Titi"
 											fontSize="text-500"
 										>
-											{content.value as string}
+											{_ellipsis(content.value as string)}
 										</Typography.LinkText>
 									) : null}
 									{type === 'link-copy' ? (
 										<div className="block-center">
 											<Typography.LinkText href={content.link || ''}>
-												{content.value as string}
+												{_ellipsis(content.value as string)}
 											</Typography.LinkText>
 											<CopyButton textCopy={content.value as string} />
 										</div>

diff --git a/components/Card/CardInfo/style.module.scss b/components/Card/CardInfo/style.module.scss
@@ -23,3 +23,7 @@
 .primaryColor {
 	color: var(--primary-color-normal);
 }
+
+.table {
+	min-width: 600px;
+}
diff --git a/components/Collapse/index.tsx b/components/Collapse/index.tsx
@@ -35,9 +35,9 @@ export default function Collapse({ title, items, classes, open }: CollapseProps)
 				>
 					<span className="padding-right-md text-lg">{title}</span>
 					<span
-						className={clsx('text-sm', {
-							'right-arrow-icon': !_open,
-							'dropdown-icon': _open
+						className={clsx('text-xl', {
+							'icon-arrow-right': !_open,
+							'icon-arrow-down': _open
 						})}
 					></span>
 				</div>

diff --git a/components/Footer/FooterLink.tsx b/components/Footer/FooterLink.tsx
@@ -1,5 +1,4 @@
 import clsx from 'clsx'
-import Link from 'next/link'
 import styles from './style.module.scss'
 
 type LinkItem = {
@@ -33,9 +32,13 @@ type FooterLinkProps = {
 
 export default function FooterLink({ classes }: FooterLinkProps) {
 	return (
-		<div className={clsx(styles.wrapperLinks, 'margin-top-lg', classes)}>
+		<div className={clsx(styles.wrapperLinks, 'md-wrap', classes)}>
 			{footerLinks.map((rows, index) => (
-				<div key={index} className="col-4">
+				<div
+					key={index}
+					className="col-4 md-margin-top-xl md-width-auto md-inline-margin-right"
+					style={{ ['--md-margin-right' as string]: '100px' }}
+				>
 					{rows.map((row, index) => (
 						<span
 							key={row.link}

diff --git a/components/Footer/index.tsx b/components/Footer/index.tsx
@@ -8,14 +8,14 @@ import styles from './style.module.scss'
 
 export default function Footer() {
 	return (
-		<footer className={clsx(styles.footer, 'padding-top-xl padding-bottom-xl')}>
+		<footer className={clsx(styles.footer, 'padding-top-xl padding-bottom-xl margin-top-2xl md-padding-lg')}>
 			<Container>
 				<div className={styles.footerLogo}>
-					<Logo type="white" textSize="lg" />
+					<Logo type="transparent" textSize="2xl" />
 				</div>
-				<div className={clsx(styles.footerInfo, 'row')}>
-					<FooterLink classes="col col-9 gutter-right" />
-					<FooterSocial classes="col col-3" />
+				<div className={clsx(styles.footerInfo, 'row md-wrap margin-top-md md-margin-top-0')}>
+					<FooterLink classes="col col-9 md-full gutter-right" />
+					<FooterSocial classes="col col-3 md-full md-margin-top-xl" />
 				</div>
 			</Container>
 		</footer>

diff --git a/components/Footer/style.module.scss b/components/Footer/style.module.scss
@@ -1,11 +1,14 @@
 .footer {
 	background-color: rgba(var(--contrast-color-theme--raw), 0.05);
-	margin-top: 72px;
 }
 .footerInfo {
 	display: flex;
+	@media screen and (max-width: 1220px) {
+		flex-wrap: wrap;
+	}
 	.wrapperLinks {
 		display: flex;
+
 		div {
 			display: flex;
 			flex-direction: column;
@@ -17,6 +20,9 @@
 }
 
 .footerSocial {
+	@media screen and (max-width: 1220px) {
+		margin-top: var(--offset-xl);
+	}
 	div:last-child {
 		display: flex;
 	}

diff --git a/components/Loader/PageLoader.tsx b/components/Loader/PageLoader.tsx
@@ -0,0 +1,38 @@
+import ModalWrapper from 'components/Modal/ModalWrapper'
+import Spinner from 'components/Spinner'
+import { useRouter } from 'next/router'
+import { useEffect, useState } from 'react'
+import styles from './style.module.scss'
+
+function PageLoader() {
+	const router = useRouter()
+
+	const [loading, setLoading] = useState(false)
+
+	useEffect(() => {
+		const handleStart = url => url !== router.asPath && setLoading(true)
+		const handleComplete = url => url === router.asPath && setLoading(false)
+
+		router.events.on('routeChangeStart', handleStart)
+		router.events.on('routeChangeComplete', handleComplete)
+		router.events.on('routeChangeError', handleComplete)
+
+		return () => {
+			router.events.off('routeChangeStart', handleStart)
+			router.events.off('routeChangeComplete', handleComplete)
+			router.events.off('routeChangeError', handleComplete)
+		}
+	})
+
+	return (
+		loading && (
+			<ModalWrapper open={loading}>
+				<div className={styles.pageLoading}>
+					<Spinner size="lg" />
+				</div>
+			</ModalWrapper>
+		)
+	)
+}
+
+export default PageLoader
diff --git a/components/Loader/style.module.scss b/components/Loader/style.module.scss
@@ -73,3 +73,11 @@
 		}
 	}
 }
+
+.pageLoading {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	width: 100%;
+	height: 100%;
+}
diff --git a/components/Modal/style.module.scss b/components/Modal/style.module.scss
@@ -7,5 +7,5 @@
 	overflow-x: hidden;
 	display: flex;
 	z-index: 100;
-	background-color: var(--contrast-color-theme-10);
+	background-color: var(--contrast-color-theme-10) !important;
 }
diff --git a/components/Navbar/MobileNavigation.tsx b/components/Navbar/MobileNavigation.tsx
@@ -15,7 +15,7 @@ type LinkItem = {
 	link?: string
 }
 
-const Checked = () => <span className="checked-icon alert-color-success block-ver-center"></span>
+const Checked = () => <span className="icon-checked alert-color-success block-ver-center"></span>
 
 const LinkMenuItem = ({
 	link,

diff --git a/components/Navbar/Navigation.tsx b/components/Navbar/Navigation.tsx
@@ -121,7 +121,7 @@ export default function Navigation({ items }: NavigationProps) {
 
 					{sub1?.length > 0 && (
 						<>
-							<span className="dropdown-icon" data-text="icon"></span>
+							<span className="icon-dropdown" data-text="icon"></span>
 							<ul
 								className={clsx(styles.submenu, 'radius-sm shadow-xs', {
 									[styles.show]: show,