fix: update display txdatail and msgcreatevalidator

AstraProtocol · Jan 9, 2023 · f640a5a · f640a5a
1 parent 714ea4c
commit f640a5a
Show file tree

Hide file tree

Showing 9 changed files with 209 additions and 70 deletions.
diff --git a/components/Card/CardInfo/Components/ValidatorCommission.tsx b/components/Card/CardInfo/Components/ValidatorCommission.tsx
@@ -0,0 +1,27 @@
+import Tabs from 'components/Tabs/Tabs'
+
+type ValidatorCommissionProps = {
+	commission?: CommissionRates
+}
+
+export default function ValidatorCommission({ commission }: ValidatorCommissionProps) {
+	return (
+		<div style={{ maxWidth: '885px', maxHeight: '200px', overflowY: 'auto' }}>
+			<Tabs
+				tabs={[
+					{ title: 'Rate', id: 'rate', padding: ' ' },
+					{ title: 'Max Rate', id: 'maxRate', padding: ' ' },
+					{ title: 'Max Chane Rate', id: 'maxChangeRate', padding: ' ' }
+				]}
+				contents={{
+					rate: <span className="text text-base">{commission?.rate}</span>,
+					maxRate: <span className="text text-base">{commission?.maxRate}</span>,
+					maxChangeRate: <span className="text text-base">{commission?.maxChangeRate}</span>
+				}}
+				classes="padding-top-xs"
+				headerBorder={false}
+				headerPadding=" "
+			/>
+		</div>
+	)
+}
diff --git a/components/Card/CardInfo/Components/ValidatorDescription.tsx b/components/Card/CardInfo/Components/ValidatorDescription.tsx
@@ -0,0 +1,31 @@
+import Tabs from 'components/Tabs/Tabs'
+
+type ValidatorDescriptionProps = {
+	description?: ValidatorData
+}
+
+export default function ValidatorDescription({ description }: ValidatorDescriptionProps) {
+	return (
+		<div style={{ maxWidth: '885px', maxHeight: '200px', overflowY: 'auto' }}>
+			<Tabs
+				tabs={[
+					{ title: 'Moniker', id: 'moniker', padding: ' ' },
+					{ title: 'Identity', id: 'identity', padding: ' ' },
+					{ title: 'Website', id: 'website', padding: ' ' },
+					{ title: 'Security Contact', id: 'securityContact', padding: ' ' },
+					{ title: 'Details', id: 'details', padding: ' ' }
+				]}
+				contents={{
+					moniker: <span className="text text-base">{description?.moniker}</span>,
+					identity: <span className="text text-base">{description?.identity}</span>,
+					website: <span className="text text-base">{description?.website}</span>,
+					securityContact: <span className="text text-base">{description?.securityContact}</span>,
+					details: <span className="text text-base">{description?.details}</span>
+				}}
+				classes="padding-top-xs"
+				headerBorder={false}
+				headerPadding=" "
+			/>
+		</div>
+	)
+}
diff --git a/components/Card/CardInfo/index.tsx b/components/Card/CardInfo/index.tsx
@@ -10,11 +10,13 @@ import BackgroundCard from '../Background/BackgroundCard'
 import Decode, { DecodeProps } from './Components/Decode'
 import RawInput from './Components/RawInput'
 import Transfers from './Components/Transfers'
+import ValidatorCommission from './Components/ValidatorCommission'
+import ValidatorDescription from './Components/ValidatorDescription'
 import styles from './style.module.scss'
 
 export type Content = {
 	link?: string
-	value?: string | number
+	value?: string | number | any
 	text?: string
 	prefix?: string
 	suffix?: string
@@ -51,6 +53,8 @@ export type CardRowItem = {
 		| 'raw-input'
 		| 'nonce'
 		| 'decode'
+		| 'validator-description'
+		| 'commission'
 	contents: Content[]
 	responsive?: {
 		wrap?: 'sm' | 'md'
@@ -123,9 +127,9 @@ export default function CardInfo({
 										</div>
 									) : null}
 									{type === 'text' ? (
-										<span className="money money-sm contrast-color-100 word-break-all">
-											{_ellipsis(content.value, responsive.ellipsis)}{' '}
-											{content.suffix && content.suffix}
+										<span className="money money-sm contrast-color-100">
+											{/* {_ellipsis(content.value, responsive.ellipsis)}{' '} */}
+											{content.value} {content.suffix && content.suffix}
 										</span>
 									) : null}
 									{type === 'copy' ? (
@@ -140,16 +144,18 @@ export default function CardInfo({
 											fontType="Titi"
 											fontSize="text-500"
 										>
-											{_ellipsis(content.value as string, responsive.ellipsis)}
+											{/* {_ellipsis(content.value as string, responsive.ellipsis)} */}
+											{content.value}
 										</Typography.LinkText>
 									) : null}
 									{type === 'link-copy' ? (
 										<div className="block-center">
 											<Typography.LinkText href={content.link || ''}>
-												{_ellipsis(
+												{/* {_ellipsis(
 													content.text || (content.value as string),
 													responsive.ellipsis
-												)}
+												)} */}
+												{content.text || (content.value as string)}
 											</Typography.LinkText>
 											<CopyButton textCopy={content.value as string} />
 										</div>
@@ -189,6 +195,12 @@ export default function CardInfo({
 									{type === 'transfer' ? <Transfers content={content} /> : null}
 									{type === 'raw-input' ? <RawInput text={content.value as string} /> : null}
 									{type === 'decode' ? <Decode {...content.decode} /> : null}
+									{type === 'validator-description' ? (
+										<ValidatorDescription description={content.value as ValidatorData} />
+									) : null}
+									{type === 'commission' ? (
+										<ValidatorCommission commission={content.value as CommissionRates} />
+									) : null}
 								</div>
 							))}
 						</div>

diff --git a/pages/tx/[tx].tsx b/pages/tx/[tx].tsx
@@ -26,7 +26,7 @@ type Props = {
 
 const TransactionDetailPage: React.FC<Props> = ({ errorMessage, data, evmHash, cosmosHash }: Props) => {
 	const { isMobile } = useMobileLayout('small')
-	const [items, moreItems] = useConvertData({ data })
+	const [items, extraItems, moreItems] = useConvertData({ data })
 	const hash = evmHash || cosmosHash
 	const isMainnet = window?.location?.hostname?.includes('.astranaut.io')
 	return (
@@ -49,6 +49,7 @@ const TransactionDetailPage: React.FC<Props> = ({ errorMessage, data, evmHash, c
 							<Typography.PageTitle>{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']} />}
 						{data.rawInput && <DecodeInput dataInput={data.rawInput} address={data.to} evmHash={evmHash} />}
 						<TransactionTabs

diff --git a/types/message.d.ts b/types/message.d.ts
@@ -14,32 +14,7 @@ enum TransactionTypeEnum {
 interface MsgCreateValidator {
 	evmType?: string
 	type: '/cosmos.staking.v1beta1.MsgCreateValidator'
-	content: {
-		height: number
-		txHash: string
-		msgName: TransactionTypeEnum.MsgCreateValidator
-		msgIndex: number
-		delegatorAddress: string
-		validatorAddress: string
-		name: string
-		amount: TokenAmount
-		version: number
-		uuid: string
-		commissionRates: {
-			rate: string
-			maxRate: string
-			maxChangeRate: string
-		}
-		tendermintPubkey: string
-		description: {
-			details: string
-			moniker: string
-			website: string
-			identity: string
-			securityContract: string
-		}
-		minSelfDelegation: string
-	}
+	content: MsgCreateValidatorContent
 }
 
 interface MsgUnjail {
@@ -208,4 +183,25 @@ interface MsgWithdrawDelegatorRewardContent {
 	recipientAddress: string
 }
 
-interface MsgCreateValidatorContent {}
+interface MsgCreateValidatorContent {
+	height: number
+	txHash: string
+	msgName: TransactionTypeEnum.MsgCreateValidator
+	msgIndex: number
+	delegatorAddress: string
+	validatorAddress: string
+	name: string
+	amount: TokenAmount
+	version: number
+	uuid: string
+	commissionRates: CommissionRates
+	tendermintPubkey: string
+	description: ValidatorData
+	minSelfDelegation: string
+}
+
+interface CommissionRates {
+	rate: string
+	maxRate: string
+	maxChangeRate: string
+}
diff --git a/types/transactions.d.ts b/types/transactions.d.ts
@@ -255,3 +255,12 @@ interface TransactionMsgWithdrawDelegatorRewardDetail extends TransactionDetail
 	validatorAddress: string
 	delegatorAddress: string
 }
+
+interface TransactionMsgCreateValidatorDetail extends TransactionDetail {
+	uuid: string
+	tendermintPubkey: string
+	validatorAddress: string
+	validatorDescription: ValidatorData
+	commissionRates: CommissionRates
+	minSelfDelegation: string
+}
diff --git a/utils/enum.ts b/utils/enum.ts
@@ -18,7 +18,8 @@ export enum TransactionTypeEnum {
 	MsgWithdrawDelegatorReward = '/cosmos.distribution.v1beta1.MsgWithdrawDelegatorReward',
 	MsgBeginRedelegate = '/cosmos.staking.v1beta1.MsgBeginRedelegate',
 	MsgExec = '/cosmos.authz.v1beta1.MsgExec',
-	MsgGrant = '/cosmos.authz.v1beta1.MsgGrant'
+	MsgGrant = '/cosmos.authz.v1beta1.MsgGrant',
+	MsgCreateValidator = '/cosmos.staking.v1beta1.MsgCreateValidator'
 }
 
 export enum AddressTypeEnum {
@@ -52,6 +53,9 @@ export enum CardInfoLabels {
 	recipientAddress = 'Recipient Address:',
 	validatorSrcAddress = 'Validator Src Address:',
 	validatorDstAddress = 'Validator Dst Address:',
+	minSelfDelegation = 'Min Self Delegation:',
+	validatorDescription = 'Description:',
+	commissionRates = 'Commission Rates:',
 	grantee = 'Grantee',
 	failLog = 'Fail reason:',
 	// Revert_Reason =

diff --git a/views/transactions/hook/useConvertData.ts b/views/transactions/hook/useConvertData.ts
@@ -3,6 +3,7 @@ import { formatNumber } from '@astraprotocol/astra-ui'
 import { CardRowItem } from 'components/Card/CardInfo'
 import { LabelTypes } from 'components/Typography/Label'
 import { formatUnits } from 'ethers/lib/utils'
+import { isEmpty } from 'lodash'
 import { useCallback } from 'react'
 import { getAstraSummary } from 'slices/commonSlice'
 import { useAppSelector } from 'store/hooks'
@@ -135,6 +136,7 @@ export default function useConvertData({ data }: { data: TransactionDetail }) {
 								contents: [{ value: data[key], type: data[key], suffix: '' }]
 							})
 						break
+					case 'minSelfDelegation':
 					case 'value':
 						if (data[key] !== undefined && data[key] !== null) {
 							let money = Number(astraPrice) * parseFloat(data[key])
@@ -220,7 +222,7 @@ export default function useConvertData({ data }: { data: TransactionDetail }) {
 					case 'delegatorAddress':
 					case 'recipientAddress':
 					case 'grantee':
-						if (data[key] !== undefined && data[key] !== null) {
+						if (!isEmpty(data[key])) {
 							const evmAddress = astraToEth(data[key])
 							items.push({
 								label: CardInfoLabels[key],
@@ -233,7 +235,7 @@ export default function useConvertData({ data }: { data: TransactionDetail }) {
 					case 'validatorAddress':
 					case 'validatorSrcAddress':
 					case 'validatorDstAddress':
-						if (data[key] !== undefined && data[key] !== null)
+						if (!isEmpty(data[key]))
 							items.push({
 								label: CardInfoLabels[key],
 								type: 'copy',
@@ -267,6 +269,23 @@ export default function useConvertData({ data }: { data: TransactionDetail }) {
 								contents: [{ value: data[key] }]
 							})
 						break
+
+					case 'validatorDescription':
+						if (!isEmpty(data[key]))
+							items.push({
+								label: CardInfoLabels[key],
+								type: 'validator-description',
+								contents: [{ value: data[key] }]
+							})
+						break
+					case 'commissionRates':
+						if (!isEmpty(data[key]))
+							items.push({
+								label: CardInfoLabels[key],
+								type: 'commission',
+								contents: [{ value: data[key] }]
+							})
+						break
 				}
 			}
 			const mainItems = sortArrayFollowValue(items, 'label', [
@@ -279,26 +298,9 @@ export default function useConvertData({ data }: { data: TransactionDetail }) {
 				CardInfoLabels.confirmations,
 				CardInfoLabels.block,
 				CardInfoLabels.blockHeight,
-				//msgvote
-				CardInfoLabels.voter,
-				CardInfoLabels.proposalId,
-				CardInfoLabels.option,
-				//delegate
-				CardInfoLabels.delegatorAddress,
-				CardInfoLabels.recipientAddress,
-				CardInfoLabels.validatorAddress,
-				//MsgBeginRedelegate
-
-				CardInfoLabels.validatorSrcAddress,
-				CardInfoLabels.validatorDstAddress,
-				//MsgExec
-				CardInfoLabels.grantee,
 
 				CardInfoLabels.time,
-				CardInfoLabels.from,
-				CardInfoLabels.to,
-				CardInfoLabels.interactWith,
-				CardInfoLabels.tokenTransfers,
+
 				CardInfoLabels.value,
 				CardInfoLabels.fee,
 				CardInfoLabels.gasPrice,
@@ -315,6 +317,32 @@ export default function useConvertData({ data }: { data: TransactionDetail }) {
 					}
 				}
 			})
+
+			const extraItems = sortArrayFollowValue(items, 'label', [
+				CardInfoLabels.from,
+				CardInfoLabels.to,
+				CardInfoLabels.interactWith,
+				CardInfoLabels.tokenTransfers,
+				//msgvote
+				CardInfoLabels.voter,
+				CardInfoLabels.proposalId,
+				CardInfoLabels.option,
+				//delegate
+				CardInfoLabels.delegatorAddress,
+				CardInfoLabels.recipientAddress,
+				CardInfoLabels.validatorAddress,
+				//MsgBeginRedelegate
+
+				CardInfoLabels.validatorSrcAddress,
+				CardInfoLabels.validatorDstAddress,
+				//MsgExec
+				CardInfoLabels.grantee,
+				//MsgCreateValidator
+				CardInfoLabels.validatorDescription,
+				CardInfoLabels.commissionRates,
+				CardInfoLabels.minSelfDelegation
+			])
+
 			const moreItems = sortArrayFollowValue(items, 'label', [
 				CardInfoLabels.gasLimit,
 				CardInfoLabels.maxFeePerGas,
@@ -324,12 +352,12 @@ export default function useConvertData({ data }: { data: TransactionDetail }) {
 				CardInfoLabels.rawInput
 			])
 			// console.log(mainItems, moreItems, items, data)
-			return [mainItems, moreItems]
+			return [mainItems, extraItems, moreItems]
 		},
 		[astraPrice]
 	)
 	if (!data) return [[], []]
 
-	const [mainItems, moreItems] = _convertRawDataToCardData(data)
-	return [mainItems, moreItems]
+	const [mainItems, extraItems, moreItems] = _convertRawDataToCardData(data)
+	return [mainItems, extraItems, moreItems]
 }