EDIT : styling for not found but in Binance explorer page

cosmostation · Apr 13, 2020 · 3cf4080 · 3cf4080
1 parent 10c28ef
commit 3cf4080
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 9 deletions.
diff --git a/src/components/common/DisplayLongString/DisplayLongString.js b/src/components/common/DisplayLongString/DisplayLongString.js
@@ -6,9 +6,9 @@ const cx = cn.bind(styles);
 
 const CUT_DISPLAY = 12;
 
-export default function({inputString = "", long = false, displayThresh = CUT_DISPLAY}) {
+export default function({inputString = "", long = false, displayThresh = CUT_DISPLAY, medium = false}) {
 	return (
-		<span className={cx({"DisplayExtraLongString-wrapper": long, "DisplayLongString-wrapper": !long})}>
+		<span className={cx({"DisplayMedium-wrapper": medium, "DisplayExtraLongString-wrapper": !medium && long, "DisplayLongString-wrapper": !medium && !long})}>
 			<span className={cx("front")}>{inputString.substr(0, displayThresh)}</span>
 			<span className={cx("middle")}>{inputString.substr(displayThresh, inputString.length - displayThresh * 2)}</span>
 			<span>{inputString.substr(inputString.length - displayThresh, inputString.length)}</span>

diff --git a/src/components/common/DisplayLongString/DisplayLongString.scss b/src/components/common/DisplayLongString/DisplayLongString.scss
@@ -22,4 +22,16 @@
 			display: none;
 		}
 	}
+}
+
+.DisplayMedium-wrapper {
+	overflow-x: visible;
+	@include media("<medium") {
+		.front:after {
+			content: "..."
+		}
+		.middle {
+			display: none;
+		}
+	}
 }
diff --git a/src/components/common/NotFound/NotFound.js b/src/components/common/NotFound/NotFound.js
@@ -12,6 +12,7 @@ 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";
+import DisplayLongString from "src/components/common/DisplayLongString";
 
 const cx = classNames.bind(styles);
 
@@ -28,9 +29,9 @@ const NotFound = ({altText = "Sorry! Page Not Found"}) => {
 
 	React.useEffect(() => {
 		if (!_.isNil(state.data?.height) && !state.error) {
-			setAltLink(`https://explorer.binance.org/tx${window.location.pathname.split("/txs")[1]}`);
+			setAltLink(`https://explorer.binance.org/tx/${data}`);
 		}
-	}, [state]);
+	}, [state, data]);
 
 	if (!_.isNil(route) && !state.error && _.isNil(state.data)) return <Loading />;
 
@@ -44,7 +45,13 @@ const NotFound = ({altText = "Sorry! Page Not Found"}) => {
 			) : (
 				<div className={cx("notFound_inBinance-wrapper")}>
 					<img src={binanceHasTxSVG} alt='not found' />
+					<div className={cx("border")}>
+						<p>
+							<DisplayLongString inputString={data} displayThresh={12} medium={true} />
+						</p>
+					</div>
 					<h2>Tx can be found in binance explorer</h2>
+
 					<button onClick={() => window.open(altLink, "__blank")}>
 						<span>BINANCE EXPLORER</span>
 						<img src={nextSVG} alt='next' />
@@ -56,7 +63,7 @@ const NotFound = ({altText = "Sorry! Page Not Found"}) => {
 };
 
 const getRoute = () => {
-	if (window.location.pathname.startsWith("/txs")) return ["tx", window.location.pathname.split("/txs")[1]];
+	if (window.location.pathname.startsWith("/txs")) return ["tx", window.location.pathname.split("/txs/")[1]];
 	return [null, ""];
 };
 

diff --git a/src/components/common/NotFound/NotFound.scss b/src/components/common/NotFound/NotFound.scss
@@ -47,17 +47,27 @@
 	font-style: normal;
 	letter-spacing: normal;
 	color: #222222;
-	> img {
-		width: 90px;
-		height: 90px;
-		object-fit: fill;
+	.border {
+		border-radius: 5px;
+		padding: 5px 10px;
+
+		border: 1px solid #D0D2D5;
+		> p {
+			font-size: 13px;
+		}
 		margin-bottom: 15px;
 	}
 	h2 {
 		font-size: 30px;
 		line-height: 1.23;
 		margin-bottom: 40px;
 	}
+	> img {
+		width: 90px;
+		height: 90px;
+		object-fit: fill;
+		margin-bottom: 15px;
+	}
 	> button {
 		display: flex;
 		justify-content: center;
@@ -91,6 +101,9 @@
 		}
 	}
 	@include media("<medium") {
+		> img {
+			margin-bottom: 5px;
+		}
 		> h2 {
 			font-size: 18px;
 			margin-bottom: 25px;