react-feather#Activity JavaScript Examples
The following examples show how to use
react-feather#Activity.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: index.js From uniswap-v1-frontend with GNU General Public License v3.0 | 5 votes |
|
NetworkIcon = styled(Activity)`
margin-left: 0.25rem;
margin-right: 0.5rem;
width: 16px;
height: 16px;
`
Example #2
| Source File: index.js From sorbet-finance with GNU General Public License v3.0 | 5 votes |
|
NetworkIcon = styled(Activity)`
margin-left: 0.25rem;
margin-right: 0.5rem;
width: 16px;
height: 16px;
`
Example #3
| Source File: index.js From swap-frontend with GNU General Public License v3.0 | 5 votes |
|
NetworkIcon = styled(Activity)`
margin-left: 0.25rem;
margin-right: 0.5rem;
width: 16px;
height: 16px;
`
Example #4
| Source File: index.js From pine-interface with GNU General Public License v3.0 | 5 votes |
|
NetworkIcon = styled(Activity)`
margin-left: 0.25rem;
margin-right: 0.5rem;
width: 16px;
height: 16px;
`
Example #5
| Source File: index.js From Smart-Swap-Protocol with GNU General Public License v3.0 | 5 votes |
|
NetworkIcon = styled(Activity)`
margin-left: 0.25rem;
margin-right: 0.5rem;
width: 16px;
height: 16px;
`
Example #6
| Source File: index.js From spooky-info with GNU General Public License v3.0 | 4 votes |
|
TokenChart = ({ address, color, base }) => {
// settings for the window and candle width
const [chartFilter, setChartFilter] = useState(CHART_VIEW.PRICE)
const [frequency, setFrequency] = useState(DATA_FREQUENCY.HOUR)
const [darkMode] = useDarkModeManager()
const textColor = darkMode ? 'white' : 'black'
// reset view on new address
const addressPrev = usePrevious(address)
useEffect(() => {
if (address !== addressPrev && addressPrev) {
setChartFilter(CHART_VIEW.LIQUIDITY)
}
}, [address, addressPrev])
let chartData = useTokenChartData(address)
const [timeWindow, setTimeWindow] = useState(timeframeOptions.WEEK)
const prevWindow = usePrevious(timeWindow)
// hourly and daily price data based on the current time window
const hourlyWeek = useTokenPriceData(address, timeframeOptions.WEEK, 3600)
const hourlyMonth = useTokenPriceData(address, timeframeOptions.MONTH, 3600)
const hourlyAll = useTokenPriceData(address, timeframeOptions.ALL_TIME, 3600)
const dailyWeek = useTokenPriceData(address, timeframeOptions.WEEK, 86400)
const dailyMonth = useTokenPriceData(address, timeframeOptions.MONTH, 86400)
const dailyAll = useTokenPriceData(address, timeframeOptions.ALL_TIME, 86400)
const priceData =
timeWindow === timeframeOptions.MONTH
? // monthly selected
frequency === DATA_FREQUENCY.DAY
? dailyMonth
: hourlyMonth
: // weekly selected
timeWindow === timeframeOptions.WEEK
? frequency === DATA_FREQUENCY.DAY
? dailyWeek
: hourlyWeek
: // all time selected
frequency === DATA_FREQUENCY.DAY
? dailyAll
: hourlyAll
// switch to hourly data when switched to week window
useEffect(() => {
if (timeWindow === timeframeOptions.WEEK && prevWindow && prevWindow !== timeframeOptions.WEEK) {
setFrequency(DATA_FREQUENCY.HOUR)
}
}, [prevWindow, timeWindow])
// switch to daily data if switche to month or all time view
useEffect(() => {
if (timeWindow === timeframeOptions.MONTH && prevWindow && prevWindow !== timeframeOptions.MONTH) {
setFrequency(DATA_FREQUENCY.DAY)
}
if (timeWindow === timeframeOptions.ALL_TIME && prevWindow && prevWindow !== timeframeOptions.ALL_TIME) {
setFrequency(DATA_FREQUENCY.DAY)
}
}, [prevWindow, timeWindow])
const below1080 = useMedia('(max-width: 1080px)')
const below600 = useMedia('(max-width: 600px)')
let utcStartTime = getTimeframe(timeWindow)
const domain = [(dataMin) => (dataMin > utcStartTime ? dataMin : utcStartTime), 'dataMax']
const aspect = below1080 ? 60 / 32 : below600 ? 60 / 42 : 60 / 22
chartData = chartData?.filter((entry) => entry.date >= utcStartTime)
// update the width on a window resize
const ref = useRef()
const isClient = typeof window === 'object'
const [width, setWidth] = useState(ref?.current?.container?.clientWidth)
useEffect(() => {
if (!isClient) {
return false
}
function handleResize() {
setWidth(ref?.current?.container?.clientWidth ?? width)
}
window.addEventListener('resize', handleResize)
return () => window.removeEventListener('resize', handleResize)
}, [isClient, width]) // Empty array ensures that effect is only run on mount and unmount
return (
<ChartWrapper>
{below600 ? (
<RowBetween mb={40}>
<DropdownSelect options={CHART_VIEW} active={chartFilter} setActive={setChartFilter} color={color} />
<DropdownSelect options={timeframeOptions} active={timeWindow} setActive={setTimeWindow} color={color} />
</RowBetween>
) : (
<RowBetween
mb={
chartFilter === CHART_VIEW.LIQUIDITY ||
chartFilter === CHART_VIEW.VOLUME ||
(chartFilter === CHART_VIEW.PRICE && frequency === DATA_FREQUENCY.LINE)
? 40
: 0
}
align="flex-start"
>
<AutoColumn gap="8px">
<RowFixed>
<OptionButton
active={chartFilter === CHART_VIEW.LIQUIDITY}
onClick={() => setChartFilter(CHART_VIEW.LIQUIDITY)}
style={{ marginRight: '6px' }}
>
Liquidity
</OptionButton>
<OptionButton
active={chartFilter === CHART_VIEW.VOLUME}
onClick={() => setChartFilter(CHART_VIEW.VOLUME)}
style={{ marginRight: '6px' }}
>
Volume
</OptionButton>
<OptionButton
active={chartFilter === CHART_VIEW.PRICE}
onClick={() => {
setChartFilter(CHART_VIEW.PRICE)
}}
>
Price
</OptionButton>
</RowFixed>
{chartFilter === CHART_VIEW.PRICE && (
<AutoRow gap="4px">
<PriceOption
active={frequency === DATA_FREQUENCY.DAY}
onClick={() => {
setTimeWindow(timeframeOptions.MONTH)
setFrequency(DATA_FREQUENCY.DAY)
}}
>
D
</PriceOption>
<PriceOption
active={frequency === DATA_FREQUENCY.HOUR}
onClick={() => setFrequency(DATA_FREQUENCY.HOUR)}
>
H
</PriceOption>
<PriceOption
active={frequency === DATA_FREQUENCY.LINE}
onClick={() => setFrequency(DATA_FREQUENCY.LINE)}
>
<Activity size={14} />
</PriceOption>
</AutoRow>
)}
</AutoColumn>
<AutoRow justify="flex-end" gap="6px" align="flex-start">
<OptionButton
active={timeWindow === timeframeOptions.WEEK}
onClick={() => setTimeWindow(timeframeOptions.WEEK)}
>
1W
</OptionButton>
<OptionButton
active={timeWindow === timeframeOptions.MONTH}
onClick={() => setTimeWindow(timeframeOptions.MONTH)}
>
1M
</OptionButton>
<OptionButton
active={timeWindow === timeframeOptions.ALL_TIME}
onClick={() => setTimeWindow(timeframeOptions.ALL_TIME)}
>
All
</OptionButton>
</AutoRow>
</RowBetween>
)}
{chartFilter === CHART_VIEW.LIQUIDITY && chartData && (
<ResponsiveContainer aspect={aspect}>
<AreaChart margin={{ top: 0, right: 10, bottom: 6, left: 0 }} barCategoryGap={1} data={chartData}>
<defs>
<linearGradient id="colorUv" x1="0" y1="0" x2="0" y2="1">
<stop offset="5%" stopColor={color} stopOpacity={0.35} />
<stop offset="95%" stopColor={color} stopOpacity={0} />
</linearGradient>
</defs>
<XAxis
tickLine={false}
axisLine={false}
interval="preserveEnd"
tickMargin={16}
minTickGap={120}
tickFormatter={(tick) => toNiceDate(tick)}
dataKey="date"
tick={{ fill: textColor }}
type={'number'}
domain={['dataMin', 'dataMax']}
/>
<YAxis
type="number"
orientation="right"
tickFormatter={(tick) => '$' + toK(tick)}
axisLine={false}
tickLine={false}
interval="preserveEnd"
minTickGap={80}
yAxisId={0}
tick={{ fill: textColor }}
/>
<Tooltip
cursor={true}
formatter={(val) => formattedNum(val, true)}
labelFormatter={(label) => toNiceDateYear(label)}
labelStyle={{ paddingTop: 4 }}
contentStyle={{
padding: '10px 14px',
borderRadius: 10,
borderColor: color,
color: 'black',
}}
wrapperStyle={{ top: -70, left: -10 }}
/>
<Area
key={'other'}
dataKey={'totalLiquidityUSD'}
stackId="2"
strokeWidth={2}
dot={false}
type="monotone"
name={'Liquidity'}
yAxisId={0}
stroke={darken(0.12, color)}
fill="url(#colorUv)"
/>
</AreaChart>
</ResponsiveContainer>
)}
{chartFilter === CHART_VIEW.PRICE &&
(frequency === DATA_FREQUENCY.LINE ? (
<ResponsiveContainer aspect={below1080 ? 60 / 32 : 60 / 16}>
<AreaChart margin={{ top: 0, right: 10, bottom: 6, left: 0 }} barCategoryGap={1} data={chartData}>
<defs>
<linearGradient id="colorUv" x1="0" y1="0" x2="0" y2="1">
<stop offset="5%" stopColor={color} stopOpacity={0.35} />
<stop offset="95%" stopColor={color} stopOpacity={0} />
</linearGradient>
</defs>
<XAxis
tickLine={false}
axisLine={false}
interval="preserveEnd"
tickMargin={16}
minTickGap={120}
tickFormatter={(tick) => toNiceDate(tick)}
dataKey="date"
tick={{ fill: textColor }}
type={'number'}
domain={domain}
/>
<YAxis
type="number"
orientation="right"
tickFormatter={(tick) => '$' + toK(tick)}
axisLine={false}
tickLine={false}
interval="preserveEnd"
minTickGap={80}
yAxisId={0}
tick={{ fill: textColor }}
/>
<Tooltip
cursor={true}
formatter={(val) => formattedNum(val, true)}
labelFormatter={(label) => toNiceDateYear(label)}
labelStyle={{ paddingTop: 4 }}
contentStyle={{
padding: '10px 14px',
borderRadius: 10,
borderColor: color,
color: 'black',
}}
wrapperStyle={{ top: -70, left: -10 }}
/>
<Area
key={'other'}
dataKey={'priceUSD'}
stackId="2"
strokeWidth={2}
dot={false}
type="monotone"
name={'Price'}
yAxisId={0}
stroke={darken(0.12, color)}
fill="url(#colorUv)"
/>
</AreaChart>
</ResponsiveContainer>
) : priceData ? (
<ResponsiveContainer aspect={aspect} ref={ref}>
<CandleStickChart data={priceData} width={width} base={base} />
</ResponsiveContainer>
) : (
<LocalLoader />
))}
{chartFilter === CHART_VIEW.VOLUME && (
<ResponsiveContainer aspect={aspect}>
<BarChart margin={{ top: 0, right: 10, bottom: 6, left: 10 }} barCategoryGap={1} data={chartData}>
<XAxis
tickLine={false}
axisLine={false}
interval="preserveEnd"
minTickGap={80}
tickMargin={14}
tickFormatter={(tick) => toNiceDate(tick)}
dataKey="date"
tick={{ fill: textColor }}
type={'number'}
domain={['dataMin', 'dataMax']}
/>
<YAxis
type="number"
axisLine={false}
tickMargin={16}
tickFormatter={(tick) => '$' + toK(tick)}
tickLine={false}
orientation="right"
interval="preserveEnd"
minTickGap={80}
yAxisId={0}
tick={{ fill: textColor }}
/>
<Tooltip
cursor={{ fill: color, opacity: 0.1 }}
formatter={(val) => formattedNum(val, true)}
labelFormatter={(label) => toNiceDateYear(label)}
labelStyle={{ paddingTop: 4 }}
contentStyle={{
padding: '10px 14px',
borderRadius: 10,
borderColor: color,
color: 'black',
}}
wrapperStyle={{ top: -70, left: -10 }}
/>
<Bar
type="monotone"
name={'Volume'}
dataKey={'dailyVolumeUSD'}
fill={color}
opacity={'0.4'}
yAxisId={0}
stroke={color}
/>
</BarChart>
</ResponsiveContainer>
)}
</ChartWrapper>
)
}
Example #7
| Source File: AccountPage.js From spooky-info with GNU General Public License v3.0 | 4 votes |
|
function AccountPage({ account }) {
// get data for this account
const transactions = useUserTransactions(account)
const positions = useUserPositions(account)
const miningPositions = useMiningPositions(account)
// get data for user stats
const transactionCount = transactions?.swaps?.length + transactions?.burns?.length + transactions?.mints?.length
// get derived totals
let totalSwappedUSD = useMemo(() => {
return transactions?.swaps
? transactions?.swaps.reduce((total, swap) => {
return total + parseFloat(swap.amountUSD)
}, 0)
: 0
}, [transactions])
// if any position has token from fee warning list, show warning
const [showWarning, setShowWarning] = useState(false)
useEffect(() => {
if (positions) {
for (let i = 0; i < positions.length; i++) {
if (
FEE_WARNING_TOKENS.includes(positions[i].pair.token0.id) ||
FEE_WARNING_TOKENS.includes(positions[i].pair.token1.id)
) {
setShowWarning(true)
}
}
}
}, [positions])
// settings for list view and dropdowns
const hideLPContent = positions && positions.length === 0
const [showDropdown, setShowDropdown] = useState(false)
const [activePosition, setActivePosition] = useState()
const dynamicPositions = activePosition ? [activePosition] : positions
const aggregateFees = dynamicPositions?.reduce(function (total, position) {
return total + position.fees.sum
}, 0)
const positionValue = useMemo(() => {
return dynamicPositions
? dynamicPositions.reduce((total, position) => {
return (
total +
(parseFloat(position?.liquidityTokenBalance) / parseFloat(position?.pair?.totalSupply)) *
position?.pair?.reserveUSD
)
}, 0)
: null
}, [dynamicPositions])
useEffect(() => {
window.scrollTo({
behavior: 'smooth',
top: 0,
})
}, [])
const below600 = useMedia('(max-width: 600px)')
// adding/removing account from saved accounts
const [savedAccounts, addAccount, removeAccount] = useSavedAccounts()
const isBookmarked = savedAccounts.includes(account)
const handleBookmarkClick = useCallback(() => {
; (isBookmarked ? removeAccount : addAccount)(account)
}, [account, isBookmarked, addAccount, removeAccount])
return (
<PageWrapper>
<ContentWrapper>
<RowBetween>
<TYPE.body>
<BasicLink to="/accounts">{'Accounts '}</BasicLink>→{' '}
<Link lineHeight={'145.23%'} href={'https://ftmscan.com/address/' + account} target="_blank">
{' '}
{account?.slice(0, 42)}{' '}
</Link>
</TYPE.body>
{!below600 && <Search small={true} />}
</RowBetween>
<Header>
<RowBetween>
<span>
<TYPE.header fontSize={24}>{account?.slice(0, 6) + '...' + account?.slice(38, 42)}</TYPE.header>
<Link lineHeight={'145.23%'} href={'https://ftmscan.com/address/' + account} target="_blank">
<TYPE.main fontSize={14}>View on FTMscan</TYPE.main>
</Link>
</span>
<AccountWrapper>
<StyledIcon>
<Bookmark
onClick={handleBookmarkClick}
style={{ opacity: isBookmarked ? 0.8 : 0.4, cursor: 'pointer' }}
/>
</StyledIcon>
</AccountWrapper>
</RowBetween>
</Header>
<DashboardWrapper>
{showWarning && <Warning>Fees cannot currently be calculated for pairs that include AMPL.</Warning>}
{!hideLPContent && (
<DropdownWrapper>
<ButtonDropdown width="100%" onClick={() => setShowDropdown(!showDropdown)} open={showDropdown}>
{!activePosition && (
<RowFixed>
<StyledIcon>
<Activity size={16} />
</StyledIcon>
<TYPE.body ml={'10px'}>All Positions</TYPE.body>
</RowFixed>
)}
{activePosition && (
<RowFixed>
<DoubleTokenLogo a0={activePosition.pair.token0.id} a1={activePosition.pair.token1.id} size={16} />
<TYPE.body ml={'16px'}>
{activePosition.pair.token0.symbol}-{activePosition.pair.token1.symbol} Position
</TYPE.body>
</RowFixed>
)}
</ButtonDropdown>
{showDropdown && (
<Flyout>
<AutoColumn gap="0px">
{positions?.map((p, i) => {
if (p.pair.token1.symbol === 'WETH') {
p.pair.token1.symbol = 'ETH'
}
if (p.pair.token0.symbol === 'WETH') {
p.pair.token0.symbol = 'ETH'
}
return (
p.pair.id !== activePosition?.pair.id && (
<MenuRow
onClick={() => {
setActivePosition(p)
setShowDropdown(false)
}}
key={i}
>
<DoubleTokenLogo a0={p.pair.token0.id} a1={p.pair.token1.id} size={16} />
<TYPE.body ml={'16px'}>
{p.pair.token0.symbol}-{p.pair.token1.symbol} Position
</TYPE.body>
</MenuRow>
)
)
})}
{activePosition && (
<MenuRow
onClick={() => {
setActivePosition()
setShowDropdown(false)
}}
>
<RowFixed>
<StyledIcon>
<Activity size={16} />
</StyledIcon>
<TYPE.body ml={'10px'}>All Positions</TYPE.body>
</RowFixed>
</MenuRow>
)}
</AutoColumn>
</Flyout>
)}
</DropdownWrapper>
)}
{!hideLPContent && (
<Panel style={{ height: '100%', marginBottom: '1rem' }}>
<AutoRow gap="20px">
<AutoColumn gap="10px">
<RowBetween>
<TYPE.body>Liquidity (Including Fees)</TYPE.body>
<div />
</RowBetween>
<RowFixed align="flex-end">
<TYPE.header fontSize={'24px'} lineHeight={1}>
{positionValue
? formattedNum(positionValue, true)
: positionValue === 0
? formattedNum(0, true)
: '-'}
</TYPE.header>
</RowFixed>
</AutoColumn>
<AutoColumn gap="10px">
<RowBetween>
<TYPE.body>Fees Earned (Cumulative)</TYPE.body>
<div />
</RowBetween>
<RowFixed align="flex-end">
<TYPE.header fontSize={'24px'} lineHeight={1} color={aggregateFees && 'green'}>
{aggregateFees ? formattedNum(aggregateFees, true, true) : '-'}
</TYPE.header>
</RowFixed>
</AutoColumn>
</AutoRow>
</Panel>
)}
{!hideLPContent && (
<PanelWrapper>
<Panel style={{ gridColumn: '1' }}>
{activePosition ? (
<PairReturnsChart account={account} position={activePosition} />
) : (
<UserChart account={account} position={activePosition} />
)}
</Panel>
</PanelWrapper>
)}
<TYPE.main fontSize={'1.125rem'} style={{ marginTop: '3rem' }}>
Positions
</TYPE.main>{' '}
<Panel
style={{
marginTop: '1.5rem',
}}
>
<PositionList positions={positions} />
</Panel>
<TYPE.main fontSize={'1.125rem'} style={{ marginTop: '3rem' }}>
Liquidity Mining Pools
</TYPE.main>
<Panel
style={{
marginTop: '1.5rem',
}}
>
{miningPositions && <MiningPositionList miningPositions={miningPositions} />}
{!miningPositions && (
<AutoColumn gap="8px" justify="flex-start">
<TYPE.main>No Staked Liquidity.</TYPE.main>
<AutoRow gap="8px" justify="flex-start">
<ButtonLight style={{ padding: '4px 6px', borderRadius: '4px' }}>Learn More</ButtonLight>{' '}
</AutoRow>{' '}
</AutoColumn>
)}
</Panel>
<TYPE.main fontSize={'1.125rem'} style={{ marginTop: '3rem' }}>
Transactions
</TYPE.main>{' '}
<Panel
style={{
marginTop: '1.5rem',
}}
>
<TxnList transactions={transactions} />
</Panel>
<TYPE.main fontSize={'1.125rem'} style={{ marginTop: '3rem' }}>
Wallet Stats
</TYPE.main>{' '}
<Panel
style={{
marginTop: '1.5rem',
}}
>
<AutoRow gap="20px">
<AutoColumn gap="8px">
<TYPE.header fontSize={24}>{totalSwappedUSD ? formattedNum(totalSwappedUSD, true) : '-'}</TYPE.header>
<TYPE.main>Total Value Swapped</TYPE.main>
</AutoColumn>
<AutoColumn gap="8px">
<TYPE.header fontSize={24}>
{totalSwappedUSD ? formattedNum(totalSwappedUSD * 0.002, true) : '-'}
</TYPE.header>
<TYPE.main>Total Fees Paid</TYPE.main>
</AutoColumn>
<AutoColumn gap="8px">
<TYPE.header fontSize={24}>{transactionCount ? transactionCount : '-'}</TYPE.header>
<TYPE.main>Total Transactions</TYPE.main>
</AutoColumn>
</AutoRow>
</Panel>
</DashboardWrapper>
</ContentWrapper>
</PageWrapper>
)
}
Example #8
| Source File: index.js From pancake-info-v1 with GNU General Public License v3.0 | 4 votes |
|
TokenChart = ({ address, color, base }) => {
// settings for the window and candle width
const [chartFilter, setChartFilter] = useState(CHART_VIEW.PRICE)
const [frequency, setFrequency] = useState(DATA_FREQUENCY.HOUR)
const [darkMode] = useDarkModeManager()
const textColor = darkMode ? 'white' : 'black'
// reset view on new address
const addressPrev = usePrevious(address)
useEffect(() => {
if (address !== addressPrev && addressPrev) {
setChartFilter(CHART_VIEW.LIQUIDITY)
}
}, [address, addressPrev])
let chartData = useTokenChartData(address)
const [timeWindow, setTimeWindow] = useState(timeframeOptions.ALL_TIME)
const prevWindow = usePrevious(timeWindow)
// hourly and daily price data based on the current time window
const hourlyWeek = useTokenPriceData(address, timeframeOptions.WEEK, 3600)
const hourlyMonth = useTokenPriceData(address, timeframeOptions.MONTH, 3600)
const hourlyAll = useTokenPriceData(address, timeframeOptions.ALL_TIME, 3600)
const dailyWeek = useTokenPriceData(address, timeframeOptions.WEEK, 86400)
const dailyMonth = useTokenPriceData(address, timeframeOptions.MONTH, 86400)
const dailyAll = useTokenPriceData(address, timeframeOptions.ALL_TIME, 86400)
const priceData =
timeWindow === timeframeOptions.MONTH
? // monthly selected
frequency === DATA_FREQUENCY.DAY
? dailyMonth
: hourlyMonth
: // weekly selected
timeWindow === timeframeOptions.WEEK
? frequency === DATA_FREQUENCY.DAY
? dailyWeek
: hourlyWeek
: // all time selected
frequency === DATA_FREQUENCY.DAY
? dailyAll
: hourlyAll
// switch to hourly data when switched to week window
useEffect(() => {
if (timeWindow === timeframeOptions.WEEK && prevWindow && prevWindow !== timeframeOptions.WEEK) {
setFrequency(DATA_FREQUENCY.HOUR)
}
}, [prevWindow, timeWindow])
// switch to daily data if switche to month or all time view
useEffect(() => {
if (timeWindow === timeframeOptions.MONTH && prevWindow && prevWindow !== timeframeOptions.MONTH) {
setFrequency(DATA_FREQUENCY.DAY)
}
if (timeWindow === timeframeOptions.ALL_TIME && prevWindow && prevWindow !== timeframeOptions.ALL_TIME) {
setFrequency(DATA_FREQUENCY.DAY)
}
}, [prevWindow, timeWindow])
const below1080 = useMedia('(max-width: 1080px)')
const below600 = useMedia('(max-width: 600px)')
let utcStartTime = getTimeframe(timeWindow)
const domain = [(dataMin) => (dataMin > utcStartTime ? dataMin : utcStartTime), 'dataMax']
const aspect = below1080 ? 60 / 32 : below600 ? 60 / 42 : 60 / 22
chartData = chartData?.filter((entry) => entry.date >= utcStartTime)
// update the width on a window resize
const ref = useRef()
const isClient = typeof window === 'object'
const [width, setWidth] = useState(ref?.current?.container?.clientWidth)
useEffect(() => {
if (!isClient) {
return false
}
function handleResize() {
setWidth(ref?.current?.container?.clientWidth ?? width)
}
window.addEventListener('resize', handleResize)
return () => window.removeEventListener('resize', handleResize)
}, [isClient, width]) // Empty array ensures that effect is only run on mount and unmount
return (
<ChartWrapper>
{below600 ? (
<RowBetween mb={40}>
<DropdownSelect options={CHART_VIEW} active={chartFilter} setActive={setChartFilter} color={color} />
<DropdownSelect options={timeframeOptions} active={timeWindow} setActive={setTimeWindow} color={color} />
</RowBetween>
) : (
<RowBetween
mb={
chartFilter === CHART_VIEW.LIQUIDITY ||
chartFilter === CHART_VIEW.VOLUME ||
(chartFilter === CHART_VIEW.PRICE && frequency === DATA_FREQUENCY.LINE)
? 40
: 0
}
align="flex-start"
>
<AutoColumn gap="8px">
<RowFixed>
<OptionButton
active={chartFilter === CHART_VIEW.LIQUIDITY}
onClick={() => setChartFilter(CHART_VIEW.LIQUIDITY)}
style={{ marginRight: '6px' }}
>
Liquidity
</OptionButton>
<OptionButton
active={chartFilter === CHART_VIEW.VOLUME}
onClick={() => setChartFilter(CHART_VIEW.VOLUME)}
style={{ marginRight: '6px' }}
>
Volume
</OptionButton>
<OptionButton
active={chartFilter === CHART_VIEW.PRICE}
onClick={() => {
setChartFilter(CHART_VIEW.PRICE)
}}
>
Price
</OptionButton>
</RowFixed>
{chartFilter === CHART_VIEW.PRICE && (
<AutoRow gap="4px">
<PriceOption
active={frequency === DATA_FREQUENCY.DAY}
onClick={() => {
setTimeWindow(timeframeOptions.MONTH)
setFrequency(DATA_FREQUENCY.DAY)
}}
>
D
</PriceOption>
<PriceOption
active={frequency === DATA_FREQUENCY.HOUR}
onClick={() => setFrequency(DATA_FREQUENCY.HOUR)}
>
H
</PriceOption>
<PriceOption
active={frequency === DATA_FREQUENCY.LINE}
onClick={() => setFrequency(DATA_FREQUENCY.LINE)}
>
<Activity size={14} />
</PriceOption>
</AutoRow>
)}
</AutoColumn>
<AutoRow justify="flex-end" gap="6px" align="flex-start">
<OptionButton
active={timeWindow === timeframeOptions.WEEK}
onClick={() => setTimeWindow(timeframeOptions.WEEK)}
>
1W
</OptionButton>
<OptionButton
active={timeWindow === timeframeOptions.MONTH}
onClick={() => setTimeWindow(timeframeOptions.MONTH)}
>
1M
</OptionButton>
<OptionButton
active={timeWindow === timeframeOptions.ALL_TIME}
onClick={() => setTimeWindow(timeframeOptions.ALL_TIME)}
>
All
</OptionButton>
</AutoRow>
</RowBetween>
)}
{chartFilter === CHART_VIEW.LIQUIDITY && chartData && (
<ResponsiveContainer aspect={aspect}>
<AreaChart margin={{ top: 0, right: 10, bottom: 6, left: 0 }} barCategoryGap={1} data={chartData}>
<defs>
<linearGradient id="colorUv" x1="0" y1="0" x2="0" y2="1">
<stop offset="5%" stopColor={color} stopOpacity={0.35} />
<stop offset="95%" stopColor={color} stopOpacity={0} />
</linearGradient>
</defs>
<XAxis
tickLine={false}
axisLine={false}
interval="preserveEnd"
tickMargin={16}
minTickGap={120}
tickFormatter={(tick) => toNiceDate(tick)}
dataKey="date"
tick={{ fill: textColor }}
type={'number'}
domain={['dataMin', 'dataMax']}
/>
<YAxis
type="number"
orientation="right"
tickFormatter={(tick) => '$' + toK(tick)}
axisLine={false}
tickLine={false}
interval="preserveEnd"
minTickGap={80}
yAxisId={0}
tick={{ fill: textColor }}
/>
<Tooltip
cursor={true}
formatter={(val) => formattedNum(val, true)}
labelFormatter={(label) => toNiceDateYear(label)}
labelStyle={{ paddingTop: 4 }}
contentStyle={{
padding: '10px 14px',
borderRadius: 10,
borderColor: color,
color: 'black',
}}
wrapperStyle={{ top: -70, left: -10 }}
/>
<Area
key={'other'}
dataKey={'totalLiquidityUSD'}
stackId="2"
strokeWidth={2}
dot={false}
type="monotone"
name={'Liquidity'}
yAxisId={0}
stroke={darken(0.12, color)}
fill="url(#colorUv)"
/>
</AreaChart>
</ResponsiveContainer>
)}
{chartFilter === CHART_VIEW.PRICE &&
(frequency === DATA_FREQUENCY.LINE ? (
<ResponsiveContainer aspect={below1080 ? 60 / 32 : 60 / 16}>
<AreaChart margin={{ top: 0, right: 10, bottom: 6, left: 0 }} barCategoryGap={1} data={chartData}>
<defs>
<linearGradient id="colorUv" x1="0" y1="0" x2="0" y2="1">
<stop offset="5%" stopColor={color} stopOpacity={0.35} />
<stop offset="95%" stopColor={color} stopOpacity={0} />
</linearGradient>
</defs>
<XAxis
tickLine={false}
axisLine={false}
interval="preserveEnd"
tickMargin={16}
minTickGap={120}
tickFormatter={(tick) => toNiceDate(tick)}
dataKey="date"
tick={{ fill: textColor }}
type={'number'}
domain={domain}
/>
<YAxis
type="number"
orientation="right"
tickFormatter={(tick) => '$' + toK(tick)}
axisLine={false}
tickLine={false}
interval="preserveEnd"
minTickGap={80}
yAxisId={0}
tick={{ fill: textColor }}
/>
<Tooltip
cursor={true}
formatter={(val) => formattedNum(val, true)}
labelFormatter={(label) => toNiceDateYear(label)}
labelStyle={{ paddingTop: 4 }}
contentStyle={{
padding: '10px 14px',
borderRadius: 10,
borderColor: color,
color: 'black',
}}
wrapperStyle={{ top: -70, left: -10 }}
/>
<Area
key={'other'}
dataKey={'priceUSD'}
stackId="2"
strokeWidth={2}
dot={false}
type="monotone"
name={'Price'}
yAxisId={0}
stroke={darken(0.12, color)}
fill="url(#colorUv)"
/>
</AreaChart>
</ResponsiveContainer>
) : priceData ? (
<ResponsiveContainer aspect={aspect} ref={ref}>
<CandleStickChart data={priceData} width={width} base={base} />
</ResponsiveContainer>
) : (
<LocalLoader />
))}
{chartFilter === CHART_VIEW.VOLUME && (
<ResponsiveContainer aspect={aspect}>
<BarChart margin={{ top: 0, right: 10, bottom: 6, left: 10 }} barCategoryGap={1} data={chartData}>
<XAxis
tickLine={false}
axisLine={false}
interval="preserveEnd"
minTickGap={80}
tickMargin={14}
tickFormatter={(tick) => toNiceDate(tick)}
dataKey="date"
tick={{ fill: textColor }}
type={'number'}
domain={['dataMin', 'dataMax']}
/>
<YAxis
type="number"
axisLine={false}
tickMargin={16}
tickFormatter={(tick) => '$' + toK(tick)}
tickLine={false}
orientation="right"
interval="preserveEnd"
minTickGap={80}
yAxisId={0}
tick={{ fill: textColor }}
/>
<Tooltip
cursor={{ fill: color, opacity: 0.1 }}
formatter={(val) => formattedNum(val, true)}
labelFormatter={(label) => toNiceDateYear(label)}
labelStyle={{ paddingTop: 4 }}
contentStyle={{
padding: '10px 14px',
borderRadius: 10,
borderColor: color,
color: 'black',
}}
wrapperStyle={{ top: -70, left: -10 }}
/>
<Bar
type="monotone"
name={'Volume'}
dataKey={'dailyVolumeUSD'}
fill={color}
opacity={'0.4'}
yAxisId={0}
stroke={color}
/>
</BarChart>
</ResponsiveContainer>
)}
</ChartWrapper>
)
}
