diff --git a/src/components/default/JSONPopup/JSONPopup.props.ts b/src/components/default/JSONPopup/JSONPopup.props.ts index 0a2e7f1..dadec49 100644 --- a/src/components/default/JSONPopup/JSONPopup.props.ts +++ b/src/components/default/JSONPopup/JSONPopup.props.ts @@ -6,6 +6,7 @@ interface JSONPopupProps { json: Object; bottomContent?: React.ReactElement; onClose?: () => void; + hideJson?: boolean; } export default JSONPopupProps; \ No newline at end of file diff --git a/src/components/default/JSONPopup/JSONPopup.scss b/src/components/default/JSONPopup/JSONPopup.scss index 0aca556..09d5c87 100644 --- a/src/components/default/JSONPopup/JSONPopup.scss +++ b/src/components/default/JSONPopup/JSONPopup.scss @@ -2,7 +2,6 @@ padding: 40px; max-width: 100vw; width: 620px; - height: 400px; border-radius: 10px; background-color: #263163; position: relative; @@ -13,7 +12,7 @@ .json_popup__content__json { padding: 20px; width: 100%; - height: 100%; + height: 260px; border-radius: 10px; background-color: #0c1845; overflow: auto; diff --git a/src/components/default/JSONPopup/JSONPopup.tsx b/src/components/default/JSONPopup/JSONPopup.tsx index 76d7b9b..9425129 100644 --- a/src/components/default/JSONPopup/JSONPopup.tsx +++ b/src/components/default/JSONPopup/JSONPopup.tsx @@ -4,14 +4,14 @@ import JSONPopupProps from "./JSONPopup.props"; import JsonViewStyled from "../../UI/JsonViewStyled/JsonViewStyled"; import Button from "../../UI/Button/Button"; import { ReactComponent as CrossImg } from "../../../assets/images/UI/cross.svg"; -import { memo } from "react"; const JSONPopup = (props: JSONPopupProps) => { const { popupState, setPopupState, json, - bottomContent + bottomContent, + hideJson } = props; function onClose() { @@ -24,11 +24,13 @@ const JSONPopup = (props: JSONPopupProps) => { function PopupContent({ close }: { close: () => void }) { return (
-
- -
+ {!hideJson && +
+ +
+ } -
- + assetLink ? ( +
+ +
+ ) : ( +
+

+ Asset not found or does not exist. For newly created assets, please allow one minute to appear in the explorer +

+
+ ) ) }) @@ -50,6 +60,7 @@ function Assets() { const [assetJson, setAssetJson] = useState>({}); const [popupState, setPopupState] = useState(false); + const [notFountPopupState, setNotFountPopupState] = useState(false); const [itemsOnPage, setItemsOnPage] = useState("10"); const [page, setPage] = useState("1"); @@ -57,6 +68,7 @@ function Assets() { const [isWhitelist, setIsWhitelist] = useState(true); const [inputState, setInputState] = useState(""); + const [initFetched, setInitFetched] = useState(false); const fetchIdRef = useRef(nanoid()); @@ -72,17 +84,24 @@ function Assets() { if (assetId) { const response = await Fetch.getAssetDetails(assetId); + setInitFetched(true); if (response.success && response.asset) { setPopupState(true); setAssetJson(response.asset); + } else { + setNotFountPopupState(true); } + } else { + setInitFetched(true); } } - fetchParamAsset(); + if (!initFetched) { + fetchParamAsset(); + } - }, [searchParams]); + }, [searchParams, initFetched]); useEffect(() => { async function fetchZanoPrice() { @@ -190,13 +209,23 @@ function Assets() { { JSONPopup({ - popupState: popupState, + popupState: popupState || notFountPopupState, setPopupState: setPopupState, json: assetJson, - bottomContent: , + hideJson: notFountPopupState, + bottomContent: ( + + ), onClose: () => { - searchParams.delete("asset_id") - setSearchParams(searchParams); + if (searchParams.get("asset_id")) { + searchParams.delete("asset_id"); + setSearchParams(searchParams); + } + setNotFountPopupState(false); } }) } diff --git a/src/styles/Assets.scss b/src/styles/Assets.scss index 1ae3422..5e56026 100644 --- a/src/styles/Assets.scss +++ b/src/styles/Assets.scss @@ -17,6 +17,13 @@ } } +.asset_popup__not_found { + > h3 { + text-align: center; + font-weight: 600; + } +} + @media screen and (max-width: 850px) { .assets__table { overflow-x: auto;