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; + } + } + } + } + } +}