feat: legacy pools on trident pool page

src/features/account/AssetBalances/liquidityPositions/hooks.ts

@@ -1,5 +1,5 @@
 import { Token } from '@sushiswap/core-sdk'
-import { PoolType } from '@sushiswap/trident-sdk'
+import { AllPoolType } from 'app/features/trident/types'
 import { getApy } from 'app/functions'
 import {
   TridentPositionRow,
@@ -52,19 +52,16 @@ export function useLegacyLiquidityPositionsBalances({ account, chainId }: Positi
             const pair = pairs.find((pair: any) => pair.id === position.pair.id)
             const pair1w = pairs1w?.find((pair: any) => pair.id === position.pair.id) ?? pair
 
-            console.log(pair.volumeUSD - pair1w.volumeUSD, pairs1w, pair.reserveUSD)
-
             return {
               id: position.id,
               assets: [pair.token0, pair.token1].map(
                 (token: any) => new Token(chainId!, token.id, Number(token.decimals), token.symbol, token.name)
               ),
-              type: PoolType.ConstantProduct,
+              type: AllPoolType.Legacy,
               swapFeePercent: 0.3,
               twapEnabled: true,
               value: (position.liquidityTokenBalance / pair.totalSupply) * pair.reserveUSD,
               apy: getApy({ volume: pair.volumeUSD - pair1w.volumeUSD, liquidity: pair.reserveUSD, days: 7 }),
-              legacy: true,
             }
           })
         : undefined,

src/features/portfolio/AssetBalances/liquidityPositions/useTridentLPTableConfig.tsx

@@ -1,10 +1,9 @@
-import { PoolType } from '@sushiswap/trident-sdk'
 import Button from 'app/components/Button'
 import Chip from 'app/components/Chip'
 import Typography from 'app/components/Typography'
 import { PoolCell } from 'app/features/trident/pools/PoolCell'
 import { feeTiersFilter, filterForSearchQueryAndTWAP } from 'app/features/trident/pools/poolTableFilters'
-import { chipPoolColorMapper, poolTypeNameMapper } from 'app/features/trident/types'
+import { AllPoolType, chipPoolColorMapper, poolTypeNameMapper } from 'app/features/trident/types'
 import { formatPercent } from 'app/functions'
 import { TridentPositionRow } from 'app/services/graph'
 import { useRollingPoolStats } from 'app/services/graph/hooks/pools'
@@ -34,13 +33,8 @@ export const useTridentLPTableConfig = ({ positions, chainId }: TridentLPTableCo
         accessor: 'type',
         maxWidth: 100,
         className: 'text-left hidden lg:flex',
-        Cell: (props: { value: PoolType; row: any }) => {
-          return (
-            <Chip
-              label={props.row.original.legacy ? 'Legacy' : poolTypeNameMapper[props.value]}
-              color={chipPoolColorMapper[props.value]}
-            />
-          )
+        Cell: (props: { value: AllPoolType }) => {
+          return <Chip label={poolTypeNameMapper[props.value]} color={chipPoolColorMapper[props.value]} />
         },
         // @ts-ignore TYPE NEEDS FIXING
         filter: (rows, id, filterValue) =>
@@ -84,9 +78,11 @@ export const useTridentLPTableConfig = ({ positions, chainId }: TridentLPTableCo
             shouldFetch: !!chainId && !!positions,
           })
 
+          const apy = row.type === AllPoolType.Legacy ? value : stats?.[row.id]?.apy
+
           return (
             <Typography weight={700} className="w-full text-right text-high-emphesis">
-              {formatPercent(value ?? stats?.[row.id]?.apy)}
+              {formatPercent(apy)}
             </Typography>
           )
         },
@@ -99,8 +95,8 @@ export const useTridentLPTableConfig = ({ positions, chainId }: TridentLPTableCo
         className: 'text-right flex justify-end',
         cellClassName: 'justify-end',
         // @ts-ignore TYPE NEEDS FIXING
-        Cell: ({ row: { original } }) => {
-          if (original.legacy) {
+        Cell: ({ row: { original } }: { row: { original: TridentPositionRow } }) => {
+          if (original.type === AllPoolType.Legacy) {
             return (
               <Link
                 href={{

src/features/trident/constants.ts

@@ -1,9 +1,10 @@
-import { PoolType } from '@sushiswap/trident-sdk'
 import { ChipColor } from 'app/components/Chip'
 import { classNames } from 'app/functions'
 
+import { AllPoolType } from './types'
+
 type PoolTypesInterface = Record<
-  PoolType,
+  AllPoolType,
   {
     label: string
     label_long: string
@@ -67,6 +68,19 @@ export const POOL_TYPES: PoolTypesInterface = {
       height: 95,
     },
   },
+  Legacy: {
+    label: 'Legacy',
+    label_long: 'Legacy Pool',
+    color: 'default',
+    description: 'Most common, traditional 50/50 value split between assets',
+    long_description:
+      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Dignissim bibendum in ut amet, sit fames. Iaculis ultrices sit fermentum commodo nisl eget etiam fusce ac. Risus enim sollicitudin phasellus nibh. Neque turpis amet at scelerisque vitae nibh magna. Aliquet ut natoque quisque eget pellentesque id. Convallis enim.',
+    image: {
+      url: '/images/trident/a-b-pool.png',
+      width: 121,
+      height: 95,
+    },
+  },
 }
 
 export const TABLE_WRAPPER_DIV_CLASSNAME =

src/features/trident/create/createSlice.ts

@@ -1,15 +1,16 @@
 import { Signature } from '@ethersproject/bytes'
 import { createSlice, PayloadAction } from '@reduxjs/toolkit'
-import { Fee, PoolType } from '@sushiswap/trident-sdk'
+import { Fee } from '@sushiswap/trident-sdk'
 import { AppState } from 'app/state'
 
+import { AllPoolType } from '../types'
 import { SelectedAsset } from './SelectedAsset'
 
 export type CreatePoolStep = 1 | 2
 
 export interface CreateState {
   currentStep: CreatePoolStep
-  selectedPoolType: PoolType
+  selectedPoolType?: AllPoolType
   selectedAssets: SelectedAsset[]
   selectedFeeTier?: Fee
   createAnOracle: boolean
@@ -21,7 +22,7 @@ export interface CreateState {
 
 const initialState: CreateState = {
   currentStep: 1,
-  selectedPoolType: PoolType.ConstantProduct,
+  selectedPoolType: undefined,
   selectedAssets: [new SelectedAsset({}), new SelectedAsset({})],
   selectedFeeTier: undefined,
   createAnOracle: false,
@@ -38,7 +39,7 @@ export const poolCreateSlice = createSlice({
     setCreateCurrentStep: (state, action: PayloadAction<CreatePoolStep>) => {
       state.currentStep = action.payload
     },
-    setCreateSelectedPoolType: (state, action: PayloadAction<PoolType>) => {
+    setCreateSelectedPoolType: (state, action: PayloadAction<AllPoolType>) => {
       state.selectedPoolType = action.payload
     },
     setCreateSelectedFeeTier: (state, action: PayloadAction<Fee>) => {

src/features/trident/pools/MobileFilter.tsx

@@ -9,12 +9,15 @@ import {
   selectTridentPools,
   setPoolsFarmsOnly,
   setPoolsFeeTiers,
+  setPoolsPoolTypes,
   setPoolsTWAPOnly,
 } from 'app/features/trident/pools/poolsSlice'
 import { useAppDispatch, useAppSelector } from 'app/state/hooks'
 import { FC, useState } from 'react'
 
-import { removeOrAddFeeTier } from './SearchSidebar'
+import { POOL_TYPES } from '../constants'
+import { UsedPoolType } from '../types'
+import { removeOrAddFeeTier, removeOrAddPoolType } from './SearchSidebar'
 
 const YieldFarmFilter: FC = () => {
   const { farmsOnly } = useAppSelector(selectTridentPools)
@@ -26,7 +29,7 @@ const YieldFarmFilter: FC = () => {
           Yield Farms:
         </Typography>
       </div>
-      <div className="flex flex-row gap-3 items-center" onClick={() => dispatch(setPoolsFarmsOnly(!farmsOnly))}>
+      <div className="flex flex-row items-center gap-3" onClick={() => dispatch(setPoolsFarmsOnly(!farmsOnly))}>
         <Checkbox checked={farmsOnly} />
         <Typography className="text-secondary">Show farms only</Typography>
       </div>
@@ -45,7 +48,7 @@ const TwapOnlyFilter: FC = () => {
           TWAP Oracles:
         </Typography>
       </div>
-      <div className="flex flex-row gap-3 items-center" onClick={() => dispatch(setPoolsTWAPOnly(!showTWAPOnly))}>
+      <div className="flex flex-row items-center gap-3" onClick={() => dispatch(setPoolsTWAPOnly(!showTWAPOnly))}>
         <Checkbox checked={showTWAPOnly} />
         <Typography className="text-secondary">Show oracle pairs only</Typography>
       </div>
@@ -67,7 +70,7 @@ const FeeTierFilter: FC = () => {
       {[Fee.HIGH, Fee.DEFAULT, Fee.MEDIUM, Fee.LOW].map((fee) => (
         <div
           key={fee}
-          className="flex flex-row gap-3 items-center"
+          className="flex flex-row items-center gap-3"
           onClick={() => removeOrAddFeeTier(fee, feeTiers, (feeTiers) => dispatch(setPoolsFeeTiers(feeTiers)))}
         >
           <Checkbox checked={feeTiers.includes(fee)} />
@@ -78,6 +81,33 @@ const FeeTierFilter: FC = () => {
   )
 }
 
+const PoolTypeFilter: FC = () => {
+  const { poolTypes } = useAppSelector(selectTridentPools)
+  const dispatch = useAppDispatch()
+
+  return (
+    <div className="flex flex-col gap-5 p-5">
+      <div className="flex items-center justify-between gap-3">
+        <Typography variant="lg" weight={700} className="text-high-emphesis">
+          By Pool Type:
+        </Typography>
+      </div>
+      {Object.values(UsedPoolType).map((poolType) => (
+        <div
+          key={poolType}
+          className="flex flex-row items-center gap-3"
+          onClick={() =>
+            removeOrAddPoolType(poolType, poolTypes, (poolTypes) => dispatch(setPoolsPoolTypes(poolTypes)))
+          }
+        >
+          <Checkbox checked={poolTypes.includes(poolType)} />
+          <Typography className="text-secondary">{POOL_TYPES[poolType].label}</Typography>
+        </div>
+      ))}
+    </div>
+  )
+}
+
 export const MobileFilter: FC = () => {
   const { i18n } = useLingui()
   const [open, setOpen] = useState(false)
@@ -104,14 +134,17 @@ export const MobileFilter: FC = () => {
           </Button>
         }
       >
-        <div className="bg-dark-700 rounded-t">
+        <div className="rounded-t bg-dark-700">
           {/* To Be Built */}
           {/*<YieldFarmFilter />*/}
-          <div className="bg-dark-800 rounded-t">
+          <div className="rounded-t bg-dark-800">
             <TwapOnlyFilter />
-            <div className="relative bg-dark-900 rounded-t">
+            <div className="relative rounded-t bg-dark-900">
               <FeeTierFilter />
             </div>
+            <div className="relative rounded-t bg-dark-900">
+              <PoolTypeFilter />
+            </div>
           </div>
         </div>
       </BottomSlideIn>

src/features/trident/pools/SearchResultPools.tsx

@@ -14,6 +14,7 @@ import React, { FC } from 'react'
 // @ts-ignore TYPE NEEDS FIXING
 import { useFilters, useFlexLayout, usePagination, useSortBy, useTable } from 'react-table'
 
+import { AllPoolType } from '../types'
 import { SearchCategoryLabel } from './SearchCategoryLabel'
 import { useInstantiateTableFeatures } from './useInstantiateTableFeatures'
 import { DiscoverPoolsTableColumn, usePoolsTableData } from './usePoolsTableData'
@@ -88,30 +89,45 @@ const SearchResultPools: FC = () => {
               prepareRow(row)
 
               return (
-                <Link
-                  href={{
-                    pathname: `/trident/pool`,
-                    query: {
-                      // @ts-ignore TYPE NEEDS FIXING
-                      tokens: row.original.assets.map((asset) => asset.address),
-                      fee: row.original.swapFee,
-                      twap: row.original.twapEnabled,
-                    },
-                  }}
-                  key={i}
-                  passHref
-                >
-                  <tr {...row.getRowProps()} className={TABLE_TBODY_TR_CLASSNAME}>
-                    {/*@ts-ignore TYPE NEEDS FIXING*/}
-                    {row.cells.map((cell, i) => {
-                      return (
-                        <td key={i} {...cell.getCellProps()} className={TABLE_TBODY_TD_CLASSNAME(i, row.cells.length)}>
-                          {cell.render('Cell')}
-                        </td>
-                      )
-                    })}
-                  </tr>
-                </Link>
+                <>
+                  <Link
+                    href={
+                      row.original.type === AllPoolType.Legacy
+                        ? {
+                            pathname: `/analytics/pools/${row.original.address}`,
+                            query: {
+                              id: row.original.address,
+                            },
+                          }
+                        : {
+                            pathname: `/trident/pool`,
+                            query: {
+                              // @ts-ignore TYPE NEEDS FIXING
+                              tokens: row.original.assets.map((asset) => asset.address),
+                              fee: row.original.swapFee,
+                              twap: row.original.twapEnabled,
+                            },
+                          }
+                    }
+                    key={i}
+                    passHref
+                  >
+                    <tr {...row.getRowProps()} className={TABLE_TBODY_TR_CLASSNAME}>
+                      {/*@ts-ignore TYPE NEEDS FIXING*/}
+                      {row.cells.map((cell, i) => {
+                        return (
+                          <td
+                            key={i}
+                            {...cell.getCellProps()}
+                            className={TABLE_TBODY_TD_CLASSNAME(i, row.cells.length)}
+                          >
+                            {cell.render('Cell')}
+                          </td>
+                        )
+                      })}
+                    </tr>
+                  </Link>
+                </>
               )
             })}
           </tbody>