explorer: detect if localstorage is available (#15499)

* feat: detect if localstorage is available

* feat: do not show developer settings in cluster modal if localStorage is disabled

explorer/src/components/ClusterModal.tsx

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

explorer/src/providers/cluster.tsx

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

explorer/src/utils/index.tsx

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