Merge pull request #1561 from bancorprotocol/issue-#1336

Trade Count

README.md

@@ -252,7 +252,6 @@ 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.

e2e/utils/DebugDriver.ts

@@ -38,7 +38,7 @@ export const setupLocalStorage = async (page: Page, testInfo: TestInfo) => {
     // each value is stringified to match lsservice
     for (const [key, value] of Object.entries(storage)) {
       localStorage.setItem(
-        `carbon-ethereum-v1.1-${key}`,
+        `carbon-ethereum-v1.2-${key}`,
         JSON.stringify(value)
       );
     }

src/components/strategies/overview/StrategyContent.tsx

@@ -6,7 +6,6 @@ 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[];
@@ -45,12 +44,7 @@ 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}
-          showStrategyRoi={config.showStrategyRoi}
-        />
+        <StrategyBlock key={s.id} strategy={s} isExplorer={isExplorer} />
       ))}
       {!isExplorer && <StrategyBlockCreate />}
     </ul>

src/components/strategies/overview/StrategyFilterSort.tsx

@@ -7,60 +7,14 @@ 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 {
-  Recent,
-  Old,
-  PairAscending,
-  PairDescending,
-  RoiAscending,
-  RoiDescending,
-}
-export const strategySortMapping: Record<EnumStrategySort, StrategySort> = {
-  [EnumStrategySort.Recent]: 'recent',
-  [EnumStrategySort.Old]: 'old',
-  [EnumStrategySort.PairAscending]: 'pairAsc',
-  [EnumStrategySort.PairDescending]: 'pairDesc',
-  [EnumStrategySort.RoiAscending]: 'roiAsc',
-  [EnumStrategySort.RoiDescending]: 'roiDesc',
-};
-const isEnumSort = (
-  sort: StrategySort | EnumStrategySort
-): sort is EnumStrategySort => sort in strategySortMapping;
 
 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;
+  return lsService.getItem('strategyOverviewSort') || 'trades';
 };
 
-export enum EnumStrategyFilter {
-  All,
-  Active,
-  Inactive,
-}
-export const strategyFilterMapping: Record<EnumStrategyFilter, StrategyFilter> =
-  {
-    [EnumStrategyFilter.All]: 'all',
-    [EnumStrategyFilter.Active]: 'active',
-    [EnumStrategyFilter.Inactive]: 'inactive',
-  };
-
-const isEnumFilter = (
-  filter: StrategyFilter | EnumStrategyFilter
-): filter is EnumStrategyFilter => filter in strategyFilterMapping;
-
 export const getFilterFromLS = (): StrategyFilter => {
-  const filter = lsService.getItem('strategyOverviewFilter');
-  if (filter === undefined) return 'all';
-  return isEnumFilter(filter) ? strategyFilterMapping[filter] : filter;
+  return lsService.getItem('strategyOverviewFilter') || 'all';
 };
-// [END]
 
 export const strategyFilter = {
   all: 'All',
@@ -74,16 +28,10 @@ export const strategySort = {
   old: 'Oldest Created',
   pairAsc: 'Pair (A->Z)',
   pairDesc: 'Pair (Z->A)',
-  roiAsc: 'ROI (Ascending)',
-  roiDesc: 'ROI (Descending)',
   totalBudgetDesc: 'Total Budget',
+  trades: 'Trades',
 };
 
-if (config.showStrategyRoi) {
-  strategySort['roiAsc'] = '';
-  strategySort['roiDesc'] = '';
-}
-
 export type StrategySort = keyof typeof strategySort;
 
 interface Props {

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

@@ -12,32 +12,27 @@ interface Props {
   strategy: StrategyWithFiat;
   className?: string;
   isExplorer?: boolean;
-  showStrategyRoi?: boolean;
 }
 
 export const StrategyBlock: FC<Props> = ({
   strategy,
   className,
   isExplorer,
-  showStrategyRoi,
 }) => {
   return (
     <m.li
       variants={mItemVariant}
       className={cn(
-        'rounded-10 bg-background-900 grid grid-cols-2 grid-rows-[auto_auto_auto] gap-16 p-24',
+        'rounded-10 bg-background-900 grid grid-cols-1 grid-rows-[auto_auto_auto] gap-16 p-24',
         className
       )}
       data-testid={`${strategy.base.symbol}/${strategy.quote.symbol}`}
     >
       <StrategyBlockHeader strategy={strategy} isExplorer={isExplorer} />
-      <StrategyBlockInfo
-        strategy={strategy}
-        showStrategyRoi={showStrategyRoi}
-      />
+      <StrategyBlockInfo strategy={strategy} />
       <div
         className={cn(
-          'rounded-8 border-background-800 col-start-1 col-end-3 grid grid-cols-2 grid-rows-[auto_auto] border-2',
+          'rounded-8 border-background-800 grid grid-cols-2 grid-rows-[auto_auto] border-2',
           strategy.status === 'active' ? '' : 'opacity-50'
         )}
       >

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

@@ -1,16 +1,13 @@
 import { FC } from 'react';
-import { Tooltip } from 'components/common/tooltip/Tooltip';
-import { ReactComponent as IconTooltip } from 'assets/icons/tooltip.svg';
 import { cn, prettifyNumber } from 'utils/helpers';
 import { useFiatCurrency } from 'hooks/useFiatCurrency';
 import { StrategyWithFiat } from 'libs/queries';
 
 interface Props {
-  fullWidth?: boolean;
   strategy: StrategyWithFiat;
 }
 
-export const StrategyBlockBudget: FC<Props> = ({ strategy, fullWidth }) => {
+export const StrategyBlockBudget: FC<Props> = ({ strategy }) => {
   const baseFiat = useFiatCurrency(strategy.base);
   const quoteFiat = useFiatCurrency(strategy.quote);
   const noFiatValue = !baseFiat.hasFiatValue() && !quoteFiat.hasFiatValue();
@@ -22,17 +19,13 @@ export const StrategyBlockBudget: FC<Props> = ({ strategy, fullWidth }) => {
   return (
     <article
       className={cn(
-        'rounded-8 border-background-800 flex flex-col border-2 p-16',
-        strategy.status === 'active' ? '' : 'opacity-50',
-        !!fullWidth ? 'col-start-1 col-end-3 flex-row justify-between' : ''
+        'rounded-8 border-background-800 flex w-3/5 flex-col border-2 p-16',
+        strategy.status === 'active' ? '' : 'opacity-50'
       )}
     >
-      <Tooltip element={<TooltipContent />}>
-        <h4 className="text-12 flex items-center gap-4 text-white/60">
-          Total Budget
-          <IconTooltip className="size-10" />
-        </h4>
-      </Tooltip>
+      <h4 className="text-12 flex items-center gap-4 text-white/60">
+        Total Budget
+      </h4>
       <p
         className={cn(
           'text-18 font-weight-500',
@@ -45,9 +38,3 @@ export const StrategyBlockBudget: FC<Props> = ({ strategy, fullWidth }) => {
     </article>
   );
 };
-
-const TooltipContent: FC = () => {
-  const currency = useFiatCurrency();
-  const fiatSymbol = currency.selectedFiatCurrency;
-  return <p>Sum of the {fiatSymbol} value of the token budgets.</p>;
-};

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

@@ -23,8 +23,8 @@ export const StrategyBlockBuySell: FC<{
   const fiatBudget = buy ? strategy.fiatBudget.quote : strategy.fiatBudget.base;
   const fiatBudgetValue = getFiatDisplayValue(fiatBudget, currency);
 
-  const buyTooltip = `This is the available amount of ${otherToken.symbol} tokens that you are willing to use in order to buy ${token.symbol}.`;
-  const sellTooltip = `This is the available amount of ${otherToken.symbol} tokens that you are willing to sell.`;
+  const buyTooltip = `${otherToken.symbol} tokens available to buy ${token.symbol}.`;
+  const sellTooltip = `${otherToken.symbol} tokens available for sale.`;
   const noCurrencyTooltip = `There is no ${currency} value for this token.`;
 
   return (

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

@@ -21,7 +21,7 @@ interface Props {
 export const StrategyBlockHeader: FC<Props> = ({ strategy, isExplorer }) => {
   const { base, quote } = strategy;
   return (
-    <header className="col-start-1 col-end-3 flex gap-16">
+    <header className="flex gap-16">
       <TokensOverlap
         // TODO fix token logo classes
         size={40}

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

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

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

@@ -0,0 +1,27 @@
+import { FC } from 'react';
+import { cn, prettifyNumber } from 'utils/helpers';
+import { StrategyWithFiat } from 'libs/queries';
+
+interface Props {
+  strategy: StrategyWithFiat;
+}
+
+export const StrategyBlockTradeCount: FC<Props> = ({ strategy }) => {
+  const count = prettifyNumber(strategy.tradeCount, {
+    abbreviate: true,
+    decimals: 0,
+  });
+  return (
+    <article
+      className={cn(
+        'rounded-8 border-background-800 flex w-2/5 flex-col border-2 p-16',
+        strategy.status === 'active' ? '' : 'opacity-50'
+      )}
+    >
+      <h4 className="text-12 flex items-center gap-4 text-white/60">
+        Trade Count
+      </h4>
+      <p className="text-18 font-weight-500 truncate">{count}</p>
+    </article>
+  );
+};

src/components/strategies/overview/utils.ts

@@ -38,22 +38,18 @@ const sortFn: Record<StrategySort, SortFn> = {
       b.quote.symbol.localeCompare(a.quote.symbol)
     );
   },
-  roiAsc: (a, b) => {
-    if (differentStatus(a, b)) return a.status === 'active' ? -1 : 1;
-    return a.roi.minus(b.roi).toNumber();
-  },
-  roiDesc: (a, b) => {
-    if (differentStatus(a, b)) return a.status === 'active' ? -1 : 1;
-    return a.roi.minus(b.roi).times(-1).toNumber();
-  },
   totalBudgetDesc: (a, b) => {
     if (differentStatus(a, b)) return a.status === 'active' ? -1 : 1;
     return a.fiatBudget.total.minus(b.fiatBudget.total).times(-1).toNumber();
   },
+  trades: (a, b) => {
+    if (differentStatus(a, b)) return a.status === 'active' ? -1 : 1;
+    return b.tradeCount - a.tradeCount;
+  },
 };
 
 export const getCompareFunctionBySortType = (sortType: StrategySort) => {
-  return sortFn[sortType] ?? sortFn['roiDesc'];
+  return sortFn[sortType] ?? sortFn['trades'];
 };
 export const getSortAndFilterItems = () => {
   const sortItems = Object.entries(strategySort)

src/config/celo/common.ts

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

src/config/configSchema.ts

@@ -18,7 +18,6 @@ export const AppConfigSchema = v.object({
   blockedConnectors: v.optional(ConnectorSchema),
   walletConnectProjectId: v.string(),
   isSimulatorEnabled: v.boolean(),
-  showStrategyRoi: v.optional(v.boolean()),
   sentryDSN: v.optional(v.string()),
   policiesLastUpdated: v.optional(v.string()),
   network: v.object({

src/config/ethereum/common.ts

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