Feature: RSR staking yield estimator

src/AppRoutes.tsx

@@ -19,6 +19,7 @@ import PortfolioWrapper from 'views/portfolio'
 import Staking from 'views/staking'
 import Home from 'views/home'
 import AvailableRevenue from 'views/explorer/components/revenue'
+import StakingEstimator from 'views/explorer/components/staking-estimator'
 import Terms from 'views/terms'
 
 // Preloadable components
@@ -99,6 +100,10 @@ const AppRoutes = () => (
         element={<ExploreGovernance />}
       />
       <Route path={ROUTES.EXPLORER_REVENUE} element={<AvailableRevenue />} />
+      <Route
+        path={ROUTES.EXPLORER_STAKING_ESTIMATOR}
+        element={<StakingEstimator />}
+      />
     </Route>
     <Route path={ROUTES.TERMS} element={<Terms />} />
     <Route path="*" element={<Box>Not found</Box>} />

src/utils/constants.ts

@@ -181,6 +181,7 @@ export const ROUTES = Object.freeze({
   EXPLORER_COLLATERALS: 'collaterals',
   EXPLORER_GOVERNANCE: '/explorer/governance',
   EXPLORER_REVENUE: '/explorer/revenue',
+  EXPLORER_STAKING_ESTIMATOR: '/explorer/staking-estimator',
   EXPLORER_TRANSACTIONS: 'transactions',
   TERMS: '/terms',
 })

src/views/explorer/components/staking-estimator/index.tsx

@@ -0,0 +1,202 @@
+import { Trans, t } from '@lingui/macro'
+import { CellContext, Row, createColumnHelper } from '@tanstack/react-table'
+import { Table, TableProps } from 'components/table'
+import TokenItem from 'components/token-item'
+import useRTokenLogo from 'hooks/useRTokenLogo'
+import useTokenList, { ListedToken } from 'hooks/useTokenList'
+import { useMemo } from 'react'
+import { Box, Link, Text } from 'theme-ui'
+import { formatCurrency, formatPercentage, getTokenRoute } from 'utils'
+import { ROUTES } from 'utils/constants'
+import CalculatorIcon from 'components/icons/CalculatorIcon'
+
+const renderSubComponent = ({ row }: { row: Row<ListedToken> }) => {
+  return (
+    <Box
+      p={4}
+      sx={{ border: '2px solid', borderColor: 'text', borderRadius: 10 }}
+    >
+      <pre style={{ fontSize: '10px' }}>
+        <code>{JSON.stringify(row.original, null, 2)}</code>
+      </pre>
+    </Box>
+  )
+}
+
+const cellShares = (data: CellContext<ListedToken, number | number[]>) => {
+  const value = data.getValue()
+  const sharePercents = Array.isArray(value) ? value : [value]
+
+  const totalYield =
+    (data.row.original.supply * data.row.original.basketApy) / 100
+  return (
+    <>
+      {sharePercents.length < 1 && <Text variant="legend">-</Text>}
+      <Box
+        variant="layout.verticalAlign"
+        sx={{
+          flexWrap: 'wrap',
+          gap: 2,
+          flexDirection: 'column',
+          alignItems: 'flex-start',
+        }}
+      >
+        {sharePercents.map((sharePercent) => (
+          <Box variant="layout.verticalAlign">
+            <Text sx={{ whiteSpace: 'nowrap' }}>
+              {formatPercentage(sharePercent)}
+            </Text>
+            {sharePercent > 0 && (
+              <Text
+                ml="2"
+                variant="legend"
+                title={`$${formatCurrency((sharePercent / 100) * totalYield)}`}
+              >
+                (~$
+                {formatCurrency((sharePercent / 100) * totalYield, 2, {
+                  notation: 'compact',
+                })}
+                )
+              </Text>
+            )}
+          </Box>
+        ))}
+      </Box>
+    </>
+  )
+}
+
+const ExploreStakingEstimator = (props: Partial<TableProps>) => {
+  const { list, isLoading } = useTokenList()
+  const columnHelper = createColumnHelper<ListedToken>()
+
+  const columns = useMemo(
+    () => [
+      columnHelper.accessor('symbol', {
+        header: t`Token`,
+        cell: (data) => {
+          const logo = useRTokenLogo(
+            data.row.original.id,
+            data.row.original.chain
+          )
+          return (
+            <TokenItem
+              symbol={data.getValue()}
+              logo={logo}
+              chainId={data.row.original.chain}
+            />
+          )
+        },
+      }),
+      columnHelper.accessor('supply', {
+        header: t`Mkt Cap`,
+        cell: (data) => `$${formatCurrency(data.getValue(), 0)}`,
+      }),
+      columnHelper.accessor('stakeUsd', {
+        header: t`Staked RSR`,
+        cell: (data) => `$${formatCurrency(data.getValue(), 0)}`,
+      }),
+      columnHelper.accessor('basketApy', {
+        header: t`Basket APY`,
+        cell: (data) => formatPercentage(data.getValue()),
+      }),
+      columnHelper.accessor((row) => parseFloat(row.distribution.holders), {
+        id: 'Holders share',
+        cell: cellShares,
+      }),
+      columnHelper.accessor((row) => parseFloat(row.distribution.stakers), {
+        id: 'Stakers share',
+        cell: cellShares,
+      }),
+      columnHelper.accessor(
+        (row) =>
+          row.distribution.external.map((dist) => parseFloat(dist.total)),
+        {
+          id: 'External shares',
+          cell: cellShares,
+        }
+      ),
+      columnHelper.accessor(
+        (row) => {
+          const totalYield = (row.supply * row.basketApy) / 100
+          const stakerYieldPercent = parseFloat(row.distribution.stakers)
+          const totalRsrStakerYield = (totalYield * stakerYieldPercent) / 100
+
+          return totalRsrStakerYield / row.rsrStaked
+        },
+        {
+          id: 'Est. Yield per RSR',
+          cell: (data) => `$${formatCurrency(data.getValue(), 5)}`,
+        }
+      ),
+      columnHelper.accessor(
+        (row) => {
+          const totalYield = (row.supply * row.basketApy) / 100
+          const stakerYieldPercent = parseFloat(row.distribution.stakers)
+          const totalRsrStakerYield = (totalYield * stakerYieldPercent) / 100
+
+          return (totalRsrStakerYield / row.rsrStaked) * 100000
+        },
+        {
+          id: 'Est. Yield per 100k RSR',
+          cell: (data) => (
+            <Text
+              sx={{
+                fontWeight: 'bold',
+              }}
+            >
+              ${formatCurrency(data.getValue())}
+            </Text>
+          ),
+        }
+      ),
+      columnHelper.accessor('id', {
+        header: t`Stake`,
+        cell: (data) => (
+          <Link
+            href={getTokenRoute(
+              data.getValue(),
+              data.row.original.chain,
+              ROUTES.STAKING
+            )}
+            onClick={(e) => e.stopPropagation()}
+          >
+            Stake
+          </Link>
+        ),
+      }),
+    ],
+    []
+  )
+
+  const handleClick = (data: any, row: any) => {
+    row.toggleExpanded()
+  }
+
+  return (
+    <Box my={[3, 5]} mx={[2, 4]}>
+      <Box
+        variant="layout.verticalAlign"
+        sx={{ flexWrap: 'wrap', gap: 2 }}
+        mb={5}
+      >
+        <CalculatorIcon fontSize={32} viewBox="0 0 12 12" />
+        <Text mr="auto" as="h2" variant="title" sx={{ fontSize: 4 }}>
+          <Trans>Staking Estimator</Trans>
+        </Text>
+      </Box>
+      <Table
+        data={list}
+        isLoading={isLoading && !list.length}
+        columns={columns}
+        sorting
+        sortBy={[{ id: 'supply', desc: true }]}
+        sx={{ borderRadius: '0 0 20px 20px' }}
+        renderSubComponent={renderSubComponent}
+        {...props}
+      />
+    </Box>
+  )
+}
+
+export default ExploreStakingEstimator

src/views/explorer/index.tsx

@@ -51,6 +51,12 @@ const Navigation = () => {
       <NavItem to={ROUTES.EXPLORER_COLLATERALS}>Collaterals</NavItem>
       <NavItem to={ROUTES.EXPLORER_GOVERNANCE}>Governance</NavItem>
       <NavItem to={ROUTES.EXPLORER_REVENUE}>Revenue</NavItem>
+      <NavItem to={ROUTES.EXPLORER_STAKING_ESTIMATOR}>
+        <Box as="span" sx={{ display: ['block', 'none'] }}>
+          Estimator
+        </Box>
+        <Box sx={{ display: ['none', 'block'] }}>Staking Estimator</Box>
+      </NavItem>
     </Box>
   )
 }