Add network select to network config table

src/features/layout/components/header.tsx

@@ -6,6 +6,7 @@ import { Search } from '@/features/search/components/search'
 import { useNetworkConfig } from '@/features/network/data'
 import { ConnectWalletButton } from '@/features/wallet/components/connect-wallet-button'
 import { Urls } from '@/routes/urls'
+import { NetworkSelect } from '@/features/network/components/network-select'
 
 type Props = {
   className?: string
@@ -24,9 +25,10 @@ export function Header({ className }: Props) {
         <Search />
       </div>
       <div className={cn('flex items-center gap-4 ml-auto overflow-hidden')}>
-        <TemplatedNavLink urlTemplate={Urls.Settings} className="ml-2 truncate">
+        <NetworkSelect showLabel={false} />
+        {/* <TemplatedNavLink urlTemplate={Urls.Settings} className="ml-2 truncate">
           {networkConfig.name}
-        </TemplatedNavLink>
+        </TemplatedNavLink> */}
         <ConnectWalletButton />
       </div>
     </header>

src/features/network/components/network-configs-table.tsx

@@ -16,12 +16,15 @@ import { CreateNetworkConfigForm } from '@/features/network/components/create-ne
 import { ConfirmButton } from '@/features/common/components/confirm-button'
 import { toast } from 'react-toastify'
 import { NetworkConfigWithId } from '@/features/network/data/types'
-import { Pencil, Plus, Trash, RotateCcw } from 'lucide-react'
+import { Pencil, Plus, Trash, RotateCcw, Plug, CircleCheck } from 'lucide-react'
 import { useRefreshDataProviderToken } from '@/features/common/data'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/features/common/components/tooltip'
 
 export const networkConfigsTableLabel = 'Network Configs'
 export const createNetworkConfigDialogLabel = 'Create Network'
 
+const ICON_BUTTON_SIZE = 24
+
 export function NetworkConfigsTable() {
   const [createNetworkConfigDialogOpen, setCreateNetworkConfigDialogOpen] = useState(false)
   const networkConfigs = useNetworkConfigs()
@@ -75,10 +78,20 @@ const tableColumns: ColumnDef<NetworkConfigWithId>[] = [
     meta: { className: 'hidden md:table-cell' },
     accessorFn: (item) => `${trimCharacterFromEnd(item.indexer.server, '/')}:${item.indexer.port}`,
   },
+  {
+    id: 'activate',
+    header: '',
+    meta: { className: `w-[${ICON_BUTTON_SIZE}px]` },
+    accessorFn: (item) => item,
+    cell: (cell) => {
+      const networkConfig = cell.getValue<NetworkConfigWithId>()
+      return <ActivateButton networkConfig={networkConfig} />
+    },
+  },
   {
     id: 'edit',
     header: '',
-    meta: { className: 'w-24' },
+    meta: { className: `w-[${ICON_BUTTON_SIZE}px]` },
     accessorFn: (item) => item,
     cell: (cell) => {
       const networkConfig = cell.getValue<NetworkConfigWithId>()
@@ -88,7 +101,7 @@ const tableColumns: ColumnDef<NetworkConfigWithId>[] = [
   {
     id: 'delete',
     header: '',
-    meta: { className: 'w-28' },
+    meta: { className: `w-[${ICON_BUTTON_SIZE}px]` },
     accessorFn: (item) => item,
     cell: (cell) => {
       const networkConfig = cell.getValue<NetworkConfigWithId>()
@@ -119,9 +132,14 @@ function EditNetworkButton({ networkConfig }: ButtonProps) {
 
   return (
     <>
-      <Button variant="outline" onClick={openDialog} icon={<Pencil size={16} />}>
-        Edit
-      </Button>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button variant="outline" onClick={openDialog} size="icon" icon={<Pencil size={ICON_BUTTON_SIZE} />} />
+        </TooltipTrigger>
+        <TooltipContent>
+          <p>{`Edit ${networkConfig.name}`}</p>
+        </TooltipContent>
+      </Tooltip>
       <Dialog open={dialogOpen} onOpenChange={setDialogOpen} modal={true}>
         <DialogContent className="bg-card">
           <DialogHeader className="flex-row items-center space-y-0">
@@ -149,16 +167,21 @@ function DeleteNetworkButton({ networkConfig }: ButtonProps) {
   }, [deleteNetworkConfig, networkConfig.id, networkConfig.name, selectedNetwork, setSelectedNetwork])
 
   return (
-    <ConfirmButton
-      variant="destructive"
-      onConfirm={deleteNetwork}
-      dialogHeaderText="Delete Network?"
-      dialogContent={<div>Are you sure you want to delete '{networkConfig.name}'?</div>}
-      icon={<Trash size={16} />}
-      className="w-24"
-    >
-      Delete
-    </ConfirmButton>
+    <Tooltip>
+      <TooltipTrigger>
+        <ConfirmButton
+          variant="destructive"
+          onConfirm={deleteNetwork}
+          dialogHeaderText="Delete Network?"
+          dialogContent={<div>Are you sure you want to delete '{networkConfig.name}'?</div>}
+          size="icon"
+          icon={<Trash size={ICON_BUTTON_SIZE} />}
+        />
+      </TooltipTrigger>
+      <TooltipContent>
+        <p>{`Delete ${networkConfig.name}`}</p>
+      </TooltipContent>
+    </Tooltip>
   )
 }
 
@@ -180,16 +203,47 @@ function ResetNetworkButton({ networkConfig, settingsHaveChanged }: ResetNetwork
   }, [deleteNetworkConfig, networkConfig.id, networkConfig.name, refreshDataProviderToken, selectedNetwork])
 
   return (
-    <ConfirmButton
-      variant="destructive"
-      onConfirm={resetNetworkToDefaults}
-      dialogHeaderText="Reset Network?"
-      dialogContent={<div>Are you sure you want to reset '{networkConfig.name}' to the default settings?</div>}
-      icon={<RotateCcw size={16} />}
-      className="w-24"
-      disabled={!settingsHaveChanged}
-    >
-      Reset
-    </ConfirmButton>
+    <Tooltip>
+      <TooltipTrigger>
+        <ConfirmButton
+          variant="outline"
+          onConfirm={resetNetworkToDefaults}
+          dialogHeaderText="Reset Network?"
+          dialogContent={<div>Are you sure you want to reset '{networkConfig.name}' to the default settings?</div>}
+          size="icon"
+          icon={<RotateCcw size={ICON_BUTTON_SIZE} />}
+          disabled={!settingsHaveChanged}
+        />
+      </TooltipTrigger>
+      <TooltipContent>
+        <p>{`Reset ${networkConfig.name}`}</p>
+      </TooltipContent>
+    </Tooltip>
+  )
+}
+
+function ActivateButton({ networkConfig }: ButtonProps) {
+  const [selectedNetwork, setSelectedNetwork] = useSelectedNetwork()
+  const isNetworkActive = selectedNetwork === networkConfig.id
+
+  return (
+    <>
+      {isNetworkActive ? (
+        <Button variant="ghost" size="icon" className="pointer-events-none text-primary" icon={<CircleCheck size={ICON_BUTTON_SIZE} />} />
+      ) : (
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button
+              variant="outline"
+              size="icon"
+              icon={<Plug size={ICON_BUTTON_SIZE} onClick={() => setSelectedNetwork(networkConfig.id)} />}
+            />
+          </TooltipTrigger>
+          <TooltipContent>
+            <p>{`Activate ${networkConfig.name}`}</p>
+          </TooltipContent>
+        </Tooltip>
+      )}
+    </>
   )
 }

src/features/network/components/network-select.tsx

@@ -8,7 +8,11 @@ import { Urls } from '@/routes/urls'
 
 const settingsUrl = Urls.Settings.build({})
 
-export function NetworkSelect() {
+type NetworkSelectProps = {
+  showLabel?: boolean
+}
+
+export function NetworkSelect({ showLabel = true }: NetworkSelectProps) {
   const [selectedNetwork, setSelectedNetwork] = useSelectedNetwork()
   const networkConfigs = useNetworkConfigs()
   const navigate = useNavigate()
@@ -26,9 +30,11 @@ export function NetworkSelect() {
 
   return (
     <div className={cn('flex w-48 flex-col')}>
-      <Label htmlFor="network" className={cn('ml-0.5 mb-2')}>
-        Active network
-      </Label>
+      {showLabel && (
+        <Label htmlFor="network" className={cn('ml-0.5 mb-2')}>
+          Active network
+        </Label>
+      )}
       <Select onValueChange={handleNetworkChange} value={selectedNetwork}>
         <SelectTrigger id="network">
           <SelectValue placeholder="Select network" />

src/features/settings/components/settings.tsx

@@ -1,11 +1,9 @@
-import { NetworkSelect } from '@/features/network/components/network-select'
 import { ClearCache } from './clear-cache'
 import { NetworkConfigsTable } from '@/features/network/components/network-configs-table'
 
 export function Settings() {
   return (
     <div className="flex flex-col space-y-8">
-      <NetworkSelect />
       <NetworkConfigsTable />
       <ClearCache />
     </div>