From 01311a938bc8008af58230501b428352561daa24 Mon Sep 17 00:00:00 2001
From: David Rojas <lempira@gmail.com>
Date: Fri, 8 Nov 2024 09:43:45 -0500
Subject: [PATCH 1/3] test for preview

---
 src/features/network/components/network-configs-table.tsx | 4 ++++
 src/features/settings/components/settings.tsx             | 4 ++--
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/features/network/components/network-configs-table.tsx b/src/features/network/components/network-configs-table.tsx
index 5a3cde24..e1ea5b26 100644
--- a/src/features/network/components/network-configs-table.tsx
+++ b/src/features/network/components/network-configs-table.tsx
@@ -104,6 +104,10 @@ const tableColumns: ColumnDef<NetworkConfigWithId>[] = [
       )
     },
   },
+  {
+    id: 'activate',
+    header: '',
+  },
 ]
 
 type ButtonProps = {
diff --git a/src/features/settings/components/settings.tsx b/src/features/settings/components/settings.tsx
index 9e111f9d..f272fd45 100644
--- a/src/features/settings/components/settings.tsx
+++ b/src/features/settings/components/settings.tsx
@@ -1,11 +1,11 @@
-import { NetworkSelect } from '@/features/network/components/network-select'
+// 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 />
+      {/* <NetworkSelect /> */}
       <NetworkConfigsTable />
       <ClearCache />
     </div>

From b8342f8f4083105a535dd03717009229b7c09fd7 Mon Sep 17 00:00:00 2001
From: David Rojas <lempira@gmail.com>
Date: Fri, 8 Nov 2024 11:03:17 -0500
Subject: [PATCH 2/3] Added Activate btn network config table

---
 .../components/network-configs-table.tsx      | 38 ++++++++++++++++---
 src/features/settings/components/settings.tsx |  2 -
 2 files changed, 33 insertions(+), 7 deletions(-)

diff --git a/src/features/network/components/network-configs-table.tsx b/src/features/network/components/network-configs-table.tsx
index e1ea5b26..0831cf5b 100644
--- a/src/features/network/components/network-configs-table.tsx
+++ b/src/features/network/components/network-configs-table.tsx
@@ -16,8 +16,9 @@ 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, Power, 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'
@@ -61,6 +62,15 @@ export function NetworkConfigsTable() {
 }
 
 const tableColumns: ColumnDef<NetworkConfigWithId>[] = [
+  {
+    id: 'activate',
+    header: '',
+    accessorFn: (item) => item,
+    cell: (cell) => {
+      const networkConfig = cell.getValue<NetworkConfigWithId>()
+      return <ActivateButton networkConfig={networkConfig} />
+    },
+  },
   {
     header: 'Name',
     accessorFn: (item) => item.name,
@@ -104,10 +114,6 @@ const tableColumns: ColumnDef<NetworkConfigWithId>[] = [
       )
     },
   },
-  {
-    id: 'activate',
-    header: '',
-  },
 ]
 
 type ButtonProps = {
@@ -197,3 +203,25 @@ function ResetNetworkButton({ networkConfig, settingsHaveChanged }: ResetNetwork
     </ConfirmButton>
   )
 }
+
+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={24} />} />
+      ) : (
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button variant="ghost" size="icon" icon={<Power size={24} onClick={() => setSelectedNetwork(networkConfig.id)} />} />
+          </TooltipTrigger>
+          <TooltipContent>
+            <p>{`Activate ${networkConfig.name}`}</p>
+          </TooltipContent>
+        </Tooltip>
+      )}
+    </>
+  )
+}
diff --git a/src/features/settings/components/settings.tsx b/src/features/settings/components/settings.tsx
index f272fd45..348c7a5c 100644
--- a/src/features/settings/components/settings.tsx
+++ b/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>

From e66f52a14bc621790f9b14da838e2a1a693e5e7a Mon Sep 17 00:00:00 2001
From: David Rojas <lempira@gmail.com>
Date: Fri, 8 Nov 2024 11:46:31 -0500
Subject: [PATCH 3/3] Incorporated comments from slack

---
 src/features/layout/components/header.tsx     |  6 +-
 .../components/network-configs-table.tsx      | 98 ++++++++++++-------
 .../network/components/network-select.tsx     | 14 ++-
 3 files changed, 74 insertions(+), 44 deletions(-)

diff --git a/src/features/layout/components/header.tsx b/src/features/layout/components/header.tsx
index ecd6f645..512afa50 100644
--- a/src/features/layout/components/header.tsx
+++ b/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>
diff --git a/src/features/network/components/network-configs-table.tsx b/src/features/network/components/network-configs-table.tsx
index 0831cf5b..c1475317 100644
--- a/src/features/network/components/network-configs-table.tsx
+++ b/src/features/network/components/network-configs-table.tsx
@@ -16,13 +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, Power, CircleCheck } 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()
@@ -62,15 +64,6 @@ export function NetworkConfigsTable() {
 }
 
 const tableColumns: ColumnDef<NetworkConfigWithId>[] = [
-  {
-    id: 'activate',
-    header: '',
-    accessorFn: (item) => item,
-    cell: (cell) => {
-      const networkConfig = cell.getValue<NetworkConfigWithId>()
-      return <ActivateButton networkConfig={networkConfig} />
-    },
-  },
   {
     header: 'Name',
     accessorFn: (item) => item.name,
@@ -85,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>()
@@ -98,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>()
@@ -129,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">
@@ -159,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>
   )
 }
 
@@ -190,17 +203,22 @@ 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>
   )
 }
 
@@ -211,11 +229,15 @@ function ActivateButton({ networkConfig }: ButtonProps) {
   return (
     <>
       {isNetworkActive ? (
-        <Button variant="ghost" size="icon" className="pointer-events-none text-primary" icon={<CircleCheck size={24} />} />
+        <Button variant="ghost" size="icon" className="pointer-events-none text-primary" icon={<CircleCheck size={ICON_BUTTON_SIZE} />} />
       ) : (
         <Tooltip>
           <TooltipTrigger asChild>
-            <Button variant="ghost" size="icon" icon={<Power size={24} onClick={() => setSelectedNetwork(networkConfig.id)} />} />
+            <Button
+              variant="outline"
+              size="icon"
+              icon={<Plug size={ICON_BUTTON_SIZE} onClick={() => setSelectedNetwork(networkConfig.id)} />}
+            />
           </TooltipTrigger>
           <TooltipContent>
             <p>{`Activate ${networkConfig.name}`}</p>
diff --git a/src/features/network/components/network-select.tsx b/src/features/network/components/network-select.tsx
index 6fa86688..8fb1c9c0 100644
--- a/src/features/network/components/network-select.tsx
+++ b/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" />