Merge pull request #1006 from oraichain/fix/tx-detail

Fix/tx detail
oraichain · Nov 17, 2024 · f25f707 · f25f707
2 parents 15d85ec + 803eacd
commit f25f707
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 71 deletions.
diff --git a/src/components/Tx/TxData/TxMessage/TxMessage.js b/src/components/Tx/TxData/TxMessage/TxMessage.js
@@ -1,4 +1,4 @@
-import React, { useMemo, useEffect, useState } from "react";
+import React, { useMemo, useEffect, useState, useRef } from "react";
 import { NavLink } from "react-router-dom";
 import { useSelector, useDispatch } from "react-redux";
 import ReactJson, { ValueItem } from "src/components/ReactJson";
@@ -37,10 +37,8 @@ import IBCProgress from "./IBCProgress";
 import { CW20_DECIMALS } from "@oraichain/oraidex-common/build/constant";
 import { toDisplay } from "@oraichain/oraidex-common/build/helper";
 import config from "src/config";
-import axios from "axios";
-const cx = cn.bind(styles);
 
-const rpcApi = config.RPC_API
+const cx = cn.bind(styles);
 
 const getTxTypeNew = (type, result = "", value) => {
 	const typeArr = type.split(".");
@@ -86,25 +84,19 @@ const TxMessage = ({ key, msg, data, ind }) => {
 	const activeThemeId = useSelector(state => state.activeThemeId);
 	const loadMoreValue = useSelector(state => state.txs.loadMore);
 	const { data: storeCodeData, loading: loadingStoreCode, error: storeCodeError, fetch: fetchStoreCode } = useGithubSource();
-	const [events, setEvents] = useState([])
+	const contentRefs = useRef([]);
+
+	const toggleCollapse = index => {
+		if (contentRefs.current[index]) {
+			const isHidden = contentRefs.current[index].style.display === "none";
+			contentRefs.current[index].style.display = isHidden ? "inline-table" : "none";
+		}
+	};
 
 	const value = msg;
 	let type = msg["@type"] || "";
 	const { memo } = data;
 
-	useEffect(() => {
-		async function fetchData() {
-			try {
-				const response = await axios.get(`${rpcApi}/tx?hash=0x${data.tx_hash}`);
-				const events = response?.data?.result?.tx_result?.events;
-				setEvents(events)
-			} catch (error) {
-				console.log(error);
-			}
-		}
-		fetchData();
-	}, []);
-
 	useEffect(() => {
 		if (type === txTypes.COSMOS_SDK.STORE_CODE || type === txTypes.COSMOS_SDK_NEW_VERSION.STORE_CODE) {
 			const loadStoreCode = async () => {
@@ -323,65 +315,37 @@ const TxMessage = ({ key, msg, data, ind }) => {
 			return !data ? null : getInfoPriceRow(label, data.value, denom);
 		};
 
-		const getRawLog = (data, value, index) => {
+		const getRawLog = (data, index) => {
 			let messageParse = data.messages;
-			console.log({
-				messageParse,
-				index,
-			});
 
 			if (!index) messageParse = [messageParse[0]];
 			else messageParse = messageParse.filter(msg => msg.msg_index === index);
 			return (
-				<InfoRow label='RawLog'>
+				<InfoRow label='Events'>
 					{!isLargeScreen ? (
 						<ReactJson
 							style={{ backgroundColor: "transparent" }}
 							name={false}
 							theme={activeThemeId === themeIds.DARK ? "monokai" : "rjv-default"}
 							displayObjectSize={false}
 							displayDataTypes={false}
-							collapsed={4}
-							src={messageParse}
+							collapsed={3}
+							src={data?.tx_result?.events}
 						/>
 					) : (
-						// messageParse.map((msg, key) => {
-						// 	const { events = [] } = msg || { events: [] };
-						// 	return (
-						// 		<div className={cx("message")}>
-						// 			<span className={cx("message-title")}>Event {key + 1}:</span>
-						// 			{events.map(event => (
-						// 				<div className={cx("event")}>
-						// 					<h2 className={cx("event-type")}>{event.type}</h2>
-						// 					<table className={cx("event-attribute")}>
-						// 						<tbody>
-						// 							{event.attributes?.map(attr => (
-						// 								<tr>
-						// 									<td>{attr.key}</td>
-						// 									<td>{ValueItem(attr.value)}</td>
-						// 								</tr>
-						// 							))}
-						// 						</tbody>
-						// 					</table>
-						// 				</div>
-						// 			))}
-						// 		</div>
-						// 	);
-						// })
-						events.map((event, key) => (
-							<div className={cx("message")} key={key}>
-								<span className={cx("message-title")}>Event {key + 1}:</span>
+						data?.tx_result?.events.map((event, ind) => (
+							<div className={cx("message")} key={ind}>
 								<div className={cx("event")}>
-									<h2 className={cx("event-type")}>{event.type}</h2>
-									<table className={cx("event-attribute")}>
-										<tbody>
-											{event.attributes?.map(attr => (
-												<tr>
-													<td>{attr.key}</td>
-													<td>{ValueItem(attr.value)}</td>
-												</tr>
-											))}
-										</tbody>
+									<h2 className={cx("event-type")} onClick={() => toggleCollapse(ind)}>
+										{ind + 1}. {event.type}
+									</h2>
+									<table className={cx("event-attribute")} style={{ display: "none" }} ref={el => (contentRefs.current[ind] = el)}>
+										{event.attributes?.map(attr => (
+											<tr>
+												<td>{attr.key}</td>
+												<td>{ValueItem(attr.value)}</td>
+											</tr>
+										))}
 									</table>
 								</div>
 							</div>
@@ -558,6 +522,7 @@ const TxMessage = ({ key, msg, data, ind }) => {
 
 		const getTotalTransfer = (label, msg) => {
 			const totalAmount = msg.reduce((acc, cur) => acc + +cur?.msg?.transfer?.amount ?? 0, 0);
+			if (!totalAmount) return null;
 			return (
 				<InfoRow label={label}>
 					<span className={cx("text")}>{_.isNil(totalAmount) ? "-" : formatOrai(totalAmount)}</span> <span className={cx("text")}>{}</span>

diff --git a/src/components/Tx/TxData/TxMessage/TxMessage.module.scss b/src/components/Tx/TxData/TxMessage/TxMessage.module.scss
@@ -245,7 +245,7 @@
 
 .event {
 	margin-bottom: 20px;
-
+	cursor: pointer;
 	&-type {
 		padding: 16px;
 		text-align: left;

diff --git a/src/components/Tx/TxData/TxMessage/TxMessageContent.js b/src/components/Tx/TxData/TxMessage/TxMessageContent.js
@@ -343,7 +343,7 @@ const TxMessageContent = ({
 						{getInfoRow("Label", value?.label)}
 						{getAddressRow("Sender", value?.sender, value?.sender_tag)}
 						{getCurrencyRowFromObject("Init funds", value?.init_funds ?? value?.funds)}
-						{/* <InfoRow label='Message'>
+						<InfoRow label='Message'>
 							<ReactJson
 								style={{ backgroundColor: "transparent" }}
 								name={false}
@@ -352,7 +352,7 @@ const TxMessageContent = ({
 								displayDataTypes={false}
 								src={tryParseMessage(value?.init_msg ?? value?.msg)}
 							/>
-						</InfoRow> */}
+						</InfoRow>
 						{getInfoRow("Contract Address", getContractAddress(data?.raw_log))}
 					</>
 				)}
@@ -368,7 +368,7 @@ const TxMessageContent = ({
 						{getPriceInfoFromRawData(wasmAttributes, "pnl", "Pnl", quote)}
 						{getPriceInfoFromRawData(wasmAttributes, "withdraw_amount", "Withdraw amount", quote)}
 						{getFundsRow("Sent funds", key, data?.messages?.[ind]?.sent_funds, data?.result, data?.amount)}
-						{/* <InfoRow label='Message'>
+						<InfoRow label='Message'>
 							<ReactJson
 								style={{ backgroundColor: "transparent" }}
 								name={false}
@@ -377,7 +377,7 @@ const TxMessageContent = ({
 								displayDataTypes={false}
 								src={tryParseMessage(value?.msg)}
 							/>
-						</InfoRow> */}
+						</InfoRow>
 						{getTransferRow("Transfer", key, data?.events, data?.result)}
 						{getMultiRoyaltyRow("Royalty", key, data?.raw_log, data?.result)}
 						{checkAttributeEvents(data?.raw_log, "send_packet") && getIBCProgressRow("IBC Progress", data)}
@@ -610,7 +610,7 @@ const TxMessageContent = ({
 						{getInfoRow("Code ID", value?.code_id)}
 						{getAddressRow("Contract", value?.contract)}
 						{getAddressRow("Sender", value?.sender)}
-						{/* <InfoRow label='Migrate Msg'>
+						<InfoRow label='Migrate Msg'>
 							<ReactJson
 								style={{ backgroundColor: "transparent" }}
 								name={false}
@@ -619,10 +619,10 @@ const TxMessageContent = ({
 								displayDataTypes={false}
 								src={value?.migrate_msg}
 							/>
-						</InfoRow> */}
+						</InfoRow>
 					</>
 				)}
-				{getRawLog(data, value, ind)}
+				{getRawLog(data, ind)}
 			</div>
 		</>
 	);

diff --git a/src/containers/Tx/useGetTx.js b/src/containers/Tx/useGetTx.js
@@ -69,7 +69,10 @@ const useGetTx = txHash => {
 				const getTxScan = async () => {
 					const tx = await getDataAsync(path);
 					if (tx?.data?.height && parseInt(tx?.data?.height) > 0) {
-						setData(tx?.data);
+						setData({
+							...tx?.data,
+							tx_result: txRpc?.data?.result?.tx_result,
+						});
 						setLoading(false);
 						return;
 					}