feat: keep custom transports in localstorage

package.json

@@ -27,6 +27,7 @@
     "@types/jest": "^24.0.13",
     "@types/qs": "^6.5.3",
     "@types/react-dom": "^16.8.4",
+    "@types/use-persisted-state": "^0.3.0",
     "jest": "24.9.0",
     "monaco-editor-webpack-plugin": "^1.7.0",
     "react-scripts": "^3.3.0",
@@ -68,6 +69,7 @@
     "react-split-pane": "^0.1.87",
     "semantic-release": "^15.13.21",
     "use-dark-mode": "^2.3.1",
-    "use-debounce": "^3.3.0"
+    "use-debounce": "^3.3.0",
+    "use-persisted-state": "^0.3.3"
   }
 }

src/containers/Inspector.tsx

@@ -27,6 +27,7 @@ import {
   ListItemText,
   Container,
 } from "@material-ui/core";
+import createPersistedState from "use-persisted-state";
 import Brightness3Icon from "@material-ui/icons/Brightness3";
 import WbSunnyIcon from "@material-ui/icons/WbSunny";
 import { JSONRPCError } from "@open-rpc/client-js/build/Error";
@@ -40,6 +41,8 @@ import useTransport, { ITransport, IWebTransport, TTransport } from "../hooks/us
 import JSONRPCLogger, { JSONRPCLog } from "@open-rpc/logs-react";
 import OptionsEditor from "./OptionsEditor";
 
+const useCustomTransportList = createPersistedState("inspector-custom-transports");
+
 const defaultTransports: ITransport[] = [
   {
     type: "http",
@@ -167,7 +170,7 @@ const Inspector: React.FC<IProps> = (props) => {
     params: [],
     id: 0,
   });
-  const [transportList, setTransportList] = useState(() => {
+  const [transportList, setTransportList] = useCustomTransportList(() => {
     if (props.customTransport) {
       return [...defaultTransports, props.customTransport];
     }
@@ -222,8 +225,8 @@ const Inspector: React.FC<IProps> = (props) => {
 
   useEffect(() => {
     if (props.transport) {
-      const t = defaultTransports
-        .find((tp: ITransport) => tp.type === props.transport);
+      const t = transportList
+        .find((tp: ITransport) => tp.name?.toLowerCase() === props.transport?.toLowerCase());
       if (t) {
         setSelectedTransport(t);
       }