Custom clusters (#384)

src/components/AddCustomClusterDialog.js

@@ -0,0 +1,58 @@
+import React, { useState } from 'react';
+import DialogActions from '@material-ui/core/DialogActions';
+import Button from '@material-ui/core/Button';
+import DialogTitle from '@material-ui/core/DialogTitle';
+import DialogContent from '@material-ui/core/DialogContent';
+import TextField from '@material-ui/core/TextField';
+import DialogForm from './DialogForm';
+
+export default function AddCustomClusterDialog({ open, onAdd, onClose }) {
+  const [name, setName] = useState('');
+  const [apiUrl, setApiUrl] = useState('');
+
+  return (
+    <DialogForm
+      open={open}
+      onEnter={() => {
+        setName('');
+        setApiUrl('');
+      }}
+      onClose={onClose}
+      onSubmit={() => onAdd({ name, apiUrl })}
+      fullWidth
+    >
+      <DialogTitle>Add Custom Network</DialogTitle>
+      <DialogContent style={{ paddingTop: 16 }}>
+        <div
+          style={{
+            display: 'flex',
+            flexDirection: 'column',
+          }}
+        >
+          <TextField
+            label="Name"
+            fullWidth
+            variant="outlined"
+            margin="normal"
+            value={name}
+            onChange={(e) => setName(e.target.value.trim())}
+          />
+          <TextField
+            label="Url"
+            fullWidth
+            variant="outlined"
+            margin="normal"
+            value={apiUrl}
+            onChange={(e) => setApiUrl(e.target.value.trim())}
+          />
+        </div>
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={onClose}>Close</Button>
+        <Button type="submit" color="primary">
+          Add
+        </Button>
+      </DialogActions>
+    </DialogForm>
+  );
+}

src/components/NavigationFrame.js

@@ -4,7 +4,7 @@ import AppBar from '@material-ui/core/AppBar';
 import Typography from '@material-ui/core/Typography';
 import { makeStyles } from '@material-ui/core/styles';
 import { useConnectionConfig } from '../utils/connection';
-import { CLUSTERS, clusterForEndpoint } from '../utils/clusters';
+import {CLUSTERS, clusterForEndpoint, getClusters, addCustomCluster, customClusterExists} from '../utils/clusters';
 import Button from '@material-ui/core/Button';
 import Menu from '@material-ui/core/Menu';
 import MenuItem from '@material-ui/core/MenuItem';
@@ -36,6 +36,7 @@ import { Badge } from '@material-ui/core';
 import { useConnectedWallets } from '../utils/connected-wallets';
 import { usePage } from '../utils/page';
 import { MonetizationOn, OpenInNew } from '@material-ui/icons';
+import AddCustomClusterDialog from "./AddCustomClusterDialog";
 
 const useStyles = makeStyles((theme) => ({
   content: {
@@ -203,10 +204,19 @@ function NetworkSelector() {
   const { endpoint, setEndpoint } = useConnectionConfig();
   const cluster = useMemo(() => clusterForEndpoint(endpoint), [endpoint]);
   const [anchorEl, setAnchorEl] = useState(null);
+  const [addCustomNetworkOpen, setCustomNetworkOpen] = useState(false);
   const classes = useStyles();
 
   return (
     <>
+      <AddCustomClusterDialog
+        open={addCustomNetworkOpen}
+        onClose={() => setCustomNetworkOpen(false)}
+        onAdd={({ name, apiUrl }) => {
+          addCustomCluster(name, apiUrl);
+          setCustomNetworkOpen(false);
+        }}
+      />
       <Hidden xsDown>
         <Button
           color="inherit"
@@ -233,7 +243,7 @@ function NetworkSelector() {
         }}
         getContentAnchorEl={null}
       >
-        {CLUSTERS.map((cluster) => (
+        {getClusters().map((cluster) => (
           <MenuItem
             key={cluster.apiUrl}
             onClick={() => {
@@ -252,6 +262,15 @@ function NetworkSelector() {
               : cluster.apiUrl}
           </MenuItem>
         ))}
+        <MenuItem
+          onClick={() => {
+            setCustomNetworkOpen(true);
+          }}
+        >
+          <ListItemIcon className={classes.menuItemIcon}>
+          </ListItemIcon>
+          {customClusterExists() ? 'Edit Custom Endpoint' : 'Add Custom Endpoint'}
+        </MenuItem>
       </Menu>
     </>
   );

src/utils/clusters.js

@@ -35,5 +35,22 @@ export const CLUSTERS = [
 ];
 
 export function clusterForEndpoint(endpoint) {
-  return CLUSTERS.find(({ apiUrl }) => apiUrl === endpoint);
+  return getClusters().find(({ apiUrl }) => apiUrl === endpoint);
+}
+
+const customClusterConfigKey = "customClusterConfig";
+
+export function addCustomCluster(name, apiUrl) {
+  const stringifiedConfig = JSON.stringify({name: name, label: name, apiUrl: apiUrl, clusterSlug: null});
+  localStorage.setItem(customClusterConfigKey, stringifiedConfig);
+}
+
+export function customClusterExists() {
+  return !!localStorage.getItem(customClusterConfigKey)
+}
+
+export function getClusters() {
+  const stringifiedConfig = localStorage.getItem(customClusterConfigKey);
+  const config = stringifiedConfig ? JSON.parse(stringifiedConfig) : null;
+  return  config ? [...CLUSTERS, config] : CLUSTERS;
 }