Merge pull request #1628 from nymtech/409-ne-filters-info

NE & Wallet: NE TableToolbar ui and Wallet new display when no delegations

explorer/src/components/Filters/Filters.tsx

@@ -142,11 +142,10 @@ export const Filters = () => {
       </Snackbar>
       <Button
         size="large"
-        variant="text"
-        color="inherit"
+        variant="contained"
         endIcon={<Tune />}
         onClick={handleToggleShowFilters}
-        sx={{ textTransform: 'none' }}
+        sx={{ textTransform: 'none', width: isMobile ? '100%' : 'inherit' }}
       >
         Advanced filters
       </Button>

explorer/src/components/MixNodes/StatusDropdown.tsx

@@ -46,7 +46,7 @@ export const MixNodeStatusDropdown: React.FC<MixNodeStatusDropdownProps> = ({ st
         }
       }}
       sx={{
-        width: isMobile ? 'auto' : 200,
+        width: isMobile ? '50%' : 200,
         ...sx,
       }}
     >

explorer/src/components/TableToolbar.tsx

@@ -30,39 +30,40 @@ export const TableToolbar: React.FC<TableToolBarProps> = ({
         width: '100%',
         marginBottom: 2,
         display: 'flex',
-        flexDirection: isMobile ? 'column-reverse' : 'row',
+        flexDirection: isMobile ? 'column' : 'row',
         justifyContent: 'space-between',
       }}
     >
-      <Box sx={{ display: 'flex', alignItems: 'middle' }}>
-        {childrenBefore}
-        <Select
-          labelId="simple-select-label"
-          id="simple-select"
-          value={pageSize}
-          onChange={onChangePageSize}
-          sx={{
-            width: isMobile ? 100 : 200,
-          }}
-        >
-          <MenuItem value={10} data-testid="ten">
-            10
-          </MenuItem>
-          <MenuItem value={30} data-testid="thirty">
-            30
-          </MenuItem>
-          <MenuItem value={50} data-testid="fifty">
-            50
-          </MenuItem>
-          <MenuItem value={100} data-testid="hundred">
-            100
-          </MenuItem>
-        </Select>
-      </Box>
-      <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+      <Box sx={{ display: 'flex', flexDirection: isMobile ? 'column-reverse' : 'row', alignItems: 'middle' }}>
+        <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
+          {childrenBefore}
+          <Select
+            labelId="simple-select-label"
+            id="simple-select"
+            value={pageSize}
+            onChange={onChangePageSize}
+            sx={{
+              width: isMobile ? '50%' : 200,
+              marginRight: isMobile ? 0 : 2,
+            }}
+          >
+            <MenuItem value={10} data-testid="ten">
+              10
+            </MenuItem>
+            <MenuItem value={30} data-testid="thirty">
+              30
+            </MenuItem>
+            <MenuItem value={50} data-testid="fifty">
+              50
+            </MenuItem>
+            <MenuItem value={100} data-testid="hundred">
+              100
+            </MenuItem>
+          </Select>
+        </Box>
         <TextField
           sx={{
-            width: isMobile ? '100%' : 350,
+            width: isMobile ? '100%' : 200,
             marginBottom: isMobile ? 2 : 0,
           }}
           value={searchTerm}
@@ -70,6 +71,16 @@ export const TableToolbar: React.FC<TableToolBarProps> = ({
           placeholder="search"
           onChange={(event) => onChangeSearch(event.target.value)}
         />
+      </Box>
+      <Box
+        sx={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'end',
+          gap: 1,
+          marginTop: isMobile ? 2 : 0,
+        }}
+      >
         {withFilters && <Filters />}
         {childrenAfter}
       </Box>

nym-wallet/src/components/Bonding/Bond.tsx

@@ -14,11 +14,11 @@ export const Bond = ({
     <Box
       sx={{
         display: 'flex',
-        alignItems: 'center',
+        alignItems: 'flex-end',
         justifyContent: 'space-between',
       }}
     >
-      <Typography>Bond a mixnode or a gateway</Typography>
+      <Typography variant="body2">Bond a mixnode or a gateway</Typography>
       <Box
         sx={{
           display: 'flex',

nym-wallet/src/components/Mnemonic.tsx

@@ -18,7 +18,24 @@ export const Mnemonic = ({
         Below is your 24 word mnemonic, make sure to store it in a safe place for accessing your wallet in the future
       </Typography>
     </Warning>
-    <TextField multiline rows={3} value={mnemonic} fullWidth />
+    <TextField
+      label="Mnemonic"
+      type="input"
+      value={mnemonic}
+      multiline
+      autoFocus={false}
+      fullWidth
+      inputProps={{
+        style: {
+          height: '160px',
+        },
+      }}
+      sx={{
+        'input::-webkit-textfield-decoration-container': {
+          alignItems: 'start',
+        },
+      }}
+    />
 
     <Button
       color="inherit"

nym-wallet/src/components/NymCard.tsx

@@ -35,7 +35,7 @@ export const NymCard: React.FC<{
     {noPadding ? (
       <CardContentNoPadding>{children}</CardContentNoPadding>
     ) : (
-      <CardContent sx={{ p: 3 }}>{children}</CardContent>
+      <CardContent sx={{ p: 3, paddingTop: 0 }}>{children}</CardContent>
     )}
   </Card>
 );

nym-wallet/src/pages/delegation/index.tsx

@@ -1,6 +1,6 @@
 import React, { FC, useContext, useEffect, useState } from 'react';
-import { Box, Button, Paper, Stack, Typography } from '@mui/material';
-import { Theme, useTheme } from '@mui/material/styles';
+import { Box, Button, Paper, Stack, Typography, CircularProgress } from '@mui/material';
+import { useTheme, Theme } from '@mui/material/styles';
 import { DecCoin, decimalToFloatApproximation, DelegationWithEverything, FeeDetails } from '@nymproject/types';
 import { Link } from '@nymproject/react/link/Link';
 import { AppContext, urls } from 'src/context/main';
@@ -10,7 +10,7 @@ import { Console } from 'src/utils/console';
 import { OverSaturatedBlockerModal } from 'src/components/Delegation/DelegateBlocker';
 import { getSpendableCoins, userBalance } from 'src/requests';
 import { RewardsSummary } from '../../components/Rewards/RewardsSummary';
-import { DelegationContextProvider, useDelegationContext } from '../../context/delegations';
+import { DelegationContextProvider, useDelegationContext, TDelegations } from '../../context/delegations';
 import { RewardsContextProvider, useRewardsContext } from '../../context/rewards';
 import { DelegateModal } from '../../components/Delegation/DelegateModal';
 import { UndelegateModal } from '../../components/Delegation/UndelegateModal';
@@ -268,41 +268,90 @@ export const Delegation: FC<{ isStorybook?: boolean }> = ({ isStorybook }) => {
     }
   };
 
-  return (
-    <>
-      <Paper elevation={0} sx={{ p: 3, mt: 4 }}>
-        <Stack spacing={5}>
-          <Box display="flex" justifyContent="space-between" alignItems="center">
-            <Typography variant="h6" lineHeight={1.334} fontWeight={600}>
-              Delegations
-            </Typography>
+  const delegationsComponent = (delegations: TDelegations | undefined) => {
+    if (isLoading) {
+      return (
+        <Box sx={{ width: '100%', display: 'flex', justifyContent: 'center' }}>
+          <CircularProgress />
+        </Box>
+      );
+    } else if (Boolean(delegations?.length)) {
+      return (
+        <DelegationList
+          explorerUrl={urls(network).networkExplorer}
+          isLoading={isLoading}
+          items={delegations}
+          onItemActionClick={handleDelegationItemActionClick}
+        />
+      );
+    }
+    return (
+      <Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'flex-end' }}>
+        <Box marginRight={3} width={1}>
+          <Typography variant="body2">
+            Checkout the{' '}
             <Link
               href={`${urls(network).networkExplorer}/network-components/mixnodes/`}
               target="_blank"
               rel="noreferrer"
-              text="Network Explorer"
-              fontSize={14}
+              text="list of mixnodes"
               fontWeight={theme.palette.mode === 'light' ? 400 : 600}
               noIcon
-            />
+            />{' '}
+            for performance and other parameters to help make delegation decisions.
+          </Typography>
+          <Typography variant="body2">
+            Hint: In Nym explorer use <b>advanced filters</b> to precisely define what node you are looking for.
+          </Typography>
+        </Box>
+        <Button
+          variant="contained"
+          disableElevation
+          onClick={() => setShowNewDelegationModal(true)}
+          sx={{ py: 1.5, px: 5, color: 'primary.contrastText' }}
+        >
+          Delegate
+        </Button>
+      </Box>
+    );
+  };
+
+  return (
+    <>
+      <Paper elevation={0} sx={{ p: 3, mt: 4 }}>
+        <Stack spacing={3}>
+          <Box display="flex" justifyContent="space-between" alignItems="center">
+            <Typography variant="h6" lineHeight={1.334} fontWeight={600}>
+              Delegations
+            </Typography>
+            {!!delegations?.length && (
+              <Link
+                href={`${urls(network).networkExplorer}/network-components/mixnodes/`}
+                target="_blank"
+                rel="noreferrer"
+                text="Network Explorer"
+                fontSize={14}
+                fontWeight={theme.palette.mode === 'light' ? 400 : 600}
+                noIcon
+              />
+            )}
           </Box>
-          <Box display="flex" justifyContent="space-between" alignItems="end">
-            <RewardsSummary isLoading={isLoading} totalDelegation={totalDelegations} totalRewards={totalRewards} />
-            <Button
-              variant="contained"
-              disableElevation
-              onClick={() => setShowNewDelegationModal(true)}
-              sx={{ py: 1.5, px: 5, color: 'primary.contrastText' }}
-            >
-              Delegate
-            </Button>
-          </Box>
-          <DelegationList
-            explorerUrl={urls(network).networkExplorer}
-            isLoading={isLoading}
-            items={delegations}
-            onItemActionClick={handleDelegationItemActionClick}
-          />
+
+          {!!delegations?.length && (
+            <Box display="flex" justifyContent="space-between" alignItems="end">
+              <RewardsSummary isLoading={isLoading} totalDelegation={totalDelegations} totalRewards={totalRewards} />
+
+              <Button
+                variant="contained"
+                disableElevation
+                onClick={() => setShowNewDelegationModal(true)}
+                sx={{ py: 1.5, px: 5, color: 'primary.contrastText' }}
+              >
+                Delegate
+              </Button>
+            </Box>
+          )}
+          {delegationsComponent(delegations)}
         </Stack>
       </Paper>