-
-
- Put your funds to work
-
-
- Put your funds to work
- by providing liquidity.
-
- - When you add liquidity to a pool, you can receive a share of its - trading volume and potentially snag extra rewards when there are - incentives involved! -
-
+
+ Manage Liquidity Positions
+
+
+ You can adjust and claim rewards for your liquidity positions on the
+ connected network. For V2 pools, you can migrate to increase capital
+ efficiency.
+
+
-
@@ -78,7 +62,7 @@ export const Hero: FC = () => {
asChild
>
-
+
-
-
+
+ {({ setCopied, isCopied }) => (
+
+
+ }
+ rightContent={
+
+ {tx.sends.length ? (
+
+ }
+ />
+ )
+}
diff --git a/apps/web/src/lib/wagmi/components/user-portfolio/portolio-history/PortfolioReceiveTransaction.tsx b/apps/web/src/lib/wagmi/components/user-portfolio/portolio-history/PortfolioReceiveTransaction.tsx
new file mode 100644
index 0000000000..65b49e3a59
--- /dev/null
+++ b/apps/web/src/lib/wagmi/components/user-portfolio/portolio-history/PortfolioReceiveTransaction.tsx
@@ -0,0 +1,81 @@
+import { ArrowDownIcon, Square2StackIcon } from '@heroicons/react/24/outline'
+import { PortfolioTransaction } from '@sushiswap/graph-client/data-api'
+import { ClipboardController, FormattedNumber, IconButton } from '@sushiswap/ui'
+import { format, fromUnixTime } from 'date-fns'
+import { FC } from 'react'
+import React from 'react'
+import { Chain, ChainId } from 'sushi/chain'
+import { shortenHash } from 'sushi/format'
+import { PortfolioInfoRow } from '../PortfolioInfoRow'
+
+export const PortfolioReceiveTransaction: FC<{ tx: PortfolioTransaction }> = ({
+ tx,
+}) => {
+ return (
+
+
+ }
+ leftContent={
+
+
+ {({ setCopied, isCopied }) => (
+
+
+ }
+ rightContent={
+
+ {tx.receives.length ? (
+
+ }
+ />
+ )
+}
diff --git a/apps/web/src/lib/wagmi/components/user-portfolio/portolio-history/PortfolioSendTransaction.tsx b/apps/web/src/lib/wagmi/components/user-portfolio/portolio-history/PortfolioSendTransaction.tsx
new file mode 100644
index 0000000000..8661269720
--- /dev/null
+++ b/apps/web/src/lib/wagmi/components/user-portfolio/portolio-history/PortfolioSendTransaction.tsx
@@ -0,0 +1,82 @@
+import { ArrowUpIcon, Square2StackIcon } from '@heroicons/react/24/outline'
+import { PortfolioTransaction } from '@sushiswap/graph-client/data-api'
+import { ClipboardController, FormattedNumber, IconButton } from '@sushiswap/ui'
+import { format, fromUnixTime } from 'date-fns'
+import { FC } from 'react'
+import React from 'react'
+import { Chain, ChainId } from 'sushi/chain'
+import { shortenHash } from 'sushi/format'
+import { PortfolioInfoRow } from '../PortfolioInfoRow'
+
+export const PortfolioSendTransaction: FC<{ tx: PortfolioTransaction }> = ({
+ tx,
+}) => {
+ return (
+
+
+ }
+ leftContent={
+
+
+ {({ setCopied, isCopied }) => (
+
+
+ }
+ rightContent={
+
+ {tx.sends.length ? (
+
+ }
+ />
+ )
+}
diff --git a/apps/web/src/lib/wagmi/components/user-portfolio/portolio-history/index.tsx b/apps/web/src/lib/wagmi/components/user-portfolio/portolio-history/index.tsx
new file mode 100644
index 0000000000..00ecb3bc2f
--- /dev/null
+++ b/apps/web/src/lib/wagmi/components/user-portfolio/portolio-history/index.tsx
@@ -0,0 +1,71 @@
+import { getPortfolioHistory } from '@sushiswap/graph-client/data-api'
+import { SkeletonCircle, SkeletonText } from '@sushiswap/ui'
+import { useQuery } from '@tanstack/react-query'
+import { Address } from 'viem'
+import { useAccount } from 'wagmi'
+import { PortfolioApproveTransaction } from './PortfolioApproveTransaction'
+import { PortfolioOtherTransaction } from './PortfolioOtherTransaction'
+import { PortfolioReceiveTransaction } from './PortfolioReceiveTransaction'
+import { PortfolioSendTransaction } from './PortfolioSendTransaction'
+
+function usePortfolioHistory(
+ address: Address | undefined,
+ refetchInterval?: 600_000,
+) {
+ return useQuery({
+ queryKey: ['portfolio-history', address],
+ queryFn: async () => {
+ const id = address as string
+ const data = await getPortfolioHistory({ id })
+ return data
+ },
+ enabled: !!address,
+ refetchInterval,
+ })
+}
+
+export const PortfolioHistory = () => {
+ const { address } = useAccount()
+ const { data, isLoading } = usePortfolioHistory(address)
+
+ return (
+ = ({
return (
<>
['data']
>[0]
+export type SteerAccountPositionVault = NonNullable<
+ ReturnType['data']
+>[0]['vault']
+
export const useSteerAccountPositionsExtended = ({
account,
enabled = true,
- chainIds = [...STEER_SUPPORTED_CHAIN_IDS],
+ chainId,
}: UseSteerAccountPositionsExtended) => {
const { data: prices, isInitialLoading: isPricesLoading } = useAllPrices()
- const { data: vaults, isLoading: isVaultsLoading } = useSteerVaults({
- args: { chainIds },
- shouldFetch: Boolean(enabled && account),
- })
+ const { data: smartPools, isLoading: isVaultsLoading } = useSmartPools(
+ { chainId },
+ Boolean(enabled && account),
+ )
- const vaultIds = useMemo(() => vaults?.map((el) => el.id), [vaults])
+ const vaultIds = useMemo(
+ () => smartPools?.map((el) => el.id as ID) ?? [],
+ [smartPools],
+ )
const { data: positions, isLoading } = useSteerAccountPositions({
account,
@@ -38,12 +44,12 @@ export const useSteerAccountPositionsExtended = ({
})
const data = useMemo(() => {
- if (!vaults || !positions) return undefined
+ if (!smartPools || !positions) return undefined
return positions.flatMap((position) => {
if (position.steerTokenBalance <= 0n) return []
- const vault = vaults.find((vault) => vault.id === position.id)
+ const vault = smartPools.find((vault) => vault.id === position.id)
if (!vault) return []
@@ -75,7 +81,7 @@ export const useSteerAccountPositionsExtended = ({
totalAmountUSD: token0AmountUSD + token1AmountUSD,
}
})
- }, [vaults, prices, positions])
+ }, [smartPools, prices, positions])
return {
data,
diff --git a/apps/web/src/middleware.ts b/apps/web/src/middleware.ts
index 199a4c913c..d1d3be9ad8 100644
--- a/apps/web/src/middleware.ts
+++ b/apps/web/src/middleware.ts
@@ -1,12 +1,17 @@
import { type NextRequest, NextResponse } from 'next/server'
-import { chainShortNameToChainId } from 'sushi/chain'
+import { getChainInfo } from 'sushi/chain'
export const config = {
- matcher: ['/swap/:path*', '/pool/:path*', '/pools/:path*'],
+ matcher: [
+ '/swap/:path*',
+ '/:chainId/explore/:path*',
+ '/:chainId/pool/:path*',
+ '/:chainId/positions/:path*',
+ '/:chainId/migrate',
+ '/:chainId/rewards',
+ ],
}
-const shortNameIdRegexp = new RegExp(/(\w+):0x.*?(?=(?:\/|$))/)
-
export async function middleware(req: NextRequest) {
const { pathname, searchParams, search } = req.nextUrl
if (pathname === '/swap' && search !== '') {
@@ -43,33 +48,16 @@ export async function middleware(req: NextRequest) {
}
}
- if (pathname.startsWith('/pool')) {
- if (pathname === '/pool/add' && search === '') {
- const url = req.nextUrl.clone()
- url.search = '?fromCurrency=NATIVE'
- return NextResponse.redirect(url)
- }
-
- if (pathname === '/pool/add/v2' && search === '') {
- const url = req.nextUrl.clone()
- url.pathname = '/add/v2/1'
- return NextResponse.redirect(url)
- }
-
- // Matches paths that include /arb1:0x1234abcd/, starts and ends after '/'
- const match = pathname.match(shortNameIdRegexp)
- if (match?.length) {
- const pairId = pathname.match(shortNameIdRegexp)?.[0] as string
- const [chainShortName, address] = pairId.split(':')
- const chainId = String(chainShortNameToChainId[chainShortName])
-
- // Already rewritten / invalid chainShortName
- if (chainId === 'undefined') return NextResponse.next()
+ const networkNameMatch = pathname.match(
+ /([\w-]+)(?=\/explore|\/pool|\/positions|\/rewards|\/migrate)/,
+ )
+ if (networkNameMatch?.length) {
+ const { chainId, networkName } = getChainInfo(networkNameMatch[0])
+ if (!chainId) return NextResponse.next()
- const url = req.nextUrl.clone()
- url.pathname = pathname.replace(pairId, `${chainId}:${address}`)
+ const url = req.nextUrl.clone()
+ url.pathname = pathname.replace(networkName, chainId.toString())
- return NextResponse.redirect(url)
- }
+ return NextResponse.rewrite(url)
}
}
diff --git a/apps/web/src/ui/analytics/furo-token-table.tsx b/apps/web/src/ui/analytics/furo-token-table.tsx
deleted file mode 100644
index f980fd5ec6..0000000000
--- a/apps/web/src/ui/analytics/furo-token-table.tsx
+++ /dev/null
@@ -1,136 +0,0 @@
-'use client'
-
-import {
- Badge,
- Card,
- CardContent,
- CardHeader,
- CardTitle,
- Currency,
- DataTable,
- SkeletonText,
-} from '@sushiswap/ui'
-import { NetworkIcon } from '@sushiswap/ui/icons/NetworkIcon'
-import { ColumnDef, PaginationState, SortingState } from '@tanstack/react-table'
-import React, { FC, useMemo, useState } from 'react'
-import { formatNumber, formatUSD } from 'sushi/format'
-
-import { isFuroChainId } from 'sushi/config'
-import {
- FuroToken,
- GetFuroTokenArgs,
- useFuroTokens,
-} from '../../lib/analytics/use-furo-tokens'
-import { usePoolFilters } from '../pool'
-
-const COLUMNS: ColumnDef[] = [
- {
- id: 'tokenName',
- header: 'Name',
- cell: ({
- row: {
- original: { token },
- },
- }) => (
- ([
- { id: 'liquidityUSD', desc: true },
- ])
- const [pagination, setPagination] = useState({
- pageIndex: 0,
- pageSize: 10,
- })
-
- const args = useMemo(
- () => ({
- chainIds: chainIds.filter(isFuroChainId),
- tokenSymbols,
- }),
- [chainIds, tokenSymbols],
- )
-
- const { data: furoTokens, isLoading } = useFuroTokens(args)
-
- const data = useMemo(() => furoTokens || [], [furoTokens])
-
- return (
-
-
-
- Tokens{' '}
- {furoTokens?.length ? (
-
- ({furoTokens?.length})
-
- ) : null}
-
-
-
-
-
- )
-}
diff --git a/apps/web/src/ui/analytics/global-stats-charts.tsx b/apps/web/src/ui/analytics/global-stats-charts.tsx
deleted file mode 100644
index 2900057515..0000000000
--- a/apps/web/src/ui/analytics/global-stats-charts.tsx
+++ /dev/null
@@ -1,154 +0,0 @@
-'use client'
-
-import { FC, useCallback, useState } from 'react'
-import useSWR from 'swr'
-
-import { PlusCircleIcon } from '@heroicons/react/20/solid'
-import {
- Button,
- Card,
- CardHeader,
- Chip,
- Command,
- CommandGroup,
- CommandItem,
- Popover,
- PopoverContent,
- PopoverTrigger,
- Separator,
-} from '@sushiswap/ui'
-import { CheckIcon } from '@sushiswap/ui/icons/CheckIcon'
-import { NetworkIcon } from '@sushiswap/ui/icons/NetworkIcon'
-import { Chain, ChainId } from 'sushi/chain'
-import { ANALYTICS_CHAIN_IDS } from '../../config'
-import { TVLChart } from './tvl-chart'
-import { VolumeChart } from './volume-chart'
-
-const isAllThenNone = (chainIds: number[]) =>
- ANALYTICS_CHAIN_IDS.length === chainIds.length ? [] : chainIds
-
-const fetcher = ({ url, chainIds }: { url: string; chainIds: ChainId[] }) => {
- const _url = new URL(url, window.location.origin)
- _url.searchParams.set(
- 'networks',
- JSON.stringify(chainIds.length > 0 ? chainIds : ANALYTICS_CHAIN_IDS),
- )
-
- return fetch(_url.href)
- .then((res) => res.json())
- .catch((e) => console.log(JSON.stringify(e)))
-}
-
-export const GlobalStatsCharts: FC = () => {
- const [open, setOpen] = useState(false)
- const [localValue, setValues] = useState(
- isAllThenNone(ANALYTICS_CHAIN_IDS),
- )
- const { data } = useSWR(
- { url: '/analytics/api/charts', chainIds: localValue },
- fetcher,
- )
-
- const onClick = useCallback(
- (chainId: ChainId) => {
- let _newValues: number[]
- if (localValue.includes(chainId)) {
- _newValues = localValue.filter((el) => el !== chainId)
- } else {
- _newValues = [...(localValue ?? []), chainId]
- }
- setValues(_newValues)
- },
- [localValue],
- )
-
- return (
- = ({ token }) => {
-// const router = useRouter()
-// const _token = useTokenFromToken(token)
-// const { data: bundles } = useSWR('/analytics/api/bundles', (url) =>
-// fetch(url).then((response) => response.json()),
-// )
-
-// const price = formatUSD(
-// token.derivedETH * bundles?.[token.chainId]?.ethPrice,
-// )
-
-// return (
-// = ({ token }) => {
-// const _token = useTokenFromToken(token)
-// const chain = Chain.from(_token.chainId) as Chain
-
-// return (
-// = ({ token }) => {
-// const { data: pools } = usePools({
-// args: { ids: [...token.pairBase.map(({ pair }) => pair.id), ...token.pairQuote.map(({ pair }) => pair.id)] },
-// swrConfig: useSWRConfig(),
-// })
-
-// return (
-// = ({ token }) => {
-// const tvl = formatUSD(token.liquidityUSD)
-// const volume = formatUSD(token.volumeUSD)
-// const fees = formatUSD(token.feesUSD)
-
-// return (
-// = {
- [TvlChartPeriod.Day]: 86400 * 1000,
- [TvlChartPeriod.Week]: 604800 * 1000,
- [TvlChartPeriod.Month]: 2629746 * 1000,
- [TvlChartPeriod.Year]: 31556952 * 1000,
- [TvlChartPeriod.All]: Infinity,
-}
-
-export const TVLChart: FC<{ x: number[]; y: number[] }> = ({ x, y }) => {
- const [chartPeriod, setChartPeriod] = useState(
- TvlChartPeriod.Month,
- )
-
- const [xData, yData] = useMemo(() => {
- const currentDate = Math.round(Date.now())
- const predicates = x?.map(
- (x) => x * 1000 >= currentDate - chartTimespans[chartPeriod],
- )
- return [
- x?.filter((_x, i) => predicates[i]).reverse(),
- y?.filter((_y, i) => predicates[i]).reverse(),
- ]
- }, [chartPeriod, x, y])
-
- // Transient update for performance
- const onMouseOver = useCallback(
- ({ name, value }: { name: number; value: number }) => {
- const valueNodes = document.getElementsByClassName('hoveredItemValueTVL')
- const nameNodes = document.getElementsByClassName('hoveredItemNameTVL')
-
- valueNodes[0].innerHTML = formatUSD(value)
- nameNodes[0].innerHTML = format(
- new Date(name * 1000),
- 'dd MMM yyyy HH:mm',
- )
- },
- [],
- )
-
- const DEFAULT_OPTION: EChartsOption = useMemo(
- () => ({
- tooltip: {
- trigger: 'axis',
- extraCssText: 'z-index: 1000',
- responsive: true,
- // @ts-ignore
- backgroundColor: tailwind.theme.colors.slate['700'],
- textStyle: {
- // @ts-ignore
- color: tailwind.theme.colors.slate['50'],
- fontSize: 12,
- fontWeight: 600,
- },
- axisPointer: {
- lineStyle: {
- type: 'dashed',
- },
- },
- formatter: (params: any) => {
- onMouseOver({ name: params[0].name, value: params[0].value })
-
- const date = new Date(Number(params[0].name * 1000))
- return ` = {
- [TvlChartPeriod.Day]: 86400 * 1000,
- [TvlChartPeriod.Week]: 604800 * 1000,
- [TvlChartPeriod.Month]: 2629746 * 1000,
- [TvlChartPeriod.Year]: 31556952 * 1000,
- [TvlChartPeriod.All]: Infinity,
-}
-
-export const VolumeChart: FC<{ x: number[]; y: number[] }> = ({ x, y }) => {
- const [chartPeriod, setChartPeriod] = useState(
- TvlChartPeriod.Month,
- )
-
- const [xData, yData] = useMemo(() => {
- const currentDate = Math.round(Date.now())
- const predicates = x?.map(
- (x) => x * 1000 >= currentDate - chartTimespans[chartPeriod],
- )
- return [
- x?.filter((_x, i) => predicates[i]).reverse(),
- y?.filter((_y, i) => predicates[i]).reverse(),
- ]
- }, [chartPeriod, x, y])
-
- // Transient update for performance
- const onMouseOver = useCallback(
- ({ name, value }: { name: number; value: number }) => {
- const valueNodes = document.getElementsByClassName(
- 'hoveredItemValueVolume',
- )
- const nameNodes = document.getElementsByClassName('hoveredItemNameVolume')
-
- valueNodes[0].innerHTML = formatUSD(value)
- nameNodes[0].innerHTML = format(
- new Date(name * 1000),
- 'dd MMM yyyy HH:mm',
- )
- },
- [],
- )
-
- const DEFAULT_OPTION: EChartsOption = useMemo(
- () => ({
- tooltip: {
- trigger: 'axis',
- extraCssText: 'z-index: 1000',
- responsive: true,
- // @ts-ignore
- backgroundColor: tailwind.theme.colors.slate['700'],
- textStyle: {
- // @ts-ignore
- color: tailwind.theme.colors.slate['50'],
- fontSize: 12,
- fontWeight: 600,
- },
- axisPointer: {
- lineStyle: {
- type: 'dashed',
- },
- },
- formatter: (params: any) => {
- onMouseOver({ name: params[0].name, value: params[0].value })
-
- const date = new Date(Number(params[0].name * 1000))
- return ` = ({ pool }) => {
diff --git a/apps/web/src/ui/pool/PoolPageV2.tsx b/apps/web/src/ui/pool/PoolPageV2.tsx
index bc8409694e..09310082fc 100644
--- a/apps/web/src/ui/pool/PoolPageV2.tsx
+++ b/apps/web/src/ui/pool/PoolPageV2.tsx
@@ -1,67 +1,36 @@
import { Container, Separator } from '@sushiswap/ui'
-import { ManageV2LiquidityCard } from 'src/ui/pool/ManageV2LiquidityCard'
import { PoolTransactionsV2 } from 'src/ui/pool/PoolTransactionsV2'
-import { getPool } from '@sushiswap/client'
+import { V2Pool } from '@sushiswap/graph-client/data-api'
import { FC } from 'react'
-import { SushiSwapV2ChainId } from 'sushi/config'
import { PoolChartV2 } from './PoolChartV2'
import { PoolComposition } from './PoolComposition'
-import { PoolMyRewards } from './PoolMyRewards'
-import { PoolPosition } from './PoolPosition'
-import { PoolPositionProvider } from './PoolPositionProvider'
-import { PoolPositionRewardsProvider } from './PoolPositionRewardsProvider'
-import { PoolPositionStakedProvider } from './PoolPositionStakedProvider'
import { PoolRewards } from './PoolRewards'
import { PoolStats } from './PoolStats'
import { UnknownTokenAlert } from './UnknownTokenAlert'
interface PoolPageV2 {
- pool: Awaited>
- tab: 'add' | 'remove' | 'unstake' | 'stake'
+ pool: Awaited
}
-export const PoolPageV2: FC = ({ pool, tab }) => {
+export const PoolPageV2: FC = ({ pool }) => {
return (
@@ -97,7 +81,7 @@ export const Hero: FC = () => {
{isSushiSwapV2ChainId(chainId as ChainId) ? (
-
@@ -118,37 +102,17 @@ export const Hero: FC = () => {
asChild
icon={GiftIcon}
variant="secondary"
- size="lg"
+ size="sm"
>
-
+
I want to incentivize a pool
-
)
}
diff --git a/apps/web/src/app/(evm)/pool/(landing)/layout.tsx b/apps/web/src/app/(evm)/[chainId]/(positions)/layout.tsx
similarity index 50%
rename from apps/web/src/app/(evm)/pool/(landing)/layout.tsx
rename to apps/web/src/app/(evm)/[chainId]/(positions)/layout.tsx
index 009e0f8f65..e99da70f8c 100644
--- a/apps/web/src/app/(evm)/pool/(landing)/layout.tsx
+++ b/apps/web/src/app/(evm)/[chainId]/(positions)/layout.tsx
@@ -2,53 +2,43 @@
import { Container, LinkInternal } from '@sushiswap/ui'
import { useSearchParams } from 'next/navigation'
-
-import { PathnameButton, PoolsFiltersProvider } from 'src/ui/pool'
-import { Hero } from '../hero'
+import { PathnameButton } from 'src/ui/pathname-button'
+import { PoolsFiltersProvider } from 'src/ui/pool'
+import { ChainId, ChainKey, isChainId } from 'sushi/chain'
+import { Hero } from './hero'
export default function TabsLayout({
children,
-}: { children: React.ReactNode }) {
+ params,
+}: {
+ children: React.ReactNode
+ params: { chainId: string }
+}) {
+ const chainId = +params.chainId as ChainId
const searchParams = useSearchParams()
+ if (!isChainId(chainId)) {
+ throw new Error('Must be a valid chain id')
+ }
+
return (
<>
-
-
- Looking for a partnership with Sushi?
-
-
-
-
- Need Help?
-
-
-
-
-
- All Pools
-
-
-
-
- Smart Pools
-
-
+
+
@@ -58,11 +48,11 @@ export default function TabsLayout({
@@ -72,11 +62,11 @@ export default function TabsLayout({
diff --git a/apps/web/src/app/(evm)/[chainId]/(positions)/migrate/page.tsx b/apps/web/src/app/(evm)/[chainId]/(positions)/migrate/page.tsx
new file mode 100644
index 0000000000..7e25fd2027
--- /dev/null
+++ b/apps/web/src/app/(evm)/[chainId]/(positions)/migrate/page.tsx
@@ -0,0 +1,10 @@
+import React from 'react'
+
+import { MigrateTabContent } from 'src/ui/pool/MigrateTabContent'
+import { ChainId } from 'sushi'
+
+export default function MigratePage({
+ params,
+}: { params: { chainId: string } }) {
+ return
)
}
diff --git a/apps/web/src/app/(evm)/pool/(landing)/my-rewards/page.tsx b/apps/web/src/app/(evm)/[chainId]/(positions)/rewards/page.tsx
similarity index 100%
rename from apps/web/src/app/(evm)/pool/(landing)/my-rewards/page.tsx
rename to apps/web/src/app/(evm)/[chainId]/(positions)/rewards/page.tsx
diff --git a/apps/web/src/app/(evm)/[chainId]/explore/layout.tsx b/apps/web/src/app/(evm)/[chainId]/explore/layout.tsx
new file mode 100644
index 0000000000..8d90bc6679
--- /dev/null
+++ b/apps/web/src/app/(evm)/[chainId]/explore/layout.tsx
@@ -0,0 +1,70 @@
+import { isSteerChainId } from '@sushiswap/steer-sdk'
+import { Container } from '@sushiswap/ui'
+import { LinkInternal } from '@sushiswap/ui'
+
+import React from 'react'
+import { GlobalStatsCharts } from 'src/ui/explore/global-stats-charts'
+import { PathnameButton } from 'src/ui/pathname-button'
+import { PoolsFiltersProvider } from 'src/ui/pool'
+import { ChainId, ChainKey } from 'sushi/chain'
+
+export const metadata = {
+ title: 'Pools 💦',
+}
+
+export default async function ExploreLayout({
+ children,
+ params,
+}: { children: React.ReactNode; params: { chainId: string } }) {
+ const chainId = +params.chainId as ChainId
+ return (
+ <>
+
+
+
+
+
+
+
+ )
+}
diff --git a/apps/web/src/app/(evm)/pool/(landing)/page.tsx b/apps/web/src/app/(evm)/[chainId]/explore/pools/page.tsx
similarity index 52%
rename from apps/web/src/app/(evm)/pool/(landing)/page.tsx
rename to apps/web/src/app/(evm)/[chainId]/explore/pools/page.tsx
index 555e7dfaab..34a783aaf2 100644
--- a/apps/web/src/app/(evm)/pool/(landing)/page.tsx
+++ b/apps/web/src/app/(evm)/[chainId]/explore/pools/page.tsx
@@ -1,6 +1,7 @@
+import { getTopPools } from '@sushiswap/graph-client/data-api'
import { Container } from '@sushiswap/ui'
-import React from 'react'
-
+import { unstable_cache } from 'next/cache'
+import React, { FC, Suspense } from 'react'
import { PoolsTable } from 'src/ui/pool/PoolsTable'
import { TableFiltersSmartPoolsOnly } from 'src/ui/pool/TableFilterSmartPoolsOnly'
import { TableFiltersFarmsOnly } from 'src/ui/pool/TableFiltersFarmsOnly'
@@ -8,19 +9,39 @@ import { TableFiltersNetwork } from 'src/ui/pool/TableFiltersNetwork'
import { TableFiltersPoolType } from 'src/ui/pool/TableFiltersPoolType'
import { TableFiltersResetButton } from 'src/ui/pool/TableFiltersResetButton'
import { TableFiltersSearchToken } from 'src/ui/pool/TableFiltersSearchToken'
+import { ChainId } from 'sushi/chain'
+
+const _PoolsTable: FC<{ chainId: ChainId }> = async ({ chainId }) => {
+ const pools = await unstable_cache(
+ async () => getTopPools({ chainId: `${chainId}` }),
+ ['pools', `${chainId}`],
+ {
+ revalidate: 60 * 15,
+ },
+ )()
+
+ return
)
}
diff --git a/apps/web/src/app/(evm)/[chainId]/explore/smart-pools/page.tsx b/apps/web/src/app/(evm)/[chainId]/explore/smart-pools/page.tsx
new file mode 100644
index 0000000000..6b6907713a
--- /dev/null
+++ b/apps/web/src/app/(evm)/[chainId]/explore/smart-pools/page.tsx
@@ -0,0 +1,52 @@
+import { getSmartPools } from '@sushiswap/graph-client/data-api'
+import { STEER_SUPPORTED_CHAIN_IDS } from '@sushiswap/steer-sdk'
+import { Container } from '@sushiswap/ui'
+import { unstable_cache } from 'next/cache'
+import React, { FC, Suspense } from 'react'
+import { SmartPoolsTable } from 'src/ui/pool/SmartPoolsTable'
+import { TableFiltersFarmsOnly } from 'src/ui/pool/TableFiltersFarmsOnly'
+import { TableFiltersNetwork } from 'src/ui/pool/TableFiltersNetwork'
+import { TableFiltersPoolType } from 'src/ui/pool/TableFiltersPoolType'
+import { TableFiltersResetButton } from 'src/ui/pool/TableFiltersResetButton'
+import { TableFiltersSearchToken } from 'src/ui/pool/TableFiltersSearchToken'
+import { ChainId } from 'sushi/chain'
+
+const _SmartPoolsTable: FC<{ chainId: ChainId }> = async ({ chainId }) => {
+ const smartPools = await unstable_cache(
+ async () =>
+ getSmartPools({ chainId }).then((smartPools) =>
+ smartPools.filter((smartPool) => smartPool.isEnabled),
+ ),
+ ['smart-pools', `${chainId}`],
+ {
+ revalidate: 60 * 15,
+ },
+ )()
+
+ return
+
+ )
+}
diff --git a/apps/web/src/app/(evm)/pool/header.tsx b/apps/web/src/app/(evm)/[chainId]/header.tsx
similarity index 89%
rename from apps/web/src/app/(evm)/pool/header.tsx
rename to apps/web/src/app/(evm)/[chainId]/header.tsx
index 2b93fa8062..94558372a6 100644
--- a/apps/web/src/app/(evm)/pool/header.tsx
+++ b/apps/web/src/app/(evm)/[chainId]/header.tsx
@@ -11,9 +11,8 @@ export const Header: FC = () => {
const chainId = useChainId()
return (
diff --git a/apps/web/src/app/(evm)/pool/not-found.tsx b/apps/web/src/app/(evm)/[chainId]/not-found.tsx
similarity index 77%
rename from apps/web/src/app/(evm)/pool/not-found.tsx
rename to apps/web/src/app/(evm)/[chainId]/not-found.tsx
index f0b52bf960..8d82d88676 100644
--- a/apps/web/src/app/(evm)/pool/not-found.tsx
+++ b/apps/web/src/app/(evm)/[chainId]/not-found.tsx
@@ -1,7 +1,9 @@
import { ChevronRightIcon } from '@heroicons/react/20/solid'
import { Button, LinkInternal, typographyVariants } from '@sushiswap/ui'
+import { ChainKey } from 'sushi'
+import { ChainId } from 'sushi/chain'
-export default function NotFound() {
+export default function NotFound(chainId: ChainId = ChainId.ETHEREUM) {
return (
diff --git a/apps/web/src/app/(evm)/pool/incentivize/layout.tsx b/apps/web/src/app/(evm)/[chainId]/pool/incentivize/layout.tsx
similarity index 99%
rename from apps/web/src/app/(evm)/pool/incentivize/layout.tsx
rename to apps/web/src/app/(evm)/[chainId]/pool/incentivize/layout.tsx
index c835e12861..49afc9279d 100644
--- a/apps/web/src/app/(evm)/pool/incentivize/layout.tsx
+++ b/apps/web/src/app/(evm)/[chainId]/pool/incentivize/layout.tsx
@@ -1,5 +1,4 @@
import { Container, typographyVariants } from '@sushiswap/ui'
-
import { BackButton } from 'src/ui/pool/BackButton'
export const metadata = {
diff --git a/apps/web/src/app/(evm)/pool/incentivize/page.tsx b/apps/web/src/app/(evm)/[chainId]/pool/incentivize/page.tsx
similarity index 98%
rename from apps/web/src/app/(evm)/pool/incentivize/page.tsx
rename to apps/web/src/app/(evm)/[chainId]/pool/incentivize/page.tsx
index 14d8cfd6a0..e4cb213411 100644
--- a/apps/web/src/app/(evm)/pool/incentivize/page.tsx
+++ b/apps/web/src/app/(evm)/[chainId]/pool/incentivize/page.tsx
@@ -28,6 +28,7 @@ import {
typographyVariants,
} from '@sushiswap/ui'
import format from 'date-fns/format'
+import { useRouter } from 'next/navigation'
import { useMemo, useState } from 'react'
import { Web3Input } from 'src/lib/wagmi/components/web3-input'
import { useConcentratedLiquidityPool } from 'src/lib/wagmi/hooks/pools/hooks/useConcentratedLiquidityPool'
@@ -49,10 +50,11 @@ import {
import { SelectFeeConcentratedWidget } from 'src/ui/pool/SelectFeeConcentratedWidget'
import { SelectNetworkWidget } from 'src/ui/pool/SelectNetworkWidget'
import { SelectTokensWidget } from 'src/ui/pool/SelectTokensWidget'
-import { Chain } from 'sushi/chain'
+import { Chain, ChainId, ChainKey } from 'sushi/chain'
import {
ANGLE_SUPPORTED_CHAIN_IDS,
SushiSwapV3ChainId,
+ isAngleEnabledChainId,
isWNativeSupported,
} from 'sushi/config'
import { Token, Type, tryParseAmount } from 'sushi/currency'
@@ -62,9 +64,11 @@ import { useAccount, useWaitForTransactionReceipt } from 'wagmi'
const APPROVE_TAG = 'approve-incentivize'
-export default function Page() {
+export default function Page({ params }: { params: { chainId: string } }) {
+ const chainId = +params.chainId as ChainId
return (
@@ -82,11 +86,11 @@ const Incentivize = withCheckerRoot(() => {
token1,
setToken1,
setToken0,
- setNetwork,
feeAmount,
setFeeAmount,
} = useConcentratedLiquidityURLState()
+ const router = useRouter()
const { approved } = useApproved(APPROVE_TAG)
const [value, setValue] = useState('')
const [customize, setCustomize] = useState(false)
@@ -201,7 +205,9 @@ const Incentivize = withCheckerRoot(() => {
+ router.push(`/${ChainKey[chainId]}/pool/incentivize`)
+ }
networks={ANGLE_SUPPORTED_CHAIN_IDS}
/>
{
testId="incentivize-confirmation-modal"
successMessage={`Successfully incentivized the ${token0.symbol}/${token1.symbol} V3 pool`}
buttonText="Go to pool"
- buttonLink={`/pools/${pool.chainId}:${v3Address}?activeTab=myPositions`}
+ buttonLink={`/${pool.chainId}/pool/v3/${v3Address}`}
txHash={data}
/>
) : null}
diff --git a/apps/web/src/app/(evm)/[chainId]/pool/v2/[address]/(landing)/page.tsx b/apps/web/src/app/(evm)/[chainId]/pool/v2/[address]/(landing)/page.tsx
new file mode 100644
index 0000000000..52eb669873
--- /dev/null
+++ b/apps/web/src/app/(evm)/[chainId]/pool/v2/[address]/(landing)/page.tsx
@@ -0,0 +1,21 @@
+import { V2Pool, getV2Pool } from '@sushiswap/graph-client/data-api'
+import { unstable_cache } from 'next/cache'
+
+import { PoolPageV2 } from 'src/ui/pool/PoolPageV2'
+
+export default async function PoolPage({
+ params,
+}: {
+ params: { chainId: string; address: string }
+}) {
+ const { chainId, address } = params
+ const pool = (await unstable_cache(
+ async () => await getV2Pool({ chainId: Number(chainId), address }),
+ ['pool', `${chainId}:${address}`],
+ {
+ revalidate: 60 * 15,
+ },
+ )()) as NonNullable
+
+ return
+
+ return (
+
+
+ )
+}
diff --git a/apps/web/src/app/(evm)/pool/[id]/(landing)/layout.tsx b/apps/web/src/app/(evm)/[chainId]/pool/v2/[address]/layout.tsx
similarity index 52%
rename from apps/web/src/app/(evm)/pool/[id]/(landing)/layout.tsx
rename to apps/web/src/app/(evm)/[chainId]/pool/v2/[address]/layout.tsx
index 06fb975a11..3bed90c1f6 100644
--- a/apps/web/src/app/(evm)/pool/[id]/(landing)/layout.tsx
+++ b/apps/web/src/app/(evm)/[chainId]/pool/v2/[address]/layout.tsx
@@ -1,10 +1,10 @@
-import { getPool } from '@sushiswap/client'
-import { Breadcrumb, Container } from '@sushiswap/ui'
+import { getV2Pool } from '@sushiswap/graph-client/data-api'
+import { Container } from '@sushiswap/ui'
import { unstable_cache } from 'next/cache'
import { headers } from 'next/headers'
import { PoolHeader } from 'src/ui/pool/PoolHeader'
-import { unsanitize } from 'sushi/format'
-import notFound from '../../not-found'
+import { ChainKey, isChainId } from 'sushi'
+import notFound from '../../../not-found'
export const metadata = {
title: 'Pool 💦',
@@ -13,30 +13,38 @@ export const metadata = {
export default async function Layout({
children,
params,
-}: { children: React.ReactNode; params: { id: string } }) {
- const poolId = unsanitize(params.id)
+}: {
+ children: React.ReactNode
+ params: { chainId: string; address: string }
+}) {
+ const { chainId, address } = params
+ const _chainId = Number(chainId)
+ if (!isChainId(_chainId)) {
+ return notFound()
+ }
const pool = await unstable_cache(
- async () => getPool(poolId),
- ['pool', poolId],
+ async () => getV2Pool({ chainId: _chainId, address }),
+ ['pool', `${chainId}:${address}`],
{
revalidate: 60 * 15,
},
)()
- if (!pool) {
- notFound()
+ // Rockstar C&D
+ if (!pool || pool.id === '42161:0x0a4f9962e24893a4a7567e52c1ce37d5482365de') {
+ return notFound()
}
-
const headersList = headers()
const referer = headersList.get('referer')
return (
<>
-
-
getV2Pool({ chainId: Number(chainId), address }),
+ ['pool', `${chainId}:${address}`],
+ {
+ revalidate: 60 * 15,
+ },
+ )()) as NonNullable
+
+ return (
+
+
+ )
+}
diff --git a/apps/web/src/app/(evm)/[chainId]/pool/v2/[address]/stake/page.tsx b/apps/web/src/app/(evm)/[chainId]/pool/v2/[address]/stake/page.tsx
new file mode 100644
index 0000000000..c93ed7ce98
--- /dev/null
+++ b/apps/web/src/app/(evm)/[chainId]/pool/v2/[address]/stake/page.tsx
@@ -0,0 +1,48 @@
+import { V2Pool, getV2Pool } from '@sushiswap/graph-client/data-api'
+import { Container } from '@sushiswap/ui'
+import { unstable_cache } from 'next/cache'
+import {
+ PoolPositionProvider,
+ PoolPositionRewardsProvider,
+ PoolPositionStakedProvider,
+} from 'src/ui/pool'
+import { ManageV2LiquidityCard } from 'src/ui/pool/ManageV2LiquidityCard'
+import { PoolMyRewards } from 'src/ui/pool/PoolMyRewards'
+import { PoolPosition } from 'src/ui/pool/PoolPosition'
+
+export default async function ManageV2PoolPage({
+ params: { chainId, address },
+}: {
+ params: {
+ chainId: string
+ address: string
+ }
+}) {
+ const pool = (await unstable_cache(
+ async () => getV2Pool({ chainId: Number(chainId), address }),
+ ['pool', `${chainId}:${address}`],
+ {
+ revalidate: 60 * 15,
+ },
+ )()) as NonNullable
+
+ return (
+
+
+ )
+}
diff --git a/apps/web/src/app/(evm)/[chainId]/pool/v2/[address]/unstake/page.tsx b/apps/web/src/app/(evm)/[chainId]/pool/v2/[address]/unstake/page.tsx
new file mode 100644
index 0000000000..13eace486e
--- /dev/null
+++ b/apps/web/src/app/(evm)/[chainId]/pool/v2/[address]/unstake/page.tsx
@@ -0,0 +1,48 @@
+import { V2Pool, getV2Pool } from '@sushiswap/graph-client/data-api'
+import { Container } from '@sushiswap/ui'
+import { unstable_cache } from 'next/cache'
+import {
+ PoolPositionProvider,
+ PoolPositionRewardsProvider,
+ PoolPositionStakedProvider,
+} from 'src/ui/pool'
+import { ManageV2LiquidityCard } from 'src/ui/pool/ManageV2LiquidityCard'
+import { PoolMyRewards } from 'src/ui/pool/PoolMyRewards'
+import { PoolPosition } from 'src/ui/pool/PoolPosition'
+
+export default async function ManageV2PoolPage({
+ params: { chainId, address },
+}: {
+ params: {
+ chainId: string
+ address: string
+ }
+}) {
+ const pool = (await unstable_cache(
+ async () => getV2Pool({ chainId: Number(chainId), address }),
+ ['pool', `${chainId}:${address}`],
+ {
+ revalidate: 60 * 15,
+ },
+ )()) as NonNullable
+
+ return (
+
+
+ )
+}
diff --git a/apps/web/src/app/(evm)/pool/add/layout.tsx b/apps/web/src/app/(evm)/[chainId]/pool/v2/add/layout.tsx
similarity index 100%
rename from apps/web/src/app/(evm)/pool/add/layout.tsx
rename to apps/web/src/app/(evm)/[chainId]/pool/v2/add/layout.tsx
diff --git a/apps/web/src/app/(evm)/pool/add/v2/[chainId]/page.tsx b/apps/web/src/app/(evm)/[chainId]/pool/v2/add/page.tsx
similarity index 97%
rename from apps/web/src/app/(evm)/pool/add/v2/[chainId]/page.tsx
rename to apps/web/src/app/(evm)/[chainId]/pool/v2/add/page.tsx
index 6185068140..6054ff2003 100644
--- a/apps/web/src/app/(evm)/pool/add/v2/[chainId]/page.tsx
+++ b/apps/web/src/app/(evm)/[chainId]/pool/v2/add/page.tsx
@@ -18,11 +18,10 @@ import React, {
import { DISABLED_CHAIN_IDS } from 'src/config'
import { APPROVE_TAG_ADD_LEGACY } from 'src/lib/constants'
import { isSushiSwapV2Pool } from 'src/lib/functions'
-import { ChainId, TESTNET_CHAIN_IDS } from 'sushi/chain'
+import { ChainId, ChainKey, TESTNET_CHAIN_IDS } from 'sushi/chain'
import {
SUSHISWAP_V2_ROUTER_ADDRESS,
SUSHISWAP_V2_SUPPORTED_CHAIN_IDS,
- SushiSwapV2ChainId,
defaultCurrency,
defaultQuoteCurrency,
isSushiSwapV2ChainId,
@@ -42,10 +41,15 @@ import { AddSectionPoolShareCardV2 } from 'src/ui/pool/AddSectionPoolShareCardV2
import { AddSectionReviewModalLegacy } from 'src/ui/pool/AddSectionReviewModalLegacy'
import { SelectNetworkWidget } from 'src/ui/pool/SelectNetworkWidget'
import { SelectTokensWidget } from 'src/ui/pool/SelectTokensWidget'
+import notFound from '../../../not-found'
export default function Page({ params }: { params: { chainId: string } }) {
+ const chainId = +params.chainId as ChainId
+ if (!isSushiSwapV2ChainId(chainId)) {
+ return notFound(chainId)
+ }
+
const router = useRouter()
- const [chainId, setChainId] = useState(+params.chainId as SushiSwapV2ChainId)
const [token0, setToken0] = useState(
defaultCurrency[chainId as keyof typeof defaultCurrency],
)
@@ -97,8 +101,7 @@ export default function Page({ params }: { params: { chainId: string } }) {
chainId={chainId}
setChainId={(chainId) => {
if (!isSushiSwapV2ChainId(chainId)) return
- router.push(`/pool/add/v2/${chainId}`)
- setChainId(chainId)
+ router.push(`/${ChainKey[chainId]}/pool/v2/add`)
}}
pool={pool as SushiSwapV2Pool | null}
poolState={poolState as SushiSwapV2PoolState}
diff --git a/apps/web/src/app/(evm)/[chainId]/pool/v2/layout.tsx b/apps/web/src/app/(evm)/[chainId]/pool/v2/layout.tsx
new file mode 100644
index 0000000000..1cda237791
--- /dev/null
+++ b/apps/web/src/app/(evm)/[chainId]/pool/v2/layout.tsx
@@ -0,0 +1,15 @@
+import { ChainId } from 'sushi/chain'
+import { isSushiSwapV2ChainId } from 'sushi/config'
+import notFound from '../../not-found'
+
+export default function Layout({
+ children,
+ params,
+}: { children: React.ReactNode; params: { chainId: string } }) {
+ const chainId = +params.chainId as ChainId
+ if (!isSushiSwapV2ChainId(chainId)) {
+ return notFound(chainId)
+ }
+
+ return <>{children}
+}
diff --git a/apps/web/src/app/(evm)/[chainId]/pool/v3/[address]/(landing)/page.tsx b/apps/web/src/app/(evm)/[chainId]/pool/v3/[address]/(landing)/page.tsx
new file mode 100644
index 0000000000..635eca0898
--- /dev/null
+++ b/apps/web/src/app/(evm)/[chainId]/pool/v3/[address]/(landing)/page.tsx
@@ -0,0 +1,21 @@
+import { V3Pool, getV3Pool } from '@sushiswap/graph-client/data-api'
+import { unstable_cache } from 'next/cache'
+
+import { PoolPageV3 } from 'src/ui/pool/PoolPageV3'
+
+export default async function PoolPage({
+ params,
+}: {
+ params: { chainId: string; address: string }
+}) {
+ const { chainId, address } = params
+ const pool = (await unstable_cache(
+ async () => await getV3Pool({ chainId: Number(chainId), address }),
+ ['pool', `${chainId}:${address}`],
+ {
+ revalidate: 60 * 15,
+ },
+ )()) as NonNullable
+
+ return
+
+
+
+
+ )
+}
diff --git a/apps/web/src/app/(evm)/[chainId]/pool/v3/[address]/positions/[position]/page.tsx b/apps/web/src/app/(evm)/[chainId]/pool/v3/[address]/positions/[position]/page.tsx
new file mode 100644
index 0000000000..399ab363c2
--- /dev/null
+++ b/apps/web/src/app/(evm)/[chainId]/pool/v3/[address]/positions/[position]/page.tsx
@@ -0,0 +1,23 @@
+import { Container, LinkInternal } from '@sushiswap/ui'
+import { V3PositionView } from 'src/ui/pool/V3PositionView'
+import { ChainId, ChainKey } from 'sushi/chain'
+
+export default async function V3PositionsPage({
+ params,
+}: { params: { chainId: string; address: string; position: string } }) {
+ return (
+
+
+ )
+}
diff --git a/apps/web/src/app/(evm)/pool/[id]/(landing)/positions/create/page.tsx b/apps/web/src/app/(evm)/[chainId]/pool/v3/[address]/positions/create/page.tsx
similarity index 58%
rename from apps/web/src/app/(evm)/pool/[id]/(landing)/positions/create/page.tsx
rename to apps/web/src/app/(evm)/[chainId]/pool/v3/[address]/positions/create/page.tsx
index ba2ae4756d..2322d80584 100644
--- a/apps/web/src/app/(evm)/pool/[id]/(landing)/positions/create/page.tsx
+++ b/apps/web/src/app/(evm)/[chainId]/pool/v3/[address]/positions/create/page.tsx
@@ -1,29 +1,26 @@
import { Container, LinkInternal } from '@sushiswap/ui'
+import React from 'react'
import { ConcentratedLiquidityProvider } from 'src/ui/pool/ConcentratedLiquidityProvider'
import { NewPosition } from 'src/ui/pool/NewPosition'
-import { isSushiSwapV3ChainId } from 'sushi/config'
-import { getChainIdAddressFromId, unsanitize } from 'sushi/format'
+import { ChainKey } from 'sushi'
+import { SushiSwapV3ChainId } from 'sushi/config'
export default async function PositionsCreatePage({
params,
-}: { params: { id: string } }) {
- const { chainId, address } = getChainIdAddressFromId(unsanitize(params.id))
-
- if (!isSushiSwapV3ChainId(chainId)) {
- throw new Error('This page only supports SushiSwap V3 pools')
- }
+}: { params: { address: string; chainId: string } }) {
+ const chainId = +params.chainId as SushiSwapV3ChainId
return (
← Back
-
diff --git a/apps/web/src/app/(evm)/[chainId]/pool/v3/[address]/positions/page.tsx b/apps/web/src/app/(evm)/[chainId]/pool/v3/[address]/positions/page.tsx
new file mode 100644
index 0000000000..fc09dfe42c
--- /dev/null
+++ b/apps/web/src/app/(evm)/[chainId]/pool/v3/[address]/positions/page.tsx
@@ -0,0 +1,34 @@
+import { V3Pool, getV3Pool } from '@sushiswap/graph-client/data-api'
+import { Container } from '@sushiswap/ui'
+import { unstable_cache } from 'next/cache'
+import { PoolsFiltersProvider } from 'src/ui/pool'
+import { ConcentratedPositionsTable } from 'src/ui/pool/ConcentratedPositionsTable'
+
+export default async function ManageV3PoolPage({
+ params,
+}: {
+ params: { chainId: string; address: string }
+}) {
+ const { chainId, address } = params
+ const pool = (await unstable_cache(
+ async () => await getV3Pool({ chainId: Number(chainId), address }),
+ ['pool', `${chainId}:${address}`],
+ {
+ revalidate: 60 * 15,
+ },
+ )()) as NonNullable
+
+ return (
+
+
+ )
+}
diff --git a/apps/web/src/app/(evm)/[chainId]/pool/v3/[address]/smart/(overview)/layout.tsx b/apps/web/src/app/(evm)/[chainId]/pool/v3/[address]/smart/(overview)/layout.tsx
new file mode 100644
index 0000000000..5d2a0a3f32
--- /dev/null
+++ b/apps/web/src/app/(evm)/[chainId]/pool/v3/[address]/smart/(overview)/layout.tsx
@@ -0,0 +1,36 @@
+import {
+ CardDescription,
+ CardHeader,
+ CardTitle,
+ Container,
+ LinkInternal,
+} from '@sushiswap/ui'
+import React from 'react'
+
+export default async function Layout({
+ children,
+ params,
+}: {
+ children: React.ReactNode
+ params: { chainId: string; address: string }
+}) {
+ return (
+ {
+async function getGenerics(vault: VaultV1): Promise {
const client = createPublicClient(
- publicClientConfig[vault.pool.chainId as SteerChainId],
+ publicClientConfig[vault.chainId],
) as PublicClient
const prices = await fetch(
@@ -77,27 +75,40 @@ async function getGenerics(vault: SteerVault): Promise {
export default async function SteerVaultPage({
params,
-}: { params: { vaultId: string } }) {
- const vaultId = unsanitize(params.vaultId)
+}: { params: { chainId: string; vault: string; address: string } }) {
+ const pool = (await unstable_cache(
+ async () =>
+ await getV3Pool({
+ chainId: Number(params.chainId),
+ address: params.address,
+ }),
+ ['pool', `${params.chainId}:${params.address}`],
+ { revalidate: 60 * 15 },
+ )()) as NonNullable
- const vault = await unstable_cache(
- () => getSteerVault(vaultId),
- ['steer-vault', vaultId],
+ const vault = (await unstable_cache(
+ async () =>
+ await getVault({
+ chainId: Number(params.chainId),
+ vaultAddress: params.vault,
+ }),
+ ['vault', `${params.chainId}:${params.vault}`],
{ revalidate: 60 * 15 },
- )()
+ )()) as NonNullable
+
const generics = await unstable_cache(
async () => await getGenerics(vault),
- ['steer-vault-generics', vaultId],
+ ['steer-vault-generics', `${params.chainId}:${params.vault}`],
{
- revalidate: 60 * 5,
+ revalidate: 60 * 15,
},
)()
- const Component = SteerStrategyComponents[vault.strategy]
+ const Component = SteerBaseStrategy
return (
-
)
}
diff --git a/apps/web/src/app/(evm)/[chainId]/pool/v3/add/layout.tsx b/apps/web/src/app/(evm)/[chainId]/pool/v3/add/layout.tsx
new file mode 100644
index 0000000000..7a929e95e8
--- /dev/null
+++ b/apps/web/src/app/(evm)/[chainId]/pool/v3/add/layout.tsx
@@ -0,0 +1,39 @@
+import { Container, typographyVariants } from '@sushiswap/ui'
+
+import { BackButton } from 'src/ui/pool/BackButton'
+
+export const metadata = {
+ title: 'Pool 💦',
+}
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+ return (
+ <>
+
+
+
+
+
+ )
+}
diff --git a/apps/web/src/app/(evm)/[chainId]/pool/v3/add/page.tsx b/apps/web/src/app/(evm)/[chainId]/pool/v3/add/page.tsx
new file mode 100644
index 0000000000..e2c8748604
--- /dev/null
+++ b/apps/web/src/app/(evm)/[chainId]/pool/v3/add/page.tsx
@@ -0,0 +1,134 @@
+'use client'
+
+import { useRouter } from 'next/navigation'
+import React, { FC, useMemo, useState } from 'react'
+import { useTokenAmountDollarValues } from 'src/lib/hooks'
+import { useConcentratedPositionInfo } from 'src/lib/wagmi/hooks/positions/hooks/useConcentratedPositionInfo'
+import { ConcentratedLiquidityProvider } from 'src/ui/pool/ConcentratedLiquidityProvider'
+import {
+ ConcentratedLiquidityURLStateProvider,
+ useConcentratedLiquidityURLState,
+} from 'src/ui/pool/ConcentratedLiquidityURLStateProvider'
+import { ConcentratedLiquidityWidget } from 'src/ui/pool/ConcentratedLiquidityWidget'
+import { SelectFeeConcentratedWidget } from 'src/ui/pool/SelectFeeConcentratedWidget'
+import { SelectNetworkWidget } from 'src/ui/pool/SelectNetworkWidget'
+import { SelectPricesWidget } from 'src/ui/pool/SelectPricesWidget'
+import { SelectTokensWidget } from 'src/ui/pool/SelectTokensWidget'
+import { ChainKey, computeSushiSwapV3PoolAddress } from 'sushi'
+import {
+ SUSHISWAP_V3_FACTORY_ADDRESS,
+ SUSHISWAP_V3_SUPPORTED_CHAIN_IDS,
+ SushiSwapV3ChainId,
+ isWNativeSupported,
+} from 'sushi/config'
+import { tryParseAmount } from 'sushi/currency'
+import { SWRConfig } from 'swr'
+import { useAccount } from 'wagmi'
+
+export default function Page({ params }: { params: { chainId: string } }) {
+ return (
+
+
+
+ <_Add />
+
+
+
+ )
+}
+
+const _Add: FC = () => {
+ const { address } = useAccount()
+ const {
+ chainId,
+ token0,
+ token1,
+ setToken1,
+ setToken0,
+ feeAmount,
+ setFeeAmount,
+ tokensLoading,
+ tokenId,
+ switchTokens,
+ } = useConcentratedLiquidityURLState()
+
+ const router = useRouter()
+
+ const [_invert, _setInvert] = useState(false)
+ const { data: position } = useConcentratedPositionInfo({
+ chainId,
+ token0,
+ tokenId,
+ token1,
+ })
+
+ const poolAddress = useMemo(
+ () =>
+ token0 && token1 && feeAmount && chainId
+ ? computeSushiSwapV3PoolAddress({
+ factoryAddress: SUSHISWAP_V3_FACTORY_ADDRESS[chainId],
+ tokenA: token0.wrapped,
+ tokenB: token1.wrapped,
+ fee: feeAmount,
+ })
+ : undefined,
+ [chainId, feeAmount, token0, token1],
+ )
+
+ const fiatAmounts = useMemo(
+ () => [tryParseAmount('1', token0), tryParseAmount('1', token1)],
+ [token0, token1],
+ )
+ const _fiatAmountsAsNumber = useTokenAmountDollarValues({
+ chainId,
+ amounts: fiatAmounts,
+ })
+
+ return (
+ <>
+ router.push(`/${ChainKey[chainId]}/pool/v3/add`)}
+ networks={SUSHISWAP_V3_SUPPORTED_CHAIN_IDS}
+ />
+
+
+
+
+ )
+}
diff --git a/apps/web/src/app/(evm)/[chainId]/pool/v3/layout.tsx b/apps/web/src/app/(evm)/[chainId]/pool/v3/layout.tsx
new file mode 100644
index 0000000000..5ebb188540
--- /dev/null
+++ b/apps/web/src/app/(evm)/[chainId]/pool/v3/layout.tsx
@@ -0,0 +1,15 @@
+import { ChainId } from 'sushi/chain'
+import { isSushiSwapV3ChainId } from 'sushi/config'
+import notFound from '../../not-found'
+
+export default function Layout({
+ children,
+ params,
+}: { children: React.ReactNode; params: { chainId: string } }) {
+ const chainId = +params.chainId as ChainId
+ if (!isSushiSwapV3ChainId(chainId)) {
+ return notFound(chainId)
+ }
+
+ return <>{children}
+}
diff --git a/apps/web/src/app/(evm)/pool/providers.tsx b/apps/web/src/app/(evm)/[chainId]/providers.tsx
similarity index 100%
rename from apps/web/src/app/(evm)/pool/providers.tsx
rename to apps/web/src/app/(evm)/[chainId]/providers.tsx
diff --git a/apps/web/src/app/(evm)/_common/header-elements.ts b/apps/web/src/app/(evm)/_common/header-elements.ts
deleted file mode 100644
index bb2274abab..0000000000
--- a/apps/web/src/app/(evm)/_common/header-elements.ts
+++ /dev/null
@@ -1,94 +0,0 @@
-import {
- type NavigationElement,
- NavigationElementDropdown,
- NavigationElementType,
-} from '@sushiswap/ui'
-import { EXPLORE_NAVIGATION_LINKS } from 'src/app/_common/header-elements'
-
-const TOOLS_NAVIGATION_LINKS: NavigationElementDropdown['items'] = [
- {
- title: 'Analytics',
- href: '/analytics',
- description: 'Find the best opportunities',
- },
- {
- title: 'Blog',
- href: '/blog',
- description:
- 'Stay up to date with the latest product developments at Sushi.',
- },
- {
- title: 'Academy',
- href: '/academy',
- description: 'Everything you need to get up to speed with DeFi.',
- },
- {
- title: 'Forum & Proposals',
- href: 'https://forum.sushi.com',
- description: 'View and discuss proposals for SushiSwap.',
- },
- {
- title: 'Participate',
- href: 'https://snapshot.org/#/sushigov.eth',
- description:
- 'As a Sushi holder, you can vote on proposals to shape the future of SushiSwap.',
- },
-]
-
-const PARTNER_NAVIGATION_LINKS: NavigationElementDropdown['items'] = [
- {
- title: 'Partner with Sushi',
- href: '/partner',
- description: 'Incentivize your token with Sushi rewards.',
- },
- {
- title: 'List enquiry',
- href: '/tokenlist-request',
- description: 'Get your token on our default token list.',
- },
-]
-
-export const headerElements: NavigationElement[] = [
- {
- title: 'Explore',
- items: EXPLORE_NAVIGATION_LINKS,
- show: 'mobile',
- type: NavigationElementType.Dropdown,
- },
- {
- title: 'Swap',
- href: '/swap',
- show: 'desktop',
- type: NavigationElementType.Single,
- },
- {
- title: 'Pools',
- href: '/pool',
- show: 'desktop',
- type: NavigationElementType.Single,
- },
- // {
- // title: 'Bonds',
- // href: '/bonds',
- // show: 'desktop',
- // type: NavigationElementType.Single,
- // },
- {
- title: 'Stake',
- href: '/stake',
- show: 'desktop',
- type: NavigationElementType.Single,
- },
- {
- title: 'More',
- items: TOOLS_NAVIGATION_LINKS,
- show: 'desktop',
- type: NavigationElementType.Dropdown,
- },
- {
- title: 'Partners',
- items: PARTNER_NAVIGATION_LINKS,
- show: 'desktop',
- type: NavigationElementType.Dropdown,
- },
-]
diff --git a/apps/web/src/app/(evm)/_common/header-elements.tsx b/apps/web/src/app/(evm)/_common/header-elements.tsx
new file mode 100644
index 0000000000..ffd9941fd6
--- /dev/null
+++ b/apps/web/src/app/(evm)/_common/header-elements.tsx
@@ -0,0 +1,72 @@
+import {
+ type NavigationElement,
+ NavigationElementType,
+ NavigationListItem,
+ NavigationMenuContent,
+ NavigationMenuItem,
+ NavigationMenuTrigger,
+ OnramperButton,
+} from '@sushiswap/ui'
+import {
+ EXPLORE_NAVIGATION_LINKS,
+ // MORE_NAVIGATION_LINKS,
+} from 'src/app/_common/header-elements'
+import { ChainId, ChainKey, isChainId } from 'sushi'
+
+export const headerElements = (chainId?: ChainId): NavigationElement[] => [
+ {
+ title: 'Explore',
+ items: EXPLORE_NAVIGATION_LINKS(chainId),
+ show: 'mobile',
+ type: NavigationElementType.Dropdown,
+ },
+ {
+ show: 'desktop',
+ type: NavigationElementType.Custom,
+ item: (
+
+ Trade
+
+
+
+ ),
+ },
+ {
+ title: 'Explore',
+ href: `/${
+ isChainId(Number(chainId)) ? ChainKey[chainId as ChainId] : 'ethereum'
+ }/explore/pools`,
+ show: 'desktop',
+ type: NavigationElementType.Single,
+ },
+ {
+ title: 'Pools',
+ href: `/${
+ isChainId(Number(chainId)) ? ChainKey[chainId as ChainId] : 'ethereum'
+ }/pool`,
+ show: 'desktop',
+ type: NavigationElementType.Single,
+ },
+ {
+ title: 'Stake',
+ href: '/stake',
+ show: 'desktop',
+ type: NavigationElementType.Single,
+ },
+ // {
+ // title: 'More',
+ // items: MORE_NAVIGATION_LINKS,
+ // show: 'desktop',
+ // type: NavigationElementType.Dropdown,
+ // },
+]
diff --git a/apps/web/src/app/(evm)/analytics/api/bentobox/route.ts b/apps/web/src/app/(evm)/analytics/api/bentobox/route.ts
deleted file mode 100644
index 3159171c2d..0000000000
--- a/apps/web/src/app/(evm)/analytics/api/bentobox/route.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { NextResponse } from 'next/server'
-import { bentoBoxTokensSchema } from 'src/lib/schema'
-
-import { getBentoBoxTokens } from 'src/lib/graph'
-
-export const revalidate = 3600
-
-export async function GET(request: Request) {
- const { searchParams } = new URL(request.url)
- const tokenSymbols = searchParams.get('tokenSymbols')
- const chainIds = searchParams.get('chainIds')
- const result = bentoBoxTokensSchema.safeParse({ tokenSymbols, chainIds })
- if (!result.success) {
- return new Response(result.error.message, { status: 422 })
- }
- const tokens = await getBentoBoxTokens(result.data)
- return NextResponse.json(tokens, {
- headers: {
- 'Cache-Control': 'public, max-age=60, stale-while-revalidate=600',
- },
- })
-}
diff --git a/apps/web/src/app/(evm)/analytics/api/charts/route.ts b/apps/web/src/app/(evm)/analytics/api/charts/route.ts
deleted file mode 100644
index a75d1d89b9..0000000000
--- a/apps/web/src/app/(evm)/analytics/api/charts/route.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { NextResponse } from 'next/server'
-
-import { getCharts } from 'src/lib/graph'
-
-export const revalidate = 3600
-
-export async function GET(request: Request) {
- const { searchParams } = new URL(request.url)
- const networks = searchParams.get('networks') as string
- const data = await getCharts({ networks })
- return NextResponse.json(data, {
- headers: {
- 'Cache-Control': 'public, max-age=60, stale-while-revalidate=600',
- },
- })
-}
diff --git a/apps/web/src/app/(evm)/analytics/api/furoTokens/route.ts b/apps/web/src/app/(evm)/analytics/api/furoTokens/route.ts
deleted file mode 100644
index f28b61b78c..0000000000
--- a/apps/web/src/app/(evm)/analytics/api/furoTokens/route.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { NextResponse } from 'next/server'
-import { getFuroTokens } from 'src/lib/graph'
-import { furoTokensSchema } from 'src/lib/schema'
-
-export const revalidate = 3600
-
-export async function GET(request: Request) {
- const { searchParams } = new URL(request.url)
- const tokenSymbols = searchParams.get('tokenSymbols')
- const chainIds = searchParams.get('chainIds')
- const result = furoTokensSchema.safeParse({ tokenSymbols, chainIds })
- if (!result.success) {
- return new Response(result.error.message, { status: 422 })
- }
- const tokens = await getFuroTokens(result.data)
- return NextResponse.json(tokens, {
- headers: {
- 'Cache-Control': 'public, max-age=60, stale-while-revalidate=600',
- },
- })
-}
diff --git a/apps/web/src/app/(evm)/analytics/api/pools/count/route.ts b/apps/web/src/app/(evm)/analytics/api/pools/count/route.ts
deleted file mode 100644
index 261db7e93f..0000000000
--- a/apps/web/src/app/(evm)/analytics/api/pools/count/route.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import { getPoolCount } from '@sushiswap/client'
-import { PoolCountApiSchema } from '@sushiswap/client/api'
-import { NextResponse } from 'next/server'
-
-export const revalidate = 3600
-
-export async function GET(request: Request) {
- const { searchParams } = new URL(request.url)
- const chainIds = searchParams.get('chainIds')
- const isIncentivized = searchParams.get('isIncentivized')
- const isWhitelisted = searchParams.get('isWhitelisted')
- const tokenSymbols = searchParams.get('tokenSymbols')
- const protocols = searchParams.get('protocols')
- const result = PoolCountApiSchema.safeParse({
- chainIds,
- isIncentivized,
- isWhitelisted,
- tokenSymbols,
- protocols,
- })
- if (!result.success) {
- return new Response(result.error.message, { status: 422 })
- }
- const count = await getPoolCount(result.data)
- return NextResponse.json(count, {
- headers: {
- 'Cache-Control': 'public, max-age=60, stale-while-revalidate=600',
- },
- })
-}
diff --git a/apps/web/src/app/(evm)/analytics/api/pools/route.ts b/apps/web/src/app/(evm)/analytics/api/pools/route.ts
deleted file mode 100644
index 67e71cd4ab..0000000000
--- a/apps/web/src/app/(evm)/analytics/api/pools/route.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-import { getPools } from '@sushiswap/client'
-import { PoolsApiSchema } from '@sushiswap/client/api'
-import { NextResponse } from 'next/server'
-
-export const revalidate = 3600
-
-export async function GET(request: Request) {
- const { searchParams } = new URL(request.url)
- const chainIds = searchParams.get('chainIds')
- const isIncentivized = searchParams.get('isIncentivized')
- const isWhitelisted = searchParams.get('isWhitelisted')
- const tokenSymbols = searchParams.get('tokenSymbols')
- const protocols = searchParams.get('protocols')
- const cursor = searchParams.get('cursor')
- const orderBy = searchParams.get('orderBy')
- const orderDir = searchParams.get('orderDir')
- const result = PoolsApiSchema.safeParse({
- chainIds,
- isIncentivized,
- isWhitelisted,
- tokenSymbols,
- protocols,
- cursor,
- orderBy,
- orderDir,
- })
- if (!result.success) {
- return new Response(result.error.message, { status: 422 })
- }
- const pools = await getPools(result.data)
- return NextResponse.json(pools, {
- headers: {
- 'Cache-Control': 'public, max-age=60, stale-while-revalidate=600',
- },
- })
-}
diff --git a/apps/web/src/app/(evm)/analytics/header.tsx b/apps/web/src/app/(evm)/analytics/header.tsx
deleted file mode 100644
index a1b95b2955..0000000000
--- a/apps/web/src/app/(evm)/analytics/header.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-'use client'
-
-import { Navigation } from '@sushiswap/ui'
-import React, { FC } from 'react'
-
-import { headerElements } from '../_common/header-elements'
-
-export const Header: FC = () => {
- return
-
-
-
-
-
-
-
- )
-}
diff --git a/apps/web/src/app/(evm)/analytics/pay/page.tsx b/apps/web/src/app/(evm)/analytics/pay/page.tsx
deleted file mode 100644
index 17ea446a52..0000000000
--- a/apps/web/src/app/(evm)/analytics/pay/page.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import { Container } from '@sushiswap/ui'
-import React, { Suspense } from 'react'
-
-import { FuroTokenTable } from 'src/ui/analytics/furo-token-table'
-import { PoolsFiltersProvider } from 'src/ui/pool'
-import { TableFiltersNetwork } from 'src/ui/pool/TableFiltersNetwork'
-import { TableFiltersResetButton } from 'src/ui/pool/TableFiltersResetButton'
-import { TableFiltersSearchToken } from 'src/ui/pool/TableFiltersSearchToken'
-
-export default function PayPage() {
- return (
-
-
-
-
-
-
- )
-}
diff --git a/apps/web/src/app/(evm)/analytics/vault/page.tsx b/apps/web/src/app/(evm)/analytics/vault/page.tsx
deleted file mode 100644
index ee7f2e0695..0000000000
--- a/apps/web/src/app/(evm)/analytics/vault/page.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import { Container } from '@sushiswap/ui'
-import React, { Suspense } from 'react'
-
-import { BentoBoxTokenTable } from './table'
-
-import { PoolsFiltersProvider } from 'src/ui/pool'
-import { TableFiltersNetwork } from 'src/ui/pool/TableFiltersNetwork'
-import { TableFiltersResetButton } from 'src/ui/pool/TableFiltersResetButton'
-import { TableFiltersSearchToken } from 'src/ui/pool/TableFiltersSearchToken'
-
-export default function VaultPage() {
- return (
-
-
-
-
-
-
- )
-}
diff --git a/apps/web/src/app/(evm)/analytics/vault/table.tsx b/apps/web/src/app/(evm)/analytics/vault/table.tsx
deleted file mode 100644
index a86ff3e386..0000000000
--- a/apps/web/src/app/(evm)/analytics/vault/table.tsx
+++ /dev/null
@@ -1,146 +0,0 @@
-'use client'
-
-import {
- Badge,
- Card,
- CardContent,
- CardHeader,
- CardTitle,
- Currency,
- DataTable,
- SkeletonText,
-} from '@sushiswap/ui'
-import { NetworkIcon } from '@sushiswap/ui/icons/NetworkIcon'
-import {
- ColumnDef,
- PaginationState,
- SortingState,
- TableState,
-} from '@tanstack/react-table'
-import React, { FC, useMemo, useState } from 'react'
-import { formatNumber, formatUSD } from 'sushi/format'
-
-import {
- BentoBoxToken,
- GetBentoBoxTokenArgs,
- useBentoBoxTokens,
-} from './use-bentobox-tokens'
-
-import { usePoolFilters } from 'src/ui/pool'
-import { BentoBoxChainId, isBentoBoxChainId } from 'sushi/config'
-
-const COLUMNS: ColumnDef[] = [
- {
- id: 'tokenName',
- header: 'Name',
- cell: ({
- row: {
- original: { token },
- },
- }) => (
- ([
- { id: 'liquidityUSD', desc: true },
- ])
- const [pagination, setPagination] = useState({
- pageIndex: 0,
- pageSize: 10,
- })
-
- const args = useMemo(
- () => ({
- chainIds: chainIds.filter(isBentoBoxChainId) as BentoBoxChainId[],
- tokenSymbols,
- }),
- [chainIds, tokenSymbols],
- )
-
- const { data: bentoBoxTokens, isLoading } = useBentoBoxTokens(args)
-
- const data = useMemo(() => bentoBoxTokens || [], [bentoBoxTokens])
-
- const state: Partial = useMemo(() => {
- return {
- sorting,
- pagination,
- }
- }, [pagination, sorting])
-
- return (
-
-
-
- Tokens{' '}
- {bentoBoxTokens?.length ? (
-
- ({bentoBoxTokens?.length})
-
- ) : null}
-
-
-
-
-
- )
-}
diff --git a/apps/web/src/app/(evm)/analytics/vault/use-bentobox-tokens.ts b/apps/web/src/app/(evm)/analytics/vault/use-bentobox-tokens.ts
deleted file mode 100644
index 1ca5f728db..0000000000
--- a/apps/web/src/app/(evm)/analytics/vault/use-bentobox-tokens.ts
+++ /dev/null
@@ -1,71 +0,0 @@
-'use client'
-
-import { GetApiInputFromOutput, parseArgs } from '@sushiswap/client'
-import type { BentoBoxRebases } from '@sushiswap/graph-client/bentobox'
-import { useAllPrices } from '@sushiswap/react-query'
-import { useMemo } from 'react'
-import { Amount, Token } from 'sushi/currency'
-
-import { useQuery } from '@tanstack/react-query'
-import { bentoBoxTokensSchema } from 'src/lib/schema'
-
-export type GetBentoBoxTokenArgs = GetApiInputFromOutput<
- (typeof bentoBoxTokensSchema)['_input'],
- (typeof bentoBoxTokensSchema)['_output']
->
-
-export type BentoBoxToken = NonNullable<
- ReturnType['data']
->[number]
-
-export const getBentoBoxTokensUrl = (args: GetBentoBoxTokenArgs) =>
- `/analytics/api/bentobox${parseArgs(args)}`
-
-function useBentoBoxTokens(args: GetBentoBoxTokenArgs) {
- const { data: rebases, isInitialLoading } = useQuery({
- queryKey: [getBentoBoxTokensUrl(args)],
- queryFn: () =>
- fetch(getBentoBoxTokensUrl(args)).then((data) => data.json()),
- })
-
- const { data: prices, isLoading } = useAllPrices()
-
- return {
- data: useMemo(
- () =>
- prices &&
- rebases?.map((rebase) => {
- const token = new Token({
- chainId: rebase.chainId,
- decimals: rebase.token.decimals,
- address: rebase.id.split(':')[1],
- symbol: rebase.token.symbol,
- name: rebase.token.name,
- })
-
- const liquidity = Amount.fromRawAmount(token, rebase.elastic)
-
- const price = prices?.[token.chainId]?.[token.address]
-
- return {
- id: token.id,
- token,
- liquidity: parseInt(liquidity.toSignificant(6)),
- liquidityUSD: price
- ? parseInt(
- liquidity
- .multiply(
- prices?.[token.chainId]?.[token.address].asFraction,
- )
- .toSignificant(4),
- )
- : 0,
- }
- }),
- [rebases, prices],
- ),
- isLoading: isLoading || isInitialLoading,
- }
-}
-
-export { useBentoBoxTokens }
diff --git a/apps/web/src/app/(evm)/api/campaign/taskon/core/route.ts b/apps/web/src/app/(evm)/api/campaign/taskon/core/route.ts
deleted file mode 100644
index 0f00c65747..0000000000
--- a/apps/web/src/app/(evm)/api/campaign/taskon/core/route.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-import { getSushiV3Mints } from '@sushiswap/graph-client/sushi-v3'
-import { NextRequest, NextResponse } from 'next/server'
-import { ChainId } from 'sushi/chain'
-import { getAddress } from 'viem'
-import { z } from 'zod'
-
-const schema = z.object({
- address: z.coerce.string().transform((address) => getAddress(address)),
-})
-
-const poolAddress = '0xc1e92e02e12324b69ee0b29c6c6f471841d959ec' // CORE/BSSB - 1%
-
-export async function GET(request: NextRequest) {
- const params = Object.fromEntries(request.nextUrl.searchParams.entries())
-
- try {
- const { address } = schema.parse(params)
-
- const mints = await getSushiV3Mints({
- chainId: ChainId.CORE,
- where: {
- origin: address,
- pool: poolAddress,
- },
- })
-
- if (mints.length > 0) {
- return NextResponse.json(
- { result: { isValid: true } },
- {
- headers: {
- 'Cache-Control': 'public, max-age=60, stale-while-revalidate=600',
- },
- },
- )
- }
- } catch (_) {}
-
- return NextResponse.json(
- { result: { isValid: false } },
- {
- headers: {
- 'Cache-Control': 'public, max-age=60, stale-while-revalidate=600',
- },
- },
- )
-}
diff --git a/apps/web/src/app/(evm)/bonds/header.tsx b/apps/web/src/app/(evm)/bonds/header.tsx
index 6ac316f610..94558372a6 100644
--- a/apps/web/src/app/(evm)/bonds/header.tsx
+++ b/apps/web/src/app/(evm)/bonds/header.tsx
@@ -4,12 +4,14 @@ import { Navigation } from '@sushiswap/ui'
import React, { FC } from 'react'
import { SUPPORTED_CHAIN_IDS } from 'src/config'
import { WagmiHeaderComponents } from 'src/lib/wagmi/components/wagmi-header-components'
+import { useChainId } from 'wagmi'
import { headerElements } from '../_common/header-elements'
export const Header: FC = () => {
+ const chainId = useChainId()
return (
-
- )
-}
diff --git a/apps/web/src/app/(evm)/pool/[id]/(landing)/add/page.tsx b/apps/web/src/app/(evm)/pool/[id]/(landing)/add/page.tsx
deleted file mode 100644
index 388fe82c55..0000000000
--- a/apps/web/src/app/(evm)/pool/[id]/(landing)/add/page.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import PoolPage from '../page'
-
-export default async function PoolPageAdd({
- params,
-}: { params: { id: string } }) {
- return
- {children}
-
-
- )
-}
diff --git a/apps/web/src/app/(evm)/pool/[id]/(landing)/migrate/page.tsx b/apps/web/src/app/(evm)/pool/[id]/(landing)/migrate/page.tsx
deleted file mode 100644
index 63e5ed8984..0000000000
--- a/apps/web/src/app/(evm)/pool/[id]/(landing)/migrate/page.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import { getPool } from '@sushiswap/client'
-import { LinkInternal } from '@sushiswap/ui'
-import { unstable_cache } from 'next/cache'
-import notFound from 'src/app/(evm)/pool/not-found'
-import {
- PoolPositionProvider,
- PoolPositionRewardsProvider,
- PoolPositionStakedProvider,
-} from 'src/ui/pool'
-import { ConcentratedLiquidityProvider } from 'src/ui/pool/ConcentratedLiquidityProvider'
-import { MigrateTab } from 'src/ui/pool/MigrateTab'
-import { unsanitize } from 'sushi'
-
-export default async function MigratePage({
- params,
-}: { params: { id: string } }) {
- const poolId = unsanitize(params.id)
- const pool = await unstable_cache(
- async () => getPool(poolId),
- ['pool', poolId],
- {
- revalidate: 60 * 15,
- },
- )()
-
- if (!pool) {
- notFound()
- }
-
- return (
-
-
- )
-}
diff --git a/apps/web/src/app/(evm)/pool/[id]/(landing)/remove/page.tsx b/apps/web/src/app/(evm)/pool/[id]/(landing)/remove/page.tsx
deleted file mode 100644
index e53610eaba..0000000000
--- a/apps/web/src/app/(evm)/pool/[id]/(landing)/remove/page.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import PoolPage from '../page'
-
-export default async function PoolPageRemove({
- params,
-}: { params: { id: string } }) {
- return
-
-
-
-
-
-
- )
-}
diff --git a/apps/web/src/app/(evm)/pool/[id]/smart/(overview)/page.tsx b/apps/web/src/app/(evm)/pool/[id]/smart/(overview)/page.tsx
deleted file mode 100644
index 6107f4340e..0000000000
--- a/apps/web/src/app/(evm)/pool/[id]/smart/(overview)/page.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import { getPool, getSteerVaults } from '@sushiswap/client'
-import { unstable_cache } from 'next/cache'
-import notFound from 'src/app/(evm)/pool/not-found'
-import { SteerCarousel } from 'src/ui/pool/Steer/SteerCarousel'
-import type { ID } from 'sushi'
-import { unsanitize } from 'sushi/format'
-
-export default async function VaultOverviewPage({
- params,
-}: { params: { id: string } }) {
- const poolId = unsanitize(params.id) as ID
- const poolP = unstable_cache(async () => getPool(poolId), ['pool', poolId], {
- revalidate: 60 * 15,
- })()
-
- const vaultsP = unstable_cache(
- async () => getSteerVaults({ poolId }),
- ['pool', poolId],
- {
- revalidate: 60 * 15,
- },
- )()
-
- const [pool, vaults] = await Promise.all([poolP, vaultsP])
-
- if (!pool || !vaults) {
- notFound()
- }
-
- return
-
-
-
-
-
-
- )
-}
diff --git a/apps/web/src/app/(evm)/pool/add/page.tsx b/apps/web/src/app/(evm)/pool/add/page.tsx
deleted file mode 100644
index a3dc500e05..0000000000
--- a/apps/web/src/app/(evm)/pool/add/page.tsx
+++ /dev/null
@@ -1,213 +0,0 @@
-'use client'
-
-import React, { FC, useMemo, useState } from 'react'
-import { useTokenAmountDollarValues } from 'src/lib/hooks'
-import { useConcentratedPositionInfo } from 'src/lib/wagmi/hooks/positions/hooks/useConcentratedPositionInfo'
-import { ConcentratedLiquidityProvider } from 'src/ui/pool/ConcentratedLiquidityProvider'
-import {
- ConcentratedLiquidityURLStateProvider,
- useConcentratedLiquidityURLState,
-} from 'src/ui/pool/ConcentratedLiquidityURLStateProvider'
-import { ConcentratedLiquidityWidget } from 'src/ui/pool/ConcentratedLiquidityWidget'
-import { SelectFeeConcentratedWidget } from 'src/ui/pool/SelectFeeConcentratedWidget'
-import { SelectNetworkWidget } from 'src/ui/pool/SelectNetworkWidget'
-import { SelectPricesWidget } from 'src/ui/pool/SelectPricesWidget'
-import { SelectTokensWidget } from 'src/ui/pool/SelectTokensWidget'
-import { ChainId, computeSushiSwapV3PoolAddress } from 'sushi'
-import {
- SUSHISWAP_V3_FACTORY_ADDRESS,
- SUSHISWAP_V3_SUPPORTED_CHAIN_IDS,
- isWNativeSupported,
-} from 'sushi/config'
-import { tryParseAmount } from 'sushi/currency'
-import { SWRConfig } from 'swr'
-import { useAccount } from 'wagmi'
-
-export default function Page() {
- return (
-
-
-
- <_Add />
-
-
-
- )
-}
-
-const _Add: FC = () => {
- const { address } = useAccount()
- const {
- chainId,
- token0,
- token1,
- setToken1,
- setToken0,
- setNetwork,
- feeAmount,
- setFeeAmount,
- tokensLoading,
- tokenId,
- switchTokens,
- } = useConcentratedLiquidityURLState()
-
- const [_invert, _setInvert] = useState(false)
- const { data: position } = useConcentratedPositionInfo({
- chainId,
- token0,
- tokenId,
- token1,
- })
-
- const poolAddress = useMemo(
- () =>
- token0 && token1 && feeAmount && chainId
- ? computeSushiSwapV3PoolAddress({
- factoryAddress: SUSHISWAP_V3_FACTORY_ADDRESS[chainId],
- tokenA: token0.wrapped,
- tokenB: token1.wrapped,
- fee: feeAmount,
- })
- : undefined,
- [chainId, feeAmount, token0, token1],
- )
-
- const fiatAmounts = useMemo(
- () => [tryParseAmount('1', token0), tryParseAmount('1', token1)],
- [token0, token1],
- )
- const _fiatAmountsAsNumber = useTokenAmountDollarValues({
- chainId,
- amounts: fiatAmounts,
- })
-
- return (
- <>
- {/*, true>,
- SushiPositionStaked
->
-
-export async function GET(request: Request) {
- const { searchParams } = new URL(request.url)
- const id = searchParams.get('id')
- const chainIds = searchParams.get('chainIds')
-
- if (!id) return new Response('No user(id) provided', { status: 422 })
- const result = schema.safeParse({ id, chainIds })
- if (!result.success) {
- return new Response(result.error.message, { status: 400 })
- }
- const args = result.data
- const data = await getUser(args)
- const poolIds = data.map((position) => position.pool.id)
-
- if (poolIds.length === 0) {
- return NextResponse.json([], {
- status: 200,
- headers: {
- 'Cache-Control': 'public, max-age=15, stale-while-revalidate=600',
- ...CORS,
- },
- })
- }
-
- const [graphPoolsPromise, dbPoolsPromise] = await Promise.allSettled([
- getV2GraphPools(poolIds),
- getPools({
- ids: poolIds,
- }),
- ])
-
- const graphPools =
- graphPoolsPromise.status === 'fulfilled' ? graphPoolsPromise.value : []
- const dbPools =
- dbPoolsPromise.status === 'fulfilled' ? dbPoolsPromise.value : []
-
- const userPositions = data
- .map((position) => {
- const dbPool = dbPools?.find((pool) => pool.id === position.pool.id)
- const graphPool = graphPools?.find(
- (graphPool) => graphPool.id === position.pool.id,
- )
-
- const pool: PoolWithAprs> | undefined =
- dbPool || graphPool
- ? {
- ...graphPool!,
- isIncentivized: dbPool?.isIncentivized ?? false,
- wasIncentivized: dbPool?.wasIncentivized ?? false,
- incentiveApr: dbPool?.incentiveApr ?? 0,
- feeApr1h: dbPool?.feeApr1h ?? 0,
- feeApr1d: dbPool?.feeApr1d ?? 0,
- feeApr1w: dbPool?.feeApr1w ?? 0,
- feeApr1m: dbPool?.feeApr1m ?? 0,
- totalApr1h: dbPool?.totalApr1h ?? 0,
- totalApr1d: dbPool?.totalApr1d ?? 0,
- totalApr1w: dbPool?.totalApr1w ?? 0,
- totalApr1m: dbPool?.totalApr1m ?? 0,
- }
- : undefined
-
- if (!pool) return undefined
-
- return {
- ...position,
- pool,
- }
- })
- .filter((pool): pool is NonNullable => pool !== undefined)
-
- return NextResponse.json(userPositions, {
- headers: {
- 'Cache-Control': 'public, max-age=15, stale-while-revalidate=600',
- ...CORS,
- },
- })
-}
diff --git a/apps/web/src/app/(evm)/pool/api/user/route.ts b/apps/web/src/app/(evm)/pool/api/user/route.ts
deleted file mode 100644
index 27d59468b5..0000000000
--- a/apps/web/src/app/(evm)/pool/api/user/route.ts
+++ /dev/null
@@ -1,49 +0,0 @@
-import { NextResponse } from 'next/server'
-import { getUser } from 'src/lib/graph'
-import { ChainId } from 'sushi/chain'
-import { isSushiSwapV2ChainId } from 'sushi/config'
-import { Address } from 'viem'
-import { z } from 'zod'
-import { CORS } from '../cors'
-
-export const revalidate = 15
-
-const schema = z.object({
- id: z
- .string()
- .refine((id) => id.startsWith('0x'))
- .transform((id) => id.toLowerCase() as Address),
- chainIds: z.nullable(z.string()).transform((chainIds) =>
- chainIds
- ?.split(',')
- .map((chainId) => Number(chainId) as ChainId)
- .filter(isSushiSwapV2ChainId),
- ),
-})
-
-// export const dynamic = 'auto'
-// export const dynamicParams = true
-// export const revalidate = false
-// export const fetchCache = 'auto'
-// export const runtime = 'nodejs'
-// export const preferredRegion = 'auto'
-
-export async function GET(request: Request) {
- const { searchParams } = new URL(request.url)
- const id = searchParams.get('id')
- const chainIds = searchParams.get('chainIds')
- if (!id) return new Response(null, { status: 422 })
- const result = schema.safeParse({ id, chainIds })
- if (!result.success) {
- return new Response(result.error.message, { status: 400 })
- }
- const args = result.data
- const data = await getUser(args)
-
- return NextResponse.json(data, {
- headers: {
- 'Cache-Control': 'public, max-age=15, stale-while-revalidate=600',
- ...CORS,
- },
- })
-}
diff --git a/apps/web/src/app/(evm)/pool/error.tsx b/apps/web/src/app/(evm)/pool/error.tsx
deleted file mode 100644
index 3d442b8007..0000000000
--- a/apps/web/src/app/(evm)/pool/error.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-'use client'
-
-import { ChevronRightIcon } from '@heroicons/react/20/solid'
-import * as Sentry from '@sentry/nextjs'
-import { Button, LinkInternal, typographyVariants } from '@sushiswap/ui'
-import { useEffect } from 'react'
-
-export default function ErrorPage({
- error,
-}: { error: Error & { digest?: string }; reset: () => void }) {
- useEffect(() => {
- // Log the error to sentry
- Sentry.captureException(error)
- }, [error])
- return (
- {children}
-}
diff --git a/apps/web/src/app/(evm)/stake/header.tsx b/apps/web/src/app/(evm)/stake/header.tsx
index 6ac316f610..94558372a6 100644
--- a/apps/web/src/app/(evm)/stake/header.tsx
+++ b/apps/web/src/app/(evm)/stake/header.tsx
@@ -4,12 +4,14 @@ import { Navigation } from '@sushiswap/ui'
import React, { FC } from 'react'
import { SUPPORTED_CHAIN_IDS } from 'src/config'
import { WagmiHeaderComponents } from 'src/lib/wagmi/components/wagmi-header-components'
+import { useChainId } from 'wagmi'
import { headerElements } from '../_common/header-elements'
export const Header: FC = () => {
+ const chainId = useChainId()
return (
(
- (acc, cur) => {
- return {
- tvlUSD: acc.tvlUSD + Number(cur.totalLiquidityUSD),
- volumeUSD: acc.volumeUSD + Number(cur.totalVolumeUSD),
- pairCount: acc.pairCount + Number(cur.poolCount),
- }
- },
- {
- tvlUSD: 0,
- volumeUSD: 0,
- pairCount: 0,
- },
- ),
- }
-}
-
-const getV3Data = async () => {
- const { data: factories } = await fetchMultichain({
- chainIds: SUSHISWAP_V3_SUPPORTED_CHAIN_IDS.filter(
- (c) =>
- !DISABLED_ANALYTICS_CHAIN_IDS.includes(
- c as (typeof DISABLED_ANALYTICS_CHAIN_IDS)[number],
- ),
- ),
- fetch: getSushiV3Factory,
- })
-
- return factories.reduce(
- (acc, cur) => {
- return {
- tvlUSD: acc.tvlUSD + Number(cur.totalValueLockedUSD),
- volumeUSD: acc.volumeUSD + Number(cur.totalVolumeUSD),
- pairCount: acc.pairCount + Number(cur.poolCount),
- }
- },
- {
- tvlUSD: 0,
- volumeUSD: 0,
- pairCount: 0,
- },
- )
-}
-
-export const revalidate = 3600
-
-export async function GET() {
- const [sushiPrice, v2Data, v3Data] = await Promise.all([
- getSushiPriceUSD(),
- getV2Data(),
- getV3Data(),
- ])
-
- let totalTVL = Number(v2Data.v2.tvlUSD) + Number(v3Data.tvlUSD)
- let totalVolume = Number(v2Data.v2.volumeUSD) + Number(v3Data.volumeUSD)
- const totalPoolCount = Number(v2Data.v2.pairCount) + Number(v3Data.pairCount)
-
- totalTVL = totalTVL > 10_000_000_000 ? 0 : totalTVL
- totalVolume = totalVolume > 5_000_000_000_000 ? 0 : totalVolume
-
- return NextResponse.json({
- stats: {
- price: {
- formatted: !sushiPrice ? '-' : formatUSD(sushiPrice),
- number: Number(sushiPrice),
- title: '$SUSHI Price',
- decimalPlaces: 2,
- },
- liquidity: {
- formatted: !totalTVL ? '-' : formatUSD(totalTVL),
- number: totalTVL,
- title: 'Total Liquidity',
- decimalPlaces: 0,
- },
- volume: {
- formatted: !totalVolume ? '-' : formatUSD(totalVolume),
- number: totalVolume,
- title: 'Total Volume',
- decimalPlaces: 0,
- },
- pairs: {
- formatted: !totalPoolCount ? '-' : formatNumber(totalPoolCount),
- number: totalPoolCount,
- title: 'Total Pairs',
- decimalPlaces: 0,
- },
- },
- })
-}
diff --git a/apps/web/src/app/(legal)/privacy-policy/layout.tsx b/apps/web/src/app/(legal)/privacy-policy/layout.tsx
index da0c375419..b771b76604 100644
--- a/apps/web/src/app/(legal)/privacy-policy/layout.tsx
+++ b/apps/web/src/app/(legal)/privacy-policy/layout.tsx
@@ -9,7 +9,7 @@ export const metadata: Metadata = {
export default function Layout({ children }: { children: React.ReactNode }) {
return (
<>
- ({
- queryKey: [getGraphPoolUrl(pool.id)],
- queryFn: async () => {
- await import('sushi/bigint-serializer')
- return fetch(getGraphPoolUrl(pool.id))
- .then((data) => data.text())
- .then(JSON.parse)
- },
- })
-
- const { token0, token1, liquidityToken } = useMemo(() => {
- if (!graphPool)
- return {
- token0: undefined,
- token1: undefined,
- liquidityToken: undefined,
- }
-
- return getTokensFromPool(graphPool)
- }, [graphPool])
-
- return useMemo(() => {
- console.log('HERE >>>', token0, graphPool)
- return {
- isLoading,
- error,
- data: {
- token0,
- token1,
- liquidityToken,
- // liquidityNative: graphPool ? Number(graphPool?.reserveETH) : null,
- liquidityUSD: graphPool ? Number(graphPool?.liquidityUSD) : null,
- // liquidity1dChange: graphPool
- // ? Number(graphPool?.liquidity1dChange ?? 0)
- // : null,
- // fees1d: graphPool ? Number(graphPool?.fees1d ?? 0) : null,
- // fees1dChange: graphPool ? Number(graphPool?.fees1dChange ?? 0) : null,
- // volume1d: graphPool ? Number(graphPool?.volume1d ?? 0) : null,
- // volume1dChange: graphPool
- // ? Number(graphPool?.volume1dChange ?? 0)
- // : null,
- // txCount1d: graphPool ? Number(graphPool?.txCount1d ?? 0) : null,
- // txCount1dChange: graphPool
- // ? Number(graphPool?.txCount1dChange ?? 0)
- // : null,
- // hourSnapshots: graphPool?.hourSnapshots ?? null,
- // daySnapshots: graphPool?.daySnapshots ?? null,
- reserve0:
- token0 && graphPool
- ? Amount.fromRawAmount(token0, graphPool.reserve0)
- : null,
- reserve1:
- token1 && graphPool
- ? Amount.fromRawAmount(token1, graphPool.reserve1)
- : null,
- totalSupply:
- liquidityToken && graphPool
- ? Amount.fromRawAmount(liquidityToken, graphPool.liquidity)
- : null,
- },
- }
- }, [error, graphPool, isLoading, liquidityToken, token0, token1])
-}
diff --git a/apps/web/src/lib/hooks/api/usePoolGraphData.ts b/apps/web/src/lib/hooks/api/usePoolGraphData.ts
index 93fe5b7676..1acbeb86ee 100644
--- a/apps/web/src/lib/hooks/api/usePoolGraphData.ts
+++ b/apps/web/src/lib/hooks/api/usePoolGraphData.ts
@@ -1,66 +1,45 @@
'use client'
-import { getSushiHistoricPool } from '@sushiswap/graph-client/composite/sushi-historic-pool'
+import {
+ getV2PoolBuckets,
+ getV3PoolBuckets,
+} from '@sushiswap/graph-client/data-api'
import { keepPreviousData, useQuery } from '@tanstack/react-query'
-import { SushiSwapV2ChainId } from 'sushi/config'
-import { Amount, Token } from 'sushi/currency'
+import { SushiSwapProtocol } from 'sushi'
+import { SushiSwapV2ChainId, SushiSwapV3ChainId } from 'sushi/config'
interface UsePoolGraphDataParams {
poolAddress: string
- chainId: SushiSwapV2ChainId
+ chainId: SushiSwapV2ChainId | SushiSwapV3ChainId
+ protocol: SushiSwapProtocol
enabled?: boolean
}
export const usePoolGraphData = ({
poolAddress,
chainId,
+ protocol,
enabled = true,
}: UsePoolGraphDataParams) => {
return useQuery({
queryKey: ['usePoolGraphData', { poolAddress, chainId }],
queryFn: async () => {
- const pair = await getSushiHistoricPool({
- chainId,
- id: poolAddress,
- })
-
- if (pair) {
- const token0 = new Token({
- chainId: pair.chainId,
- address: pair.token0.address,
- decimals: pair.token0.decimals,
- symbol: pair.token0.symbol,
- name: pair.token0.name,
- })
-
- const token1 = new Token({
- chainId: pair.chainId,
- address: pair.token1.address,
- decimals: pair.token1.decimals,
- symbol: pair.token1.symbol,
- name: pair.token1.name,
- })
-
- return {
- token0,
- token1,
- swapFee: Number(pair.swapFee),
- reserve0: Amount.fromRawAmount(token0, pair.reserve0),
- reserve1: Amount.fromRawAmount(token1, pair.reserve1),
- liquidityUSD: Number(pair.liquidityUSD),
- liquidity1dChange: Number(pair.liquidityUSD1dChange),
- fees1d: Number(pair.feesUSD1d),
- fees1dChange: Number(pair.feesUSD1dChange),
- volume1d: Number(pair.volumeUSD1d),
- volume1dChange: Number(pair.volumeUSD1dChange),
- txCount1d: Number(pair.txCount1d),
- txCount1dChange: Number(pair.txCount1dChange),
- hourSnapshots: pair.poolHourData,
- daySnapshots: pair.poolDayData,
- }
- }
-
- return null
+ const buckets =
+ protocol === SushiSwapProtocol.SUSHISWAP_V2
+ ? await getV2PoolBuckets({
+ chainId,
+ address: poolAddress,
+ })
+ : protocol === SushiSwapProtocol.SUSHISWAP_V3
+ ? await getV3PoolBuckets({
+ chainId,
+ address: poolAddress,
+ })
+ : {
+ dayBuckets: [],
+ hourBuckets: [],
+ }
+ return buckets
},
placeholderData: keepPreviousData,
staleTime: 0,
diff --git a/apps/web/src/lib/hooks/api/useSushiV2UserPositions.ts b/apps/web/src/lib/hooks/api/useSushiV2UserPositions.ts
index 39c667ec93..67d0dd93bc 100644
--- a/apps/web/src/lib/hooks/api/useSushiV2UserPositions.ts
+++ b/apps/web/src/lib/hooks/api/useSushiV2UserPositions.ts
@@ -1,34 +1,19 @@
'use client'
-import { parseArgs } from '@sushiswap/client'
-import type { GetSushiV2StakedUnstakedPositions } from '@sushiswap/graph-client/composite/sushi-v2-staked-unstaked-positions'
+import {
+ GetV2Positions,
+ V2Position,
+ getV2Positions,
+} from '@sushiswap/graph-client/data-api'
import { useQuery } from '@tanstack/react-query'
-import { UserWithPool } from 'src/app/(evm)/pool/api/user-with-pools/route'
-import { ChainId } from 'sushi/chain'
-
-export interface GetUserArgs {
- id?: string
- chainIds?: ChainId[]
-}
-
-export function getUserPositionsWithPoolsUrl(
- args: GetSushiV2StakedUnstakedPositions,
-) {
- return `/pool/api/user-with-pools/${parseArgs(args)}`
-}
export function useSushiV2UserPositions(
- args: GetSushiV2StakedUnstakedPositions,
+ args: Partial,
shouldFetch = true,
) {
- return useQuery({
- queryKey: [getUserPositionsWithPoolsUrl(args)],
- queryFn: async () => {
- await import('sushi/bigint-serializer')
- return fetch(getUserPositionsWithPoolsUrl(args))
- .then((data) => data.text())
- .then(JSON.parse)
- },
- enabled: Boolean(shouldFetch && args.id),
+ return useQuery({
+ queryKey: ['v2-positions', args],
+ queryFn: async () => await getV2Positions(args as GetV2Positions),
+ enabled: Boolean(shouldFetch && args.chainId && args.user),
})
}
diff --git a/apps/web/src/lib/hooks/api/useV2Pool.ts b/apps/web/src/lib/hooks/api/useV2Pool.ts
new file mode 100644
index 0000000000..810f23a251
--- /dev/null
+++ b/apps/web/src/lib/hooks/api/useV2Pool.ts
@@ -0,0 +1,61 @@
+'use client'
+
+import { useMemo } from 'react'
+import 'sushi/bigint-serializer'
+import { Amount } from 'sushi/currency'
+
+import { V2Pool, getV2Pool } from '@sushiswap/graph-client/data-api'
+import { useQuery } from '@tanstack/react-query'
+import { PoolId } from 'sushi'
+import { stringify } from 'sushi/bigint-serializer'
+import { getTokensFromPool } from '../useTokensFromPool'
+
+export const useV2Pool = (poolId: PoolId) => {
+ const {
+ data: pool,
+ isLoading,
+ error,
+ } = useQuery({
+ queryKey: ['v2-pool', poolId],
+ queryFn: async () => {
+ const result = await getV2Pool({
+ chainId: poolId.chainId,
+ address: poolId.address,
+ })
+ return result
+ },
+ queryKeyHashFn: stringify,
+ })
+
+ const { token0, token1, liquidityToken } = useMemo(() => {
+ if (!pool)
+ return {
+ token0: undefined,
+ token1: undefined,
+ liquidityToken: undefined,
+ }
+
+ return getTokensFromPool(pool)
+ }, [pool])
+
+ return useMemo(() => {
+ return {
+ isLoading,
+ error,
+ data: {
+ token0,
+ token1,
+ liquidityToken,
+ liquidityUSD: pool ? Number(pool?.liquidityUSD) : null,
+ reserve0:
+ token0 && pool ? Amount.fromRawAmount(token0, pool.reserve0) : null,
+ reserve1:
+ token1 && pool ? Amount.fromRawAmount(token1, pool.reserve1) : null,
+ totalSupply:
+ liquidityToken && pool
+ ? Amount.fromRawAmount(liquidityToken, pool.liquidity)
+ : null,
+ },
+ }
+ }, [error, pool, isLoading, liquidityToken, token0, token1])
+}
diff --git a/apps/web/src/lib/hooks/api/useV3PoolsWithFees.ts b/apps/web/src/lib/hooks/api/useV3PoolsWithFees.ts
deleted file mode 100644
index 5c6f9968bb..0000000000
--- a/apps/web/src/lib/hooks/api/useV3PoolsWithFees.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-'use client'
-
-import {
- GetSushiV3PoolsWithFees,
- SushiV3PoolsWithFees,
- getSushiV3PoolsWithFees,
-} from '@sushiswap/graph-client/sushi-v3'
-import { UseQueryOptions, useQuery } from '@tanstack/react-query'
-import { Token } from 'sushi/currency'
-
-export type V3PoolsWithFees = Array<
- Omit & {
- token0: Token
- token1: Token
- }
->
-
-export const useV3PoolsWithFees = (
- params: GetSushiV3PoolsWithFees,
- options?: Omit, 'queryFn' | 'queryKey'>,
-) =>
- useQuery({
- queryKey: [params],
- queryFn: async () => {
- const pools = await getSushiV3PoolsWithFees(params)
- return pools.map((pool) => ({
- ...pool,
- token0: new Token(pool.token0),
- token1: new Token(pool.token1),
- }))
- },
- ...options,
- })
diff --git a/apps/web/src/lib/hooks/api/useVault.ts b/apps/web/src/lib/hooks/api/useVault.ts
new file mode 100644
index 0000000000..0bf7caad5b
--- /dev/null
+++ b/apps/web/src/lib/hooks/api/useVault.ts
@@ -0,0 +1,12 @@
+'use client'
+
+import { GetVault, VaultV1, getVault } from '@sushiswap/graph-client/data-api'
+import { useQuery } from '@tanstack/react-query'
+
+export function useVault(args: GetVault, shouldFetch = true) {
+ return useQuery({
+ queryKey: ['vault', args],
+ queryFn: async () => await getVault(args!),
+ enabled: Boolean(shouldFetch && args.chainId),
+ })
+}
diff --git a/apps/web/src/lib/hooks/api/userSmartPools.ts b/apps/web/src/lib/hooks/api/userSmartPools.ts
new file mode 100644
index 0000000000..d2792747d3
--- /dev/null
+++ b/apps/web/src/lib/hooks/api/userSmartPools.ts
@@ -0,0 +1,16 @@
+'use client'
+
+import {
+ GetSmartPools,
+ SmartPoolsV1,
+ getSmartPools,
+} from '@sushiswap/graph-client/data-api'
+import { useQuery } from '@tanstack/react-query'
+
+export function useSmartPools(args: GetSmartPools, shouldFetch = true) {
+ return useQuery({
+ queryKey: ['smart-pools', args],
+ queryFn: async () => await getSmartPools(args),
+ enabled: Boolean(shouldFetch && args.chainId),
+ })
+}
diff --git a/apps/web/src/lib/hooks/usePoolsByTokenPair.ts b/apps/web/src/lib/hooks/usePoolsByTokenPair.ts
index 6bfcc9cf7d..d9abe25a7e 100644
--- a/apps/web/src/lib/hooks/usePoolsByTokenPair.ts
+++ b/apps/web/src/lib/hooks/usePoolsByTokenPair.ts
@@ -9,10 +9,7 @@ function usePoolsByTokenPair(tokenId0?: string, tokenId1?: string) {
queryFn: () => {
if (!tokenId0 || !tokenId1) return []
- return getV3PoolsByTokenPair(
- tokenId0.toLowerCase(),
- tokenId1.toLowerCase(),
- )
+ return getV3PoolsByTokenPair(tokenId0, tokenId1)
},
enabled: !!tokenId0 && !!tokenId1,
})
diff --git a/apps/web/src/lib/hooks/useTokensFromPool.ts b/apps/web/src/lib/hooks/useTokensFromPool.ts
index 711b16e986..61843cd4c1 100644
--- a/apps/web/src/lib/hooks/useTokensFromPool.ts
+++ b/apps/web/src/lib/hooks/useTokensFromPool.ts
@@ -1,10 +1,14 @@
'use client'
import { useMemo } from 'react'
-import type { PoolBase } from 'sushi'
import { Native, Token } from 'sushi/currency'
-export const getTokensFromPool = (pool: PoolBase) => {
+export const getTokensFromPool = (pool: {
+ id: string
+ token0: { address: string; name: string; decimals: number; symbol: string }
+ token1: { address: string; name: string; decimals: number; symbol: string }
+ chainId: number
+}) => {
const _token0 = new Token({
address: pool.token0.address,
name: pool.token0.name,
@@ -44,7 +48,12 @@ export const getTokensFromPool = (pool: PoolBase) => {
}
}
-export const useTokensFromPool = (pool: PoolBase) => {
+export const useTokensFromPool = (pool: {
+ id: string
+ token0: { address: string; name: string; decimals: number; symbol: string }
+ token1: { address: string; name: string; decimals: number; symbol: string }
+ chainId: number
+}) => {
return useMemo(() => {
return getTokensFromPool(pool)
}, [pool])
diff --git a/apps/web/src/lib/stake/use-bar-chart-data.ts b/apps/web/src/lib/stake/use-bar-chart-data.ts
index 434ce54d22..672d9b21f8 100644
--- a/apps/web/src/lib/stake/use-bar-chart-data.ts
+++ b/apps/web/src/lib/stake/use-bar-chart-data.ts
@@ -1,6 +1,6 @@
'use client'
-import { getSushiBarHistory } from '@sushiswap/graph-client/sushi-bar'
+import { getSushiBarHistory } from '@sushiswap/graph-client/data-api'
import { keepPreviousData, useQuery } from '@tanstack/react-query'
export const useBarChartData = (enabled = true) => {
diff --git a/apps/web/src/lib/stake/use-bar-data.ts b/apps/web/src/lib/stake/use-bar-data.ts
index dd89f41ba1..73ae77c92d 100644
--- a/apps/web/src/lib/stake/use-bar-data.ts
+++ b/apps/web/src/lib/stake/use-bar-data.ts
@@ -1,12 +1,12 @@
'use client'
-import { getSushiBar } from '@sushiswap/graph-client/sushi-bar'
+import { getSushiBarStats } from '@sushiswap/graph-client/data-api'
import { keepPreviousData, useQuery } from '@tanstack/react-query'
export const useBarData = (enabled = true) => {
return useQuery({
queryKey: ['useBarData'],
- queryFn: async () => await getSushiBar({}),
+ queryFn: async () => await getSushiBarStats({}),
placeholderData: keepPreviousData,
staleTime: 30000,
gcTime: 86400000, // 24hs
diff --git a/apps/web/src/lib/wagmi/components/header-network-selector.tsx b/apps/web/src/lib/wagmi/components/header-network-selector.tsx
index 8161df5473..98c96a760a 100644
--- a/apps/web/src/lib/wagmi/components/header-network-selector.tsx
+++ b/apps/web/src/lib/wagmi/components/header-network-selector.tsx
@@ -11,7 +11,8 @@ export const HeaderNetworkSelector: FC<{
networks: ChainId[]
selectedNetwork?: ChainId
onChange?(chainId: ChainId): void
-}> = ({ networks, selectedNetwork, onChange }) => {
+ hideNetworkName?: boolean
+}> = ({ networks, selectedNetwork, onChange, hideNetworkName = false }) => {
const { switchChainAsync } = useSwitchChain()
const chainId = useChainId()
@@ -49,7 +50,9 @@ export const HeaderNetworkSelector: FC<{
diff --git a/apps/web/src/lib/wagmi/components/user-portfolio/PortfolioDefaultView.tsx b/apps/web/src/lib/wagmi/components/user-portfolio/PortfolioDefaultView.tsx
new file mode 100644
index 0000000000..1b6bb7dd06
--- /dev/null
+++ b/apps/web/src/lib/wagmi/components/user-portfolio/PortfolioDefaultView.tsx
@@ -0,0 +1,157 @@
+import {
+ ArrowLeftOnRectangleIcon,
+ Cog6ToothIcon,
+ DocumentDuplicateIcon,
+ LinkIcon,
+} from '@heroicons/react/24/outline'
+import { UserCircleIcon } from '@heroicons/react/24/solid'
+import {
+ Button,
+ ClipboardController,
+ IconButton,
+ LinkExternal,
+ SkeletonBox,
+ SkeletonCircle,
+} from '@sushiswap/ui'
+import Image from 'next/image'
+import { Dispatch, FC, SetStateAction, useMemo, useState } from 'react'
+import { SUPPORTED_CHAIN_IDS } from 'src/config'
+import { HeaderNetworkSelector } from 'src/lib/wagmi/components/header-network-selector'
+import { ChainId, chains, shortenAddress } from 'sushi'
+import { useAccount, useDisconnect } from 'wagmi'
+import { GetEnsNameReturnType } from 'wagmi/actions'
+import { PortfolioView } from '.'
+import { PortfolioClaimables } from './portfolio-claimables'
+import { PortfolioPositions } from './portfolio-positions'
+import { PortfolioTokens } from './portfolio-tokens'
+import { PortfolioHistory } from './portolio-history'
+
+enum PortfolioTab {
+ Tokens = 'Tokens',
+ Positions = 'Positions',
+ Claimable = 'Claimable',
+ History = 'History',
+}
+
+interface PortfolioDefaultProps {
+ ensName: GetEnsNameReturnType | undefined
+ isENSNameLoading: boolean
+ setView: Dispatch>
+}
+
+export const PortfolioDefaultView: FC = ({
+ setView,
+ ensName,
+ isENSNameLoading,
+}) => {
+ const { connector, address, chainId } = useAccount()
+ const { disconnect } = useDisconnect()
+
+ const [tab, setTab] = useState(PortfolioTab.Tokens)
+
+ const content = useMemo(() => {
+ switch (tab) {
+ case PortfolioTab.Tokens:
+ return = (params) => {
+ const { id, href, externalLink = false } = params
+
+ return href ? (
+
+ <_PortfolioInfoRow {...params} />
+
+ ) : (
+ = ({
+ chainId,
+ icon,
+ leftContent,
+ rightContent,
+}) => {
+ return (
+ >
+}
+
+const map = {
+ system: Auto,
+ light: = ({
+ setView,
+}) => {
+ const { theme, setTheme } = useTheme()
+ const [showTestnets, setShowTestnets] = useLocalStorage('showTestnets', false)
+
+ return (
+
+ {trigger}
+
+ {content}
+
+
+ ) : (
+
+ )
+}
+
+export const UserPortfolio = () => {
+ const { isSm } = useBreakpoint('sm')
+ const { address } = useAccount()
+ const [view, setView] = useState(PortfolioView.Default)
+
+ const { data: ensName, isLoading: isENSNameLoading } = useEnsName({
+ chainId: ChainId.ETHEREUM,
+ address,
+ })
+
+ const { data: avatar } = useEnsAvatar({
+ name: ensName || undefined,
+ chainId: ChainId.ETHEREUM,
+ })
+
+ const content = useMemo(() => {
+ switch (view) {
+ case PortfolioView.Settings:
+ return
+ {avatar ? (
+ = ({
+ claimables,
+}) => (
+
+
+ {`Farms (${claimables.length})`}
+
+
+ {claimables.map(({ position, token }) => (
+
+
+ }
+ rightContent={
+
+
+ }
+ />
+ ))}
+
+
+)
diff --git a/apps/web/src/lib/wagmi/components/user-portfolio/portfolio-claimables/PortfolioFuroClaimables.tsx b/apps/web/src/lib/wagmi/components/user-portfolio/portfolio-claimables/PortfolioFuroClaimables.tsx
new file mode 100644
index 0000000000..4b51abd824
--- /dev/null
+++ b/apps/web/src/lib/wagmi/components/user-portfolio/portfolio-claimables/PortfolioFuroClaimables.tsx
@@ -0,0 +1,67 @@
+import { PortfolioFuroClaim } from '@sushiswap/graph-client/data-api'
+import {
+ AccordionContent,
+ AccordionItem,
+ AccordionTrigger,
+ FormattedNumber,
+} from '@sushiswap/ui'
+import { FC } from 'react'
+import React from 'react'
+import { ChainId } from 'sushi/chain'
+import { formatUSD } from 'sushi/format'
+import { PortfolioInfoRow } from '../PortfolioInfoRow'
+
+interface PortfolioFuroClaimablesProps {
+ claimables: PortfolioFuroClaim[]
+}
+
+export const PortfolioFuroClaimables: FC = ({
+ claimables,
+}) => (
+
+
+ {`Furo Streaming (${claimables.length})`}
+
+
+ {claimables.map(({ position, token }) => (
+
+
+ }
+ rightContent={
+
+
+ }
+ />
+ ))}
+
+
+)
diff --git a/apps/web/src/lib/wagmi/components/user-portfolio/portfolio-claimables/index.tsx b/apps/web/src/lib/wagmi/components/user-portfolio/portfolio-claimables/index.tsx
new file mode 100644
index 0000000000..3534d74363
--- /dev/null
+++ b/apps/web/src/lib/wagmi/components/user-portfolio/portfolio-claimables/index.tsx
@@ -0,0 +1,100 @@
+import {
+ PortfolioFarmClaim,
+ getPortfolioClaimables,
+} from '@sushiswap/graph-client/data-api'
+import { Accordion, SkeletonCircle, SkeletonText } from '@sushiswap/ui'
+import { useQuery } from '@tanstack/react-query'
+import React, { useMemo } from 'react'
+import { formatUSD } from 'sushi/format'
+import { Address } from 'viem'
+import { useAccount } from 'wagmi'
+import { PortfolioFarmClaimables } from './PortfolioFarmClaimables'
+import { PortfolioFuroClaimables } from './PortfolioFuroClaimables'
+
+function usePortfolioClaimables(
+ address: Address | undefined,
+ refetchInterval?: 600_000,
+) {
+ return useQuery({
+ queryKey: ['portfolio-claimables', address],
+ queryFn: async () => {
+ const id = address as string
+ const data = await getPortfolioClaimables({ id })
+ return data
+ },
+ enabled: !!address,
+ refetchInterval,
+ })
+}
+
+export const PortfolioClaimables = () => {
+ const { address } = useAccount()
+ const { data, isLoading } = usePortfolioClaimables(address)
+
+ const farmClaimables: PortfolioFarmClaim[] = useMemo(
+ () =>
+ data
+ ? [
+ ...data.v2PositionClaimables,
+ ...data.v3PositionClaimables,
+ ...data.smartPositionClaimables,
+ ]
+ : [],
+ [data],
+ )
+
+ return (
+ = ({
+ positions,
+}) => (
+
+
+ {`Smart Positions (${positions.length})`}
+
+
+ {positions.map((position) => (
+
+ 
+ 
+
+ }
+ leftContent={
+
+
+ }
+ rightContent={
+
+ {formatUSD(position.amountUSD)}
+
+ }
+ />
+ ))}
+
+
+)
diff --git a/apps/web/src/lib/wagmi/components/user-portfolio/portfolio-positions/PortfolioV2Positions.tsx b/apps/web/src/lib/wagmi/components/user-portfolio/portfolio-positions/PortfolioV2Positions.tsx
new file mode 100644
index 0000000000..ab0fbc4b5d
--- /dev/null
+++ b/apps/web/src/lib/wagmi/components/user-portfolio/portfolio-positions/PortfolioV2Positions.tsx
@@ -0,0 +1,63 @@
+import { PortfolioV2Position } from '@sushiswap/graph-client/data-api'
+import {
+ AccordionContent,
+ AccordionItem,
+ AccordionTrigger,
+ Currency,
+} from '@sushiswap/ui'
+import React, { FC } from 'react'
+import { ChainId, ChainKey } from 'sushi/chain'
+import { formatUSD } from 'sushi/format'
+import { PortfolioInfoRow } from '../PortfolioInfoRow'
+
+interface PortfolioV2PositionssProps {
+ positions: PortfolioV2Position[]
+}
+
+export const PortfolioV2Positions: FC = ({
+ positions,
+}) => (
+
+
+ {`V2 Positions (${positions.length})`}
+
+
+ {positions.map((position) => (
+
+
+
+
+ }
+ leftContent={
+
+
+ }
+ rightContent={
+
+ {formatUSD(position.amountUSD)}
+
+ }
+ />
+ ))}
+
+
+)
diff --git a/apps/web/src/lib/wagmi/components/user-portfolio/portfolio-positions/PortfolioV3Positions.tsx b/apps/web/src/lib/wagmi/components/user-portfolio/portfolio-positions/PortfolioV3Positions.tsx
new file mode 100644
index 0000000000..257e14a952
--- /dev/null
+++ b/apps/web/src/lib/wagmi/components/user-portfolio/portfolio-positions/PortfolioV3Positions.tsx
@@ -0,0 +1,105 @@
+import { PortfolioV3Position } from '@sushiswap/graph-client/data-api'
+import {
+ AccordionContent,
+ AccordionItem,
+ AccordionTrigger,
+ Currency,
+ classNames,
+} from '@sushiswap/ui'
+import { BagIcon } from '@sushiswap/ui/icons/BagIcon'
+import React, { FC } from 'react'
+import { ChainId, ChainKey } from 'sushi/chain'
+import { formatUSD } from 'sushi/format'
+import { PortfolioInfoRow } from '../PortfolioInfoRow'
+
+interface PortfolioV3PositionsProps {
+ positions: PortfolioV3Position[]
+}
+
+export const PortfolioV3Positions: FC = ({
+ positions,
+}) => (
+
+
+ {`V3 Positions (${positions.length})`}
+
+
+ {positions.map((position) => (
+
+
+
+
+ }
+ leftContent={
+
+
+ }
+ rightContent={
+
+
+ }
+ />
+ ))}
+
+
+)
diff --git a/apps/web/src/lib/wagmi/components/user-portfolio/portfolio-positions/index.tsx b/apps/web/src/lib/wagmi/components/user-portfolio/portfolio-positions/index.tsx
new file mode 100644
index 0000000000..151d64b43f
--- /dev/null
+++ b/apps/web/src/lib/wagmi/components/user-portfolio/portfolio-positions/index.tsx
@@ -0,0 +1,94 @@
+import { getPortfolioPositions } from '@sushiswap/graph-client/data-api'
+import { Accordion, SkeletonCircle, SkeletonText } from '@sushiswap/ui'
+import { useQuery } from '@tanstack/react-query'
+import React from 'react'
+import { formatUSD } from 'sushi/format'
+import { Address } from 'viem'
+import { useAccount } from 'wagmi'
+import { PortfolioALMPositions } from './PortfolioALMPositions'
+import { PortfolioV2Positions } from './PortfolioV2Positions'
+import { PortfolioV3Positions } from './PortfolioV3Positions'
+
+function usePortfolioPositions(
+ address: Address | undefined,
+ refetchInterval?: 600_000,
+) {
+ return useQuery({
+ queryKey: ['portfolio-positions', address],
+ queryFn: async () => {
+ const id = address as string
+ const data = await getPortfolioPositions({ id })
+ return data
+ },
+ enabled: !!address,
+ refetchInterval,
+ })
+}
+
+export const PortfolioPositions = () => {
+ const id = useAccount()
+ const { data, isLoading } = usePortfolioPositions(id.address)
+
+ return (
+ = ({
+ tokens,
+}) => (
+
+
+ }
+ leftContent={
+
+
+ {({ setCopied, isCopied }) => (
+
+
+ }
+ rightContent={
+
+
+ }
+ />
+ )
+}
diff --git a/apps/web/src/lib/wagmi/components/user-portfolio/portolio-history/PortfolioOtherTransaction.tsx b/apps/web/src/lib/wagmi/components/user-portfolio/portolio-history/PortfolioOtherTransaction.tsx
new file mode 100644
index 0000000000..de018c7995
--- /dev/null
+++ b/apps/web/src/lib/wagmi/components/user-portfolio/portolio-history/PortfolioOtherTransaction.tsx
@@ -0,0 +1,107 @@
+import { GlobeAltIcon, Square2StackIcon } from '@heroicons/react/24/outline'
+import { PortfolioTransaction } from '@sushiswap/graph-client/data-api'
+import { ClipboardController, FormattedNumber, IconButton } from '@sushiswap/ui'
+import { SushiLiteIcon } from '@sushiswap/ui/icons/SushiLiteIcon'
+import { format, fromUnixTime } from 'date-fns'
+import React, { FC } from 'react'
+import { Chain, ChainId } from 'sushi/chain'
+import { shortenHash } from 'sushi/format'
+import { PortfolioInfoRow } from '../PortfolioInfoRow'
+
+export const PortfolioOtherTransaction: FC<{ tx: PortfolioTransaction }> = ({
+ tx,
+}) => {
+ return (
+
+
+ ) : (
+
+
+
+ All Pools
+
+
+ {isSteerChainId(chainId) ? (
+
+
+ Smart Pools
+
+
+ ) : (
+
+ Smart Pools
+
+ )}
+
+
+ {children}
+
+
+
+
@@ -30,7 +32,9 @@ export default function NotFound() {
icon={ChevronRightIcon}
iconPosition="end"
>
- See a list of our pools
+
+ See a list of our pools
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {children}
+
+
+
+ ← View all positions
+
+
+
+
+
+
+
+
+
+ ← Pool details
+
+
+ Available Strategies
+
+ Choose one of the following strategies:
+
+
+
+ {children}
+
+ )
+}
diff --git a/apps/web/src/app/(evm)/pool/[id]/smart/(overview)/loading.tsx b/apps/web/src/app/(evm)/[chainId]/pool/v3/[address]/smart/(overview)/loading.tsx
similarity index 100%
rename from apps/web/src/app/(evm)/pool/[id]/smart/(overview)/loading.tsx
rename to apps/web/src/app/(evm)/[chainId]/pool/v3/[address]/smart/(overview)/loading.tsx
diff --git a/apps/web/src/app/(evm)/[chainId]/pool/v3/[address]/smart/(overview)/page.tsx b/apps/web/src/app/(evm)/[chainId]/pool/v3/[address]/smart/(overview)/page.tsx
new file mode 100644
index 0000000000..53d70d8b12
--- /dev/null
+++ b/apps/web/src/app/(evm)/[chainId]/pool/v3/[address]/smart/(overview)/page.tsx
@@ -0,0 +1,35 @@
+import { getV3Pool, getVaults } from '@sushiswap/graph-client/data-api'
+import { unstable_cache } from 'next/cache'
+import { SteerCarousel } from 'src/ui/pool/Steer/SteerCarousel'
+import { ChainId } from 'sushi/chain'
+import notFound from '../../../../../not-found'
+
+export default async function VaultOverviewPage({
+ params,
+}: {
+ params: { chainId: string; address: string }
+}) {
+ const { chainId: _chainId, address } = params
+ const chainId = +_chainId as ChainId
+ const pool = await unstable_cache(
+ async () => getV3Pool({ chainId, address }),
+ ['pool', `${chainId}:${address}`],
+ {
+ revalidate: 60 * 15,
+ },
+ )()
+
+ const vaults = await unstable_cache(
+ async () => getVaults({ chainId, poolAddress: address }),
+ ['vaults', `${chainId}:${address}`],
+ {
+ revalidate: 60 * 15,
+ },
+ )()
+
+ if (!pool || !vaults) {
+ return notFound(chainId)
+ }
+
+ return
+
+ {vault.isDeprecated && (
+
+ ← Strategies
+
+
+
+ {children}
+
+
+ )
+}
diff --git a/apps/web/src/app/(evm)/pool/[id]/smart/[vaultId]/loading.tsx b/apps/web/src/app/(evm)/[chainId]/pool/v3/[address]/smart/[vault]/loading.tsx
similarity index 100%
rename from apps/web/src/app/(evm)/pool/[id]/smart/[vaultId]/loading.tsx
rename to apps/web/src/app/(evm)/[chainId]/pool/v3/[address]/smart/[vault]/loading.tsx
diff --git a/apps/web/src/app/(evm)/pool/[id]/smart/[vaultId]/page.tsx b/apps/web/src/app/(evm)/[chainId]/pool/v3/[address]/smart/[vault]/page.tsx
similarity index 60%
rename from apps/web/src/app/(evm)/pool/[id]/smart/[vaultId]/page.tsx
rename to apps/web/src/app/(evm)/[chainId]/pool/v3/[address]/smart/[vault]/page.tsx
index a2243c99dd..b6fc52a3af 100644
--- a/apps/web/src/app/(evm)/pool/[id]/smart/[vaultId]/page.tsx
+++ b/apps/web/src/app/(evm)/[chainId]/pool/v3/[address]/smart/[vault]/page.tsx
@@ -1,26 +1,24 @@
-import { getSteerVault } from '@sushiswap/client'
-import { SteerVault } from '@sushiswap/client'
import {
- SteerChainId,
- getTokenRatios,
- getVaultPositions,
-} from '@sushiswap/steer-sdk'
+ V3Pool,
+ VaultV1,
+ getV3Pool,
+ getVault,
+} from '@sushiswap/graph-client/data-api'
+import { getTokenRatios, getVaultPositions } from '@sushiswap/steer-sdk'
import { Container } from '@sushiswap/ui'
import formatDistanceStrict from 'date-fns/formatDistanceStrict'
import formatDistanceToNow from 'date-fns/formatDistanceToNow'
import { unstable_cache } from 'next/cache'
-import {
- SteerStrategyComponents,
- SteerStrategyGeneric,
-} from 'src/ui/pool/Steer/SteerStrategies'
+import { SteerStrategyGeneric } from 'src/ui/pool/Steer/SteerStrategies'
+import { SteerBaseStrategy } from 'src/ui/pool/Steer/SteerStrategies/SteerBaseStrategy'
import { publicClientConfig } from 'sushi/config'
import { Token } from 'sushi/currency'
-import { formatNumber, unsanitize } from 'sushi/format'
+import { formatNumber } from 'sushi/format'
import { tickToPrice } from 'sushi/pool/sushiswap-v3'
import { PublicClient, createPublicClient } from 'viem'
function getPriceExtremes(
- vault: SteerVault,
+ vault: VaultV1,
): SteerStrategyGeneric['priceExtremes'] {
const token0 = new Token(vault.token0)
const token1 = new Token(vault.token1)
@@ -39,7 +37,7 @@ function getPriceExtremes(
return { min: lowerPrice, max: upperPrice }
}
-function getAdjustment(vault: SteerVault): SteerStrategyGeneric['adjustment'] {
+function getAdjustment(vault: VaultV1): SteerStrategyGeneric['adjustment'] {
const next = formatDistanceToNow(
(vault.lastAdjustmentTimestamp + vault.adjustmentFrequency) * 1000,
{
@@ -51,9 +49,9 @@ function getAdjustment(vault: SteerVault): SteerStrategyGeneric['adjustment'] {
return { next, frequency }
}
-async function getGenerics(vault: SteerVault): Promise
+
+ )}
+ This vault is deprecated.
+
+ {"It will not accrue any fees and won't be readjusted."}
+
+
+
+
+
+ + Add Liquidity +
++ Create a new pool or create a liquidity position on an existing + pool. +
+
+
+ {children}
+
+
+
+
+ -
+
-
-
-
-
-
-
-
-
-
- - Analytics. -
-- Providing liquidity to a pool allows you to earn a percentage of - the pools traded volume as well as any extra rewards if the pool - is incentivized. -
-
-
-
-
-
- Pools
-
-
-
-
- Sushi Pay
-
-
-
-
- Sushi Vault
-
-
-
-
- {children}
-
-
-
-
-
-
-
-
-
- ),
- meta: {
- skeleton:
-
-
-
- {token.symbol}
-{token.name}
-
-
-
-
- ← Back
-
-
- )
-}
diff --git a/apps/web/src/app/(evm)/pool/[id]/(landing)/page.tsx b/apps/web/src/app/(evm)/pool/[id]/(landing)/page.tsx
deleted file mode 100644
index 5cb48140af..0000000000
--- a/apps/web/src/app/(evm)/pool/[id]/(landing)/page.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import { getPool } from '@sushiswap/client'
-import { unstable_cache } from 'next/cache'
-import { notFound } from 'next/navigation'
-
-import { PoolPageV2 } from 'src/ui/pool/PoolPageV2'
-import { PoolPageV3 } from 'src/ui/pool/PoolPageV3'
-import { unsanitize } from 'sushi'
-
-export default async function PoolPage({
- params,
-}: {
- params: { id: string; tab: 'add' | 'remove' | 'unstake' | 'stake' }
-}) {
- const poolId = unsanitize(params.id)
- const pool = await unstable_cache(
- async () => await getPool(poolId),
- ['pool', poolId],
- {
- revalidate: 60 * 15,
- },
- )()
-
- // Rockstar C&D
- if (!pool || pool.id === '42161:0x0a4f9962e24893a4a7567e52c1ce37d5482365de') {
- notFound()
- }
-
- if (pool.protocol === 'SUSHISWAP_V3') {
- return
-
-
-
-
-
-
-
-
-
-
-
- ← View all positions
-
-
-
-
-
-
-
- ← Pool details
-
-
- Available Strategies
-
- Choose one of the following strategies:
-
-
-
- {children}
-
-
- {' '}
-
-
-
- {vault.isDeprecated && (
-
- ← Strategies
-
-
-
- {children}
-
-
-
-
- )}
- This vault is deprecated.
-
- {"It will not accrue any fees and won't be readjusted."}
-
- */}
- {/*
*/}
- */}
- {/*
*/}
- {/**/}
- {/*
*/}
- {/* */}
- {/* */}
- {/* {token0 && !tokensLoading ? (*/}
- {/* */}
- {/* */}
- {/*
*/}
- {/* */}
- {/* {token0 && token1 ? (*/}
- {/* <>*/}
- {/*
*/}
- {/* */} - {/* {token0.symbol}/{token1.symbol}*/} - {/*
*/} - {/**/} - {/* SushiSwap V3 • {feeAmount / 10000}%*/} - {/*
*/} - {/* */} - {/* ) : tokensLoading ? (*/} - {/* <>*/} - {/**/}
- {/* Network */}
- {/*
*/}
- {/* */}
- {/*
*/}
- {/* */}
- {/* Fee Tier */}
- {/*
*/}
- {/* {feeAmount / 10000}% Fee
*/}
- {/* */}
- {/* Pool Type */}
- {/*
*/}
- {/* Concentrated Liquidity
*/}
- {/* */}
- {/* Current Price */}
- {/* {!isInitialLoading && !pool ? (*/}
- {/* N/A*/}
- {/* ) : isInitialLoading ? (*/}
- {/*
*/}
- {/* */}
- {/* */}
- {/*
*/}
- {/* ) : null}*/}
- {/*
-
- )
-}
diff --git a/apps/web/src/app/(evm)/pool/loading.tsx b/apps/web/src/app/(evm)/pool/loading.tsx
deleted file mode 100644
index 75da76e366..0000000000
--- a/apps/web/src/app/(evm)/pool/loading.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import { Splash } from '@sushiswap/ui'
-import React from 'react'
-
-export default function Loading() {
- return
-
- - Something went wrong! -
-
-
-
-
- {children}
)
diff --git a/apps/web/src/app/(legal)/terms-of-service/layout.tsx b/apps/web/src/app/(legal)/terms-of-service/layout.tsx
index f626c01e2b..f0c5216b2e 100644
--- a/apps/web/src/app/(legal)/terms-of-service/layout.tsx
+++ b/apps/web/src/app/(legal)/terms-of-service/layout.tsx
@@ -9,7 +9,7 @@ export const metadata: Metadata = {
export default function Layout({ children }: { children: React.ReactNode }) {
return (
<>
- {children}
)
diff --git a/apps/web/src/app/_common/header-elements.ts b/apps/web/src/app/_common/header-elements.ts
index eb69745d1f..0360620aa4 100644
--- a/apps/web/src/app/_common/header-elements.ts
+++ b/apps/web/src/app/_common/header-elements.ts
@@ -1,14 +1,30 @@
-import type { NavigationElementDropdown } from '@sushiswap/ui'
+import {
+ type NavigationElement,
+ type NavigationElementDropdown,
+ NavigationElementType,
+} from '@sushiswap/ui'
+import { ChainId, ChainKey, isChainId } from 'sushi'
-export const EXPLORE_NAVIGATION_LINKS: NavigationElementDropdown['items'] = [
+export const EXPLORE_NAVIGATION_LINKS = (
+ chainId?: ChainId,
+): NavigationElementDropdown['items'] => [
{
title: 'Swap',
href: '/swap',
description: 'The easiest way to trade.',
},
+ {
+ title: 'Explore',
+ href: `/${
+ isChainId(Number(chainId)) ? ChainKey[chainId as ChainId] : 'ethereum'
+ }/explore/pools`,
+ description: 'Explore top pools.',
+ },
{
title: 'Pools',
- href: '/pools',
+ href: `/${
+ isChainId(Number(chainId)) ? ChainKey[chainId as ChainId] : 'ethereum'
+ }/pool`,
description: 'Earn fees by providing liquidity.',
},
// {
@@ -21,30 +37,56 @@ export const EXPLORE_NAVIGATION_LINKS: NavigationElementDropdown['items'] = [
href: '/stake',
description: 'Earn protocol fees by staking SUSHI.',
},
+]
+
+export const MORE_NAVIGATION_LINKS: NavigationElementDropdown['items'] = [
{
- title: 'Analytics',
- href: '/analytics',
- description: 'Find the best opportunities',
+ title: 'Pay',
+ href: 'https://pay.sushi.com',
+ description:
+ 'Stream or create a vesting schedule with any ERC20 to any wallet.',
},
{
- title: 'Blog',
- href: '/blog',
+ title: 'Bonds',
+ href: '/bonds',
description:
- 'Stay up to date with the latest product developments at Sushi.',
+ 'Buy discounted tokens with vesting to support projects in a sustainable manner.',
},
+]
+
+export const headerElements = (chainId?: ChainId): NavigationElement[] => [
{
- title: 'Academy',
- href: '/academy',
- description: 'Everything you need to get up to speed with DeFi.',
+ title: 'Explore',
+ items: EXPLORE_NAVIGATION_LINKS(chainId),
+ show: 'mobile',
+ type: NavigationElementType.Dropdown,
},
{
- title: 'Partner with Sushi',
- href: '/partner',
- description: 'Incentivize your token with Sushi rewards.',
+ title: 'Trade',
+ href: '/swap',
+ show: 'desktop',
+ type: NavigationElementType.Single,
},
{
- title: 'List enquiry',
- href: '/tokenlist-request',
- description: 'Get your token on our default token list.',
+ title: 'Explore',
+ href: `/${
+ isChainId(Number(chainId)) ? ChainKey[chainId as ChainId] : 'ethereum'
+ }/explore/pools`,
+ show: 'desktop',
+ type: NavigationElementType.Single,
+ },
+ {
+ title: 'Pools',
+ href: `/${
+ isChainId(Number(chainId)) ? ChainKey[chainId as ChainId] : 'ethereum'
+ }/pool`,
+ show: 'desktop',
+ type: NavigationElementType.Single,
+ },
+ {
+ title: 'Stake',
+ href: '/stake',
+ show: 'desktop',
+ type: NavigationElementType.Single,
},
]
diff --git a/apps/web/src/app/partner/layout.tsx b/apps/web/src/app/partner/layout.tsx
index b7b5bddcd3..9d331dde4e 100644
--- a/apps/web/src/app/partner/layout.tsx
+++ b/apps/web/src/app/partner/layout.tsx
@@ -1,6 +1,6 @@
import { Navigation } from '@sushiswap/ui'
import { Metadata } from 'next'
-import { headerElements } from '../(evm)/_common/header-elements'
+import { headerElements } from '../_common/header-elements'
export const metadata: Metadata = {
title: 'Partner',
@@ -9,7 +9,7 @@ export const metadata: Metadata = {
export default function Layout({ children }: { children: React.ReactNode }) {
return (
<>
- {children}
)
diff --git a/apps/web/src/lib/graph.ts b/apps/web/src/lib/graph.ts
index 49aa029129..4935c61eb7 100644
--- a/apps/web/src/lib/graph.ts
+++ b/apps/web/src/lib/graph.ts
@@ -1,88 +1,11 @@
import { getRebases as _getRebases } from '@sushiswap/graph-client/bentobox'
-import { getSushiDayDatas } from '@sushiswap/graph-client/composite/sushi-day-datas'
-import { getSushiV2StakedUnstakedPositions } from '@sushiswap/graph-client/composite/sushi-v2-staked-unstaked-positions'
+import { getV3BasePoolsByToken } from '@sushiswap/graph-client/data-api'
import { getFuroTokens as _getFuroTokens } from '@sushiswap/graph-client/furo'
import { fetchMultichain } from '@sushiswap/graph-client/multichain'
-import {
- SushiV2Pools,
- getSushiV2Pool,
- getSushiV2Pools,
-} from '@sushiswap/graph-client/sushi-v2'
-import { getSushiV3PoolsByTokenPair } from '@sushiswap/graph-client/sushi-v3'
-import { AMM_SUPPORTED_CHAIN_IDS } from 'src/config'
-import {
- SUSHISWAP_V2_SUPPORTED_CHAIN_IDS,
- SushiSwapV2ChainId,
- isSushiSwapV2ChainId,
- isSushiSwapV3ChainId,
-} from 'sushi/config'
+import { isSushiSwapV3ChainId } from 'sushi/config'
import { getChainIdAddressFromId } from 'sushi/format'
-import { Address } from 'viem'
import { bentoBoxTokensSchema, furoTokensSchema } from './schema'
-export async function getUser(args: {
- id?: Address
- chainIds?: SushiSwapV2ChainId[]
-}) {
- if (!args.id) return []
-
- const { data } = await getSushiV2StakedUnstakedPositions({
- chainIds: args.chainIds || [...SUSHISWAP_V2_SUPPORTED_CHAIN_IDS],
- id: args.id.toLowerCase() as Address,
- })
-
- return data
-}
-
-export const getV2GraphPool = async (id: string) => {
- const split = getChainIdAddressFromId(id)
-
- if (!isSushiSwapV2ChainId(split.chainId)) throw Error('Invalid chain id')
-
- const pool = await getSushiV2Pool(
- {
- chainId: split.chainId,
- id: split.address,
- },
- {
- retries: 3,
- },
- )
-
- return pool
-}
-
-export const getV2GraphPools = async (ids: string[]) => {
- if (!ids.every((id) => id.includes(':'))) throw Error('Invalid pair ids')
-
- // Migrating to new format, graph-client uses the deprecated one
- const addresses = ids.map((id) => id.split(':')[1]) as Address[]
-
- // PairsByIds would be better, not implemented though...
- // Need to hack around
-
- const chainIds = Array.from(
- new Set(ids.map((id) => Number(id.split(':')[0]))),
- ) as SushiSwapV2ChainId[]
-
- const { data: pools } = await fetchMultichain({
- chainIds,
- fetch: getSushiV2Pools,
- variables: {
- where: {
- id_in: addresses,
- },
- },
- })
-
- return (
- pools
- .map((pool) => ({ ...pool, id: `${pool.chainId}:${pool.address}` }))
- // To prevent possible (although unlikely) collisions
- .filter((pool) => ids.includes(pool.id)) as SushiV2Pools
- )
-}
-
export const getV3PoolsByTokenPair = async (
tokenId0: string,
tokenId1: string,
@@ -98,7 +21,7 @@ export const getV3PoolsByTokenPair = async (
throw Error('Invalid chain id')
}
- const pools = await getSushiV3PoolsByTokenPair({
+ const pools = await getV3BasePoolsByToken({
chainId: chainId0,
token0: address0,
token1: address1,
@@ -168,44 +91,3 @@ export const getBentoBoxTokens = async (
throw new Error(error as string)
}
}
-
-export const getCharts = async (query?: { networks: string }) => {
- const chainIds = query?.networks
- ? JSON.parse(query.networks)
- : AMM_SUPPORTED_CHAIN_IDS
-
- const { data: daySnapshots } = await getSushiDayDatas({
- chainIds,
- })
-
- const dateSnapshotMap = new Map()
-
- for (const snapshot of daySnapshots) {
- const value = dateSnapshotMap.get(snapshot.date)
- dateSnapshotMap.set(
- snapshot.date,
- value
- ? [
- value[0] + Number(snapshot.liquidityUSD),
- value[1] + Number(snapshot.volumeUSD),
- ]
- : [Number(snapshot.liquidityUSD), Number(snapshot.volumeUSD)],
- )
- }
-
- // tvl x,y arrays
- const tvl: [number[], number[]] = [[], []]
-
- // vol x,y arrays
- const vol: [number[], number[]] = [[], []]
-
- dateSnapshotMap.forEach(([liquidity, volume], date) => {
- tvl[0].push(date)
- tvl[1].push(liquidity)
-
- vol[0].push(date)
- vol[1].push(volume)
- })
-
- return [tvl, vol]
-}
diff --git a/apps/web/src/lib/hooks/api/index.ts b/apps/web/src/lib/hooks/api/index.ts
index c1d0b781b7..b756e2fdf1 100644
--- a/apps/web/src/lib/hooks/api/index.ts
+++ b/apps/web/src/lib/hooks/api/index.ts
@@ -1,6 +1,7 @@
export * from './useCrossChainTrade'
-export * from './useGraphPool'
export * from './usePoolGraphData'
+export * from './userSmartPools'
export * from './useSkaleEuropaFaucet'
export * from './useSushiV2UserPositions'
-export * from './useV3PoolsWithFees'
+export * from './useV2Pool'
+export * from './useVault'
diff --git a/apps/web/src/lib/hooks/api/useGraphPool.ts b/apps/web/src/lib/hooks/api/useGraphPool.ts
deleted file mode 100644
index f0454d449c..0000000000
--- a/apps/web/src/lib/hooks/api/useGraphPool.ts
+++ /dev/null
@@ -1,81 +0,0 @@
-'use client'
-
-import { SushiV2Pool } from '@sushiswap/graph-client/sushi-v2'
-import { useQuery } from '@tanstack/react-query'
-import { useMemo } from 'react'
-import type { PoolId } from 'sushi'
-import { Amount } from 'sushi/currency'
-import { getTokensFromPool } from '../useTokensFromPool'
-
-export function getGraphPoolUrl(poolId: string) {
- return `/pools/api/graphPool/${poolId}`
-}
-
-export const useGraphPool = (pool: PoolId) => {
- const {
- data: graphPool,
- isLoading,
- error,
- } = useQuery
+
+ )
+}
diff --git a/apps/web/src/lib/wagmi/components/user-portfolio/PortfolioInfoRow.tsx b/apps/web/src/lib/wagmi/components/user-portfolio/PortfolioInfoRow.tsx
new file mode 100644
index 0000000000..99870d1da5
--- /dev/null
+++ b/apps/web/src/lib/wagmi/components/user-portfolio/PortfolioInfoRow.tsx
@@ -0,0 +1,60 @@
+import { Badge } from '@sushiswap/ui'
+import { NetworkIcon } from '@sushiswap/ui/icons/NetworkIcon'
+import Link from 'next/link'
+import { FC, ReactElement } from 'react'
+import { ChainId } from 'sushi/chain'
+
+interface PortfolioInfoRow {
+ id: string
+ chainId: ChainId
+ icon: ReactElement
+ leftContent: ReactElement
+ rightContent: ReactElement | null
+ href?: string
+ externalLink?: boolean
+}
+
+export const PortfolioInfoRow: FC
+
+
+
+
+ {connector ? (
+ connector.icon ? (
+
+
+
+ ) : (
+ {shortenAddress(address)}
+ )}
+ {ensName}
+
+ {shortenAddress(address)}
+
+
+ setView(PortfolioView.Settings)}
+ description="Settings"
+ name="Settings"
+ />
+
+ {({ setCopied, isCopied }) => (
+ setCopied(address!)}
+ description={isCopied ? 'Copied!' : 'Copy Address'}
+ name="Copy"
+ />
+ )}
+
+
+
+ disconnect()}
+ description="Disconnect"
+ name="Disconnect"
+ />
+
+
+ {Object.values(PortfolioTab).map((_tab) => (
+
+ ))}
+
+ {content}
+
+ <_PortfolioInfoRow {...params} />
+
+ )
+}
+
+const _PortfolioInfoRow: FC
+
+ )
+}
diff --git a/apps/web/src/lib/wagmi/components/user-portfolio/PortfolioSettingsView.tsx b/apps/web/src/lib/wagmi/components/user-portfolio/PortfolioSettingsView.tsx
new file mode 100644
index 0000000000..f2a0877799
--- /dev/null
+++ b/apps/web/src/lib/wagmi/components/user-portfolio/PortfolioSettingsView.tsx
@@ -0,0 +1,76 @@
+import { RadioGroup } from '@headlessui/react'
+import { ArrowLeftIcon } from '@heroicons/react/20/solid'
+import { MoonIcon, SunIcon } from '@heroicons/react/24/outline'
+import { useLocalStorage } from '@sushiswap/hooks'
+import { List } from '@sushiswap/ui'
+import { classNames } from '@sushiswap/ui'
+import { IconButton } from '@sushiswap/ui'
+import { Switch } from '@sushiswap/ui'
+import { useTheme } from 'next-themes'
+import React, { Dispatch, FC, Fragment, SetStateAction } from 'react'
+import { PortfolioView } from '.'
+
+interface PortfolioSettingsViewProps {
+ setView: Dispatch
+
+
+
+
+ {leftContent}
+
+
+ {rightContent}
+
+
+
+ )
+}
diff --git a/apps/web/src/lib/wagmi/components/user-portfolio/index.tsx b/apps/web/src/lib/wagmi/components/user-portfolio/index.tsx
new file mode 100644
index 0000000000..a042eef653
--- /dev/null
+++ b/apps/web/src/lib/wagmi/components/user-portfolio/index.tsx
@@ -0,0 +1,105 @@
+'use client'
+
+import {
+ Button,
+ Dialog,
+ DialogContent,
+ DialogTrigger,
+ Sheet,
+ SheetContent,
+ SheetTrigger,
+ cloudinaryFetchLoader,
+ useBreakpoint,
+} from '@sushiswap/ui'
+import { JazzIcon } from '@sushiswap/ui/icons/JazzIcon'
+import Image from 'next/image'
+import { FC, ReactNode, useMemo, useState } from 'react'
+import { ChainId, shortenAddress } from 'sushi'
+import { useAccount, useEnsAvatar, useEnsName } from 'wagmi'
+import { ConnectButton } from '../connect-button'
+import { PortfolioDefaultView } from './PortfolioDefaultView'
+import { PortfolioSettingsView } from './PortfolioSettingsView'
+
+export enum PortfolioView {
+ Default = 'Default',
+ Settings = 'Settings',
+}
+
+const ResponsivePortfolioWrapper: FC<{
+ content: ReactNode
+ trigger: ReactNode
+ isSm: boolean
+}> = ({ content, trigger, isSm }) => {
+ return isSm ? (
+
+
+
+ setView(PortfolioView.Default)}
+ icon={ArrowLeftIcon}
+ name="Back"
+ />
+
+ Settings
+
+ -
+
+ {Object.entries(map).map(([k, v], i) => (
+
+ {({ checked }) => (
+
+ )}
+
+ ))}
+
+
+ {token.name}
+
+
+ {`${
+ position.protocol === 'SUSHISWAP_V2'
+ ? 'V2'
+ : position.protocol === 'SUSHISWAP_V3'
+ ? 'V3'
+ : position.protocol
+ }-${position.swapFee * 100}%-${position.name.replace(
+ ' / ',
+ '-',
+ )}`}
+
+
+ {formatUSD(token.amountUSD)}
+
+
+
+
+ {token.name}
+
+
+ {position.name.toUpperCase()}
+
+
+ {formatUSD(token.amountUSD)}
+
+
+
+
+
+ {farmClaimables.length ? (
+
+ )}
+
+ )
+}
diff --git a/apps/web/src/lib/wagmi/components/user-portfolio/portfolio-positions/PortfolioALMPositions.tsx b/apps/web/src/lib/wagmi/components/user-portfolio/portfolio-positions/PortfolioALMPositions.tsx
new file mode 100644
index 0000000000..f3b754c666
--- /dev/null
+++ b/apps/web/src/lib/wagmi/components/user-portfolio/portfolio-positions/PortfolioALMPositions.tsx
@@ -0,0 +1,66 @@
+import { PortfolioSmartPosition } from '@sushiswap/graph-client/data-api'
+import {
+ AccordionContent,
+ AccordionItem,
+ AccordionTrigger,
+ Currency,
+} from '@sushiswap/ui'
+import React, { FC } from 'react'
+import { ChainId, ChainKey } from 'sushi/chain'
+import { formatUSD } from 'sushi/format'
+import { PortfolioInfoRow } from '../PortfolioInfoRow'
+
+interface PortfolioALMPositionsProps {
+ positions: PortfolioSmartPosition[]
+ href?: string
+}
+
+export const PortfolioALMPositions: FC
+
+ {isLoading ? (
+
+ Total Balance
+ {isLoading ? (
+
+
+ {formatUSD(data!.totalUSD)}
+
+ )}
+
+
+ ) : (
+
+
+ {Array.from({ length: 12 }).map((_, i) => (
+
+
+ ))}
+
+
+
+
+
+
+
+ {position.name}
+
+ {`V3-${
+ position.swapFee * 100
+ }%-${position.strategy}`}
+
+ {position.name}
+
+ V2-0.30%
+
+ {position.name}
+
+
+
+ {`V3-${
+ position.swapFee * 100
+ }%`}
+
+
+
+ {position.range === 'OUT_OF_RANGE'
+ ? 'Out of Range'
+ : position.range === 'IN_RANGE'
+ ? 'In Range'
+ : 'Unknown'}
+
+
+
+ {formatUSD(position.amountUSD)}
+
+
+
+
+
+ {data?.v2Positions.length ? (
+
+ )}
+
+ )
+}
diff --git a/apps/web/src/lib/wagmi/components/user-portfolio/portfolio-tokens/PortfolioTokensList.tsx b/apps/web/src/lib/wagmi/components/user-portfolio/portfolio-tokens/PortfolioTokensList.tsx
new file mode 100644
index 0000000000..5109f06d80
--- /dev/null
+++ b/apps/web/src/lib/wagmi/components/user-portfolio/portfolio-tokens/PortfolioTokensList.tsx
@@ -0,0 +1,66 @@
+import { PortfolioWalletToken } from '@sushiswap/graph-client/data-api'
+import { FormattedNumber, classNames } from '@sushiswap/ui'
+import React, { FC } from 'react'
+import { ChainId } from 'sushi/chain'
+import { formatPercent, formatUSD } from 'sushi/format'
+import { PortfolioInfoRow } from '../PortfolioInfoRow'
+
+interface PortfolioTokensListProps {
+ tokens: PortfolioWalletToken[]
+}
+
+export const PortfolioTokensList: FC
+
+ {isLoading ? (
+
+ Total Balance
+
+
+ {isLoading ? (
+
+
+ {formatUSD(data!.totalUSD)}
+
+ )}
+
+
+ ) : (
+
+
+ {Array.from({ length: 12 }).map((_, i) => (
+
+
+ ))}
+
+
+
+
+
+
+
+
+
+ {tokens.map((token) => {
+ return (
+
+
+ }
+ rightContent={
+
+
+ }
+ />
+ )
+ })}
+
+)
diff --git a/apps/web/src/lib/wagmi/components/user-portfolio/portfolio-tokens/index.tsx b/apps/web/src/lib/wagmi/components/user-portfolio/portfolio-tokens/index.tsx
new file mode 100644
index 0000000000..fe52e3272e
--- /dev/null
+++ b/apps/web/src/lib/wagmi/components/user-portfolio/portfolio-tokens/index.tsx
@@ -0,0 +1,92 @@
+import { getPortfolioWallet } from '@sushiswap/graph-client/data-api'
+import { SkeletonCircle, SkeletonText, classNames } from '@sushiswap/ui'
+import { useQuery } from '@tanstack/react-query'
+import React from 'react'
+import { formatPercent, formatUSD } from 'sushi/format'
+import { Address } from 'viem'
+import { useAccount } from 'wagmi'
+import { PortfolioTokensList } from './PortfolioTokensList'
+
+function usePortfolioWallet(
+ address: Address | undefined,
+ refetchInterval?: 600_000,
+) {
+ return useQuery({
+ queryKey: ['portfolio-wallet', address],
+ queryFn: async () => {
+ const id = address as string
+ const data = await getPortfolioWallet({ id })
+ return data
+ },
+ enabled: !!address,
+ refetchInterval,
+ })
+}
+
+export const PortfolioTokens = () => {
+ const { address } = useAccount()
+ const { data, isLoading } = usePortfolioWallet(address)
+
+ return (
+
+ {token.name ?? token.symbol}
+
+
+
+
+ {formatUSD(token.amountUSD)}
+
+ 0
+ ? 'text-green'
+ : token.price24hChange < 0
+ ? 'text-red'
+ : 'text-muted-foreground',
+ )}
+ >
+ {`${token.price24hChange > 0 ? '+' : ''}${formatPercent(
+ token.price24hChange,
+ )}`}
+
+
+
+ )
+}
diff --git a/apps/web/src/lib/wagmi/components/user-portfolio/portolio-history/PortfolioApproveTransaction.tsx b/apps/web/src/lib/wagmi/components/user-portfolio/portolio-history/PortfolioApproveTransaction.tsx
new file mode 100644
index 0000000000..5bc7b5e30a
--- /dev/null
+++ b/apps/web/src/lib/wagmi/components/user-portfolio/portolio-history/PortfolioApproveTransaction.tsx
@@ -0,0 +1,77 @@
+import { LockClosedIcon, Square2StackIcon } from '@heroicons/react/24/outline'
+import { PortfolioTransaction } from '@sushiswap/graph-client/data-api'
+import { ClipboardController, FormattedNumber, IconButton } from '@sushiswap/ui'
+import { format, fromUnixTime } from 'date-fns'
+import { FC } from 'react'
+import React from 'react'
+import { Chain, ChainId } from 'sushi/chain'
+import { shortenHash } from 'sushi/format'
+import { PortfolioInfoRow } from '../PortfolioInfoRow'
+
+export const PortfolioApproveTransaction: FC<{ tx: PortfolioTransaction }> = ({
+ tx,
+}) => {
+ return (
+
+
+
+ {isLoading ? (
+
+ Total Balance
+
+
+ {isLoading ? (
+ <>
+
+
+ {formatUSD(data!.totalUSD)}
+
+ 0
+ ? 'text-green'
+ : data!.amountUSD24Change < 0
+ ? 'text-red'
+ : 'text-muted-foreground',
+ )}
+ >
+ {`${data!.amountUSD24Change > 0 ? '+' : ''}${formatUSD(
+ data!.amountUSD24Change,
+ )} (${formatPercent(data!.percentageChange24h)})`}
+
+
+ )}
+
+ {Array.from({ length: 12 }).map((_, i) => (
+
+ ) : data?.tokens.length ? (
+
+
+ ))}
+
+
+
+
+
+
+
+ Approve
+
+
+ TxHash: {shortenHash(tx.txHash)}
+ {
+ e.preventDefault()
+ setCopied(tx.txHash)
+ }}
+ />
+
+ )}
+
+ {tx.approve.logoUrl ? (
+
+
+ 
+
+ ) : null}
+
+
+
+ {format(fromUnixTime(tx.timestamp), 'yyyy/MM/dd HH:mm')}
+
+
+
+ )
+ }
+ leftContent={
+
+ {tx.functionName}
+
+
+ TxHash: {shortenHash(tx.txHash)}
+ {
+ e.preventDefault()
+ setCopied(tx.txHash)
+ }}
+ />
+
+ )}
+
+ {tx.sends[0].logoUrl ? (
+
+ ) : tx.receives.length ? (
+
+ ![{tx.sends[0].symbol}]({tx.sends[0].logoUrl})
+
+ ) : null}
+
+
+ {'-'}
+
+ {tx.receives[0].logoUrl ? (
+
+ ) : (
+
+ )}
+
+ ![{tx.receives[0].symbol}]({tx.receives[0].logoUrl})
+
+ ) : null}
+
+
+
+ {format(fromUnixTime(tx.timestamp), 'yyyy/MM/dd HH:mm')}
+
+
+ Receive
+
+
+ TxHash: {shortenHash(tx.txHash)}
+ {
+ e.preventDefault()
+ setCopied(tx.txHash)
+ }}
+ />
+
+ )}
+
+ {tx.receives[0].logoUrl ? (
+
+ ) : (
+
+ )}
+
+
+
+ ) : null}
+
+
+
+ {format(fromUnixTime(tx.timestamp), 'yyyy/MM/dd HH:mm')}
+
+
+ Send
+
+
+ TxHash: {shortenHash(tx.txHash)}
+ {
+ e.preventDefault()
+ setCopied(tx.txHash)
+ }}
+ />
+
+ )}
+
+ {tx.sends[0].logoUrl ? (
+
+ ) : (
+
+ )}
+
+
+
+ ) : null}
+
+
+ {'-'}
+
+ {format(fromUnixTime(tx.timestamp), 'yyyy/MM/dd HH:mm')}
+
+
+
+ )
+}
diff --git a/apps/web/src/lib/wagmi/components/wagmi-header-components.tsx b/apps/web/src/lib/wagmi/components/wagmi-header-components.tsx
index 7bc559a161..455b975829 100644
--- a/apps/web/src/lib/wagmi/components/wagmi-header-components.tsx
+++ b/apps/web/src/lib/wagmi/components/wagmi-header-components.tsx
@@ -11,7 +11,7 @@ import {
import { useEffect } from 'react'
import { useAccount } from 'wagmi'
import { HeaderNetworkSelector } from './header-network-selector'
-import { UserProfile } from './user-profile'
+import { UserPortfolio } from './user-portfolio'
interface WagmiHeaderComponentsProps {
chainIds: ChainId[]
@@ -42,7 +42,7 @@ export const WagmiHeaderComponents: React.FC
+ {isLoading ? (
+
+
+ {Array.from({ length: 12 }).map((_, i) => (
+
+ ) : (
+ data?.map((tx) =>
+ tx.category === 'APPROVE' ? (
+
+
+ ))}
+
+
+
+
+
+
+
-
- ),
- meta: {
- skeleton:
-
-
-
- {token.symbol}
-{token.name}
-
-
-
-
-
-
- )
-}
diff --git a/apps/web/src/ui/analytics/token-page-header.tsx b/apps/web/src/ui/analytics/token-page-header.tsx
deleted file mode 100644
index 23f67ee4c6..0000000000
--- a/apps/web/src/ui/analytics/token-page-header.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-// 'use client'
-
-// import { Bundle, Token as GraphToken } from '@sushiswap/graph-client'
-// import { Button } from '@sushiswap/ui'
-// import { Chip } from '@sushiswap/ui'
-// import { Currency } from '@sushiswap/ui'
-// import { useRouter } from 'next/router'
-// import { FC } from 'react'
-// import { formatUSD } from 'sushi/format'
-// import useSWR from 'swr'
-// import { getAddress } from 'viem'
-
-// import { useTokenFromToken } from '../../lib/hooks/useTokenFromToken'
-
-// interface TokenHeader {
-// token: GraphToken
-// }
-// export const TokenHeader: FC
- Filter by
-
-
-
-
-
-
-
- {ANALYTICS_CHAIN_IDS.map((chainId) => (
-
- onClick(+currentValue as ChainId)
- }
- className="py-2 pl-8 pr-2"
- >
- {localValue.includes(chainId) ? (
-
-
- ))}
-
-
-
-
-
-
-
-
-//
-// )
-// }
diff --git a/apps/web/src/ui/analytics/token-page-information.tsx b/apps/web/src/ui/analytics/token-page-information.tsx
deleted file mode 100644
index b092859fd6..0000000000
--- a/apps/web/src/ui/analytics/token-page-information.tsx
+++ /dev/null
@@ -1,89 +0,0 @@
-// 'use client'
-
-// import { ExternalLinkIcon } from '@heroicons/react-v1/solid'
-// import { Token as GraphToken } from '@sushiswap/graph-client'
-// import { ClipboardController, LinkExternal } from '@sushiswap/ui'
-// import { Currency } from '@sushiswap/ui'
-// import {
-// Table,
-// TableBody,
-// TableCell,
-// TableHead,
-// TableHeader,
-// TableRow,
-// } from '@sushiswap/ui'
-// import { FC } from 'react'
-// import { Chain } from 'sushi/chain'
-// import { shortenAddress } from 'sushi/format'
-
-// import { useTokenFromToken } from '../../lib/hooks/useTokenFromToken'
-
-// interface TokenInformation {
-// token: GraphToken
-// }
-
-// export const TokenInformation: FC
-//
-//
-//
-// {_token.symbol}
-//
-//
-// {price.includes('NaN') ? '$0.00' : price}
-//
-//
-//
-//
-// {_token.name}
-//
-//
-//
-//
-//
-// )
-// }
diff --git a/apps/web/src/ui/analytics/token-page-pairs.tsx b/apps/web/src/ui/analytics/token-page-pairs.tsx
deleted file mode 100644
index 1852a9db27..0000000000
--- a/apps/web/src/ui/analytics/token-page-pairs.tsx
+++ /dev/null
@@ -1,140 +0,0 @@
-// 'use client'
-
-// import { usePools } from '@sushiswap/client/hooks'
-// import { Token as GraphToken } from '@sushiswap/graph-client'
-// import { LinkExternal, LinkInternal } from '@sushiswap/ui'
-// import { Currency } from '@sushiswap/ui'
-// import {
-// Table,
-// TableBody,
-// TableCell,
-// TableHead,
-// TableHeader,
-// TableRow,
-// } from '@sushiswap/ui'
-// import React, { FC } from 'react'
-// import chains from 'sushi/chain'
-// import { Native, Token } from 'sushi/currency'
-// import { formatPercent, formatUSD } from 'sushi/format'
-// import { useSWRConfig } from 'swr'
-
-// interface TokenPairs {
-// token: GraphToken
-// }
-
-// export const TokenPairs: FCToken Information
-//
-//
-//
-//
-// )
-// }
diff --git a/apps/web/src/ui/analytics/token-page-stats.tsx b/apps/web/src/ui/analytics/token-page-stats.tsx
deleted file mode 100644
index 38228a739a..0000000000
--- a/apps/web/src/ui/analytics/token-page-stats.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-// import { Token as GraphToken } from '@sushiswap/graph-client'
-// import { FC } from 'react'
-// import { formatUSD } from 'sushi/format'
-
-// interface TokenStatsProps {
-// token: GraphToken
-// }
-
-// export const TokenStats: FCTrending Pairs
-//
-//
-// )
-// }
diff --git a/apps/web/src/ui/analytics/token-table.tsx b/apps/web/src/ui/analytics/token-table.tsx
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/apps/web/src/ui/analytics/tvl-chart.tsx b/apps/web/src/ui/analytics/tvl-chart.tsx
deleted file mode 100644
index c48ca756b4..0000000000
--- a/apps/web/src/ui/analytics/tvl-chart.tsx
+++ /dev/null
@@ -1,276 +0,0 @@
-'use client'
-
-import {
- CardContent,
- CardDescription,
- CardHeader,
- CardTitle,
- SkeletonBox,
- SkeletonText,
- Toggle,
- classNames,
-} from '@sushiswap/ui'
-import format from 'date-fns/format'
-import { FC, useCallback, useMemo, useState } from 'react'
-import { formatUSD } from 'sushi/format'
-import tailwindConfig from 'tailwind.config.js'
-import resolveConfig from 'tailwindcss/resolveConfig'
-
-import ReactEchartsCore from 'echarts-for-react'
-import { EChartsOption } from 'echarts-for-react/lib/types'
-import 'echarts/lib/chart/bar'
-import 'echarts/lib/chart/line'
-import 'echarts/lib/component/tooltip'
-import 'echarts/lib/component/visualMap'
-import echarts from 'echarts/lib/echarts'
-import 'echarts/lib/visual/seriesColor'
-
-const tailwind = resolveConfig(tailwindConfig)
-
-enum TvlChartPeriod {
- Day = 0,
- Week = 1,
- Month = 2,
- Year = 3,
- All = 4,
-}
-
-const chartTimespans: Record
-//
-// Liquidity
-//-// {tvl.includes('NaN') ? '$0.00' : tvl} -//
-//
-//
-// Volume
-//-// {volume.includes('NaN') ? '$0.00' : volume} -//
-//
-//
-// Fees
-//-// {fees.includes('NaN') ? '$0.00' : fees} -//
-//
-//
-// Market Cap
-//-// {fees.includes('NaN') ? '$0.00' : fees} -//
-//
- ${formatUSD(
- params[0].value,
- )}
- ${
- date instanceof Date && !Number.isNaN(date?.getTime())
- ? format(date, 'dd MMM yyyy HH:mm')
- : ''
- }
-
`
- },
- borderWidth: 0,
- },
- toolbox: {
- show: false,
- },
- grid: {
- top: 0,
- left: 0,
- right: 0,
- bottom: 0,
- },
- dataZoom: {
- show: false,
- start: 0,
- end: 100,
- },
- visualMap: {
- show: false,
- // @ts-ignore
- color: [tailwind.theme.colors.blue['500']],
- },
- xAxis: [
- {
- show: false,
- type: 'category',
- boundaryGap: true,
- data: xData,
- },
- ],
- yAxis: [
- {
- show: false,
- type: 'value',
- scale: true,
- name: 'Volume',
- max: 'dataMax',
- min: 'dataMin',
- },
- ],
- series: [
- {
- name: 'Volume',
- type: 'line',
- xAxisIndex: 0,
- yAxisIndex: 0,
- itemStyle: {
- color: 'blue',
- normal: {
- barBorderRadius: 2,
- },
- },
- areaStyle: {
- // @ts-ignore
- color: tailwind.theme.colors.blue['500'],
- },
- animationEasing: 'elasticOut',
- animationDelayUpdate: (idx: number) => idx * 2,
- data: yData,
- },
- ],
- }),
- [onMouseOver, xData, yData],
- )
-
- return (
-
-
-
- Total value locked (TVL){' '}
-
-
-
-
- {yData?.length ? (
-
- {formatUSD(yData[yData.length - 1])}
-
- ) : (
-
-
- {xData?.length ? (
-
-
-
- {xData ? (
-
-
- )
-}
diff --git a/apps/web/src/ui/analytics/volume-chart.tsx b/apps/web/src/ui/analytics/volume-chart.tsx
deleted file mode 100644
index aafa38856c..0000000000
--- a/apps/web/src/ui/analytics/volume-chart.tsx
+++ /dev/null
@@ -1,268 +0,0 @@
-'use client'
-
-import {
- CardContent,
- CardDescription,
- CardHeader,
- CardTitle,
- SkeletonBox,
- SkeletonText,
- Toggle,
- classNames,
-} from '@sushiswap/ui'
-import format from 'date-fns/format'
-import ReactECharts from 'echarts-for-react'
-import { EChartsOption } from 'echarts-for-react/lib/types'
-import { FC, useCallback, useMemo, useState } from 'react'
-import { formatUSD } from 'sushi/format'
-import tailwindConfig from 'tailwind.config.js'
-import resolveConfig from 'tailwindcss/resolveConfig'
-
-const tailwind = resolveConfig(tailwindConfig)
-
-enum TvlChartPeriod {
- Day = 0,
- Week = 1,
- Month = 2,
- Year = 3,
- All = 4,
-}
-
-const chartTimespans: Record
- setChartPeriod(TvlChartPeriod.Week)}
- className={classNames(
- 'font-semibold text-sm',
- chartPeriod === TvlChartPeriod.Week
- ? 'text-blue'
- : 'text-slate-500',
- )}
- >
- 1W
-
- setChartPeriod(TvlChartPeriod.Month)}
- className={classNames(
- 'font-semibold text-sm',
- chartPeriod === TvlChartPeriod.Month
- ? 'text-blue'
- : 'text-slate-500',
- )}
- >
- 1M
-
- setChartPeriod(TvlChartPeriod.Year)}
- className={classNames(
- 'font-semibold text-sm',
- chartPeriod === TvlChartPeriod.Year
- ? 'text-blue'
- : 'text-slate-500',
- )}
- >
- 1Y
-
- setChartPeriod(TvlChartPeriod.All)}
- className={classNames(
- 'font-semibold text-sm',
- chartPeriod === TvlChartPeriod.All
- ? 'text-blue'
- : 'text-slate-500',
- )}
- >
- ALL
-
-
-
- {format(
- new Date(xData[xData.length - 1] * 1000),
- 'dd MMM yyyy HH:mm',
- )}
-
- ) : (
-
- ${formatUSD(
- params[0].value,
- )}
- ${
- date instanceof Date && !Number.isNaN(date?.getTime())
- ? format(date, 'dd MMM yyyy HH:mm')
- : ''
- }
-
`
- },
- borderWidth: 0,
- },
- toolbox: {
- show: false,
- },
- grid: {
- top: 0,
- left: 0,
- right: 0,
- bottom: 0,
- },
- dataZoom: {
- show: false,
- start: 0,
- end: 100,
- },
- visualMap: {
- show: false,
- // @ts-ignore
- color: [tailwind.theme.colors.blue['500']],
- },
- xAxis: [
- {
- show: false,
- type: 'category',
- boundaryGap: true,
- data: xData,
- },
- ],
- yAxis: [
- {
- show: false,
- type: 'value',
- scale: true,
- name: 'Volume',
- max: 'dataMax',
- min: 'dataMin',
- },
- ],
- series: [
- {
- name: 'Volume',
- type: 'bar',
- xAxisIndex: 0,
- yAxisIndex: 0,
- barWidth: '70%',
- itemStyle: {
- color: 'blue',
- normal: {
- barBorderRadius: 2,
- },
- },
- areaStyle: {
- // @ts-ignore
- color: tailwind.theme.colors.blue['500'],
- },
- animationEasing: 'elasticOut',
- animationDelayUpdate: (idx: number) => idx * 2,
- data: yData,
- },
- ],
- }),
- [onMouseOver, xData, yData],
- )
-
- return (
-
-
-
- Volume
-
-
-
-
- {yData?.length ? (
-
- {formatUSD(yData[yData.length - 1])}
-
- ) : (
-
-
- {xData?.length ? (
-
-
-
- {xData ? (
-
-
- )
-}
diff --git a/apps/web/src/ui/explore/global-stats-charts.tsx b/apps/web/src/ui/explore/global-stats-charts.tsx
new file mode 100644
index 0000000000..3314a9800e
--- /dev/null
+++ b/apps/web/src/ui/explore/global-stats-charts.tsx
@@ -0,0 +1,37 @@
+import { getAnalyticsDayBuckets } from '@sushiswap/graph-client/data-api'
+import { unstable_cache } from 'next/cache'
+import { FC, Suspense } from 'react'
+import { ChainId } from 'sushi/chain'
+import { GlobalStatsLoading } from './global-stats-loading'
+import { TVLChart } from './tvl-chart'
+import { VolumeChart } from './volume-chart'
+
+export const GlobalStatsCharts: FC<{ chainId: ChainId }> = ({ chainId }) => {
+ return (
+
- setChartPeriod(TvlChartPeriod.Week)}
- className={classNames(
- 'font-semibold text-sm',
- chartPeriod === TvlChartPeriod.Week
- ? 'text-blue'
- : 'text-slate-500',
- )}
- >
- 1W
-
- setChartPeriod(TvlChartPeriod.Month)}
- className={classNames(
- 'font-semibold text-sm',
- chartPeriod === TvlChartPeriod.Month
- ? 'text-blue'
- : 'text-slate-500',
- )}
- >
- 1M
-
- setChartPeriod(TvlChartPeriod.Year)}
- className={classNames(
- 'font-semibold text-sm',
- chartPeriod === TvlChartPeriod.Year
- ? 'text-blue'
- : 'text-slate-500',
- )}
- >
- 1Y
-
- setChartPeriod(TvlChartPeriod.All)}
- className={classNames(
- 'font-semibold text-sm',
- chartPeriod === TvlChartPeriod.All
- ? 'text-blue'
- : 'text-slate-500',
- )}
- >
- ALL
-
-
-
- {format(
- new Date(xData[xData.length - 1] * 1000),
- 'dd MMM yyyy HH:mm',
- )}
-
- ) : (
-
+
+ )
+}
diff --git a/apps/web/src/ui/explore/global-stats-loading.tsx b/apps/web/src/ui/explore/global-stats-loading.tsx
new file mode 100644
index 0000000000..aa58d40ca1
--- /dev/null
+++ b/apps/web/src/ui/explore/global-stats-loading.tsx
@@ -0,0 +1,24 @@
+import { SkeletonChart, SkeletonText } from '@sushiswap/ui'
+
+export const GlobalStatsLoading = () => {
+ return (
+
+
+ )
+}
diff --git a/apps/web/src/ui/explore/tvl-chart.tsx b/apps/web/src/ui/explore/tvl-chart.tsx
new file mode 100644
index 0000000000..c6ac7ea006
--- /dev/null
+++ b/apps/web/src/ui/explore/tvl-chart.tsx
@@ -0,0 +1,220 @@
+'use client'
+
+import { AnalyticsDayBuckets } from '@sushiswap/graph-client/data-api'
+import format from 'date-fns/format'
+import ReactEcharts from 'echarts-for-react'
+import { EChartsOption } from 'echarts-for-react/lib/types'
+import echarts from 'echarts/lib/echarts'
+import { useTheme } from 'next-themes'
+import { FC, useCallback, useMemo } from 'react'
+import { formatUSD } from 'sushi/format'
+
+export const TVLChart: FC<{ data: AnalyticsDayBuckets }> = ({ data }) => {
+ const { resolvedTheme } = useTheme()
+
+ const [v2, v3, combinedTVL, currentDate] = useMemo(() => {
+ const xData = (data.v2.length > data.v3.length ? data.v2 : data.v3).map(
+ (data) => data.date * 1000,
+ )
+
+ const v2 = xData
+ .map((xData, i) => [xData, data.v2[i]?.liquidityUSD ?? 0])
+ .reverse()
+ const v3 = xData
+ .map((xData, i) => [xData, data.v3[i]?.liquidityUSD ?? 0])
+ .reverse()
+ const combinedTVL = v2[v2.length - 1][1] + v3[v3.length - 1][1]
+
+ const currentDate = xData[0]
+
+ return [v2, v3, combinedTVL, currentDate]
+ }, [data])
+
+ const zIndex = useMemo(() => {
+ const v2Sum = v2.reduce((sum, [_, value]) => sum + value, 0)
+ const v3Sum = v3.reduce((sum, [_, value]) => sum + value, 0)
+
+ if (v2Sum < v3Sum) {
+ return { v2: 2, v3: 1 }
+ } else {
+ return { v2: 1, v3: 2 }
+ }
+ }, [v2, v3])
+
+ const onMouseOver = useCallback((params: { data: number[] }[]) => {
+ const tvlNode = document.getElementById('hoveredTVL')
+ const v2TVLNode = document.getElementById('hoveredV2TVL')
+ const v3TVLNode = document.getElementById('hoveredV3TVL')
+ const dateNode = document.getElementById('hoveredTVLDate')
+
+ if (tvlNode)
+ tvlNode.innerHTML = formatUSD(params[0].data[1] + params[1].data[1])
+ if (dateNode)
+ dateNode.innerHTML = format(
+ new Date(params[0].data[0]),
+ 'dd MMM yyyy HH:mm aa',
+ )
+ if (v2TVLNode)
+ v2TVLNode.innerHTML = params[0].data[1]
+ ? formatUSD(params[0].data[1])
+ : 'v2'
+ if (v3TVLNode)
+ v3TVLNode.innerHTML = params[1].data[1]
+ ? formatUSD(params[1].data[1])
+ : 'v3'
+ }, [])
+
+ const onMouseLeave = useCallback(() => {
+ const tvlNode = document.getElementById('hoveredTVL')
+ const v2TVLNode = document.getElementById('hoveredV2TVL')
+ const v3TVLNode = document.getElementById('hoveredV3TVL')
+ const dateNode = document.getElementById('hoveredTVLDate')
+
+ if (tvlNode) tvlNode.innerHTML = formatUSD(combinedTVL)
+ if (dateNode)
+ dateNode.innerHTML = format(new Date(currentDate), 'dd MMM yyyy HH:mm aa')
+ if (v2TVLNode) v2TVLNode.innerHTML = 'v2'
+ if (v3TVLNode) v3TVLNode.innerHTML = 'v3'
+ }, [combinedTVL, currentDate])
+
+ const DEFAULT_OPTION: EChartsOption = useMemo(
+ () => ({
+ tooltip: {
+ trigger: 'axis',
+ formatter: onMouseOver,
+ },
+ color: ['#3B7EF6', '#A755DD'],
+ grid: {
+ top: 0,
+ left: 0,
+ right: 0,
+ },
+ xAxis: [
+ {
+ type: 'time',
+ splitLine: {
+ show: false,
+ },
+ axisLine: {
+ show: false,
+ },
+ axisTick: {
+ show: false,
+ },
+ axisLabel: {
+ hideOverlap: true,
+ showMinLabel: true,
+ showMaxLabel: true,
+ color: resolvedTheme === 'dark' ? 'white' : 'black',
+ formatter: (value: number, index: number) => {
+ const date = new Date(value)
+ const label = `${date.toLocaleString('en-US', {
+ month: 'short',
+ })} ${date.getDate()}\n${date.getFullYear()}`
+
+ return index === 0
+ ? `{min|${label}}`
+ : value > v2?.[v2.length - 2]?.[0]
+ ? `{max|${label}}`
+ : label
+ },
+ padding: [0, 10, 0, 10],
+ rich: {
+ min: {
+ padding: [0, 10, 0, 50],
+ },
+ max: {
+ padding: [0, 50, 0, 10],
+ },
+ },
+ },
+ },
+ ],
+ yAxis: [
+ {
+ show: false,
+ },
+ ],
+ series: [
+ {
+ name: 'v2',
+ type: 'line',
+ stack: 'v2',
+ smooth: true,
+ lineStyle: {
+ width: 0,
+ },
+ showSymbol: false,
+ areaStyle: {
+ color: '#3B7EF6',
+ opacity: 1,
+ },
+ data: v2,
+ z: zIndex.v2,
+ },
+ {
+ name: 'v3',
+ type: 'line',
+ stack: 'v3',
+ smooth: true,
+ lineStyle: {
+ width: 0,
+ },
+ showSymbol: false,
+ areaStyle: {
+ color: '#A755DD',
+ opacity: 1,
+ },
+ data: v3,
+ z: zIndex.v3,
+ },
+ ],
+ }),
+ [onMouseOver, v2, v3, zIndex, resolvedTheme],
+ )
+
+ return (
+
+
+
+ TVL
+
+
+
+
+ Volume
+
+
+
+ )
+}
diff --git a/apps/web/src/ui/explore/volume-chart.tsx b/apps/web/src/ui/explore/volume-chart.tsx
new file mode 100644
index 0000000000..2af22b3ed1
--- /dev/null
+++ b/apps/web/src/ui/explore/volume-chart.tsx
@@ -0,0 +1,186 @@
+'use client'
+
+import { AnalyticsDayBuckets } from '@sushiswap/graph-client/data-api'
+import format from 'date-fns/format'
+import ReactECharts from 'echarts-for-react'
+import { EChartsOption } from 'echarts-for-react/lib/types'
+import echarts from 'echarts/lib/echarts'
+import { useTheme } from 'next-themes'
+import { FC, useCallback, useMemo } from 'react'
+import { formatUSD } from 'sushi/format'
+
+export const VolumeChart: FC<{ data: AnalyticsDayBuckets }> = ({ data }) => {
+ const { resolvedTheme } = useTheme()
+
+ const [v2, v3, totalVolume] = useMemo(() => {
+ const xData = (data.v2.length > data.v3.length ? data.v2 : data.v3)
+ .slice(0, 30)
+ .map((data) => data.date * 1000)
+
+ const v2 = xData
+ .map((xData, i) => [xData, data.v2[i]?.volumeUSD ?? 0])
+ .reverse()
+ const v3 = xData
+ .map((xData, i) => [xData, data.v3[i]?.volumeUSD ?? 0])
+ .reverse()
+ const totalVolume = xData.reduce(
+ (sum, _, i) => sum + v2[i][1] + v3[i][1],
+ 0,
+ )
+
+ return [v2, v3, totalVolume]
+ }, [data])
+
+ const onMouseOver = useCallback((params: { data: number[] }[]) => {
+ const volumeNode = document.getElementById('hoveredVolume')
+ const v2VolumeNode = document.getElementById('hoveredV2Volume')
+ const v3VolumeNode = document.getElementById('hoveredV3Volume')
+ const dateNode = document.getElementById('hoveredVolumeDate')
+
+ if (volumeNode)
+ volumeNode.innerHTML = formatUSD(params[0].data[1] + params[1].data[1])
+ if (dateNode)
+ dateNode.innerHTML = format(
+ new Date(params[0].data[0]),
+ 'dd MMM yyyy HH:mm aa',
+ )
+ if (v2VolumeNode)
+ v2VolumeNode.innerHTML = params[0].data[1]
+ ? formatUSD(params[0].data[1])
+ : 'v2'
+ if (v3VolumeNode)
+ v3VolumeNode.innerHTML = params[1].data[1]
+ ? formatUSD(params[1].data[1])
+ : 'v3'
+ }, [])
+
+ const onMouseLeave = useCallback(() => {
+ const volumeNode = document.getElementById('hoveredVolume')
+ const v2VolumeNode = document.getElementById('hoveredV2Volume')
+ const v3VolumeNode = document.getElementById('hoveredV3Volume')
+ const dateNode = document.getElementById('hoveredVolumeDate')
+
+ if (volumeNode) volumeNode.innerHTML = formatUSD(totalVolume)
+ if (dateNode) dateNode.innerHTML = 'Past month'
+ if (v2VolumeNode) v2VolumeNode.innerHTML = 'v2'
+ if (v3VolumeNode) v3VolumeNode.innerHTML = 'v3'
+ }, [totalVolume])
+
+ const DEFAULT_OPTION: EChartsOption = useMemo(
+ () => ({
+ tooltip: {
+ trigger: 'axis',
+ formatter: onMouseOver,
+ },
+ grid: {
+ top: 0,
+ left: 0,
+ right: 0,
+ },
+ xAxis: [
+ {
+ type: 'time',
+ splitLine: {
+ show: false,
+ },
+ axisLine: {
+ show: false,
+ },
+ axisTick: {
+ show: false,
+ },
+ axisLabel: {
+ hideOverlap: true,
+ showMinLabel: true,
+ showMaxLabel: true,
+ color: resolvedTheme === 'dark' ? 'white' : 'black',
+ formatter: (value: number, index: number) => {
+ const label = format(new Date(value), 'MMM d')
+ return index === 0
+ ? `{min|${label}}`
+ : value > v2?.[v2.length - 2]?.[0]
+ ? `{max|${label}}`
+ : label
+ },
+ padding: [0, 10, 0, 10],
+ rich: {
+ min: {
+ padding: [0, 10, 0, 50],
+ },
+ max: {
+ padding: [0, 50, 0, 10],
+ },
+ },
+ },
+ },
+ ],
+ yAxis: [
+ {
+ show: false,
+ },
+ ],
+ series: [
+ {
+ name: 'v2',
+ type: 'bar',
+ stack: 'a',
+ data: v2,
+ itemStyle: { color: '#3B7EF6', barBorderRadius: [0, 0, 2, 2] },
+ },
+ {
+ name: 'v3',
+ type: 'bar',
+ stack: 'a',
+ data: v3,
+ itemStyle: { color: '#A755DD', barBorderRadius: [2, 2, 0, 0] },
+ },
+ ],
+ }),
+ [onMouseOver, resolvedTheme, v2, v3],
+ )
+
+ return (
+
+ TVL
+
+
+
+
+
+
+ {formatUSD(combinedTVL)}
+
+
+
+
+ {format(new Date(currentDate), 'MMM dd yyyy HH:mm aa')}
+
+
+
+
+
+ v2
+
+
+
+
+
+ v3
+
+
+
+
+
+ )
+}
diff --git a/apps/web/src/ui/pool/AddSectionLegacy.tsx b/apps/web/src/ui/pool/AddSectionLegacy.tsx
index 72033ad0d3..e045d876bf 100644
--- a/apps/web/src/ui/pool/AddSectionLegacy.tsx
+++ b/apps/web/src/ui/pool/AddSectionLegacy.tsx
@@ -1,6 +1,5 @@
'use client'
-import { Pool } from '@sushiswap/client'
import { useIsMounted } from '@sushiswap/hooks'
import { Button } from '@sushiswap/ui'
import { FC, useCallback, useMemo, useState } from 'react'
@@ -10,6 +9,7 @@ import { SushiSwapV2ChainId } from 'sushi/config'
import { tryParseAmount } from 'sushi/currency'
import { useTokensFromPool } from '../../lib/hooks'
+import { V2Pool } from '@sushiswap/graph-client/data-api'
import { getSushiSwapRouterContractConfig } from 'src/lib/wagmi/hooks/contracts/useSushiSwapRouter'
import {
SushiSwapV2PoolState,
@@ -20,7 +20,7 @@ import { CheckerProvider } from 'src/lib/wagmi/systems/Checker/Provider'
import { AddSectionReviewModalLegacy } from './AddSectionReviewModalLegacy'
import { AddSectionWidget } from './AddSectionWidget'
-export const AddSectionLegacy: FC<{ pool: Pool }> = ({ pool: _pool }) => {
+export const AddSectionLegacy: FC<{ pool: V2Pool }> = ({ pool: _pool }) => {
const chainId = _pool.chainId as SushiSwapV2ChainId
const isMounted = useIsMounted()
const { token0, token1 } = useTokensFromPool(_pool)
diff --git a/apps/web/src/ui/pool/AddSectionMyPosition.tsx b/apps/web/src/ui/pool/AddSectionMyPosition.tsx
index b4c07155b3..1dfde2befd 100644
--- a/apps/web/src/ui/pool/AddSectionMyPosition.tsx
+++ b/apps/web/src/ui/pool/AddSectionMyPosition.tsx
@@ -1,4 +1,3 @@
-import { Pool } from '@sushiswap/client'
import { classNames } from '@sushiswap/ui'
import { Currency as UICurrency } from '@sushiswap/ui'
import React, { FC } from 'react'
@@ -6,10 +5,11 @@ import { incentiveRewardToToken } from 'src/lib/functions'
import { ChainId } from 'sushi/chain'
import { formatPercent } from 'sushi/format'
+import { V2Pool } from '@sushiswap/graph-client/data-api'
import { AddSectionMyPositionStaked } from './AddSectionMyPositionStaked'
import { AddSectionMyPositionUnstaked } from './AddSectionMyPositionUnstaked'
-export const AddSectionMyPosition: FC<{ pool: Pool }> = ({ pool }) => {
+export const AddSectionMyPosition: FC<{ pool: V2Pool }> = ({ pool }) => {
return (
+ Volume
+
+
+
+
+
+
+ {formatUSD(totalVolume)}
+
+
+
+
+ Past month
+
+
+
+
+
+ v2
+
+
+
+
+
+ v3
+
+
+
+
diff --git a/apps/web/src/ui/pool/AddSectionReviewModalLegacy.tsx b/apps/web/src/ui/pool/AddSectionReviewModalLegacy.tsx
index d5ead893fb..ea8059cd43 100644
--- a/apps/web/src/ui/pool/AddSectionReviewModalLegacy.tsx
+++ b/apps/web/src/ui/pool/AddSectionReviewModalLegacy.tsx
@@ -35,6 +35,7 @@ import {
} from 'src/lib/wagmi/hooks/utils/hooks/useTransactionDeadline'
import { useApproved } from 'src/lib/wagmi/systems/Checker/Provider'
import { gasMargin, slippageAmount } from 'sushi/calculate'
+import { ChainKey } from 'sushi/chain'
import { SushiSwapV2ChainId } from 'sushi/config'
import { BentoBoxChainId } from 'sushi/config'
import { Amount, Type } from 'sushi/currency'
@@ -496,7 +497,7 @@ export const AddSectionReviewModalLegacy: FC =
testId="incentivize-confirmation-modal"
successMessage="Successfully added liquidity"
buttonText="Go to pool"
- buttonLink={`/pools/${chainId}:${poolAddress}`}
+ buttonLink={`/${ChainKey[chainId]}/pools/v2/${poolAddress}`}
txHash={data}
/>
diff --git a/apps/web/src/ui/pool/AddSectionStake.tsx b/apps/web/src/ui/pool/AddSectionStake.tsx
index 3de1f9a94d..e0e4e9895e 100644
--- a/apps/web/src/ui/pool/AddSectionStake.tsx
+++ b/apps/web/src/ui/pool/AddSectionStake.tsx
@@ -1,18 +1,15 @@
'use client'
-import { ChefType, Pool } from '@sushiswap/client'
-import { usePool } from '@sushiswap/client/hooks'
import { useIsMounted } from '@sushiswap/hooks'
-import { Button } from '@sushiswap/ui'
-import { Dots } from '@sushiswap/ui'
+import { Button, Dots } from '@sushiswap/ui'
import { FC, useMemo, useState } from 'react'
import { APPROVE_TAG_STAKE } from 'src/lib/constants'
-import { useGraphPool } from 'src/lib/hooks'
+import { useV2Pool } from 'src/lib/hooks'
import { ChainId } from 'sushi/chain'
import { tryParseAmount } from 'sushi/currency'
import { ZERO } from 'sushi/math'
-import { useSWRConfig } from 'swr'
+import { V2Pool } from '@sushiswap/graph-client/data-api'
import { getMasterChefContractConfig } from 'src/lib/wagmi/hooks/master-chef/use-master-chef-contract'
import { useMasterChefDeposit } from 'src/lib/wagmi/hooks/master-chef/use-master-chef-deposit'
import { Checker } from 'src/lib/wagmi/systems/Checker'
@@ -20,22 +17,21 @@ import {
useApproved,
withCheckerRoot,
} from 'src/lib/wagmi/systems/Checker/Provider'
+import { ChefType } from 'sushi'
import { AddSectionStakeWidget } from './AddSectionStakeWidget'
interface AddSectionStakeProps {
- pool: Pool
+ pool: V2Pool
chefType: ChefType
title?: string
farmId: number
}
-export const AddSectionStake: FC<{ poolId: string; title?: string }> = ({
- poolId,
- title,
-}) => {
+export const AddSectionStake: FC<{
+ pool: V2Pool
+ title?: string
+}> = ({ pool, title }) => {
const isMounted = useIsMounted()
- const { data: pool } = usePool({ args: poolId, swrConfig: useSWRConfig() })
-
if (!pool) return <>
if (!pool?.incentives || pool.incentives.length === 0 || !isMounted)
@@ -57,7 +53,7 @@ const _AddSectionStake: FC = withCheckerRoot(
const [value, setValue] = useState('')
const {
data: { reserve1, reserve0, liquidityToken },
- } = useGraphPool(pool)
+ } = useV2Pool(pool)
const amounts = useMemo(() => {
return [tryParseAmount(value, liquidityToken)]
diff --git a/apps/web/src/ui/pool/ConcentratedLiquidityURLStateProvider.tsx b/apps/web/src/ui/pool/ConcentratedLiquidityURLStateProvider.tsx
index e59a813f22..6a30d047c3 100644
--- a/apps/web/src/ui/pool/ConcentratedLiquidityURLStateProvider.tsx
+++ b/apps/web/src/ui/pool/ConcentratedLiquidityURLStateProvider.tsx
@@ -10,22 +10,13 @@ import {
SushiSwapV3FeeAmount,
currencyFromShortCurrencyName,
isShortCurrencyName,
- isSushiSwapV3ChainId,
isWNativeSupported,
} from 'sushi/config'
import { Native, Token, Type } from 'sushi/currency'
import { isAddress } from 'viem'
-import { useChainId } from 'wagmi'
import { z } from 'zod'
export const queryParamsSchema = z.object({
- chainId: z.coerce
- .number()
- .int()
- .gte(0)
- .lte(2 ** 256)
- .optional()
- .transform((chainId) => chainId as SushiSwapV3ChainId | undefined),
fromCurrency: z.nullable(z.string()).transform((value) => value ?? 'NATIVE'),
toCurrency: z.nullable(z.string()).transform((value) => value ?? 'SUSHI'),
feeAmount: z.coerce
@@ -48,7 +39,6 @@ type State = {
token1: Type | undefined
tokensLoading: boolean
feeAmount: SushiSwapV3FeeAmount
- setNetwork(chainId: SushiSwapV3ChainId): void
setToken0(currency: Type): void
setToken1(currency: Type): void
setFeeAmount(feeAmount: SushiSwapV3FeeAmount): void
@@ -61,6 +51,7 @@ export const ConcentratedLiquidityUrlStateContext = createContext(
interface ConcentratedLiquidityURLStateProvider {
children: ReactNode | ((state: State) => ReactNode)
+ chainId: SushiSwapV3ChainId
supportedNetworks?: ChainId[]
}
@@ -83,43 +74,28 @@ const getTokenFromUrl = (
}
}
-const getChainIdFromUrl = (
- urlChainId: ChainId | undefined,
- connectedChainId: ChainId | undefined,
-): SushiSwapV3ChainId => {
- let chainId: SushiSwapV3ChainId = ChainId.ETHEREUM
- if (urlChainId && isSushiSwapV3ChainId(urlChainId)) {
- chainId = urlChainId
- } else if (connectedChainId && isSushiSwapV3ChainId(connectedChainId)) {
- chainId = connectedChainId
- }
- return chainId
-}
-
export const ConcentratedLiquidityURLStateProvider: FC<
ConcentratedLiquidityURLStateProvider
-> = ({ children, supportedNetworks = SUSHISWAP_V3_SUPPORTED_CHAIN_IDS }) => {
+> = ({
+ children,
+ chainId,
+ supportedNetworks = SUSHISWAP_V3_SUPPORTED_CHAIN_IDS,
+}) => {
const { push } = useRouter()
const pathname = usePathname()
const searchParams = useSearchParams()!
- const {
- chainId: chainIdFromUrl,
- fromCurrency,
- toCurrency,
- feeAmount,
- tokenId,
- } = queryParamsSchema.parse({
- chainId: searchParams.get('chainId'),
- fromCurrency: searchParams.get('fromCurrency'),
- toCurrency: searchParams.get('toCurrency'),
- feeAmount: searchParams.get('feeAmount'),
- tokenId: searchParams.get('tokenId'),
- })
- const chainId = useChainId()
+ const { fromCurrency, toCurrency, feeAmount, tokenId } =
+ queryParamsSchema.parse({
+ fromCurrency: searchParams.get('fromCurrency'),
+ toCurrency: searchParams.get('toCurrency'),
+ feeAmount: searchParams.get('feeAmount'),
+ tokenId: searchParams.get('tokenId'),
+ })
- const tmp = getChainIdFromUrl(chainIdFromUrl, chainId as ChainId)
- const _chainId = supportedNetworks?.includes(tmp) ? tmp : ChainId.ETHEREUM
+ const _chainId = supportedNetworks?.includes(chainId)
+ ? chainId
+ : ChainId.ETHEREUM
const { data: tokenFrom, isInitialLoading: isTokenFromLoading } =
useTokenWithCache({
@@ -156,29 +132,6 @@ export const ConcentratedLiquidityURLStateProvider: FC<
token1 = undefined
}
- const setNetwork = (chainId: SushiSwapV3ChainId) => {
- const fromCurrency =
- state.token0?.chainId === chainId
- ? state.token0.isNative
- ? 'NATIVE'
- : state.token0.wrapped.address
- : 'NATIVE'
- const toCurrency =
- state.token1?.chainId === chainId
- ? state.token1.isNative
- ? 'NATIVE'
- : state.token1.wrapped.address
- : undefined
-
- const _searchParams = new URLSearchParams(
- Array.from(searchParams.entries()),
- )
- _searchParams.set('chainId', chainId.toString())
- _searchParams.set('fromCurrency', fromCurrency)
- if (toCurrency) _searchParams.set('toCurrency', toCurrency)
- void push(`${pathname}?${_searchParams.toString()}`, { scroll: false })
- }
-
const setToken0 = (currency: Type) => {
const same = currency.wrapped.address === token1?.wrapped.address
const _fromCurrency = currency.isNative
@@ -187,7 +140,6 @@ export const ConcentratedLiquidityURLStateProvider: FC<
const _searchParams = new URLSearchParams(
Array.from(searchParams.entries()),
)
- _searchParams.set('chainId', currency.chainId.toString())
_searchParams.set('fromCurrency', _fromCurrency)
if (toCurrency) {
_searchParams.set(
@@ -205,7 +157,6 @@ export const ConcentratedLiquidityURLStateProvider: FC<
const _searchParams = new URLSearchParams(
Array.from(searchParams.entries()),
)
- _searchParams.set('chainId', currency.chainId.toString())
_searchParams.set('toCurrency', _toCurrency)
if (fromCurrency) {
_searchParams.set(
@@ -246,7 +197,6 @@ export const ConcentratedLiquidityURLStateProvider: FC<
tokensLoading: isTokenFromLoading || isTokenToLoading,
setToken0,
setToken1,
- setNetwork,
setFeeAmount,
switchTokens,
}
diff --git a/apps/web/src/ui/pool/ConcentratedPositionsTable/ConcentratedPositionsTable.tsx b/apps/web/src/ui/pool/ConcentratedPositionsTable/ConcentratedPositionsTable.tsx
index 4b1b316273..bd4fba27e0 100644
--- a/apps/web/src/ui/pool/ConcentratedPositionsTable/ConcentratedPositionsTable.tsx
+++ b/apps/web/src/ui/pool/ConcentratedPositionsTable/ConcentratedPositionsTable.tsx
@@ -15,10 +15,8 @@ import { ColumnDef, PaginationState, Row } from '@tanstack/react-table'
import React, { FC, ReactNode, useCallback, useMemo, useState } from 'react'
import { useConcentratedLiquidityPositions } from 'src/lib/wagmi/hooks/positions/hooks/useConcentratedLiquidityPositions'
import { ConcentratedLiquidityPositionWithV3Pool } from 'src/lib/wagmi/hooks/positions/types'
-import {
- SUSHISWAP_V3_SUPPORTED_CHAIN_IDS,
- SushiSwapV3ChainId,
-} from 'sushi/config'
+import { ChainId, ChainKey } from 'sushi'
+import { isSushiSwapV3ChainId } from 'sushi/config'
import { useAccount } from 'wagmi'
import { usePoolFilters } from '../PoolsFiltersProvider'
import {
@@ -38,8 +36,8 @@ const COLUMNS = [
const tableState = { sorting: [{ id: 'positionSize', desc: true }] }
interface ConcentratedPositionsTableProps {
- chainId?: SushiSwapV3ChainId
- poolId?: string
+ chainId: ChainId
+ poolAddress?: string
onRowClick?(row: ConcentratedLiquidityPositionWithV3Pool): void
hideNewSmartPositionButton?: boolean
hideNewPositionButton?: boolean
@@ -49,17 +47,16 @@ export const ConcentratedPositionsTable: FC =
({
chainId,
onRowClick,
- poolId,
+ poolAddress,
hideNewSmartPositionButton = true,
hideNewPositionButton = false,
}) => {
const { address } = useAccount()
- const { chainIds: filterChainIds, tokenSymbols } = usePoolFilters()
+ const { tokenSymbols } = usePoolFilters()
const [hide, setHide] = useState(true)
const chainIds = useMemo(() => {
- if (chainId) return [chainId] as SushiSwapV3ChainId[]
- return [...SUSHISWAP_V3_SUPPORTED_CHAIN_IDS]
+ return isSushiSwapV3ChainId(chainId) ? [chainId] : []
}, [chainId])
const [paginationState, setPaginationState] = useState({
@@ -70,17 +67,12 @@ export const ConcentratedPositionsTable: FC =
const { data: positions, isInitialLoading } =
useConcentratedLiquidityPositions({
account: address,
- chainIds: chainIds,
+ chainIds,
})
const _positions = useMemo(() => {
const _tokenSymbols = tokenSymbols?.filter((el) => el !== '') || []
return (positions || [])
- ?.filter((el) =>
- filterChainIds.includes(
- el.chainId as (typeof filterChainIds)[number],
- ),
- )
.filter((el) =>
_tokenSymbols.length > 0
? _tokenSymbols.some((symbol) => {
@@ -94,10 +86,12 @@ export const ConcentratedPositionsTable: FC =
.filter((el) => {
return (
(hide ? el.liquidity !== 0n : true) &&
- (poolId ? el.address.toLowerCase() === poolId.toLowerCase() : true)
+ (poolAddress
+ ? el.address.toLowerCase() === poolAddress.toLowerCase()
+ : true)
)
})
- }, [tokenSymbols, positions, filterChainIds, hide, poolId])
+ }, [tokenSymbols, positions, hide, poolAddress])
const rowRenderer = useCallback(
(
@@ -142,7 +136,7 @@ export const ConcentratedPositionsTable: FC =
{!hideNewSmartPositionButton ? (
)}
-
- []
+] as DisplayColumnDef[]
interface PositionsTableProps {
- onRowClick?(row: UserWithPool): void
- rowLink?(row: UserWithPool): string
+ chainId: ChainId
+ onRowClick?(row: V2Position): void
+ rowLink?(row: V2Position): string
}
const tableState = { sorting: [{ id: 'value', desc: true }] }
export const PositionsTable: FC = ({
+ chainId,
onRowClick,
rowLink,
}) => {
const { address } = useAccount()
- const { chainIds, tokenSymbols } = usePoolFilters()
const [paginationState, setPaginationState] = useState({
pageIndex: 0,
pageSize: 10,
})
- const { data: positions, isLoading } = useSushiV2UserPositions(
- {
- id: address!,
- chainIds: SUSHISWAP_V2_SUPPORTED_CHAIN_IDS,
- },
- !!address,
- )
+ const { data: positions, isLoading } = useSushiV2UserPositions({
+ user: address,
+ chainId,
+ })
const _positions = useMemo(() => {
if (!positions) return []
-
- const _tokenSymbols = tokenSymbols?.filter((el) => el !== '') || []
- const searchFiltered = positions.filter((el) =>
- _tokenSymbols.length > 0
- ? _tokenSymbols.some((symbol) => {
- return [el.pool?.token0.symbol, el.pool?.token1.symbol].includes(
- symbol.toUpperCase(),
- )
- })
- : true,
- )
-
- const chainFiltered = searchFiltered.filter((el) =>
- chainIds.includes(el.pool.chainId as (typeof chainIds)[number]),
- )
- return chainFiltered
- }, [positions, tokenSymbols, chainIds])
+ return positions
+ }, [positions])
const rowRenderer = useCallback(
- (row: Row, rowNode: ReactNode) => {
+ (row: Row, rowNode: ReactNode) => {
if (onRowClick)
return (
= ({
My Positions{' '}
- ({_positions.length})
+ ({positions?.length ?? 0})
diff --git a/apps/web/src/ui/pool/RemoveSectionLegacy.tsx b/apps/web/src/ui/pool/RemoveSectionLegacy.tsx
index 0a17bff32b..f1234df8b0 100644
--- a/apps/web/src/ui/pool/RemoveSectionLegacy.tsx
+++ b/apps/web/src/ui/pool/RemoveSectionLegacy.tsx
@@ -1,6 +1,5 @@
'use client'
-import { Pool } from '@sushiswap/client'
import {
SlippageToleranceStorageKey,
TTLStorageKey,
@@ -29,6 +28,7 @@ import { Amount, Native } from 'sushi/currency'
import { Percent } from 'sushi/math'
import { SendTransactionReturnType, encodeFunctionData } from 'viem'
+import { V2Pool } from '@sushiswap/graph-client/data-api'
import {
PermitInfo,
PermitType,
@@ -66,7 +66,7 @@ const REMOVE_V2_LIQUIDITY_PERMIT_INFO: PermitInfo = {
}
interface RemoveSectionLegacyProps {
- pool: Pool
+ pool: V2Pool
}
export const RemoveSectionLegacy: FC =
diff --git a/apps/web/src/ui/pool/RemoveSectionUnstake.tsx b/apps/web/src/ui/pool/RemoveSectionUnstake.tsx
index 211ac7bf47..8f1ba9c392 100644
--- a/apps/web/src/ui/pool/RemoveSectionUnstake.tsx
+++ b/apps/web/src/ui/pool/RemoveSectionUnstake.tsx
@@ -1,7 +1,5 @@
'use client'
-import { ChefType, Pool } from '@sushiswap/client'
-import { usePool } from '@sushiswap/client/hooks'
import { useIsMounted } from '@sushiswap/hooks'
import {
Card,
@@ -20,23 +18,23 @@ import { Dots } from '@sushiswap/ui'
import { FC, useMemo, useState } from 'react'
import { ChainId } from 'sushi/chain'
import { ZERO } from 'sushi/math'
-import { useSWRConfig } from 'swr'
+import { V2Pool } from '@sushiswap/graph-client/data-api'
import { useMasterChefWithdraw } from 'src/lib/wagmi/hooks/master-chef/use-master-chef-withdraw'
import { Checker } from 'src/lib/wagmi/systems/Checker'
import { withCheckerRoot } from 'src/lib/wagmi/systems/Checker/Provider'
+import { ChefType } from 'sushi'
import { usePoolPositionStaked } from './PoolPositionStakedProvider'
interface AddSectionStakeProps {
chainId: ChainId
- pool: Pool
+ pool: V2Pool
chefType: ChefType
farmId: number
}
-export const RemoveSectionUnstake: FC<{ poolId: string }> = ({ poolId }) => {
+export const RemoveSectionUnstake: FC<{ pool: V2Pool }> = ({ pool }) => {
const isMounted = useIsMounted()
- const { data: pool } = usePool({ args: poolId, swrConfig: useSWRConfig() })
if (!pool) return <>
@@ -45,7 +43,7 @@ export const RemoveSectionUnstake: FC<{ poolId: string }> = ({ poolId }) => {
return (
<_RemoveSectionUnstake
- chainId={pool.chainId as ChainId}
+ chainId={pool.chainId}
pool={pool}
chefType={pool.incentives[0].chefType}
farmId={Number(pool.incentives[0].pid)}
diff --git a/apps/web/src/ui/pool/RewardsSection.tsx b/apps/web/src/ui/pool/RewardsSection.tsx
index bda147dd27..b4f56f93d2 100644
--- a/apps/web/src/ui/pool/RewardsSection.tsx
+++ b/apps/web/src/ui/pool/RewardsSection.tsx
@@ -35,7 +35,7 @@ const COLUMNS = [
export const RewardsSection: FC = () => {
const { address } = useAccount()
- const { chainIds, tokenSymbols } = usePoolFilters()
+ const { tokenSymbols } = usePoolFilters()
const { data, isInitialLoading } = useAngleRewardsMultipleChains({
chainIds: ANGLE_SUPPORTED_CHAIN_IDS,
account: address,
@@ -58,28 +58,24 @@ export const RewardsSection: FC = () => {
const positions = useMemo(() => {
const _tokenSymbols = tokenSymbols?.filter((el) => el !== '') || []
- return (data ?? [])
- .filter((el) =>
- chainIds.includes(el.chainId as (typeof chainIds)[number]),
- )
- .flatMap((el) => {
- return Object.values(el.pools ?? {})
- .filter(
- (el) =>
- (el?.userBalanceToken0 ?? 0) + (el?.userBalanceToken1 ?? 0) > 0 ||
- Object.keys(el.rewardsPerToken).length > 0,
- )
- .filter((el) =>
- _tokenSymbols.length > 0
- ? _tokenSymbols.some((symbol) => {
- return [el.token0.symbol, el.token1.symbol].includes(
- symbol.toUpperCase(),
- )
- })
- : true,
- )
- })
- }, [chainIds, tokenSymbols, data])
+ return (data ?? []).flatMap((el) => {
+ return Object.values(el.pools ?? {})
+ .filter(
+ (el) =>
+ (el?.userBalanceToken0 ?? 0) + (el?.userBalanceToken1 ?? 0) > 0 ||
+ Object.keys(el.rewardsPerToken).length > 0,
+ )
+ .filter((el) =>
+ _tokenSymbols.length > 0
+ ? _tokenSymbols.some((symbol) => {
+ return [el.token0.symbol, el.token1.symbol].includes(
+ symbol.toUpperCase(),
+ )
+ })
+ : true,
+ )
+ })
+ }, [tokenSymbols, data])
const rowLink = useCallback((row: AngleRewardsPool) => {
return `/pool/${row.id}`
diff --git a/apps/web/src/ui/pool/SelectNetworkWidget.tsx b/apps/web/src/ui/pool/SelectNetworkWidget.tsx
index f6f1b72181..0647436ed6 100644
--- a/apps/web/src/ui/pool/SelectNetworkWidget.tsx
+++ b/apps/web/src/ui/pool/SelectNetworkWidget.tsx
@@ -6,7 +6,7 @@ import React, { FC, memo } from 'react'
import { ChainId, chainName } from 'sushi/chain'
interface SelectNetworkWidgetProps {
- networks: ChainId[]
+ networks: readonly ChainId[]
selectedNetwork: ChainId
onSelect(chainId: ChainId): void
title?: string
diff --git a/apps/web/src/ui/pool/SmartPoolsTable.tsx b/apps/web/src/ui/pool/SmartPoolsTable.tsx
index 374827f908..5485f61785 100644
--- a/apps/web/src/ui/pool/SmartPoolsTable.tsx
+++ b/apps/web/src/ui/pool/SmartPoolsTable.tsx
@@ -10,7 +10,7 @@ import {
MinusIcon,
PlusIcon,
} from '@heroicons/react/24/outline'
-import { SteerVaults } from '@sushiswap/client'
+import { SmartPoolsV1 } from '@sushiswap/graph-client/data-api'
import {
Badge,
Button,
@@ -45,17 +45,15 @@ import {
SortingState,
TableState,
} from '@tanstack/react-table'
-import React, { useMemo, useState } from 'react'
-import { Native, Token, unwrapToken } from 'sushi/currency'
-import { formatPercent, formatUSD } from 'sushi/format'
-
-import { useSteerVaults } from '@sushiswap/client/hooks'
import Link from 'next/link'
+import React, { FC, useMemo, useState } from 'react'
import { isAngleEnabledChainId } from 'sushi/config'
+import { Native, Token, unwrapToken } from 'sushi/currency'
+import { formatPercent, formatUSD } from 'sushi/format'
+import { SushiSwapProtocol } from 'sushi/types'
import { APRHoverCard } from './APRHoverCard'
import { ProtocolBadge } from './PoolNameCell'
import { usePoolFilters } from './PoolsFiltersProvider'
-import { SteerStrategyConfig } from './Steer/constants'
const COLUMNS = [
{
@@ -112,7 +110,7 @@ const COLUMNS = [
- {ProtocolBadge[original.pool.protocol]}
+ {ProtocolBadge[original.protocol as SushiSwapProtocol]}
@@ -131,7 +129,7 @@ const COLUMNS = [
- {original.pool.isIncentivized && (
+ {original.isIncentivized && (
@@ -194,7 +192,7 @@ const COLUMNS = [
-
@@ -206,21 +204,21 @@ const COLUMNS = [
{
id: 'liquidityUSD',
header: 'TVL',
- accessorFn: (row) => row.reserveUSD,
+ accessorFn: (row) => row.vaultLiquidityUSD,
cell: ({ row: { original } }) => (
- {formatUSD(original.pool.liquidityUSD).includes('NaN')
+ {formatUSD(original.liquidityUSD).includes('NaN')
? '$0.00'
- : formatUSD(original.pool.liquidityUSD)}
+ : formatUSD(original.liquidityUSD)}
- {formatUSD(original.reserveUSD).includes('NaN')
+ {formatUSD(original.vaultLiquidityUSD).includes('NaN')
? '$0.00'
- : formatUSD(original.reserveUSD)}
+ : formatUSD(original.vaultLiquidityUSD)}
@@ -237,11 +235,11 @@ const COLUMNS = [
{
id: 'fees1d',
header: 'Fees (24h)',
- accessorFn: (row) => row.pool.feesUSD1d,
+ accessorFn: (row) => row.feeUSD1d,
cell: (props) =>
- formatUSD(props.row.original.pool.feesUSD1d).includes('NaN')
+ formatUSD(props.row.original.feeUSD1d).includes('NaN')
? '$0.00'
- : formatUSD(props.row.original.pool.feesUSD1d),
+ : formatUSD(props.row.original.feeUSD1d),
meta: {
skeleton:
- {formatPercent(props.row.original.pool.totalApr1d)}
+ {formatPercent(props.row.original.feeAndIncentiveApr1d)}
@@ -269,11 +264,20 @@ const COLUMNS = [
- {formatPercent(totalAPR / 100)}
+ {formatPercent(props.row.original.stakedAndIncentiveApr1d)}
@@ -286,7 +290,7 @@ const COLUMNS = [
{
id: 'actions',
cell: ({ row }) =>
- row.original.pool.protocol === 'SUSHISWAP_V3' ? (
+ row.original.protocol === 'SUSHISWAP_V3' ? (
-
-
-
-
-
-
-
-
-
+
+ > }> = ({
- pool,
-}) => {
+const PoolPageV3: FC<{ pool: V3Pool }> = ({ pool }) => {
return (
> }> = ({
)
}
-const Pool: FC<{ pool: Awaited> }> = ({ pool }) => {
- const { id } = pool
- const [_chainId, address] = id.split(':')
- const chainId = +_chainId as SushiSwapV3ChainId
- const [granularity, setGranularity] = useState(Granularity.Day)
+const Pool: FC<{ pool: V3Pool }> = ({ pool }) => {
+ const { chainId, address } = pool
const { data: poolStats } = useConcentratedLiquidityPoolStats({
chainId,
address,
})
- const { data: cPool } = useConcentratedLiquidityPool({
- chainId,
- token0: poolStats?.token0,
- token1: poolStats?.token1,
- feeAmount: poolStats?.feeAmount,
- })
const { data: reserves, isLoading: isReservesLoading } =
useConcentratedLiquidityPoolReserves({
- pool: cPool,
+ pool,
chainId,
})
const fiatValues = useTokenAmountDollarValues({ chainId, amounts: reserves })
@@ -70,7 +54,7 @@ const Pool: FC<{ pool: Awaited> }> = ({ pool }) => {
-
- `/pool/${row.pool.id}`} />
+
+ `/${ChainKey[chainId]}/pool/v2/${row.pool.address}/add`
+ }
+ />
-
diff --git a/apps/web/src/ui/pool/PositionsTable.tsx b/apps/web/src/ui/pool/PositionsTable.tsx
index 22867e8ce3..dd1c67b332 100644
--- a/apps/web/src/ui/pool/PositionsTable.tsx
+++ b/apps/web/src/ui/pool/PositionsTable.tsx
@@ -1,13 +1,11 @@
-import { Card, CardHeader, CardTitle, DataTable } from '@sushiswap/ui'
-import { Slot } from '@sushiswap/ui'
+import { Card, CardHeader, CardTitle, DataTable, Slot } from '@sushiswap/ui'
import { DisplayColumnDef, PaginationState, Row } from '@tanstack/react-table'
-import React, { FC, ReactNode, useCallback, useMemo, useState } from 'react'
+import { FC, ReactNode, useCallback, useMemo, useState } from 'react'
import { useSushiV2UserPositions } from 'src/lib/hooks'
-import { SUSHISWAP_V2_SUPPORTED_CHAIN_IDS } from 'sushi/config'
-import type { UserWithPool } from 'src/app/(evm)/pool/api/user-with-pools/route'
+import { V2Position } from '@sushiswap/graph-client/data-api'
+import { ChainId } from 'sushi'
import { useAccount } from 'wagmi'
-import { usePoolFilters } from './PoolsFiltersProvider'
import { APR_COLUMN, NAME_COLUMN_POOL, VALUE_COLUMN } from './columns'
// ! Column types have to be checked manually
@@ -15,56 +13,39 @@ const COLUMNS = [
NAME_COLUMN_POOL,
VALUE_COLUMN,
APR_COLUMN,
-] as DisplayColumnDef
+
-
-
+
+
-
-
-
-
-
-
-
-
-
+
+
{pool.hasEnabledSteerVault && (
-
+
{`This pool has been activated to leverage our smart pool feature. Smart pools are designed to optimize the
allocation of liquidity within customized price ranges, thereby improving trading efficiency. They achieve
this by enhancing liquidity depth around the current price, which results in higher fee earnings for liquidity
@@ -79,25 +63,15 @@ const Pool: FC<{ pool: Awaited> }> = ({ pool }) => {
To create a smart pool position, click{' '}
here
)}
-
-
- = () => {
diff --git a/apps/web/src/ui/pool/PoolPositionProvider.tsx b/apps/web/src/ui/pool/PoolPositionProvider.tsx
index 808719a82e..1341d5fe7b 100644
--- a/apps/web/src/ui/pool/PoolPositionProvider.tsx
+++ b/apps/web/src/ui/pool/PoolPositionProvider.tsx
@@ -1,15 +1,15 @@
'use client'
+import { V2Pool, V3Pool } from '@sushiswap/graph-client/data-api'
import { FC, ReactNode, createContext, useContext, useMemo } from 'react'
import {
- useGraphPool,
+ getTokensFromPool,
useTokenAmountDollarValues,
useUnderlyingTokenBalanceFromPool,
} from 'src/lib/hooks'
import { useBalanceWeb3 } from 'src/lib/wagmi/hooks/balances/useBalanceWeb3'
import { ChainId } from 'sushi/chain'
import { Amount, Type } from 'sushi/currency'
-import type { PoolId } from 'sushi/types'
import { useAccount } from 'wagmi'
interface PoolPositionContext {
@@ -25,15 +25,34 @@ interface PoolPositionContext {
const Context = createContext(undefined)
export const PoolPositionProvider: FC<{
- pool: PoolId
+ pool: NonNullable
children: ReactNode
watch?: boolean
}> = ({ pool, children }) => {
const { address: account } = useAccount()
- const {
- data: { reserve0, reserve1, totalSupply, liquidityToken },
- } = useGraphPool(pool)
+ const { liquidityToken, reserve0, reserve1, totalSupply } = useMemo(() => {
+ if (!pool)
+ return {
+ token0: undefined,
+ token1: undefined,
+ liquidityToken: undefined,
+ }
+
+ const { token0, token1, liquidityToken } = getTokensFromPool(pool)
+
+ return {
+ liquidityToken,
+ reserve0:
+ token0 && pool ? Amount.fromRawAmount(token0, pool.reserve0) : null,
+ reserve1:
+ token1 && pool ? Amount.fromRawAmount(token1, pool.reserve1) : null,
+ totalSupply:
+ liquidityToken && pool
+ ? Amount.fromRawAmount(liquidityToken, pool.liquidity)
+ : null,
+ }
+ }, [pool])
const {
data: balance,
diff --git a/apps/web/src/ui/pool/PoolPositionRewardsProvider.tsx b/apps/web/src/ui/pool/PoolPositionRewardsProvider.tsx
index 0557938dc3..9701b8d14a 100644
--- a/apps/web/src/ui/pool/PoolPositionRewardsProvider.tsx
+++ b/apps/web/src/ui/pool/PoolPositionRewardsProvider.tsx
@@ -1,6 +1,5 @@
'use client'
-import { ChefType } from '@sushiswap/client'
import { FC, ReactNode, createContext, useContext, useMemo } from 'react'
import { incentiveRewardToToken } from 'src/lib/functions'
import { useTokenAmountDollarValues, useTokensFromPool } from 'src/lib/hooks'
@@ -11,7 +10,12 @@ import {
} from 'src/lib/wagmi/hooks/master-chef/use-rewarder'
import { ChainId } from 'sushi/chain'
import { Amount, Token } from 'sushi/currency'
-import type { Incentive, PoolBase, PoolWithIncentives } from 'sushi/types'
+import type {
+ ChefType,
+ Incentive,
+ PoolBase,
+ PoolWithIncentives,
+} from 'sushi/types'
import { useAccount } from 'wagmi'
interface PoolPositionRewardsContext {
diff --git a/apps/web/src/ui/pool/PoolPositionStakedDesktop.tsx b/apps/web/src/ui/pool/PoolPositionStakedDesktop.tsx
index 16bc5367ac..f4ba98a8c1 100644
--- a/apps/web/src/ui/pool/PoolPositionStakedDesktop.tsx
+++ b/apps/web/src/ui/pool/PoolPositionStakedDesktop.tsx
@@ -1,12 +1,12 @@
-import { Pool } from '@sushiswap/client'
import { CardCurrencyAmountItem, CardGroup, CardLabel } from '@sushiswap/ui'
import { FC } from 'react'
import { formatUSD } from 'sushi/format'
+import { V2Pool } from '@sushiswap/graph-client/data-api'
import { usePoolPositionStaked } from './PoolPositionStakedProvider'
interface PoolPositionStakedDesktopProps {
- pool: Pool
+ pool: V2Pool
}
export const PoolPositionStakedDesktop: FC = ({
diff --git a/apps/web/src/ui/pool/PoolPositionStakedProvider.tsx b/apps/web/src/ui/pool/PoolPositionStakedProvider.tsx
index 8b5c4db0d0..63e9a6faa4 100644
--- a/apps/web/src/ui/pool/PoolPositionStakedProvider.tsx
+++ b/apps/web/src/ui/pool/PoolPositionStakedProvider.tsx
@@ -1,14 +1,14 @@
'use client'
-import { ChefType } from '@sushiswap/client'
+import { V2Pool, V3Pool } from '@sushiswap/graph-client/data-api'
import { FC, ReactNode, createContext, useContext, useMemo } from 'react'
import {
- useGraphPool,
+ getTokensFromPool,
useTokenAmountDollarValues,
useUnderlyingTokenBalanceFromPool,
} from 'src/lib/hooks'
import { useMasterChef } from 'src/lib/wagmi/hooks/master-chef/use-master-chef'
-import type { PoolId, PoolWithIncentives } from 'sushi'
+import type { ChefType } from 'sushi'
import { ChainId } from 'sushi/chain'
import { Amount, Currency, Token } from 'sushi/currency'
@@ -27,7 +27,7 @@ interface PoolPositionStakedContext {
const Context = createContext(undefined)
interface PoolPositionStakedProviderProps {
- pool: PoolWithIncentives
+ pool: V2Pool | V3Pool
children: ReactNode
watch?: boolean
}
@@ -66,7 +66,7 @@ export const PoolPositionStakedProvider: FC =
}
interface _PoolPositionStakedProviderProps {
- pool: PoolId
+ pool: V2Pool | V3Pool
children: ReactNode
farmId: number
chefType: ChefType
@@ -80,9 +80,28 @@ const _PoolPositionStakedProvider: FC<_PoolPositionStakedProviderProps> = ({
chefType,
children,
}) => {
- const {
- data: { reserve0, reserve1, totalSupply, liquidityToken },
- } = useGraphPool(pool)
+ const { liquidityToken, reserve0, reserve1, totalSupply } = useMemo(() => {
+ if (!pool)
+ return {
+ token0: undefined,
+ token1: undefined,
+ liquidityToken: undefined,
+ }
+
+ const { token0, token1, liquidityToken } = getTokensFromPool(pool)
+
+ return {
+ liquidityToken,
+ reserve0:
+ token0 && pool ? Amount.fromRawAmount(token0, pool.reserve0) : null,
+ reserve1:
+ token1 && pool ? Amount.fromRawAmount(token1, pool.reserve1) : null,
+ totalSupply:
+ liquidityToken && pool
+ ? Amount.fromRawAmount(liquidityToken, pool.liquidity)
+ : null,
+ }
+ }, [pool])
const { balance, isLoading, isError, isWritePending, isWriteError } =
useMasterChef({
diff --git a/apps/web/src/ui/pool/PoolQuickHoverTooltip.tsx b/apps/web/src/ui/pool/PoolQuickHoverTooltip.tsx
index 5304660922..06a5aba86a 100644
--- a/apps/web/src/ui/pool/PoolQuickHoverTooltip.tsx
+++ b/apps/web/src/ui/pool/PoolQuickHoverTooltip.tsx
@@ -1,16 +1,18 @@
import { PlusIcon, UserCircleIcon } from '@heroicons/react-v1/solid'
-import { Pool, Protocol } from '@sushiswap/client'
+import { V2Pool, V3Pool } from '@sushiswap/graph-client/data-api'
+
import { LinkInternal } from '@sushiswap/ui'
import { Button } from '@sushiswap/ui'
import { Currency } from '@sushiswap/ui'
import { List } from '@sushiswap/ui'
import React, { FC } from 'react'
import { incentiveRewardToToken } from 'src/lib/functions'
+import { SushiSwapProtocol } from 'sushi'
import { ChainId } from 'sushi/chain'
import { formatNumber, formatPercent } from 'sushi/format'
interface PoolQuickHoverTooltipProps {
- row: Pool
+ row: V2Pool | V3Pool
}
export const PoolQuickHoverTooltip: FC = ({
@@ -36,7 +38,7 @@ export const PoolQuickHoverTooltip: FC = ({
- {row.protocol === Protocol.SUSHISWAP_V3 && (
+ {row.protocol === SushiSwapProtocol.SUSHISWAP_V3 && (
diff --git a/apps/web/src/ui/pool/PoolRewardDistributionsCard.tsx b/apps/web/src/ui/pool/PoolRewardDistributionsCard.tsx
index 7204397130..804effb795 100644
--- a/apps/web/src/ui/pool/PoolRewardDistributionsCard.tsx
+++ b/apps/web/src/ui/pool/PoolRewardDistributionsCard.tsx
@@ -1,6 +1,5 @@
'use client'
-import { Pool } from '@sushiswap/client'
import { useAngleRewards } from '@sushiswap/react-query'
import {
Button,
@@ -20,11 +19,12 @@ import { ChainId } from 'sushi/chain'
import { Native } from 'sushi/currency'
import { getAddress } from 'viem'
+import { V3Pool } from '@sushiswap/graph-client/data-api'
import { isAngleEnabledChainId } from 'sushi/config'
import { DistributionDataTable } from './DistributionDataTable'
interface PoolRewardDistributionsCardParams {
- pool: Pool
+ pool: V3Pool
}
export const PoolRewardDistributionsCard: FC<
diff --git a/apps/web/src/ui/pool/PoolRewards.tsx b/apps/web/src/ui/pool/PoolRewards.tsx
index 2492305fb0..b3e384aa4e 100644
--- a/apps/web/src/ui/pool/PoolRewards.tsx
+++ b/apps/web/src/ui/pool/PoolRewards.tsx
@@ -1,21 +1,22 @@
'use client'
-import { Pool } from '@sushiswap/client'
+import { V2Pool } from '@sushiswap/graph-client/data-api'
import {
+ Card,
CardContent,
CardCurrencyAmountItem,
+ CardDescription,
CardGroup,
CardHeader,
CardLabel,
CardTitle,
} from '@sushiswap/ui'
-import { Card, CardDescription } from '@sushiswap/ui'
-import React, { FC } from 'react'
+import { FC } from 'react'
import { incentiveRewardToToken } from 'src/lib/functions'
import { ChainId } from 'sushi/chain'
import { tryParseAmount } from 'sushi/currency'
-export const PoolRewards: FC<{ pool: Pool }> = ({ pool }) => {
+export const PoolRewards: FC<{ pool: V2Pool }> = ({ pool }) => {
const incentives = pool.incentives.filter(
(incentive) => incentive.rewardPerDay > 0,
)
diff --git a/apps/web/src/ui/pool/PoolStats.tsx b/apps/web/src/ui/pool/PoolStats.tsx
index a937817a39..ab6bf5f7ef 100644
--- a/apps/web/src/ui/pool/PoolStats.tsx
+++ b/apps/web/src/ui/pool/PoolStats.tsx
@@ -1,6 +1,6 @@
'use client'
-import { Pool } from '@sushiswap/client'
+import { V2Pool } from '@sushiswap/graph-client/data-api'
import {
Card,
CardContent,
@@ -9,22 +9,14 @@ import {
CardTitle,
classNames,
} from '@sushiswap/ui'
-import { SkeletonText } from '@sushiswap/ui'
import { FC } from 'react'
-import { usePoolGraphData } from 'src/lib/hooks'
-import { SushiSwapV2ChainId } from 'sushi/config'
import { formatNumber, formatPercent, formatUSD } from 'sushi/format'
interface PoolStats {
- pool: Pool
+ pool: V2Pool
}
export const PoolStats: FC = ({ pool }) => {
- const { data, isLoading } = usePoolGraphData({
- poolAddress: pool.address,
- chainId: pool.chainId as SushiSwapV2ChainId,
- })
-
return (
@@ -34,78 +26,70 @@ export const PoolStats: FC = ({ pool }) => {
Liquidity
- {isLoading ? (
- Volume (24h)
- {data ? (
+ {pool ? (
Fees (24h)
- {data ? (
+ {pool ? (
Transactions (24h)
- {data ? (
+ {pool ? (
>
+ let transactions
switch (opts.type) {
- case 'All':
- transactions = await fetchAll(poolId, chainId, opts)
+ case TransactionType.Burn:
+ transactions = await fetchBurns(poolId, chainId)
break
case TransactionType.Mint:
- transactions = await fetchMints(poolId, chainId, opts)
- break
- case TransactionType.Burn:
- transactions = await fetchBurns(poolId, chainId, opts)
+ transactions = await fetchMints(poolId, chainId)
break
case TransactionType.Swap:
- transactions = await fetchSwaps(poolId, chainId, opts)
+ transactions = await fetchSwaps(poolId, chainId)
break
default:
- transactions = await fetchAll(poolId, chainId, opts)
+ transactions = await fetchSwaps(poolId, chainId)
}
if (!transactions.length) return []
@@ -225,7 +154,9 @@ function useTransactionsV2(
return [...mints, ...burns, ...swaps]
.flatMap((subtransaction) => ({
- pool,
+ symbol0: pool.token0.symbol,
+ symbol1: pool.token1.symbol,
+ chainId,
txHash: transaction.id,
createdAtTimestamp: Number(transaction.createdAtTimestamp),
createdAtBlock: Number(transaction.createdAtBlock),
@@ -244,7 +175,7 @@ function useTransactionsV2(
type Transaction = NonNullable['data']>[0]
interface PoolTransactionsV2Props {
- pool: Pool | undefined | null
+ pool: V2Pool | undefined | null
poolId: string
}
@@ -322,7 +253,7 @@ const PoolTransactionsV2: FC = ({ pool, poolId }) => {
- Chain.from(row.pool.chainId)?.getTxUrl(row.txHash) ?? ''
+ Chain.from(row.chainId)?.getTxUrl(row.txHash) ?? ''
}
loading={isLoading}
columns={COLUMNS}
diff --git a/apps/web/src/ui/pool/PoolTransactionsV3.tsx b/apps/web/src/ui/pool/PoolTransactionsV3.tsx
index 0cd4aeb187..0ca2325476 100644
--- a/apps/web/src/ui/pool/PoolTransactionsV3.tsx
+++ b/apps/web/src/ui/pool/PoolTransactionsV3.tsx
@@ -1,17 +1,16 @@
'use client'
-import { Pool } from '@sushiswap/client'
import {
Card,
CardContent,
CardHeader,
CardTitle,
DataTable,
+ Toggle,
} from '@sushiswap/ui'
-import { Toggle } from '@sushiswap/ui'
import { useQuery } from '@tanstack/react-query'
import { PaginationState } from '@tanstack/react-table'
-import React, { FC, useMemo, useState } from 'react'
+import { FC, useMemo, useState } from 'react'
import { Chain, ChainId } from 'sushi/chain'
import { SushiSwapV3ChainId, isSushiSwapV3ChainId } from 'sushi/config'
@@ -20,8 +19,9 @@ import {
getSushiV3Collects,
getSushiV3Mints,
getSushiV3Swaps,
- getSushiV3Transactions,
-} from '@sushiswap/graph-client/sushi-v3'
+} from '@sushiswap/graph-client/data-api'
+
+import { V3Pool } from '@sushiswap/graph-client/data-api'
import {
TX_AMOUNT_IN_V3_COLUMN,
TX_AMOUNT_OUT_V3_COLUMN,
@@ -44,58 +44,10 @@ interface UseTransactionsV3Opts {
skip?: number
}
-const fetchAll = async (
- poolId: string,
- chainId: SushiSwapV3ChainId,
- opts: UseTransactionsV3Opts,
-) => {
- const transactions = await getSushiV3Transactions({
- chainId,
- first: opts.first,
- skip: opts?.skip ?? 0,
- where: {
- or: [
- {
- mints_: {
- pool: poolId.toLowerCase(),
- },
- },
- {
- burns_: {
- pool: poolId.toLowerCase(),
- },
- },
- {
- swaps_: {
- pool: poolId.toLowerCase(),
- },
- },
- {
- collects_: {
- pool: poolId.toLowerCase(),
- },
- },
- ],
- },
- orderBy: 'timestamp',
- orderDirection: 'desc',
- })
-
- return transactions
-}
-
-const fetchMints = async (
- poolId: string,
- chainId: SushiSwapV3ChainId,
- opts: UseTransactionsV3Opts,
-) => {
+const fetchMints = async (address: string, chainId: SushiSwapV3ChainId) => {
const mints = await getSushiV3Mints({
+ address,
chainId,
- first: opts.first,
- skip: opts?.skip ?? 0,
- where: { pool: poolId.toLowerCase() },
- orderBy: 'timestamp',
- orderDirection: 'desc',
})
return mints.map((mint) => ({
@@ -107,18 +59,10 @@ const fetchMints = async (
}))
}
-const fetchBurns = async (
- poolId: string,
- chainId: SushiSwapV3ChainId,
- opts: UseTransactionsV3Opts,
-) => {
+const fetchBurns = async (address: string, chainId: SushiSwapV3ChainId) => {
const burns = await getSushiV3Burns({
chainId,
- first: opts.first,
- skip: opts?.skip ?? 0,
- where: { pool: poolId.toLowerCase() },
- orderBy: 'timestamp',
- orderDirection: 'desc',
+ address,
})
return burns.map((burn) => ({
@@ -130,18 +74,10 @@ const fetchBurns = async (
}))
}
-const fetchSwaps = async (
- poolId: string,
- chainId: SushiSwapV3ChainId,
- opts: UseTransactionsV3Opts,
-) => {
+const fetchSwaps = async (address: string, chainId: SushiSwapV3ChainId) => {
const swaps = await getSushiV3Swaps({
chainId,
- first: opts.first,
- skip: opts?.skip ?? 0,
- where: { pool: poolId.toLowerCase() },
- orderBy: 'timestamp',
- orderDirection: 'desc',
+ address,
})
return swaps.map((swap) => ({
@@ -153,18 +89,10 @@ const fetchSwaps = async (
}))
}
-const fetchCollects = async (
- poolId: string,
- chainId: SushiSwapV3ChainId,
- opts: UseTransactionsV3Opts,
-) => {
+const fetchCollects = async (address: string, chainId: SushiSwapV3ChainId) => {
const collects = await getSushiV3Collects({
chainId,
- first: opts.first,
- skip: opts?.skip ?? 0,
- where: { pool: poolId.toLowerCase() },
- orderBy: 'timestamp',
- orderDirection: 'desc',
+ address,
})
return collects.map((collect) => ({
@@ -179,7 +107,7 @@ const fetchCollects = async (
// Will only support the last 1k txs
// The fact that there are different subtransactions aggregated under one transaction makes paging a bit difficult
function useTransactionsV3(
- pool: Pool | undefined | null,
+ pool: V3Pool | undefined | null,
poolId: string,
opts: UseTransactionsV3Opts,
) {
@@ -190,26 +118,23 @@ function useTransactionsV3(
if (!pool || !isSushiSwapV3ChainId(chainId)) return []
- let transactions: Awaited> = []
+ let transactions = []
switch (opts.type) {
- case 'All':
- transactions = await fetchAll(poolId, chainId, opts)
- break
case TransactionTypeV3.Mint:
- transactions = await fetchMints(poolId, chainId, opts)
+ transactions = await fetchMints(poolId, chainId)
break
case TransactionTypeV3.Burn:
- transactions = await fetchBurns(poolId, chainId, opts)
+ transactions = await fetchBurns(poolId, chainId)
break
case TransactionTypeV3.Swap:
- transactions = await fetchSwaps(poolId, chainId, opts)
+ transactions = await fetchSwaps(poolId, chainId)
break
case TransactionTypeV3.Collect:
- transactions = await fetchCollects(poolId, chainId, opts)
+ transactions = await fetchCollects(poolId, chainId)
break
default:
- transactions = await fetchAll(poolId, chainId, opts)
+ transactions = await fetchSwaps(poolId, chainId)
}
if (!transactions.length) return []
@@ -278,7 +203,7 @@ type TransactionV3 = NonNullable<
>[0]
interface PoolTransactionsV3Props {
- pool: Pool | undefined | null
+ pool: V3Pool | undefined | null
poolId: string
}
diff --git a/apps/web/src/ui/pool/PoolsFiltersProvider.tsx b/apps/web/src/ui/pool/PoolsFiltersProvider.tsx
index 624fc28c32..665bd6c499 100644
--- a/apps/web/src/ui/pool/PoolsFiltersProvider.tsx
+++ b/apps/web/src/ui/pool/PoolsFiltersProvider.tsx
@@ -1,6 +1,6 @@
'use client'
-import { Protocol, parseArgs } from '@sushiswap/client'
+import { parseArgs } from '@sushiswap/client'
import { useRouter } from 'next/navigation'
import {
Dispatch,
@@ -11,7 +11,7 @@ import {
useContext,
useMemo,
} from 'react'
-import { AMM_SUPPORTED_CHAIN_IDS, isSupportedChainId } from 'src/config'
+import { SushiSwapProtocol } from 'sushi'
import { z } from 'zod'
import { useTypedSearchParams } from '../../lib/hooks'
@@ -32,20 +32,11 @@ export const poolFiltersSchema = z.object({
tokenSymbols: z.coerce.string().transform((symbols) => {
return symbols.split(',').filter((symbol) => symbol !== '')
}),
- chainIds: z.coerce
- .string()
- .default(AMM_SUPPORTED_CHAIN_IDS.join(','))
- .transform((chainIds) =>
- chainIds !== null && chainIds !== ','
- ? chainIds.split(',').map((chainId) => Number(chainId))
- : AMM_SUPPORTED_CHAIN_IDS,
- )
- .transform((chainIds) => chainIds.filter(isSupportedChainId)),
protocols: z
.string()
.transform((protocols) =>
protocols !== null && protocols !== ','
- ? (protocols.split(',') as Protocol[])
+ ? (protocols.split(',') as SushiSwapProtocol[])
: [],
),
farmsOnly: z
@@ -60,20 +51,18 @@ export const PoolsFiltersProvider: FC = ({
children,
}) => {
const urlFilters = useTypedSearchParams(poolFiltersSchema.partial())
- const { tokenSymbols, chainIds, protocols, farmsOnly, smartPoolsOnly } =
- urlFilters
+ const { tokenSymbols, protocols, farmsOnly, smartPoolsOnly } = urlFilters
return (
({
tokenSymbols: tokenSymbols ? tokenSymbols : [],
- chainIds: chainIds ? chainIds : AMM_SUPPORTED_CHAIN_IDS,
protocols: protocols ? protocols : POOL_TYPES,
farmsOnly: farmsOnly ? farmsOnly : false,
smartPoolsOnly: smartPoolsOnly ? smartPoolsOnly : false,
}),
- [chainIds, farmsOnly, protocols, tokenSymbols, smartPoolsOnly],
+ [farmsOnly, protocols, tokenSymbols, smartPoolsOnly],
)}
>
{children}
diff --git a/apps/web/src/ui/pool/PoolsTable.tsx b/apps/web/src/ui/pool/PoolsTable.tsx
index 4f0be23ba9..4a110e5454 100644
--- a/apps/web/src/ui/pool/PoolsTable.tsx
+++ b/apps/web/src/ui/pool/PoolsTable.tsx
@@ -1,23 +1,26 @@
'use client'
+import { Slot } from '@radix-ui/react-slot'
+import { TopPools } from '@sushiswap/graph-client/data-api'
+
import { UploadIcon } from '@heroicons/react-v1/outline'
import { DownloadIcon } from '@heroicons/react-v1/solid'
-import { ArrowDownRightIcon } from '@heroicons/react/20/solid'
import {
+ ArrowDownRightIcon,
EllipsisHorizontalIcon,
GiftIcon,
LightBulbIcon,
MinusIcon,
PlusIcon,
} from '@heroicons/react/24/outline'
-import { Slot } from '@radix-ui/react-slot'
-import { GetPoolsArgs } from '@sushiswap/client'
import {
+ Badge,
Button,
Card,
CardHeader,
CardTitle,
Chip,
+ Currency,
DataTable,
DropdownMenu,
DropdownMenuContent,
@@ -27,51 +30,170 @@ import {
DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuTrigger,
- Loader,
SkeletonText,
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
} from '@sushiswap/ui'
+import { NetworkIcon } from '@sushiswap/ui/icons/NetworkIcon'
import { ColumnDef, Row, SortingState, TableState } from '@tanstack/react-table'
import Link from 'next/link'
import React, { FC, ReactNode, useCallback, useMemo, useState } from 'react'
-import InfiniteScroll from 'react-infinite-scroll-component'
-import { Native } from 'sushi/currency'
-import { useSWRConfig } from 'swr'
-
-import { usePoolCount, usePoolsInfinite } from '@sushiswap/client/hooks'
-import { PoolHasSteerVaults } from '@sushiswap/steer-sdk'
+import { ChainId, ChainKey } from 'sushi/chain'
import { isAngleEnabledChainId } from 'sushi/config'
-import {
- PoolBase,
- PoolHistory,
- PoolIfIncentivized,
- unnestPool,
-} from 'sushi/types'
+import { Native, Token } from 'sushi/currency'
+import { formatNumber, formatUSD } from 'sushi/format'
+import { SushiSwapProtocol } from 'sushi/types'
+import { ProtocolBadge } from './PoolNameCell'
import { usePoolFilters } from './PoolsFiltersProvider'
-import {
- APR_COLUMN,
- FEES_COLUMN,
- NAME_COLUMN_POOL,
- TVL_COLUMN,
- VOLUME_1D_COLUMN,
- VOLUME_1M_COLUMN,
- VOLUME_1W_COLUMN,
-} from './columns'
-
-type RequiredPool = PoolHasSteerVaults<
- PoolIfIncentivized>
->
+import { APR_COLUMN, TVL_COLUMN, VOLUME_1D_COLUMN } from './columns'
const COLUMNS = [
- NAME_COLUMN_POOL,
+ {
+ id: 'name',
+ header: 'Name',
+
+ cell: (props) => {
+ const [token0, token1] = useMemo(
+ () => [
+ new Token({
+ chainId: props.row.original.chainId,
+ address: props.row.original.token0Address,
+ decimals: 0,
+ }),
+ new Token({
+ chainId: props.row.original.chainId,
+ address: props.row.original.token1Address,
+ decimals: 0,
+ }),
+ ],
+ [props.row.original],
+ )
+
+ return (
+
- {row.original.token0.symbol} / {row.original.token1.symbol}
+ {row.original.name}
SushiSwap V3
@@ -97,7 +219,7 @@ const COLUMNS = [
onClick={(e) => e.stopPropagation()}
shallow={true}
className="flex items-center"
- href={`/pool/${row.original.id}`}
+ href={`/${row.original.chainId}/pool/v3/${row.original.address}`}
>
-
+
e.stopPropagation()}
shallow={true}
className="flex items-center"
- href={`/pool/${row.original.id}/smart`}
+ href={`/${row.original.chainId}/pool/v3/${row.original.address}/smart`}
>
-
-
@@ -124,24 +98,6 @@ const Pool: FC<{ pool: Awaited> }> = ({ pool }) => {
@@ -151,29 +107,16 @@ const Pool: FC<{ pool: Awaited> }> = ({ pool }) => {
Volume
{poolStats ? (
> }> = ({ pool }) => {
Fees
{poolStats ? (
> }> = ({ pool }) => {
)
diff --git a/apps/web/src/ui/pool/PoolPosition.tsx b/apps/web/src/ui/pool/PoolPosition.tsx
index 49a1fcae22..3824497c60 100644
--- a/apps/web/src/ui/pool/PoolPosition.tsx
+++ b/apps/web/src/ui/pool/PoolPosition.tsx
@@ -1,6 +1,5 @@
'use client'
-import { Pool } from '@sushiswap/client'
import {
Card,
CardContent,
@@ -11,6 +10,7 @@ import {
import { FC } from 'react'
import { formatUSD } from 'sushi/format'
+import { V2Pool } from '@sushiswap/graph-client/data-api'
import { SkeletonText } from '@sushiswap/ui'
import { ConnectButton } from 'src/lib/wagmi/components/connect-button'
import { useAccount } from 'wagmi'
@@ -20,7 +20,7 @@ import { PoolPositionStakedDesktop } from './PoolPositionStakedDesktop'
import { usePoolPositionStaked } from './PoolPositionStakedProvider'
interface PoolPositionProps {
- pool: Pool
+ pool: V2Pool
}
const PoolPositionDisconnected: FC = () => {
diff --git a/apps/web/src/ui/pool/PoolPositionDesktop.tsx b/apps/web/src/ui/pool/PoolPositionDesktop.tsx
index 858bbf361a..8506041e25 100644
--- a/apps/web/src/ui/pool/PoolPositionDesktop.tsx
+++ b/apps/web/src/ui/pool/PoolPositionDesktop.tsx
@@ -1,12 +1,12 @@
-import { Pool } from '@sushiswap/client'
import { CardCurrencyAmountItem, CardGroup, CardLabel } from '@sushiswap/ui'
import { FC } from 'react'
import { formatUSD } from 'sushi/format'
+import { V2Pool } from '@sushiswap/graph-client/data-api'
import { usePoolPosition } from './PoolPositionProvider'
interface PoolPositionProps {
- pool: Pool
+ pool: V2Pool
}
export const PoolPositionDesktop: FC
Statistics
-
- setGranularity(Granularity.Day)}
- >
- 24H
-
- setGranularity(Granularity.Week)}
- >
- 1W
-
-
- {formatUSD(
- granularity === Granularity.Week
- ? poolStats.volumeUSD1w
- : poolStats.volumeUSD1d ?? 0,
- )}{' '}
+ {formatUSD(poolStats.volumeUSD1d ?? 0)}{' '}
0
+ poolStats['volumeUSD1dChange'] > 0
? 'text-green'
: 'text-red',
)}
>
- (
- {poolStats[
- granularity === Granularity.Week
- ? 'volumeUSD1wChange'
- : 'volumeUSD1dChange'
- ].toFixed(2)}
+ ({poolStats['volumeUSD1dChange'].toFixed(2)}
%)
@@ -185,29 +128,16 @@ const Pool: FC<{ pool: Awaited
- {formatUSD(
- granularity === Granularity.Week
- ? poolStats.feesUSD1w
- : poolStats.feesUSD1d ?? 0,
- )}{' '}
+ {formatUSD(poolStats.feesUSD1d ?? 0)}{' '}
0
+ poolStats['feesUSD1dChange'] > 0
? 'text-green'
: 'text-red',
)}
>
- (
- {poolStats[
- granularity === Granularity.Week
- ? 'feesUSD1wChange'
- : 'feesUSD1dChange'
- ].toFixed(2)}
+ ({poolStats['feesUSD1dChange'].toFixed(2)}
%)
@@ -224,7 +154,7 @@ const Pool: FC<{ pool: Awaited
- {formatUSD(data.liquidityUSD ?? 0)}{' '}
+ {formatUSD(pool.liquidityUSD ?? 0)}{' '}
0 ? 'text-green' : 'text-red',
+ pool.liquidityUSD1dChange > 0 ? 'text-green' : 'text-red',
)}
>
- {data.liquidity1dChange > 0 ? '+' : '-'}
- {formatPercent(Math.abs(data.liquidity1dChange))}
+ {pool.liquidityUSD1dChange > 0 ? '+' : '-'}
+ {formatPercent(Math.abs(pool.liquidityUSD1dChange))}
) : null}
- {formatUSD(data.volume1d ?? 0)}{' '}
+ {formatUSD(pool.volumeUSD1d ?? 0)}{' '}
0 ? 'text-green' : 'text-red',
+ pool.volumeUSD1dChange > 0 ? 'text-green' : 'text-red',
)}
>
- {data.volume1dChange > 0 ? '+' : '-'}
- {formatPercent(Math.abs(data.volume1dChange))}
+ {pool.volumeUSD1dChange > 0 ? '+' : '-'}
+ {formatPercent(Math.abs(pool.volumeUSD1dChange))}
- ) : isLoading ? (
-
- {formatUSD(data.fees1d ?? 0)}{' '}
+ {formatUSD(pool.feesUSD1d ?? 0)}{' '}
0 ? 'text-green' : 'text-red',
+ pool.feesUSD1dChange > 0 ? 'text-green' : 'text-red',
)}
>
- {data.fees1dChange > 0 ? '+' : '-'}
- {formatPercent(Math.abs(data.fees1dChange))}
+ {pool.feesUSD1dChange > 0 ? '+' : '-'}
+ {formatPercent(Math.abs(pool.feesUSD1dChange))}
- ) : isLoading ? (
-
- {formatNumber(data.txCount1d).replace('.00', '')}{' '}
+ {formatNumber(pool.txCount1d).replace('.00', '')}{' '}
0 ? 'text-green' : 'text-red',
+ pool.txCount1dChange > 0 ? 'text-green' : 'text-red',
)}
>
- {data.txCount1dChange > 0 ? '+' : '-'}
- {formatPercent(Math.abs(data.txCount1dChange))}
+ {pool.txCount1dChange > 0 ? '+' : '-'}
+ {formatPercent(Math.abs(pool.txCount1dChange))}
- ) : isLoading ? (
-
+
+ )
+ },
+ size: 300,
+ meta: {
+ skeleton:
+ {token0 && token1 ? (
+
+
+
+ ) : null}
+
+
+
+ {props.row.original.name}
+
+
+
+
+
+
+
+ {
+ ProtocolBadge[
+ props.row.original.protocol as SushiSwapProtocol
+ ]
+ }
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {props.row.original.isIncentivized && (
+
+
+
+
+
+
+
+
+ )}
+ {props.row.original.isSmartPool && (
+
+
+
+
+
+
+
+
+ )}
+
+ Protocol version
+
+ {formatNumber(props.row.original.swapFee * 100)}%
+
+ Swap fee
+
+ 🧑🌾{' '}
+
+ Farm rewards available
+
+ 💡
+
+ Smart Pool available
+
- {!row.original.hasEnabledSteerVault
+ {!row.original.isSmartPool
? 'No Steer vaults available for this pool'
: `Smart pools optimize liquidity allocation within custom price ranges, enhancing trading efficiency by
providing deeper liquidity around the current price, increasing Liquidity Providers (LP) fee earnings.`}
@@ -167,18 +289,18 @@ const COLUMNS = [
onClick={(e) => e.stopPropagation()}
shallow={true}
className="flex items-center"
- href={`/pool/incentivize?chainId=${
+ href={`/${
row.original.chainId
- }&fromCurrency=${
- row.original.token0.address ===
+ }/pool/incentivize?fromCurrency=${
+ row.original.token0Address ===
Native.onChain(row.original.chainId).wrapped.address
? 'NATIVE'
- : row.original.token0.address
+ : row.original.token0Address
}&toCurrency=${
- row.original.token1.address ===
+ row.original.token1Address ===
Native.onChain(row.original.chainId).wrapped.address
? 'NATIVE'
- : row.original.token1.address
+ : row.original.token1Address
}&feeAmount=${row.original.swapFee * 10_000 * 100}`}
>
-
- }
- >
-
@@ -80,21 +72,18 @@ const _PositionQuickHoverTooltip: FC
@@ -108,7 +97,7 @@ const _PositionQuickHoverTooltip: FC
- {row.pool.incentives && pendingRewards.length > 0 && (
+ {pool.incentives && pendingRewards.length > 0 && (
<>
- {row.pool.incentives &&
+ {pool.incentives &&
stakedUnderlying0?.greaterThan(ZERO) &&
stakedUnderlying1?.greaterThan(ZERO) && (
diff --git a/apps/web/src/ui/pool/PositionsTab.tsx b/apps/web/src/ui/pool/PositionsTab.tsx
index 3c466694f6..245b66b373 100644
--- a/apps/web/src/ui/pool/PositionsTab.tsx
+++ b/apps/web/src/ui/pool/PositionsTab.tsx
@@ -9,8 +9,9 @@ import {
TabsList,
TabsTrigger,
} from '@sushiswap/ui'
-import React, { useState } from 'react'
+import React, { FC, useState } from 'react'
+import { ChainId, ChainKey } from 'sushi/chain'
import { ConcentratedPositionsTable } from './ConcentratedPositionsTable/ConcentratedPositionsTable'
import { PositionsTable } from './PositionsTable'
import { SmartPositionsTable } from './SmartPositionsTable'
@@ -52,7 +53,7 @@ const ITEMS: { id: string; value: string; children: React.ReactNode }[] = [
},
]
-export const PositionsTab = () => {
+export const PositionsTab: FC<{ chainId: ChainId }> = ({ chainId }) => {
const [tab, setTab] = useState('v3')
return (
@@ -86,13 +87,21 @@ export const PositionsTab = () => {
Protocol version
@@ -123,7 +121,7 @@ const COLUMNS = [
- {formatPercent(original.pool.swapFee)}
+ {formatPercent(original.swapFee)}
{SteerStrategyConfig[original.strategy].description}
+{original.description}