feat: decode inputdata

api/api_list.ts

@@ -16,6 +16,7 @@ const API_LIST = {
 	COSMOS_TRANSACTION: '/api/v1?module=transaction&action=getTxCosmosInfo&txhash=', // call axios
 
 	ABI: '/api/v1?module=contract&action=getabi&address=',
+	HASH_ABI: '/api/v1?module=transaction&action=getabibytxhash&txhash=',
 
 	VALIDATORS: 'http://128.199.238.171:8080/api/v1/validators',
 

components/Card/CardInfo/index.tsx

@@ -67,8 +67,8 @@ export default function CardInfo({
 }: CardInfoProps) {
 	const { isMobile: isSmallDevice } = useMobileLayout('small')
 	const { isMobile: isMediumDevice } = useMobileLayout('medium')
-	const _ellipsis = (text: string | number) =>
-		ellipseRightText(`${text}`, isSmallDevice ? 27 : isMediumDevice ? 45 : 80)
+	const _ellipsis = (text: string | number, cut = true): string =>
+		cut ? ellipseRightText(`${text}`, isSmallDevice ? 27 : isMediumDevice ? 45 : 150) : (text as string)
 
 	return (
 		<BackgroundCard
@@ -114,13 +114,14 @@ export default function CardInfo({
 									) : null}
 									{type === 'text' ? (
 										<span className="money money-sm contrast-color-100 word-break-all">
-											{_ellipsis(content.value)} {content.suffix && content.suffix}
+											{_ellipsis(content.value, responsive.ellipsis)}{' '}
+											{content.suffix && content.suffix}
 										</span>
 									) : null}
 									{type === 'copy' ? (
 										<CopyButton
-											textCopy={_ellipsis(content?.value as string)}
-											textTitle={_ellipsis(content?.value as string)}
+											textCopy={_ellipsis(content?.value as string, responsive.ellipsis)}
+											textTitle={_ellipsis(content?.value as string, responsive.ellipsis)}
 										/>
 									) : null}
 									{type === 'link' ? (
@@ -129,13 +130,13 @@ export default function CardInfo({
 											fontType="Titi"
 											fontSize="text-500"
 										>
-											{_ellipsis(content.value as string)}
+											{_ellipsis(content.value as string, responsive.ellipsis)}
 										</Typography.LinkText>
 									) : null}
 									{type === 'link-copy' ? (
 										<div className="block-center">
 											<Typography.LinkText href={content.link || ''}>
-												{_ellipsis(content.value as string)}
+												{_ellipsis(content.value as string, responsive.ellipsis)}
 											</Typography.LinkText>
 											<CopyButton textCopy={content.value as string} />
 										</div>

pages/tx/[tx].tsx

@@ -46,7 +46,7 @@ const TransactionDetailPage: React.FC<Props> = ({ data, evmHash, cosmosHash }: P
 				</div>
 				<CardInfo items={items} classes={['margin-top-sm']} />
 				{moreItems.length > 0 && <CardInfo items={moreItems} classes={['margin-top-sm']} />}
-				{data.rawInput && <DecodeInput dataInput={data.rawInput} address={data.to} />}
+				{data.rawInput && <DecodeInput dataInput={data.rawInput} address={data.to} evmHash={evmHash} />}
 				<TransactionTabs
 					evmHash={evmHash}
 					cosmosHash={cosmosHash}

types/address.d.ts

@@ -4,6 +4,14 @@ interface AbiResponse {
 	status: string
 }
 
+interface HashAbiResponse {
+	message: string
+	result: {
+		abi: any
+	}
+	status: string
+}
+
 interface AddressCounterResponse {
 	message: string
 	result: AddressCounterData

views/transactions/DecodeInput.tsx

@@ -17,28 +17,37 @@ export interface AbiItemDecode extends AbiItem {
 type DecodeInputProps = {
 	dataInput: string
 	address: string
+	evmHash?: string
 }
 
-export default function DecodeInput({ dataInput, address }: DecodeInputProps) {
+export default function DecodeInput({ dataInput, address, evmHash }: DecodeInputProps) {
 	if (!dataInput || !address) {
 		return null
 	}
 	const [load, setLoad] = useState(false)
 	const [items, setItems] = useState<LogElementProps[]>()
 
-	const getAbi = async (address: string): Promise<AbiItem[]> => {
-		const res = await evmApi.get<AbiResponse>(`${API_LIST.ABI}${address}`)
-		if (res.data.message === 'OK') {
-			return JSON.parse(res?.data?.result)
+	const getAbi = async (address: string): Promise<{ abi: AbiItem[]; hasAbi: boolean }> => {
+		const addressAbiRes = await evmApi.get<AbiResponse>(`${API_LIST.ABI}${address}`)
+		if (addressAbiRes.data.message === 'OK') {
+			return { abi: JSON.parse(addressAbiRes?.data?.result), hasAbi: true }
 		}
-		return undefined
+		// datainput from hash
+		if (evmHash) {
+			const hashAbiRes = await evmApi.get<HashAbiResponse>(`${API_LIST.HASH_ABI}${evmHash}`)
+			if (hashAbiRes.data.message === 'OK') {
+				return { abi: [hashAbiRes?.data?.result?.abi], hasAbi: false }
+			}
+		}
+
+		return { abi: undefined, hasAbi: false }
 	}
 
 	useEffect(() => {
 		async function data() {
 			if (!isEmpty(dataInput)) {
 				const items: LogElementProps[] = []
-				const abi = await getAbi(address)
+				const { abi, hasAbi } = await getAbi(address)
 				const item: LogElementProps = {
 					address: address,
 					data: '',
@@ -48,11 +57,14 @@ export default function DecodeInput({ dataInput, address }: DecodeInputProps) {
 				}
 				items.push(item)
 				item.methodId = evmMethodId(dataInput)
+
+				item.verified = hasAbi
+				item.useDraftAbiToDecode = !hasAbi && !!abi
+
 				if (Array.isArray(abi)) {
-					item.verified = true
 					abiDecoder.addABI(abi)
-					const logObj = abiDecoder.decodeMethod(dataInput) as AbiItemDecode
-					const name = logObj.name
+					const inputObj = abiDecoder.decodeMethod(dataInput) as AbiItemDecode
+					const name = inputObj.name
 					const interfaceItem = abi.find(item => item.name === name)
 					const params = interfaceItem.inputs
 					const call = `${interfaceItem.name}(${interfaceItem.inputs
@@ -61,12 +73,12 @@ export default function DecodeInput({ dataInput, address }: DecodeInputProps) {
 					item.call = call
 					item.callRow = call
 					for (let para of params) {
-						const input = logObj?.params.find(input => input.name === para.name)
+						const input = inputObj?.params.find(input => input.name === para.name)
 						if (input) {
 							input.indexed = para.indexed
 						}
 					}
-					item.methodParams = logObj.params
+					item.methodParams = inputObj.params
 				}
 				setItems(items)
 			}

views/transactions/LogItem.tsx

@@ -18,6 +18,7 @@ export type LogElementProps = {
 	index: string
 	borderTop?: boolean
 	showLeftBorder?: boolean
+	useDraftAbiToDecode?: boolean
 }
 
 export default function LogElement({
@@ -32,26 +33,35 @@ export default function LogElement({
 	borderTop,
 	callRow,
 	showAddress = true,
-	showLeftBorder = true
+	showLeftBorder = true,
+	useDraftAbiToDecode
 }: LogElementProps) {
 	let items: CardRowItem[] = []
 	if (address && showAddress) {
 		items.push({
 			label: 'Address:',
 			type: 'text',
-			contents: [{ value: address }]
+			contents: [{ value: address }],
+			responsive: {
+				ellipsis: false,
+				wrap: 'sm'
+			}
 		})
 	}
 	if (callRow) {
 		items.push({
 			label: '',
 			type: 'text',
-			contents: [{ value: callRow }]
+			contents: [{ value: callRow }],
+			responsive: {
+				ellipsis: false,
+				wrap: 'sm'
+			}
 		})
 	}
 
 	let topElement: React.ReactNode = null
-	if (verified) {
+	if (verified || useDraftAbiToDecode) {
 		items.push({
 			label: 'Decode:',
 			type: 'decode',
@@ -65,13 +75,20 @@ export default function LogElement({
 				}
 			]
 		})
-	} else {
+	}
+	if (useDraftAbiToDecode || !verified) {
 		topElement = (
-			<div className="padding-left-2xl padding-right-2xl">
-				<div className={clsx(styles.verifyContract, 'contrast-color-100')}>
+			<div className="padding-left-2xl padding-right-2xl sm-padding-left-md sm-padding-right-md">
+				<div
+					className={clsx(
+						styles.verifyContract,
+						'contrast-color-100',
+						'padding-top-sm padding-bottom-sm padding-left-xs padding-right-xs'
+					)}
+				>
 					To see accurate decoded input data, the contract must be verified. Verify the contract{' '}
 					<Link href={LinkMaker.address(address, '/verify')}>
-						<a className="link padding-left-xs"> here</a>
+						<a className="link"> here</a>
 					</Link>
 					.
 				</div>
@@ -86,19 +103,27 @@ export default function LogElement({
 		items.push({
 			label: label,
 			type: 'text',
-			contents: [{ value: `[${idx}] ${topics[idx]}` }]
+			contents: [{ value: `[${idx}] ${topics[idx]}` }],
+			responsive: {
+				ellipsis: false,
+				wrap: 'sm'
+			}
 		})
 	}
 	if (data) {
 		items.push({
-			label: 'Data',
+			label: 'Data:',
 			type: 'text',
-			contents: [{ value: data }]
+			contents: [{ value: data }],
+			responsive: {
+				ellipsis: false,
+				wrap: 'sm'
+			}
 		})
 	}
 	if (index) {
 		items.push({
-			label: 'Log Index',
+			label: 'Log Index:',
 			type: 'text',
 			contents: [{ value: index }]
 		})

views/transactions/style.module.scss

@@ -34,10 +34,6 @@
 	}
 }
 .verifyContract {
-	display: flex;
-	align-items: center;
-	padding: 6px 16px;
-	min-height: 48px;
 	background: rgba(255, 200, 42, 0.16);
 	border: 1px solid rgba(255, 200, 42, 0.1);
 	border-radius: 8px;