diff --git a/src/components/layout/SensitiveInfoToggle.js b/src/components/layout/SensitiveInfoToggle.js
new file mode 100644
index 0000000..e88e837
--- /dev/null
+++ b/src/components/layout/SensitiveInfoToggle.js
@@ -0,0 +1,25 @@
+import React from "react";
+import { IconButton } from "@material-ui/core";
+import {
+ Visibility as VisibilityIcon,
+ VisibilityOff as VisibilityOffIcon
+} from "@material-ui/icons";
+import { useSensitiveInfo } from "../../hooks";
+
+const SensitiveInfoToggle = () => {
+ const { enabled, onSensitiveInfoEnabled } = useSensitiveInfo();
+
+ const handleChange = () => onSensitiveInfoEnabled(!enabled);
+
+ return (
+
+ {enabled ? : }
+
+ );
+};
+
+export default SensitiveInfoToggle;
diff --git a/src/components/layout/TopBar.js b/src/components/layout/TopBar.js
index 026f3a4..b065e81 100644
--- a/src/components/layout/TopBar.js
+++ b/src/components/layout/TopBar.js
@@ -6,6 +6,7 @@ import { AppBar, Toolbar, Typography, IconButton } from "@material-ui/core";
import MenuIcon from "@material-ui/icons/Menu";
import ProfileButton from "./ProfileButton";
import LightDarkToggle from "./LightDarkToggle";
+import SensitiveInfoToggle from "./SensitiveInfoToggle";
import styles from "./styles";
const useStyles = makeStyles(styles);
@@ -35,6 +36,7 @@ const TopBar = ({ open, handleDrawerOpen }) => {
Network resurrector
+
diff --git a/src/hooks/index.js b/src/hooks/index.js
index bc64692..a6f8e8a 100644
--- a/src/hooks/index.js
+++ b/src/hooks/index.js
@@ -1 +1,4 @@
-export { useToast } from "./useToast";
+import { useToast } from "./useToast";
+import { useSensitiveInfo } from "../providers/SensitiveInfoProvider";
+
+export { useToast, useSensitiveInfo };
diff --git a/src/index.js b/src/index.js
index 2dc491a..2706ab8 100644
--- a/src/index.js
+++ b/src/index.js
@@ -6,20 +6,23 @@ import App from "./components/App";
import { TuitioProvider } from "@flare/tuitio-client-react";
import ApplicationStateProvider from "./providers/ApplicationStateProvider";
import ToastProvider from "./providers/ToastProvider";
+import SensitiveInfoProvider from "./providers/SensitiveInfoProvider";
import "./utils/i18n";
ReactDOM.render(
-
-
-
- Loading...}>
-
-
-
-
-
-
+
+
+
+
+ Loading...}>
+
+
+
+
+
+
+
,
document.getElementById("root")
);
diff --git a/src/providers/SensitiveInfoProvider.js b/src/providers/SensitiveInfoProvider.js
new file mode 100644
index 0000000..7507230
--- /dev/null
+++ b/src/providers/SensitiveInfoProvider.js
@@ -0,0 +1,58 @@
+import React, { useReducer, useMemo, useContext } from "react";
+import PropTypes from "prop-types";
+
+const SensitiveInfoContext = React.createContext();
+
+const initialState = {
+ enabled: false
+};
+
+const reducer = (state = initialState, action) => {
+ switch (action.type) {
+ case "onSensitiveInfoEnabled": {
+ return {
+ ...state,
+ enabled: action.payload.enabled
+ };
+ }
+ default: {
+ return state;
+ }
+ }
+};
+
+const dispatchActions = dispatch => ({
+ onSensitiveInfoEnabled: enabled =>
+ dispatch({ type: "onSensitiveInfoEnabled", payload: { enabled } })
+});
+
+const useSensitiveInfo = () => {
+ const { state, actions } = useContext(SensitiveInfoContext);
+ const { enabled } = state;
+ const { onSensitiveInfoEnabled } = actions;
+
+ return { enabled, onSensitiveInfoEnabled };
+};
+
+const SensitiveInfoProvider = ({ children }) => {
+ const [state, dispatch] = useReducer(reducer, initialState);
+ const actions = useMemo(() => dispatchActions(dispatch), [dispatch]);
+
+ return (
+
+ {children}
+
+ );
+};
+
+SensitiveInfoProvider.propTypes = {
+ children: PropTypes.node.isRequired
+};
+
+export { SensitiveInfoProvider, useSensitiveInfo };
+export default SensitiveInfoProvider;