SOV-4443: Rune Pools Market Making updates (#1013)

* feat: rune pool page update * Create honest-fans-fly.md * fix: rename pools prop * Hide highlighted pairs functionality --------- Co-authored-by: Peiman <[email protected]> Co-authored-by: tiltom <[email protected]>
DistributedCollective · Sep 25, 2024 · c20bcb3 · c20bcb3
1 parent ef2f1ab
commit c20bcb3
Show file tree

Hide file tree

Showing 6 changed files with 42 additions and 4 deletions.
diff --git a/.changeset/honest-fans-fly.md b/.changeset/honest-fans-fly.md
@@ -0,0 +1,5 @@
+---
+"frontend": patch
+---
+
+SOV-4443: rune pool page update
diff --git a/apps/frontend/src/app/5_pages/MarketMakingPage/MarketMakingPage.constants.ts b/apps/frontend/src/app/5_pages/MarketMakingPage/MarketMakingPage.constants.ts
@@ -146,6 +146,8 @@ export const TESTNET_AMM = [
     ChainIds.RSK_TESTNET,
     '0x5fc0b3ac4683bd8af8e244e646d897a2c3f2a6ac',
     '0x64B1aC8301f64c92721804ed78f2ee6025aaf7cE',
+    // undefined,
+    // true,
   ),
   new AmmLiquidityPool(
     COMMON_SYMBOLS.SOV,

diff --git a/apps/frontend/src/app/5_pages/MarketMakingPage/components/MarketMaking/MarketMaking.tsx b/apps/frontend/src/app/5_pages/MarketMakingPage/components/MarketMaking/MarketMaking.tsx
@@ -59,6 +59,25 @@ export const MarketMaking: FC = () => {
             onClick={setIsPromoCardClicked}
           />
 
+          {/* <Paragraph
+            className="pl-2 w-full text-base font-medium text-left mb-4 mt-8"
+            size={ParagraphSize.base}
+          >
+            {t(translations.marketMakingPage.newPairs)}
+          </Paragraph>
+          <PoolsTable
+            setActivePool={setActivePoolKey}
+            shouldScroll={isPromoCardClicked}
+            activePool={activePool}
+            showHighlightedPools
+          />
+
+          <Paragraph
+            className="pl-2 w-full text-base font-medium text-left mb-4 mt-8"
+            size={ParagraphSize.base}
+          >
+            {t(translations.marketMakingPage.allPairs)}
+          </Paragraph> */}
           <PoolsTable
             setActivePool={setActivePoolKey}
             shouldScroll={isPromoCardClicked}

diff --git a/apps/frontend/src/app/5_pages/MarketMakingPage/components/PoolsTable/PoolsTable.tsx b/apps/frontend/src/app/5_pages/MarketMakingPage/components/PoolsTable/PoolsTable.tsx
@@ -24,20 +24,28 @@ type PoolsTableProps = {
   activePool?: string;
   setActivePool: (poolKey: string) => void;
   shouldScroll?: boolean;
+  showHighlightedPools?: boolean;
 };
 
 export const PoolsTable: FC<PoolsTableProps> = ({
   activePool,
   setActivePool,
   shouldScroll = false,
+  showHighlightedPools,
 }) => {
   const navigate = useNavigate();
   const { account } = useAccount();
   const tableRef = useRef<HTMLDivElement>(null);
 
+  const pools = useMemo(
+    () =>
+      ammPools.filter(pool => pool.isHighlighted === !!showHighlightedPools),
+    [showHighlightedPools],
+  );
+
   const expandedIndex = useMemo(
-    () => ammPools.findIndex(pool => pool.key === activePool),
-    [activePool],
+    () => pools.findIndex(pool => pool.key === activePool),
+    [activePool, pools],
   );
 
   const generateRowTitle = useCallback(
@@ -95,7 +103,7 @@ export const PoolsTable: FC<PoolsTableProps> = ({
   }, [activePool, shouldScroll]);
 
   return (
-    <div ref={tableRef} className="bg-gray-90 py-4 px-4 rounded w-full mt-8">
+    <div ref={tableRef} className="bg-gray-90 py-4 px-4 rounded w-full">
       {account && (
         <div className="flex justify-end mb-2.5">
           <Button
@@ -110,7 +118,7 @@ export const PoolsTable: FC<PoolsTableProps> = ({
       )}
       <Table
         columns={COLUMNS_CONFIG}
-        rows={ammPools}
+        rows={pools}
         onRowClick={onPoolClick}
         expandedIndex={expandedIndex}
         className={styles.table}

diff --git a/apps/frontend/src/app/5_pages/MarketMakingPage/utils/AmmLiquidityPool.ts b/apps/frontend/src/app/5_pages/MarketMakingPage/utils/AmmLiquidityPool.ts
@@ -19,6 +19,7 @@ export class AmmLiquidityPool {
     public readonly converter: string,
     public readonly poolTokenA: string,
     public readonly poolTokenB?: string,
+    public readonly isHighlighted?: boolean,
   ) {
     if (converterVersion === 2 && !poolTokenB) {
       throw new Error(
@@ -32,6 +33,7 @@ export class AmmLiquidityPool {
     }
     this.converter = converter.toLowerCase();
     this.poolTokenA = poolTokenA.toLowerCase();
+    this.isHighlighted = Boolean(isHighlighted);
     if (poolTokenB) {
       this.poolTokenB = poolTokenB.toLowerCase();
     }

diff --git a/apps/frontend/src/locales/en/translations.json b/apps/frontend/src/locales/en/translations.json
@@ -1394,6 +1394,8 @@
             "p2": "Next rewards recalibration on {{recalibrationDate}}.",
             "learnMoreLink": "Learn more"
         },
+        "newPairs": "New Pairs",
+        "allPairs": "All Pairs",
         "rewards": "Rewards",
         "poolsTable": {
             "pair": "Pair",