Skip to content

Commit

Permalink
Use all pairs and tokens, fix WETH bug (Uniswap#154)
Browse files Browse the repository at this point in the history 
* add all pairs

* update pair fetching

* save progress batching

* add import for all tokens, use all pairs in search

* fix styles on pair list
  • Loading branch information
@ianlapham
ianlapham committed May 20, 2020
1 parent f2d3547 commit 7729e8e
Show file tree
Hide file tree
Showing 10 changed files with 350 additions and 218 deletions.
21 changes: 4 additions & 17 deletions src/App.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,6 @@ import { client } from './apollo/client'
import { Route, Switch, BrowserRouter, withRouter, Redirect } from 'react-router-dom'
import ScrolToTop from './components/ScrollToTop'

import { useAllTokens } from './contexts/TokenData'

import GlobalPage from './pages/GlobalPage'
import TokenPage from './pages/TokenPage'
import PairPage from './pages/PairPage'
Expand All @@ -16,7 +14,7 @@ import { AutoColumn } from './components/Column'
import Link from './components/Link'
import { useMedia } from 'react-use'
import { useGlobalData, useGlobalChartData } from './contexts/GlobalData'
import { useAllPairs } from './contexts/PairData'
import { isAddress } from './helpers'

const AppWrapper = styled.div`
position: relative;
Expand Down Expand Up @@ -48,14 +46,11 @@ const MigrateBanner = styled(AutoColumn)`
function App() {
const NavHeaderUpdated = withRouter(props => <NavHeader default {...props} />)

const allTokens = useAllTokens()

const below750 = useMedia('(max-width: 750px)')
const below490 = useMedia('(max-width: 490px)')

const globalData = useGlobalData()
const globalChartData = useGlobalChartData()
const allPairData = useAllPairs()

return (
<ApolloProvider client={client}>
Expand Down Expand Up @@ -84,13 +79,10 @@ function App() {
</>
)}
</MigrateBanner>
{allTokens &&
globalData &&
{globalData &&
Object.keys(globalData).length > 0 &&
globalChartData &&
Object.keys(globalChartData).length > 0 &&
allPairData &&
Object.keys(allPairData).length > 8 ? (
Object.keys(globalChartData).length > 0 ? (
<BrowserRouter>
<ScrolToTop />
<Switch>
Expand All @@ -99,12 +91,7 @@ function App() {
strict
path="/token/:tokenAddress"
render={({ match }) => {
const searched =
allTokens &&
allTokens.filter(token => {
return token.id.toLowerCase() === match.params.tokenAddress.toLowerCase()
})
if (allTokens && searched.length > 0) {
if (isAddress(match.params.tokenAddress.toLowerCase())) {
return (
<>
<NavHeaderUpdated token={match.params.tokenAddress.toLowerCase()} />
Expand Down
34 changes: 27 additions & 7 deletions src/apollo/queries.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -238,7 +238,7 @@ export const GLOBAL_DATA = block => {

export const GLOBAL_TXNS = gql`
query transactions {
transactions(first: 200, orderBy: timestamp, orderDirection: desc) {
transactions(first: 50, orderBy: timestamp, orderDirection: desc) {
mints {
transaction {
id
Expand Down Expand Up @@ -307,19 +307,38 @@ export const GLOBAL_TXNS = gql`
}
`

export const All_PAIRS = gql`
export const TOP_PAIRS = gql`
query pairs {
pairs(orderBy: reserveUSD, orderDirection: desc) {
pairs(first: 100, orderBy: reserveUSD, orderDirection: desc) {
id
}
}
`

export const All_TOKENS = gql`
export const ALL_PAIRS = gql`
query pairs($skip: Int!) {
pairs(first: 100, orderBy: reserveUSD, orderDirection: desc, skip: $skip) {
id
token0 {
id
name
symbol
}
token1 {
id
name
symbol
}
}
}
`

export const TOP_TOKENS = gql`
query tokens {
tokens(orderBy: tradeVolumeUSD, orderDirection: desc) {
tokens(first: 100, orderBy: tradeVolumeUSD, orderDirection: desc) {
id
symbol
name
}
}
`
Expand Down Expand Up @@ -369,7 +388,7 @@ export const TOKEN_DATA = (tokenAddress, block) => {
tradeVolumeUSD
totalLiquidity
txCount
allPairs(orderBy: reserveUSD, orderDirection: desc) {
allPairs(first: 30, orderBy: reserveUSD, orderDirection: desc) {
id
reserveUSD
volumeUSD
Expand Down Expand Up @@ -402,7 +421,7 @@ export const TOKEN_DATA = (tokenAddress, block) => {
tradeVolumeUSD
totalLiquidity
txCount
allPairs(orderBy: reserveUSD, orderDirection: desc) {
allPairs(first: 30, orderBy: reserveUSD, orderDirection: desc) {
id
reserveUSD
volumeUSD
Expand All @@ -419,6 +438,7 @@ export const TOKEN_DATA = (tokenAddress, block) => {
derivedETH
}
}
}
}`
return gql(queryString)
Expand Down
159 changes: 78 additions & 81 deletions src/components/PairList/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import Link, { CustomLink } from '../Link'
import { Divider } from '../../components'

import { formattedNum, getPoolLink, getSwapLink } from '../../helpers'
import { usePairData, useAllPairs } from '../../contexts/PairData'
import { useDataForList } from '../../contexts/PairData'
import DoubleTokenLogo from '../DoubleLogo'
import { ButtonLight, ButtonDark } from '../ButtonStyled'

Expand Down Expand Up @@ -104,12 +104,12 @@ const SORT_FIELD = {
}

function PairList({ pairs, color }) {
const allPairData = useAllPairs()

const below600 = useMedia('(max-width: 600px)')
const below740 = useMedia('(max-width: 740px)')
const below1080 = useMedia('(max-width: 1080px)')

const listData = useDataForList(pairs)

// pagination
const [page, setPage] = useState(1)
const [maxPage, setMaxPage] = useState(1)
Expand All @@ -134,75 +134,87 @@ function PairList({ pairs, color }) {
}
}, [pairs])

const sortedPairs =
pairs &&
allPairData &&
pairs
.sort((a, b) => {
// pull in calculated one day volume
a.oneDayVolumeUSD = allPairData?.[a.id]?.oneDayVolumeUSD || 0
b.oneDayVolumeUSD = allPairData?.[b.id]?.oneDayVolumeUSD || 0

a.oneWeekVolumeUSD = allPairData?.[a.id]?.oneWeekVolumeUSD
b.oneWeekVolumeUSD = allPairData?.[b.id]?.oneWeekVolumeUSD
const ListItem = ({ item, index }) => {
const pairData = item

return parseFloat(a[sortedColumn]) > parseFloat(b[sortedColumn])
? (sortDirection ? -1 : 1) * 1
: (sortDirection ? -1 : 1) * -1
})
.slice(ITEMS_PER_PAGE * (page - 1), page * ITEMS_PER_PAGE)
if (pairData && pairData.token0 && pairData.token1) {
const liquidity = formattedNum(pairData.reserveUSD, true)
const volume = formattedNum(pairData.oneDayVolumeUSD, true)

const ListItem = ({ item, index }) => {
const itemData = usePairData(item.id)
const liquidity = formattedNum(item.reserveUSD, true)
const volume = formattedNum(itemData.oneDayVolumeUSD, true)
if (pairData.token0.id === '0xc02aaa39b223fe8d0a0e5c4f27ead9083c756cc2') {
pairData.token0.name = 'ETH (Wrapped)'
pairData.token0.symbol = 'ETH'
}

if (item.token0.id === '0xc02aaa39b223fe8d0a0e5c4f27ead9083c756cc2') {
item.token0.name = 'ETH (Wrapped)'
item.token0.symbol = 'ETH'
}
if (pairData.token1.id === '0xc02aaa39b223fe8d0a0e5c4f27ead9083c756cc2') {
pairData.token1.name = 'ETH (Wrapped)'
pairData.token1.symbol = 'ETH'
}

if (item.token1.id === '0xc02aaa39b223fe8d0a0e5c4f27ead9083c756cc2') {
item.token1.name = 'ETH (Wrapped)'
item.token1.symbol = 'ETH'
return (
<DashGrid style={{ height: '60px' }}>
<DataText area="name" fontWeight="500">
{!below600 && <div style={{ marginRight: '20px' }}>{index}</div>}
<DoubleTokenLogo
size={below600 ? 16 : 20}
a0={pairData.token0.id}
a1={pairData.token1.id}
margin={!below740}
/>
<CustomLink
style={{ marginLeft: '20px', whiteSpace: 'nowrap' }}
to={'/pair/' + item.id}
onClick={() => {
window.scrollTo(0, 0)
}}
color={color}
>
{pairData.token0.symbol + '-' + pairData.token1.symbol}
</CustomLink>
</DataText>
<DataText area="liq">{liquidity}</DataText>
<DataText area="vol">{volume}</DataText>
{!below1080 && <DataText area="volWeek">{formattedNum(pairData.oneWeekVolumeUSD, true)}</DataText>}
{!below1080 && <DataText area="fees">{formattedNum(pairData.oneDayVolumeUSD * 0.003, true)}</DataText>}
{!below740 && (
<Flex area="pool" justifyContent="flex-end" alignItems="center">
<Link color={color} external href={getPoolLink(pairData.token0?.id, pairData.token1?.id)}>
<ButtonLight color={color} style={{ marginRight: '10px' }}>
+ Add Liquidity
</ButtonLight>
</Link>
<Link color={'white'} external href={getSwapLink(pairData.token0?.id, pairData.token1?.id)}>
<ButtonDark color={color}>Trade</ButtonDark>
</Link>
</Flex>
)}
</DashGrid>
)
} else {
return ''
}

return (
<DashGrid style={{ height: '60px' }}>
<DataText area="name" fontWeight="500">
{!below600 && <div style={{ marginRight: '20px' }}>{index}</div>}
<DoubleTokenLogo size={below600 ? 16 : 20} a0={item.token0.id} a1={item.token1.id} margin={!below740} />
<CustomLink
style={{ marginLeft: '20px', whiteSpace: 'nowrap' }}
to={'/pair/' + item.id}
onClick={() => {
window.scrollTo(0, 0)
}}
color={color}
>
{item.token0.symbol + '-' + item.token1.symbol}
</CustomLink>
</DataText>
<DataText area="liq">{liquidity}</DataText>
<DataText area="vol">{volume}</DataText>
{!below1080 && <DataText area="volWeek">{formattedNum(itemData.oneWeekVolumeUSD, true)}</DataText>}
{!below1080 && <DataText area="fees">{formattedNum(itemData.oneDayVolumeUSD * 0.003, true)}</DataText>}
{!below740 && (
<Flex area="pool" justifyContent="flex-end" alignItems="center">
<Link color={color} external href={getPoolLink(item.token0?.id, item.token1?.id)}>
<ButtonLight color={color} style={{ marginRight: '10px' }}>
+ Add Liquidity
</ButtonLight>
</Link>
<Link color={'white'} external href={getSwapLink(item.token0?.id, item.token1?.id)}>
<ButtonDark color={color}>Trade</ButtonDark>
</Link>
</Flex>
)}
</DashGrid>
)
}

const pairList =
listData &&
listData
.sort((pairA, pairB) => {
return parseFloat(pairA[sortedColumn]) > parseFloat(pairB[sortedColumn])
? (sortDirection ? -1 : 1) * 1
: (sortDirection ? -1 : 1) * -1
})
.slice(ITEMS_PER_PAGE * (page - 1), page * ITEMS_PER_PAGE)
.map((item, index) => {
return (
item && (
<div key={index}>
<ListItem key={index} index={(page - 1) * 10 + index + 1} item={item} />
<Divider />
</div>
)
)
})

return (
<ListWrapper>
<DashGrid center={true} style={{ height: 'fit-content', padding: '0 0 1rem 0' }}>
Expand Down Expand Up @@ -267,22 +279,7 @@ function PairList({ pairs, color }) {
)}
</DashGrid>
<Divider />
<List p={0}>
{!sortedPairs ? (
<LocalLoader />
) : (
sortedPairs.map((item, index) => {
return (
item && (
<div key={index}>
<ListItem key={index} index={(page - 1) * 10 + index + 1} item={item} />
<Divider />
</div>
)
)
})
)}
</List>
<List p={0}>{!pairList ? <LocalLoader /> : pairList}</List>
<PageButtons>
<div
onClick={e => {
Expand Down
Loading

0 comments on commit 7729e8e

Please sign in to comment.