Merge pull request #1 from sushiswap/farm/analytics

fix: refactor and fix small issues

Author: TechInnovation-Blockchain

src/features/analytics/farms/useTableConfig.tsx

@@ -154,7 +154,7 @@ export const useTableConfig = (chainId: number, farms: any) => {
         columns,
         data: data ?? [],
         initialState: {
-          sortBy: [{ id: 'apr.annual', desc: true }],
+          sortBy: [{ id: 'rewardApr.annual', desc: true }],
         },
         autoResetFilters: false,
       },

src/features/user/UserTable.tsx renamed to src/features/analytics/farms/user/UserTable.tsx

@@ -6,6 +6,7 @@ import { Chef, PairType } from 'app/features/onsen/enum'
 import { usePositions } from 'app/features/onsen/hooks'
 import { featureEnabled } from 'app/functions'
 import { aprToApy } from 'app/functions/convert'
+import { useAllTokens } from 'app/hooks/Tokens'
 import {
   useAverageBlockTime,
   useCeloPrice,
@@ -27,8 +28,6 @@ import {
 } from 'app/services/graph'
 import { useCallback, useMemo } from 'react'
 
-import { useAllTokens } from './Tokens'
-
 export function getRewards({
   chainId,
   pool,

src/features/user/useTableConfig.tsx renamed to src/features/analytics/farms/user/useTableConfig.tsx

@@ -3,12 +3,13 @@ import { ChainId, Token } from '@sushiswap/core-sdk'
 import { CurrencyLogo } from 'app/components/CurrencyLogo'
 import DoubleCurrencyLogo from 'app/components/DoubleLogo'
 import Typography from 'app/components/Typography'
+import UserTable from 'app/features/analytics/farms/user/UserTable'
 import FormattedChartCard from 'app/features/analytics/FormattedChartCard'
-import UserTable from 'app/features/user/UserTable'
+import useFarmRewardHistories from 'app/features/analytics/hooks/useFarmRewardHistories'
+import useFarmRewardsWithUsers from 'app/features/analytics/hooks/useFarmRewardsWithUsers'
 import { formatNumber, formatPercent } from 'app/functions'
-import useFarmRewardHistories from 'app/hooks/useFarmRewardHistories'
-import useFarmRewardsWithUsers from 'app/hooks/useFarmRewardsWithUsers'
 import { TridentBody, TridentHeader } from 'app/layouts/Trident'
+import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { NextSeo } from 'next-seo'
 import React, { useMemo } from 'react'
@@ -97,7 +98,27 @@ export default function Pool() {
             <Typography variant="h2" className="text-high-emphesis" weight={700}>
               {token0 && token1 && (
                 <>
-                  {token0?.symbol}/{token1?.symbol}
+                  <Link
+                    href={{
+                      pathname: `/analytics/tokens/${token0?.address}`,
+                      query: {
+                        chainId,
+                      },
+                    }}
+                  >
+                    {token0?.symbol}
+                  </Link>
+                  /
+                  <Link
+                    href={{
+                      pathname: `/analytics/tokens/${token1?.address}`,
+                      query: {
+                        chainId,
+                      },
+                    }}
+                  >
+                    {token1?.symbol}
+                  </Link>
                 </>
               )}
             </Typography>
@@ -117,6 +138,14 @@ export default function Pool() {
               <div className="text-xl font-medium text-high-emphesis">{formatNumber(farm?.tvl ?? 0, true)}</div>
             </div>
           </div>
+          <div className="flex flex-col">
+            <div className="text-secondary">Value</div>
+            <div className="flex items-center space-x-2">
+              <div className="text-xl font-medium text-high-emphesis">
+                {formatNumber(farm?.pair.reserveUSD / farm?.pair.totalSupply, true)}
+              </div>
+            </div>
+          </div>
           <div className="flex flex-col">
             <div className="text-secondary">Rewards</div>
             <div className="flex items-center space-x-2">