Develop

package.json

@@ -83,7 +83,7 @@
 		"react-hook-form": "^6.13.1",
 		"react-icons": "^4.3.1",
 		"react-input-range": "^1.3.0",
-		"react-json-view": "^1.21.3",
+		"react-json-tree": "^0.18.0",
 		"react-number-format": "^4.4.1",
 		"react-outside-click-handler": "^1.3.0",
 		"react-recaptcha-google": "^1.1.1",

src/components/ProposalDetails/DetailsCard/DetailsCard.js

@@ -6,7 +6,7 @@ import { useSelector } from "react-redux";
 import useMediaQuery from "@material-ui/core/useMediaQuery";
 import copy from "copy-to-clipboard";
 import Grid from "@material-ui/core/Grid";
-import ReactJson from "react-json-view";
+import ReactJson from "src/components/ReactJson";
 import _ from "lodash";
 import Interweave from "interweave";
 import { formatDateTime, formatOrai, isJsonString } from "src/helpers/helper";

src/components/Randomness/RandomnessView.js

@@ -1,29 +1,29 @@
 /* eslint-disable no-loop-func */
 /* eslint-disable no-undef */
 import * as React from "react";
-import {useState, useEffect, useRef} from "react";
-import {useDispatch, useSelector} from "react-redux";
-import {NavLink, useHistory} from "react-router-dom";
+import { useState, useEffect, useRef } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { NavLink, useHistory } from "react-router-dom";
 import PropTypes from "prop-types";
 import cn from "classnames/bind";
 import axios from "axios";
 import copy from "copy-to-clipboard";
-import {showAlert} from "src/store/modules/global";
-import {_} from "src/lib/scripts";
+import { showAlert } from "src/store/modules/global";
+import { _ } from "src/lib/scripts";
 import CopyIcon from "src/icons/CopyIcon";
 import InfoRow from "src/components/common/InfoRow";
 import consts from "src/constants/consts";
 import config from "src/config";
-import {generateRandomString} from "src/helpers/helper";
+import { generateRandomString } from "src/helpers/helper";
 import styles from "./Randomness.module.scss";
-import ReactJson from "react-json-view";
-import {themeIds} from "src/constants/themes";
-import {tryParseMessage} from "src/lib/scripts";
-import {Base64} from "js-base64";
+import ReactJson from "src/components/ReactJson";
+import { themeIds } from "src/constants/themes";
+import { tryParseMessage } from "src/lib/scripts";
+import { Base64 } from "js-base64";
 
 const cx = cn.bind(styles);
 
-const RandomnessView = ({data, errorMessage}) => {
+const RandomnessView = ({ data, errorMessage }) => {
 	const dispatch = useDispatch();
 	const history = useHistory();
 	const activeThemeId = useSelector(state => state.activeThemeId);
@@ -36,7 +36,7 @@ const RandomnessView = ({data, errorMessage}) => {
 
 	const handelGetTx = async () => {
 		try {
-			const {randomnessContractAddress} = config;
+			const { randomnessContractAddress } = config;
 			const apiGetTx = `${consts.LCD_API_BASE}${consts.LCD_API.TXS}?events=wasm.round%3D%27${data?.latest?.round}%27&events=wasm.contract_address%3D%27${randomnessContractAddress}%27&events=wasm.action%3D%27share_sig%27`;
 			const tx = await axios.get(apiGetTx);
 
@@ -60,10 +60,10 @@ const RandomnessView = ({data, errorMessage}) => {
 
 	const getVerified = async () => {
 		try {
-			const obj = {verify_round: data?.latest?.round};
+			const obj = { verify_round: data?.latest?.round };
 			let objJsonStr = JSON.stringify(obj);
 			const queryVerified = Base64.encode(objJsonStr);
-			const {randomnessContractAddress} = config;
+			const { randomnessContractAddress } = config;
 			const apiGetVerified = `${consts.LCD_API_BASE}${consts.LCD_API.WASM}/${randomnessContractAddress}/smart/${queryVerified}`;
 			const verified = await axios.get(apiGetVerified);
 			setVerify(verified.data?.data);
@@ -135,7 +135,7 @@ const RandomnessView = ({data, errorMessage}) => {
 			</InfoRow>
 			<InfoRow label='Signature shares'>
 				<ReactJson
-					style={{backgroundColor: "transparent", wordBreak: "break-all"}}
+					style={{ backgroundColor: "transparent", wordBreak: "break-all" }}
 					name={false}
 					theme={activeThemeId === themeIds.DARK ? "monokai" : "rjv-default"}
 					displayObjectSize={true}

src/components/ReactJson/ReactJson.module.scss

@@ -0,0 +1,5 @@
+.json-viewer {
+    ul {
+        background-color: transparent!important;
+    }
+}

src/components/ReactJson/index.js

@@ -0,0 +1,35 @@
+import React from "react";
+import { JSONTree } from "react-json-tree";
+import cn from "classnames/bind";
+import styles from "./ReactJson.module.scss";
+
+const cx = cn.bind(styles);
+
+const ReactJson = ({ style, name, theme, displayObjectSize, collapsed, displayDataTypes, src, sortKeys, quotesOnKeys }) => {
+	return (
+		<div className={cx("json-viewer")} style={style}>
+			<JSONTree
+				data={src}
+				hideRoot
+				theme={theme}
+				collectionLimit={displayObjectSize}
+				shouldExpandNodeInitially={(keyPath, data, level) => {
+					return !collapsed || level < collapsed;
+				}}
+				sortObjectKeys={sortKeys}
+				valueRenderer={(_, raw) => {
+					if (typeof raw === "string" && raw.match(/^https?:\/\//)) {
+						return (
+							<a target='_blank' href={raw}>
+								{raw}
+							</a>
+						);
+					}
+					return raw;
+				}}
+			/>
+		</div>
+	);
+};
+
+export default ReactJson;

src/components/SmartContract/MoreInfo.js

@@ -1,8 +1,8 @@
 import React from "react";
 import PropTypes from "prop-types";
 import cn from "classnames/bind";
-import {NavLink} from "react-router-dom";
-import {isNil} from "lodash";
+import { NavLink } from "react-router-dom";
+import { isNil } from "lodash";
 import Grid from "@material-ui/core/Grid";
 import Skeleton from "@material-ui/lab/Skeleton";
 import InfoRow from "src/components/common/InfoRow";
@@ -11,7 +11,7 @@ import consts from "src/constants/consts";
 
 const cx = cn.bind(styles);
 
-const MoreInfo = ({data}) => {
+const MoreInfo = ({ data }) => {
 	return (
 		<Grid item lg={6} xs={12}>
 			<div className={cx("more-info")}>

src/components/Tx/TxData/TxMessage/TxMessage.js

@@ -1,7 +1,7 @@
 import React, { useMemo, useEffect } from "react";
 import { NavLink } from "react-router-dom";
 import { useSelector, useDispatch } from "react-redux";
-import ReactJson from "react-json-view";
+import ReactJson from "src/components/ReactJson";
 import PropTypes from "prop-types";
 import cn from "classnames/bind";
 import { Fade, Tooltip } from "@material-ui/core";
@@ -33,7 +33,7 @@ import TxMessageContent from "./TxMessageContent";
 import copyIcon from "src/assets/common/copy_ic.svg";
 import styles from "./TxMessage.module.scss";
 import { tryParseMessage } from "src/lib/scripts";
-import IBCProgress from './IBCProgress'
+import IBCProgress from "./IBCProgress";
 const cx = cn.bind(styles);
 
 const getTxTypeNew = (type, result = "", value) => {
@@ -61,7 +61,7 @@ const tryParseMessageBinary = data => {
 			if (obj[key].msg && typeof obj[key].msg === "string") {
 				try {
 					obj[key].msg = JSON.parse(atob(obj[key].msg));
-				} catch { }
+				} catch {}
 			}
 		}
 		return obj;
@@ -258,12 +258,12 @@ const TxMessage = ({ key, msg, data, ind }) => {
 			</InfoRow>
 		);
 
-		const getRawLog = (rawLog) => {
+		const getRawLog = rawLog => {
 			let messageParse = [];
 			try {
-				messageParse = tryParseMessage(JSON.parse(rawLog))
+				messageParse = tryParseMessage(JSON.parse(rawLog));
 			} catch (error) {
-				messageParse = [{ error: rawLog }]
+				messageParse = [{ error: rawLog }];
 			} finally {
 				return (
 					<InfoRow label='RawLog'>
@@ -277,9 +277,8 @@ const TxMessage = ({ key, msg, data, ind }) => {
 							src={messageParse}
 						/>
 					</InfoRow>
-				)
+				);
 			}
-
 		};
 
 		const getInfoRowSummary = (label, value) => (
@@ -685,7 +684,7 @@ const TxMessage = ({ key, msg, data, ind }) => {
 		const processText = inputText => {
 			let output = [];
 			let json = inputText.split(" ");
-			json.forEach(function (item) {
+			json.forEach(function(item) {
 				output.push(
 					item
 						.replace(/\'/g, "")
@@ -717,7 +716,7 @@ const TxMessage = ({ key, msg, data, ind }) => {
 		const getFundsRow = (label, key = 0, rawLog = [], result = "", amount) => {
 			return (
 				<>
-					{Array.isArray(rawLog) && rawLog.length !== 0 && (amount.length < 2) && (
+					{Array.isArray(rawLog) && rawLog.length !== 0 && amount.length < 2 && (
 						<InfoRow isTransfer={true} label={label}>
 							<ThemedTable
 								headerCellStyles={getFundsHeaderRow()?.headerCellStyles}
@@ -727,7 +726,6 @@ const TxMessage = ({ key, msg, data, ind }) => {
 						</InfoRow>
 					)}
 				</>
-
 			);
 		};
 
@@ -780,8 +778,12 @@ const TxMessage = ({ key, msg, data, ind }) => {
 				const amountDataCell = (
 					<div className={cx("amount-data-cell")}>
 						<div className={cx("amount")}>
-							<span className={cx("amount-value")}>{item?.amount ? (denomCheck.status ? item?.amount / Math.pow(10, denomCheck?.decimal) : item?.amount / Math.pow(10, 6)) : "0"}</span>
-							<span className={cx("amount-denom")}>{reduceStringAssets(denomCheck.status ? denomCheck?.denom : item?.denom_name) || item?.denom || denomSplit?.[0]}</span>
+							<span className={cx("amount-value")}>
+								{item?.amount ? (denomCheck.status ? item?.amount / Math.pow(10, denomCheck?.decimal) : item?.amount / Math.pow(10, 6)) : "0"}
+							</span>
+							<span className={cx("amount-denom")}>
+								{reduceStringAssets(denomCheck.status ? denomCheck?.denom : item?.denom_name) || item?.denom || denomSplit?.[0]}
+							</span>
 						</div>
 					</div>
 				);
@@ -836,8 +838,8 @@ const TxMessage = ({ key, msg, data, ind }) => {
 				<InfoRow label={label}>
 					<IBCProgress dataTxs={data} />
 				</InfoRow>
-			)
-		}
+			);
+		};
 
 		return (
 			<>

src/components/Tx/TxData/TxMessage/TxMessageContent.js

@@ -1,5 +1,5 @@
 import React from "react";
-import ReactJson from "react-json-view";
+import ReactJson from "src/components/ReactJson";
 import InfoRow from "src/components/common/InfoRow";
 import { checkAttributeEvents, formatFloat } from "src/helpers/helper";
 import { tryParseMessage, compareTypeMessage } from "src/lib/scripts";

src/components/Wallet/NFTToken/NFTCard/NFTCard.js

@@ -0,0 +1,90 @@
+import React, { memo } from "react";
+import classNames from "classnames/bind";
+import { checkStatus } from "../NFTTable/NFTTable";
+import { NavLink } from "react-router-dom";
+import { _, reduceString, setAgoTime } from "src/lib/scripts";
+import { formatOrai } from "src/helpers/helper";
+import consts from "src/constants/consts";
+import styles from "./NFTCard.module.scss";
+
+const cx = classNames.bind(styles);
+
+const NFTCard = memo(({ data = [], address }) => {
+	if (!Array.isArray(data)) {
+		return <></>;
+	}
+	const reduceStringAdress = (title, value, toHref = "") => {
+		return (
+			<tr>
+				<td>
+					<div className={cx("item-title")}>{title}</div>
+				</td>
+				<td>
+					{value ? (
+						<div className={cx("address-data-cell")}>
+							<NavLink className={cx("address")} to={toHref}>
+								{reduceString(value, 6, 6)}
+							</NavLink>
+						</div>
+					) : (
+						<div className={cx("item-link")}>-</div>
+					)}
+				</td>
+			</tr>
+		);
+	};
+
+	return (
+		<div className='nftToken-card-list'>
+			{data.map(item => {
+				return (
+					<div className={cx("nftToken-card-list-item")} key={"nftToken-card-list-item-" + item?.id}>
+						<table>
+							<tbody>
+								{reduceStringAdress("TxHash", item?.tx_hash, `${consts.PATH.TXLIST}/${item.tx_hash}`)}
+								<tr>
+									<td>
+										<div className={cx("item-title")}>NFT ID</div>
+									</td>
+									<td>
+										<span className={cx("item-text")}>{item?.nft_id}</span>
+									</td>
+								</tr>
+								<tr>
+									<td>
+										<div className={cx("item-title")}>NFT Name </div>
+									</td>
+									<td>
+										<span className={cx("item-text")}>{item?.nft_name}</span>
+									</td>
+								</tr>
+								<tr>
+									<td>
+										<div className={cx("item-title")}>Creator Type</div>
+									</td>
+									<td>
+										<span className={cx("item-text")}>{item?.creator_type.toUpperCase()}</span>
+									</td>
+								</tr>
+								{reduceStringAdress("Creator", item?.creator, `${consts.PATH.TXLIST}/${item.creator}`)}
+								{reduceStringAdress("Contract address", item?.contract_address, `${consts.PATH.TXLIST}/${item.contract_address}`)}
+								{reduceStringAdress("Contract", item?.contract, `${consts.PATH.TXLIST}/${item.contract}`)}
+
+								<tr>
+									<td>
+										<div className={cx("item-title")}>Time</div>
+									</td>
+									<td>
+										<span className={cx("item-text")}>{setAgoTime(item?.timestamp)}</span>
+									</td>
+								</tr>
+							</tbody>
+						</table>
+					</div>
+				);
+			})}
+		</div>
+	);
+});
+
+export default NFTCard;