explorer: Fix setting custom RPC URL (#22187)

explorer/src/components/ClusterModal.tsx

@@ -92,8 +92,8 @@ function CustomClusterInput({ activeSuffix, active }: InputProps) {
     : "btn-white";
 
   const clusterLocation = (location: Location) => {
+    query.set("cluster", "custom");
     if (customUrl.length > 0) {
-      query.set("cluster", "custom");
       query.set("customUrl", customUrl);
     }
     return {
@@ -105,7 +105,6 @@ function CustomClusterInput({ activeSuffix, active }: InputProps) {
   const onUrlInput = useDebounceCallback((url: string) => {
     updateCustomUrl(url);
     if (url.length > 0) {
-      query.set("cluster", "custom");
       query.set("customUrl", url);
       history.push({ ...location, search: query.toString() });
     }
@@ -119,7 +118,7 @@ function CustomClusterInput({ activeSuffix, active }: InputProps) {
       </Link>
       {active && (
         <input
-          type="text"
+          type="url"
           defaultValue={customUrl}
           className={`form-control ${inputTextClass}`}
           onFocus={() => setEditing(true)}

explorer/src/components/common/HexData.tsx

@@ -3,7 +3,7 @@ import { Buffer } from "buffer";
 import { Copyable } from "./Copyable";
 
 export function HexData({ raw }: { raw: Buffer }) {
-  if (!raw) {
+  if (!raw || raw.length === 0) {
     return <span>No data</span>;
   }
 

explorer/src/providers/cluster.tsx

@@ -145,9 +145,8 @@ export function ClusterProvider({ children }: ClusterProviderProps) {
   const enableCustomUrl =
     localStorageIsAvailable() &&
     localStorage.getItem("enableCustomUrl") !== null;
-  const customUrl = enableCustomUrl
-    ? query.get("customUrl") || ""
-    : state.customUrl;
+  const customUrl =
+    (enableCustomUrl && query.get("customUrl")) || state.customUrl;
   const history = useHistory();
   const location = useLocation();
 
@@ -161,15 +160,6 @@ export function ClusterProvider({ children }: ClusterProviderProps) {
 
   // Reconnect to cluster when params change
   React.useEffect(() => {
-    if (cluster === Cluster.Custom) {
-      // Remove cluster param if custom url has not been set
-      if (customUrl.length === 0) {
-        query.delete("cluster");
-        history.push({ ...location, search: query.toString() });
-        return;
-      }
-    }
-
     updateCluster(dispatch, cluster, customUrl);
   }, [cluster, customUrl]); // eslint-disable-line react-hooks/exhaustive-deps
 
@@ -196,6 +186,9 @@ async function updateCluster(
   });
 
   try {
+    // validate url
+    new URL(customUrl);
+
     const connection = new Connection(clusterUrl(cluster, customUrl));
     const [firstAvailableBlock, epochSchedule, epochInfo, genesisHash] =
       await Promise.all([