Revert "feat: [LW-7837] add warning banner for retiring, retired and saturated stake pools (#659)" (#676)

przemyslaw-wlodek · web-flow · commit 06065726952d · 2023-10-27T11:38:12.000Z
This reverts commit a7ce973.
diff --git a/packages/staking/src/features/i18n/translations/en.ts b/packages/staking/src/features/i18n/translations/en.ts
@@ -106,8 +106,6 @@ export const en: Translations = {
   'overview.banners.portfolioDrifted.message':
     'Make sure to rebalance your staking ratios if you want to match your preferences',
   'overview.banners.portfolioDrifted.title': 'Your current delegation portfolio has shifted',
-  'overview.banners.saturatedOrRetiredPool.message': 'Please make sure to choose other pool(s) to avoid losing rewards',
-  'overview.banners.saturatedOrRetiredPool.title': 'One or several of your pools are too saturated / retired',
   'overview.delegationCard.label.balance': 'ADA Balance',
   'overview.delegationCard.label.pools': 'Pool(s)',
   'overview.delegationCard.label.status': 'Status',
@@ -134,7 +132,6 @@ export const en: Translations = {
   'overview.stakingInfoCard.lastReward': 'Last reward',
   'overview.stakingInfoCard.margin': 'Margin',
   'overview.stakingInfoCard.poolRetired': 'Pool retired',
-  'overview.stakingInfoCard.poolRetiring': 'Pool retiring',
   'overview.stakingInfoCard.poolSaturated': 'Pool over-saturated',
   'overview.stakingInfoCard.ros': 'ROS',
   'overview.stakingInfoCard.tooltipFiatLabel': 'USD Value',
diff --git a/packages/staking/src/features/i18n/types.ts b/packages/staking/src/features/i18n/types.ts
@@ -192,10 +192,6 @@ type KeysStructure = {
         title: '';
         message: '';
       };
-      saturatedOrRetiredPool: {
-        title: '';
-        message: '';
-      };
     };
     stakingInfoCard: {
       fee: '';
@@ -205,7 +201,6 @@ type KeysStructure = {
       totalRewards: '';
       totalStaked: '';
       poolRetired: '';
-      poolRetiring: '';
       poolSaturated: '';
       tooltipFiatLabel: '';
     };
diff --git a/packages/staking/src/features/overview/Overview.tsx b/packages/staking/src/features/overview/Overview.tsx
@@ -10,7 +10,7 @@ import { GetStartedSteps } from './GetStartedSteps';
 import { hasMinimumFundsToDelegate, hasPendingDelegationTransaction, mapPortfolioToDisplayData } from './helpers';
 import { StakeFundsBanner } from './StakeFundsBanner';
 import { StakingInfoCard } from './StakingInfoCard';
-import { StakingNotificationBanners, getCurrentStakingNotifications } from './StakingNotificationBanner';
+import { StakingNotificationBanner, getCurrentStakingNotification } from './StakingNotificationBanner';
 
 export const Overview = () => {
   const { t } = useTranslation();
@@ -29,7 +29,7 @@ export const Overview = () => {
     currentPortfolio: store.currentPortfolio,
     portfolioMutators: store.mutators,
   }));
-  const stakingNotification = getCurrentStakingNotifications({ currentPortfolio, walletActivities });
+  const stakingNotification = getCurrentStakingNotification({ currentPortfolio, walletActivities });
 
   const totalCoinBalance = balancesBalance?.total?.coinBalance;
 
@@ -76,7 +76,10 @@ export const Overview = () => {
     return (
       <>
         {stakingNotification ? (
-          <StakingNotificationBanners notifications={stakingNotification} onClickableBannerClick={onManageClick} />
+          <StakingNotificationBanner
+            notification={stakingNotification}
+            onPortfolioDriftedNotificationClick={onManageClick}
+          />
         ) : (
           <Flex flexDirection="column" gap="$32">
             <StakeFundsBanner balance={totalCoinBalance} />
@@ -104,7 +107,10 @@ export const Overview = () => {
       </Box>
       {stakingNotification && (
         <Box mb="$40">
-          <StakingNotificationBanners notifications={stakingNotification} onClickableBannerClick={onManageClick} />
+          <StakingNotificationBanner
+            notification={stakingNotification}
+            onPortfolioDriftedNotificationClick={onManageClick}
+          />
         </Box>
       )}
       <Flex justifyContent="space-between" mb="$16">
diff --git a/packages/staking/src/features/overview/OverviewPopup.tsx b/packages/staking/src/features/overview/OverviewPopup.tsx
@@ -12,7 +12,7 @@ import { FundWalletBanner } from './FundWalletBanner';
 import { hasMinimumFundsToDelegate, mapPortfolioToDisplayData } from './helpers';
 import { StakeFundsBanner } from './StakeFundsBanner';
 import { StakingInfoCard } from './StakingInfoCard';
-import { StakingNotificationBanners, getCurrentStakingNotifications } from './StakingNotificationBanner';
+import { StakingNotificationBanner, getCurrentStakingNotification } from './StakingNotificationBanner';
 
 export const OverviewPopup = () => {
   const { t } = useTranslation();
@@ -32,7 +32,7 @@ export const OverviewPopup = () => {
     currentPortfolio: store.currentPortfolio,
     portfolioMutators: store.mutators,
   }));
-  const stakingNotifications = getCurrentStakingNotifications({ currentPortfolio, walletActivities });
+  const stakingNotification = getCurrentStakingNotification({ currentPortfolio, walletActivities });
 
   const totalCoinBalance = balancesBalance?.total?.coinBalance || '0';
 
@@ -85,16 +85,11 @@ export const OverviewPopup = () => {
 
   return (
     <>
-      {stakingNotifications.includes('portfolioDrifted') && (
+      {stakingNotification === 'portfolioDrifted' && (
         <Box mb="$32">
-          <StakingNotificationBanners notifications={['portfolioDrifted']} onClickableBannerClick={expandStakingView} />
-        </Box>
-      )}
-      {stakingNotifications.includes('poolRetiredOrSaturated') && (
-        <Box mb="$32">
-          <StakingNotificationBanners
-            notifications={['poolRetiredOrSaturated']}
-            onClickableBannerClick={expandStakingView}
+          <StakingNotificationBanner
+            notification="portfolioDrifted"
+            onPortfolioDriftedNotificationClick={expandStakingView}
           />
         </Box>
       )}
diff --git a/packages/staking/src/features/overview/StakingInfoCard/StakingInfoCard.tsx b/packages/staking/src/features/overview/StakingInfoCard/StakingInfoCard.tsx
@@ -4,15 +4,15 @@ import { getRandomIcon } from '@lace/common';
 import { Flex } from '@lace/ui';
 import BigNumber from 'bignumber.js';
 import cn from 'classnames';
-import React, { ReactNode } from 'react';
+import React from 'react';
 import { useTranslation } from 'react-i18next';
-import MoonIcon from '../../../assets/icons/moon.component.svg';
-import WarningIcon from '../../../assets/icons/warning.component.svg';
 import { TranslationKey } from '../../i18n';
+import MoonIcon from './moon.component.svg';
 import { StakePoolInfo } from './StakePoolInfo';
 import styles from './StakingInfoCard.module.scss';
 import { Stats } from './Stats';
 import { Tooltip } from './StatsTooltip';
+import WarningIon from './warning.component.svg';
 
 const DEFAULT_DECIMALS = 2;
 
@@ -34,7 +34,7 @@ const formatNumericValue = (
   </>
 );
 
-export type PoolStatus = 'retired' | 'saturated' | 'retiring';
+type PoolStatus = 'retired' | 'saturated';
 
 export type StakingInfoCardProps = {
   className?: string;
@@ -56,15 +56,13 @@ export type StakingInfoCardProps = {
   status?: PoolStatus;
 };
 
-const iconsByPoolStatus: Record<PoolStatus, ReactNode> = {
-  retired: <Icon style={{ color: '#FF8E3C', fontSize: '24px' }} component={MoonIcon} />,
-  retiring: <Icon style={{ color: '#FDC300', fontSize: '24px' }} component={MoonIcon} />,
-  saturated: <Icon style={{ color: '#FF5470', fontSize: '24px' }} component={WarningIcon} />,
+const iconsByPoolStatus: Record<PoolStatus, React.FC<React.SVGProps<SVGSVGElement>>> = {
+  retired: MoonIcon,
+  saturated: WarningIon,
 };
 
 const labelTranslationKeysByPoolStatus: Record<PoolStatus, TranslationKey> = {
   retired: 'overview.stakingInfoCard.poolRetired',
-  retiring: 'overview.stakingInfoCard.poolRetiring',
   saturated: 'overview.stakingInfoCard.poolSaturated',
 };
 
@@ -104,8 +102,10 @@ export const StakingInfoCard = ({
               id={id}
               onClick={onStakePoolSelect}
             />
-            {(status === 'retired' || status === 'saturated' || status === 'retiring') && (
-              <Tooltip content={t(labelTranslationKeysByPoolStatus[status])}>{iconsByPoolStatus[status]}</Tooltip>
+            {(status === 'retired' || status === 'saturated') && (
+              <Tooltip content={t(labelTranslationKeysByPoolStatus[status])}>
+                <Icon style={{ color: '#FF5470', fontSize: '24px' }} component={iconsByPoolStatus[status]} />
+              </Tooltip>
             )}
           </Flex>
         </div>
diff --git a/packages/staking/src/features/overview/StakingInfoCard/moon.component.svg b/packages/staking/src/features/overview/StakingInfoCard/moon.component.svg
diff --git a/packages/staking/src/features/overview/StakingInfoCard/warning.component.svg b/packages/staking/src/features/overview/StakingInfoCard/warning.component.svg
diff --git a/packages/staking/src/features/overview/StakingNotificationBanner/StakingNotificationBanner.tsx b/packages/staking/src/features/overview/StakingNotificationBanner/StakingNotificationBanner.tsx
@@ -0,0 +1,56 @@
+import { Banner } from '@lace/common';
+import { useTranslation } from 'react-i18next';
+import BellIcon from '../../../assets/icons/bell-icon.component.svg';
+import InfoIcon from '../../../assets/icons/info-icon.svg';
+import * as styles from './StakingNotificationBanner.css';
+import { StakingNotificationType } from './types';
+
+type StakingNotificationBannerProps = {
+  popupView?: boolean;
+  notification: StakingNotificationType;
+  onPortfolioDriftedNotificationClick?: () => void;
+};
+
+export const StakingNotificationBanner = ({
+  popupView,
+  notification,
+  onPortfolioDriftedNotificationClick,
+}: StakingNotificationBannerProps) => {
+  const { t } = useTranslation();
+
+  switch (notification) {
+    case 'pendingFirstDelegation':
+      return (
+        <Banner
+          popupView={popupView}
+          withIcon
+          customIcon={<InfoIcon className={styles.bannerInfoIcon} />}
+          message={t('overview.banners.pendingFirstDelegation.title')}
+          description={t('overview.banners.pendingFirstDelegation.message')}
+        />
+      );
+    case 'pendingPoolMigration':
+      return (
+        <Banner
+          popupView={popupView}
+          withIcon
+          customIcon={<InfoIcon className={styles.bannerInfoIcon} />}
+          message={t('overview.banners.pendingPoolMigration.title')}
+          description={t('overview.banners.pendingPoolMigration.message')}
+        />
+      );
+    case 'portfolioDrifted':
+      return (
+        <Banner
+          popupView={popupView}
+          withIcon
+          customIcon={<BellIcon className={styles.bannerInfoIcon} />}
+          message={t('overview.banners.portfolioDrifted.title')}
+          description={t('overview.banners.portfolioDrifted.message')}
+          onBannerClick={onPortfolioDriftedNotificationClick}
+        />
+      );
+    default:
+      return <></>;
+  }
+};
diff --git a/packages/staking/src/features/overview/StakingNotificationBanner/StakingNotificationBanners.tsx b/packages/staking/src/features/overview/StakingNotificationBanner/StakingNotificationBanners.tsx
diff --git a/packages/staking/src/features/overview/StakingNotificationBanner/getCurrentStakingNotification.ts b/packages/staking/src/features/overview/StakingNotificationBanner/getCurrentStakingNotification.ts
@@ -1,33 +1,26 @@
 import type { CurrentPortfolioStakePool } from '../../store';
 import type { StakingNotificationType } from './types';
 import type { AssetActivityListProps } from '@lace/core';
-import { hasPendingDelegationTransaction, hasSaturatedOrRetiredPools, isPortfolioDrifted } from '../helpers';
+import { hasPendingDelegationTransaction, isPortfolioDrifted } from '../helpers';
 
 type GetCurrentStakingNotificationParams = {
   walletActivities: AssetActivityListProps[];
   currentPortfolio: CurrentPortfolioStakePool[];
 };
 
-export const getCurrentStakingNotifications = ({
+export const getCurrentStakingNotification = ({
   walletActivities,
   currentPortfolio,
-}: GetCurrentStakingNotificationParams): StakingNotificationType[] => {
+}: GetCurrentStakingNotificationParams): StakingNotificationType | null => {
   const pendingDelegationTransaction = hasPendingDelegationTransaction(walletActivities);
-  const notifications: StakingNotificationType[] = [];
 
   if (pendingDelegationTransaction) {
-    currentPortfolio.length === 0
-      ? notifications.push('pendingFirstDelegation')
-      : notifications.push('pendingPoolMigration');
+    return currentPortfolio.length === 0 ? 'pendingFirstDelegation' : 'pendingPoolMigration';
   }
 
   if (isPortfolioDrifted(currentPortfolio)) {
-    notifications.push('portfolioDrifted');
+    return 'portfolioDrifted';
   }
 
-  if (hasSaturatedOrRetiredPools(currentPortfolio)) {
-    notifications.push('poolRetiredOrSaturated');
-  }
-
-  return notifications;
+  return null;
 };
diff --git a/packages/staking/src/features/overview/StakingNotificationBanner/index.ts b/packages/staking/src/features/overview/StakingNotificationBanner/index.ts
@@ -1,3 +1,3 @@
-export * from './StakingNotificationBanners';
-export * from './getCurrentStakingNotifications';
+export * from './StakingNotificationBanner';
+export * from './getCurrentStakingNotification';
 export * from './types';
diff --git a/packages/staking/src/features/overview/StakingNotificationBanner/types.ts b/packages/staking/src/features/overview/StakingNotificationBanner/types.ts
@@ -1,5 +1 @@
-export type StakingNotificationType =
-  | 'pendingFirstDelegation'
-  | 'pendingPoolMigration'
-  | 'portfolioDrifted'
-  | 'poolRetiredOrSaturated';
+export type StakingNotificationType = 'pendingFirstDelegation' | 'pendingPoolMigration' | 'portfolioDrifted';
diff --git a/packages/staking/src/features/overview/helpers/hasSaturatedOrRetiredPools.ts b/packages/staking/src/features/overview/helpers/hasSaturatedOrRetiredPools.ts
diff --git a/packages/staking/src/features/overview/helpers/index.ts b/packages/staking/src/features/overview/helpers/index.ts
@@ -2,4 +2,3 @@ export { hasMinimumFundsToDelegate } from './hasMinimumFundsToDelegate';
 export { hasPendingDelegationTransaction } from './hasPendingDelegationTransaction';
 export { mapPortfolioToDisplayData } from './mapPortfolioToDisplayData';
 export { isPortfolioDrifted } from './isPortfolioDrifted';
-export { hasSaturatedOrRetiredPools } from './hasSaturatedOrRetiredPools';
diff --git a/packages/staking/src/features/overview/helpers/mapPortfolioToDisplayData.ts b/packages/staking/src/features/overview/helpers/mapPortfolioToDisplayData.ts
@@ -1,7 +1,8 @@
 import { Wallet } from '@lace/cardano';
 import { PIE_CHART_DEFAULT_COLOR_SET, PieChartColor, PieChartGradientColor } from '@lace/ui';
 import type { CurrentPortfolioStakePool } from '../../store';
-import { isOverSaturated } from './hasSaturatedOrRetiredPools';
+
+const SATURATION_UPPER_BOUND = 100;
 
 type MapPortfolioToDisplayDataParams = {
   cardanoCoin: Wallet.CoinId;
@@ -22,10 +23,9 @@ export const mapPortfolioToDisplayData = ({
     fiat: cardanoPrice,
     lastReward: Wallet.util.lovelacesToAdaString(item.displayData.lastReward.toString()),
     name: item.displayData.name || '-',
-    status: ((): 'retired' | 'saturated' | 'retiring' | undefined => {
-      if (item.stakePool.status === 'retired') return 'retired';
-      if (item.stakePool.status === 'retiring') return 'retiring';
-      if (isOverSaturated(item.displayData.saturation || 0)) return 'saturated';
+    status: ((): 'retired' | 'saturated' | undefined => {
+      if (item.displayData.retired) return 'retired';
+      if (Number(item.displayData.saturation || 0) > SATURATION_UPPER_BOUND) return 'saturated';
       // eslint-disable-next-line consistent-return, unicorn/no-useless-undefined
       return undefined;
     })(),
diff --git a/packages/ui/src/assets/icons/warning-icon-triangle.component.svg b/packages/ui/src/assets/icons/warning-icon-triangle.component.svg
