FEATURE : binance link if tx is not found on our server but on binanc…

…e's explorer

src/components/common/NotFound/NotFound.js

@@ -8,38 +8,56 @@ import {_} from "src/lib/scripts";
 import {useFetch, useSelector} from "src/hooks";
 
 //  assets
-import notFoundImg from "src/assets/misc/404_img.svg";
+import notFoundSVG from "src/assets/misc/404_img.svg";
+import binanceHasTxSVG from "src/assets/misc/binanceHasTx.svg";
+import nextSVG from "src/assets/misc/arrow-next-gr.svg";
+import Loading from "src/components/common/Loading";
 
 const cx = classNames.bind(styles);
 
 const NotFound = ({altText = "Sorry! Page Not Found"}) => {
 	const accelAPI = useSelector(state => state.blockchain.acceleratedNode);
 	const [state, , setUrl] = useFetch("");
-	const [altLink, setAltLink] = React.useState(null);
+	const [altLink, setAltLink] = React.useState("");
+	const [route, data] = React.useMemo(() => getRoute(), []);
 	React.useEffect(() => {
-		if (window.location.pathname.startsWith("/txs")) {
-			setUrl(`${accelAPI}${consts.BINANCE_API_ENDPOINTS.TX(window.location.pathname.split("/txs")[1])}`);
+		if (route === "tx") {
+			setUrl(`${accelAPI}${consts.BINANCE_API_ENDPOINTS.TX(data)}`);
 		}
-	}, [accelAPI, setUrl]);
+	}, [accelAPI, setUrl, route, data]);
 
 	React.useEffect(() => {
-		if (!_.isNil(state.data?.height)) {
+		if (!_.isNil(state.data?.height) && !state.error) {
 			setAltLink(`https://explorer.binance.org/tx${window.location.pathname.split("/txs")[1]}`);
 		}
-	}, [state.data]);
+	}, [state]);
+
+	if (!_.isNil(route) && !state.error && _.isNil(state.data)) return <Loading />;
 
 	return (
-		<div className={cx("notFound_wrapper")}>
-			<img src={notFoundImg} alt='not found' />
-			{altLink ? (
-				<h2 className={cx("link")} onClick={() => window.open(altLink, "__blank")}>
-					Tx can be found in binance explorer
-				</h2>
+		<>
+			{_.isNil(route) || (altLink === "" && !_.isNil(route)) ? (
+				<div className={cx("notFound-wrapper")}>
+					<img src={notFoundSVG} alt='not found' />
+					<h2>{altText}</h2>
+				</div>
 			) : (
-				<h2>{altText}</h2>
+				<div className={cx("notFound_inBinance-wrapper")}>
+					<img src={binanceHasTxSVG} alt='not found' />
+					<h2>Tx can be found in binance explorer</h2>
+					<button onClick={() => window.open(altLink, "__blank")}>
+						<span>BINANCE EXPLORER</span>
+						<img src={nextSVG} alt='next' />
+					</button>
+				</div>
 			)}
-		</div>
+		</>
 	);
 };
 
+const getRoute = () => {
+	if (window.location.pathname.startsWith("/txs")) return ["tx", window.location.pathname.split("/txs")[1]];
+	return [null, ""];
+};
+
 export default NotFound;

src/components/common/NotFound/NotFound.scss

@@ -1,6 +1,6 @@
 @import "src/styles/utils";
 
-.notFound_wrapper {
+.notFound-wrapper {
 	display: flex;
 	justify-content: center;
 	flex-direction: column;
@@ -33,3 +33,79 @@
 		}
 	}
 }
+
+.notFound_inBinance-wrapper {
+	display: flex;
+	justify-content: center;
+	flex-direction: column;
+	align-items: center;
+	min-height: calc(100vh - var(--heightHeader) - var(--heightSubHeader) - var(--heightFooter));
+
+	font-family: "Montserrat", serif;
+	font-weight: 500;
+	font-stretch: normal;
+	font-style: normal;
+	letter-spacing: normal;
+	color: #222222;
+	> img {
+		width: 90px;
+		height: 90px;
+		object-fit: fill;
+		margin-bottom: 15px;
+	}
+	h2 {
+		font-size: 30px;
+		line-height: 1.23;
+		margin-bottom: 40px;
+	}
+	> button {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		cursor: pointer;
+		background-image: linear-gradient(to right, #f1bc24, #fbd839);
+
+		width: 229px;
+		height: 50px;
+		border-radius: 5px;
+		//@include transition(all, ease, 0.25s);
+
+		&:hover {
+			//border: solid 1px #E0B321;
+			//box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.2);
+			//transform: scale3d(1.05,1.05,1.05);
+			> img {
+				@include springX;
+			}
+		}
+
+		> span {
+			font-size: 15px;
+			line-height: 1.27;
+			margin-right: 5px;
+		}
+		> img {
+			height: 24px;
+			width: 24px;
+			object-fit: fill;
+		}
+	}
+	@include media("<medium") {
+		> h2 {
+			font-size: 18px;
+			margin-bottom: 25px;
+		}
+		> button {
+			width: 200px;
+			height: 45px;
+			> span {
+				font-size: 12px;
+				line-height: 1.1;
+			}
+			> img {
+				height: 20px;
+				width: 20px;
+			}
+		}
+	}
+}

src/styles/lib/_all.scss

@@ -6,3 +6,4 @@
 @import "./mixins/wrappers";
 @import "./mixins/grid";
 @import "./mixins/flex";
+@import "./mixins/animations";

src/styles/lib/mixins/_animations.scss

@@ -0,0 +1,18 @@
+
+@mixin springX {
+	animation: springX 0.75s;
+	animation-timing-function: ease;
+	animation-iteration-count: infinite;
+}
+
+@keyframes springX {
+	0% {
+		transform: translateX(0);
+	}
+	25% {
+		transform: translateX(8px);
+	}
+	100% {
+		transform: translateX(0);
+	}
+}