Add network selector (#7)

explorer/src/components/NetworkStatusButton.tsx

@@ -1,27 +1,47 @@
 import React from "react";
-import { useNetwork, NetworkStatus } from "../providers/network";
+import { useNetwork, NetworkStatus, Network } from "../providers/network";
 
-function NetworkStatusButton() {
-  const { status, url } = useNetwork();
+function NetworkStatusButton({ onClick }: { onClick: () => void }) {
+  return (
+    <div onClick={onClick}>
+      <Button />
+    </div>
+  );
+}
+
+function Button() {
+  const { status, network, name, customUrl } = useNetwork();
+  const statusName =
+    network !== Network.Custom ? `${name} Cluster` : `${customUrl}`;
 
   switch (status) {
     case NetworkStatus.Connected:
-      return <span className="btn btn-white lift">{url}</span>;
+      return (
+        <span className="btn btn-outline-success lift">
+          <span className="fe fe-check-circle mr-2"></span>
+          {statusName}
+        </span>
+      );
 
     case NetworkStatus.Connecting:
       return (
-        <span className="btn btn-warning lift">
-          {"Connecting "}
+        <span className="btn btn-outline-warning lift">
           <span
-            className="spinner-grow spinner-grow-sm text-dark"
+            className="spinner-grow spinner-grow-sm text-warning mr-2"
             role="status"
             aria-hidden="true"
           ></span>
+          {statusName}
         </span>
       );
 
     case NetworkStatus.Failure:
-      return <span className="btn btn-danger lift">Disconnected</span>;
+      return (
+        <span className="btn btn-outline-danger lift">
+          <span className="fe fe-alert-circle mr-2"></span>
+          {statusName}
+        </span>
+      );
   }
 }