(
76 |
77 | {option.logo}
78 | {option.label}
79 |
80 | )}
81 | styles={isMobile ? customStylesMobile : customStyles}
82 | {...rest}
83 | components={{
84 | DropdownIndicator: () => (
85 |
86 | 🔎
87 |
88 | ),
89 | Menu: ({ children, innerRef, innerProps }) => {
90 | return (
91 |
92 |
93 | {
98 | setCapEth(!capEth)
99 | }}
100 | />
101 | Hide Low Liquidity
102 |
103 | {children}
104 |
105 | )
106 | },
107 | }}
108 | />
109 | ) : (
110 |
118 | )
119 | }
120 |
121 | Select.propTypes = {
122 | options: PropTypes.array.isRequired,
123 | onChange: PropTypes.func,
124 | }
125 |
126 | export default Select
127 |
128 | export { Popout }
129 |
--------------------------------------------------------------------------------
/src/components/Warning/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import 'feather-icons'
3 | import styled from 'styled-components'
4 | import { Text } from 'rebass'
5 | import { AlertTriangle } from 'react-feather'
6 | import { RowBetween, RowFixed } from '../Row'
7 | import { ButtonDark } from '../ButtonStyled'
8 | import { AutoColumn } from '../Column'
9 | import { Hover } from '..'
10 | import Link from '../Link'
11 | import { useMedia } from 'react-use'
12 |
13 | const WarningWrapper = styled.div`
14 | border-radius: 20px;
15 | border: 1px solid #f82d3a;
16 | background: rgba(248, 45, 58, 0.05);
17 | padding: 1rem;
18 | color: #f82d3a;
19 | display: ${({ show }) => !show && 'none'};
20 | margin: 0 2rem 2rem 2rem;
21 | position: relative;
22 |
23 | @media screen and (max-width: 800px) {
24 | width: 80% !important;
25 | margin-left: 5%;
26 | }
27 | `
28 |
29 | const StyledWarningIcon = styled(AlertTriangle)`
30 | min-height: 20px;
31 | min-width: 20px;
32 | stroke: red;
33 | `
34 |
35 | export default function Warning({ type, show, setShow, address }) {
36 | const below800 = useMedia('(max-width: 800px)')
37 |
38 | const textContent = below800 ? (
39 |
40 |
41 | Anyone can create and name any ERC20 token on Ethereum, including creating fake versions of existing tokens and
42 | tokens that claim to represent projects that do not have a token.
43 |
44 |
45 | Similar to Etherscan, this site automatically tracks analytics for all ERC20 tokens independent of token
46 | integrity. Please do your own research before interacting with any ERC20 token.
47 |
48 |
49 | ) : (
50 |
51 | Anyone can create and name any ERC20 token on Ethereum, including creating fake versions of existing tokens and
52 | tokens that claim to represent projects that do not have a token. Similar to Etherscan, this site automatically
53 | tracks analytics for all ERC20 tokens independent of token integrity. Please do your own research before
54 | interacting with any ERC20 token.
55 |
56 | )
57 |
58 | return (
59 |
60 |
61 |
62 |
63 |
64 | Token Safety Alert
65 |
66 |
67 | {textContent}
68 | {below800 ? (
69 |
70 |
71 |
78 | View {type === 'token' ? 'token' : 'pair'} contract on Etherscan
79 |
80 |
81 |
82 |
83 | setShow(false)}>
84 | I understand
85 |
86 |
87 |
{children}
85 | {open ? (
86 |
87 |
88 |
89 | ) : (
90 |
91 |
92 |
93 | )}
94 |
95 |
96 | )
97 | }
98 |
99 | export const ButtonDark = styled(Base)`
100 | background-color: ${({ color, theme }) => (color ? color : theme.primary1)};
101 | color: white;
102 | width: fit-content;
103 | border-radius: 12px;
104 | white-space: nowrap;
105 |
106 | :hover {
107 | background-color: ${({ color, theme }) => (color ? darken(0.1, color) : darken(0.1, theme.primary1))};
108 | }
109 | `
110 |
111 | export const ButtonFaded = styled(Base)`
112 | background-color: ${({ theme }) => theme.bg2};
113 | color: (255, 255, 255, 0.5);
114 | white-space: nowrap;
115 |
116 | :hover {
117 | opacity: 0.5;
118 | }
119 | `
120 |
121 | export function ButtonPlusDull({ disabled, children, ...rest }) {
122 | return (
123 |
124 |
125 |
126 | {children}
127 |
128 |
129 | )
130 | }
131 |
132 | export function ButtonCustom({ children, bgColor, color, ...rest }) {
133 | return (
134 |
135 | {children}
136 |
137 | )
138 | }
139 |
140 | export const OptionButton = styled.div`
141 | font-weight: 500;
142 | width: fit-content;
143 | white-space: nowrap;
144 | padding: 6px;
145 | border-radius: 6px;
146 | border: 1px solid ${({ theme }) => theme.bg4};
147 | background-color: ${({ active, theme }) => active && theme.bg3};
148 | color: ${({ theme }) => theme.text1};
149 |
150 | :hover {
151 | cursor: ${({ disabled }) => !disabled && 'pointer'};
152 | }
153 | `
154 |
--------------------------------------------------------------------------------
/src/components/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import styled from 'styled-components'
3 | import { Text, Box } from 'rebass'
4 |
5 | import Link from './Link'
6 |
7 | import { urls } from '../utils'
8 |
9 | const Divider = styled(Box)`
10 | height: 1px;
11 | background-color: ${({ theme }) => theme.divider};
12 | `
13 |
14 | export const BlockedWrapper = styled.div`
15 | width: 100%;
16 | height: 100%;
17 | display: flex;
18 | justify-content: center;
19 | align-items: center;
20 | `
21 |
22 | export const BlockedMessageWrapper = styled.div`
23 | border: 1px solid ${({ theme }) => theme.text3};
24 | border-radius: 12px;
25 | display: flex;
26 | justify-content: center;
27 | align-items: center;
28 | padding: 1rem;
29 | max-width: 80%;
30 | `
31 |
32 | export const IconWrapper = styled.div`
33 | position: absolute;
34 | right: 0;
35 | border-radius: 3px;
36 | height: 16px;
37 | width: 16px;
38 | padding: 0px;
39 | bottom: 0;
40 | display: flex;
41 | align-items: center;
42 | justify-content: center;
43 | color: ${({ theme }) => theme.text1};
44 |
45 | :hover {
46 | cursor: pointer;
47 | opacity: 0.7;
48 | }
49 | `
50 |
51 | const Hint = ({ children, ...rest }) => (
52 |
53 | {children}
54 |
55 | )
56 |
57 | const Address = ({ address, token, ...rest }) => (
58 |
65 | {address}
66 |
67 | )
68 |
69 | export const Hover = styled.div`
70 | :hover {
71 | cursor: pointer;
72 | opacity: ${({ fade }) => fade && '0.7'};
73 | }
74 | `
75 |
76 | export const StyledIcon = styled.div`
77 | color: ${({ theme }) => theme.text1};
78 | `
79 |
80 | const EmptyCard = styled.div`
81 | display: flex;
82 | align-items: center;
83 | justify-content: center;
84 | height: 200px;
85 | border-radius: 20px;
86 | color: ${({ theme }) => theme.text1};
87 | height: ${({ height }) => height && height};
88 | `
89 |
90 | export const SideBar = styled.span`
91 | display: grid;
92 | grid-gap: 24px;
93 | position: sticky;
94 | top: 4rem;
95 | `
96 |
97 | export const SubNav = styled.ul`
98 | list-style: none;
99 | display: flex;
100 | flex-direction: row;
101 | justify-content: flex-start;
102 | align-items: flex-start;
103 | padding: 0;
104 | margin-bottom: 2rem;
105 | `
106 | export const SubNavEl = styled.li`
107 | list-style: none;
108 | display: flex;
109 | padding-bottom: 0.5rem;
110 | margin-right: 1rem;
111 | font-weight: ${({ isActive }) => (isActive ? 600 : 500)};
112 | border-bottom: 1px solid rgba(0, 0, 0, 0);
113 |
114 | :hover {
115 | cursor: pointer;
116 | border-bottom: 1px solid ${({ theme }) => theme.bg3};
117 | }
118 | `
119 |
120 | export const PageWrapper = styled.div`
121 | display: flex;
122 | flex-direction: column;
123 | padding-top: 36px;
124 | padding-bottom: 80px;
125 |
126 | @media screen and (max-width: 600px) {
127 | & > * {
128 | padding: 0 12px;
129 | }
130 | }
131 | `
132 |
133 | export const ContentWrapper = styled.div`
134 | display: grid;
135 | justify-content: start;
136 | align-items: start;
137 | grid-template-columns: 1fr;
138 | grid-gap: 24px;
139 | max-width: 1440px;
140 | width: 100%;
141 | margin: 0 auto;
142 | padding: 0 2rem;
143 | box-sizing: border-box;
144 | @media screen and (max-width: 1180px) {
145 | grid-template-columns: 1fr;
146 | padding: 0 1rem;
147 | }
148 | `
149 |
150 | export const ContentWrapperLarge = styled.div`
151 | display: grid;
152 | justify-content: start;
153 | align-items: start;
154 | grid-template-columns: 1fr;
155 | grid-gap: 24px;
156 | padding: 0 2rem;
157 | margin: 0 auto;
158 | box-sizing: border-box;
159 | max-width: 1440px;
160 | width: 100%;
161 |
162 | @media screen and (max-width: 1282px) {
163 | grid-template-columns: 1fr;
164 | padding: 0 1rem;
165 | }
166 | `
167 |
168 | export const FullWrapper = styled.div`
169 | display: grid;
170 | justify-content: start;
171 | align-items: start;
172 | grid-template-columns: 1fr;
173 | grid-gap: 24px;
174 | max-width: 1440px;
175 | width: 100%;
176 | margin: 0 auto;
177 | padding: 0 2rem;
178 | box-sizing: border-box;
179 |
180 | @media screen and (max-width: 1180px) {
181 | grid-template-columns: 1fr;
182 | padding: 0 1rem;
183 | }
184 | `
185 |
186 | export const FixedMenu = styled.div`
187 | z-index: 99;
188 | width: 100%;
189 | box-sizing: border-box;
190 | padding: 1rem;
191 | box-sizing: border-box;
192 | margin-bottom: 2rem;
193 | max-width: 100vw;
194 |
195 | @media screen and (max-width: 800px) {
196 | margin-bottom: 0;
197 | }
198 | `
199 |
200 | export { Hint, Divider, Address, EmptyCard }
201 |
--------------------------------------------------------------------------------
/src/components/GlobalChart/index.js:
--------------------------------------------------------------------------------
1 | import React, { useState, useMemo, useEffect, useRef } from 'react'
2 | import { ResponsiveContainer } from 'recharts'
3 | import { timeframeOptions } from '../../constants'
4 | import { useGlobalChartData, useGlobalData } from '../../contexts/GlobalData'
5 | import { useMedia } from 'react-use'
6 | import DropdownSelect from '../DropdownSelect'
7 | import TradingViewChart, { CHART_TYPES } from '../TradingviewChart'
8 | import { RowFixed } from '../Row'
9 | import { OptionButton } from '../ButtonStyled'
10 | import { getTimeframe } from '../../utils'
11 | import { TYPE } from '../../Theme'
12 |
13 | const CHART_VIEW = {
14 | VOLUME: 'Volume',
15 | LIQUIDITY: 'Liquidity',
16 | }
17 |
18 | const VOLUME_WINDOW = {
19 | WEEKLY: 'WEEKLY',
20 | DAYS: 'DAYS',
21 | }
22 | const GlobalChart = ({ display }) => {
23 | // chart options
24 | const [chartView, setChartView] = useState(display === 'volume' ? CHART_VIEW.VOLUME : CHART_VIEW.LIQUIDITY)
25 |
26 | // time window and window size for chart
27 | const timeWindow = timeframeOptions.ALL_TIME
28 | const [volumeWindow, setVolumeWindow] = useState(VOLUME_WINDOW.DAYS)
29 |
30 | // global historical data
31 | const [dailyData, weeklyData] = useGlobalChartData()
32 | const { totalLiquidityUSD, oneDayVolumeUSD, volumeChangeUSD, liquidityChangeUSD, oneWeekVolume, weeklyVolumeChange } =
33 | useGlobalData()
34 |
35 | // based on window, get starttim
36 | let utcStartTime = getTimeframe(timeWindow)
37 |
38 | const chartDataFiltered = useMemo(() => {
39 | let currentData = volumeWindow === VOLUME_WINDOW.DAYS ? dailyData : weeklyData
40 | return (
41 | currentData &&
42 | Object.keys(currentData)
43 | ?.map((key) => {
44 | let item = currentData[key]
45 | if (item.date > utcStartTime) {
46 | return item
47 | } else {
48 | return true
49 | }
50 | })
51 | .filter((item) => {
52 | return !!item
53 | })
54 | )
55 | }, [dailyData, utcStartTime, volumeWindow, weeklyData])
56 | const below800 = useMedia('(max-width: 800px)')
57 |
58 | // update the width on a window resize
59 | const ref = useRef()
60 | const isClient = typeof window === 'object'
61 | const [width, setWidth] = useState(ref?.current?.container?.clientWidth)
62 | useEffect(() => {
63 | if (!isClient) {
64 | return false
65 | }
66 | function handleResize() {
67 | setWidth(ref?.current?.container?.clientWidth ?? width)
68 | }
69 | window.addEventListener('resize', handleResize)
70 | return () => window.removeEventListener('resize', handleResize)
71 | }, [isClient, width]) // Empty array ensures that effect is only run on mount and unmount
72 |
73 | return chartDataFiltered ? (
74 | <>
75 | {below800 && (
76 |
77 | )}
78 |
79 | {chartDataFiltered && chartView === CHART_VIEW.LIQUIDITY && (
80 |
81 |
90 |
91 | )}
92 | {chartDataFiltered && chartView === CHART_VIEW.VOLUME && (
93 |
94 |
104 |
105 | )}
106 | {display === 'volume' && (
107 |
115 | setVolumeWindow(VOLUME_WINDOW.DAYS)}
118 | >
119 | D
120 |
121 | setVolumeWindow(VOLUME_WINDOW.WEEKLY)}
125 | >
126 | W
127 |
128 |
129 | )}
130 |
131 | ) : (
132 | ''
133 | )
134 | }
135 |
136 | export default GlobalChart
137 |
--------------------------------------------------------------------------------
/src/components/UserChart/index.js:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react'
2 | import styled from 'styled-components'
3 | import { Area, XAxis, YAxis, ResponsiveContainer, Tooltip, AreaChart } from 'recharts'
4 | import { AutoRow, RowBetween } from '../Row'
5 | import { toK, toNiceDate, toNiceDateYear, formattedNum, getTimeframe } from '../../utils'
6 | import { OptionButton } from '../ButtonStyled'
7 | import { darken } from 'polished'
8 | import { useMedia } from 'react-use'
9 | import { timeframeOptions } from '../../constants'
10 | import DropdownSelect from '../DropdownSelect'
11 | import { useUserLiquidityChart } from '../../contexts/User'
12 | import LocalLoader from '../LocalLoader'
13 | import { useDarkModeManager } from '../../contexts/LocalStorage'
14 | import { TYPE } from '../../Theme'
15 |
16 | const ChartWrapper = styled.div`
17 | height: 100%;
18 | max-height: 390px;
19 |
20 | @media screen and (max-width: 600px) {
21 | min-height: 200px;
22 | }
23 | `
24 |
25 | const UserChart = ({ account }) => {
26 | const chartData = useUserLiquidityChart(account)
27 |
28 | const [timeWindow, setTimeWindow] = useState(timeframeOptions.ALL_TIME)
29 | let utcStartTime = getTimeframe(timeWindow)
30 |
31 | const below600 = useMedia('(max-width: 600px)')
32 | const above1600 = useMedia('(min-width: 1600px)')
33 |
34 | const domain = [(dataMin) => (dataMin > utcStartTime ? dataMin : utcStartTime), 'dataMax']
35 |
36 | const aspect = above1600 ? 60 / 12 : below600 ? 60 / 42 : 60 / 16
37 |
38 | const [darkMode] = useDarkModeManager()
39 | const textColor = darkMode ? 'white' : 'black'
40 |
41 | return (
42 |
43 | {below600 ? (
44 |
45 |
46 |
47 |
48 | ) : (
49 |
50 |
51 | Liquidity Value
52 |
53 |
54 | setTimeWindow(timeframeOptions.MONTH)}
57 | >
58 | 1M
59 |
60 | setTimeWindow(timeframeOptions.WEEK)}
63 | >
64 | 1W
65 |
66 | setTimeWindow(timeframeOptions.ALL_TIME)}
69 | >
70 | All
71 |
72 |
73 |
74 | )}
75 | {chartData ? (
76 |
77 |
78 |
79 |
80 |
81 |
82 |
83 |
84 | toNiceDate(tick)}
91 | dataKey="date"
92 | tick={{ fill: textColor }}
93 | type={'number'}
94 | domain={domain}
95 | />
96 | '$' + toK(tick)}
100 | axisLine={false}
101 | tickLine={false}
102 | interval="preserveEnd"
103 | minTickGap={6}
104 | yAxisId={0}
105 | tick={{ fill: textColor }}
106 | />
107 | formattedNum(val, true)}
110 | labelFormatter={(label) => toNiceDateYear(label)}
111 | labelStyle={{ paddingTop: 4 }}
112 | contentStyle={{
113 | padding: '10px 14px',
114 | borderRadius: 10,
115 | borderColor: '#ff007a',
116 | color: 'black',
117 | }}
118 | wrapperStyle={{ top: -70, left: -10 }}
119 | />
120 |
132 |
133 |
134 | ) : (
135 |
136 | )}
137 |
138 | )
139 | }
140 |
141 | export default UserChart
142 |
--------------------------------------------------------------------------------
/src/contexts/LocalStorage.js:
--------------------------------------------------------------------------------
1 | import React, { createContext, useContext, useReducer, useMemo, useCallback, useEffect } from 'react'
2 |
3 | const UNISWAP = 'UNISWAP'
4 |
5 | const VERSION = 'VERSION'
6 | const CURRENT_VERSION = 0
7 | const LAST_SAVED = 'LAST_SAVED'
8 | const DISMISSED_PATHS = 'DISMISSED_PATHS'
9 | const SAVED_ACCOUNTS = 'SAVED_ACCOUNTS'
10 | const SAVED_TOKENS = 'SAVED_TOKENS'
11 | const SAVED_PAIRS = 'SAVED_PAIRS'
12 |
13 | const DARK_MODE = 'DARK_MODE'
14 |
15 | const UPDATABLE_KEYS = [DARK_MODE, DISMISSED_PATHS, SAVED_ACCOUNTS, SAVED_PAIRS, SAVED_TOKENS]
16 |
17 | const UPDATE_KEY = 'UPDATE_KEY'
18 |
19 | const LocalStorageContext = createContext()
20 |
21 | function useLocalStorageContext() {
22 | return useContext(LocalStorageContext)
23 | }
24 |
25 | function reducer(state, { type, payload }) {
26 | switch (type) {
27 | case UPDATE_KEY: {
28 | const { key, value } = payload
29 | if (!UPDATABLE_KEYS.some((k) => k === key)) {
30 | throw Error(`Unexpected key in LocalStorageContext reducer: '${key}'.`)
31 | } else {
32 | return {
33 | ...state,
34 | [key]: value,
35 | }
36 | }
37 | }
38 | default: {
39 | throw Error(`Unexpected action type in LocalStorageContext reducer: '${type}'.`)
40 | }
41 | }
42 | }
43 |
44 | function init() {
45 | const defaultLocalStorage = {
46 | [VERSION]: CURRENT_VERSION,
47 | [DARK_MODE]: true,
48 | [DISMISSED_PATHS]: {},
49 | [SAVED_ACCOUNTS]: [],
50 | [SAVED_TOKENS]: {},
51 | [SAVED_PAIRS]: {},
52 | }
53 |
54 | try {
55 | const parsed = JSON.parse(window.localStorage.getItem(UNISWAP))
56 | if (parsed[VERSION] !== CURRENT_VERSION) {
57 | // this is where we could run migration logic
58 | return defaultLocalStorage
59 | } else {
60 | return { ...defaultLocalStorage, ...parsed }
61 | }
62 | } catch {
63 | return defaultLocalStorage
64 | }
65 | }
66 |
67 | export default function Provider({ children }) {
68 | const [state, dispatch] = useReducer(reducer, undefined, init)
69 |
70 | const updateKey = useCallback((key, value) => {
71 | dispatch({ type: UPDATE_KEY, payload: { key, value } })
72 | }, [])
73 |
74 | return (
75 | [state, { updateKey }], [state, updateKey])}>
76 | {children}
77 |
78 | )
79 | }
80 |
81 | export function Updater() {
82 | const [state] = useLocalStorageContext()
83 |
84 | useEffect(() => {
85 | window.localStorage.setItem(UNISWAP, JSON.stringify({ ...state, [LAST_SAVED]: Math.floor(Date.now() / 1000) }))
86 | })
87 |
88 | return null
89 | }
90 |
91 | export function useDarkModeManager() {
92 | const [state, { updateKey }] = useLocalStorageContext()
93 | let isDarkMode = state[DARK_MODE]
94 | const toggleDarkMode = useCallback(
95 | (value) => {
96 | updateKey(DARK_MODE, value === false || value === true ? value : !isDarkMode)
97 | },
98 | [updateKey, isDarkMode]
99 | )
100 | return [isDarkMode, toggleDarkMode]
101 | }
102 |
103 | export function usePathDismissed(path) {
104 | const [state, { updateKey }] = useLocalStorageContext()
105 | const pathDismissed = state?.[DISMISSED_PATHS]?.[path]
106 | function dismiss() {
107 | let newPaths = state?.[DISMISSED_PATHS]
108 | newPaths[path] = true
109 | updateKey(DISMISSED_PATHS, newPaths)
110 | }
111 |
112 | return [pathDismissed, dismiss]
113 | }
114 |
115 | export function useSavedAccounts() {
116 | const [state, { updateKey }] = useLocalStorageContext()
117 | const savedAccounts = state?.[SAVED_ACCOUNTS]
118 |
119 | const addAccount = useCallback(
120 | (account) => {
121 | updateKey(SAVED_ACCOUNTS, [...(savedAccounts ?? []), account])
122 | },
123 | [savedAccounts, updateKey]
124 | )
125 |
126 | const removeAccount = useCallback(
127 | (account) => {
128 | let index = savedAccounts?.indexOf(account) ?? -1
129 | if (index > -1) {
130 | updateKey(SAVED_ACCOUNTS, [
131 | ...savedAccounts.slice(0, index),
132 | ...savedAccounts.slice(index + 1, savedAccounts.length),
133 | ])
134 | }
135 | },
136 | [savedAccounts, updateKey]
137 | )
138 |
139 | return [savedAccounts, addAccount, removeAccount]
140 | }
141 |
142 | export function useSavedPairs() {
143 | const [state, { updateKey }] = useLocalStorageContext()
144 | const savedPairs = state?.[SAVED_PAIRS]
145 |
146 | function addPair(address, token0Address, token1Address, token0Symbol, token1Symbol) {
147 | let newList = state?.[SAVED_PAIRS]
148 | newList[address] = {
149 | address,
150 | token0Address,
151 | token1Address,
152 | token0Symbol,
153 | token1Symbol,
154 | }
155 | updateKey(SAVED_PAIRS, newList)
156 | }
157 |
158 | function removePair(address) {
159 | let newList = state?.[SAVED_PAIRS]
160 | newList[address] = null
161 | updateKey(SAVED_PAIRS, newList)
162 | }
163 |
164 | return [savedPairs, addPair, removePair]
165 | }
166 |
167 | export function useSavedTokens() {
168 | const [state, { updateKey }] = useLocalStorageContext()
169 | const savedTokens = state?.[SAVED_TOKENS]
170 |
171 | function addToken(address, symbol) {
172 | let newList = state?.[SAVED_TOKENS]
173 | newList[address] = {
174 | symbol,
175 | }
176 | updateKey(SAVED_TOKENS, newList)
177 | }
178 |
179 | function removeToken(address) {
180 | let newList = state?.[SAVED_TOKENS]
181 | newList[address] = null
182 | updateKey(SAVED_TOKENS, newList)
183 | }
184 |
185 | return [savedTokens, addToken, removeToken]
186 | }
187 |
--------------------------------------------------------------------------------
/src/components/PinnedData/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { withRouter } from 'react-router-dom'
3 | import styled from 'styled-components'
4 | import { RowBetween, RowFixed } from '../Row'
5 | import { AutoColumn } from '../Column'
6 | import { TYPE } from '../../Theme'
7 | import { useSavedTokens, useSavedPairs } from '../../contexts/LocalStorage'
8 | import { Hover } from '..'
9 | import TokenLogo from '../TokenLogo'
10 | import AccountSearch from '../AccountSearch'
11 | import { Bookmark, ChevronRight, X } from 'react-feather'
12 | import { ButtonFaded } from '../ButtonStyled'
13 | import FormattedName from '../FormattedName'
14 |
15 | const RightColumn = styled.div`
16 | position: fixed;
17 | right: 0;
18 | top: 0px;
19 | height: 100vh;
20 | width: ${({ open }) => (open ? '160px' : '23px')};
21 | padding: 1.25rem;
22 | border-left: ${({ theme, open }) => '1px solid' + theme.bg3};
23 | background-color: ${({ theme }) => theme.bg1};
24 | z-index: 9999;
25 | overflow: auto;
26 | :hover {
27 | cursor: pointer;
28 | }
29 | `
30 |
31 | const SavedButton = styled(RowBetween)`
32 | padding-bottom: ${({ open }) => open && '20px'};
33 | border-bottom: ${({ theme, open }) => open && '1px solid' + theme.bg3};
34 | margin-bottom: ${({ open }) => open && '1.25rem'};
35 |
36 | :hover {
37 | cursor: pointer;
38 | }
39 | `
40 |
41 | const ScrollableDiv = styled(AutoColumn)`
42 | overflow: auto;
43 | padding-bottom: 60px;
44 | `
45 |
46 | const StyledIcon = styled.div`
47 | color: ${({ theme }) => theme.text2};
48 | `
49 |
50 | function PinnedData({ history, open, setSavedOpen }) {
51 | const [savedPairs, , removePair] = useSavedPairs()
52 | const [savedTokens, , removeToken] = useSavedTokens()
53 |
54 | return !open ? (
55 | setSavedOpen(true)}>
56 |
57 |
58 |
59 |
60 |
61 |
62 | ) : (
63 |
64 | setSavedOpen(false)} open={open}>
65 |
66 |
67 |
68 |
69 | Saved
70 |
71 |
72 |
73 |
74 |
75 |
76 |
77 |
78 | Pinned Pairs
79 | {Object.keys(savedPairs).filter((key) => {
80 | return !!savedPairs[key]
81 | }).length > 0 ? (
82 | Object.keys(savedPairs)
83 | .filter((address) => {
84 | return !!savedPairs[address]
85 | })
86 | .map((address) => {
87 | const pair = savedPairs[address]
88 | return (
89 |
90 | history.push('/pair/' + address)}>
91 |
92 |
93 |
98 |
99 |
100 |
101 | removePair(pair.address)}>
102 |
103 |
104 |
105 |
106 |
107 | )
108 | })
109 | ) : (
110 | Pinned pairs will appear here.
111 | )}
112 |
113 |
114 | Pinned Tokens
115 | {Object.keys(savedTokens).filter((key) => {
116 | return !!savedTokens[key]
117 | }).length > 0 ? (
118 | Object.keys(savedTokens)
119 | .filter((address) => {
120 | return !!savedTokens[address]
121 | })
122 | .map((address) => {
123 | const token = savedTokens[address]
124 | return (
125 |
126 | history.push('/token/' + address)}>
127 |
128 |
129 |
130 |
131 |
132 |
133 |
134 | removeToken(address)}>
135 |
136 |
137 |
138 |
139 |
140 | )
141 | })
142 | ) : (
143 | Pinned tokens will appear here.
144 | )}
145 |
146 |
147 |
148 | )
149 | }
150 |
151 | export default withRouter(PinnedData)
152 |
--------------------------------------------------------------------------------
/src/components/AccountSearch/index.js:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react'
2 | import 'feather-icons'
3 | import { withRouter } from 'react-router-dom'
4 | import styled from 'styled-components'
5 | import { ButtonLight, ButtonFaded } from '../ButtonStyled'
6 | import { AutoRow, RowBetween } from '../Row'
7 | import { isAddress } from '../../utils'
8 | import { useSavedAccounts } from '../../contexts/LocalStorage'
9 | import { AutoColumn } from '../Column'
10 | import { TYPE } from '../../Theme'
11 | import { Hover, StyledIcon } from '..'
12 | import Panel from '../Panel'
13 | import { Divider } from '..'
14 | import { Flex } from 'rebass'
15 |
16 | import { X } from 'react-feather'
17 |
18 | const Wrapper = styled.div`
19 | display: flex;
20 | flex-direction: row;
21 | align-items: center;
22 | justify-content: flex-end;
23 | width: 100%;
24 | border-radius: 12px;
25 | `
26 |
27 | const Input = styled.input`
28 | position: relative;
29 | display: flex;
30 | align-items: center;
31 | width: 100%;
32 | white-space: nowrap;
33 | background: none;
34 | border: none;
35 | outline: none;
36 | padding: 12px 16px;
37 | border-radius: 12px;
38 | color: ${({ theme }) => theme.text1};
39 | background-color: ${({ theme }) => theme.bg1};
40 | font-size: 16px;
41 | margin-right: 1rem;
42 | border: 1px solid ${({ theme }) => theme.bg3};
43 |
44 | ::placeholder {
45 | color: ${({ theme }) => theme.text3};
46 | font-size: 14px;
47 | }
48 |
49 | @media screen and (max-width: 640px) {
50 | ::placeholder {
51 | font-size: 1rem;
52 | }
53 | }
54 | `
55 |
56 | const AccountLink = styled.span`
57 | display: flex;
58 | cursor: pointer;
59 | color: ${({ theme }) => theme.link};
60 | font-size: 14px;
61 | font-weight: 500;
62 | `
63 |
64 | const DashGrid = styled.div`
65 | display: grid;
66 | grid-gap: 1em;
67 | grid-template-columns: 1fr;
68 | grid-template-areas: 'account';
69 | padding: 0 4px;
70 |
71 | > * {
72 | justify-content: flex-end;
73 | }
74 | `
75 |
76 | function AccountSearch({ history, small }) {
77 | const [accountValue, setAccountValue] = useState()
78 | const [savedAccounts, addAccount, removeAccount] = useSavedAccounts()
79 |
80 | function handleAccountSearch() {
81 | if (isAddress(accountValue)) {
82 | history.push('/account/' + accountValue)
83 | if (!savedAccounts.includes(accountValue)) {
84 | addAccount(accountValue)
85 | }
86 | }
87 | }
88 |
89 | return (
90 |
91 | {!small && (
92 | <>
93 |
94 |
95 | {
98 | setAccountValue(e.target.value)
99 | }}
100 | />
101 |
102 | Load Account Details
103 |
104 |
105 | )}
106 |
107 |
108 | {!small && (
109 |
110 |
111 | Saved Accounts
112 |
113 |
114 | {savedAccounts?.length > 0 ? (
115 | savedAccounts.map((account) => {
116 | return (
117 |
118 | history.push('/account/' + account)}
122 | >
123 | {account?.slice(0, 42)}
124 | {
126 | e.stopPropagation()
127 | removeAccount(account)
128 | }}
129 | >
130 |
131 |
132 |
133 |
134 |
135 |
136 | )
137 | })
138 | ) : (
139 | No saved accounts
140 | )}
141 |
142 | )}
143 |
144 | {small && (
145 | <>
146 | {'Accounts'}
147 | {savedAccounts?.length > 0 ? (
148 | savedAccounts.map((account) => {
149 | return (
150 |
151 | history.push('/account/' + account)}>
152 | {small ? (
153 | {account?.slice(0, 6) + '...' + account?.slice(38, 42)}
154 | ) : (
155 | {account?.slice(0, 42)}
156 | )}
157 |
158 | removeAccount(account)}>
159 |
160 |
161 |
162 |
163 |
164 | )
165 | })
166 | ) : (
167 | No pinned wallets
168 | )}
169 |
170 | )}
171 |
172 |
173 | )
174 | }
175 |
176 | export default withRouter(AccountSearch)
177 |
--------------------------------------------------------------------------------
/src/components/PairReturnsChart/index.js:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react'
2 | import styled from 'styled-components'
3 | import { XAxis, YAxis, ResponsiveContainer, Tooltip, LineChart, Line, CartesianGrid } from 'recharts'
4 | import { AutoRow, RowBetween } from '../Row'
5 |
6 | import { toK, toNiceDate, toNiceDateYear, formattedNum, getTimeframe } from '../../utils'
7 | import { OptionButton } from '../ButtonStyled'
8 | import { useMedia } from 'react-use'
9 | import { timeframeOptions } from '../../constants'
10 | import DropdownSelect from '../DropdownSelect'
11 | import { useUserPositionChart } from '../../contexts/User'
12 | import { useTimeframe } from '../../contexts/Application'
13 | import LocalLoader from '../LocalLoader'
14 | import { useColor } from '../../hooks'
15 | import { useDarkModeManager } from '../../contexts/LocalStorage'
16 |
17 | const ChartWrapper = styled.div`
18 | max-height: 420px;
19 |
20 | @media screen and (max-width: 600px) {
21 | min-height: 200px;
22 | }
23 | `
24 |
25 | const OptionsRow = styled.div`
26 | display: flex;
27 | flex-direction: row;
28 | width: 100%;
29 | margin-bottom: 40px;
30 | `
31 |
32 | const CHART_VIEW = {
33 | VALUE: 'Value',
34 | FEES: 'Fees',
35 | }
36 |
37 | const PairReturnsChart = ({ account, position }) => {
38 | let data = useUserPositionChart(position, account)
39 |
40 | const [timeWindow, setTimeWindow] = useTimeframe()
41 |
42 | const below600 = useMedia('(max-width: 600px)')
43 |
44 | const color = useColor(position?.pair.token0.id)
45 |
46 | const [chartView, setChartView] = useState(CHART_VIEW.VALUE)
47 |
48 | // based on window, get starttime
49 | let utcStartTime = getTimeframe(timeWindow)
50 | data = data?.filter((entry) => entry.date >= utcStartTime)
51 |
52 | const aspect = below600 ? 60 / 42 : 60 / 16
53 |
54 | const [darkMode] = useDarkModeManager()
55 | const textColor = darkMode ? 'white' : 'black'
56 |
57 | return (
58 |
59 | {below600 ? (
60 |
61 |
62 |
63 |
64 | ) : (
65 |
66 |
67 | setChartView(CHART_VIEW.VALUE)}>
68 | Liquidity
69 |
70 | setChartView(CHART_VIEW.FEES)}>
71 | Fees
72 |
73 |
74 |
75 | setTimeWindow(timeframeOptions.WEEK)}
78 | >
79 | 1W
80 |
81 | setTimeWindow(timeframeOptions.MONTH)}
84 | >
85 | 1M
86 |
87 | setTimeWindow(timeframeOptions.ALL_TIME)}
90 | >
91 | All
92 |
93 |
94 |
95 | )}
96 |
97 | {data ? (
98 |
99 |
100 |
101 |
102 |
103 |
104 |
105 |
106 | toNiceDate(tick)}
112 | dataKey="date"
113 | tick={{ fill: textColor }}
114 | type={'number'}
115 | domain={['dataMin', 'dataMax']}
116 | />
117 | '$' + toK(tick)}
121 | axisLine={false}
122 | tickLine={false}
123 | interval="preserveStartEnd"
124 | minTickGap={0}
125 | yAxisId={0}
126 | tick={{ fill: textColor }}
127 | />
128 | formattedNum(val, true)}
131 | labelFormatter={(label) => toNiceDateYear(label)}
132 | labelStyle={{ paddingTop: 4 }}
133 | contentStyle={{
134 | padding: '10px 14px',
135 | borderRadius: 10,
136 | borderColor: color,
137 | color: 'black',
138 | }}
139 | wrapperStyle={{ top: -70, left: -10 }}
140 | />
141 |
142 |
149 |
150 | ) : (
151 |
152 | )}
153 |
154 |
155 | )
156 | }
157 |
158 | export default PairReturnsChart
159 |
--------------------------------------------------------------------------------
/src/components/LPList/index.js:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect } from 'react'
2 | import { useMedia } from 'react-use'
3 | import dayjs from 'dayjs'
4 | import LocalLoader from '../LocalLoader'
5 | import utc from 'dayjs/plugin/utc'
6 | import { Box, Flex } from 'rebass'
7 | import styled from 'styled-components'
8 |
9 | import { CustomLink } from '../Link'
10 | import { Divider } from '..'
11 | import { withRouter } from 'react-router-dom'
12 | import { formattedNum } from '../../utils'
13 | import { TYPE } from '../../Theme'
14 | import DoubleTokenLogo from '../DoubleLogo'
15 | import { RowFixed } from '../Row'
16 |
17 | dayjs.extend(utc)
18 |
19 | const PageButtons = styled.div`
20 | width: 100%;
21 | display: flex;
22 | justify-content: center;
23 | margin-top: 2em;
24 | margin-bottom: 0.5em;
25 | `
26 |
27 | const Arrow = styled.div`
28 | color: ${({ theme }) => theme.primary1};
29 | opacity: ${(props) => (props.faded ? 0.3 : 1)};
30 | padding: 0 20px;
31 | user-select: none;
32 | :hover {
33 | cursor: pointer;
34 | }
35 | `
36 |
37 | const List = styled(Box)`
38 | -webkit-overflow-scrolling: touch;
39 | `
40 |
41 | const DashGrid = styled.div`
42 | display: grid;
43 | grid-gap: 1em;
44 | grid-template-columns: 10px 1.5fr 1fr 1fr;
45 | grid-template-areas: 'number name pair value';
46 | padding: 0 4px;
47 |
48 | > * {
49 | justify-content: flex-end;
50 | }
51 |
52 | @media screen and (max-width: 1080px) {
53 | grid-template-columns: 10px 1.5fr 1fr 1fr;
54 | grid-template-areas: 'number name pair value';
55 | }
56 |
57 | @media screen and (max-width: 600px) {
58 | grid-template-columns: 1fr 1fr 1fr;
59 | grid-template-areas: 'name pair value';
60 | }
61 | `
62 |
63 | const ListWrapper = styled.div``
64 |
65 | const DataText = styled(Flex)`
66 | align-items: center;
67 | text-align: center;
68 | color: ${({ theme }) => theme.text1};
69 | & > * {
70 | font-size: 14px;
71 | }
72 |
73 | @media screen and (max-width: 600px) {
74 | font-size: 13px;
75 | }
76 | `
77 |
78 | function LPList({ lps, disbaleLinks, maxItems = 10 }) {
79 | const below600 = useMedia('(max-width: 600px)')
80 | const below800 = useMedia('(max-width: 800px)')
81 |
82 | // pagination
83 | const [page, setPage] = useState(1)
84 | const [maxPage, setMaxPage] = useState(1)
85 | const ITEMS_PER_PAGE = maxItems
86 |
87 | useEffect(() => {
88 | setMaxPage(1) // edit this to do modular
89 | setPage(1)
90 | }, [lps])
91 |
92 | useEffect(() => {
93 | if (lps) {
94 | let extraPages = 1
95 | if (Object.keys(lps).length % ITEMS_PER_PAGE === 0) {
96 | extraPages = 0
97 | }
98 | setMaxPage(Math.floor(Object.keys(lps).length / ITEMS_PER_PAGE) + extraPages)
99 | }
100 | }, [ITEMS_PER_PAGE, lps])
101 |
102 | const ListItem = ({ lp, index }) => {
103 | return (
104 |
105 | {!below600 && (
106 |
107 | {index}
108 |
109 | )}
110 |
111 |
112 | {below800 ? lp.user.id.slice(0, 4) + '...' + lp.user.id.slice(38, 42) : lp.user.id}
113 |
114 |
115 |
116 | {/* {!below1080 && (
117 |
118 | {lp.type}
119 |
120 | )} */}
121 |
122 |
123 |
124 |
125 | {!below600 && }
126 | {lp.pairName}
127 |
128 |
129 |
130 | {formattedNum(lp.usd, true)}
131 |
132 | )
133 | }
134 |
135 | const lpList =
136 | lps &&
137 | lps.slice(ITEMS_PER_PAGE * (page - 1), page * ITEMS_PER_PAGE).map((lp, index) => {
138 | return (
139 |
143 | )
144 | })
145 |
146 | return (
147 |
148 |
149 | {!below600 && (
150 |
151 | #
152 |
153 | )}
154 |
155 | Account
156 |
157 | {/* {!below1080 && (
158 |
159 | Type
160 |
161 | )} */}
162 |
163 | Pair
164 |
165 |
166 | Value
167 |
168 |
169 |
170 | {!lpList ? : lpList}
171 |
172 | setPage(page === 1 ? page : page - 1)}>
173 |
←
174 |
setPage(page === maxPage ? page : page + 1)}>
177 |
→
178 |
` + valueFormatter(base) + '
'
147 | : ''
148 | }
149 | setLastBarText()
150 |
151 | // update the title when hovering on the chart
152 | chart.subscribeCrosshairMove(function (param) {
153 | if (
154 | param === undefined ||
155 | param.time === undefined ||
156 | param.point.x < 0 ||
157 | param.point.x > width ||
158 | param.point.y < 0 ||
159 | param.point.y > height
160 | ) {
161 | setLastBarText()
162 | } else {
163 | var price = param.seriesPrices.get(candleSeries).close
164 | const time = dayjs.unix(param.time).format('MM/DD h:mm A')
165 | toolTip.innerHTML =
166 | `` +
167 | valueFormatter(price) +
168 | `` +
169 | time +
170 | ' UTC' +
171 | '' +
172 | '
'
173 | }
174 | })
175 |
176 | chart.timeScale().fitContent()
177 |
178 | setChartCreated(chart)
179 | }
180 | }, [chartCreated, formattedData, width, height, valueFormatter, base, margin, textColor])
181 |
182 | // responsiveness
183 | useEffect(() => {
184 | if (width) {
185 | chartCreated && chartCreated.resize(width, height)
186 | chartCreated && chartCreated.timeScale().scrollToPosition(0)
187 | }
188 | }, [chartCreated, height, width])
189 |
190 | return (
191 |
192 |
193 |
194 | {
196 | chartCreated && chartCreated.timeScale().fitContent()
197 | }}
198 | />
199 |
200 |
199 |
200 |
201 |
202 | )}
203 |
204 | ) : (
205 |
206 |
207 |
208 | )}
209 |
210 | )
211 | }
212 |
213 | export default withRouter(SideNav)
214 |
--------------------------------------------------------------------------------
/src/pages/GlobalPage.js:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useState } from 'react'
2 | import { withRouter } from 'react-router-dom'
3 | import { Box } from 'rebass'
4 | import styled from 'styled-components'
5 |
6 | import { AutoRow, RowBetween } from '../components/Row'
7 | import { AutoColumn } from '../components/Column'
8 | import PairList from '../components/PairList'
9 | import TopTokenList from '../components/TokenList'
10 | import TxnList from '../components/TxnList'
11 | import GlobalChart from '../components/GlobalChart'
12 | import Search from '../components/Search'
13 | import GlobalStats from '../components/GlobalStats'
14 |
15 | import { useGlobalData, useGlobalTransactions } from '../contexts/GlobalData'
16 | import { useAllPairData } from '../contexts/PairData'
17 | import { useMedia } from 'react-use'
18 | import Panel from '../components/Panel'
19 | import { useAllTokenData } from '../contexts/TokenData'
20 | import { formattedNum, formattedPercent } from '../utils'
21 | import { TYPE, ThemedBackground } from '../Theme'
22 | import { transparentize } from 'polished'
23 | import { CustomLink } from '../components/Link'
24 |
25 | import { PageWrapper, ContentWrapper } from '../components'
26 | import CheckBox from '../components/Checkbox'
27 | import QuestionHelper from '../components/QuestionHelper'
28 |
29 | const ListOptions = styled(AutoRow)`
30 | height: 40px;
31 | width: 100%;
32 | font-size: 1.25rem;
33 | font-weight: 600;
34 |
35 | @media screen and (max-width: 640px) {
36 | font-size: 1rem;
37 | }
38 | `
39 |
40 | const GridRow = styled.div`
41 | display: grid;
42 | width: 100%;
43 | grid-template-columns: 1fr 1fr;
44 | column-gap: 6px;
45 | align-items: start;
46 | justify-content: space-between;
47 | `
48 |
49 | function GlobalPage() {
50 | // get data for lists and totals
51 | const allPairs = useAllPairData()
52 | const allTokens = useAllTokenData()
53 | const transactions = useGlobalTransactions()
54 | const { totalLiquidityUSD, oneDayVolumeUSD, volumeChangeUSD, liquidityChangeUSD } = useGlobalData()
55 |
56 | // breakpoints
57 | const below800 = useMedia('(max-width: 800px)')
58 |
59 | // scrolling refs
60 | useEffect(() => {
61 | document.querySelector('body').scrollTo({
62 | behavior: 'smooth',
63 | top: 0,
64 | })
65 | }, [])
66 |
67 | // for tracked data on pairs
68 | const [useTracked, setUseTracked] = useState(true)
69 |
70 | return (
71 |
72 |
73 |
74 |
75 |
76 | {below800 ? 'Uniswap Analytics' : 'Uniswap Analytics'}
77 |
78 |
79 |
80 | {below800 && ( // mobile card
81 |
82 |
83 |
84 |
85 |
86 |
87 | Volume (24hrs)
88 |
89 |
90 |
91 |
92 | {oneDayVolumeUSD ? formattedNum(oneDayVolumeUSD, true) : '-'}
93 |
94 | {volumeChangeUSD ? formattedPercent(volumeChangeUSD) : '-'}
95 |
96 |
97 |
98 |
99 | Total Liquidity
100 |
101 |
102 |
103 |
104 | {totalLiquidityUSD ? formattedNum(totalLiquidityUSD, true) : '-'}
105 |
106 |
107 | {liquidityChangeUSD ? formattedPercent(liquidityChangeUSD) : '-'}
108 |
109 |
110 |
111 |
112 |
113 |
114 |
115 | )}
116 | {!below800 && (
117 |
118 |
119 |
120 |
121 |
122 |
123 |
124 |
125 | )}
126 | {below800 && (
127 |
128 |
129 |
130 |
131 |
132 | )}
133 |
134 |
135 |
136 | Top Tokens
137 |
138 | See All
139 |
140 |
141 |
142 |
143 |
144 |
145 |
146 |
147 | Top Pairs
148 |
149 |
150 | setUseTracked(!useTracked)}
153 | text={'Hide untracked pairs'}
154 | />
155 |
156 | See All
157 |
158 |
159 |
160 |
161 |
162 |
163 |
164 |
165 | Transactions
166 |
167 |
168 |
169 |
170 |
171 |
${title} ${
170 | type === CHART_TYPES.BAR && !useWeekly ? '(24hr)' : ''
171 | }
` +
172 | `` +
173 | formattedNum(base ?? 0, true) +
174 | `${formattedPercentChange}` +
175 | '
'
176 | }
177 | setLastBarText()
178 |
179 | // update the title when hovering on the chart
180 | chart.subscribeCrosshairMove(function (param) {
181 | if (
182 | param === undefined ||
183 | param.time === undefined ||
184 | param.point.x < 0 ||
185 | param.point.x > width ||
186 | param.point.y < 0 ||
187 | param.point.y > HEIGHT
188 | ) {
189 | setLastBarText()
190 | } else {
191 | let dateStr = useWeekly
192 | ? dayjs(param.time.year + '-' + param.time.month + '-' + param.time.day)
193 | .startOf('week')
194 | .format('MMMM D, YYYY') +
195 | '-' +
196 | dayjs(param.time.year + '-' + param.time.month + '-' + param.time.day)
197 | .endOf('week')
198 | .format('MMMM D, YYYY')
199 | : dayjs(param.time.year + '-' + param.time.month + '-' + param.time.day).format('MMMM D, YYYY')
200 | var price = param.seriesPrices.get(series)
201 |
202 | toolTip.innerHTML =
203 | `${title}
` +
204 | `` +
205 | formattedNum(price, true) +
206 | '
' +
207 | '' +
208 | dateStr +
209 | '
'
210 | }
211 | })
212 |
213 | chart.timeScale().fitContent()
214 |
215 | setChartCreated(chart)
216 | }
217 | }, [
218 | base,
219 | baseChange,
220 | chartCreated,
221 | darkMode,
222 | data,
223 | formattedData,
224 | textColor,
225 | title,
226 | topScale,
227 | type,
228 | useWeekly,
229 | width,
230 | ])
231 |
232 | // responsiveness
233 | useEffect(() => {
234 | if (width) {
235 | chartCreated && chartCreated.resize(width, HEIGHT)
236 | chartCreated && chartCreated.timeScale().scrollToPosition(0)
237 | }
238 | }, [chartCreated, width])
239 |
240 | return (
241 |
242 |
243 |
244 | {
246 | chartCreated && chartCreated.timeScale().fitContent()
247 | }}
248 | />
249 |
250 |
251 | )
252 | }
253 |
254 | export default TradingViewChart
255 |
--------------------------------------------------------------------------------
/src/contexts/Application.js:
--------------------------------------------------------------------------------
1 | import React, { createContext, useContext, useReducer, useMemo, useCallback, useState, useEffect } from 'react'
2 | import { timeframeOptions, SUPPORTED_LIST_URLS__NO_ENS } from '../constants'
3 | import dayjs from 'dayjs'
4 | import utc from 'dayjs/plugin/utc'
5 | import getTokenList from '../utils/tokenLists'
6 | import { healthClient } from '../apollo/client'
7 | import { SUBGRAPH_HEALTH } from '../apollo/queries'
8 | dayjs.extend(utc)
9 |
10 | const UPDATE = 'UPDATE'
11 | const UPDATE_TIMEFRAME = 'UPDATE_TIMEFRAME'
12 | const UPDATE_SESSION_START = 'UPDATE_SESSION_START'
13 | const UPDATED_SUPPORTED_TOKENS = 'UPDATED_SUPPORTED_TOKENS'
14 | const UPDATE_LATEST_BLOCK = 'UPDATE_LATEST_BLOCK'
15 | const UPDATE_HEAD_BLOCK = 'UPDATE_HEAD_BLOCK'
16 |
17 | const SUPPORTED_TOKENS = 'SUPPORTED_TOKENS'
18 | const TIME_KEY = 'TIME_KEY'
19 | const CURRENCY = 'CURRENCY'
20 | const SESSION_START = 'SESSION_START'
21 | const LATEST_BLOCK = 'LATEST_BLOCK'
22 | const HEAD_BLOCK = 'HEAD_BLOCK'
23 |
24 | const ApplicationContext = createContext()
25 |
26 | function useApplicationContext() {
27 | return useContext(ApplicationContext)
28 | }
29 |
30 | function reducer(state, { type, payload }) {
31 | switch (type) {
32 | case UPDATE: {
33 | const { currency } = payload
34 | return {
35 | ...state,
36 | [CURRENCY]: currency,
37 | }
38 | }
39 | case UPDATE_TIMEFRAME: {
40 | const { newTimeFrame } = payload
41 | return {
42 | ...state,
43 | [TIME_KEY]: newTimeFrame,
44 | }
45 | }
46 | case UPDATE_SESSION_START: {
47 | const { timestamp } = payload
48 | return {
49 | ...state,
50 | [SESSION_START]: timestamp,
51 | }
52 | }
53 |
54 | case UPDATE_LATEST_BLOCK: {
55 | const { block } = payload
56 | return {
57 | ...state,
58 | [LATEST_BLOCK]: block,
59 | }
60 | }
61 |
62 | case UPDATE_HEAD_BLOCK: {
63 | const { block } = payload
64 | return {
65 | ...state,
66 | [HEAD_BLOCK]: block,
67 | }
68 | }
69 |
70 | case UPDATED_SUPPORTED_TOKENS: {
71 | const { supportedTokens } = payload
72 | return {
73 | ...state,
74 | [SUPPORTED_TOKENS]: supportedTokens,
75 | }
76 | }
77 |
78 | default: {
79 | throw Error(`Unexpected action type in DataContext reducer: '${type}'.`)
80 | }
81 | }
82 | }
83 |
84 | const INITIAL_STATE = {
85 | CURRENCY: 'USD',
86 | TIME_KEY: timeframeOptions.ALL_TIME,
87 | }
88 |
89 | export default function Provider({ children }) {
90 | const [state, dispatch] = useReducer(reducer, INITIAL_STATE)
91 | const update = useCallback((currency) => {
92 | dispatch({
93 | type: UPDATE,
94 | payload: {
95 | currency,
96 | },
97 | })
98 | }, [])
99 |
100 | // global time window for charts - see timeframe options in constants
101 | const updateTimeframe = useCallback((newTimeFrame) => {
102 | dispatch({
103 | type: UPDATE_TIMEFRAME,
104 | payload: {
105 | newTimeFrame,
106 | },
107 | })
108 | }, [])
109 |
110 | // used for refresh button
111 | const updateSessionStart = useCallback((timestamp) => {
112 | dispatch({
113 | type: UPDATE_SESSION_START,
114 | payload: {
115 | timestamp,
116 | },
117 | })
118 | }, [])
119 |
120 | const updateSupportedTokens = useCallback((supportedTokens) => {
121 | dispatch({
122 | type: UPDATED_SUPPORTED_TOKENS,
123 | payload: {
124 | supportedTokens,
125 | },
126 | })
127 | }, [])
128 |
129 | const updateLatestBlock = useCallback((block) => {
130 | dispatch({
131 | type: UPDATE_LATEST_BLOCK,
132 | payload: {
133 | block,
134 | },
135 | })
136 | }, [])
137 |
138 | const updateHeadBlock = useCallback((block) => {
139 | dispatch({
140 | type: UPDATE_HEAD_BLOCK,
141 | payload: {
142 | block,
143 | },
144 | })
145 | }, [])
146 |
147 | return (
148 | [
151 | state,
152 | {
153 | update,
154 | updateSessionStart,
155 | updateTimeframe,
156 | updateSupportedTokens,
157 | updateLatestBlock,
158 | updateHeadBlock,
159 | },
160 | ],
161 | [state, update, updateTimeframe, updateSessionStart, updateSupportedTokens, updateLatestBlock, updateHeadBlock]
162 | )}
163 | >
164 | {children}
165 |
166 | )
167 | }
168 |
169 | export function useLatestBlocks() {
170 | const [state, { updateLatestBlock, updateHeadBlock }] = useApplicationContext()
171 |
172 | const latestBlock = state?.[LATEST_BLOCK]
173 | const headBlock = state?.[HEAD_BLOCK]
174 |
175 | useEffect(() => {
176 | async function fetch() {
177 | healthClient
178 | .query({
179 | query: SUBGRAPH_HEALTH,
180 | })
181 | .then((res) => {
182 | const syncedBlock = res.data.indexingStatusForCurrentVersion.chains[0].latestBlock.number
183 | const headBlock = res.data.indexingStatusForCurrentVersion.chains[0].chainHeadBlock.number
184 | if (syncedBlock && headBlock) {
185 | updateLatestBlock(syncedBlock)
186 | updateHeadBlock(headBlock)
187 | }
188 | })
189 | .catch((e) => {
190 | console.log(e)
191 | })
192 | }
193 | if (!latestBlock) {
194 | fetch()
195 | }
196 | }, [latestBlock, updateHeadBlock, updateLatestBlock])
197 |
198 | return [latestBlock, headBlock]
199 | }
200 |
201 | export function useCurrentCurrency() {
202 | const [state, { update }] = useApplicationContext()
203 | const toggleCurrency = useCallback(() => {
204 | if (state.currency === 'ETH') {
205 | update('USD')
206 | } else {
207 | update('ETH')
208 | }
209 | }, [state, update])
210 | return [state[CURRENCY], toggleCurrency]
211 | }
212 |
213 | export function useTimeframe() {
214 | const [state, { updateTimeframe }] = useApplicationContext()
215 | const activeTimeframe = state?.[`TIME_KEY`]
216 | return [activeTimeframe, updateTimeframe]
217 | }
218 |
219 | export function useStartTimestamp() {
220 | const [activeWindow] = useTimeframe()
221 | const [startDateTimestamp, setStartDateTimestamp] = useState()
222 |
223 | // monitor the old date fetched
224 | useEffect(() => {
225 | let startTime =
226 | dayjs
227 | .utc()
228 | .subtract(
229 | 1,
230 | activeWindow === timeframeOptions.week ? 'week' : activeWindow === timeframeOptions.ALL_TIME ? 'year' : 'year'
231 | )
232 | .startOf('day')
233 | .unix() - 1
234 | // if we find a new start time less than the current startrtime - update oldest pooint to fetch
235 | setStartDateTimestamp(startTime)
236 | }, [activeWindow, startDateTimestamp])
237 |
238 | return startDateTimestamp
239 | }
240 |
241 | // keep track of session length for refresh ticker
242 | export function useSessionStart() {
243 | const [state, { updateSessionStart }] = useApplicationContext()
244 | const sessionStart = state?.[SESSION_START]
245 |
246 | useEffect(() => {
247 | if (!sessionStart) {
248 | updateSessionStart(Date.now())
249 | }
250 | })
251 |
252 | const [seconds, setSeconds] = useState(0)
253 |
254 | useEffect(() => {
255 | let interval = null
256 | interval = setInterval(() => {
257 | setSeconds(Date.now() - sessionStart ?? Date.now())
258 | }, 1000)
259 |
260 | return () => clearInterval(interval)
261 | }, [seconds, sessionStart])
262 |
263 | return parseInt(seconds / 1000)
264 | }
265 |
266 | export function useListedTokens() {
267 | const [state, { updateSupportedTokens }] = useApplicationContext()
268 | const supportedTokens = state?.[SUPPORTED_TOKENS]
269 |
270 | useEffect(() => {
271 | async function fetchList() {
272 | const allFetched = await SUPPORTED_LIST_URLS__NO_ENS.reduce(async (fetchedTokens, url) => {
273 | const tokensSoFar = await fetchedTokens
274 | const newTokens = await getTokenList(url)
275 | if (newTokens?.tokens) {
276 | return Promise.resolve([...tokensSoFar, ...newTokens.tokens])
277 | }
278 | }, Promise.resolve([]))
279 | let formatted = allFetched?.map((t) => t.address.toLowerCase())
280 | updateSupportedTokens(formatted)
281 | }
282 | if (!supportedTokens) {
283 | try {
284 | fetchList()
285 | } catch {
286 | console.log('Error fetching')
287 | }
288 | }
289 | }, [updateSupportedTokens, supportedTokens])
290 |
291 | return supportedTokens
292 | }
293 |
--------------------------------------------------------------------------------
/cloudformation.template.json:
--------------------------------------------------------------------------------
1 | {
2 | "AWSTemplateFormatVersion": "2010-09-09",
3 | "Description": "info.uniswap.org site",
4 | "Outputs": {
5 | "DeploymentAccessKeyId": {
6 | "Description": "Access key ID for deploying to the S3 bucket",
7 | "Value": {
8 | "Ref": "DeploymentUserAccessKey"
9 | }
10 | },
11 | "DeploymentSecretAccessKey": {
12 | "Description": "Secret access key for deploying to the S3 bucket",
13 | "Value": {
14 | "Fn::GetAtt": ["DeploymentUserAccessKey", "SecretAccessKey"]
15 | }
16 | }
17 | },
18 | "Resources": {
19 | "DeploymentUser": {
20 | "Type": "AWS::IAM::User",
21 | "Description": "The user that will be used to deploy to the assets bucket",
22 | "Properties": {
23 | "Policies": [
24 | {
25 | "PolicyDocument": {
26 | "Version": "2012-10-17",
27 | "Statement": [
28 | {
29 | "Sid": "1",
30 | "Effect": "Allow",
31 | "Action": ["s3:PutObject", "s3:GetObject", "s3:ListBucket"],
32 | "Resource": [
33 | {
34 | "Fn::Join": [
35 | "",
36 | [
37 | "arn:aws:s3:::",
38 | {
39 | "Ref": "AssetsBucket"
40 | },
41 | "/*"
42 | ]
43 | ]
44 | },
45 | {
46 | "Fn::Join": [
47 | "",
48 | [
49 | "arn:aws:s3:::",
50 | {
51 | "Ref": "AssetsBucket"
52 | }
53 | ]
54 | ]
55 | }
56 | ]
57 | }
58 | ]
59 | },
60 | "PolicyName": "deploy-to-assets-bucket"
61 | }
62 | ]
63 | }
64 | },
65 | "DeploymentUserAccessKey": {
66 | "Type": "AWS::IAM::AccessKey",
67 | "Description": "Access key for the deployment user",
68 | "Properties": {
69 | "UserName": {
70 | "Ref": "DeploymentUser"
71 | }
72 | }
73 | },
74 | "ACMCertificate": {
75 | "Type": "AWS::CertificateManager::Certificate",
76 | "Description": "The certificate used to secure the CloudFront distribution",
77 | "Properties": {
78 | "DomainName": "info.uniswap.org",
79 | "ValidationMethod": "DNS",
80 | "Tags": [
81 | {
82 | "Key": "Name",
83 | "Value": "info.uniswap.org"
84 | },
85 | {
86 | "Key": "Stack",
87 | "Value": {
88 | "Ref": "AWS::StackName"
89 | }
90 | }
91 | ]
92 | }
93 | },
94 | "AssetsBucket": {
95 | "Type": "AWS::S3::Bucket",
96 | "Description": "Bucket containing the site deployed files",
97 | "Properties": {
98 | "VersioningConfiguration": {
99 | "Status": "Enabled"
100 | },
101 | "AccessControl": "Private",
102 | "WebsiteConfiguration": {
103 | "IndexDocument": "index.html"
104 | },
105 | "Tags": [
106 | {
107 | "Key": "Template",
108 | "Value": {
109 | "Ref": "AWS::StackName"
110 | }
111 | }
112 | ],
113 | "PublicAccessBlockConfiguration": {
114 | "BlockPublicAcls": true,
115 | "BlockPublicPolicy": true,
116 | "IgnorePublicAcls": true,
117 | "RestrictPublicBuckets": true
118 | }
119 | }
120 | },
121 | "AssetsBucketPolicy": {
122 | "Type": "AWS::S3::BucketPolicy",
123 | "Description": "Policy that allows the CloudFront access identity to read from the bucket",
124 | "Properties": {
125 | "Bucket": {
126 | "Ref": "AssetsBucket"
127 | },
128 | "PolicyDocument": {
129 | "Version": "2012-10-17",
130 | "Statement": [
131 | {
132 | "Sid": "AllowCloudFront",
133 | "Effect": "Allow",
134 | "Principal": {
135 | "AWS": {
136 | "Fn::Join": [
137 | "",
138 | [
139 | "arn:aws:iam::cloudfront:user/CloudFront Origin Access Identity ",
140 | {
141 | "Ref": "CloudFrontAccessIdentity"
142 | }
143 | ]
144 | ]
145 | }
146 | },
147 | "Action": ["s3:GetObject", "s3:ListBucket"],
148 | "Resource": [
149 | {
150 | "Fn::Join": [
151 | "",
152 | [
153 | {
154 | "Fn::GetAtt": ["AssetsBucket", "Arn"]
155 | },
156 | "/*"
157 | ]
158 | ]
159 | },
160 | {
161 | "Fn::GetAtt": ["AssetsBucket", "Arn"]
162 | }
163 | ]
164 | },
165 | {
166 | "Sid": "DenyPutFromOtherUsers",
167 | "Effect": "Deny",
168 | "NotPrincipal": {
169 | "AWS": {
170 | "Fn::GetAtt": ["DeploymentUser", "Arn"]
171 | }
172 | },
173 | "Action": "s3:PutObject",
174 | "Resource": {
175 | "Fn::Join": [
176 | "",
177 | [
178 | {
179 | "Fn::GetAtt": ["AssetsBucket", "Arn"]
180 | },
181 | "/*"
182 | ]
183 | ]
184 | }
185 | }
186 | ]
187 | }
188 | }
189 | },
190 | "CloudFrontAccessIdentity": {
191 | "Type": "AWS::CloudFront::CloudFrontOriginAccessIdentity",
192 | "Description": "Identity used to read from the assets bucket",
193 | "Properties": {
194 | "CloudFrontOriginAccessIdentityConfig": {
195 | "Comment": {
196 | "Ref": "AWS::StackName"
197 | }
198 | }
199 | }
200 | },
201 | "CloudFrontDistribution": {
202 | "Type": "AWS::CloudFront::Distribution",
203 | "Description": "Distribution that produces a CNAME for the assets bucket",
204 | "Properties": {
205 | "Tags": [
206 | {
207 | "Key": "Template",
208 | "Value": {
209 | "Ref": "AWS::StackName"
210 | }
211 | }
212 | ],
213 | "DistributionConfig": {
214 | "CustomErrorResponses": [
215 | {
216 | "ResponseCode": 200,
217 | "ErrorCode": 404,
218 | "ErrorCachingMinTTL": 0,
219 | "ResponsePagePath": "/"
220 | }
221 | ],
222 | "Comment": "info.uniswap.org",
223 | "Enabled": true,
224 | "Aliases": ["info.uniswap.org"],
225 | "DefaultRootObject": "index.html",
226 | "HttpVersion": "http2",
227 | "Origins": [
228 | {
229 | "DomainName": {
230 | "Fn::GetAtt": ["AssetsBucket", "DomainName"]
231 | },
232 | "Id": "assets-bucket",
233 | "S3OriginConfig": {
234 | "OriginAccessIdentity": {
235 | "Fn::Join": [
236 | "/",
237 | [
238 | "origin-access-identity",
239 | "cloudfront",
240 | {
241 | "Ref": "CloudFrontAccessIdentity"
242 | }
243 | ]
244 | ]
245 | }
246 | }
247 | }
248 | ],
249 | "ViewerCertificate": {
250 | "AcmCertificateArn": {
251 | "Ref": "ACMCertificate"
252 | },
253 | "SslSupportMethod": "sni-only"
254 | },
255 | "DefaultCacheBehavior": {
256 | "Compress": true,
257 | "AllowedMethods": ["GET", "HEAD"],
258 | "ForwardedValues": {
259 | "QueryString": false
260 | },
261 | "TargetOriginId": "assets-bucket",
262 | "ViewerProtocolPolicy": "redirect-to-https"
263 | }
264 | }
265 | }
266 | }
267 | }
268 | }
269 |
--------------------------------------------------------------------------------