gaspersic/solana
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

explorer: detect if localstorage is available (#15499)

Browse Source 
* feat: detect if localstorage is available

* feat: do not show developer settings in cluster modal if localStorage is disabled
This commit is contained in:
Josh
2021-02-23 14:53:22 -08:00
committed by GitHub
parent 52f2d425e5
commit 53dfc211ec
3 changed files with 45 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
explorer/src/components/ClusterModal.tsx
View File

@ -13,14 +13,16 @@ import {
useClusterModal, useClusterModal,
useUpdateCustomUrl, useUpdateCustomUrl,
} from "providers/cluster"; } from "providers/cluster";
import { assertUnreachable } from "../utils"; import { assertUnreachable, localStorageIsAvailable } from "../utils";
import { Overlay } from "./common/Overlay"; import { Overlay } from "./common/Overlay";
import { useQuery } from "utils/url"; import { useQuery } from "utils/url";
export function ClusterModal() { export function ClusterModal() {
const [show, setShow] = useClusterModal(); const [show, setShow] = useClusterModal();
const onClose = () => setShow(false); const onClose = () => setShow(false);
const enableCustomUrl = localStorage.getItem("enableCustomUrl") !== null; const showDeveloperSettings = localStorageIsAvailable();
const enableCustomUrl =
showDeveloperSettings && localStorage.getItem("enableCustomUrl") !== null;
const onToggleCustomUrlFeature = (e: ChangeEvent<HTMLInputElement>) => { const onToggleCustomUrlFeature = (e: ChangeEvent<HTMLInputElement>) => {
if (e.target.checked) { if (e.target.checked) {
localStorage.setItem("enableCustomUrl", ""); localStorage.setItem("enableCustomUrl", "");
@ -45,29 +47,33 @@ export function ClusterModal() {
<h2 className="text-center mb-4 mt-4">Choose a Cluster</h2> <h2 className="text-center mb-4 mt-4">Choose a Cluster</h2>
<ClusterToggle /> <ClusterToggle />
<hr /> {showDeveloperSettings && (
<>
<hr />
<h2 className="text-center mb-4 mt-4">Developer Settings</h2> <h2 className="text-center mb-4 mt-4">Developer Settings</h2>
<div className="d-flex justify-content-between"> <div className="d-flex justify-content-between">
<span className="mr-3">Enable custom url param</span> <span className="mr-3">Enable custom url param</span>
<div className="custom-control custom-switch d-inline"> <div className="custom-control custom-switch d-inline">
<input <input
type="checkbox" type="checkbox"
defaultChecked={enableCustomUrl} defaultChecked={enableCustomUrl}
className="custom-control-input" className="custom-control-input"
id="cardToggle" id="cardToggle"
onChange={onToggleCustomUrlFeature} onChange={onToggleCustomUrlFeature}
/> />
<label <label
className="custom-control-label" className="custom-control-label"
htmlFor="cardToggle" htmlFor="cardToggle"
></label> ></label>
</div> </div>
</div> </div>
<p className="text-muted font-size-sm mt-3"> <p className="text-muted font-size-sm mt-3">
Enable this setting to easily connect to a custom cluster via Enable this setting to easily connect to a custom cluster
the "customUrl" url param. via the "customUrl" url param.
</p> </p>
</>
)}
</div> </div>
</div> </div>
</div> </div>

5
explorer/src/providers/cluster.tsx
View File

@ -3,6 +3,7 @@ import { clusterApiUrl, Connection } from "@solana/web3.js";
import { useQuery } from "../utils/url"; import { useQuery } from "../utils/url";
import { useHistory, useLocation } from "react-router-dom"; import { useHistory, useLocation } from "react-router-dom";
import { reportError } from "utils/sentry"; import { reportError } from "utils/sentry";
import { localStorageIsAvailable } from "utils";
export enum ClusterStatus { export enum ClusterStatus {
Connected, Connected,
@ -134,7 +135,9 @@ export function ClusterProvider({ children }: ClusterProviderProps) {
const [showModal, setShowModal] = React.useState(false); const [showModal, setShowModal] = React.useState(false);
const query = useQuery(); const query = useQuery();
const cluster = parseQuery(query); const cluster = parseQuery(query);
const enableCustomUrl = localStorage.getItem("enableCustomUrl") !== null; const enableCustomUrl =
localStorageIsAvailable() &&
localStorage.getItem("enableCustomUrl") !== null;
const customUrl = enableCustomUrl const customUrl = enableCustomUrl
? query.get("customUrl") || "" ? query.get("customUrl") || ""
: state.customUrl; : state.customUrl;

11
explorer/src/utils/index.tsx
View File

@ -99,3 +99,14 @@ export function wrap(input: string, length: number): string {
} }
return result.join("\n"); return result.join("\n");
} }
export function localStorageIsAvailable() {
const test = "test";
try {
localStorage.setItem(test, test);
localStorage.removeItem(test);
return true;
} catch (e) {
return false;
}
}