diff --git a/src/AppRoutes.tsx b/src/AppRoutes.tsx index cbfd39831..277ef490a 100644 --- a/src/AppRoutes.tsx +++ b/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={} /> } /> + } + /> } /> Not found} /> diff --git a/src/utils/constants.ts b/src/utils/constants.ts index 1b6f30eb6..73bd5671c 100644 --- a/src/utils/constants.ts +++ b/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', }) diff --git a/src/views/explorer/components/staking-estimator/index.tsx b/src/views/explorer/components/staking-estimator/index.tsx new file mode 100644 index 000000000..2673e6d87 --- /dev/null +++ b/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 }) => { + return ( + + + {JSON.stringify(row.original, null, 2)} + + + ) +} + +const cellShares = (data: CellContext) => { + 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 && -} + + {sharePercents.map((sharePercent) => ( + + + {formatPercentage(sharePercent)} + + {sharePercent > 0 && ( + + (~$ + {formatCurrency((sharePercent / 100) * totalYield, 2, { + notation: 'compact', + })} + ) + + )} + + ))} + + > + ) +} + +const ExploreStakingEstimator = (props: Partial) => { + const { list, isLoading } = useTokenList() + const columnHelper = createColumnHelper() + + const columns = useMemo( + () => [ + columnHelper.accessor('symbol', { + header: t`Token`, + cell: (data) => { + const logo = useRTokenLogo( + data.row.original.id, + data.row.original.chain + ) + return ( + + ) + }, + }), + 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) => ( + + ${formatCurrency(data.getValue())} + + ), + } + ), + columnHelper.accessor('id', { + header: t`Stake`, + cell: (data) => ( + e.stopPropagation()} + > + Stake + + ), + }), + ], + [] + ) + + const handleClick = (data: any, row: any) => { + row.toggleExpanded() + } + + return ( + + + + + Staking Estimator + + + + + ) +} + +export default ExploreStakingEstimator diff --git a/src/views/explorer/index.tsx b/src/views/explorer/index.tsx index bb52db67e..46534a7ec 100644 --- a/src/views/explorer/index.tsx +++ b/src/views/explorer/index.tsx @@ -51,6 +51,12 @@ const Navigation = () => { Collaterals Governance Revenue + + + Estimator + + Staking Estimator + ) }
+ {JSON.stringify(row.original, null, 2)} +
{JSON.stringify(row.original, null, 2)}