Skip to content

Commit

Permalink
Add fix for incorrect TVL
Browse files Browse the repository at this point in the history
  • Loading branch information
@ianlapham
ianlapham committed Sep 20, 2022
1 parent 668647f commit be78c8a
Show file tree
Hide file tree
Showing 11 changed files with 340 additions and 136 deletions.
123 changes: 68 additions & 55 deletions src/components/BarChart/alt.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import dayjs from 'dayjs'
import utc from 'dayjs/plugin/utc'
import useTheme from 'hooks/useTheme'
import { VolumeWindow } from 'types'
import { LoadingRows } from 'components/Loader'
dayjs.extend(utc)

const DEFAULT_HEIGHT = 300
Expand Down Expand Up @@ -86,63 +87,75 @@ const Chart = ({
{topLeft ?? null}
{topRight ?? null}
</RowBetween>
<ResponsiveContainer width="100%" height="100%">
<BarChart
width={500}
height={300}
data={data}
margin={{
top: 5,
right: 30,
left: 20,
bottom: 5,
}}
onMouseLeave={() => {
setLabel && setLabel(undefined)
setValue && setValue(undefined)
}}
>
<XAxis
dataKey="time"
axisLine={false}
tickLine={false}
tickFormatter={(time) => dayjs(time).format(activeWindow === VolumeWindow.monthly ? 'MMM' : 'DD')}
minTickGap={10}
/>
<Tooltip
cursor={{ fill: theme.bg2 }}
contentStyle={{ display: 'none' }}
formatter={(value: number, name: string, props: { payload: { time: string; value: number } }) => {
if (setValue && parsedValue !== props.payload.value) {
setValue(props.payload.value)
}
const formattedTime = dayjs(props.payload.time).format('MMM D')
const formattedTimeDaily = dayjs(props.payload.time).format('MMM D YYYY')
const formattedTimePlusWeek = dayjs(props.payload.time).add(1, 'week')
const formattedTimePlusMonth = dayjs(props.payload.time).add(1, 'month')

if (setLabel && label !== formattedTime) {
if (activeWindow === VolumeWindow.weekly) {
const isCurrent = formattedTimePlusWeek.isAfter(now)
setLabel(formattedTime + '-' + (isCurrent ? 'current' : formattedTimePlusWeek.format('MMM D, YYYY')))
} else if (activeWindow === VolumeWindow.monthly) {
const isCurrent = formattedTimePlusMonth.isAfter(now)
setLabel(formattedTime + '-' + (isCurrent ? 'current' : formattedTimePlusMonth.format('MMM D, YYYY')))
} else {
setLabel(formattedTimeDaily)
}
}
{data?.length === 0 ? (
<LoadingRows>
<div />
<div />
<div />
</LoadingRows>
) : (
<ResponsiveContainer width="100%" height="100%">
<BarChart
width={500}
height={300}
data={data}
margin={{
top: 5,
right: 30,
left: 20,
bottom: 5,
}}
/>
<Bar
dataKey="value"
fill={color}
shape={(props) => {
return <CustomBar height={props.height} width={props.width} x={props.x} y={props.y} fill={color} />
onMouseLeave={() => {
setLabel && setLabel(undefined)
setValue && setValue(undefined)
}}
/>
</BarChart>
</ResponsiveContainer>
>
<XAxis
dataKey="time"
axisLine={false}
tickLine={false}
tickFormatter={(time) => dayjs(time).format(activeWindow === VolumeWindow.monthly ? 'MMM' : 'DD')}
minTickGap={10}
/>
<Tooltip
cursor={{ fill: theme.bg2 }}
contentStyle={{ display: 'none' }}
formatter={(value: number, name: string, props: { payload: { time: string; value: number } }) => {
if (setValue && parsedValue !== props.payload.value) {
setValue(props.payload.value)
}
const formattedTime = dayjs(props.payload.time).format('MMM D')
const formattedTimeDaily = dayjs(props.payload.time).format('MMM D YYYY')
const formattedTimePlusWeek = dayjs(props.payload.time).add(1, 'week')
const formattedTimePlusMonth = dayjs(props.payload.time).add(1, 'month')

if (setLabel && label !== formattedTime) {
if (activeWindow === VolumeWindow.weekly) {
const isCurrent = formattedTimePlusWeek.isAfter(now)
setLabel(
formattedTime + '-' + (isCurrent ? 'current' : formattedTimePlusWeek.format('MMM D, YYYY'))
)
} else if (activeWindow === VolumeWindow.monthly) {
const isCurrent = formattedTimePlusMonth.isAfter(now)
setLabel(
formattedTime + '-' + (isCurrent ? 'current' : formattedTimePlusMonth.format('MMM D, YYYY'))
)
} else {
setLabel(formattedTimeDaily)
}
}
}}
/>
<Bar
dataKey="value"
fill={color}
shape={(props) => {
return <CustomBar height={props.height} width={props.width} x={props.x} y={props.y} fill={color} />
}}
/>
</BarChart>
</ResponsiveContainer>
)}
<RowBetween>
{bottomLeft ?? null}
{bottomRight ?? null}
Expand Down
95 changes: 52 additions & 43 deletions src/components/LineChart/alt.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import dayjs from 'dayjs'
import utc from 'dayjs/plugin/utc'
import useTheme from 'hooks/useTheme'
import { darken } from 'polished'
import { LoadingRows } from 'components/Loader'
dayjs.extend(utc)

const DEFAULT_HEIGHT = 300
Expand All @@ -17,7 +18,7 @@ const Wrapper = styled(Card)`
padding: 1rem;
padding-right: 2rem;
display: flex;
background-color: ${({ theme }) => theme.bg0}
background-color: ${({ theme }) => theme.bg0};
flex-direction: column;
> * {
font-size: 1rem;
Expand Down Expand Up @@ -62,49 +63,57 @@ const Chart = ({
{topLeft ?? null}
{topRight ?? null}
</RowBetween>
<ResponsiveContainer width="100%" height="100%">
<AreaChart
width={500}
height={300}
data={data}
margin={{
top: 5,
right: 30,
left: 20,
bottom: 5,
}}
onMouseLeave={() => {
setLabel && setLabel(undefined)
setValue && setValue(undefined)
}}
>
<defs>
<linearGradient id="gradient" x1="0" y1="0" x2="0" y2="1">
<stop offset="5%" stopColor={darken(0.36, color)} stopOpacity={0.5} />
<stop offset="100%" stopColor={color} stopOpacity={0} />
</linearGradient>
</defs>
<XAxis
dataKey="time"
axisLine={false}
tickLine={false}
tickFormatter={(time) => dayjs(time).format('DD')}
minTickGap={10}
/>
<Tooltip
cursor={{ stroke: theme.bg2 }}
contentStyle={{ display: 'none' }}
formatter={(value: number, name: string, props: { payload: { time: string; value: number } }) => {
if (setValue && parsedValue !== props.payload.value) {
setValue(props.payload.value)
}
const formattedTime = dayjs(props.payload.time).format('MMM D, YYYY')
if (setLabel && label !== formattedTime) setLabel(formattedTime)
{data?.length === 0 ? (
<LoadingRows>
<div />
<div />
<div />
</LoadingRows>
) : (
<ResponsiveContainer width="100%" height="100%">
<AreaChart
width={500}
height={300}
data={data}
margin={{
top: 5,
right: 30,
left: 20,
bottom: 5,
}}
/>
<Area dataKey="value" type="monotone" stroke={color} fill="url(#gradient)" strokeWidth={2} />
</AreaChart>
</ResponsiveContainer>
onMouseLeave={() => {
setLabel && setLabel(undefined)
setValue && setValue(undefined)
}}
>
<defs>
<linearGradient id="gradient" x1="0" y1="0" x2="0" y2="1">
<stop offset="5%" stopColor={darken(0.36, color)} stopOpacity={0.5} />
<stop offset="100%" stopColor={color} stopOpacity={0} />
</linearGradient>
</defs>
<XAxis
dataKey="time"
axisLine={false}
tickLine={false}
tickFormatter={(time) => dayjs(time).format('DD')}
minTickGap={10}
/>
<Tooltip
cursor={{ stroke: theme.bg2 }}
contentStyle={{ display: 'none' }}
formatter={(value: number, name: string, props: { payload: { time: string; value: number } }) => {
if (setValue && parsedValue !== props.payload.value) {
setValue(props.payload.value)
}
const formattedTime = dayjs(props.payload.time).format('MMM D, YYYY')
if (setLabel && label !== formattedTime) setLabel(formattedTime)
}}
/>
<Area dataKey="value" type="monotone" stroke={color} fill="url(#gradient)" strokeWidth={2} />
</AreaChart>
</ResponsiveContainer>
)}
<RowBetween>
{bottomLeft ?? null}
{bottomRight ?? null}
Expand Down
2 changes: 1 addition & 1 deletion src/components/Loader/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -101,7 +101,7 @@ export const LoadingRows = styled.div`
max-width: 100%;
grid-column-gap: 0.5em;
grid-row-gap: 0.8em;
grid-template-columns: repeat(3, 1fr);
grid-template-columns: repeat(1, 1fr);
& > div {
animation: ${loadingAnimation} 1.5s infinite;
animation-fill-mode: both;
Expand Down
14 changes: 13 additions & 1 deletion src/data/pools/chartData.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,9 @@ const POOL_CHART = gql`
volumeUSD
tvlUSD
feesUSD
pool {
feeTier
}
}
}
`
Expand All @@ -34,6 +37,9 @@ interface ChartResults {
volumeUSD: string
tvlUSD: string
feesUSD: string
pool: {
feeTier: string
}
}[]
}

Expand All @@ -43,6 +49,9 @@ export async function fetchPoolChartData(address: string, client: ApolloClient<N
volumeUSD: string
tvlUSD: string
feesUSD: string
pool: {
feeTier: string
}
}[] = []
const startTimestamp = 1619170975
const endTimestamp = dayjs.utc().unix()
Expand Down Expand Up @@ -79,10 +88,13 @@ export async function fetchPoolChartData(address: string, client: ApolloClient<N
if (data) {
const formattedExisting = data.reduce((accum: { [date: number]: PoolChartEntry }, dayData) => {
const roundedDate = parseInt((dayData.date / ONE_DAY_UNIX).toFixed(0))
const feePercent = parseFloat(dayData.pool.feeTier) / 10000
const tvlAdjust = dayData?.volumeUSD ? parseFloat(dayData.volumeUSD) * feePercent : 0

accum[roundedDate] = {
date: dayData.date,
volumeUSD: parseFloat(dayData.volumeUSD),
totalValueLockedUSD: parseFloat(dayData.tvlUSD),
totalValueLockedUSD: parseFloat(dayData.tvlUSD) - tvlAdjust,
feesUSD: parseFloat(dayData.feesUSD),
}
return accum
Expand Down
35 changes: 32 additions & 3 deletions src/data/pools/poolData.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,11 +41,16 @@ export const POOLS_BULK = (block: number | undefined, pools: string[]) => {
token0Price
token1Price
volumeUSD
volumeToken0
volumeToken1
txCount
totalValueLockedToken0
totalValueLockedToken1
totalValueLockedUSD
}
bundles (where: {id: "1"}) {
ethPriceUSD
}
}
`
return gql(queryString)
Expand Down Expand Up @@ -74,6 +79,8 @@ interface PoolFields {
token0Price: string
token1Price: string
volumeUSD: string
volumeToken0: string
volumeToken1: string
txCount: string
totalValueLockedToken0: string
totalValueLockedToken1: string
Expand All @@ -82,6 +89,9 @@ interface PoolFields {

interface PoolDataResponse {
pools: PoolFields[]
bundles: {
ethPriceUSD: string
}[]
}

/**
Expand Down Expand Up @@ -136,6 +146,8 @@ export function usePoolDatas(
}
}

const ethPriceUSD = data?.bundles?.[0]?.ethPriceUSD ? parseFloat(data?.bundles?.[0]?.ethPriceUSD) : 0

const parsed = data?.pools
? data.pools.reduce((accum: { [address: string]: PoolFields }, poolData) => {
accum[poolData.id] = poolData
Expand Down Expand Up @@ -182,7 +194,18 @@ export function usePoolDatas(
? parseFloat(current.volumeUSD)
: 0

const tvlUSD = current ? parseFloat(current.totalValueLockedUSD) : 0
// Hotifx: Subtract fees from TVL to correct data while subgraph is fixed.
/**
* Note: see issue desribed here https://github.com/Uniswap/v3-subgraph/issues/74
* During subgraph deploy switch this month we lost logic to fix this accounting.
* Grafted sync pending fix now.
*/
const feePercent = current ? parseFloat(current.feeTier) / 10000 / 100 : 0
const tvlAdjust0 = current?.volumeToken0 ? (parseFloat(current.volumeToken0) * feePercent) / 2 : 0
const tvlAdjust1 = current?.volumeToken1 ? (parseFloat(current.volumeToken1) * feePercent) / 2 : 0
const tvlToken0 = current ? parseFloat(current.totalValueLockedToken0) - tvlAdjust0 : 0
const tvlToken1 = current ? parseFloat(current.totalValueLockedToken1) - tvlAdjust1 : 0
let tvlUSD = current ? parseFloat(current.totalValueLockedUSD) : 0

const tvlUSDChange =
current && oneDay
Expand All @@ -191,8 +214,14 @@ export function usePoolDatas(
100
: 0

const tvlToken0 = current ? parseFloat(current.totalValueLockedToken0) : 0
const tvlToken1 = current ? parseFloat(current.totalValueLockedToken1) : 0
// Part of TVL fix
const tvlUpdated = current
? tvlToken0 * parseFloat(current.token0.derivedETH) * ethPriceUSD +
tvlToken1 * parseFloat(current.token1.derivedETH) * ethPriceUSD
: undefined
if (tvlUpdated) {
tvlUSD = tvlUpdated
}

const feeTier = current ? parseInt(current.feeTier) : 0

Expand Down
Loading

0 comments on commit be78c8a

Please sign in to comment.