Hide ROI by default

README.md

@@ -252,6 +252,7 @@ The file `common.ts` with type [`AppConfig`](src/config/types.ts) contains impor
 - `selectedConnectors`: List of connectors to make available by default in the wallet selection modal that will be shown even if the connector is not injected.
 - `blockedConnectors`: List of EIP-6963 injected connectors names to block in the wallet selection modal.
 - `isSimulatorEnabled`: Flag to enable the simulation page.
+- `showStrategyRoi`: Optional flag to show the Strategy ROI in the Strategy Block. ROI is hidden by default.
 - `network`
   - `name`: Network name.
   - `logoUrl`: Network logo URL.

src/components/common/approval/ApproveToken.tsx

@@ -39,7 +39,7 @@ export const ApproveToken: FC<Props> = ({
   const { getTokenById } = useTokens();
   const token = getTokenById(data?.address || '');
   const mutation = useSetUserApproval();
-  // Gasprice on SEI is cheap, best practice is to use exact amount approval
+  // When gasprice is cheap, best practice is to use exact amount approval
   const [isLimited, setIsLimited] = useState(
     !!config.network.defaultLimitedApproval
   );

src/components/strategies/overview/StrategyContent.tsx

@@ -6,6 +6,7 @@ import { StrategyBlockCreate } from 'components/strategies/overview/strategyBloc
 import { CarbonLogoLoading } from 'components/common/CarbonLogoLoading';
 import { cn } from 'utils/helpers';
 import styles from './StrategyContent.module.css';
+import config from 'config';
 
 type Props = {
   strategies: StrategyWithFiat[];
@@ -44,7 +45,12 @@ export const _StrategyContent: FC<Props> = ({
       className={cn('xl:gap-25 grid gap-20 lg:gap-10', styles.strategyList)}
     >
       {strategies.map((s) => (
-        <StrategyBlock key={s.id} strategy={s} isExplorer={isExplorer} />
+        <StrategyBlock
+          key={s.id}
+          strategy={s}
+          isExplorer={isExplorer}
+          showStrategyRoi={config.showStrategyRoi}
+        />
       ))}
       {!isExplorer && <StrategyBlockCreate />}
     </ul>

src/components/strategies/overview/StrategyFilterSort.tsx

@@ -7,6 +7,7 @@ import { ReactComponent as IconFilter } from 'assets/icons/filter.svg';
 import { lsService } from 'services/localeStorage';
 import { useStrategyCtx } from 'hooks/useStrategies';
 import { cn } from 'utils/helpers';
+import config from 'config';
 
 // [START] Used for localStorage migration: Remove it after Nov 2023
 export enum EnumStrategySort {
@@ -31,6 +32,9 @@ const isEnumSort = (
 
 export const getSortFromLS = (): StrategySort => {
   const sort = lsService.getItem('strategyOverviewSort');
+  const isRoiSort = sort === 'roiDesc' || sort === 'roiAsc';
+  if (!config.showStrategyRoi && (sort === undefined || isRoiSort))
+    return 'recent';
   if (sort === undefined) return 'roiDesc';
   return isEnumSort(sort) ? strategySortMapping[sort] : sort;
 };
@@ -70,10 +74,11 @@ export const strategySort = {
   old: 'Oldest Created',
   pairAsc: 'Pair (A->Z)',
   pairDesc: 'Pair (Z->A)',
-  roiAsc: 'ROI (Ascending)',
-  roiDesc: 'ROI (Descending)',
+  ...(!!config.showStrategyRoi && { roiAsc: 'ROI (Ascending)' }),
+  ...(!!config.showStrategyRoi && { roiDesc: 'ROI (Descending)' }),
   totalBudgetDesc: 'Total Budget',
 };
+
 export type StrategySort = keyof typeof strategySort;
 
 interface Props {

src/components/strategies/overview/strategyBlock/StrategyBlock.tsx

@@ -4,21 +4,22 @@ import { m, mItemVariant } from 'libs/motion';
 import { StrategyBlockBuySell } from 'components/strategies/overview/strategyBlock/StrategyBlockBuySell';
 
 import { cn } from 'utils/helpers';
-import { StrategyBlockRoi } from './StrategyBlockRoi';
-import { StrategyBlockBudget } from './StrategyBlockBudget';
 import { StrategyBlockHeader } from './StrategyBlockHeader';
 import { StrategyGraph } from './StrategyGraph';
+import { StrategyBlockInfo } from './StrategyBlockInfo';
 
 interface Props {
   strategy: StrategyWithFiat;
   className?: string;
   isExplorer?: boolean;
+  showStrategyRoi?: boolean;
 }
 
 export const StrategyBlock: FC<Props> = ({
   strategy,
   className,
   isExplorer,
+  showStrategyRoi,
 }) => {
   return (
     <m.li
@@ -30,8 +31,10 @@ export const StrategyBlock: FC<Props> = ({
       data-testid={`${strategy.base.symbol}/${strategy.quote.symbol}`}
     >
       <StrategyBlockHeader strategy={strategy} isExplorer={isExplorer} />
-      <StrategyBlockRoi strategy={strategy} />
-      <StrategyBlockBudget strategy={strategy} />
+      <StrategyBlockInfo
+        strategy={strategy}
+        showStrategyRoi={showStrategyRoi}
+      />
       <div
         className={cn(
           'rounded-8 border-background-800 col-start-1 col-end-3 grid grid-cols-2 grid-rows-[auto_auto] border-2',

src/components/strategies/overview/strategyBlock/StrategyBlockBudget.tsx

@@ -6,10 +6,11 @@ import { useFiatCurrency } from 'hooks/useFiatCurrency';
 import { StrategyWithFiat } from 'libs/queries';
 
 interface Props {
+  fullWidth?: boolean;
   strategy: StrategyWithFiat;
 }
 
-export const StrategyBlockBudget: FC<Props> = ({ strategy }) => {
+export const StrategyBlockBudget: FC<Props> = ({ strategy, fullWidth }) => {
   const baseFiat = useFiatCurrency(strategy.base);
   const quoteFiat = useFiatCurrency(strategy.quote);
   const noFiatValue = !baseFiat.hasFiatValue() && !quoteFiat.hasFiatValue();
@@ -22,7 +23,8 @@ export const StrategyBlockBudget: FC<Props> = ({ strategy }) => {
     <article
       className={cn(
         'rounded-8 border-background-800 flex flex-col border-2 p-16',
-        strategy.status === 'active' ? '' : 'opacity-50'
+        strategy.status === 'active' ? '' : 'opacity-50',
+        !!fullWidth ? 'col-start-1 col-end-3 flex-row justify-between' : ''
       )}
     >
       <Tooltip element={<TooltipContent />}>

src/components/strategies/overview/strategyBlock/StrategyBlockInfo.tsx

@@ -0,0 +1,18 @@
+import { FC } from 'react';
+import { StrategyWithFiat } from 'libs/queries';
+import { StrategyBlockRoi } from 'components/strategies/overview/strategyBlock/StrategyBlockRoi';
+import { StrategyBlockBudget } from 'components/strategies/overview/strategyBlock/StrategyBlockBudget';
+
+interface Props {
+  strategy: StrategyWithFiat;
+  showStrategyRoi?: boolean;
+}
+
+export const StrategyBlockInfo: FC<Props> = ({ strategy, showStrategyRoi }) => {
+  return (
+    <>
+      {!!showStrategyRoi && <StrategyBlockRoi strategy={strategy} />}
+      <StrategyBlockBudget strategy={strategy} fullWidth={!showStrategyRoi} />
+    </>
+  );
+};

src/config/celo/common.ts

@@ -23,6 +23,7 @@ export const commonConfig: AppConfig = {
   blockedConnectors: ['Tailwind', 'Compass Wallet', 'Seif'],
   walletConnectProjectId: '',
   isSimulatorEnabled: false,
+  showStrategyRoi: true,
   policiesLastUpdated: '31 Jul, 2024',
   network: {
     name: 'Celo Network',

src/config/ethereum/common.ts

@@ -37,6 +37,7 @@ export const commonConfig: AppConfig = {
   blockedConnectors: ['Tailwind', 'Compass Wallet', 'Seif'],
   walletConnectProjectId: 'f9d8863ab6c03f2293d7d56d7c0c0853',
   isSimulatorEnabled: true,
+  showStrategyRoi: true,
   policiesLastUpdated: '18 April, 2023',
   network: {
     name: 'Ethereum Network',

src/config/types.ts

@@ -16,6 +16,7 @@ export interface AppConfig {
   blockedConnectors?: SelectableConnectionName[];
   walletConnectProjectId: string;
   isSimulatorEnabled: boolean;
+  showStrategyRoi?: boolean;
   sentryDSN?: string;
   policiesLastUpdated?: string;
   network: {

src/libs/queries/extApi/roi.ts

@@ -2,11 +2,12 @@ import { useQuery } from '@tanstack/react-query';
 import { QueryKey } from 'libs/queries/queryKey';
 import { FIVE_MIN_IN_MS } from 'utils/time';
 import { carbonApi } from 'utils/carbonApi';
+import config from 'config';
 
 export const useGetRoi = () => {
   return useQuery({
     queryKey: QueryKey.roi(),
-    queryFn: async () => carbonApi.getRoi(),
+    queryFn: async () => !!config.showStrategyRoi && carbonApi.getRoi(),
     refetchInterval: FIVE_MIN_IN_MS,
     staleTime: FIVE_MIN_IN_MS,
   });

src/pages/strategy/index.tsx

@@ -5,8 +5,6 @@ import { TokensOverlap } from 'components/common/tokensOverlap';
 import { cn } from 'utils/helpers';
 import { useGetStrategy } from 'libs/queries';
 import { useStrategiesWithFiat } from 'hooks/useStrategies';
-import { StrategyBlockRoi } from 'components/strategies/overview/strategyBlock/StrategyBlockRoi';
-import { StrategyBlockBudget } from 'components/strategies/overview/strategyBlock/StrategyBlockBudget';
 import { StrategyBlockBuySell } from 'components/strategies/overview/strategyBlock/StrategyBlockBuySell';
 import { StrategyGraph } from 'components/strategies/overview/strategyBlock/StrategyGraph';
 import {
@@ -19,6 +17,8 @@ import { TradingviewChart } from 'components/tradingviewChart';
 import { NotFound } from 'components/common/NotFound';
 import { ActivityLayout } from 'components/activity/ActivityLayout';
 import { BackButton } from 'components/common/BackButton';
+import config from 'config';
+import { StrategyBlockInfo } from 'components/strategies/overview/strategyBlock/StrategyBlockInfo';
 
 export const StrategyPage = () => {
   const { history } = useRouter();
@@ -49,6 +49,7 @@ export const StrategyPage = () => {
   }
   const base = strategy.base;
   const quote = strategy.quote;
+  const showStrategyRoi = config.showStrategyRoi;
 
   return (
     <Page hideTitle={true} className="gap-20">
@@ -71,8 +72,10 @@ export const StrategyPage = () => {
       <section className="flex flex-col gap-16 md:flex-row">
         <article className="bg-background-900 grid grid-cols-2 grid-rows-[auto_auto_auto] gap-16 rounded p-24 md:w-[400px]">
           <h2 className="text-18 font-weight-500 col-span-2">Strategy Info</h2>
-          <StrategyBlockRoi strategy={strategy} />
-          <StrategyBlockBudget strategy={strategy} />
+          <StrategyBlockInfo
+            strategy={strategy}
+            showStrategyRoi={showStrategyRoi}
+          />
           <div
             className={cn(
               'rounded-8 border-background-800 col-start-1 col-end-3 grid grid-cols-2 grid-rows-[auto_auto] border-2',