feat: add cosmos msg

components/Card/CardInfo/Components/CardTabs.tsx

@@ -0,0 +1,116 @@
+import { Card, Table } from '@astraprotocol/astra-ui'
+import clsx from 'clsx'
+import Tabs from 'components/Tabs/Tabs'
+import { isObject, isString } from 'lodash'
+import styles from '../style.module.scss'
+
+type CardTabsProps = {
+	tabTitles: string[]
+	tabContent: any[]
+}
+
+export default function CardTabs({ tabTitles, tabContent }: CardTabsProps) {
+	const _title = tabTitles.map(title => ({ title: title, id: title, padding: ' ' }))
+	const _content = {}
+	// console.log({ tabContent, tabTitles })
+
+	const _renderTable = (titles: string[], rowData: string[][]) => {
+		const titleEl = titles.map(t => ({
+			key: t,
+			content: <span className="text-md contrast-color-70">{t}</span>,
+			render: val => <span className="contrast-color-70 text-sm">{val}</span>
+		}))
+		const rows = []
+		for (let row of rowData) {
+			const rowData = {}
+			for (let i = 0; i < row.length; i++) {
+				rowData[titles[i]] = { content: row[i] }
+			}
+			rows.push(rowData)
+		}
+
+		return <Table classes={{ table: styles.tableTD }} id="param" colums={titleEl} rows={rows} />
+	}
+
+	tabContent.map((content, idx) => {
+		if (isString(content)) {
+			// only string
+			_content[tabTitles[idx]] = (
+				<span
+					className={clsx(styles.rawInput, 'text text-sm contrast-color-70 padding-sm word-break-all')}
+					style={{ display: 'block' }}
+				>
+					{content}
+				</span>
+			)
+		} else if (isObject(content) && content['tableTitles']) {
+			// table
+			_content[tabTitles[idx]] = _renderTable(content['tableTitles'], content['tableContents'])
+		} else if (isObject(content) && content['tabTitles']) {
+			// table
+			_content[tabTitles[idx]] = <CardTabs tabTitles={content['tabTitles']} tabContent={content['tabContent']} />
+		} else {
+			// row
+			const keys = Object.keys(content)
+			const rows: JSX.Element[] = []
+			for (let key of keys) {
+				if (isString(content[key])) {
+					rows.push(
+						<Card.Row
+							left={{ content: key, wapperClasses: styles.left }}
+							right={{ content: content[key], align: 'left' }}
+						/>
+					)
+				} else if (isObject(content[key]) && content[key]['tableTitles']) {
+					// table
+					rows.push(
+						<Card.Row
+							left={{ content: key, wapperClasses: styles.left }}
+							right={{
+								content: _renderTable(content[key]['tableTitles'], content[key]['tableContents']),
+								align: 'left'
+							}}
+						/>
+					)
+				} else if (isObject(content[key]) && content[key]['tabTitles']) {
+					// table
+					rows.push(
+						<Card.Row
+							left={{ content: key, wapperClasses: styles.left }}
+							right={{
+								content: (
+									<CardTabs
+										tabTitles={content[key]['tabTitles']}
+										tabContent={content[key]['tabContent']}
+									/>
+								),
+								align: 'left'
+							}}
+						/>
+					)
+				}
+			}
+			_content[tabTitles[idx]] = (
+				<span
+					className={clsx(styles.rawInput, 'text text-sm contrast-color-70 padding-sm word-break-all')}
+					style={{ display: 'block' }}
+				>
+					{rows}
+				</span>
+			)
+		}
+	})
+	return (
+		<div>
+			<div style={{ maxWidth: '10000px' }}>
+				<Tabs
+					tabs={_title}
+					contents={_content}
+					classes="padding-top-xs aaa"
+					headerBorder={false}
+					headerPadding="padding-left-sm flex-wrap"
+				/>
+			</div>
+		</div>
+	)
+}

components/Card/CardInfo/index.tsx

@@ -1,4 +1,4 @@
-import { CryptoIcon, Typography as TypographyUI, useMobileLayout } from '@astraprotocol/astra-ui'
+import { CryptoIcon, Table, Typography as TypographyUI, useMobileLayout } from '@astraprotocol/astra-ui'
 import { CryptoIconNames } from '@astraprotocol/astra-ui/lib/es/components/CryptoIcon'
 import { Column, RowData } from '@astraprotocol/astra-ui/lib/es/components/Table/Table'
 import clsx from 'clsx'
@@ -8,7 +8,7 @@ import Typography from 'components/Typography'
 import { LabelBackgroundTypes, LabelTypes } from 'components/Typography/Label'
 import { ellipseRightText } from 'utils/helper'
 import BackgroundCard from '../Background/BackgroundCard'
-import CardContentTabs from './Components/CardContentTabs'
+import CardTabs from './Components/CardTabs'
 import Decode, { DecodeProps } from './Components/Decode'
 import RawInput from './Components/RawInput'
 import Transfers from './Components/Transfers'
@@ -40,8 +40,12 @@ export type Content = {
 	}
 	decode?: DecodeProps
 	tabs?: {
-		titles: string[]
-		content: Array<string | { cols: Column[]; rows: RowData[] }>
+		tabTitles: string[]
+		tabContent: any[]
+	}
+	table?: {
+		colums: Column[]
+		rows: RowData[]
 	}
 }
 
@@ -62,6 +66,7 @@ export type CardRowItem = {
 		| 'validator-description'
 		| 'commission'
 		| 'tabs'
+		| 'table'
 	contents: Content[]
 	responsive?: {
 		wrap?: 'sm' | 'md'
@@ -210,7 +215,25 @@ export default function CardInfo({
 									{type === 'commission' ? (
 										<ValidatorCommission commission={content.value as CommissionRates} />
 									) : null}
-									{type === 'tabs' ? <CardContentTabs {...content.tabs} /> : null}
+									{type === 'tabs' ? <CardTabs {...content.tabs} /> : null}
+									{type === 'table'
+										? content.table && (
+												<div
+													style={{
+														maxHeight: '300px',
+														minWidth: '250px',
+														overflowY: 'auto',
+														width: '100%'
+													}}
+												>
+													<Table
+														classes={{ table: styles.tableTD }}
+														colums={content.table.colums}
+														rows={content.table.rows}
+													/>
+												</div>
+										  )
+										: null}
 								</div>
 							))}
 						</div>

components/Card/CardInfo/style.module.scss

@@ -15,6 +15,11 @@
 	border: 1px solid rgba(var(--contrast-color-theme--raw), 0.1);
 	border-radius: 8px;
 	padding: 12px;
+	div:last-of-type {
+		margin-bottom: 0px !important;
+		padding-bottom: 0px !important;
+		border-bottom: none !important;
+	}
 }
 .copyColor {
 	color: var(--link-color-useful);
@@ -27,3 +32,16 @@
 .table {
 	min-width: 600px;
 }
+
+.left {
+	max-width: 170px;
+}
+
+.tableTD {
+	th {
+		padding: 5px !important;
+	}
+	td {
+		padding: 5px !important;
+	}
+}

components/Tabs/Tab.tsx

@@ -21,7 +21,7 @@ const Tab = ({ active, title, onClick, padding }: Props) => {
 					'text',
 					'text-base text-bold',
 					padding || 'padding-top-lg padding-bottom-sm',
-					'padding-left-xs padding-right-x',
+					'padding-left-xs padding-right-xs',
 					'margin-right-sm'
 				)}
 			>

components/Typography/PageTitle.tsx

@@ -1,6 +1,6 @@
 import clsx from 'clsx'
 interface Props {
-	children: string
+	children: React.ReactNode
 	className?: string[]
 	icon?: string
 }

package.json

@@ -15,7 +15,7 @@
 	"license": "MIT",
 	"dependencies": {
 		"@astradefi/address-converter": "^0.4.1",
-		"@astraprotocol/astra-ui": "^1.0.31",
+		"@astraprotocol/astra-ui": "^1.0.32",
 		"@cosmjs/crypto": "^0.29.0",
 		"@cosmjs/encoding": "^0.29.0",
 		"@reduxjs/toolkit": "^1.8.5",

pages/tx/[tx].tsx

@@ -5,6 +5,7 @@ import API_LIST from 'api/api_list'
 import { AxiosError } from 'axios'
 import CardInfo from 'components/Card/CardInfo'
 import Container from 'components/Container'
+import PolygonTag from 'components/Tag/PolygonTag'
 import Typography from 'components/Typography'
 import { pickBy } from 'lodash'
 import Head from 'next/head'
@@ -26,7 +27,7 @@ type Props = {
 
 const TransactionDetailPage: React.FC<Props> = ({ errorMessage, data, evmHash, cosmosHash }: Props) => {
 	const { isMobile } = useMobileLayout('small')
-	const [items, extraItems, moreItems] = useConvertData({ data })
+	const cards = useConvertData({ data })
 	const hash = evmHash || cosmosHash
 	const isEvm = data && !!data.evmHash
 	const isMainnet = window?.location?.hostname?.includes('.astranaut.io')
@@ -47,11 +48,20 @@ const TransactionDetailPage: React.FC<Props> = ({ errorMessage, data, evmHash, c
 				{data ? (
 					<>
 						<div className="margin-top-2xl margin-bottom-md">
-							<Typography.PageTitle>{data.pageTitle || ''}</Typography.PageTitle>
+							<Typography.PageTitle className={['flex flex-align-center']}>
+								{data.cosmosMsgCount ? (
+									<span className="flex flex-align-center">
+										{data.pageTitle}
+										<PolygonTag text={`+ ${data.cosmosMsgCount.toString()}`} />
+									</span>
+								) : (
+									data.pageTitle || ''
+								)}
+							</Typography.PageTitle>
 						</div>
-						<CardInfo items={items} classes={['margin-top-sm']} />
-						{extraItems.length > 0 && <CardInfo items={extraItems} classes={['margin-top-sm']} />}
-						{moreItems.length > 0 && <CardInfo items={moreItems} classes={['margin-top-sm']} />}
+						{cards.map((card, idx) => (
+							<CardInfo items={card} classes={['margin-top-sm']} key={idx} />
+						))}
 						{data.rawInput && <DecodeInput dataInput={data.rawInput} address={data.to} evmHash={evmHash} />}
 						{isEvm && (
 							<TransactionTabs

pages/tx/index.tsx

@@ -24,7 +24,7 @@ const BlockDetailPage: React.FC<NextPage> = _ => {
 			setLoaderTime(true) // time for loader dispaly
 			setTimeout(() => {
 				setLoaderTime(false) // endtime
-			}, 500)
+			}, 1000)
 		}
 	}, [fullPageData])
 	return (
@@ -87,6 +87,7 @@ const BlockDetailPage: React.FC<NextPage> = _ => {
 										type={item.type}
 										newBlock={item.newTransaction}
 										height="auto"
+										typeCount={item.typeCount}
 									/>
 								)
 							})}

types/address.d.ts

@@ -177,7 +177,7 @@ interface AddressTransactionData {
 	blockTime: string
 	hash: string
 	messageTypes: string[]
-	messages: {
+	messages?: {
 		type: string
 		evmType?: string
 		content: MsgEthereumTxContent