(
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/Select/popout.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react'
2 | import { Button } from 'rebass'
3 | import styled from 'styled-components'
4 |
5 | import Select from 'react-select'
6 |
7 | const selectStyles = {
8 | control: (styles) => ({
9 | ...styles,
10 | padding: '1rem',
11 | border: 'none',
12 | backgroundColor: 'transparent',
13 | borderBottom: '1px solid #e1e1e1',
14 | boxShadow: 'none',
15 | borderRadius: 0,
16 | ':hover': {
17 | borderColor: '#e1e1e1',
18 | },
19 | }),
20 | valueContainer: (styles) => ({
21 | ...styles,
22 | padding: 0,
23 | }),
24 | menu: () => null,
25 | }
26 |
27 | export default class Popout extends Component {
28 | state = { isOpen: false, value: undefined }
29 | toggleOpen = () => {
30 | this.setState((state) => ({ isOpen: !state.isOpen }))
31 | }
32 |
33 | onSelectChange = (value) => {
34 | this.toggleOpen()
35 | this.setState({ value })
36 | }
37 |
38 | render() {
39 | const { isOpen, value } = this.state
40 | return (
41 |
56 | {value ? value.label : 'Select...'}
57 |
58 | }
59 | >
60 |
75 |
76 | )
77 | }
78 | }
79 |
80 | // styled components
81 | const Wrapper = styled.div`
82 | @media only screen and (min-width: 768px) {
83 | max-width: 560px;
84 | max-height: 768px;
85 | position: absolute;
86 | margin-left: auto;
87 | margin-right: auto;
88 | border-radius: 1rem;
89 | padding-bottom: 1rem;
90 | left: 0;
91 | right: 0;
92 | bottom: 0;
93 | top: 0;
94 | margin-top: 4rem;
95 | }
96 |
97 | background-color: #fff;
98 | position: relative;
99 | bottom: 21rem;
100 | width: 100%;
101 | height: 21rem;
102 | z-index: 2000;
103 | border-top-left-radius: 1rem;
104 | border-top-right-radius: 1rem;
105 | transition: 0.25s ease-in-out;
106 | `
107 |
108 | const Menu = (props) =>
109 |
110 | const Blanket = (props) => (
111 |
123 | )
124 |
125 | const Dropdown = ({ children, isOpen, target, onClose }) => (
126 | <>
127 | {target}
128 | {isOpen ? : null}
129 | {isOpen ? : null}
130 |
131 | )
132 |
133 | const DropdownIndicator = () => (
134 |
135 | 🔎
136 |
137 | )
138 |
--------------------------------------------------------------------------------
/src/components/Select/styles.js:
--------------------------------------------------------------------------------
1 | import theme from '../Theme/theme'
2 | const color = theme.colors
3 |
4 | export const customStyles = {
5 | control: (styles, state) => ({
6 | ...styles,
7 | borderRadius: 20,
8 | backgroundColor: 'white',
9 | color: '#6C7284',
10 | maxHeight: '32px',
11 | margin: 0,
12 | padding: 0,
13 | border: 'none',
14 | boxShadow: 'none',
15 | ':hover': {
16 | borderColor: color.zircon,
17 | cursor: 'pointer',
18 | overflow: 'hidden',
19 | },
20 | }),
21 | placeholder: (styles) => ({
22 | ...styles,
23 | color: '#6C7284',
24 | }),
25 | input: (styles) => ({
26 | ...styles,
27 | color: '#6C7284',
28 | overflow: 'hidden',
29 | }),
30 | singleValue: (styles) => ({
31 | ...styles,
32 | color: '#6C7284',
33 | width: '100%',
34 | paddingRight: '8px',
35 | }),
36 | indicatorSeparator: () => ({
37 | display: 'none',
38 | }),
39 | dropdownIndicator: (styles) => ({
40 | ...styles,
41 | color: '#6C7284',
42 | paddingRight: 0,
43 | }),
44 | valueContainer: (styles) => ({
45 | ...styles,
46 | paddingLeft: 16,
47 | textAlign: 'right',
48 | overflow: 'scroll',
49 | }),
50 | menuPlacer: (styles) => ({
51 | ...styles,
52 | }),
53 | option: (styles, state) => ({
54 | ...styles,
55 | margin: '0px 0px',
56 | padding: 'calc(12px - 1px) calc(12px - 1px)',
57 | width: '',
58 | lineHeight: 1,
59 | color: state.isSelected ? '#000' : '',
60 | border: state.isSelected ? '1px solid var(--c-zircon)' : '1px solid transparent',
61 | borderRadius: state.isSelected && 30,
62 | backgroundColor: state.isSelected ? 'var(--c-alabaster)' : '',
63 | ':hover': {
64 | backgroundColor: 'var(--c-alabaster)',
65 | cursor: 'pointer',
66 | },
67 | }),
68 | menu: (styles) => ({
69 | ...styles,
70 | borderRadius: 16,
71 | boxShadow: '0 4px 8px 0 rgba(47, 128, 237, 0.1), 0 0 0 0.5px var(--c-zircon)',
72 | overflow: 'hidden',
73 | padding: 0,
74 | }),
75 | menuList: (styles) => ({
76 | ...styles,
77 | color: color.text,
78 | padding: 0,
79 | }),
80 | }
81 |
82 | export const customStylesMobile = {
83 | control: (styles, state) => ({
84 | ...styles,
85 | borderRadius: 12,
86 | backgroundColor: 'white',
87 | color: '#6C7284',
88 | maxHeight: '32px',
89 | margin: 0,
90 | padding: 0,
91 | boxShadow: 'none',
92 | ':hover': {
93 | borderColor: color.zircon,
94 | cursor: 'pointer',
95 | },
96 | }),
97 | placeholder: (styles) => ({
98 | ...styles,
99 | color: '#6C7284',
100 | }),
101 | input: (styles) => ({
102 | ...styles,
103 | color: '6C7284',
104 | overflow: 'hidden',
105 | }),
106 | singleValue: (styles) => ({
107 | ...styles,
108 | color: '#6C7284',
109 | }),
110 | indicatorSeparator: () => ({
111 | display: 'none',
112 | }),
113 | dropdownIndicator: (styles) => ({
114 | ...styles,
115 | paddingRight: 0,
116 | }),
117 | valueContainer: (styles) => ({
118 | ...styles,
119 | paddingLeft: 16,
120 | }),
121 | menuPlacer: (styles) => ({
122 | ...styles,
123 | }),
124 | option: (styles, state) => ({
125 | ...styles,
126 | margin: '20px 4px',
127 | padding: 'calc(16px - 1px) 16x',
128 | width: '',
129 | lineHeight: 1,
130 | color: state.isSelected ? '#000' : '',
131 | // border: state.isSelected ? '1px solid var(--c-zircon)' : '1px solid transparent',
132 | borderRadius: state.isSelected && 30,
133 | backgroundColor: state.isSelected ? 'var(--c-alabaster)' : '',
134 | ':hover': {
135 | backgroundColor: 'var(--c-alabaster)',
136 | cursor: 'pointer',
137 | },
138 | }),
139 | menu: (styles) => ({
140 | ...styles,
141 | borderRadius: 20,
142 | boxShadow: '0 4px 8px 0 rgba(47, 128, 237, 0.1), 0 0 0 0.5px var(--c-zircon)',
143 | overflow: 'hidden',
144 | paddingBottom: '12px',
145 | }),
146 | menuList: (styles) => ({
147 | ...styles,
148 | color: color.text,
149 | padding: '8px',
150 | }),
151 | }
152 |
153 | export const customStylesTime = {
154 | control: (styles, state) => ({
155 | ...styles,
156 | borderRadius: 20,
157 | backgroundColor: 'white',
158 | color: '#6C7284',
159 | maxHeight: '32px',
160 | margin: 0,
161 | padding: 0,
162 | border: 'none',
163 | boxShadow: 'none',
164 | ':hover': {
165 | borderColor: color.zircon,
166 | cursor: 'pointer',
167 | },
168 | }),
169 | placeholder: (styles) => ({
170 | ...styles,
171 | color: '#6C7284',
172 | }),
173 | input: (styles) => ({
174 | ...styles,
175 | color: 'transparent',
176 | }),
177 | singleValue: (styles) => ({
178 | ...styles,
179 | color: '#6C7284',
180 | width: '100%',
181 | paddingRight: '8px',
182 | }),
183 | indicatorSeparator: () => ({
184 | display: 'none',
185 | }),
186 | dropdownIndicator: (styles) => ({
187 | ...styles,
188 | color: '#6C7284',
189 | paddingRight: 0,
190 | }),
191 | valueContainer: (styles) => ({
192 | ...styles,
193 | paddingLeft: 16,
194 | overflow: 'visible',
195 | textAlign: 'right',
196 | }),
197 | menuPlacer: (styles) => ({
198 | ...styles,
199 | }),
200 | option: (styles, state) => ({
201 | ...styles,
202 | margin: '0px 0px',
203 | padding: 'calc(12px - 1px) calc(24px - 1px)',
204 | width: '',
205 | lineHeight: 1,
206 | color: state.isSelected ? '#000' : '',
207 | border: state.isSelected ? '1px solid var(--c-zircon)' : '1px solid transparent',
208 | borderRadius: state.isSelected && 30,
209 | backgroundColor: state.isSelected ? 'var(--c-alabaster)' : '',
210 | ':hover': {
211 | backgroundColor: 'var(--c-alabaster)',
212 | cursor: 'pointer',
213 | },
214 | }),
215 | menu: (styles) => ({
216 | ...styles,
217 | borderRadius: 16,
218 | boxShadow: '0 4px 8px 0 rgba(47, 128, 237, 0.1), 0 0 0 0.5px var(--c-zircon)',
219 | overflow: 'hidden',
220 | padding: 0,
221 | }),
222 | menuList: (styles) => ({
223 | ...styles,
224 | color: color.text,
225 | padding: 0,
226 | }),
227 | }
228 |
229 | export default customStyles
230 |
--------------------------------------------------------------------------------
/src/components/SideNav/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import styled from 'styled-components'
3 | import { AutoColumn } from '../Column'
4 | import Title from '../Title'
5 | import { BasicLink } from '../Link'
6 | import { useMedia } from 'react-use'
7 | import { transparentize } from 'polished'
8 | import { TYPE } from '../../Theme'
9 | import { withRouter } from 'react-router-dom'
10 | import { TrendingUp, List, PieChart, Disc } from 'react-feather'
11 | import Link from '../Link'
12 | import { useSessionStart } from '../../contexts/Application'
13 | import { useDarkModeManager } from '../../contexts/LocalStorage'
14 | import Toggle from '../Toggle'
15 |
16 | const Wrapper = styled.div`
17 | height: ${({ isMobile }) => (isMobile ? 'initial' : '100vh')};
18 | background-color: ${({ theme }) => transparentize(0.4, theme.bg1)};
19 | color: ${({ theme }) => theme.text1};
20 | padding: 0.5rem 0.5rem 0.5rem 0.75rem;
21 | position: sticky;
22 | top: 0px;
23 | z-index: 9999;
24 | box-sizing: border-box;
25 | /* background-color: #1b1c22; */
26 | background: linear-gradient(193.68deg, #1b1c22 0.68%, #000000 100.48%);
27 | color: ${({ theme }) => theme.bg2};
28 |
29 | @media screen and (max-width: 800px) {
30 | grid-template-columns: 1fr;
31 | position: relative;
32 | }
33 |
34 | @media screen and (max-width: 600px) {
35 | padding: 1rem;
36 | }
37 | `
38 |
39 | const Option = styled.div`
40 | font-weight: 500;
41 | font-size: 14px;
42 | opacity: ${({ activeText }) => (activeText ? 1 : 0.6)};
43 | color: ${({ theme }) => theme.white};
44 | display: flex;
45 | :hover {
46 | opacity: 1;
47 | }
48 | `
49 |
50 | const DesktopWrapper = styled.div`
51 | display: flex;
52 | flex-direction: column;
53 | justify-content: space-between;
54 | height: 100vh;
55 | `
56 |
57 | const MobileWrapper = styled.div`
58 | display: flex;
59 | justify-content: space-between;
60 | align-items: center;
61 | `
62 |
63 | const HeaderText = styled.div`
64 | margin-right: 0.75rem;
65 | font-size: 0.825rem;
66 | font-weight: 500;
67 | display: inline-box;
68 | display: -webkit-inline-box;
69 | opacity: 0.8;
70 | :hover {
71 | opacity: 1;
72 | }
73 | a {
74 | color: ${({ theme }) => theme.white};
75 | }
76 | `
77 |
78 | const Polling = styled.div`
79 | position: fixed;
80 | display: flex;
81 | left: 0;
82 | bottom: 0;
83 | padding: 1rem;
84 | color: white;
85 | opacity: 0.4;
86 | transition: opacity 0.25s ease;
87 | :hover {
88 | opacity: 1;
89 | }
90 | `
91 | const PollingDot = styled.div`
92 | width: 8px;
93 | height: 8px;
94 | min-height: 8px;
95 | min-width: 8px;
96 | margin-right: 0.5rem;
97 | margin-top: 3px;
98 | border-radius: 50%;
99 | background-color: ${({ theme }) => theme.green1};
100 | `
101 |
102 | function SideNav({ history }) {
103 | const below1080 = useMedia('(max-width: 1080px)')
104 |
105 | const below1180 = useMedia('(max-width: 1180px)')
106 |
107 | const seconds = useSessionStart()
108 |
109 | const [isDark, toggleDarkMode] = useDarkModeManager()
110 |
111 | return (
112 |
113 | {!below1080 ? (
114 |
115 |
116 |
117 | {!below1080 && (
118 |
119 |
120 |
124 |
125 |
126 |
136 |
137 |
138 |
148 |
149 |
150 |
151 |
161 |
162 |
163 | )}
164 |
165 |
166 |
167 |
168 | Uniswap.org
169 |
170 |
171 |
172 |
173 | V1 Analytics
174 |
175 |
176 |
177 |
178 | Docs
179 |
180 |
181 |
182 |
183 | Discord
184 |
185 |
186 |
187 |
188 | Twitter
189 |
190 |
191 |
192 |
193 | {!below1180 && (
194 |
195 |
196 |
197 |
198 | Updated {!!seconds ? seconds + 's' : '-'} ago
199 |
200 |
201 |
202 | )}
203 |
204 | ) : (
205 |
206 |
207 |
208 | )}
209 |
210 | )
211 | }
212 |
213 | export default withRouter(SideNav)
214 |
--------------------------------------------------------------------------------
/src/components/Title/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { useHistory } from 'react-router-dom'
3 | import styled from 'styled-components'
4 |
5 | import { Flex } from 'rebass'
6 | import Link from '../Link'
7 | import { RowFixed } from '../Row'
8 | import Logo from '../../assets/logo_white.svg'
9 | import Wordmark from '../../assets/wordmark_white.svg'
10 |
11 | import { BasicLink } from '../Link'
12 | import { useMedia } from 'react-use'
13 |
14 | const TitleWrapper = styled.div`
15 | text-decoration: none;
16 | z-index: 10;
17 | width: 100%;
18 | &:hover {
19 | cursor: pointer;
20 | }
21 | `
22 |
23 | const UniIcon = styled(Link)`
24 | transition: transform 0.3s ease;
25 | :hover {
26 | transform: rotate(-5deg);
27 | }
28 | `
29 |
30 | const Option = styled.div`
31 | font-weight: 500;
32 | font-size: 14px;
33 | opacity: ${({ activeText }) => (activeText ? 1 : 0.6)};
34 | color: ${({ theme }) => theme.white};
35 | display: flex;
36 | margin-left: 12px;
37 | :hover {
38 | opacity: 1;
39 | }
40 | `
41 |
42 | export default function Title() {
43 | const history = useHistory()
44 | const below1080 = useMedia('(max-width: 1080px)')
45 |
46 | return (
47 | history.push('/')}>
48 |
49 |
50 | history.push('/')}>
51 | 
52 |
53 | {!below1080 && (
54 | 
55 | )}
56 |
57 | {below1080 && (
58 |
59 |
60 |
61 |
62 |
63 |
72 |
73 |
74 |
83 |
84 |
85 |
86 |
95 |
96 |
97 | )}
98 |
99 |
100 | )
101 | }
102 |
--------------------------------------------------------------------------------
/src/components/Toggle/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import styled from 'styled-components'
3 | import { Sun, Moon } from 'react-feather'
4 |
5 | const IconWrapper = styled.div<{ isActive?: boolean }>`
6 | opacity: ${({ isActive }) => (isActive ? 0.8 : 0.4)};
7 |
8 | :hover {
9 | opacity: 1;
10 | }
11 | `
12 |
13 | const StyledToggle = styled.div`
14 | display: flex;
15 | width: fit-content;
16 | cursor: pointer;
17 | text-decoration: none;
18 | margin-top: 1rem;
19 | color: white;
20 |
21 | :hover {
22 | text-decoration: none;
23 | }
24 | `
25 |
26 | export interface ToggleProps {
27 | isActive: boolean
28 | toggle: () => void
29 | }
30 |
31 | export default function Toggle({ isActive, toggle }: ToggleProps) {
32 | return (
33 |
34 |
35 |
36 |
37 |
38 |
39 | {' / '}
40 |
41 |
42 |
43 |
44 |
45 |
46 | )
47 | }
48 |
--------------------------------------------------------------------------------
/src/components/TokenLogo/index.js:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect } from 'react'
2 | import styled from 'styled-components'
3 | import { isAddress } from '../../utils/index.js'
4 | import EthereumLogo from '../../assets/eth.png'
5 |
6 | const BAD_IMAGES = {}
7 |
8 | const Inline = styled.div`
9 | display: flex;
10 | align-items: center;
11 | align-self: center;
12 | `
13 |
14 | const Image = styled.img`
15 | width: ${({ size }) => size};
16 | height: ${({ size }) => size};
17 | background-color: white;
18 | border-radius: 50%;
19 | box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.075);
20 | `
21 |
22 | const StyledEthereumLogo = styled.div`
23 | display: flex;
24 | align-items: center;
25 | justify-content: center;
26 |
27 | > img {
28 | width: ${({ size }) => size};
29 | height: ${({ size }) => size};
30 | }
31 | `
32 |
33 | export default function TokenLogo({ address, header = false, size = '24px', ...rest }) {
34 | const [error, setError] = useState(false)
35 |
36 | useEffect(() => {
37 | setError(false)
38 | }, [address])
39 |
40 | if (error || BAD_IMAGES[address]) {
41 | return (
42 |
43 |
44 | 🤔
45 |
46 |
47 | )
48 | }
49 |
50 | // hard coded fixes for trust wallet api issues
51 | if (address?.toLowerCase() === '0x5e74c9036fb86bd7ecdcb084a0673efc32ea31cb') {
52 | address = '0x42456d7084eacf4083f1140d3229471bba2949a8'
53 | }
54 |
55 | if (address?.toLowerCase() === '0xc011a73ee8576fb46f5e1c5751ca3b9fe0af2a6f') {
56 | address = '0xc011a72400e58ecd99ee497cf89e3775d4bd732f'
57 | }
58 |
59 | if (address?.toLowerCase() === '0xc02aaa39b223fe8d0a0e5c4f27ead9083c756cc2') {
60 | return (
61 |
62 | 
70 |
71 | )
72 | }
73 |
74 | const path = `https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/ethereum/assets/${isAddress(
75 | address
76 | )}/logo.png`
77 |
78 | return (
79 |
80 | {
86 | BAD_IMAGES[address] = true
87 | setError(true)
88 | event.preventDefault()
89 | }}
90 | />
91 |
92 | )
93 | }
94 |
--------------------------------------------------------------------------------
/src/components/TradingviewChart/index.js:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect, useRef } from 'react'
2 | import { createChart } from 'lightweight-charts'
3 | import dayjs from 'dayjs'
4 | import utc from 'dayjs/plugin/utc'
5 | import { formattedNum } from '../../utils'
6 | import styled from 'styled-components'
7 | import { usePrevious } from 'react-use'
8 | import { Play } from 'react-feather'
9 | import { useDarkModeManager } from '../../contexts/LocalStorage'
10 | import { IconWrapper } from '..'
11 |
12 | dayjs.extend(utc)
13 |
14 | export const CHART_TYPES = {
15 | BAR: 'BAR',
16 | AREA: 'AREA',
17 | }
18 |
19 | const Wrapper = styled.div`
20 | position: relative;
21 | `
22 |
23 | // constant height for charts
24 | const HEIGHT = 300
25 |
26 | const TradingViewChart = ({
27 | type = CHART_TYPES.BAR,
28 | data,
29 | base,
30 | baseChange,
31 | field,
32 | title,
33 | width,
34 | useWeekly = false,
35 | }) => {
36 | // reference for DOM element to create with chart
37 | const ref = useRef()
38 |
39 | // pointer to the chart object
40 | const [chartCreated, setChartCreated] = useState(false)
41 | const dataPrev = usePrevious(data)
42 |
43 | useEffect(() => {
44 | if (data !== dataPrev && chartCreated && type === CHART_TYPES.BAR) {
45 | // remove the tooltip element
46 | let tooltip = document.getElementById('tooltip-id' + type)
47 | let node = document.getElementById('test-id' + type)
48 | node.removeChild(tooltip)
49 | chartCreated.resize(0, 0)
50 | setChartCreated()
51 | }
52 | }, [chartCreated, data, dataPrev, type])
53 |
54 | // parese the data and format for tardingview consumption
55 | const formattedData = data?.map((entry) => {
56 | return {
57 | time: dayjs.unix(entry.date).utc().format('YYYY-MM-DD'),
58 | value: parseFloat(entry[field]),
59 | }
60 | })
61 |
62 | // adjust the scale based on the type of chart
63 | const topScale = type === CHART_TYPES.AREA ? 0.32 : 0.2
64 |
65 | const [darkMode] = useDarkModeManager()
66 | const textColor = darkMode ? 'white' : 'black'
67 | const previousTheme = usePrevious(darkMode)
68 |
69 | // reset the chart if them switches
70 | useEffect(() => {
71 | if (chartCreated && previousTheme !== darkMode) {
72 | // remove the tooltip element
73 | let tooltip = document.getElementById('tooltip-id' + type)
74 | let node = document.getElementById('test-id' + type)
75 | node.removeChild(tooltip)
76 | chartCreated.resize(0, 0)
77 | setChartCreated()
78 | }
79 | }, [chartCreated, darkMode, previousTheme, type])
80 |
81 | // if no chart created yet, create one with options and add to DOM manually
82 | useEffect(() => {
83 | if (!chartCreated && formattedData) {
84 | var chart = createChart(ref.current, {
85 | width: width,
86 | height: HEIGHT,
87 | layout: {
88 | backgroundColor: 'transparent',
89 | textColor: textColor,
90 | },
91 | rightPriceScale: {
92 | scaleMargins: {
93 | top: topScale,
94 | bottom: 0,
95 | },
96 | borderVisible: false,
97 | },
98 | timeScale: {
99 | borderVisible: false,
100 | },
101 | grid: {
102 | horzLines: {
103 | color: 'rgba(197, 203, 206, 0.5)',
104 | visible: false,
105 | },
106 | vertLines: {
107 | color: 'rgba(197, 203, 206, 0.5)',
108 | visible: false,
109 | },
110 | },
111 | crosshair: {
112 | horzLine: {
113 | visible: false,
114 | labelVisible: false,
115 | },
116 | vertLine: {
117 | visible: true,
118 | style: 0,
119 | width: 2,
120 | color: 'rgba(32, 38, 46, 0.1)',
121 | labelVisible: false,
122 | },
123 | },
124 | localization: {
125 | priceFormatter: (val) => formattedNum(val, true),
126 | },
127 | })
128 |
129 | var series =
130 | type === CHART_TYPES.BAR
131 | ? chart.addHistogramSeries({
132 | color: '#ff007a',
133 | priceFormat: {
134 | type: 'volume',
135 | },
136 | scaleMargins: {
137 | top: 0.32,
138 | bottom: 0,
139 | },
140 | lineColor: '#ff007a',
141 | lineWidth: 3,
142 | })
143 | : chart.addAreaSeries({
144 | topColor: '#ff007a',
145 | bottomColor: 'rgba(255, 0, 122, 0)',
146 | lineColor: '#ff007a',
147 | lineWidth: 3,
148 | })
149 |
150 | series.setData(formattedData)
151 | var toolTip = document.createElement('div')
152 | toolTip.setAttribute('id', 'tooltip-id' + type)
153 | toolTip.className = darkMode ? 'three-line-legend-dark' : 'three-line-legend'
154 | ref.current.appendChild(toolTip)
155 | toolTip.style.display = 'block'
156 | toolTip.style.fontWeight = '500'
157 | toolTip.style.left = -4 + 'px'
158 | toolTip.style.top = '-' + 8 + 'px'
159 | toolTip.style.backgroundColor = 'transparent'
160 |
161 | // format numbers
162 | let percentChange = baseChange?.toFixed(2)
163 | let formattedPercentChange = (percentChange > 0 ? '+' : '') + percentChange + '%'
164 | let color = percentChange >= 0 ? 'green' : 'red'
165 |
166 | // get the title of the chart
167 | function setLastBarText() {
168 | toolTip.innerHTML =
169 | `${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/components/UniPrice/index.js:
--------------------------------------------------------------------------------
1 | import React, { useMemo } from 'react'
2 | import styled from 'styled-components'
3 | import Panel from '../Panel'
4 | import { AutoColumn } from '../Column'
5 | import { RowFixed } from '../Row'
6 | import { TYPE } from '../../Theme'
7 | import { usePairData } from '../../contexts/PairData'
8 | import { formattedNum } from '../../utils'
9 |
10 | const PriceCard = styled(Panel)`
11 | position: absolute;
12 | right: -220px;
13 | width: 220px;
14 | top: -20px;
15 | z-index: 9999;
16 | height: fit-content;
17 | background-color: ${({ theme }) => theme.bg1};
18 | `
19 |
20 | function formatPercent(rawPercent) {
21 | if (rawPercent < 0.01) {
22 | return '<1%'
23 | } else return parseFloat(rawPercent * 100).toFixed(0) + '%'
24 | }
25 |
26 | export default function UniPrice() {
27 | const daiPair = usePairData('0xa478c2975ab1ea89e8196811f51a7b7ade33eb11')
28 | const usdcPair = usePairData('0xb4e16d0168e52d35cacd2c6185b44281ec28c9dc')
29 | const usdtPair = usePairData('0x0d4a11d5eeaac28ec3f61d100daf4d40471f1852')
30 |
31 | const totalLiquidity = useMemo(() => {
32 | return daiPair && usdcPair && usdtPair
33 | ? daiPair.trackedReserveUSD + usdcPair.trackedReserveUSD + usdtPair.trackedReserveUSD
34 | : 0
35 | }, [daiPair, usdcPair, usdtPair])
36 |
37 | const daiPerEth = daiPair ? parseFloat(daiPair.token0Price).toFixed(2) : '-'
38 | const usdcPerEth = usdcPair ? parseFloat(usdcPair.token0Price).toFixed(2) : '-'
39 | const usdtPerEth = usdtPair ? parseFloat(usdtPair.token1Price).toFixed(2) : '-'
40 |
41 | return (
42 |
43 |
44 |
45 | DAI/ETH: {formattedNum(daiPerEth, true)}
46 |
47 | {daiPair && totalLiquidity ? formatPercent(daiPair.trackedReserveUSD / totalLiquidity) : '-'}
48 |
49 |
50 |
51 | USDC/ETH: {formattedNum(usdcPerEth, true)}
52 |
53 | {usdcPair && totalLiquidity ? formatPercent(usdcPair.trackedReserveUSD / totalLiquidity) : '-'}
54 |
55 |
56 |
57 | USDT/ETH: {formattedNum(usdtPerEth, true)}
58 |
59 | {usdtPair && totalLiquidity ? formatPercent(usdtPair.trackedReserveUSD / totalLiquidity) : '-'}
60 |
61 |
62 |
63 |
64 | )
65 | }
66 |
--------------------------------------------------------------------------------
/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/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 |
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 |