Skip to content

I
interface
Commit 35d39840 authored by ianlapham's avatar ianlapham
Browse files
Options

add import to token search

parent 217a7008
Hide whitespace changes
Inline Side-by-side
Showing with 107 additions and 77 deletions
src/components/Button/index.js
View file @ 35d39840
......@@ -40,6 +40,9 @@ export const ButtonPrimary = styled(Base)`
background-color: ${({ theme }) => theme.outlineGrey};
color: ${({ theme }) => theme.darkGrey}
cursor: auto;
outline: none;
border: none;
box-shadow: none;
}
`
......
src/components/TokenFind/index.js → src/components/PoolFinder/index.js
View file @ 35d39840
import React, { useState } from 'react'
import styled from 'styled-components'
import { withRouter } from 'react-router-dom'
import { JSBI } from '@uniswap/sdk'
......@@ -8,18 +7,18 @@ import { useToken } from '../../contexts/Tokens'
import { useExchange } from '../../contexts/Exchanges'
import { useAddressBalance } from '../../contexts/Balances'
import { LightCard } from '../../components/Card'
import PositionCard from '../../components/PositionCard'
import SearchModal from '../../components/SearchModal'
import Row from '../../components/Row'
import { LightCard } from '../Card'
import PositionCard from '../PositionCard'
import SearchModal from '../SearchModal'
import Row from '../Row'
import { Link } from '../../theme'
import { Text } from 'rebass'
import { AutoColumn, ColumnCenter } from '../../components/Column'
import { AutoColumn, ColumnCenter } from '../Column'
import { Plus } from 'react-feather'
import { ButtonPrimary, ButtonDropwdown, ButtonDropwdownLight } from '../../components/Button'
import { ButtonPrimary, ButtonDropwdown, ButtonDropwdownLight } from '../Button'
import TokenLogo from '../TokenLogo'
function TokenFind({ history }) {
function PoolFinder({ history }) {
const Fields = {
TOKEN0: 0,
TOKEN1: 1
......@@ -124,7 +123,13 @@ function TokenFind({ history }) {
<LightCard padding="45px">
<AutoColumn gap="8px" justify="center">
<Text color="">No exchange found.</Text>
<Link>Create exchange instead.</Link>
<Link
onClick={() => {
history.push('/add/' + token0Address + '-' + token1Address)
}}
>
Create exchange instead.
</Link>
</AutoColumn>
</LightCard>
) : (
......@@ -160,4 +165,4 @@ function TokenFind({ history }) {
)
}
export default withRouter(TokenFind)
export default withRouter(PoolFinder)
src/components/SearchModal/index.js
View file @ 35d39840
import React, { useState, useRef, useMemo, useEffect } from 'react'
import { withRouter } from 'react-router-dom'
import { Link } from 'react-router-dom'
import { Link as StyledLink } from '../../theme/components'
import { useTranslation } from 'react-i18next'
import { ethers } from 'ethers'
import styled from 'styled-components'
......@@ -126,6 +127,8 @@ function SearchModal({ history, isOpen, onDismiss, onTokenSelect, urlAddedTokens
// all balances for both account and exchanges
let allBalances = useAllBalances()
const [sortDirection, setSortDirection] = useState(true)
const tokenList = useMemo(() => {
return Object.keys(allTokens)
.sort((a, b) => {
......@@ -138,6 +141,22 @@ function SearchModal({ history, isOpen, onDismiss, onTokenSelect, urlAddedTokens
return aSymbol === bSymbol ? 0 : aSymbol === 'ETH'.toLowerCase() ? -1 : 1
}
// sort by balance
const balanceA = allBalances?.[account]?.[a]
const balanceB = allBalances?.[account]?.[b]
if (balanceA && !balanceB) {
return sortDirection
}
if (!balanceA && balanceB) {
return sortDirection * -1
}
if (balanceA && balanceB) {
return sortDirection * parseFloat(balanceA.toExact()) > parseFloat(balanceB.toExact()) ? -1 : 1
}
// sort alphabetically
return aSymbol < bSymbol ? -1 : aSymbol > bSymbol ? 1 : 0
} else {
......@@ -159,7 +178,7 @@ function SearchModal({ history, isOpen, onDismiss, onTokenSelect, urlAddedTokens
balance: balance
}
})
}, [allTokens, hiddenToken, allBalances, account])
}, [allTokens, allBalances, account, sortDirection, hiddenToken])
const filteredTokenList = useMemo(() => {
return tokenList.filter(tokenEntry => {
......@@ -215,7 +234,6 @@ function SearchModal({ history, isOpen, onDismiss, onTokenSelect, urlAddedTokens
BALANCES: 'BALANCES'
}
const [activeFilter, setActiveFilter] = useState(FILTERS.BALANCES)
const [sortDirection, setSortDirection] = useState(true)
// sort tokens
const escapeStringRegexp = string => string
......@@ -392,7 +410,18 @@ function SearchModal({ history, isOpen, onDismiss, onTokenSelect, urlAddedTokens
onChange={onInput}
/>
<RowBetween>
<div />
<div>
<Text>
Don't see a pool?{' '}
<StyledLink
onClick={() => {
history.push('/find')
}}
>
Import it.
</StyledLink>
</Text>
</div>
<div />
<Filter title="Your Balances" filter={FILTERS.BALANCES} />
</RowBetween>
......
src/contexts/Exchanges.tsx
View file @ 35d39840
......@@ -9,10 +9,10 @@ import { ChainId, WETH, Token, TokenAmount, Exchange, JSBI } from '@uniswap/sdk'
const UPDATE = 'UPDATE'
const ALL_EXCHANGES: [Token, Token][] = [
// [
// INITIAL_TOKENS_CONTEXT[ChainId.RINKEBY][WETH[ChainId.RINKEBY].address],
// INITIAL_TOKENS_CONTEXT[ChainId.RINKEBY]['0xc7AD46e0b8a400Bb3C915120d284AafbA8fc4735']
// ],
[
INITIAL_TOKENS_CONTEXT[ChainId.RINKEBY][WETH[ChainId.RINKEBY].address],
INITIAL_TOKENS_CONTEXT[ChainId.RINKEBY]['0xc7AD46e0b8a400Bb3C915120d284AafbA8fc4735']
]
// [
// INITIAL_TOKENS_CONTEXT[ChainId.RINKEBY]['0xc7AD46e0b8a400Bb3C915120d284AafbA8fc4735'],
// INITIAL_TOKENS_CONTEXT[ChainId.RINKEBY]['0x8ab15C890E5C03B5F240f2D146e3DF54bEf3Df44']
......@@ -172,7 +172,7 @@ export function useTotalSupply(exchange: Exchange) {
}
})
.catch(e => {
console.log('error')
console.log(e)
})
/**
* @todo
......
src/contexts/Tokens.tsx
View file @ 35d39840
......@@ -6,9 +6,9 @@ import { isAddress, getTokenName, getTokenSymbol, getTokenDecimals, safeAccess }
const UPDATE = 'UPDATE'
export const ALL_TOKENS = [
WETH[ChainId.RINKEBY]
// new Token(ChainId.RINKEBY, '0xc7AD46e0b8a400Bb3C915120d284AafbA8fc4735', 18, 'DAI', 'Dai Stablecoin'),
// new Token(ChainId.RINKEBY, '0x8ab15C890E5C03B5F240f2D146e3DF54bEf3Df44', 18, 'IANV2', 'IAn V2 Coin')
WETH[ChainId.RINKEBY],
new Token(ChainId.RINKEBY, '0xc7AD46e0b8a400Bb3C915120d284AafbA8fc4735', 18, 'DAI', 'Dai Stablecoin'),
new Token(ChainId.RINKEBY, '0x8ab15C890E5C03B5F240f2D146e3DF54bEf3Df44', 18, 'IANV2', 'IAn V2 Coin')
]
// only meant to be used in exchanges.ts!
......
src/pages/Supply/index.js
View file @ 35d39840
......@@ -9,7 +9,6 @@ import { useAllExchanges } from '../../contexts/Exchanges'
import { useAllBalances, useAccountLPBalances } from '../../contexts/Balances'
import Question from '../../components/Question'
import TokenFind from '../../components/TokenFind'
import SearchModal from '../../components/SearchModal'
import PositionCard from '../../components/PositionCard'
import Row, { RowBetween } from '../../components/Row'
......@@ -32,7 +31,6 @@ const FixedBottom = styled.div`
function Supply({ history }) {
const { account } = useWeb3React()
const [showPositionFind, setShowPositionFind] = useState(false)
const [showPoolSearch, setShowPoolSearch] = useState(false)
const allTokens = useAllTokens()
......@@ -64,61 +62,56 @@ function Supply({ history }) {
return (
<>
{!showPositionFind && (
<>
<ButtonPrimary
onClick={() => {
setShowPoolSearch(true)
}}
>
<Text fontSize={20}>Join a pool</Text>
</ButtonPrimary>
<Positions>
<AutoColumn gap="20px">
<RowBetween>
<Text fontWeight={500}>Your Pooled Liquidity</Text>
<Question text="filler text" />
</RowBetween>
{filteredExchangeList}
{filteredExchangeList?.length === 0 && (
<LightCard bg="rgba(255, 255, 255, 0.6)" padding={'45px'}>
<Text color="#C3C5CB">Add liquidity to see your positions</Text>
</LightCard>
)}
<AutoColumn justify="center">
<Text color="#AEAEAE">
Already have liquidity?{' '}
<Link
onClick={() => {
history.push('/find')
}}
>
Find it now.
</Link>
</Text>
</AutoColumn>
<ButtonPrimary
onClick={() => {
setShowPoolSearch(true)
}}
>
<Text fontSize={20}>Join a pool</Text>
</ButtonPrimary>
<Positions>
<AutoColumn gap="20px">
<RowBetween>
<Text fontWeight={500}>Your Pooled Liquidity</Text>
<Question text="filler text" />
</RowBetween>
{filteredExchangeList}
{filteredExchangeList?.length === 0 && (
<LightCard bg="rgba(255, 255, 255, 0.6)" padding={'45px'}>
<Text color="#C3C5CB">Add liquidity to see your positions</Text>
</LightCard>
)}
<AutoColumn justify="center">
<Text color="#AEAEAE">
Already have liquidity?{' '}
<Link
onClick={() => {
history.push('/find')
}}
>
Find it now.
</Link>
</Text>
</AutoColumn>
</AutoColumn>
<FixedBottom>
<Card bg="rgba(255, 255, 255, 0.6)" padding={'24px'}>
<AutoColumn gap="30px">
<Text fontSize="20px" fontWeight={500}>
Earn fees with pooled market making.
</Text>
<Text fontSize="12px">
<Link>Provide liquidity </Link>to earn .03% spread fees for providing market depth.
</Text>
<Link>
<Row>
Learn More <ArrowRight size="16" />
</Row>
</Link>
</AutoColumn>
<FixedBottom>
<Card bg="rgba(255, 255, 255, 0.6)" padding={'24px'}>
<AutoColumn gap="30px">
<Text fontSize="20px" fontWeight={500}>
Earn fees with pooled market making.
</Text>
<Text fontSize="12px">
<Link>Provide liquidity </Link>to earn .03% spread fees for providing market depth.
</Text>
<Link>
<Row>
Learn More <ArrowRight size="16" />
</Row>
</Link>
</AutoColumn>
</Card>
</FixedBottom>
</Positions>
</>
)}
{showPositionFind && <TokenFind />}
</Card>
</FixedBottom>
</Positions>
<SearchModal isOpen={showPoolSearch} onDismiss={() => setShowPoolSearch(false)} />
</>
)
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment