feat: display eg sharing for farming tab (#2890)

* feat: display eg sharing for farming tab

* switch endpoint

Author: tienkane

apps/kyberswap-interface/src/pages/Earns/PoolExplorer/DesktopTableRow.tsx

@@ -121,7 +121,10 @@ const DesktopTableRow = ({
         </Flex>
       )}
       <Flex justifyContent="flex-end">
-        {formatDisplayNumber(pool.earnFee, { style: 'currency', significantDigits: 6 })}
+        {formatDisplayNumber(isFarmingFiltered ? pool.egUsd : pool.earnFee, {
+          style: 'currency',
+          significantDigits: 6,
+        })}
       </Flex>
       <Flex justifyContent="flex-end">
         {formatDisplayNumber(pool.tvl, { style: 'currency', significantDigits: 6 })}

apps/kyberswap-interface/src/pages/Earns/PoolExplorer/MobileTableRow.tsx

@@ -110,8 +110,13 @@ const MobileTableRow = ({
           </Flex>
         )}
         <Flex justifyContent="space-between" sx={{ gap: 1 }}>
-          <Text color={theme.subText}>{t`Earn Fees`}</Text>
-          <Text>{formatDisplayNumber(pool.earnFee, { style: 'currency', significantDigits: 6 })}</Text>
+          <Text color={theme.subText}>{isFarmingFiltered ? t`EG Sharing` : t`Earn Fees`}</Text>
+          <Text>
+            {formatDisplayNumber(isFarmingFiltered ? pool.egUsd : pool.earnFee, {
+              style: 'currency',
+              significantDigits: 6,
+            })}
+          </Text>
         </Flex>
         <Flex justifyContent="space-between" sx={{ gap: 1 }}>
           <Text color={theme.subText}>{t`TVL`}</Text>

apps/kyberswap-interface/src/pages/Earns/PoolExplorer/TableHeader.tsx

@@ -1,4 +1,4 @@
-import { t } from '@lingui/macro'
+import { Trans, t } from '@lingui/macro'
 import { useMedia } from 'react-use'
 import { Flex, Text } from 'rebass'
 import { PoolQueryParams } from 'services/zapEarn'
@@ -41,15 +41,30 @@ const TableHeader = ({
           />
         </Flex>
       )}
-      <Flex
-        justifyContent="flex-end"
-        sx={{ gap: '4px', alignItems: 'center', cursor: 'pointer' }}
-        role="button"
-        onClick={() => onSortChange(SortBy.EARN_FEE)}
-      >
-        {t`Earn Fees`}
-        <SortIcon sorted={filters.sortBy === SortBy.EARN_FEE ? (filters.orderBy as Direction) : undefined} />
-      </Flex>
+      {isFarmingFiltered ? (
+        <Flex justifyContent="flex-end" sx={{ gap: '4px', alignItems: 'center' }} role="button">
+          {t`EG Sharing`}
+          <InfoHelper
+            width="250px"
+            text={
+              <Trans>
+                The estimated amount of <b>Equilibrium Gain</b> rewards that would be shared with liquidity providers
+                during the selected time range
+              </Trans>
+            }
+          />
+        </Flex>
+      ) : (
+        <Flex
+          justifyContent="flex-end"
+          sx={{ gap: '4px', alignItems: 'center', cursor: 'pointer' }}
+          role="button"
+          onClick={() => onSortChange(SortBy.EARN_FEE)}
+        >
+          {t`Earn Fees`}
+          <SortIcon sorted={filters.sortBy === SortBy.EARN_FEE ? (filters.orderBy as Direction) : undefined} />
+        </Flex>
+      )}
       <Flex
         justifyContent="flex-end"
         sx={{ gap: '4px', alignItems: 'center', cursor: 'pointer' }}

apps/kyberswap-interface/src/pages/Earns/types.ts

@@ -61,6 +61,7 @@ export interface EarnPool {
     kemEGApr: string
     kemLMApr: string
   }
+  egUsd?: number
 }
 
 export interface ParsedEarnPool extends EarnPool {