feat: change api

api/api_list.ts

@@ -1,7 +1,7 @@
 const API_LIST = {
 	SEARCH: '/token-autocomplete',
-	ALL_BLOCKS: '/blocks?api=true',
-	ALL_TRANSACTIONS: '/txs?api=true'
+	ALL_BLOCKS: 'evm_/blocks',
+	ALL_TRANSACTIONS: 'evm_/transactions'
 }
 
 export default API_LIST

api/index.ts

@@ -12,7 +12,9 @@ export const cosmosFetcher = (url: string, params: { [key: string]: string }) =>
 const evmApi = axios.create({
 	baseURL: process.env.NEXT_PUBLIC_EVM_API,
 	timeout: parseInt(process.env.NEXT_PUBLIC_API_TIMEOUT) || 15000,
-	headers: { 'content-type': 'application/json' }
+	headers: {
+		'content-type': 'application/json'
+	}
 })
 
 export const evmFetcher = (url: string, params: { [key: string]: string }) => {

components/Card/CardInfo/index.tsx

@@ -40,14 +40,14 @@ export default function CardInfo({ items, classes = [] }: CardInfoProps) {
 		<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 key={label} className={clsx(styles.cardRow, 'row margin-bottom-md')}>
 						<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')}
+								className={clsx(styles.rightColumn, 'block-center margin-right-sm')}
 							>
 								{type === 'text' ? (
 									<span className="moeny money-sm contrast-color-100">{content.value}</span>

components/Card/CardInfo/style.module.scss

@@ -1,5 +1,4 @@
 .cardRow {
-	height: 40px;
 	.leftColumn {
 	}
 	.rightColumn {

components/Navbar/index.tsx

@@ -98,23 +98,23 @@ const items: MenuItem[] = [
 				link: '/astra'
 			}
 		]
-	},
-	{
-		id: '6',
-		type: 'locale',
-		submenus: [
-			{
-				id: '6.1',
-				label: 'ENG',
-				link: '/en'
-			},
-			{
-				id: '6.2',
-				label: 'VI',
-				link: '/vi'
-			}
-		]
 	}
+	// {
+	// 	id: '6',
+	// 	type: 'locale',
+	// 	submenus: [
+	// 		{
+	// 			id: '6.1',
+	// 			label: 'ENG',
+	// 			link: '/en'
+	// 		},
+	// 		{
+	// 			id: '6.2',
+	// 			label: 'VI',
+	// 			link: '/vi'
+	// 		}
+	// 	]
+	// }
 ]
 
 export default function Navbar() {

components/Typography/RowTitle.tsx

@@ -0,0 +1,18 @@
+type Column = {
+	title: string
+	col: string
+}
+
+type RowTitleProps = {
+	columns: Column[]
+}
+
+export default function RowTitle({ columns }: RowTitleProps) {
+	return (
+		<div className="row contrast-color-50 margin-bottom-sm margin-top-xl">
+			{columns.map(column => (
+				<div className={`${column.col}`}>{column.title}</div>
+			))}
+		</div>
+	)
+}

pages/blocks/[block].tsx

@@ -14,40 +14,63 @@ const BlockDetailPage: React.FC<Props> = ({ data }) => {
 		const keys = Object.keys(data)
 		let items: CardRowItem[] = []
 		for (let key of keys) {
-			let item: CardRowItem
 			switch (key) {
 				case 'hash':
-					item = {
+					items.push({
 						label: 'Transaction Hash:',
 						type: 'copy',
 						contents: [{ value: data[key] }]
-					}
+					})
 					break
 				case 'cosmos':
-					item = {
+					items.push({
 						label: 'Transaction Cosmons:',
 						type: 'link-copy',
 						contents: [{ value: data[key], link: LinkMaker.transaction(data[key]) }]
-					}
+					})
 					break
 				case 'result':
-					item = {
+					items.push({
 						label: 'Result',
 						type: 'label',
 						contents: [{ value: data[key], type: data[key], backgroundType: 'unset' }]
-					}
+					})
+					break
+				case 'status':
+					items.push({
+						label: 'Status',
+						type: 'label',
+						contents: [
+							{ value: 'success', type: 'success', backgroundType: 'rectangle' },
+							{ value: data[key], type: 'unset', backgroundType: 'specialShape' }
+						]
+					})
 					break
 				case 'blockNumber':
-					item = {
+					items.push({
 						label: 'Block',
 						type: 'link',
 						contents: [{ value: '#' + data[key], link: LinkMaker.block(data[key]) }]
-					}
+					})
 					break
 				case 'transfers':
-					item = {
+					items.push({
 						label: 'Tokens Transferred:',
 						type: 'transfer',
+						contents: [
+							{
+								transfer: {
+									from: '0xbf...214222',
+									to: '0xbf865...12311e',
+									value: 10.1234123412341,
+									token: 'WASA'
+								}
+							}
+						]
+					})
+					items.push({
+						label: '',
+						type: 'transfer',
 						contents: [
 							{
 								transfer: {
@@ -58,45 +81,41 @@ const BlockDetailPage: React.FC<Props> = ({ data }) => {
 								}
 							}
 						]
-					}
+					})
 					break
 				case 'time':
-					item = {
+					items.push({
 						label: 'Timestamp',
 						type: 'time',
 						contents: [{ value: data[key], type: data[key], suffix: '2.33ss' }]
-					}
+					})
 					break
 				case 'value':
-					item = {
+					items.push({
 						label: ' Value',
 						type: 'balance',
 						contents: [{ value: data[key].value, suffix: '(0.00 VND)' }]
-					}
+					})
 					break
 				case 'fee':
-					item = {
+					items.push({
 						label: 'Transaction fee',
 						type: 'balance',
 						contents: [{ value: data[key].value, suffix: '(0.00 VND)' }]
-					}
+					})
 					break
 				case 'gasPrice':
-					item = {
+					items.push({
 						label: 'Gas Price',
 						type: 'text',
 						contents: [{ value: data[key] }]
-					}
+					})
 					break
 			}
-			if (item) {
-				items.push(item)
-			}
 		}
 		return items
 	}
 	const items = convertRawDataToCardData(data)
-	console.log(items)
 	return (
 		<Layout>
 			<Container>

pages/blocks/index.tsx

@@ -2,6 +2,7 @@ import { Breadcumbs } from '@astraprotocol/astra-ui'
 import Container from 'components/Container'
 import RowLoader from 'components/Loader/RowLoader'
 import Search from 'components/Search'
+import RowTitle from 'components/Typography/RowTitle'
 import { NextPage } from 'next'
 import Head from 'next/head'
 import React from 'react'
@@ -10,7 +11,7 @@ import useBlock from 'view/Block/hook/useBlock'
 import Layout from '../../components/Layout'
 
 const BlockDetailPage: React.FC<NextPage> = _ => {
-	const { fullPageData } = useBlock()
+	const { fullPageData, getPropserAddress } = useBlock()
 	return (
 		<Layout>
 			<Head>
@@ -19,19 +20,27 @@ const BlockDetailPage: React.FC<NextPage> = _ => {
 			<Search />
 			<Container>
 				<Breadcumbs items={[{ label: 'Blocks' }]} />
+				<RowTitle
+					columns={[
+						{ title: 'Block ID', col: 'padding-left-lg col-2 gutter-right' },
+						{ title: 'Block Proposer', col: 'padding-left-xl gutter-left col-6' },
+						{ title: 'Time', col: 'padding-left-sm col-2' },
+						{ title: 'Total Transaction', col: 'padding-left-sm' }
+					]}
+				/>
 				<div>
 					{!fullPageData || fullPageData.length === 0 ? (
 						<RowLoader row={12} />
 					) : (
 						<div>
 							{fullPageData?.map(item => (
 								<BlockRow
-									key={item.number}
-									blockNumber={item.number}
-									proposerAddress={item.miner_hash}
-									transactions={0}
-									updatedAt={item.timestamp}
-									size={item.size}
+									key={item.blockHeight}
+									blockNumber={item.blockHeight}
+									proposerAddress={getPropserAddress(item.committedCouncilNodes)?.address}
+									transactions={item.transactionCount}
+									updatedAt={item.blockTime}
+									size={0}
 									value={0}
 									newBlock={item.newBlock}
 								/>