Merge branch 'feat/show_raw_data_to_table' into develop

oraichain · Dec 20, 2023 · 9ce8d2c · 9ce8d2c
2 parents 78358fd + b96686e
commit 9ce8d2c
Show file tree

Hide file tree

Showing 3 changed files with 121 additions and 25 deletions.
diff --git a/src/components/ReactJson/index.js b/src/components/ReactJson/index.js
@@ -6,7 +6,22 @@ import styles from "./ReactJson.module.scss";
 
 const cx = cn.bind(styles);
 
-const ValueItem = raw => {
+export const formatAmountWithCurrency = inputString => {
+	const matches = inputString.match(/^(\d+)(.*)$/);
+
+	if (matches) {
+		const numberPart = matches[1];
+		const unitPart = matches[2];
+
+		const resultString = numberPart + " " + unitPart;
+
+		return resultString;
+	} else {
+		return inputString;
+	}
+};
+
+export const ValueItem = raw => {
 	if (typeof raw === "string") {
 		if (raw.match(/^https?:\/\//)) {
 			return (
@@ -25,7 +40,9 @@ const ValueItem = raw => {
 					</a>
 				);
 			}
-		} catch {}
+		} catch {
+			return formatAmountWithCurrency(raw);
+		}
 	}
 	return raw;
 };

diff --git a/src/components/Tx/TxData/TxMessage/TxMessage.js b/src/components/Tx/TxData/TxMessage/TxMessage.js
@@ -1,10 +1,10 @@
 import React, { useMemo, useEffect } from "react";
 import { NavLink } from "react-router-dom";
 import { useSelector, useDispatch } from "react-redux";
-import ReactJson from "src/components/ReactJson";
+import ReactJson, { ValueItem } from "src/components/ReactJson";
 import PropTypes from "prop-types";
 import cn from "classnames/bind";
-import { Fade, Tooltip } from "@material-ui/core";
+import { Fade, Tooltip, useMediaQuery, useTheme } from "@material-ui/core";
 import Skeleton from "@material-ui/lab/Skeleton";
 import Accordion from "@material-ui/core/Accordion";
 import AccordionSummary from "@material-ui/core/AccordionSummary";
@@ -73,17 +73,20 @@ const tryParseMessageBinary = data => {
 };
 
 const TxMessage = ({ key, msg, data, ind }) => {
+	const theme = useTheme();
+	const isLargeScreen = useMediaQuery(theme.breakpoints.up("md"));
 	const dispatch = useDispatch();
 	const fees = useSelector(state => state.blockchain.fees);
 	const status = useSelector(state => state.blockchain.status);
 	const storageData = useSelector(state => state.contact);
 	const activeThemeId = useSelector(state => state.activeThemeId);
 	const loadMoreValue = useSelector(state => state.txs.loadMore);
 	const { data: storeCodeData, loading: loadingStoreCode, error: storeCodeError, fetch: fetchStoreCode } = useGithubSource();
-	const value = msg;
 
+	const value = msg;
 	let type = msg["@type"] || "";
 	const { memo } = data;
+
 	useEffect(() => {
 		if (type === txTypes.COSMOS_SDK.STORE_CODE || type === txTypes.COSMOS_SDK_NEW_VERSION.STORE_CODE) {
 			const loadStoreCode = async () => {
@@ -309,17 +312,36 @@ const TxMessage = ({ key, msg, data, ind }) => {
 			} catch (error) {
 				messageParse = [{ error: rawLog }];
 			} finally {
+				const { events } = messageParse?.[0] || [];
 				return (
 					<InfoRow label='RawLog'>
-						<ReactJson
-							style={{ backgroundColor: "transparent" }}
-							name={false}
-							theme={activeThemeId === themeIds.DARK ? "monokai" : "rjv-default"}
-							displayObjectSize={false}
-							displayDataTypes={false}
-							collapsed={4}
-							src={messageParse}
-						/>
+						{!isLargeScreen ? (
+							<ReactJson
+								style={{ backgroundColor: "transparent" }}
+								name={false}
+								theme={activeThemeId === themeIds.DARK ? "monokai" : "rjv-default"}
+								displayObjectSize={false}
+								displayDataTypes={false}
+								collapsed={4}
+								src={messageParse}
+							/>
+						) : (
+							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>
+							))
+						)}
 					</InfoRow>
 				);
 			}
@@ -927,7 +949,7 @@ const TxMessage = ({ key, msg, data, ind }) => {
 				/>
 			</>
 		);
-	}, [type, value, storageData, activeThemeId, loadingStoreCode, status, storeCodeData, storeCodeError, memo, dispatch, data, loadMoreValue]);
+	}, [type, value, storageData, activeThemeId, loadingStoreCode, status, storeCodeData, storeCodeError, memo, dispatch, data, loadMoreValue, isLargeScreen]);
 	return (
 		<div className={cx("card")}>
 			<div>{messageDetails}</div>

diff --git a/src/components/Tx/TxData/TxMessage/TxMessage.module.scss b/src/components/Tx/TxData/TxMessage/TxMessage.module.scss
@@ -2,7 +2,7 @@
 
 .header-cell {
 	color: var(--common-headerTextColor);
-	font-family: 'IBM Plex Sans';
+	font-family: "IBM Plex Sans";
 	font-style: normal;
 	font-weight: bold;
 	font-size: 14px;
@@ -11,7 +11,7 @@
 
 .address-data-cell {
 	color: var(--common-linkColor);
-	font-family: 'IBM Plex Sans';
+	font-family: "IBM Plex Sans";
 	font-style: normal;
 	font-weight: normal;
 	font-size: 14px;
@@ -20,7 +20,7 @@
 
 .amount-data-cell {
 	.amount {
-		font-family: 'IBM Plex Sans';
+		font-family: "IBM Plex Sans";
 		font-style: normal;
 		font-weight: normal;
 		font-size: 14px;
@@ -54,7 +54,7 @@
 		align-items: center;
 		padding: 8px 16px;
 		border-bottom: 1px solid var(--common-borderColor);
-		font-family: 'IBM Plex Sans';
+		font-family: "IBM Plex Sans";
 		font-style: normal;
 		font-weight: normal;
 		font-size: 16px;
@@ -81,7 +81,7 @@
 .title {
 	display: inline-block;
 	color: #00fff0;
-	font-family: 'IBM Plex Sans';
+	font-family: "IBM Plex Sans";
 	font-style: normal;
 	font-weight: normal;
 	font-size: 16px;
@@ -93,7 +93,7 @@
 	flex-direction: row;
 	justify-content: flex-start;
 	align-items: center;
-	font-family: 'IBM Plex Sans';
+	font-family: "IBM Plex Sans";
 	font-style: normal;
 	font-weight: normal;
 	font-size: 16px;
@@ -120,7 +120,7 @@
 
 .text {
 	color: var(--common-textColor);
-	font-family: 'IBM Plex Sans';
+	font-family: "IBM Plex Sans";
 	font-style: normal;
 	font-weight: normal;
 	font-size: 16px;
@@ -129,7 +129,7 @@
 
 .text-three-dots {
 	color: var(--common-textColor);
-	font-family: 'IBM Plex Sans';
+	font-family: "IBM Plex Sans";
 	font-style: normal;
 	font-weight: normal;
 	font-size: 16px;
@@ -219,9 +219,66 @@
 		border: 1px solid var(--common-activeTabColor);
 		box-sizing: border-box;
 		border-radius: 4px;
-		font-family: 'IBM Plex Sans';
+		font-family: "IBM Plex Sans";
 		font-style: normal;
 		font-weight: normal;
 		font-size: 13px;
 	}
-}
+}
+
+.event {
+	margin-bottom: 20px;
+
+	&-type {
+		padding: 16px;
+		text-align: left;
+		font-weight: bold;
+		line-height: 150%;
+		vertical-align: inherit;
+		background: var(--common-themedTable-headerBackgroundColor);
+		border: 1px solid var(--common-themedTable-tableBorderColor);
+		color: var(--common-textColor);
+		border-top-left-radius: 8px;
+		border-top-right-radius: 8px;
+	}
+	&-attribute {
+		width: 100%;
+
+		tr {
+			td {
+				color: var(--common-textColor);
+				display: table-cell;
+				padding: 16px;
+				text-align: left;
+				font-weight: 400;
+				line-height: 150%;
+				vertical-align: inherit;
+				border: 1px solid var(--common-themedTable-tableBorderColor);
+
+				&:nth-child(odd) {
+					background: var(--common-themedTable-oddRowBackgroundColor);
+				}
+
+				&:nth-child(even) {
+					background: var(--common-themedTable-evenRowBackgroundColor);
+				}
+
+				a {
+					color: var(--common-linkColor);
+				}
+			}
+
+			&:last-of-type {
+				td {
+					&:first-of-type {
+						border-bottom-left-radius: 8px;
+					}
+
+					&:last-of-type {
+						border-bottom-right-radius: 8px;
+					}
+				}
+			}
+		}
+	}
+}