feat: replace emode label underscore with spaces (#2908)

Author: sammdec

src/components/transactions/Emode/EmodeModalContent.tsx

@@ -29,6 +29,7 @@ import { useModalContext } from 'src/hooks/useModal';
 import { useWeb3Context } from 'src/libs/hooks/useWeb3Context';
 import { useRootStore } from 'src/store/root';
 import { getNetworkConfig } from 'src/utils/marketsAndNetworksConfig';
+import { replaceUnderscoresWithSpaces } from 'src/utils/utils';
 import { useShallow } from 'zustand/shallow';
 
 import { TxErrorView } from '../FlowCommons/Error';
@@ -437,7 +438,7 @@ export const EmodeModalContent = ({ user }: { user: ExtendedFormattedUser }) =>
                           sx={{ opacity: emode.available ? 1 : 0.5 }}
                           fontStyle={emode.available ? 'normal' : 'italic'}
                         >
-                          {emode.label}
+                          {replaceUnderscoresWithSpaces(emode.label)}
                         </Typography>
                         {emode.id === user.userEmodeCategoryId && (
                           <Box sx={{ display: 'inline-flex', alignItems: 'center' }}>

src/components/transactions/Supply/SupplyModalContent.tsx

@@ -30,7 +30,7 @@ import {
 } from 'src/utils/getMaxAmountAvailableToSupply';
 import { calculateHFAfterSupply } from 'src/utils/hfUtils';
 import { isFeatureEnabled } from 'src/utils/marketsAndNetworksConfig';
-import { roundToTokenDecimals } from 'src/utils/utils';
+import { replaceUnderscoresWithSpaces, roundToTokenDecimals } from 'src/utils/utils';
 import { useShallow } from 'zustand/shallow';
 
 import {
@@ -372,7 +372,8 @@ export const SupplyModalContent = React.memo(
               text={
                 selectedEmodeId === 0
                   ? t`Disabled`
-                  : eModes[selectedEmodeId]?.label || t`Category ${selectedEmodeId}`
+                  : replaceUnderscoresWithSpaces(eModes[selectedEmodeId]?.label) ||
+                    t`Category ${selectedEmodeId}`
               }
             />
           )}
@@ -391,8 +392,9 @@ export const SupplyModalContent = React.memo(
             <Typography variant="caption">
               {user.userEmodeCategoryId === 0 ? (
                 <Trans>
-                  This transaction will enable E-Mode ({eModes[selectedEmodeId]?.label}). Borrowing
-                  will be restricted to assets within this category.
+                  This transaction will enable E-Mode (
+                  {replaceUnderscoresWithSpaces(eModes[selectedEmodeId]?.label)}). Borrowing will be
+                  restricted to assets within this category.
                 </Trans>
               ) : selectedEmodeId === 0 ? (
                 <Trans>
@@ -401,9 +403,10 @@ export const SupplyModalContent = React.memo(
                 </Trans>
               ) : (
                 <Trans>
-                  This transaction will switch E-Mode from {eModes[user.userEmodeCategoryId]?.label}{' '}
-                  to {eModes[selectedEmodeId]?.label}. Borrowing will be restricted to assets within
-                  the new category.
+                  This transaction will switch E-Mode from{' '}
+                  {replaceUnderscoresWithSpaces(eModes[user.userEmodeCategoryId]?.label)} to{' '}
+                  {replaceUnderscoresWithSpaces(eModes[selectedEmodeId]?.label)}. Borrowing will be
+                  restricted to assets within the new category.
                 </Trans>
               )}
               {supplyUnWrapped && (

src/hooks/useReserveActionState.tsx

@@ -13,6 +13,7 @@ import { WalletEmptyInfo } from 'src/modules/dashboard/lists/SupplyAssetsList/Wa
 import { useRootStore } from 'src/store/root';
 import { assetCanBeBorrowedByUser } from 'src/utils/getMaxAmountAvailableToBorrow';
 import { displayGhoForMintableMarket } from 'src/utils/ghoUtilities';
+import { replaceUnderscoresWithSpaces } from 'src/utils/utils';
 import { useShallow } from 'zustand/shallow';
 
 import { useModalContext } from './useModal';
@@ -137,8 +138,11 @@ export const useReserveActionState = ({
           <Warning sx={{ mb: 0 }} severity="info" icon={false}>
             <Trans>
               Borrowing is unavailable because you’ve enabled Efficiency Mode (E-Mode) for{' '}
-              {getEmodeMessage(eModes[user.userEmodeCategoryId].label)} category. To manage E-Mode
-              categories visit your <Link href={ROUTES.dashboard}>Dashboard</Link>.
+              {replaceUnderscoresWithSpaces(
+                getEmodeMessage(eModes[user.userEmodeCategoryId].label)
+              )}{' '}
+              category. To manage E-Mode categories visit your{' '}
+              <Link href={ROUTES.dashboard}>Dashboard</Link>.
             </Trans>
           </Warning>
         )}

src/modules/dashboard/DashboardEModeButton.tsx

@@ -7,6 +7,7 @@ import { useAppDataContext } from 'src/hooks/app-data-provider/useAppDataProvide
 import { useModalContext } from 'src/hooks/useModal';
 import { useRootStore } from 'src/store/root';
 import { DASHBOARD, GENERAL } from 'src/utils/events';
+import { replaceUnderscoresWithSpaces } from 'src/utils/utils';
 
 import LightningBoltGradient from '/public/lightningBoltGradient.svg';
 
@@ -40,7 +41,9 @@ export const DashboardEModeButton = ({ userEmodeCategoryId }: DashboardEModeButt
   const isEModeDisabled = userEmodeCategoryId === 0;
 
   const EModeLabelMessage = () => (
-    <Trans>{getEmodeMessage(_eModes[userEmodeCategoryId].label)}</Trans>
+    <Trans>
+      {replaceUnderscoresWithSpaces(getEmodeMessage(_eModes[userEmodeCategoryId].label))}
+    </Trans>
   );
 
   return (

src/modules/reserve-overview/ReserveEModePanel.tsx

@@ -13,6 +13,7 @@ import { ReserveOverviewBox } from 'src/components/ReserveOverviewBox';
 import { ReserveWithId } from 'src/hooks/app-data-provider/useAppDataProvider';
 import { useRootStore } from 'src/store/root';
 import { GENERAL, RESERVE_DETAILS } from 'src/utils/events';
+import { replaceUnderscoresWithSpaces } from 'src/utils/utils';
 
 import LightningBoltGradient from '/public/lightningBoltGradient.svg';
 
@@ -35,7 +36,7 @@ export const ReserveEModePanel: React.FC<ReserverEModePanelProps> = ({ reserve }
               <SvgIcon sx={{ fontSize: '14px', mr: 0.5, ml: 2 }}>
                 <LightningBoltGradient />
               </SvgIcon>
-              <Typography variant="subheader1">{e.label}</Typography>
+              <Typography variant="subheader1">{replaceUnderscoresWithSpaces(e.label)}</Typography>
               <ConfigStatus
                 enabled={e.canBeCollateral}
                 label="Collateral"

src/modules/reserve-overview/SupplyInfo.tsx

@@ -19,6 +19,7 @@ import { ReserveWithId } from 'src/hooks/app-data-provider/useAppDataProvider';
 import { AssetCapHookData } from 'src/hooks/useAssetCapsSDK';
 import { GENERAL } from 'src/utils/events';
 import { MarketDataType } from 'src/utils/marketsAndNetworksConfig';
+import { replaceUnderscoresWithSpaces } from 'src/utils/utils';
 
 import { SupplyApyGraph } from './graphs/ApyGraphContainer';
 import { ConfigStatus } from './ReserveEModePanel';
@@ -221,7 +222,7 @@ export const SupplyInfo = ({
                 This asset can only be used as collateral in E-Mode:{' '}
                 {reserve.eModeInfo
                   ?.filter((eMode) => eMode.canBeCollateral)
-                  .map((eMode) => eMode.label)
+                  .map((eMode) => replaceUnderscoresWithSpaces(eMode.label))
                   .join(', ')}
               </Trans>
             </Warning>

src/utils/utils.ts

@@ -145,3 +145,7 @@ export const convertAprToApy = (apr: number): number => {
   const apy = Math.pow(1 + monthlyRate, 12) - 1;
   return apy;
 };
+
+export const replaceUnderscoresWithSpaces = (str?: string): string | undefined => {
+  return str?.replace(/_/g, ' ');
+};