feat: show warning indicators for paused assets (#1834)

src/components/infoTooltips/PausedTooltip.tsx

@@ -0,0 +1,33 @@
+import { ExclamationIcon } from '@heroicons/react/outline';
+import { Trans } from '@lingui/macro';
+import { Stack, SvgIcon, Tooltip } from '@mui/material';
+
+import { PopperComponent } from '../ContentWithTooltip';
+
+export const PausedTooltipText = () => {
+  return (
+    <Trans>
+      This asset has been paused due to a community decision. Supply, withdraw, borrows and repays
+      are impacted.
+    </Trans>
+  );
+};
+
+export const PausedTooltip = () => {
+  return (
+    <Tooltip
+      arrow
+      placement="top"
+      PopperComponent={PopperComponent}
+      title={
+        <Stack sx={{ py: 4, px: 6 }} spacing={1}>
+          <PausedTooltipText />
+        </Stack>
+      }
+    >
+      <SvgIcon sx={{ fontSize: '20px', color: 'error.main', ml: 2 }}>
+        <ExclamationIcon />
+      </SvgIcon>
+    </Tooltip>
+  );
+};

src/locales/en/messages.po

@@ -2447,10 +2447,6 @@ msgstr "This action will reduce your health factor. Please be mindful of the inc
 msgid "This address is blocked on app.aave.com because it is associated with one or more"
 msgstr "This address is blocked on app.aave.com because it is associated with one or more"
 
-#: src/modules/reserve-overview/ReserveConfiguration.tsx
-msgid "This asset been paused due to a community decision. Supply, borrows and repays are impacted."
-msgstr "This asset been paused due to a community decision. Supply, borrows and repays are impacted."
-
 #: src/components/caps/CapsTooltip.tsx
 msgid "This asset has almost reached its borrow cap. There is only {messageValue} available to be borrowed from this market."
 msgstr "This asset has almost reached its borrow cap. There is only {messageValue} available to be borrowed from this market."
@@ -2459,6 +2455,10 @@ msgstr "This asset has almost reached its borrow cap. There is only {messageValu
 msgid "This asset has almost reached its supply cap. There can only be {messageValue} supplied to this market."
 msgstr "This asset has almost reached its supply cap. There can only be {messageValue} supplied to this market."
 
+#: src/components/infoTooltips/PausedTooltip.tsx
+msgid "This asset has been paused due to a community decision. Supply, withdraw, borrows and repays are impacted."
+msgstr "This asset has been paused due to a community decision. Supply, withdraw, borrows and repays are impacted."
+
 #: src/components/caps/CapsTooltip.tsx
 msgid "This asset has reached its borrow cap. Nothing is available to be borrowed from this market."
 msgstr "This asset has reached its borrow cap. Nothing is available to be borrowed from this market."

src/modules/dashboard/lists/BorrowedPositionsList/BorrowedPositionsListItem.tsx

@@ -130,6 +130,7 @@ const BorrowedPositionsListItemDesktop = ({
       detailsAddress={reserve.underlyingAsset}
       currentMarket={currentMarket}
       frozen={reserve.isFrozen}
+      paused={reserve.isPaused}
       borrowEnabled={reserve.borrowingEnabled}
       data-cy={`dashboardBorrowedListItem_${reserve.symbol.toUpperCase()}_${borrowRateMode}`}
       showBorrowCapTooltips
@@ -271,7 +272,7 @@ const BorrowedPositionsListItemMobile = ({
           disabled={disableRepay}
           variant="outlined"
           onClick={onOpenRepay}
-          sx={{ mr: 1.5 }}
+          sx={{ ml: 1.5 }}
           fullWidth
         >
           <Trans>Repay</Trans>

src/modules/dashboard/lists/ListItemWrapper.tsx

@@ -2,6 +2,7 @@ import { Tooltip, Typography } from '@mui/material';
 import { ReactNode } from 'react';
 import { BorrowDisabledToolTip } from 'src/components/infoTooltips/BorrowDisabledToolTip';
 import { OffboardingTooltip } from 'src/components/infoTooltips/OffboardingToolTip';
+import { PausedTooltip } from 'src/components/infoTooltips/PausedTooltip';
 import { StETHCollateralToolTip } from 'src/components/infoTooltips/StETHCollateralToolTip';
 import { AssetsBeingOffboarded } from 'src/components/Warnings/OffboardingWarning';
 import { useAssetCaps } from 'src/hooks/useAssetCaps';
@@ -26,6 +27,7 @@ interface ListItemWrapperProps {
   children: ReactNode;
   currentMarket: CustomMarket;
   frozen?: boolean;
+  paused?: boolean;
   borrowEnabled?: boolean;
   showSupplyCapTooltips?: boolean;
   showBorrowCapTooltips?: boolean;
@@ -40,6 +42,7 @@ export const ListItemWrapper = ({
   detailsAddress,
   currentMarket,
   frozen,
+  paused,
   borrowEnabled = true,
   showSupplyCapTooltips = false,
   showBorrowCapTooltips = false,
@@ -79,6 +82,7 @@ export const ListItemWrapper = ({
             </Typography>
           </Tooltip>
         </Link>
+        {paused && <PausedTooltip />}
         {showFrozenTooltip && <FrozenTooltip symbol={symbol} currentMarket={currentMarket} />}
         {showRenFilTooltip && <RenFILToolTip />}
         {showAmplTooltip && <AMPLToolTip />}

src/modules/dashboard/lists/ListMobileItemWrapper.tsx

@@ -1,6 +1,7 @@
 import { ReactNode } from 'react';
 import { BorrowDisabledToolTip } from 'src/components/infoTooltips/BorrowDisabledToolTip';
 import { OffboardingTooltip } from 'src/components/infoTooltips/OffboardingToolTip';
+import { PausedTooltip } from 'src/components/infoTooltips/PausedTooltip';
 import { StETHCollateralToolTip } from 'src/components/infoTooltips/StETHCollateralToolTip';
 import { AssetsBeingOffboarded } from 'src/components/Warnings/OffboardingWarning';
 import { CustomMarket } from 'src/ui-config/marketsConfig';
@@ -20,6 +21,7 @@ interface ListMobileItemWrapperProps {
   loading?: boolean;
   currentMarket?: CustomMarket;
   frozen?: boolean;
+  paused?: boolean;
   borrowEnabled?: boolean;
   showSupplyCapTooltips?: boolean;
   showBorrowCapTooltips?: boolean;
@@ -36,6 +38,7 @@ export const ListMobileItemWrapper = ({
   loading,
   currentMarket,
   frozen,
+  paused,
   borrowEnabled = true,
   showSupplyCapTooltips = false,
   showBorrowCapTooltips = false,
@@ -52,6 +55,7 @@ export const ListMobileItemWrapper = ({
     const showBorrowDisabledTooltip = !frozen && !borrowEnabled;
     return (
       <>
+        {paused && <PausedTooltip />}
         {showFrozenTooltip && <FrozenTooltip symbol={symbol} currentMarket={currentMarket} />}
         {showRenFilTooltip && <RenFILToolTip />}
         {showAmplTooltip && <AMPLToolTip />}

src/modules/dashboard/lists/SuppliedPositionsList/SuppliedPositionsListItem.tsx

@@ -50,6 +50,7 @@ export const SuppliedPositionsListItem = ({
       detailsAddress={underlyingAsset}
       currentMarket={currentMarket}
       frozen={reserve.isFrozen}
+      paused={isPaused}
       data-cy={`dashboardSuppliedListItem_${reserve.symbol.toUpperCase()}_${
         canBeEnabledAsCollateral && usageAsCollateralEnabledOnUser ? 'Collateral' : 'NoCollateral'
       }`}

src/modules/dashboard/lists/SuppliedPositionsList/SuppliedPositionsListMobileItem.tsx

@@ -127,7 +127,7 @@ export const SuppliedPositionsListMobileItem = ({
           disabled={disableWithdraw}
           variant="outlined"
           onClick={() => openWithdraw(underlyingAsset, currentMarket, reserve.name, 'dashboard')}
-          sx={{ mr: 1.5 }}
+          sx={{ ml: 1.5 }}
           fullWidth
         >
           <Trans>Withdraw</Trans>

src/modules/reserve-overview/ReserveConfiguration.tsx

@@ -2,6 +2,7 @@ import { ExternalLinkIcon } from '@heroicons/react/solid';
 import { Trans } from '@lingui/macro';
 import { Box, Button, Divider, SvgIcon } from '@mui/material';
 import { getFrozenProposalLink } from 'src/components/infoTooltips/FrozenTooltip';
+import { PausedTooltipText } from 'src/components/infoTooltips/PausedTooltip';
 import { FormattedNumber } from 'src/components/primitives/FormattedNumber';
 import { Link } from 'src/components/primitives/Link';
 import { Warning } from 'src/components/primitives/Warning';
@@ -88,10 +89,7 @@ export const ReserveConfiguration: React.FC<ReserveConfigurationProps> = ({ rese
             </Warning>
           ) : (
             <Warning sx={{ mt: '16px', mb: '40px' }} severity="error">
-              <Trans>
-                This asset been paused due to a community decision. Supply, borrows and repays are
-                impacted.{' '}
-              </Trans>
+              <PausedTooltipText />
             </Warning>
           )
         ) : null}

src/utils/dashboardSortUtils.ts

@@ -10,9 +10,9 @@ import {
 
 // Helpers
 export const DASHBOARD_LIST_COLUMN_WIDTHS = {
-  ASSET: 110,
+  ASSET: 130,
   BUTTONS: 160,
-  CELL: 110,
+  CELL: 130,
 };
 
 // Note: Create a single type that works with all four dashboards list and all 8 list item components