diff --git a/package.json b/package.json index 1cb3d444a..a586a20f5 100644 --- a/package.json +++ b/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", diff --git a/src/components/ProposalDetails/DetailsCard/DetailsCard.js b/src/components/ProposalDetails/DetailsCard/DetailsCard.js index 3d70105b6..f7bd65ad2 100644 --- a/src/components/ProposalDetails/DetailsCard/DetailsCard.js +++ b/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"; diff --git a/src/components/Randomness/RandomnessView.js b/src/components/Randomness/RandomnessView.js index ad7be5ea3..f25f166dc 100644 --- a/src/components/Randomness/RandomnessView.js +++ b/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}) => { { + return ( +
+ { + return !collapsed || level < collapsed; + }} + sortObjectKeys={sortKeys} + valueRenderer={(_, raw) => { + if (typeof raw === "string" && raw.match(/^https?:\/\//)) { + return ( + + {raw} + + ); + } + return raw; + }} + /> +
+ ); +}; + +export default ReactJson; diff --git a/src/components/SmartContract/MoreInfo.js b/src/components/SmartContract/MoreInfo.js index 41a0e36d9..8c757f47a 100644 --- a/src/components/SmartContract/MoreInfo.js +++ b/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 (
diff --git a/src/components/Tx/TxData/TxMessage/TxMessage.js b/src/components/Tx/TxData/TxMessage/TxMessage.js index 99845ca0d..1c62e8e70 100644 --- a/src/components/Tx/TxData/TxMessage/TxMessage.js +++ b/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 }) => { ); - 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 ( @@ -277,9 +277,8 @@ const TxMessage = ({ key, msg, data, ind }) => { src={messageParse} /> - ) + ); } - }; 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 && ( { )} - ); }; @@ -780,8 +778,12 @@ const TxMessage = ({ key, msg, data, ind }) => { const amountDataCell = (
- {item?.amount ? (denomCheck.status ? item?.amount / Math.pow(10, denomCheck?.decimal) : item?.amount / Math.pow(10, 6)) : "0"} - {reduceStringAssets(denomCheck.status ? denomCheck?.denom : item?.denom_name) || item?.denom || denomSplit?.[0]} + + {item?.amount ? (denomCheck.status ? item?.amount / Math.pow(10, denomCheck?.decimal) : item?.amount / Math.pow(10, 6)) : "0"} + + + {reduceStringAssets(denomCheck.status ? denomCheck?.denom : item?.denom_name) || item?.denom || denomSplit?.[0]} +
); @@ -836,8 +838,8 @@ const TxMessage = ({ key, msg, data, ind }) => { - ) - } + ); + }; return ( <> diff --git a/src/components/Tx/TxData/TxMessage/TxMessageContent.js b/src/components/Tx/TxData/TxMessage/TxMessageContent.js index a38507d77..94a04a3b8 100644 --- a/src/components/Tx/TxData/TxMessage/TxMessageContent.js +++ b/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"; diff --git a/src/components/Wallet/NFTToken/NFTCard/NFTCard.js b/src/components/Wallet/NFTToken/NFTCard/NFTCard.js new file mode 100644 index 000000000..fa5de7153 --- /dev/null +++ b/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 ( + + +
{title}
+ + + {value ? ( +
+ + {reduceString(value, 6, 6)} + +
+ ) : ( +
-
+ )} + + + ); + }; + + return ( +
+ {data.map(item => { + return ( +
+ + + {reduceStringAdress("TxHash", item?.tx_hash, `${consts.PATH.TXLIST}/${item.tx_hash}`)} + + + + + + + + + + + + + {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}`)} + + + + + + +
+
NFT ID
+ 		+ {item?.nft_id} +
+
NFT Name
+ 		+ {item?.nft_name} +
+
Creator Type
+ 		+ {item?.creator_type.toUpperCase()} +
+
Time
+ 		+ {setAgoTime(item?.timestamp)} +
+
+ ); + })} +
+ ); +}); + +export default NFTCard; diff --git a/src/components/Wallet/NFTToken/NFTCard/NFTCard.module.scss b/src/components/Wallet/NFTToken/NFTCard/NFTCard.module.scss new file mode 100644 index 000000000..ccd9ffa05 --- /dev/null +++ b/src/components/Wallet/NFTToken/NFTCard/NFTCard.module.scss @@ -0,0 +1,80 @@ +@import "src/styles/utils"; + +.nftToken-card-list { + &-item { + padding: 15px; + margin-bottom: 15px; + background-color: var(--common-containerBackgroundColor); + box-shadow: 0px 2px 8px var(--common-boxShadowColor); + border-radius: 8px; + + table { + width: 100%; + tr { + td { + padding-bottom: 15px; + } + + td:nth-child(1) { + text-align: left; + width: 40%; + } + td:nth-child(2) { + text-align: right; + width: 60%; + } + } + } + + .item-title { + color: var(--common-textColor); + font-family: 'IBM Plex Sans'; + font-style: normal; + font-weight: 500; + font-size: 16px; + line-height: 150%; + } + + .item-text { + color: var(--common-textColor); + font-family: 'IBM Plex Sans'; + font-style: normal; + font-weight: normal; + font-size: 16px; + line-height: 150%; + } + + .item-link { + color: var(--common-linkColor); + font-family: 'IBM Plex Sans'; + font-style: normal; + font-weight: normal; + font-size: 16px; + line-height: 150%; + } + + .item-status { + width: 50px; + } + + .address-data-cell { + display: flex; + flex-direction: row; + justify-content: flex-end; + align-items: center; + + &-with-owner-badge { + justify-content: space-between; + } + + .address { + color: var(--common-linkColor); + font-family: 'IBM Plex Sans'; + font-style: normal; + font-weight: normal; + font-size: 16px; + line-height: 150%; + } + } + } +} diff --git a/src/components/Wallet/NFTToken/NFTCard/NFTCardSkeleton.js b/src/components/Wallet/NFTToken/NFTCard/NFTCardSkeleton.js new file mode 100644 index 000000000..7ae70a079 --- /dev/null +++ b/src/components/Wallet/NFTToken/NFTCard/NFTCardSkeleton.js @@ -0,0 +1,46 @@ +import React, { memo } from "react"; +import Skeleton from "@material-ui/lab/Skeleton"; +import classNames from "classnames/bind"; +import styles from "./NFTCard.module.scss"; + +const CwCardSkeleton = memo(({ rows = 10 }) => { + const cx = classNames.bind(styles); + let CwCardSkeletonItems = []; + const dataSource = [ + { title: "TxHash" }, + { title: "NFT ID" }, + { title: "NFT Name" }, + { title: "Creator Type" }, + { title: "Creator" }, + { title: "Contract address" }, + { title: "Contract" }, + { title: "Time" }, + ]; + + for (let i = 1; i <= rows; i++) { + CwCardSkeletonItems.push( +
+ + + {dataSource.map(({ title }) => { + return ( + + + + + )})} + + +
+
{title}
+ 		+ +
+
+ ); + } + + return
{CwCardSkeletonItems}
; +}); + +export default CwCardSkeleton; diff --git a/src/components/Wallet/NFTToken/NFTCard/index.js b/src/components/Wallet/NFTToken/NFTCard/index.js new file mode 100644 index 000000000..25e7c7b31 --- /dev/null +++ b/src/components/Wallet/NFTToken/NFTCard/index.js @@ -0,0 +1 @@ +export { default } from "./NFTCard"; diff --git a/src/components/Wallet/NFTToken/NFTTable/NFTTable.js b/src/components/Wallet/NFTToken/NFTTable/NFTTable.js new file mode 100644 index 000000000..52394c880 --- /dev/null +++ b/src/components/Wallet/NFTToken/NFTTable/NFTTable.js @@ -0,0 +1,115 @@ +import React, { memo, useMemo } from "react"; +import classNames from "classnames/bind"; +import { NavLink } from "react-router-dom"; +import consts from "src/constants/consts"; +import { _, reduceString, setAgoTime } from "src/lib/scripts"; +import { formatOrai } from "src/helpers/helper"; +import { tableThemes } from "src/constants/tableThemes"; +import ThemedTable from "src/components/common/ThemedTable"; +import styles from "./NFTTable.module.scss"; +import { string } from "prop-types"; + +const cx = classNames.bind(styles); + +export const getHeaderRow = () => { + const txHashHeaderCell =
TxHash
; + const contractAddrHeaderCell =
Contract address
; + const contractHeaderCell =
Contract
; + const creatorHeaderCell =
Creator
; + const creatorTypeHeaderCell =
Creator Type
; + const nftNameHeaderCell =
NFT Name
; + const nftIDHeaderCell =
NFT ID
; + const timeHeaderCell =
Time
; + + let headerCells = [ + txHashHeaderCell, + nftIDHeaderCell, + nftNameHeaderCell, + creatorTypeHeaderCell, + creatorHeaderCell, + contractAddrHeaderCell, + contractHeaderCell, + timeHeaderCell, + ]; + let headerCellStyles = [ + { width: "14%", minWidth: "180px" }, // TxHash + { width: "8%", minWidth: "80px" }, // NFT ID + { width: "14%", minWidth: "120px" }, // NFT Name + { width: "12%", minWidth: "120px" }, // Creator type + { width: "14%", minWidth: "180px" }, // Creator + { width: "14%", minWidth: "180px" }, // Contract address + { width: "14%", minWidth: "180px" }, // Contract + { width: "12%", minWidth: "120px" }, // Time + ]; + + return { + headerCells, + headerCellStyles, + }; +}; + +const reduceStringAdress = (value, toHref = "", isStyle, rawString = false) => { + const result = _.isNil(value) ? ( +
-
+ ) : ( + + {isStyle === 1 ?
{rawString ? value : reduceString(value, 6, 6)}
: rawString ? value : reduceString(value, 6, 6)} + + ); + return result; +}; + +const NFTTable = memo(({ data = [], address }) => { + const getDataRows = data => { + if (!Array.isArray(data)) { + return []; + } + + return data.map(item => { + const txHashDataCell = reduceStringAdress(item?.tx_hash, `${consts.PATH.TXLIST}/${item.tx_hash}`); + + const contractAddrDataCell = reduceStringAdress(item?.contract_address, `${consts.PATH.ACCOUNT}/${item?.contract_address}`); + const contractDataCell = reduceStringAdress(item?.contract, `${consts.PATH.ACCOUNT}/${item?.contract}`); + const creatorDataCell = reduceStringAdress(item?.creator, `${consts.PATH.ACCOUNT}/${item?.creator}`); + + const creatorTypeDataCell = _.isNil(item?.creator_type) ? ( +
-
+ ) : ( +
+ {item.creator_type.toUpperCase()} +
+ ); + + const nftNameDataCell = _.isNil(item?.nft_name) ? ( +
-
+ ) : ( +
+ {item.nft_name} +
+ ); + + const nftIDDataCell = _.isNil(item?.nft_id) ? ( +
-
+ ) : ( +
+ {item.nft_id} +
+ ); + + const timeDataCell = _.isNil(item?.timestamp) ? ( +
-
+ ) : ( +
{setAgoTime(item.timestamp)}
+ ); + + return [txHashDataCell, nftIDDataCell, nftNameDataCell, creatorTypeDataCell, creatorDataCell, contractAddrDataCell, contractDataCell, timeDataCell]; + }); + }; + + const headerRow = useMemo(() => getHeaderRow(), []); + const dataRows = useMemo(() => getDataRows(data), [data, getDataRows]); + + return ; +}); + +export default NFTTable; diff --git a/src/components/Wallet/NFTToken/NFTTable/NFTTable.module.scss b/src/components/Wallet/NFTToken/NFTTable/NFTTable.module.scss new file mode 100644 index 000000000..a0612e27b --- /dev/null +++ b/src/components/Wallet/NFTToken/NFTTable/NFTTable.module.scss @@ -0,0 +1,139 @@ +@import "src/styles/utils"; +.align-left { + text-align: left; +} + +.align-right { + text-align: right; +} + +.align-center { + text-align: center; +} + +.header-cell { + color: var(--common-textColor); + font-family: 'IBM Plex Sans'; + font-style: normal; + font-weight: bold; + font-size: 14px; + line-height: 150%; +} + +.skeleton-data-cell { + box-sizing: border-box; + height: 32px; +} + +.sm-contract-data-cell { + color: var(--common-linkColor); + font-family: 'IBM Plex Sans'; + font-style: normal; + font-weight: normal; + font-size: 14px; + line-height: 150%; +} + +.type-data-cell { + display: flex; + flex-direction: row; + justify-content: flex-start; + align-items: center; + + .first-message-type { + padding: 6px 10px; + margin-right: 5px; + border: 1px solid #5f51ff; + box-sizing: border-box; + border-radius: 4px; + color: #5f51ff; + font-family: 'IBM Plex Sans'; + font-style: normal; + font-weight: normal; + font-size: 12px; + line-height: 150%; + } + + .number-of-message { + color: #5f51ff; + font-family: 'IBM Plex Sans'; + font-style: normal; + font-weight: normal; + font-size: 12px; + line-height: 150%; + } +} + +.result-data-cell { + display: flex; + flex-direction: row; + justify-content: center; + + img { + margin-right: 9px; + } +} + +.amount-data-cell { + display: flex; + flex-direction: row; + justify-content: flex-end; + + p { + margin-right: 8px; + } + + span:nth-child(1) { + padding-right: 4px; + } + + span:nth-child(2) { + text-transform: uppercase; + } +} + +.fee-data-cell { + span:nth-child(1) { + padding-right: 4px; + } + + span:nth-child(2) { + text-transform: uppercase; + } +} + +.time-data-cell, +.height-data-cell { + display: block; + color: var(--common-textColor); + font-family: 'IBM Plex Sans'; + font-style: normal; + font-weight: normal; + font-size: 14px; + line-height: 150%; +} + +.transfer-status { + display: block; + min-width: 40px; + text-align: center; + padding: 7px; + border-radius: 4px; + font-family: "IBM Plex Sans"; + font-style: normal; + font-weight: bold; + font-size: 11px; + line-height: 150%; + + &-in { + background: var(--common-transactions-amountTransactionBackgroundInColor); + color: var(--common-transactions-amountTransactionTextInColor); + border: 1px solid var(--common-transactions-amountTransactionLabelInColor); + } + + &-out { + background: var(--common-transactions-amountTransactionBackgroundOutColor); + color: var(--common-transactions-amountTransactionTextOutColor); + border: 1px solid var(--common-transactions-amountTransactionLabelOutColor); + } +} diff --git a/src/components/Wallet/NFTToken/NFTTable/NFTTableSkeleton.js b/src/components/Wallet/NFTToken/NFTTable/NFTTableSkeleton.js new file mode 100644 index 000000000..1ac0c3054 --- /dev/null +++ b/src/components/Wallet/NFTToken/NFTTable/NFTTableSkeleton.js @@ -0,0 +1,65 @@ +import React, {memo, useMemo} from "react"; +import Skeleton from "@material-ui/lab/Skeleton"; +import classNames from "classnames/bind"; +import {tableThemes} from "src/constants/tableThemes"; +import ThemedTable from "src/components/common/ThemedTable"; +import {getHeaderRow} from "./NFTTable"; +import styles from "./NFTTable.module.scss"; + +const NFTTableSkeleton = memo(({rows = 10}) => { + const cx = classNames.bind(styles); + const getDataRows = rows => { + let dataRows = []; + for (let i = 1; i <= rows; i++) { + const txHashDataCell = ( +
+ +
+ ); + + const ageDataCell = ( +
+ +
+ ); + + const fromDataCell = ( +
+ +
+ ); + + const statusDataCell = ( +
+ +
+ ); + + const toDataCell = ( +
+ +
+ ); + + const valueDataCell = ( +
+ +
+ ); + const tokenDataCell = ( +
+ +
+ ); + dataRows.push([txHashDataCell, ageDataCell, fromDataCell, statusDataCell, toDataCell, valueDataCell, tokenDataCell]); + } + return dataRows; + }; + + const headerRow = useMemo(() => getHeaderRow(), []); + const dataRows = useMemo(() => getDataRows(rows), [rows]); + + return ; +}); + +export default NFTTableSkeleton; diff --git a/src/components/Wallet/NFTToken/NFTTable/index.js b/src/components/Wallet/NFTToken/NFTTable/index.js new file mode 100644 index 000000000..d3bf319e9 --- /dev/null +++ b/src/components/Wallet/NFTToken/NFTTable/index.js @@ -0,0 +1 @@ +export { default } from "./NFTTable"; \ No newline at end of file diff --git a/src/components/Wallet/NFTToken/NFTToken.js b/src/components/Wallet/NFTToken/NFTToken.js new file mode 100644 index 000000000..fad18515f --- /dev/null +++ b/src/components/Wallet/NFTToken/NFTToken.js @@ -0,0 +1,89 @@ +import React, { memo, useEffect, useState } from "react"; +import { useGet } from "restful-react"; +import { useTheme } from "@material-ui/core/styles"; +import useMediaQuery from "@material-ui/core/useMediaQuery"; +import classNames from "classnames/bind"; +import Pagination from "src/components/common/Pagination"; +import NoResult from "src/components/common/NoResult"; +import NFTTable from "./NFTTable"; +import NFTTableSkeleton from "./NFTTable/NFTTableSkeleton"; +import NFTCardSkeleton from "./NFTCard/NFTCardSkeleton"; +import { getListNFTToken, getListOWContract } from "src/lib/api"; +import NFTCard from "./NFTCard"; +import styles from "./NFTToken.module.scss"; +import { NavLink } from "react-router-dom"; +import consts from "src/constants/consts"; +import { typeExport } from "src/containers/Account/Account"; + +const cx = classNames.bind(styles); + +const NFTToken = memo(({ account = "", address = "", isOw20 = false }) => { + const theme = useTheme(); + const isLargeScreen = useMediaQuery(theme.breakpoints.up("lg")); + const [dataCw, setDataCw] = useState({ + data: [], + page: { + limit: 10, + page_id: 1, + }, + }); + const { data, page } = dataCw; + const [path, setPath] = useState(() => { + if (!isOw20) { + return getListNFTToken(address, page); + } + return getListOWContract(address, page); + }); + + const { data: dataRes } = useGet({ + path, + }); + + useEffect(() => { + if (dataRes) { + setDataCw({ + ...dataCw, + data: dataRes?.data, + page: { + ...dataCw.page, + ...dataRes?.page, + }, + }); + } + }, [dataRes]); + + const totalPages = page?.total_page ?? 0; + const currentPage = page?.page_id ?? 1; + + const onPageChange = newPage => { + const pageObj = { + ...page, + page_id: newPage, + }; + if (!isOw20) { + return setPath(getListNFTToken(address, pageObj)); + } + return setPath(getListOWContract(address, pageObj)); + }; + + const tableSekeleton = () => { + return isLargeScreen ? : ; + }; + + return ( +
+ {!dataRes ? ( + tableSekeleton() + ) : Array.isArray(data) && data.length > 0 ? ( + <> + {isLargeScreen ? : } + {totalPages > 0 && onPageChange(page)} />} + + ) : ( + + )} +
+ ); +}); + +export default NFTToken; diff --git a/src/components/Wallet/NFTToken/NFTToken.module.scss b/src/components/Wallet/NFTToken/NFTToken.module.scss new file mode 100644 index 000000000..b234ff64e --- /dev/null +++ b/src/components/Wallet/NFTToken/NFTToken.module.scss @@ -0,0 +1,25 @@ +.cw20 { + overflow-x: auto; + width: 100%; + + .text { + display: flex; + flex-direction: row; + justify-content: flex-end; + color: var(--common-textColor); + align-items: center; + font-family: 'IBM Plex Sans'; + font-style: normal; + font-weight: normal; + font-size: 14px; + line-height: 150%; + margin-top: -16px; + + &-link { + color: var(--common-linkColor); + margin: 4px; + } + } + + +} \ No newline at end of file diff --git a/src/components/Wallet/NFTToken/index.js b/src/components/Wallet/NFTToken/index.js new file mode 100644 index 000000000..9488f3d4f --- /dev/null +++ b/src/components/Wallet/NFTToken/index.js @@ -0,0 +1 @@ +export { default } from "./NFTToken"; \ No newline at end of file diff --git a/src/components/Wallet/Tabs/Tabs.js b/src/components/Wallet/Tabs/Tabs.js index d5c8c548c..ed0a8d5ba 100644 --- a/src/components/Wallet/Tabs/Tabs.js +++ b/src/components/Wallet/Tabs/Tabs.js @@ -1,19 +1,20 @@ /* eslint-disable react-hooks/exhaustive-deps */ import * as React from "react"; import cn from "classnames/bind"; -import {useGet} from "restful-react"; +import { useGet } from "restful-react"; import ContactIcon from "src/icons/Tabs/ProposalsTabIcon"; import ValidatorsIcon from "src/icons/Tabs/ValidatorsTabIcon"; import TransactionsIcon from "src/icons/Tabs/TransactionsTabIcon"; -import {getListCwToken} from "src/lib/api"; +import { getListCwToken } from "src/lib/api"; import styles from "./Tabs.module.scss"; const cx = cn.bind(styles); -export default function({activeTab, setActiveTab, isBecomeValidator, address}) { - const {data: dataRes} = useGet({ +export default function({ activeTab, setActiveTab, isBecomeValidator, address }) { + const response = useGet({ path: getListCwToken(address), }); + const dataRes = response?.data?.data; return (
@@ -21,11 +22,16 @@ export default function({activeTab, setActiveTab, isBecomeValidator, address}) {
Transactions
- {dataRes?.data && dataRes?.data?.length > 0 && ( + {dataRes && dataRes?.length > 0 && (
setActiveTab(6)}> -
CW-20 Token Txns
+
CW-20 Token Txs
)} + {/* {dataRes && dataRes?.length > 0 && ( +
setActiveTab(7)}> +
NFT Txs
+
+ )} */} {isBecomeValidator && (
setActiveTab(3)}> diff --git a/src/components/common/InfoRow/InfoRow.module.scss b/src/components/common/InfoRow/InfoRow.module.scss index 1c6744562..ea73158cd 100644 --- a/src/components/common/InfoRow/InfoRow.module.scss +++ b/src/components/common/InfoRow/InfoRow.module.scss @@ -9,6 +9,8 @@ width: 100%; margin-bottom: 18px; + + &:last-child { margin-bottom: 0; } diff --git a/src/containers/VerifiedContract/ComponentContract/ComponentContract.js b/src/containers/VerifiedContract/ComponentContract/ComponentContract.js index 401eb9862..c0bb6b861 100644 --- a/src/containers/VerifiedContract/ComponentContract/ComponentContract.js +++ b/src/containers/VerifiedContract/ComponentContract/ComponentContract.js @@ -9,7 +9,7 @@ import LinkChainIcon from "src/icons/LinkChainIcon"; import classNames from "classnames/bind"; import DownAngleIcon from "src/icons/DownAngleIcon"; import _ from "lodash"; -import ReactJson from "react-json-view"; +import ReactJson from "src/components/ReactJson"; import { themeIds } from "src/constants/themes"; import PropTypes from "prop-types"; import { Button, Collapse } from "@material-ui/core"; @@ -49,14 +49,6 @@ export const ItemCodeContract = ({ contractName, compilerVersion, contractVerifi
{contractName ?? "-"}
- - -
Compiler Version:
- - -
{compilerVersion ?? "-"}
- -
@@ -67,18 +59,10 @@ export const ItemCodeContract = ({ contractName, compilerVersion, contractVerifi -
Optimization Enabled:
- - -
Yes with 200 runs
- - - - -
Other Settings:
+
Compiler Version:
-
Default evmVersion, MIT license
+
{compilerVersion ?? "-"}
@@ -156,12 +140,11 @@ export const HandleItemContract = ({ schema, onHandle, handleText, onClickCopy, }, [schema]); useMemo(() => { - const obj = root && root.reduce( - (acc, _, index) => { - return { ...acc, [index + 1]: activeTab } - }, - {} - ); + const obj = + root && + root.reduce((acc, _, index) => { + return { ...acc, [index + 1]: activeTab }; + }, {}); setState(obj); }, [activeTab]); @@ -170,30 +153,37 @@ export const HandleItemContract = ({ schema, onHandle, handleText, onClickCopy, {root.map((msg, index) => { return (
-
setState({ - ...state, - [index + 1]: !state[index + 1] - })}> -
{index + 1}. {msg.fieldName}
+
+ setState({ + ...state, + [index + 1]: !state[index + 1], + }) + }> +
+ {index + 1}. {msg.fieldName} +
onClickCopy(msg.fieldName)}>
-
- setState({ - ...state, - [index + 1]: !state[index + 1] - }) - }> +
+ setState({ + ...state, + [index + 1]: !state[index + 1], + }) + }>
- {msg.fieldList.map((item, subInd) => -
+ {msg.fieldList.map((item, subInd) => ( +
{item.isRequired ? "*" : ""} { @@ -209,45 +199,50 @@ export const HandleItemContract = ({ schema, onHandle, handleText, onClickCopy, placeholder={`${item.fieldName} (${item.type})`} />
- )} + ))}
-
- {json?.[index + 1] && } + {json?.[index + 1] && ( + + )} {/*
uint256
*/}
-
- ) +
+ ); })} -
+
); }; @@ -356,7 +351,7 @@ ItemContract.defaultProps = { leftHeader: undefined, label: "", msg: {}, - onClickCopy: () => { }, - onClickLinkChain: () => { }, - onClickDownArrow: () => { }, + onClickCopy: () => {}, + onClickLinkChain: () => {}, + onClickDownArrow: () => {}, }; diff --git a/src/containers/VerifiedContract/ComponentContract/ComponentContract.module.scss b/src/containers/VerifiedContract/ComponentContract/ComponentContract.module.scss index 141c97381..3f51c5a7e 100644 --- a/src/containers/VerifiedContract/ComponentContract/ComponentContract.module.scss +++ b/src/containers/VerifiedContract/ComponentContract/ComponentContract.module.scss @@ -187,6 +187,12 @@ } .btn { padding-bottom: 12px; + + .execute-button{ + color: var(--common-buttonTextColor); + background: var(--common-buttonBackgroundColor); + border: 1px solid var(--common-activeTabColor); + } } } } diff --git a/src/containers/VerifiedContract/ReadContract/ReadContract.js b/src/containers/VerifiedContract/ReadContract/ReadContract.js index 09e37c0d5..443c2a205 100644 --- a/src/containers/VerifiedContract/ReadContract/ReadContract.js +++ b/src/containers/VerifiedContract/ReadContract/ReadContract.js @@ -5,32 +5,41 @@ import HeaderContract from "../HeaderContract"; import copy from "copy-to-clipboard"; import { showAlert } from "src/store/modules/global"; import { useDispatch, useSelector } from "react-redux"; -import { HandleItemContract } from '../ComponentContract'; -import { onQuery } from '../ContractInteraction'; +import { HandleItemContract } from "../ComponentContract"; +import { onQuery } from "../ContractInteraction"; const cx = classNames.bind(styles); const ReadContract = memo(({ data }) => { - const [activeTab, setActiveTab] = useState(false); - const dispatch = useDispatch(); - const activeThemeId = useSelector(state => state.activeThemeId); - const onClickCopy = (msg) => { - copy(JSON.stringify(msg)) - dispatch( - showAlert({ - show: true, - message: "Copied", - autoHideDuration: 1500, - }) - ); - } - return ( -
- -
- -
- ); + const [activeTab, setActiveTab] = useState(false); + const dispatch = useDispatch(); + const activeThemeId = useSelector(state => state.activeThemeId); + const onClickCopy = msg => { + copy(JSON.stringify(msg)); + dispatch( + showAlert({ + show: true, + message: "Copied", + autoHideDuration: 1500, + }) + ); + }; + return ( +
+ } label={"Read Contract Infomation"} activeTab={activeTab} setActiveTab={setActiveTab} /> +
+ +
+ ); }); export default ReadContract; diff --git a/src/containers/VerifiedContract/VerifiedContract.js b/src/containers/VerifiedContract/VerifiedContract.js index dafd26aca..02533023a 100644 --- a/src/containers/VerifiedContract/VerifiedContract.js +++ b/src/containers/VerifiedContract/VerifiedContract.js @@ -26,7 +26,7 @@ const VerifiedContract = () => { const address = params?.["address"]; const path = `${consts.API_CONTRACT_DEPLOY}${consts.PATH_CONTRACT.LIST}/${address}`; - const {data, loading, error, refetch: refetchSmartContract} = useGet({ + const { data, loading, error, refetch: refetchSmartContract } = useGet({ path: path, }); @@ -55,15 +55,20 @@ const VerifiedContract = () => {
- - + +
{tableSection} diff --git a/src/containers/VerifiedContract/WriteContract/WriteContract.js b/src/containers/VerifiedContract/WriteContract/WriteContract.js index 8254d2080..166cf031a 100644 --- a/src/containers/VerifiedContract/WriteContract/WriteContract.js +++ b/src/containers/VerifiedContract/WriteContract/WriteContract.js @@ -4,8 +4,8 @@ import styles from "./WriteContract.module.scss"; import HeaderContract from "../HeaderContract"; import { useSelector } from "react-redux"; import { useDispatch } from "react-redux"; -import { HandleItemContract } from '../ComponentContract'; -import { onExecute } from '../ContractInteraction'; +import { HandleItemContract } from "../ComponentContract"; +import { onExecute } from "../ContractInteraction"; import copy from "copy-to-clipboard"; import { showAlert } from "src/store/modules/global"; import { useHistory } from "src/hooks"; @@ -13,28 +13,43 @@ import { useHistory } from "src/hooks"; const cx = classNames.bind(styles); const WriteContract = memo(({ data }) => { - const { address } = useSelector(state => state.wallet); - const history = useHistory(); - const [activeTab, setActiveTab] = useState(true); - const activeThemeId = useSelector(state => state.activeThemeId); - const dispatch = useDispatch(); - const onClickCopy = (msg) => { - copy(JSON.stringify(msg)) - dispatch( - showAlert({ - show: true, - message: "Copied", - autoHideDuration: 1500, - }) - ); - } - return ( -
- } onClickLink={() => address && history.push(`/account/${address}`)} label={address ? "Connect to web3" : "Connect to wallet"} activeTab={activeTab} setActiveTab={setActiveTab} /> -
- -
- ); + const { address } = useSelector(state => state.wallet); + const history = useHistory(); + const [activeTab, setActiveTab] = useState(false); + const activeThemeId = useSelector(state => state.activeThemeId); + const dispatch = useDispatch(); + const onClickCopy = msg => { + copy(JSON.stringify(msg)); + dispatch( + showAlert({ + show: true, + message: "Copied", + autoHideDuration: 1500, + }) + ); + }; + return ( +
+ } + onClickLink={() => address && history.push(`/account/${address}`)} + label={address ? "Write Contract Infomation" : "Connect to wallet"} + activeTab={activeTab} + setActiveTab={setActiveTab} + /> +
+ +
+ ); }); export default WriteContract; diff --git a/src/containers/Wallet/Wallet.js b/src/containers/Wallet/Wallet.js index 7b45c7599..0b8345fe7 100644 --- a/src/containers/Wallet/Wallet.js +++ b/src/containers/Wallet/Wallet.js @@ -2,33 +2,34 @@ import * as React from "react"; import cn from "classnames/bind"; import Container from "@material-ui/core/Container"; -import {useSelector} from "react-redux"; -import {useGet} from "restful-react"; -import {_} from "src/lib/scripts"; +import { useSelector } from "react-redux"; +import { useGet } from "restful-react"; +import { _ } from "src/lib/scripts"; import consts from "src/constants/consts"; import PageTitle from "src/components/common/PageTitle"; import TitleWrapper from "src/components/common/TitleWrapper"; import StatusBar from "src/components/Wallet/StatusBar"; import Tabs from "src/components/Wallet/Tabs"; -import {RegisterDetail} from "src/components/Wallet/Register"; +import { RegisterDetail } from "src/components/Wallet/Register"; import Transaction from "src/components/Wallet/Transaction"; import Contact from "src/components/Wallet/Contact"; import CwToken from "src/components/Wallet/CwToken"; +import NFTToken from "src/components/Wallet/NFTToken"; import styles from "./Wallet.module.scss"; const cx = cn.bind(styles); export default function(props) { const [activeTab, setActiveTab] = React.useState(0); - const {address} = useSelector(state => state.wallet); + const { address } = useSelector(state => state.wallet); const path = consts.API.VALIDATOR + "/" + address; - const {data} = useGet({ + const { data } = useGet({ path: path, }); const isBecomeValidator = !data ? false : data.operator_address ? true : false; - const {data: walletInfo} = useGet({ + const { data: walletInfo } = useGet({ path: `${consts.LCD_API_BASE}${consts.LCD_API.ACCOUNT_DETAIL}/accounts/${address}`, }); @@ -41,8 +42,9 @@ export default function(props) { {activeTab === 0 && } {activeTab === 6 && } + {activeTab === 7 && } {activeTab === 3 && isBecomeValidator && } {activeTab === 4 && } - + ); } diff --git a/src/lib/api.js b/src/lib/api.js index 0828b303f..8ae98dc06 100644 --- a/src/lib/api.js +++ b/src/lib/api.js @@ -83,6 +83,10 @@ export const getListCwToken = (address, page) => { return `${consts.API_BASE}${consts.API.OW20_SMART_CONTRACTS}/${address}?limit=${page?.limit || 1}&page_id=${page?.page_id || 1}` } +export const getListNFTToken = (address, page) => { + return `https://api.testnet.scan.orai.io/v1/nft_transaction/${address}?limit=${page?.limit || 1}&page_id=${page?.page_id || 1}`; +}; + export const getListOWContract = (address, page) => { return `${consts.API_BASE}${consts.API.OW20_SMART_CONTRACTS}${consts.API.OW20_CONTRACT}/${address}?limit=${page?.limit || 1}&page_id=${page?.page_id || 1}` } diff --git a/yarn.lock b/yarn.lock index acebcdfb8..c9241b010 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1082,6 +1082,13 @@ dependencies: regenerator-runtime "^0.13.4" +"@babel/runtime@^7.16.7", "@babel/runtime@^7.20.6": + version "7.22.15" + resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.22.15.tgz#38f46494ccf6cf020bd4eed7124b425e83e523b8" + integrity sha512-T0O+aa+4w0u06iNmapipJXMV4HoUir03hpx3/YqXXhu9xim3w+dVphjFWl1OH8NbZHw5Lbm9k45drDkgq2VNNA== + dependencies: + regenerator-runtime "^0.14.0" + "@babel/template@^7.18.10", "@babel/template@^7.3.3", "@babel/template@^7.4.0": version "7.18.10" resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.18.10.tgz#6f9134835970d1dbf0835c0d100c9f38de0c5e71" @@ -3726,6 +3733,11 @@ dependencies: "@babel/types" "^7.3.0" +"@types/base16@^1.0.2": + version "1.0.2" + resolved "https://registry.yarnpkg.com/@types/base16/-/base16-1.0.2.tgz#eb3a07db52309bfefb9ba010dfdb3c0784971f65" + integrity sha512-oYO/U4VD1DavwrKuCSQWdLG+5K22SLPem2OQaHmFcQuwHoVeGC+JGVRji2MUqZUAIQZHEonOeVfAX09hYiLsdg== + "@types/bn.js@^5.1.0": version "5.1.1" resolved "https://registry.yarnpkg.com/@types/bn.js/-/bn.js-5.1.1.tgz#b51e1b55920a4ca26e9285ff79936bbdec910682" @@ -3926,6 +3938,11 @@ resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.186.tgz#862e5514dd7bd66ada6c70ee5fce844b06c8ee97" integrity sha512-eHcVlLXP0c2FlMPm56ITode2AgLMSa6aJ05JTTbYbI+7EMkCEE5qk2E41d5g2lCVTqRe0GnnRFurmlCsDODrPw== +"@types/lodash@^4.14.178", "@types/lodash@^4.14.191": + version "4.14.198" + resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.198.tgz#4d27465257011aedc741a809f1269941fa2c5d4c" + integrity sha512-trNJ/vtMZYMLhfN45uLq4ShQSw0/S7xCTLLVM+WM1rmFpba/VS42jVUgaO3w/NOLiWR/09lnYk0yMaA/atdIsg== + "@types/long@^4.0.0", "@types/long@^4.0.1": version "4.0.2" resolved "https://registry.yarnpkg.com/@types/long/-/long-4.0.2.tgz#b74129719fc8d11c01868010082d483b7545591a" @@ -6697,7 +6714,7 @@ color-support@^1.1.2, color-support@^1.1.3: resolved "https://registry.yarnpkg.com/color-support/-/color-support-1.1.3.tgz#93834379a1cc9a0c61f82f52f0d04322251bd5a2" integrity sha512-qiBjkpbMLO/HL68y+lh4q0/O1MZFj2RX6X/KmMa3+gJD3z+WwI1ZzDHysvqHGS3mP6mznPckpXmw1nI9cJjyRg== -color@^3.1.3: +color@^3.1.3, color@^3.2.1: version "3.2.1" resolved "https://registry.yarnpkg.com/color/-/color-3.2.1.tgz#3544dc198caf4490c3ecc9a790b54fe9ff45e164" integrity sha512-aBl7dZI9ENN6fUGC7mWpMTPNHmWUSNan9tuWN6ahh5ZLNk9baLJOnSMlrQkHcrfFgz2/RigjUVAjdx36VcemKA== @@ -7087,7 +7104,7 @@ cross-env@^7.0.3: dependencies: cross-spawn "^7.0.1" -cross-fetch@^3.0.4, cross-fetch@^3.1.4, cross-fetch@^3.1.5: +cross-fetch@^3.0.4, cross-fetch@^3.1.4: version "3.1.5" resolved "https://registry.yarnpkg.com/cross-fetch/-/cross-fetch-3.1.5.tgz#e1389f44d9e7ba767907f7af8454787952ab534f" integrity sha512-lvb1SBsI0Z7GDwmuid+mU3kWVBwTVUbe7S0H52yaaAdQOXq2YktTCZdlAcNKFzE6QtRz0snpw9bNiPeOIkkQvw== @@ -7378,6 +7395,11 @@ csstype@^2.5.2: resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.21.tgz#2efb85b7cc55c80017c66a5ad7cbd931fda3a90e" integrity sha512-Z1PhmomIfypOpoMjRQB70jfvy/wxT50qW08YXO5lMIJkrdq4yOTR+AW7FqutScmB9NkLwxo+jU+kZLbofZZq/w== +csstype@^3.0.10: + version "3.1.2" + resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.2.tgz#1d4bf9d572f11c14031f0436e1c10bc1f571f50b" + integrity sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ== + csstype@^3.0.2: version "3.1.1" resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.1.tgz#841b532c45c758ee546a11d5bd7b7b473c8c30b9" @@ -9136,13 +9158,6 @@ fb-watchman@^2.0.0: dependencies: bser "2.1.1" -fbemitter@^3.0.0: - version "3.0.0" - resolved "https://registry.yarnpkg.com/fbemitter/-/fbemitter-3.0.0.tgz#00b2a1af5411254aab416cd75f9e6289bee4bff3" - integrity sha512-KWKaceCwKQU0+HPoop6gn4eOHk50bBv/VxjJtGMfwmJt3D29JpN4H4eisCtIPA+a8GVBam+ldMMpMjJUvpDyHw== - dependencies: - fbjs "^3.0.0" - fbjs-css-vars@^1.0.0: version "1.0.2" resolved "https://registry.yarnpkg.com/fbjs-css-vars/-/fbjs-css-vars-1.0.2.tgz#216551136ae02fe255932c3ec8775f18e2c078b8" @@ -9175,19 +9190,6 @@ fbjs@^2.0.0: setimmediate "^1.0.5" ua-parser-js "^0.7.18" -fbjs@^3.0.0, fbjs@^3.0.1: - version "3.0.4" - resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-3.0.4.tgz#e1871c6bd3083bac71ff2da868ad5067d37716c6" - integrity sha512-ucV0tDODnGV3JCnnkmoszb5lf4bNpzjv80K41wd4k798Etq+UYD0y0TIfalLjZoKgjive6/adkRnszwapiDgBQ== - dependencies: - cross-fetch "^3.1.5" - fbjs-css-vars "^1.0.0" - loose-envify "^1.0.0" - object-assign "^4.1.0" - promise "^7.1.1" - setimmediate "^1.0.5" - ua-parser-js "^0.7.30" - fecha@^4.2.0: version "4.2.3" resolved "https://registry.yarnpkg.com/fecha/-/fecha-4.2.3.tgz#4d9ccdbc61e8629b259fdca67e65891448d569fd" @@ -9458,14 +9460,6 @@ flatted@^3.1.0: resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.2.7.tgz#609f39207cb614b89d0765b477cb2d437fbf9787" integrity sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ== -flux@^4.0.1: - version "4.0.3" - resolved "https://registry.yarnpkg.com/flux/-/flux-4.0.3.tgz#573b504a24982c4768fdfb59d8d2ea5637d72ee7" - integrity sha512-yKAbrp7JhZhj6uiT1FTuVMlIAT1J4jqEyBpFApi1kxpGZCvacMVc/t1pMQyotqHhAgvoE3bNvAykhCo2CLjnYw== - dependencies: - fbemitter "^3.0.0" - fbjs "^3.0.1" - fn.name@1.x.x: version "1.1.0" resolved "https://registry.yarnpkg.com/fn.name/-/fn.name-1.1.0.tgz#26cad8017967aea8731bc42961d04a3d5988accc" @@ -13242,7 +13236,7 @@ lodash.camelcase@^4.3.0: resolved "https://registry.yarnpkg.com/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz#b28aa6288a2b9fc651035c7711f65ab6190331a6" integrity sha512-TwuEnCnxbc3rAvhf/LbG7tJUDzhqXyFnv3dtzLOPgCG/hODL7WFnsbwktkD7yUV0RrreP/l1PALq/YSg6VvjlA== -lodash.curry@^4.0.1: +lodash.curry@^4.1.1: version "4.1.1" resolved "https://registry.yarnpkg.com/lodash.curry/-/lodash.curry-4.1.1.tgz#248e36072ede906501d75966200a86dab8b23170" integrity sha512-/u14pXGviLaweY5JI0IUzgzF2J6Ne8INyzAZjImcryjgkZ+ebruBxy2/JaOOkTqScddcYtakjhSaeemV8lR0tA== @@ -13267,11 +13261,6 @@ lodash.flatten@^4.4.0: resolved "https://registry.yarnpkg.com/lodash.flatten/-/lodash.flatten-4.4.0.tgz#f31c22225a9632d2bbf8e4addbef240aa765a61f" integrity sha512-C5N2Z3DgnnKr0LOpv/hKCgKdb7ZZwafIrsesve6lmzvZIRZRGaZ/l6Q8+2W7NaT+ZwO3fFlSCzCzrDCFdJfZ4g== -lodash.flow@^3.3.0: - version "3.5.0" - resolved "https://registry.yarnpkg.com/lodash.flow/-/lodash.flow-3.5.0.tgz#87bf40292b8cf83e4e8ce1a3ae4209e20071675a" - integrity sha512-ff3BX/tSioo+XojX4MOsOMhJw0nZoUEF011LX8g8d3gvjVbxd89cCio4BCXronjxcTUIJUoqKEUA+n4CqvvRPw== - lodash.get@^4.4.2: version "4.4.2" resolved "https://registry.yarnpkg.com/lodash.get/-/lodash.get-4.4.2.tgz#2d177f652fa31e939b4438d5341499dfa3825e99" @@ -16237,11 +16226,6 @@ pupa@^2.0.1, pupa@^2.1.1: dependencies: escape-goat "^2.0.0" -pure-color@^1.2.0: - version "1.3.0" - resolved "https://registry.yarnpkg.com/pure-color/-/pure-color-1.3.0.tgz#1fe064fb0ac851f0de61320a8bf796836422f33e" - integrity sha512-QFADYnsVoBMw1srW7OVKEYjG+MbIa49s54w1MA1EDY6r2r/sTcKKYqRX1f4GYvnXP7eN/Pe9HFcX+hwzmrXRHA== - q@^1.1.2: version "1.5.1" resolved "https://registry.yarnpkg.com/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7" @@ -16775,15 +16759,18 @@ react-app-rewired@^2.2.1: dependencies: semver "^5.6.0" -react-base16-styling@^0.6.0: - version "0.6.0" - resolved "https://registry.yarnpkg.com/react-base16-styling/-/react-base16-styling-0.6.0.tgz#ef2156d66cf4139695c8a167886cb69ea660792c" - integrity sha512-yvh/7CArceR/jNATXOKDlvTnPKPmGZz7zsenQ3jUwLzHkNUR0CvY3yGYJbWJ/nnxsL8Sgmt5cO3/SILVuPO6TQ== +react-base16-styling@^0.9.1: + version "0.9.1" + resolved "https://registry.yarnpkg.com/react-base16-styling/-/react-base16-styling-0.9.1.tgz#4906b4c0a51636f2dca2cea8b682175aa8bd0c92" + integrity sha512-1s0CY1zRBOQ5M3T61wetEpvQmsYSNtWEcdYzyZNxKa8t7oDvaOn9d21xrGezGAHFWLM7SHcktPuPTrvoqxSfKw== dependencies: + "@babel/runtime" "^7.16.7" + "@types/base16" "^1.0.2" + "@types/lodash" "^4.14.178" base16 "^1.0.0" - lodash.curry "^4.0.1" - lodash.flow "^3.3.0" - pure-color "^1.2.0" + color "^3.2.1" + csstype "^3.0.10" + lodash.curry "^4.1.1" react-cool-img@^1.0.15: version "1.2.12" @@ -16933,20 +16920,14 @@ react-is@^18.0.0: resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b" integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w== -react-json-view@^1.21.3: - version "1.21.3" - resolved "https://registry.yarnpkg.com/react-json-view/-/react-json-view-1.21.3.tgz#f184209ee8f1bf374fb0c41b0813cff54549c475" - integrity sha512-13p8IREj9/x/Ye4WI/JpjhoIwuzEgUAtgJZNBJckfzJt1qyh24BdTm6UQNGnyTq9dapQdrqvquZTo3dz1X6Cjw== +react-json-tree@^0.18.0: + version "0.18.0" + resolved "https://registry.yarnpkg.com/react-json-tree/-/react-json-tree-0.18.0.tgz#3c4bec7b091f50dcc9c09652d89c8f4373ebf3ea" + integrity sha512-Qe6HKSXrr++n9Y31nkRJ3XvQMATISpqigH1vEKhLwB56+nk5thTP0ITThpjxY6ZG/ubpVq/aEHIcyLP/OPHxeA== dependencies: - flux "^4.0.1" - react-base16-styling "^0.6.0" - react-lifecycles-compat "^3.0.4" - react-textarea-autosize "^8.3.2" - -react-lifecycles-compat@^3.0.4: - version "3.0.4" - resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362" - integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA== + "@babel/runtime" "^7.20.6" + "@types/lodash" "^4.14.191" + react-base16-styling "^0.9.1" react-number-format@^4.4.1: version "4.9.4" @@ -17103,15 +17084,6 @@ react-syntax-highlighter@^15.4.3: prismjs "^1.27.0" refractor "^3.6.0" -react-textarea-autosize@^8.3.2: - version "8.3.4" - resolved "https://registry.yarnpkg.com/react-textarea-autosize/-/react-textarea-autosize-8.3.4.tgz#270a343de7ad350534141b02c9cb78903e553524" - integrity sha512-CdtmP8Dc19xL8/R6sWvtknD/eCXkQr30dtvC4VmGInhRsfF8X/ihXCq6+9l9qbxmKRiq407/7z5fxE7cVWQNgQ== - dependencies: - "@babel/runtime" "^7.10.2" - use-composed-ref "^1.3.0" - use-latest "^1.2.1" - react-transition-group@^4.4.0: version "4.4.5" resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.5.tgz#e53d4e3f3344da8521489fbef8f2581d42becdd1" @@ -17406,6 +17378,11 @@ regenerator-runtime@^0.13.4, regenerator-runtime@^0.13.9: resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz#8925742a98ffd90814988d7566ad30ca3b263b52" integrity sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA== +regenerator-runtime@^0.14.0: + version "0.14.0" + resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz#5e19d68eb12d486f797e15a3c6a918f7cec5eb45" + integrity sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA== + regenerator-transform@^0.15.0: version "0.15.0" resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.15.0.tgz#cbd9ead5d77fae1a48d957cf889ad0586adb6537" @@ -20040,23 +20017,6 @@ url@^0.11.0: punycode "1.3.2" querystring "0.2.0" -use-composed-ref@^1.3.0: - version "1.3.0" - resolved "https://registry.yarnpkg.com/use-composed-ref/-/use-composed-ref-1.3.0.tgz#3d8104db34b7b264030a9d916c5e94fbe280dbda" - integrity sha512-GLMG0Jc/jiKov/3Ulid1wbv3r54K9HlMW29IWcDFPEqFkSO2nS0MuefWgMJpeHQ9YJeXDL3ZUF+P3jdXlZX/cQ== - -use-isomorphic-layout-effect@^1.1.1: - version "1.1.2" - resolved "https://registry.yarnpkg.com/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz#497cefb13d863d687b08477d9e5a164ad8c1a6fb" - integrity sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA== - -use-latest@^1.2.1: - version "1.2.1" - resolved "https://registry.yarnpkg.com/use-latest/-/use-latest-1.2.1.tgz#d13dfb4b08c28e3e33991546a2cee53e14038cf2" - integrity sha512-xA+AVm/Wlg3e2P/JiItTziwS7FK92LWrDB0p+hgXloIMuVCeJJ8v6f0eeHyPZaJrM+usM1FkFfbNCrJGs8A/zw== - dependencies: - use-isomorphic-layout-effect "^1.1.1" - use@^3.1.0: version "3.1.1" resolved "https://registry.yarnpkg.com/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f" @@ -20269,8 +20229,10 @@ watchpack@^1.3.1: resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-1.7.5.tgz#1267e6c55e0b9b5be44c2023aed5437a2c26c453" integrity sha512-9P3MWk6SrKjHsGkLT2KHXdQ/9SNkyoJbabxnKOoJepsvJjJG8uYTR3yTPxPQvNDI3w4Nz1xnE0TLHK4RIVe/MQ== dependencies: + chokidar "^3.4.1" graceful-fs "^4.1.2" neo-async "^2.5.0" + watchpack-chokidar2 "^2.0.1" optionalDependencies: chokidar "^3.4.1" watchpack-chokidar2 "^2.0.1"