Fix table layouts

tidy up exports

explorer/src/components/ConnectKeplrWallet.tsx

@@ -67,7 +67,11 @@ export const ConnectKeplrWallet = () => {
       );
     }
 
-    return <Button onClick={() => connect()}>Connect Wallet</Button>;
+    return (
+      <Button variant="outlined" onClick={() => connect()}>
+        Connect Wallet
+      </Button>
+    );
   };
 
   return <Box sx={{ mr: 2 }}>{getGlobalbutton()}</Box>;

explorer/src/components/Delegations/DelegateIconButton.tsx

@@ -1,22 +1,23 @@
 import * as React from 'react';
 import { IconButton, Tooltip } from '@mui/material';
 import { SxProps } from '@mui/system';
-import { DelegateIcon } from '../../../icons/DelevateSVG';
+import { DelegateIcon } from '../../icons/DelevateSVG';
 
 export const DelegateIconButton: FCWithChildren<{
+  size?: 'small' | 'medium';
   disabled?: boolean;
   tooltip?: React.ReactNode;
   sx?: SxProps;
   onDelegate: () => void;
-}> = ({ tooltip, onDelegate, sx, disabled }) => {
+}> = ({ tooltip, onDelegate, sx, disabled, size = 'medium' }) => {
   const handleOnDelegate = (e: React.MouseEvent<HTMLButtonElement>) => {
     e.stopPropagation();
     onDelegate();
   };
   return (
     <Tooltip title={tooltip || undefined}>
-      <IconButton disabled={disabled} onClick={handleOnDelegate} sx={sx} color="primary">
-        <DelegateIcon />
+      <IconButton size={size} disabled={disabled} onClick={handleOnDelegate} sx={sx}>
+        <DelegateIcon fontSize={size} />
       </IconButton>
     </Tooltip>
   );

explorer/src/components/Delegations/DelegateModal.tsx

@@ -7,8 +7,8 @@ import { useChain } from '@cosmos-kit/react';
 import { SimpleModal } from './SimpleModal';
 import { ModalListItem } from './ModalListItem';
 import { DelegationModalProps } from './DelegationModal';
-import { unymToNym, validateAmount } from '../../../utils/currency';
-import { urls } from '../../../utils';
+import { unymToNym, validateAmount } from '../../utils/currency';
+import { urls } from '../../utils';
 
 const MIN_AMOUNT_TO_DELEGATE = 10;
 const MIXNET_CONTRACT_ADDRESS = 'n17srjznxl9dvzdkpwpw24gg668wc73val88a6m5ajg6ankwvz9wtst0cznr';

explorer/src/components/Delegations/SimpleModal.tsx

@@ -4,7 +4,7 @@ import CloseIcon from '@mui/icons-material/Close';
 import ErrorOutline from '@mui/icons-material/ErrorOutline';
 import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
 import ArrowBackIosNewIcon from '@mui/icons-material/ArrowBackIosNew';
-import { useIsMobile } from '../../../hooks/useIsMobile';
+import { useIsMobile } from '../../hooks/useIsMobile';
 
 export const modalStyle = (width: number | string = 600) => ({
   position: 'absolute' as 'absolute',

explorer/src/components/Delegations/index.ts

@@ -0,0 +1,10 @@
+export * from './ConfirmationModal';
+export * from './DelegateIconButton';
+export * from './DelegationModal';
+export * from './DelegateModal';
+export * from './ErrorModal';
+export * from './LoadingModal';
+export * from './ModalDivider';
+export * from './ModalListItem';
+export * from './SimpleModal';
+export * from './styles';

explorer/src/components/Filters/Filters.tsx

@@ -1,5 +1,4 @@
 import React, { useState, useEffect, useRef, useCallback } from 'react';
-import { Tune } from '@mui/icons-material';
 import {
   Button,
   Dialog,
@@ -20,6 +19,7 @@ import { EnumFilterKey, TFilterItem, TFilters } from '../../typeDefs/filters';
 import { formatOnSave, generateFilterSchema } from './filterSchema';
 import { Api } from '../../api';
 import { useIsMobile } from '../../hooks/useIsMobile';
+import FiltersButton from './FiltersButton';
 
 const FilterItem = ({
   label,
@@ -150,15 +150,7 @@ export const Filters = () => {
           {mixnodes?.data?.length} mixnodes matched your criteria
         </Alert>
       </Snackbar>
-      <Button
-        size="large"
-        variant="contained"
-        endIcon={<Tune />}
-        onClick={handleToggleShowFilters}
-        sx={{ textTransform: 'none', width: isMobile ? '100%' : 'inherit' }}
-      >
-        Advanced filters
-      </Button>
+      <FiltersButton onClick={handleToggleShowFilters} fullWidth />
       <Dialog open={showFilters} onClose={handleToggleShowFilters} maxWidth="md" fullWidth>
         <DialogTitle>Mixnode filters</DialogTitle>
         <DialogContent dividers>

explorer/src/components/Filters/FiltersButton.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Button, IconButton } from '@mui/material';
+import { Tune } from '@mui/icons-material';
+
+type FiltersButtonProps = {
+  iconOnly?: boolean;
+  fullWidth?: boolean;
+  onClick: () => void;
+};
+
+const FiltersButton = ({ iconOnly, fullWidth, onClick }: FiltersButtonProps) => {
+  if (iconOnly) {
+    return (
+      <IconButton onClick={onClick} color="primary">
+        <Tune />
+      </IconButton>
+    );
+  }
+
+  return (
+    <Button
+      fullWidth={fullWidth}
+      size="large"
+      variant="contained"
+      endIcon={<Tune />}
+      onClick={onClick}
+      sx={{ textTransform: 'none' }}
+    >
+      Filters
+    </Button>
+  );
+};
+
+export default FiltersButton;

explorer/src/components/MixNodes/DetailSection.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { Box, Button, Grid, Typography, useTheme } from '@mui/material';
 import Identicon from 'react-identicons';
+import { useIsMobile } from '@src/hooks/useIsMobile';
 import { MixnodeRowType } from '.';
 import { getMixNodeStatusText, MixNodeStatus } from './Status';
 import { MixNodeDescriptionResponse } from '../../typeDefs/explorer-api';
-import { useIsMobile } from '../../hooks/useIsMobile';
 
 interface MixNodeDetailProps {
   mixNodeRow: MixnodeRowType;
@@ -16,7 +16,7 @@ export const MixNodeDetailSection: FCWithChildren<MixNodeDetailProps> = ({ mixNo
   const palette = [theme.palette.text.primary];
   const isMobile = useIsMobile();
   const statusText = React.useMemo(() => getMixNodeStatusText(mixNodeRow.status), [mixNodeRow.status]);
-  console.log('mixNodeRow :>> ', mixNodeRow);
+
   return (
     <Grid container>
       <Grid item xs={12} md={6}>

explorer/src/components/MixNodes/index.ts

@@ -0,0 +1,3 @@
+export * from './Status';
+export * from './StatusDropdown';
+export * from './mappings';

explorer/src/components/Universal-DataGrid.tsx

@@ -13,15 +13,13 @@ const useStyles = makeStyles({
 });
 
 export const cellStyles: SxProps = {
-  width: '100%',
   padding: 0,
   maxHeight: 100,
   color: 'inherit',
   textDecoration: 'none',
   fontWeight: 400,
-  fontSize: 12,
   lineHeight: 2,
-  textAlign: 'start',
+  fontSize: '12px',
   wordBreak: 'break-word',
   whiteSpace: 'break-spaces',
 };

explorer/src/components/index.ts

@@ -0,0 +1,9 @@
+export * from './CustomColumnHeading';
+export * from './Title';
+export * from './Universal-DataGrid';
+export * from './Tooltip';
+export { default as StyledLink } from './StyledLink';
+export * from './Delegations';
+export * from './MixNodes';
+export * from './TableToolbar';
+export * from './Icons';

explorer/src/hooks/index.ts

@@ -0,0 +1,3 @@
+export * from './useIsMobile';
+export * from './useIsMounted';
+export * from './useGetMixnodeStatusColor';

explorer/src/hooks/useGetMixnodeStatusColor.ts

@@ -0,0 +1,17 @@
+import { useTheme } from '@mui/material';
+import { MixnodeStatus } from '@src/typeDefs/explorer-api';
+
+export const useGetMixNodeStatusColor = (status: MixnodeStatus) => {
+  const theme = useTheme();
+
+  switch (status) {
+    case MixnodeStatus.active:
+      return theme.palette.nym.networkExplorer.mixnodes.status.active;
+
+    case MixnodeStatus.standby:
+      return theme.palette.nym.networkExplorer.mixnodes.status.standby;
+
+    default:
+      return theme.palette.nym.networkExplorer.mixnodes.status.inactive;
+  }
+};

explorer/src/pages/Mixnodes/index.tsx

@@ -3,7 +3,7 @@ import { GridColDef, GridRenderCellParams } from '@mui/x-data-grid';
 import { Button, Card, Grid, Link as MuiLink, Box } from '@mui/material';
 import { Link as RRDLink, useParams, useNavigate } from 'react-router-dom';
 import { SelectChangeEvent } from '@mui/material/Select';
-import { SxProps } from '@mui/system';
+import { Stack, SxProps } from '@mui/system';
 import { Theme, useTheme } from '@mui/material/styles';
 import { CopyToClipboard } from '@nymproject/react/clipboard/CopyToClipboard';
 import { useWallet } from '@cosmos-kit/react';
@@ -24,14 +24,9 @@ import { DelegateIconButton } from '../../components/Delegations/components/Dele
 import { DelegationModal, DelegationModalProps } from '../../components/Delegations/components/DelegationModal';
 import { DelegateModal } from '../../components/Delegations/components/DelegateModal';
 
-const getCellFontStyle = (theme: Theme, row: MixnodeRowType, textColor?: string) => {
-  const color = textColor || getMixNodeStatusColor(theme, row.status);
-  return {
-    fontWeight: 400,
-    fontSize: 12,
-    color,
-  };
-};
+const getCellFontStyle = (theme: Theme, row: MixnodeRowType, textColor?: string) => ({
+  color: textColor || getMixNodeStatusColor(theme, row.status),
+});
 
 const getCellStyles = (theme: Theme, row: MixnodeRowType, textColor?: string): SxProps => ({
   ...cellStyles,
@@ -99,28 +94,38 @@ export const PageMixnodes: FCWithChildren = () => {
 
   const columns: GridColDef[] = [
     {
-      field: 'delegate',
-      headerName: 'Delegate',
+      field: 'identity_key',
+      headerName: 'Identity Key',
       disableColumnMenu: true,
-      disableReorder: true,
-      align: 'center',
-      renderHeader: () => <CustomColumnHeading headingTitle="Delegate" />,
+      renderHeader: () => <CustomColumnHeading headingTitle="Identity Key" />,
       headerClassName: 'MuiDataGrid-header-override',
-      width: 80,
-      headerAlign: 'center',
+      width: 215,
+      headerAlign: 'left',
       renderCell: (params: GridRenderCellParams) => (
-        <DelegateIconButton
-          onDelegate={() => {
-            if (wallet.status !== 'Connected') {
-              setConfirmationModalProps({
-                status: 'info',
-                message: 'Please connect your wallet to delegate',
-              });
-            } else {
-              setItemSelectedForDelegation({ identityKey: params.row.identity_key, mixId: params.row.mix_id });
-            }
-          }}
-        />
+        <Stack direction="row" alignItems="center" gap={1}>
+          <DelegateIconButton
+            size="small"
+            onDelegate={() => {
+              if (wallet.status !== 'Connected') {
+                setConfirmationModalProps({
+                  status: 'info',
+                  message: 'Please connect your wallet to delegate',
+                });
+              } else {
+                setItemSelectedForDelegation({ identityKey: params.row.identity_key, mixId: params.row.mix_id });
+              }
+            }}
+          />
+          <CopyToClipboard smallIcons value={params.value} tooltip={`Copy identity key ${params.value} to clipboard`} />
+          <MuiLink
+            sx={getCellStyles(theme, params.row)}
+            component={RRDLink}
+            to={`/network-components/mixnode/${params.row.mix_id}`}
+            data-testid="identity-link"
+          >
+            {splice(7, 29, params.value)}
+          </MuiLink>
+        </Stack>
       ),
     },
     {
@@ -129,8 +134,9 @@ export const PageMixnodes: FCWithChildren = () => {
       disableColumnMenu: true,
       renderHeader: () => <CustomColumnHeading headingTitle="Mix ID" />,
       headerClassName: 'MuiDataGrid-header-override',
-      width: 70,
-      headerAlign: 'left',
+      width: 85,
+      align: 'center',
+      headerAlign: 'center',
       renderCell: (params: GridRenderCellParams) => (
         <MuiLink
           sx={getCellStyles(theme, params.row)}
@@ -142,32 +148,7 @@ export const PageMixnodes: FCWithChildren = () => {
         </MuiLink>
       ),
     },
-    {
-      field: 'identity_key',
-      headerName: 'Identity Key',
-      disableColumnMenu: true,
-      renderHeader: () => <CustomColumnHeading headingTitle="Identity Key" />,
-      headerClassName: 'MuiDataGrid-header-override',
-      width: 190,
-      headerAlign: 'left',
-      renderCell: (params: GridRenderCellParams) => (
-        <>
-          <CopyToClipboard
-            sx={{ ...getCellFontStyle(theme, params.row), mr: 1 }}
-            value={params.value}
-            tooltip={`Copy identity key ${params.value} to clipboard`}
-          />
-          <MuiLink
-            sx={getCellStyles(theme, params.row)}
-            component={RRDLink}
-            to={`/network-components/mixnode/${params.row.mix_id}`}
-            data-testid="identity-link"
-          >
-            {splice(7, 29, params.value)}
-          </MuiLink>
-        </>
-      ),
-    },
+
     {
       field: 'bond',
       headerName: 'Stake',
@@ -175,7 +156,8 @@ export const PageMixnodes: FCWithChildren = () => {
       renderHeader: () => <CustomColumnHeading headingTitle="Stake" />,
       type: 'number',
       headerClassName: 'MuiDataGrid-header-override',
-      width: 170,
+      width: 150,
+      align: 'left',
       headerAlign: 'left',
       renderCell: (params: GridRenderCellParams) => (
         <MuiLink
@@ -199,11 +181,11 @@ export const PageMixnodes: FCWithChildren = () => {
       ),
       headerClassName: 'MuiDataGrid-header-override',
       width: 185,
-      headerAlign: 'left',
+      align: 'center',
+      headerAlign: 'center',
       renderCell: (params: GridRenderCellParams) => (
         <MuiLink
           sx={{
-            textAlign: 'left',
             ...getCellStyles(theme, params.row, params.value > 100 ? 'theme.palette.warning.main' : undefined),
           }}
           component={RRDLink}
@@ -217,11 +199,12 @@ export const PageMixnodes: FCWithChildren = () => {
       field: 'pledge_amount',
       headerName: 'Bond',
       disableColumnMenu: true,
-      width: 175,
+      width: 150,
       headerClassName: 'MuiDataGrid-header-override',
       renderHeader: () => <CustomColumnHeading headingTitle="Bond" tooltipInfo="Node operator's share of stake." />,
       type: 'number',
       headerAlign: 'left',
+      align: 'left',
       renderCell: (params: GridRenderCellParams) => (
         <MuiLink
           sx={getCellStyles(theme, params.row)}
@@ -243,11 +226,12 @@ export const PageMixnodes: FCWithChildren = () => {
         />
       ),
       headerClassName: 'MuiDataGrid-header-override',
-      width: 160,
-      headerAlign: 'left',
+      width: 145,
+      headerAlign: 'center',
+      align: 'center',
       renderCell: (params: GridRenderCellParams) => (
         <MuiLink
-          sx={{ ...getCellStyles(theme, params.row), textAlign: 'left' }}
+          sx={{ ...getCellStyles(theme, params.row) }}
           component={RRDLink}
           to={`/network-components/mixnode/${params.row.mix_id}`}
         >
@@ -266,7 +250,8 @@ export const PageMixnodes: FCWithChildren = () => {
       ),
       headerClassName: 'MuiDataGrid-header-override',
       width: 170,
-      headerAlign: 'left',
+      headerAlign: 'center',
+      align: 'center',
       disableColumnMenu: true,
       renderCell: (params: GridRenderCellParams) => (
         <MuiLink
@@ -290,7 +275,8 @@ export const PageMixnodes: FCWithChildren = () => {
       ),
       headerClassName: 'MuiDataGrid-header-override',
       width: 165,
-      headerAlign: 'left',
+      headerAlign: 'center',
+      align: 'center',
       renderCell: (params: GridRenderCellParams) => (
         <MuiLink
           sx={{ ...getCellStyles(theme, params.row), textAlign: 'left' }}

explorer/tsconfig.json

@@ -4,14 +4,12 @@
     "jsx": "react-jsx",
     "outDir": "./dist",
     "module": "CommonJS",
+    "baseUrl": ".",
+    "paths": {
+      "@src/*": ["./src/*"],
+      "@assets/*": ["../assets/*"]
+    }
   },
-  "include": [
-    "./src/**/*.ts",
-    "./src/**/*.tsx"
-  ],
-  "exclude": [
-    "node_modules",
-    "build",
-    "dist"
-  ]
+  "include": ["./src/**/*.ts", "./src/**/*.tsx"],
+  "exclude": ["node_modules", "build", "dist"]
 }

sdk/typescript/packages/react-components/src/components/clipboard/CopyToClipboard.stories.tsx

@@ -22,3 +22,10 @@ Default.args = {
   tooltip: 'Copy identity key to clipboard',
   value: '123456',
 };
+
+export const SmallIcon = Template.bind({});
+SmallIcon.args = {
+  tooltip: 'Copy identity key to clipboard',
+  value: '123456',
+  smallIcons: true,
+};

sdk/typescript/packages/react-components/src/components/clipboard/CopyToClipboard.tsx

@@ -1,9 +1,8 @@
 import * as React from 'react';
-import { useClipboard } from 'use-clipboard-copy';
+import { Tooltip, SxProps } from '@mui/material';
 import ContentCopyIcon from '@mui/icons-material/ContentCopy';
 import DoneIcon from '@mui/icons-material/Done';
-import { Tooltip } from '@mui/material';
-import { SxProps } from '@mui/system';
+import { useClipboard } from 'use-clipboard-copy';
 
 export const CopyToClipboard: FCWithChildren<{
   value: string;