From caff2aa9d2ae2c86a4ce19df6b1fbcf477dc1ba4 Mon Sep 17 00:00:00 2001
From: fmtabbara <fmtabbara@hotmail.co.uk>
Date: Wed, 25 Oct 2023 10:02:08 +0100
Subject: [PATCH 1/3] format delegations summary

---
 .../src/components/Rewards/RewardsSummary.tsx | 77 +++++++++++++------
 1 file changed, 53 insertions(+), 24 deletions(-)

diff --git a/nym-wallet/src/components/Rewards/RewardsSummary.tsx b/nym-wallet/src/components/Rewards/RewardsSummary.tsx
index c6e48b395c..75f7da4a7b 100644
--- a/nym-wallet/src/components/Rewards/RewardsSummary.tsx
+++ b/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>
+  );
+};

From e9449b9135f11f48de9fee4a95cc1260726a6305 Mon Sep 17 00:00:00 2001
From: fmtabbara <fmtabbara@hotmail.co.uk>
Date: Wed, 25 Oct 2023 10:02:21 +0100
Subject: [PATCH 2/3] fix delegations loading page

---
 nym-wallet/src/pages/delegation/index.tsx | 23 +++++++++++++++--------
 1 file changed, 15 insertions(+), 8 deletions(-)

diff --git a/nym-wallet/src/pages/delegation/index.tsx b/nym-wallet/src/pages/delegation/index.tsx
index 8f934cb83c..c6ef1c26d6 100644
--- a/nym-wallet/src/pages/delegation/index.tsx
+++ b/nym-wallet/src/pages/delegation/index.tsx
@@ -19,6 +19,7 @@ import { DelegationListItemActions } from '../../components/Delegation/Delegatio
 import { RedeemModal } from '../../components/Rewards/RedeemModal';
 import { DelegationModal, DelegationModalProps } from '../../components/Delegation/DelegationModal';
 import { backDropStyles, modalStyles } from '../../../.storybook/storiesStyles';
+import { LoadingModal } from 'src/components/Modals/LoadingModal';
 
 const storybookStyles = (theme: Theme, isStorybook?: boolean, backdropProps?: object) =>
   isStorybook
@@ -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 }}>

From b72649e2967958c7731bce38d03a248afc3471b0 Mon Sep 17 00:00:00 2001
From: fmtabbara <fmtabbara@hotmail.co.uk>
Date: Wed, 25 Oct 2023 10:26:04 +0100
Subject: [PATCH 3/3] fix linting

---
 nym-wallet/src/pages/delegation/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/nym-wallet/src/pages/delegation/index.tsx b/nym-wallet/src/pages/delegation/index.tsx
index c6ef1c26d6..64a24b41db 100644
--- a/nym-wallet/src/pages/delegation/index.tsx
+++ b/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';
@@ -19,7 +20,6 @@ import { DelegationListItemActions } from '../../components/Delegation/Delegatio
 import { RedeemModal } from '../../components/Rewards/RedeemModal';
 import { DelegationModal, DelegationModalProps } from '../../components/Delegation/DelegationModal';
 import { backDropStyles, modalStyles } from '../../../.storybook/storiesStyles';
-import { LoadingModal } from 'src/components/Modals/LoadingModal';
 
 const storybookStyles = (theme: Theme, isStorybook?: boolean, backdropProps?: object) =>
   isStorybook