Merge branch 'master' of https://github.com/hyle-team/zano-explorer-zarcanum

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;

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;

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 (
             <div className="json_popup__content">
-                <div className="json_popup__content__json">
-                    <JsonViewStyled 
-                        data={json} 
-                    />
-                </div>
+                {!hideJson && 
+                    <div className="json_popup__content__json">
+                        <JsonViewStyled 
+                            data={json} 
+                        />
+                    </div>
+                }
                 <Button
                     wrapper
                     onClick={close}

src/pages/Assets/Assets.tsx

@@ -11,13 +11,16 @@ import { nanoid } from "nanoid";
 import Button from "../../components/UI/Button/Button";
 import { useSearchParams } from "react-router-dom";
 
-const AssetPopupBottom = memo(({ assetId }: { assetId: string }) => {
+const AssetPopupBottom = memo(({ assetId }: { assetId?: string }) => {
 
     const [clicked, setClicked] = useState(false);
 
-    const assetLink = `${window.location.origin}/assets?asset_id=${encodeURIComponent(assetId)}`;
+    const assetLink = assetId !== undefined 
+        ? `${window.location.origin}/assets?asset_id=${encodeURIComponent(assetId)}` 
+        : undefined;
 
     function copy() {
+        if (!assetLink) return;
         if (clicked) return;
 
         navigator.clipboard.writeText(assetLink);
@@ -29,10 +32,17 @@ const AssetPopupBottom = memo(({ assetId }: { assetId: string }) => {
     }
 
     return (
-        <div className="asset_popup__bottom">
-            <Button onClick={copy}>{clicked ? 'Copied' : 'Copy asset link'}</Button>
-        </div>
-        
+        assetLink ? (
+            <div className="asset_popup__bottom">
+                <Button onClick={copy}>{clicked ? 'Copied' : 'Copy asset link'}</Button>
+            </div>
+        ) : (
+            <div className="asset_popup__not_found">
+                <h3>
+                    Asset not found or does not exist. For newly created assets, please allow one minute to appear in the explorer
+                </h3>
+            </div>
+        )
     )
 })
 
@@ -50,6 +60,7 @@ function Assets() {
     const [assetJson, setAssetJson] = useState<Record<string, any>>({});
 
     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<string>(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() {
             </div>
             {
                 JSONPopup({
-                    popupState: popupState,
+                    popupState: popupState || notFountPopupState,
                     setPopupState: setPopupState,
                     json: assetJson,
-                    bottomContent: <AssetPopupBottom assetId={assetJson?.asset_id || ""} />,
+                    hideJson: notFountPopupState,
+                    bottomContent: (
+                        <AssetPopupBottom
+                            assetId={
+                                !notFountPopupState ? (assetJson?.asset_id || "") : undefined
+                            }
+                        />
+                    ),
                     onClose: () => {
-                        searchParams.delete("asset_id")
-                        setSearchParams(searchParams);
+                        if (searchParams.get("asset_id")) {
+                            searchParams.delete("asset_id");
+                            setSearchParams(searchParams);
+                        }
+                        setNotFountPopupState(false);
                     }
                 })
             }

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;