feat: init block page

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

Hide file tree

Showing 27 changed files with 769 additions and 205 deletions.
diff --git a/.env.example b/.env.example
@@ -0,0 +1,4 @@
+NEXT_PUBLIC_COSMOS_API=https://explorer.astranaut.dev
+NEXT_PUBLIC_EVM_API=http://128.199.238.171:8080/api/v1
+NEXT_PUBLIC_BLOCK_INTERVAL=5000
+NEXT_PUBLIC_TRANSACTION_INTERVAL=5000
diff --git a/components/Button/CopyButton.tsx b/components/Button/CopyButton.tsx
@@ -1,14 +1,47 @@
+import clsx from 'clsx'
+import { useEffect, useState } from 'react'
+import { CopyToClipboard } from 'react-copy-to-clipboard'
+
+/***
+ * @param textCopy text copy into clipboard
+ * @param textTitle text show on screen
+ * @param onCopy trigger event copy
+ * @param iconCopy only copy when user click on icon
+ */
 interface Props {
-	text: JSX.Element | string
-	onClick: any
+	textCopy: string
+	textTitle?: JSX.Element | string
+	onCopy?: Function
+	iconCopy?: boolean
 }
 
-const CopyButton = ({ text, onClick }: Props) => {
+const CopyButton = ({ textCopy, textTitle, onCopy }: Props) => {
+	const [copied, setCopied] = useState(false)
+
+	useEffect(() => {
+		const timeout = copied ? setTimeout(() => setCopied(false), 1 * 1000) : undefined
+		return () => clearTimeout(timeout)
+	}, [copied, setCopied])
 	return (
-		<>
-			{text}
-			<a onClick={onClick} className="money money-sm copy-icon sm-margin-left-xs" />
-		</>
+		<CopyToClipboard
+			text={textCopy}
+			onCopy={() => {
+				setCopied(true)
+				if (onCopy) {
+					onCopy()
+				}
+			}}
+		>
+			<div className={`contrast-color-100`}>
+				{textTitle && <span className="">{textTitle}</span>}
+				<span
+					className={clsx('padding-left-xs', {
+						'copy-icon contrast-color-100': !copied,
+						'checked-icon alert-color-success': copied
+					})}
+				/>
+			</div>
+		</CopyToClipboard>
 	)
 }
 

diff --git a/components/Card/Background/BackgroundCard.tsx b/components/Card/Background/BackgroundCard.tsx
@@ -1,12 +1,14 @@
+import clsx from 'clsx'
 import React from 'react'
 import styles from './style.module.scss'
 
 interface Props {
+	classes?: string[]
 	children: React.ReactNode
 }
 
-const BackgroundCard = ({ children }: Props) => {
-	return <div className={styles.backgroundCard}>{children}</div>
+const BackgroundCard = ({ children, classes = [] }: Props) => {
+	return <div className={clsx(styles.backgroundCard, 'radius-lg', ...classes)}>{children}</div>
 }
 
 export default BackgroundCard
diff --git a/components/Card/Background/style.module.scss b/components/Card/Background/style.module.scss
@@ -1,22 +1,6 @@
 .backgroundCard {
 	box-sizing: border-box;
-
-	/* Auto layout */
-
-	/* White Color/50 */
-
-	background: var(--border-color);
-	/* White Color/50 */
-
+	background: rgba(var(--contrast-color-theme--raw), 0.05);
 	border: 1px solid var(--border-color);
 	backdrop-filter: blur(42px);
-	/* Note: backdrop-filter has minimal browser support */
-
-	border-radius: 16px;
-
-	/* Inside auto layout */
-
-	flex: none;
-	order: 0;
-	flex-grow: 0;
 }
diff --git a/components/Card/CardInfo/index.tsx b/components/Card/CardInfo/index.tsx
@@ -0,0 +1,155 @@
+import { CryptoIcon, Typography as TypographyUI } 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 { LinkMaker } from 'utils/helper'
+import BackgroundCard from '../Background/BackgroundCard'
+import styles from './style.module.scss'
+
+export type Content = {
+	link?: string
+	value?: string | number
+	prefix?: string
+	suffix?: string
+	icon?: string
+	token?: string
+	type?: LabelTypes
+	backgroundType?: LabelBackgroundTypes
+	transfer?: {
+		from?: string
+		to?: string
+		value?: number
+		token?: string
+	}
+}
+
+export type CardRowItem = {
+	label?: string
+	type: 'copy' | 'link-copy' | 'label' | 'link' | 'balance' | 'text' | 'time' | 'transfer'
+	contents: Content[]
+}
+
+type CardInfoProps = {
+	classes?: string[]
+	items?: CardRowItem[]
+}
+
+export default function CardInfo({ items, classes = [] }: CardInfoProps) {
+	return (
+		<BackgroundCard classes={['margin-bottom-md', ...classes]}>
+			<div className={'margin-left-2xl margin-right-2xl margin-top-lg margin-bottom-lg'}>
+				{items.map(({ label, type, contents }) => (
+					<div key={label} className={clsx(styles.cardRow, 'row')}>
+						<div className={clsx(styles.leftColumn, 'col-2 gutter-right block-ver-center')}>
+							<Typography.CardLabel>{label}</Typography.CardLabel>
+						</div>
+						{(contents as Content[]).map(content => (
+							<div
+								key={content.value || new Date().getTime()}
+								className={clsx(styles.rightColumn, 'block-center')}
+							>
+								{type === 'text' ? (
+									<span className="moeny money-sm contrast-color-100">{content.value}</span>
+								) : null}
+								{type === 'copy' ? (
+									<CopyButton
+										textCopy={content?.value as string}
+										textTitle={content?.value as string}
+									/>
+								) : null}
+								{type === 'link' ? (
+									<Typography.LinkText href={content.link || ''}>
+										{content.value as string}
+									</Typography.LinkText>
+								) : null}
+								{type === 'link-copy' ? (
+									<div className="block-center">
+										<Typography.LinkText href={content.link || ''}>
+											{content.value as string}
+										</Typography.LinkText>
+										<CopyButton textCopy={content.link as string} />
+									</div>
+								) : null}
+								{type === 'label' ? (
+									<div className="block-center">
+										<Typography.Label
+											text={content.value as string}
+											icon
+											type={content.type as LabelTypes}
+											background={content.backgroundType as LabelBackgroundTypes}
+										/>
+									</div>
+								) : null}
+								{type === 'balance' ? (
+									<div className="block-center">
+										<TypographyUI.Balance
+											icon={<CryptoIcon name={'asa'} />}
+											value={content.value}
+											currency={content.token}
+											size="sm"
+										/>
+									</div>
+								) : null}
+								{type === 'time' ? (
+									<div className="block-center">
+										<Typography.Time time={content.value} confirmedWithin={content.suffix} />
+									</div>
+								) : null}
+								{type === 'transfer' ? (
+									<div className="block-center">
+										<span
+											className={clsx(
+												styles.smallCard,
+												'radius-sm block-center',
+												'contrast-color-100',
+												'padding-left-sm padding-right-sm padding-top-xs padding-bottom-xs',
+												'margin-right-md'
+											)}
+										>
+											<span className="padding-right-xs">From</span>
+											<Typography.LinkText href={LinkMaker.address(content?.transfer?.from)}>
+												{content?.transfer?.from}
+											</Typography.LinkText>
+											<CopyButton textCopy={content?.transfer?.from} />
+										</span>
+										<span
+											className={clsx(
+												styles.smallCard,
+												'radius-sm block-center',
+												'contrast-color-100',
+												'padding-left-sm padding-right-sm padding-top-xs padding-bottom-xs',
+												'margin-right-md'
+											)}
+										>
+											<span className="padding-right-xs">To</span>
+											<Typography.LinkText href={LinkMaker.address(content?.transfer?.to)}>
+												{content?.transfer?.to}
+											</Typography.LinkText>
+											<CopyButton textCopy={content?.transfer?.to} />
+										</span>
+										<span
+											className={clsx(
+												styles.smallCard,
+												'radius-sm block-center',
+												'contrast-color-100',
+												'padding-left-sm padding-right-sm padding-top-xs padding-bottom-xs',
+												'margin-right-md'
+											)}
+										>
+											<span className="padding-right-xs">For</span>
+											<span className="padding-right-xs">{content?.transfer.value}</span>
+											<Typography.LinkText href={LinkMaker.address(content?.transfer?.to)}>
+												{content?.transfer?.token}
+											</Typography.LinkText>
+										</span>
+									</div>
+								) : null}
+							</div>
+						))}
+					</div>
+				))}
+			</div>
+		</BackgroundCard>
+	)
+}
diff --git a/components/Card/CardInfo/style.module.scss b/components/Card/CardInfo/style.module.scss
@@ -0,0 +1,10 @@
+.cardRow {
+	height: 40px;
+	.leftColumn {
+	}
+	.rightColumn {
+	}
+}
+.smallCard {
+	background-color: rgba(var(--contrast-color-theme--raw), 0.05);
+}
diff --git a/components/Container/index.tsx b/components/Container/index.tsx
@@ -1,7 +1,10 @@
+import clsx from 'clsx'
+
 type ContainerProps = {
+	classes?: string[]
 	children: React.ReactNode
 }
 
-export default function Container({ children }: ContainerProps) {
-	return <div className="container margin-auto">{children}</div>
+export default function Container({ children, classes = [] }: ContainerProps) {
+	return <div className={clsx('container margin-auto', ...classes)}>{children}</div>
 }
diff --git a/components/Loader/RowLoader.tsx b/components/Loader/RowLoader.tsx
@@ -8,8 +8,8 @@ export default function RowLoader({ row = 1 }: RowLoaderProps) {
 	return (
 		<table className={styles.table}>
 			<tbody>
-				{new Array(row).fill(0).map(_ => (
-					<tr>
+				{new Array(row).fill(0).map((_, index) => (
+					<tr key={index}>
 						<td className="td-1">
 							<span></span>
 						</td>

diff --git a/components/Loader/style.module.scss b/components/Loader/style.module.scss
@@ -34,7 +34,7 @@
 				}
 			}
 			&:nth-of-type(3) {
-				width: 400px;
+				width: 80%;
 				span {
 					background-color: var(--contrast-color-theme-50);
 					height: 12px;

diff --git a/components/Navbar/Navigation.tsx b/components/Navbar/Navigation.tsx
@@ -40,10 +40,25 @@ export default function Navigation({ items }: NavigationProps) {
 	const hideMenu = () => setMenuItems(items)
 	useOutsideAlerter(wrapperRef, hideMenu)
 
-	const _renderLink = (link, text) => {
+	const _renderLink = (link, text, index, len, locale = false) => {
 		const span = () => (
-			<span className="text-base text-center text-bold contrast-color-70 padding-sm block-center pointer">
-				{text}
+			<span
+				className={clsx(
+					'text-base text-center text-bold',
+					'contrast-color-70 padding-sm',
+					'block-center pointer',
+					{ 'radius-tl-sm radius-tr-sm': index === 0 },
+					{ 'radius-bl-sm radius-br-sm': index === len - 1 }
+				)}
+			>
+				{locale ? (
+					<>
+						<Image src={`/images/flag${link}.svg`} width={30} height={19} />
+						<span className="padding-left-xs">{text}</span>
+					</>
+				) : (
+					text
+				)}
 			</span>
 		)
 		return link ? <Link href={link}>{span()}</Link> : span()
@@ -85,18 +100,6 @@ export default function Navigation({ items }: NavigationProps) {
 			</>
 		)
 	}
-
-	const _renderLocaleItems = (link, label) => {
-		return (
-			<>
-				<span className="text-base text-bold contrast-color-70 padding-sm block-center pointer">
-					<Image src={`/images/flag${link}.svg`} width={30} height={19} />
-					<span className="padding-left-xs">{label}</span>
-				</span>
-			</>
-		)
-	}
-
 	return (
 		<ul className={styles.navigation} ref={wrapperRef}>
 			{_menuItems.map(({ link = '', prefixIcon, label, show, id, submenus: sub1, type, background }) => (
@@ -114,15 +117,15 @@ export default function Navigation({ items }: NavigationProps) {
 					) : (
 						<>
 							{prefixIcon && prefixIcon}
-							{_renderLink(link, label)}
+							{_renderLink(link, label, 1, 0)}
 						</>
 					)}
 
 					{sub1?.length > 0 && (
 						<>
 							<span className="dropdown-icon" data-text="icon"></span>
 							<ul
-								className={clsx(styles.submenu, 'radius-sm', 'border border-base', {
+								className={clsx(styles.submenu, 'radius-sm shadow-xs', {
 									[styles.show]: show,
 									[styles.locale]: type === 'locale'
 								})}
@@ -135,9 +138,7 @@ export default function Navigation({ items }: NavigationProps) {
 										key={`${menu.link} + ${menu.label}`}
 										onClick={event => _showSubMenu(event, [id, menu.id])}
 									>
-										{type === 'locale'
-											? _renderLocaleItems(menu.link, menu.label)
-											: _renderLink(menu.link, menu.label)}
+										{_renderLink(menu.link, menu.label, index, sub1.length, type === 'locale')}
 										{menu.submenus && (
 											<ul
 												className={clsx(styles.submenu2, 'contrast-bg-color-50', 'radius-xs', {
@@ -146,7 +147,7 @@ export default function Navigation({ items }: NavigationProps) {
 											>
 												{menu.submenus.map(sub2 => (
 													<li key={`${sub2.link} + ${sub2.label}`}>
-														{_renderLink(sub2.link, sub2.label)}
+														{_renderLink(sub2.link, sub2.label, index, sub1.length, true)}
 													</li>
 												))}
 											</ul>