Deal with missing pages

webclient/src/App.js

@@ -409,6 +409,7 @@ function TransactionDetail(props) {
 	const t = user.transactions.find(x => x.id == id);
 
 	return (
+		t ?
 			<Container>
 				<Header size='large'>Transaction Receipt</Header>
 
@@ -450,6 +451,8 @@ function TransactionDetail(props) {
 				</Table>
 
 			</Container>
+		:
+			<NotFound />
 	);
 }
 
@@ -464,6 +467,17 @@ function PleaseLogin() {
 	);
 };
 
+function NotFound() {
+	return (
+		<Container text>
+			<Message warning>
+				<Message.Header style={{ padding: 0 }}>The page you requested can't be found!</Message.Header>
+				<p>Visit our <Link to='/'>home page</Link> if you are lost.</p>
+			</Message>
+		</Container>
+	);
+};
+
 function App() {
 	const [token, setToken] = useState(localStorage.getItem('token', ''));
 	const [user, setUser] = useState(JSON.parse(localStorage.getItem('user', 'false')));
@@ -563,6 +577,9 @@ function App() {
 						<Transactions user={user} />
 					</Route>
 
+					<Route path='/:page'>
+						<NotFound />
+					</Route>
 				</Switch>
 			:
 				<Route path='/:page'>