diff --git a/src/components/ReactJson/index.js b/src/components/ReactJson/index.js
index 2048f38a..e6d29085 100644
--- 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 => {
);
}
- } 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
index 5e293490..69bd13a6 100644
--- 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,6 +73,8 @@ 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);
@@ -80,10 +82,11 @@ 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 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 (
-
+ {!isLargeScreen ? (
+
+ ) : (
+ events.map(event => (
+
+
{event.type}
+
+
+ {event.attributes.map(attr => (
+
+ {attr.key} |
+ {ValueItem(attr.value)} |
+
+ ))}
+
+
+
+ ))
+ )}
);
}
@@ -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 (
{messageDetails}
diff --git a/src/components/Tx/TxData/TxMessage/TxMessage.module.scss b/src/components/Tx/TxData/TxMessage/TxMessage.module.scss
index a7fc382c..dd966f6f 100644
--- 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;
}
-}
\ No newline at end of file
+}
+
+.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;
+ }
+ }
+ }
+ }
+ }
+}