From 6b25f83ee3842466f74f34196c7dd7de8fba91bf Mon Sep 17 00:00:00 2001
From: fmtabbara <fmtabbara@hotmail.co.uk>
Date: Tue, 12 Mar 2024 10:19:03 +0000
Subject: [PATCH] small UI updates

tidy up some text layouts + allow mixnode row selections
---
 explorer/src/components/Title.tsx             |  1 -
 .../src/components/Universal-DataGrid.tsx     |  6 ++--
 explorer/src/pages/Gateways/index.tsx         |  4 ++-
 explorer/src/pages/Mixnodes/index.tsx         | 34 +++++++++++++------
 4 files changed, 31 insertions(+), 14 deletions(-)

diff --git a/explorer/src/components/Title.tsx b/explorer/src/components/Title.tsx
index 9380d2c9c5..032837d3c8 100644
--- a/explorer/src/components/Title.tsx
+++ b/explorer/src/components/Title.tsx
@@ -5,7 +5,6 @@ export const Title: FCWithChildren<{ text: string }> = ({ text }) => (
   <Typography
     variant="h5"
     sx={{
-      mb: 3,
       fontWeight: 600,
     }}
     data-testid={text}
diff --git a/explorer/src/components/Universal-DataGrid.tsx b/explorer/src/components/Universal-DataGrid.tsx
index 0dc19edda8..6598dfb485 100644
--- a/explorer/src/components/Universal-DataGrid.tsx
+++ b/explorer/src/components/Universal-DataGrid.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { makeStyles } from '@mui/styles';
-import { DataGrid, GridColDef, useGridApiContext, useGridState } from '@mui/x-data-grid';
+import { DataGrid, GridColDef, GridEventListener, useGridApiContext, useGridState } from '@mui/x-data-grid';
 import Pagination from '@mui/material/Pagination';
 import { LinearProgress } from '@mui/material';
 import { GridInitialStateCommunity } from '@mui/x-data-grid/models/gridStateCommunity';
@@ -36,6 +36,7 @@ type DataGridProps = {
   rows: any;
   loading?: boolean;
   initialState?: GridInitialStateCommunity;
+  onRowClick?: GridEventListener<'rowClick'> | undefined;
 };
 export const UniversalDataGrid: FCWithChildren<DataGridProps> = ({
   rows,
@@ -44,11 +45,13 @@ export const UniversalDataGrid: FCWithChildren<DataGridProps> = ({
   pagination,
   pageSize,
   initialState,
+  onRowClick,
 }) => {
   if (loading) return <LinearProgress />;
 
   return (
     <DataGrid
+      onRowClick={onRowClick}
       pagination={pagination}
       rows={rows}
       components={{
@@ -84,7 +87,6 @@ export const UniversalDataGrid: FCWithChildren<DataGridProps> = ({
       }}
     />
   );
-  return null;
 };
 
 UniversalDataGrid.defaultProps = {
diff --git a/explorer/src/pages/Gateways/index.tsx b/explorer/src/pages/Gateways/index.tsx
index 78da55d1ab..c04b7eaf40 100644
--- a/explorer/src/pages/Gateways/index.tsx
+++ b/explorer/src/pages/Gateways/index.tsx
@@ -232,7 +232,9 @@ export const PageGateways: FCWithChildren = () => {
   if (gateways?.data) {
     return (
       <>
-        <Title text="Gateways" />
+        <Box mb={2}>
+          <Title text="Gateways" />
+        </Box>
         <Grid container>
           <Grid item xs={12}>
             <Card
diff --git a/explorer/src/pages/Mixnodes/index.tsx b/explorer/src/pages/Mixnodes/index.tsx
index 5baf4a546f..5e5caf9d2f 100644
--- a/explorer/src/pages/Mixnodes/index.tsx
+++ b/explorer/src/pages/Mixnodes/index.tsx
@@ -1,10 +1,9 @@
 import * as React from 'react';
 import { GridColDef, GridRenderCellParams } from '@mui/x-data-grid';
-import { Stack, Card, Grid, Box } from '@mui/material';
-import { useParams, useNavigate } from 'react-router-dom';
+import { Stack, Card, Grid, Box, Button } from '@mui/material';
+import { useParams, useNavigate, Link } from 'react-router-dom';
 import { SelectChangeEvent } from '@mui/material/Select';
 import { CopyToClipboard } from '@nymproject/react/clipboard/CopyToClipboard';
-import { useWallet } from '@cosmos-kit/react';
 import { useMainContext } from '@src/context/main';
 import {
   DelegateIconButton,
@@ -25,6 +24,8 @@ import { NYM_BIG_DIPPER } from '@src/api/constants';
 import { currencyToString } from '@src/utils/currency';
 import { splice } from '@src/utils';
 import { useGetMixNodeStatusColor, useIsMobile } from '@src/hooks';
+import { useWalletContext } from '@src/context/wallet';
+import { DelegationsProvider } from '@src/context/delegations';
 
 export const PageMixnodes: FCWithChildren = () => {
   const { mixnodes, fetchMixnodes } = useMainContext();
@@ -39,7 +40,7 @@ export const PageMixnodes: FCWithChildren = () => {
   const { status } = useParams<{ status: MixnodeStatusWithAll | undefined }>();
 
   const navigate = useNavigate();
-  const wallet = useWallet();
+  const { isWalletConnected } = useWalletContext();
   const isMobile = useIsMobile();
 
   const handleNewDelegation = (delegationModalProps: DelegationModalProps) => {
@@ -85,7 +86,7 @@ export const PageMixnodes: FCWithChildren = () => {
   };
 
   const handleOnDelegate = ({ identityKey, mixId }: { identityKey: string; mixId: number }) => {
-    if (wallet.status !== 'Connected') {
+    if (!isWalletConnected) {
       setConfirmationModalProps({
         status: 'info',
         message: 'Please connect your wallet to delegate',
@@ -349,8 +350,10 @@ export const PageMixnodes: FCWithChildren = () => {
   };
 
   return (
-    <>
-      <Title text="Mixnodes" />
+    <DelegationsProvider>
+      <Box mb={2}>
+        <Title text="Mixnodes" />
+      </Box>
       <Grid container>
         <Grid item xs={12}>
           <Card
@@ -363,6 +366,13 @@ export const PageMixnodes: FCWithChildren = () => {
               childrenBefore={
                 <MixNodeStatusDropdown sx={{ mr: 2 }} status={status} onSelectionChanged={handleMixnodeStatusChanged} />
               }
+              childrenAfter={
+                isWalletConnected && (
+                  <Button fullWidth size="large" variant="outlined" color="primary" component={Link} to="/delegations">
+                    Delegations
+                  </Button>
+                )
+              }
               onChangeSearch={handleSearch}
               onChangePageSize={handlePageSize}
               pageSize={pageSize}
@@ -382,7 +392,9 @@ export const PageMixnodes: FCWithChildren = () => {
 
       {itemSelectedForDelegation && (
         <DelegateModal
-          onClose={() => setItemSelectedForDelegation(undefined)}
+          onClose={() => {
+            setItemSelectedForDelegation(undefined);
+          }}
           header="Delegate"
           buttonText="Delegate stake"
           denom="nym"
@@ -398,10 +410,12 @@ export const PageMixnodes: FCWithChildren = () => {
           open={Boolean(confirmationModalProps)}
           onClose={async () => {
             setConfirmationModalProps(undefined);
-            // await fetchBalance();
+            if (confirmationModalProps.status === 'success') {
+              navigate('/delegations');
+            }
           }}
         />
       )}
-    </>
+    </DelegationsProvider>
   );
 };