Merge pull request #4055 from nymtech/update/issue-4052/reformat-delegations-summary

Reformat delegations summary

nym-wallet/src/components/Rewards/RewardsSummary.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { CircularProgress, Stack, Typography } from '@mui/material';
+import { CircularProgress, Stack, StackProps, Typography, useMediaQuery } from '@mui/material';
 import { useTheme } from '@mui/material/styles';
 import { useDelegationContext } from 'src/context/delegations';
 import { InfoTooltip } from '../InfoToolTip';
@@ -9,34 +9,63 @@ export const RewardsSummary: FCWithChildren<{
   totalDelegation?: string;
   totalRewards?: string;
 }> = ({ isLoading, totalDelegation, totalRewards }) => {
-  const theme = useTheme();
-
   const { totalDelegationsAndRewards } = useDelegationContext();
   return (
     <Stack direction="row" justifyContent="space-between" marginTop={3}>
       <Stack direction="row" spacing={5}>
-        <Stack direction="row" spacing={1} alignItems="center">
-          <InfoTooltip title="The total amount you have delegated to node(s) in the network. The amount also includes the rewards you have accrued since last time you claimed your rewards" />
-          <Typography>Total delegations:</Typography>
-          <Typography fontWeight={600} fontSize={16} textTransform="uppercase">
-            {isLoading ? <CircularProgress size={theme.typography.fontSize} /> : totalDelegationsAndRewards || '-'}
-          </Typography>
-        </Stack>
-        <Stack direction="row" spacing={1} alignItems="center">
-          <InfoTooltip title="The initial amount you delegated to the node(s)" />
-          <Typography>Original delegations:</Typography>
-          <Typography fontWeight={600} fontSize={16} textTransform="uppercase">
-            {isLoading ? <CircularProgress size={theme.typography.fontSize} /> : totalDelegation || '-'}
-          </Typography>
-        </Stack>
-        <Stack direction="row" spacing={1} alignItems="center">
-          <InfoTooltip title="The rewards you have accrued since the last time you claimed your rewards. Rewards are automatically compounded. You can claim your rewards at any time." />
-          <Typography>Total rewards:</Typography>
-          <Typography fontWeight={600} fontSize={16} textTransform="uppercase">
-            {isLoading ? <CircularProgress size={theme.typography.fontSize} /> : totalRewards || '-'}
-          </Typography>
-        </Stack>
+        <RewardSummaryField
+          title="Total delegations"
+          value={totalDelegationsAndRewards || '-'}
+          isLoading={isLoading}
+          Tooltip={
+            <InfoTooltip title="The total amount you have delegated to node(s) in the network. The amount also includes the rewards you have accrued since last time you claimed your rewards" />
+          }
+        />
+        <RewardSummaryField
+          title="Original delegations"
+          value={totalDelegation || '-'}
+          isLoading={isLoading}
+          Tooltip={<InfoTooltip title="The initial amount you delegated to the node(s)" />}
+        />
+        <RewardSummaryField
+          title="Total rewards"
+          value={totalRewards || '-'}
+          isLoading={isLoading}
+          Tooltip={
+            <InfoTooltip title="The rewards you have accrued since the last time you claimed your rewards. Rewards are automatically compounded. You can claim your rewards at any time." />
+          }
+        />
       </Stack>
     </Stack>
   );
 };
+
+const RewardSummaryField = ({
+  title,
+  value,
+  Tooltip,
+  isLoading,
+}: {
+  title: string;
+  value: string;
+  Tooltip?: React.ReactNode;
+  isLoading?: boolean;
+}) => {
+  const breakpoint = useMediaQuery(useTheme().breakpoints.down('xl'));
+  const alignProps: { gap: number; direction: StackProps['direction'] } = {
+    gap: breakpoint ? 0 : 1,
+    direction: breakpoint ? 'column' : 'row',
+  };
+
+  return (
+    <Stack {...alignProps} alignItems="start">
+      <Stack direction="row" alignItems="center" gap={1}>
+        {Tooltip}
+        <Typography>{title}:</Typography>
+      </Stack>
+      <Typography fontWeight={600} fontSize={16} textTransform="uppercase">
+        {isLoading ? <CircularProgress size={16} /> : value}
+      </Typography>
+    </Stack>
+  );
+};

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

@@ -9,6 +9,7 @@ import { TPoolOption } from 'src/components';
 import { Console } from 'src/utils/console';
 import { OverSaturatedBlockerModal } from 'src/components/Delegation/DelegateBlocker';
 import { getSpendableCoins, userBalance } from 'src/requests';
+import { LoadingModal } from 'src/components/Modals/LoadingModal';
 import { getIntervalAsDate, toPercentIntegerString } from 'src/utils';
 import { RewardsSummary } from '../../components/Rewards/RewardsSummary';
 import { DelegationContextProvider, TDelegations, useDelegationContext } from '../../context/delegations';
@@ -302,14 +303,16 @@ export const Delegation: FC<{ isStorybook?: boolean }> = ({ isStorybook }) => {
   };
 
   const delegationsComponent = (delegationItems: TDelegations | undefined) => {
-    return (
-      <DelegationList
-        explorerUrl={urls(network).networkExplorer}
-        isLoading={isLoading && !isActionModalOpen}
-        items={delegationItems || []}
-        onItemActionClick={handleDelegationItemActionClick}
-      />
-    );
+    if (delegationItems && Boolean(delegationItems?.length)) {
+      return (
+        <DelegationList
+          explorerUrl={urls(network).networkExplorer}
+          isLoading={isLoading && !isActionModalOpen}
+          items={delegationItems}
+          onItemActionClick={handleDelegationItemActionClick}
+        />
+      );
+    }
 
     return (
       <Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'flex-end' }}>
@@ -342,6 +345,10 @@ export const Delegation: FC<{ isStorybook?: boolean }> = ({ isStorybook }) => {
     );
   };
 
+  if (isLoading) {
+    return <LoadingModal />;
+  }
+
   return (
     <>
       <Paper elevation={0} sx={{ p: 3, mt: 4 }}>