react-feather#Bookmark JavaScript Examples
The following examples show how to use
react-feather#Bookmark.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: ReadmeUtilsBtn.js From webDevsCom with MIT License | 6 votes |
|
ReadmeUtilsBtn = ({
isBookMarked,
removeBookmark,
bookmarkIt,
setModal,
}) => {
return (
<>
<ReactTooltip type='light' />
<div
id='bookmarkBtn'
className='button button-special is-rounded box-shadow-lift'
style={{ cursor: 'pointer' }}
onClick={() => (isBookMarked ? removeBookmark() : bookmarkIt())}
data-tip={isBookMarked ? 'Remove from Bookmark' : 'Add to Bookmark'}
>
<Bookmark
color='blue'
fill={isBookMarked ? 'blue' : '#c9cff8'}
className='icon'
/>
</div>
<div
id='repo-owner-info'
className='button button-special is-rounded box-shadow-lift'
style={{ cursor: 'pointer' }}
onClick={() => setModal(true)}
data-tip='See more from Repo owners'
>
<MoreVertical color='blue' fill='blue' className='icon' />
</div>
</>
);
}
Example #2
| Source File: index.js From spooky-info with GNU General Public License v3.0 | 4 votes |
|
function PinnedData({ history, open, setSavedOpen }) {
const [savedPairs, , removePair] = useSavedPairs()
const [savedTokens, , removeToken] = useSavedTokens()
return !open ? (
<RightColumn open={open} onClick={() => setSavedOpen(true)}>
<SavedButton open={open}>
<StyledIcon>
<Bookmark size={20} />
</StyledIcon>
</SavedButton>
</RightColumn>
) : (
<RightColumn gap="1rem" open={open}>
<SavedButton onClick={() => setSavedOpen(false)} open={open}>
<RowFixed>
<StyledIcon>
<Bookmark size={16} />
</StyledIcon>
<TYPE.main ml={'4px'}>Saved</TYPE.main>
</RowFixed>
<StyledIcon>
<ChevronRight />
</StyledIcon>
</SavedButton>
<AccountSearch small={true} />
<AutoColumn gap="40px" style={{ marginTop: '2rem' }}>
<AutoColumn gap={'12px'}>
<TYPE.main>Pinned Pairs</TYPE.main>
{Object.keys(savedPairs).filter((key) => {
return !!savedPairs[key]
}).length > 0 ? (
Object.keys(savedPairs)
.filter((address) => {
return !!savedPairs[address]
})
.map((address) => {
const pair = savedPairs[address]
return (
<RowBetween key={pair.address}>
<ButtonFaded onClick={() => history.push('/pair/' + address)}>
<RowFixed>
<TYPE.header>
<FormattedName
text={pair.token0Symbol + '/' + pair.token1Symbol}
maxCharacters={12}
fontSize={'12px'}
/>
</TYPE.header>
</RowFixed>
</ButtonFaded>
<Hover onClick={() => removePair(pair.address)}>
<StyledIcon>
<X size={16} />
</StyledIcon>
</Hover>
</RowBetween>
)
})
) : (
<TYPE.light>Pinned pairs will appear here.</TYPE.light>
)}
</AutoColumn>
<ScrollableDiv gap={'12px'}>
<TYPE.main>Pinned Tokens</TYPE.main>
{Object.keys(savedTokens).filter((key) => {
return !!savedTokens[key]
}).length > 0 ? (
Object.keys(savedTokens)
.filter((address) => {
return !!savedTokens[address]
})
.map((address) => {
const token = savedTokens[address]
return (
<RowBetween key={address}>
<ButtonFaded onClick={() => history.push('/token/' + address)}>
<RowFixed>
<TokenLogo address={address} size={'14px'} />
<TYPE.header ml={'6px'}>
<FormattedName text={token.symbol} maxCharacters={12} fontSize={'12px'} />
</TYPE.header>
</RowFixed>
</ButtonFaded>
<Hover onClick={() => removeToken(address)}>
<StyledIcon>
<X size={16} />
</StyledIcon>
</Hover>
</RowBetween>
)
})
) : (
<TYPE.light>Pinned tokens will appear here.</TYPE.light>
)}
</ScrollableDiv>
</AutoColumn>
</RightColumn>
)
}
Example #3
| Source File: AccountPage.js From spooky-info with GNU General Public License v3.0 | 4 votes |
|
function AccountPage({ account }) {
// get data for this account
const transactions = useUserTransactions(account)
const positions = useUserPositions(account)
const miningPositions = useMiningPositions(account)
// get data for user stats
const transactionCount = transactions?.swaps?.length + transactions?.burns?.length + transactions?.mints?.length
// get derived totals
let totalSwappedUSD = useMemo(() => {
return transactions?.swaps
? transactions?.swaps.reduce((total, swap) => {
return total + parseFloat(swap.amountUSD)
}, 0)
: 0
}, [transactions])
// if any position has token from fee warning list, show warning
const [showWarning, setShowWarning] = useState(false)
useEffect(() => {
if (positions) {
for (let i = 0; i < positions.length; i++) {
if (
FEE_WARNING_TOKENS.includes(positions[i].pair.token0.id) ||
FEE_WARNING_TOKENS.includes(positions[i].pair.token1.id)
) {
setShowWarning(true)
}
}
}
}, [positions])
// settings for list view and dropdowns
const hideLPContent = positions && positions.length === 0
const [showDropdown, setShowDropdown] = useState(false)
const [activePosition, setActivePosition] = useState()
const dynamicPositions = activePosition ? [activePosition] : positions
const aggregateFees = dynamicPositions?.reduce(function (total, position) {
return total + position.fees.sum
}, 0)
const positionValue = useMemo(() => {
return dynamicPositions
? dynamicPositions.reduce((total, position) => {
return (
total +
(parseFloat(position?.liquidityTokenBalance) / parseFloat(position?.pair?.totalSupply)) *
position?.pair?.reserveUSD
)
}, 0)
: null
}, [dynamicPositions])
useEffect(() => {
window.scrollTo({
behavior: 'smooth',
top: 0,
})
}, [])
const below600 = useMedia('(max-width: 600px)')
// adding/removing account from saved accounts
const [savedAccounts, addAccount, removeAccount] = useSavedAccounts()
const isBookmarked = savedAccounts.includes(account)
const handleBookmarkClick = useCallback(() => {
; (isBookmarked ? removeAccount : addAccount)(account)
}, [account, isBookmarked, addAccount, removeAccount])
return (
<PageWrapper>
<ContentWrapper>
<RowBetween>
<TYPE.body>
<BasicLink to="/accounts">{'Accounts '}</BasicLink>→{' '}
<Link lineHeight={'145.23%'} href={'https://ftmscan.com/address/' + account} target="_blank">
{' '}
{account?.slice(0, 42)}{' '}
</Link>
</TYPE.body>
{!below600 && <Search small={true} />}
</RowBetween>
<Header>
<RowBetween>
<span>
<TYPE.header fontSize={24}>{account?.slice(0, 6) + '...' + account?.slice(38, 42)}</TYPE.header>
<Link lineHeight={'145.23%'} href={'https://ftmscan.com/address/' + account} target="_blank">
<TYPE.main fontSize={14}>View on FTMscan</TYPE.main>
</Link>
</span>
<AccountWrapper>
<StyledIcon>
<Bookmark
onClick={handleBookmarkClick}
style={{ opacity: isBookmarked ? 0.8 : 0.4, cursor: 'pointer' }}
/>
</StyledIcon>
</AccountWrapper>
</RowBetween>
</Header>
<DashboardWrapper>
{showWarning && <Warning>Fees cannot currently be calculated for pairs that include AMPL.</Warning>}
{!hideLPContent && (
<DropdownWrapper>
<ButtonDropdown width="100%" onClick={() => setShowDropdown(!showDropdown)} open={showDropdown}>
{!activePosition && (
<RowFixed>
<StyledIcon>
<Activity size={16} />
</StyledIcon>
<TYPE.body ml={'10px'}>All Positions</TYPE.body>
</RowFixed>
)}
{activePosition && (
<RowFixed>
<DoubleTokenLogo a0={activePosition.pair.token0.id} a1={activePosition.pair.token1.id} size={16} />
<TYPE.body ml={'16px'}>
{activePosition.pair.token0.symbol}-{activePosition.pair.token1.symbol} Position
</TYPE.body>
</RowFixed>
)}
</ButtonDropdown>
{showDropdown && (
<Flyout>
<AutoColumn gap="0px">
{positions?.map((p, i) => {
if (p.pair.token1.symbol === 'WETH') {
p.pair.token1.symbol = 'ETH'
}
if (p.pair.token0.symbol === 'WETH') {
p.pair.token0.symbol = 'ETH'
}
return (
p.pair.id !== activePosition?.pair.id && (
<MenuRow
onClick={() => {
setActivePosition(p)
setShowDropdown(false)
}}
key={i}
>
<DoubleTokenLogo a0={p.pair.token0.id} a1={p.pair.token1.id} size={16} />
<TYPE.body ml={'16px'}>
{p.pair.token0.symbol}-{p.pair.token1.symbol} Position
</TYPE.body>
</MenuRow>
)
)
})}
{activePosition && (
<MenuRow
onClick={() => {
setActivePosition()
setShowDropdown(false)
}}
>
<RowFixed>
<StyledIcon>
<Activity size={16} />
</StyledIcon>
<TYPE.body ml={'10px'}>All Positions</TYPE.body>
</RowFixed>
</MenuRow>
)}
</AutoColumn>
</Flyout>
)}
</DropdownWrapper>
)}
{!hideLPContent && (
<Panel style={{ height: '100%', marginBottom: '1rem' }}>
<AutoRow gap="20px">
<AutoColumn gap="10px">
<RowBetween>
<TYPE.body>Liquidity (Including Fees)</TYPE.body>
<div />
</RowBetween>
<RowFixed align="flex-end">
<TYPE.header fontSize={'24px'} lineHeight={1}>
{positionValue
? formattedNum(positionValue, true)
: positionValue === 0
? formattedNum(0, true)
: '-'}
</TYPE.header>
</RowFixed>
</AutoColumn>
<AutoColumn gap="10px">
<RowBetween>
<TYPE.body>Fees Earned (Cumulative)</TYPE.body>
<div />
</RowBetween>
<RowFixed align="flex-end">
<TYPE.header fontSize={'24px'} lineHeight={1} color={aggregateFees && 'green'}>
{aggregateFees ? formattedNum(aggregateFees, true, true) : '-'}
</TYPE.header>
</RowFixed>
</AutoColumn>
</AutoRow>
</Panel>
)}
{!hideLPContent && (
<PanelWrapper>
<Panel style={{ gridColumn: '1' }}>
{activePosition ? (
<PairReturnsChart account={account} position={activePosition} />
) : (
<UserChart account={account} position={activePosition} />
)}
</Panel>
</PanelWrapper>
)}
<TYPE.main fontSize={'1.125rem'} style={{ marginTop: '3rem' }}>
Positions
</TYPE.main>{' '}
<Panel
style={{
marginTop: '1.5rem',
}}
>
<PositionList positions={positions} />
</Panel>
<TYPE.main fontSize={'1.125rem'} style={{ marginTop: '3rem' }}>
Liquidity Mining Pools
</TYPE.main>
<Panel
style={{
marginTop: '1.5rem',
}}
>
{miningPositions && <MiningPositionList miningPositions={miningPositions} />}
{!miningPositions && (
<AutoColumn gap="8px" justify="flex-start">
<TYPE.main>No Staked Liquidity.</TYPE.main>
<AutoRow gap="8px" justify="flex-start">
<ButtonLight style={{ padding: '4px 6px', borderRadius: '4px' }}>Learn More</ButtonLight>{' '}
</AutoRow>{' '}
</AutoColumn>
)}
</Panel>
<TYPE.main fontSize={'1.125rem'} style={{ marginTop: '3rem' }}>
Transactions
</TYPE.main>{' '}
<Panel
style={{
marginTop: '1.5rem',
}}
>
<TxnList transactions={transactions} />
</Panel>
<TYPE.main fontSize={'1.125rem'} style={{ marginTop: '3rem' }}>
Wallet Stats
</TYPE.main>{' '}
<Panel
style={{
marginTop: '1.5rem',
}}
>
<AutoRow gap="20px">
<AutoColumn gap="8px">
<TYPE.header fontSize={24}>{totalSwappedUSD ? formattedNum(totalSwappedUSD, true) : '-'}</TYPE.header>
<TYPE.main>Total Value Swapped</TYPE.main>
</AutoColumn>
<AutoColumn gap="8px">
<TYPE.header fontSize={24}>
{totalSwappedUSD ? formattedNum(totalSwappedUSD * 0.002, true) : '-'}
</TYPE.header>
<TYPE.main>Total Fees Paid</TYPE.main>
</AutoColumn>
<AutoColumn gap="8px">
<TYPE.header fontSize={24}>{transactionCount ? transactionCount : '-'}</TYPE.header>
<TYPE.main>Total Transactions</TYPE.main>
</AutoColumn>
</AutoRow>
</Panel>
</DashboardWrapper>
</ContentWrapper>
</PageWrapper>
)
}
Example #4
| Source File: PairPage.js From spooky-info with GNU General Public License v3.0 | 4 votes |
|
function PairPage({ pairAddress, history }) {
const {
token0,
token1,
reserve0,
reserve1,
reserveUSD,
trackedReserveUSD,
oneDayVolumeUSD,
volumeChangeUSD,
oneDayVolumeUntracked,
volumeChangeUntracked,
liquidityChangeUSD,
} = usePairData(pairAddress)
useEffect(() => {
document.querySelector('body').scrollTo(0, 0)
}, [])
const transactions = usePairTransactions(pairAddress)
const backgroundColor = useColor(pairAddress)
const formattedLiquidity = reserveUSD ? formattedNum(reserveUSD, true) : formattedNum(trackedReserveUSD, true)
const usingUntrackedLiquidity = !trackedReserveUSD && !!reserveUSD
const liquidityChange = formattedPercent(liquidityChangeUSD)
// volume
const volume = !!oneDayVolumeUSD ? formattedNum(oneDayVolumeUSD, true) : formattedNum(oneDayVolumeUntracked, true)
const usingUtVolume = oneDayVolumeUSD === 0 && !!oneDayVolumeUntracked
const volumeChange = formattedPercent(!usingUtVolume ? volumeChangeUSD : volumeChangeUntracked)
const showUSDWaning = usingUntrackedLiquidity | usingUtVolume
// get fees // get fees
const fees =
oneDayVolumeUSD || oneDayVolumeUSD === 0
? usingUtVolume
? formattedNum(oneDayVolumeUntracked * 0.002, true)
: formattedNum(oneDayVolumeUSD * 0.002, true)
: '-'
// token data for usd
const [ethPrice] = useEthPrice()
const token0USD =
token0?.derivedETH && ethPrice ? formattedNum(parseFloat(token0.derivedETH) * parseFloat(ethPrice), true) : ''
const token1USD =
token1?.derivedETH && ethPrice ? formattedNum(parseFloat(token1.derivedETH) * parseFloat(ethPrice), true) : ''
// rates
const token0Rate = reserve0 && reserve1 ? formattedNum(reserve1 / reserve0) : '-'
const token1Rate = reserve0 && reserve1 ? formattedNum(reserve0 / reserve1) : '-'
// formatted symbols for overflow
const formattedSymbol0 = token0?.symbol.length > 6 ? token0?.symbol.slice(0, 5) + '...' : token0?.symbol
const formattedSymbol1 = token1?.symbol.length > 6 ? token1?.symbol.slice(0, 5) + '...' : token1?.symbol
const below1080 = useMedia('(max-width: 1080px)')
const below900 = useMedia('(max-width: 900px)')
const below600 = useMedia('(max-width: 600px)')
const [dismissed, markAsDismissed] = usePathDismissed(history.location.pathname)
useEffect(() => {
window.scrollTo({
behavior: 'smooth',
top: 0,
})
}, [])
const [savedPairs, addPair] = useSavedPairs()
const listedTokens = useListedTokens()
if (PAIR_BLACKLIST.includes(pairAddress)) {
return (
<BlockedWrapper>
<BlockedMessageWrapper>
<AutoColumn gap="1rem" justify="center">
<TYPE.light style={{ textAlign: 'center' }}>
{BLOCKED_WARNINGS[pairAddress] ?? `This pair is not supported.`}
</TYPE.light>
<Link external={true} href={'https://ftmscan.com/address/' + pairAddress}>{`More about ${shortenAddress(
pairAddress
)}`}</Link>
</AutoColumn>
</BlockedMessageWrapper>
</BlockedWrapper>
)
}
return (
<PageWrapper>
<ThemedBackground backgroundColor={transparentize(0.6, backgroundColor)} />
<span />
<Warning
type={'pair'}
show={!dismissed && listedTokens && !(listedTokens.includes(token0?.id) && listedTokens.includes(token1?.id))}
setShow={markAsDismissed}
address={pairAddress}
/>
<ContentWrapperLarge>
<RowBetween>
<TYPE.body>
<BasicLink to="/pairs">{'Pairs '}</BasicLink>→ {token0?.symbol}-{token1?.symbol}
</TYPE.body>
{!below600 && <Search small={true} />}
</RowBetween>
<WarningGrouping
disabled={
!dismissed && listedTokens && !(listedTokens.includes(token0?.id) && listedTokens.includes(token1?.id))
}
>
<DashboardWrapper>
<AutoColumn gap="40px" style={{ marginBottom: '1.5rem' }}>
<div
style={{
display: 'flex',
justifyContent: 'space-between',
flexWrap: 'wrap',
width: '100%',
}}
>
<RowFixed style={{ flexWrap: 'wrap', minWidth: '100px' }}>
<RowFixed>
{token0 && token1 && (
<DoubleTokenLogo a0={token0?.id || ''} a1={token1?.id || ''} size={32} margin={true} />
)}{' '}
<TYPE.main fontSize={below1080 ? '1.5rem' : '2rem'} style={{ margin: '0 1rem' }}>
{token0 && token1 ? (
<>
<HoverSpan onClick={() => history.push(`/token/${token0?.id}`)}>{token0.symbol}</HoverSpan>
<span>-</span>
<HoverSpan onClick={() => history.push(`/token/${token1?.id}`)}>
{token1.symbol}
</HoverSpan>{' '}
Pair
</>
) : (
''
)}
</TYPE.main>
</RowFixed>
</RowFixed>
<RowFixed
ml={below900 ? '0' : '2.5rem'}
mt={below1080 && '1rem'}
style={{
flexDirection: below1080 ? 'row-reverse' : 'initial',
}}
>
{!!!savedPairs[pairAddress] && !below1080 ? (
<Hover onClick={() => addPair(pairAddress, token0.id, token1.id, token0.symbol, token1.symbol)}>
<StyledIcon>
<PlusCircle style={{ marginRight: '0.5rem' }} />
</StyledIcon>
</Hover>
) : !below1080 ? (
<StyledIcon>
<Bookmark style={{ marginRight: '0.5rem', opacity: 0.4 }} />
</StyledIcon>
) : (
<></>
)}
<Link external href={getPoolLink(token0?.id, token1?.id)}>
<ButtonLight color={backgroundColor}>+ Add Liquidity</ButtonLight>
</Link>
<Link external href={getSwapLink(token0?.id, token1?.id)}>
<ButtonDark ml={!below1080 && '.5rem'} mr={below1080 && '.5rem'} color={backgroundColor}>
Trade
</ButtonDark>
</Link>
</RowFixed>
</div>
</AutoColumn>
<AutoRow
gap="6px"
style={{
width: 'fit-content',
marginTop: below900 ? '1rem' : '0',
marginBottom: below900 ? '0' : '2rem',
flexWrap: 'wrap',
}}
>
<FixedPanel onClick={() => history.push(`/token/${token0?.id}`)}>
<RowFixed>
<TokenLogo address={token0?.id} size={'16px'} />
<TYPE.main fontSize={'16px'} lineHeight={1} fontWeight={500} ml={'4px'}>
{token0 && token1
? `1 ${formattedSymbol0} = ${token0Rate} ${formattedSymbol1} ${parseFloat(token0?.derivedETH) ? '(' + token0USD + ')' : ''
}`
: '-'}
</TYPE.main>
</RowFixed>
</FixedPanel>
<FixedPanel onClick={() => history.push(`/token/${token1?.id}`)}>
<RowFixed>
<TokenLogo address={token1?.id} size={'16px'} />
<TYPE.main fontSize={'16px'} lineHeight={1} fontWeight={500} ml={'4px'}>
{token0 && token1
? `1 ${formattedSymbol1} = ${token1Rate} ${formattedSymbol0} ${parseFloat(token1?.derivedETH) ? '(' + token1USD + ')' : ''
}`
: '-'}
</TYPE.main>
</RowFixed>
</FixedPanel>
</AutoRow>
<>
{!below1080 && (
<RowFixed>
<TYPE.main fontSize={'1.125rem'} mr="6px">
Pair Stats
</TYPE.main>
{showUSDWaning ? (
<HoverText text={UNTRACKED_COPY}>
<WarningIcon />
</HoverText>
) : null}
</RowFixed>
)}
<PanelWrapper style={{ marginTop: '1.5rem' }}>
<Panel style={{ height: '100%' }}>
<AutoColumn gap="20px">
<RowBetween>
<TYPE.main>Total Liquidity </TYPE.main>
<div />
</RowBetween>
<RowBetween align="flex-end">
<TYPE.main fontSize={'1.5rem'} lineHeight={1} fontWeight={500}>
{formattedLiquidity}
</TYPE.main>
<TYPE.main>{liquidityChange}</TYPE.main>
</RowBetween>
</AutoColumn>
</Panel>
<Panel style={{ height: '100%' }}>
<AutoColumn gap="20px">
<RowBetween>
<TYPE.main>Volume (24hrs) </TYPE.main>
<div />
</RowBetween>
<RowBetween align="flex-end">
<TYPE.main fontSize={'1.5rem'} lineHeight={1} fontWeight={500}>
{volume}
</TYPE.main>
<TYPE.main>{volumeChange}</TYPE.main>
</RowBetween>
</AutoColumn>
</Panel>
<Panel style={{ height: '100%' }}>
<AutoColumn gap="20px">
<RowBetween>
<TYPE.main>Fees (24hrs)</TYPE.main>
<div />
</RowBetween>
<RowBetween align="flex-end">
<TYPE.main fontSize={'1.5rem'} lineHeight={1} fontWeight={500}>
{fees}
</TYPE.main>
<TYPE.main>{volumeChange}</TYPE.main>
</RowBetween>
</AutoColumn>
</Panel>
<Panel style={{ height: '100%' }}>
<AutoColumn gap="20px">
<RowBetween>
<TYPE.main>Pooled Tokens</TYPE.main>
<div />
</RowBetween>
<Hover onClick={() => history.push(`/token/${token0?.id}`)} fade={true}>
<AutoRow gap="4px">
<TokenLogo address={token0?.id} />
<TYPE.main fontSize={20} lineHeight={1} fontWeight={500}>
<RowFixed>
{reserve0 ? formattedNum(reserve0) : ''}{' '}
<FormattedName text={token0?.symbol ?? ''} maxCharacters={8} margin={true} />
</RowFixed>
</TYPE.main>
</AutoRow>
</Hover>
<Hover onClick={() => history.push(`/token/${token1?.id}`)} fade={true}>
<AutoRow gap="4px">
<TokenLogo address={token1?.id} />
<TYPE.main fontSize={20} lineHeight={1} fontWeight={500}>
<RowFixed>
{reserve1 ? formattedNum(reserve1) : ''}{' '}
<FormattedName text={token1?.symbol ?? ''} maxCharacters={8} margin={true} />
</RowFixed>
</TYPE.main>
</AutoRow>
</Hover>
</AutoColumn>
</Panel>
<Panel
style={{
gridColumn: below1080 ? '1' : '2/4',
gridRow: below1080 ? '' : '1/5',
}}
>
<PairChart
address={pairAddress}
color={backgroundColor}
base0={reserve1 / reserve0}
base1={reserve0 / reserve1}
/>
</Panel>
</PanelWrapper>
<TYPE.main fontSize={'1.125rem'} style={{ marginTop: '3rem' }}>
Transactions
</TYPE.main>{' '}
<Panel
style={{
marginTop: '1.5rem',
}}
>
{transactions ? <TxnList transactions={transactions} /> : <Loader />}
</Panel>
<RowBetween style={{ marginTop: '3rem' }}>
<TYPE.main fontSize={'1.125rem'}>Pair Information</TYPE.main>{' '}
</RowBetween>
<Panel
rounded
style={{
marginTop: '1.5rem',
}}
p={20}
>
<TokenDetailsLayout>
<Column>
<TYPE.main>Pair Name</TYPE.main>
<TYPE.main style={{ marginTop: '.5rem' }}>
<RowFixed>
<FormattedName text={token0?.symbol ?? ''} maxCharacters={8} />
-
<FormattedName text={token1?.symbol ?? ''} maxCharacters={8} />
</RowFixed>
</TYPE.main>
</Column>
<Column>
<TYPE.main>Pair Address</TYPE.main>
<AutoRow align="flex-end">
<TYPE.main style={{ marginTop: '.5rem' }}>
{pairAddress.slice(0, 6) + '...' + pairAddress.slice(38, 42)}
</TYPE.main>
<CopyHelper toCopy={pairAddress} />
</AutoRow>
</Column>
<Column>
<TYPE.main>
<RowFixed>
<FormattedName text={token0?.symbol ?? ''} maxCharacters={8} />{' '}
<span style={{ marginLeft: '4px' }}>Address</span>
</RowFixed>
</TYPE.main>
<AutoRow align="flex-end">
<TYPE.main style={{ marginTop: '.5rem' }}>
{token0 && token0.id.slice(0, 6) + '...' + token0.id.slice(38, 42)}
</TYPE.main>
<CopyHelper toCopy={token0?.id} />
</AutoRow>
</Column>
<Column>
<TYPE.main>
<RowFixed>
<FormattedName text={token1?.symbol ?? ''} maxCharacters={8} />{' '}
<span style={{ marginLeft: '4px' }}>Address</span>
</RowFixed>
</TYPE.main>
<AutoRow align="flex-end">
<TYPE.main style={{ marginTop: '.5rem' }} fontSize={16}>
{token1 && token1.id.slice(0, 6) + '...' + token1.id.slice(38, 42)}
</TYPE.main>
<CopyHelper toCopy={token1?.id} />
</AutoRow>
</Column>
<ButtonLight color={backgroundColor}>
<Link color={backgroundColor} external href={'https://ftmscan.com/address/' + pairAddress}>
View on FTMscan ↗
</Link>
</ButtonLight>
</TokenDetailsLayout>
</Panel>
</>
</DashboardWrapper>
</WarningGrouping>
</ContentWrapperLarge>
</PageWrapper>
)
}
Example #5
| Source File: TokenPage.js From spooky-info with GNU General Public License v3.0 | 4 votes |
|
function TokenPage({ address, history }) {
const {
id,
name,
symbol,
priceUSD,
oneDayVolumeUSD,
totalLiquidityUSD,
volumeChangeUSD,
oneDayVolumeUT,
volumeChangeUT,
priceChangeUSD,
liquidityChangeUSD,
oneDayTxns,
txnChange,
} = useTokenData(address)
useEffect(() => {
document.querySelector('body').scrollTo(0, 0)
}, [])
// detect color from token
const backgroundColor = useColor(id, symbol)
const allPairs = useTokenPairs(address)
// pairs to show in pair list
const fetchedPairsList = useDataForList(allPairs)
// all transactions with this token
const transactions = useTokenTransactions(address)
// price
const price = priceUSD ? formattedNum(priceUSD, true) : ''
const priceChange = priceChangeUSD ? formattedPercent(priceChangeUSD) : ''
// volume
const volume = formattedNum(!!oneDayVolumeUSD ? oneDayVolumeUSD : oneDayVolumeUT, true)
const usingUtVolume = oneDayVolumeUSD === 0 && !!oneDayVolumeUT
const volumeChange = formattedPercent(!usingUtVolume ? volumeChangeUSD : volumeChangeUT)
// liquidity
const liquidity = formattedNum(totalLiquidityUSD, true)
const liquidityChange = formattedPercent(liquidityChangeUSD)
// transactions
const txnChangeFormatted = formattedPercent(txnChange)
const below1080 = useMedia('(max-width: 1080px)')
const below800 = useMedia('(max-width: 800px)')
const below600 = useMedia('(max-width: 600px)')
const below500 = useMedia('(max-width: 500px)')
// format for long symbol
const LENGTH = below1080 ? 10 : 16
const formattedSymbol = symbol?.length > LENGTH ? symbol.slice(0, LENGTH) + '...' : symbol
const [dismissed, markAsDismissed] = usePathDismissed(history.location.pathname)
const [savedTokens, addToken] = useSavedTokens()
const listedTokens = useListedTokens()
useEffect(() => {
window.scrollTo({
behavior: 'smooth',
top: 0,
})
}, [])
const [useTracked, setUseTracked] = useState(true)
if (TOKEN_BLACKLIST.includes(address)) {
return (
<BlockedWrapper>
<BlockedMessageWrapper>
<AutoColumn gap="1rem" justify="center">
<TYPE.light style={{ textAlign: 'center' }}>
{BLOCKED_WARNINGS[address] ?? `This token is not supported.`}
</TYPE.light>
<Link external={true} href={'https://ftmscan.com/address/' + address}>{`More about ${shortenAddress(
address
)}`}</Link>
</AutoColumn>
</BlockedMessageWrapper>
</BlockedWrapper>
)
}
return (
<PageWrapper>
<ThemedBackground backgroundColor={transparentize(0.6, backgroundColor)} />
<Warning
type={'token'}
show={!dismissed && listedTokens && !listedTokens.includes(address)}
setShow={markAsDismissed}
address={address}
/>
<ContentWrapper>
<RowBetween style={{ flexWrap: 'wrap', alingItems: 'start' }}>
<AutoRow align="flex-end" style={{ width: 'fit-content' }}>
<TYPE.body>
<BasicLink to="/tokens">{'Tokens '}</BasicLink>→ {symbol}
</TYPE.body>
<Link
style={{ width: 'fit-content' }}
color={backgroundColor}
external
href={'https://ftmscan.com/address/' + address}
>
<Text style={{ marginLeft: '.15rem' }} fontSize={'14px'} fontWeight={400}>
({address.slice(0, 8) + '...' + address.slice(36, 42)})
</Text>
</Link>
</AutoRow>
{!below600 && <Search small={true} />}
</RowBetween>
<WarningGrouping disabled={!dismissed && listedTokens && !listedTokens.includes(address)}>
<DashboardWrapper style={{ marginTop: below1080 ? '0' : '1rem' }}>
<RowBetween
style={{
flexWrap: 'wrap',
marginBottom: '2rem',
alignItems: 'flex-start',
}}
>
<RowFixed style={{ flexWrap: 'wrap' }}>
<RowFixed style={{ alignItems: 'baseline' }}>
<TokenLogo address={address} size="32px" style={{ alignSelf: 'center' }} />
<TYPE.main fontSize={below1080 ? '1.5rem' : '2rem'} fontWeight={500} style={{ margin: '0 1rem' }}>
<RowFixed gap="6px">
<FormattedName text={name ? name + ' ' : ''} maxCharacters={16} style={{ marginRight: '6px' }} />{' '}
{formattedSymbol ? `(${formattedSymbol})` : ''}
</RowFixed>
</TYPE.main>{' '}
{!below1080 && (
<>
<TYPE.main fontSize={'1.5rem'} fontWeight={500} style={{ marginRight: '1rem' }}>
{price}
</TYPE.main>
{priceChange}
</>
)}
</RowFixed>
</RowFixed>
<span>
<RowFixed ml={below500 ? '0' : '2.5rem'} mt={below500 ? '1rem' : '0'}>
{!!!savedTokens[address] && !below800 ? (
<Hover onClick={() => addToken(address, symbol)}>
<StyledIcon>
<PlusCircle style={{ marginRight: '0.5rem' }} />
</StyledIcon>
</Hover>
) : !below1080 ? (
<StyledIcon>
<Bookmark style={{ marginRight: '0.5rem', opacity: 0.4 }} />
</StyledIcon>
) : (
<></>
)}
<Link href={getPoolLink(address)} target="_blank">
<ButtonLight color={backgroundColor}>+ Add Liquidity</ButtonLight>
</Link>
<Link href={getSwapLink(address)} target="_blank">
<ButtonDark ml={'.5rem'} mr={below1080 && '.5rem'} color={backgroundColor}>
Trade
</ButtonDark>
</Link>
</RowFixed>
</span>
</RowBetween>
<>
{!below1080 && (
<RowFixed>
<TYPE.main fontSize={'1.125rem'} mr="6px">
Token Stats
</TYPE.main>
{usingUtVolume && (
<HoverText text={UNTRACKED_COPY}>
<WarningIcon />
</HoverText>
)}
</RowFixed>
)}
<PanelWrapper style={{ marginTop: below1080 ? '0' : '1rem' }}>
{below1080 && price && (
<Panel>
<AutoColumn gap="20px">
<RowBetween>
<TYPE.main>Price</TYPE.main>
<div />
</RowBetween>
<RowBetween align="flex-end">
{' '}
<TYPE.main fontSize={'1.5rem'} lineHeight={1} fontWeight={500}>
{price}
</TYPE.main>
<TYPE.main>{priceChange}</TYPE.main>
</RowBetween>
</AutoColumn>
</Panel>
)}
<Panel>
<AutoColumn gap="20px">
<RowBetween>
<TYPE.main>Total Liquidity</TYPE.main>
<div />
</RowBetween>
<RowBetween align="flex-end">
<TYPE.main fontSize={'1.5rem'} lineHeight={1} fontWeight={500}>
{liquidity}
</TYPE.main>
<TYPE.main>{liquidityChange}</TYPE.main>
</RowBetween>
</AutoColumn>
</Panel>
<Panel>
<AutoColumn gap="20px">
<RowBetween>
<TYPE.main>Volume (24hrs)</TYPE.main>
<div />
</RowBetween>
<RowBetween align="flex-end">
<TYPE.main fontSize={'1.5rem'} lineHeight={1} fontWeight={500}>
{volume}
</TYPE.main>
<TYPE.main>{volumeChange}</TYPE.main>
</RowBetween>
</AutoColumn>
</Panel>
<Panel>
<AutoColumn gap="20px">
<RowBetween>
<TYPE.main>Transactions (24hrs)</TYPE.main>
<div />
</RowBetween>
<RowBetween align="flex-end">
<TYPE.main fontSize={'1.5rem'} lineHeight={1} fontWeight={500}>
{oneDayTxns ? localNumber(oneDayTxns) : 0}
</TYPE.main>
<TYPE.main>{txnChangeFormatted}</TYPE.main>
</RowBetween>
</AutoColumn>
</Panel>
<Panel
style={{
gridColumn: below1080 ? '1' : '2/4',
gridRow: below1080 ? '' : '1/4',
}}
>
<TokenChart address={address} color={backgroundColor} base={priceUSD} />
</Panel>
</PanelWrapper>
</>
<RowBetween style={{ marginTop: '3rem' }}>
<TYPE.main fontSize={'1.125rem'}>Top Pairs</TYPE.main>
<AutoRow gap="4px" style={{ width: 'fit-content' }}>
<Checkbox
checked={useTracked}
setChecked={() => setUseTracked(!useTracked)}
text={'Hide untracked pairs'}
/>
<QuestionHelper text="USD amounts may be inaccurate in low liquidity pairs or pairs without ETH or stablecoins." />
</AutoRow>
</RowBetween>
<Panel
rounded
style={{
marginTop: '1.5rem',
padding: '1.125rem 0 ',
}}
>
{address && fetchedPairsList ? (
<PairList color={backgroundColor} address={address} pairs={fetchedPairsList} useTracked={useTracked} />
) : (
<Loader />
)}
</Panel>
<RowBetween mt={40} mb={'1rem'}>
<TYPE.main fontSize={'1.125rem'}>Transactions</TYPE.main> <div />
</RowBetween>
<Panel rounded>
{transactions ? <TxnList color={backgroundColor} transactions={transactions} /> : <Loader />}
</Panel>
<>
<RowBetween style={{ marginTop: '3rem' }}>
<TYPE.main fontSize={'1.125rem'}>Token Information</TYPE.main>{' '}
</RowBetween>
<Panel
rounded
style={{
marginTop: '1.5rem',
}}
p={20}
>
<TokenDetailsLayout>
<Column>
<TYPE.main>Symbol</TYPE.main>
<Text style={{ marginTop: '.5rem' }} fontSize={24} fontWeight="500">
<FormattedName text={symbol} maxCharacters={12} />
</Text>
</Column>
<Column>
<TYPE.main>Name</TYPE.main>
<TYPE.main style={{ marginTop: '.5rem' }} fontSize={24} fontWeight="500">
<FormattedName text={name} maxCharacters={16} />
</TYPE.main>
</Column>
<Column>
<TYPE.main>Address</TYPE.main>
<AutoRow align="flex-end">
<TYPE.main style={{ marginTop: '.5rem' }} fontSize={24} fontWeight="500">
{address.slice(0, 8) + '...' + address.slice(36, 42)}
</TYPE.main>
<CopyHelper toCopy={address} />
</AutoRow>
</Column>
<ButtonLight color={backgroundColor}>
<Link color={backgroundColor} external href={'https://ftmscan.com/address/' + address}>
View on FTMscan ↗
</Link>
</ButtonLight>
</TokenDetailsLayout>
</Panel>
</>
</DashboardWrapper>
</WarningGrouping>
</ContentWrapper>
</PageWrapper>
)
}
Example #6
| Source File: AccountPage.js From pancake-info-v1 with GNU General Public License v3.0 | 4 votes |
|
function AccountPage({ account }) {
// get data for this account
const transactions = useUserTransactions(account)
// get data for user stats
const transactionCount = transactions?.swaps?.length + transactions?.burns?.length + transactions?.mints?.length
// get derived totals
let totalSwappedUSD = useMemo(() => {
return transactions?.swaps
? transactions?.swaps.reduce((total, swap) => {
return total + parseFloat(swap.amountUSD)
}, 0)
: 0
}, [transactions])
useEffect(() => {
window.scrollTo({
behavior: 'smooth',
top: 0,
})
}, [])
const below600 = useMedia('(max-width: 600px)')
// adding/removing account from saved accounts
const [savedAccounts, addAccount, removeAccount] = useSavedAccounts()
const isBookmarked = savedAccounts.includes(account)
const handleBookmarkClick = useCallback(() => {
;(isBookmarked ? removeAccount : addAccount)(account)
}, [account, isBookmarked, addAccount, removeAccount])
return (
<PageWrapper>
<ContentWrapper>
<RowBetween>
<TYPE.body>
<BasicLink to="/accounts">{'Accounts '}</BasicLink>→{' '}
<Link lineHeight={'145.23%'} href={'https://bscscan.com/address/' + account} target="_blank">
{' '}
{account?.slice(0, 42)}{' '}
</Link>
</TYPE.body>
{!below600 && <Search small={true} />}
</RowBetween>
<Header>
<RowBetween>
<span>
<TYPE.header fontSize={24}>{account?.slice(0, 6) + '...' + account?.slice(38, 42)}</TYPE.header>
<Link lineHeight={'145.23%'} href={'https://bscscan.com/address/' + account} target="_blank">
<TYPE.main fontSize={14}>View on BscScan</TYPE.main>
</Link>
</span>
<AccountWrapper>
<StyledIcon>
<Bookmark
onClick={handleBookmarkClick}
style={{ opacity: isBookmarked ? 0.8 : 0.4, cursor: 'pointer' }}
/>
</StyledIcon>
</AccountWrapper>
</RowBetween>
</Header>
<DashboardWrapper>
<TYPE.main fontSize={'1.125rem'} style={{ marginTop: '1rem' }}>
Wallet Stats
</TYPE.main>{' '}
<Panel
style={{
marginTop: '1.5rem',
marginBottom: '1rem',
}}
>
<AutoRow gap="20px">
<AutoColumn gap="8px">
<TYPE.header fontSize={24}>{totalSwappedUSD ? formattedNum(totalSwappedUSD, true) : '-'}</TYPE.header>
<TYPE.main>Total Value Swapped</TYPE.main>
</AutoColumn>
<AutoColumn gap="8px">
<TYPE.header fontSize={24}>
{totalSwappedUSD ? formattedNum(totalSwappedUSD * 0.002, true) : '-'}
</TYPE.header>
<TYPE.main>Total Fees Paid</TYPE.main>
</AutoColumn>
<AutoColumn gap="8px">
<TYPE.header fontSize={24}>{transactionCount ? transactionCount : '-'}</TYPE.header>
<TYPE.main>Total Transactions</TYPE.main>
</AutoColumn>
</AutoRow>
</Panel>
<TYPE.main fontSize={'1.125rem'} style={{ marginTop: '3rem' }}>
Transactions
</TYPE.main>{' '}
<Panel
style={{
marginTop: '1.5rem',
}}
>
<TxnList transactions={transactions} />
</Panel>
</DashboardWrapper>
</ContentWrapper>
</PageWrapper>
)
}
Example #7
| Source File: PairPage.js From pancake-info-v1 with GNU General Public License v3.0 | 4 votes |
|
function PairPage({ pairAddress, history }) {
const {
token0,
token1,
reserve0,
reserve1,
reserveUSD,
trackedReserveUSD,
oneDayVolumeUSD,
volumeChangeUSD,
oneDayVolumeUntracked,
volumeChangeUntracked,
liquidityChangeUSD,
} = usePairData(pairAddress)
useEffect(() => {
document.querySelector('body').scrollTo(0, 0)
}, [])
const transactions = usePairTransactions(pairAddress)
const backgroundColor = useColor(pairAddress)
// liquidity
const liquidity = trackedReserveUSD
? formattedNum(trackedReserveUSD, true)
: reserveUSD
? formattedNum(reserveUSD, true)
: '-'
const liquidityChange = formattedPercent(liquidityChangeUSD)
// mark if using untracked liquidity
const [usingTracked, setUsingTracked] = useState(true)
useEffect(() => {
setUsingTracked(!trackedReserveUSD ? false : true)
}, [trackedReserveUSD])
// volume // volume
const volume =
oneDayVolumeUSD || oneDayVolumeUSD === 0
? formattedNum(oneDayVolumeUSD === 0 ? oneDayVolumeUntracked : oneDayVolumeUSD, true)
: oneDayVolumeUSD === 0
? '$0'
: '-'
// mark if using untracked volume
const [usingUtVolume, setUsingUtVolume] = useState(false)
useEffect(() => {
setUsingUtVolume(oneDayVolumeUSD === 0 ? true : false)
}, [oneDayVolumeUSD])
const volumeChange = formattedPercent(!usingUtVolume ? volumeChangeUSD : volumeChangeUntracked)
// get fees // get fees
const fees =
oneDayVolumeUSD || oneDayVolumeUSD === 0
? usingUtVolume
? formattedNum(oneDayVolumeUntracked * 0.002, true)
: formattedNum(oneDayVolumeUSD * 0.002, true)
: '-'
// token data for usd
const [ethPrice] = useEthPrice()
const token0USD =
token0?.derivedETH && ethPrice ? formattedNum(parseFloat(token0.derivedETH) * parseFloat(ethPrice), true) : ''
const token1USD =
token1?.derivedETH && ethPrice ? formattedNum(parseFloat(token1.derivedETH) * parseFloat(ethPrice), true) : ''
// rates
const token0Rate = reserve0 && reserve1 ? formattedNum(reserve1 / reserve0) : '-'
const token1Rate = reserve0 && reserve1 ? formattedNum(reserve0 / reserve1) : '-'
// formatted symbols for overflow
const formattedSymbol0 = token0?.symbol.length > 6 ? token0?.symbol.slice(0, 5) + '...' : token0?.symbol
const formattedSymbol1 = token1?.symbol.length > 6 ? token1?.symbol.slice(0, 5) + '...' : token1?.symbol
const below1080 = useMedia('(max-width: 1080px)')
const below900 = useMedia('(max-width: 900px)')
const below600 = useMedia('(max-width: 600px)')
const [dismissed, markAsDismissed] = usePathDismissed(history.location.pathname)
useEffect(() => {
window.scrollTo({
behavior: 'smooth',
top: 0,
})
}, [])
const [savedPairs, addPair] = useSavedPairs()
const listedTokens = useListedTokens()
return (
<PageWrapper>
<ThemedBackground backgroundColor={transparentize(0.6, backgroundColor)} />
<span />
<Warning
type={'pair'}
show={!dismissed && listedTokens && !(listedTokens.includes(token0?.id) && listedTokens.includes(token1?.id))}
setShow={markAsDismissed}
address={pairAddress}
/>
<ContentWrapperLarge>
<RowBetween>
<TYPE.body>
<BasicLink to="/pairs">{'Pairs '}</BasicLink>→ {token0?.symbol}-{token1?.symbol}
</TYPE.body>
{!below600 && <Search small={true} />}
</RowBetween>
<WarningGrouping
disabled={
!dismissed && listedTokens && !(listedTokens.includes(token0?.id) && listedTokens.includes(token1?.id))
}
>
<DashboardWrapper>
<AutoColumn gap="40px" style={{ marginBottom: '1.5rem' }}>
<div
style={{
display: 'flex',
justifyContent: 'space-between',
flexWrap: 'wrap',
width: '100%',
}}
>
<RowFixed style={{ flexWrap: 'wrap', minWidth: '100px' }}>
<RowFixed>
{token0 && token1 && (
<DoubleTokenLogo a0={token0?.id || ''} a1={token1?.id || ''} size={32} margin={true} />
)}{' '}
<TYPE.main fontSize={below1080 ? '1.5rem' : '2rem'} style={{ margin: '0 1rem' }}>
{token0 && token1 ? (
<>
<HoverSpan onClick={() => history.push(`/token/${token0?.id}`)}>{token0.symbol}</HoverSpan>
<span>-</span>
<HoverSpan onClick={() => history.push(`/token/${token1?.id}`)}>
{token1.symbol}
</HoverSpan>{' '}
Pair
</>
) : (
''
)}
</TYPE.main>
</RowFixed>
</RowFixed>
<RowFixed
ml={below900 ? '0' : '2.5rem'}
mt={below1080 && '1rem'}
style={{
flexDirection: below1080 ? 'row-reverse' : 'initial',
}}
>
{!!!savedPairs[pairAddress] && !below1080 ? (
<Hover onClick={() => addPair(pairAddress, token0.id, token1.id, token0.symbol, token1.symbol)}>
<StyledIcon>
<PlusCircle style={{ marginRight: '0.5rem' }} />
</StyledIcon>
</Hover>
) : !below1080 ? (
<StyledIcon>
<Bookmark style={{ marginRight: '0.5rem', opacity: 0.4 }} />
</StyledIcon>
) : (
<></>
)}
<Link external href={getPoolLink(token0?.id, token1?.id)}>
<ButtonLight color={backgroundColor}>+ Add Liquidity</ButtonLight>
</Link>
<Link external href={getSwapLink(token0?.id, token1?.id)}>
<ButtonDark ml={!below1080 && '.5rem'} mr={below1080 && '.5rem'} color={backgroundColor}>
Trade
</ButtonDark>
</Link>
</RowFixed>
</div>
</AutoColumn>
<AutoRow
gap="6px"
style={{
width: 'fit-content',
marginTop: below900 ? '1rem' : '0',
marginBottom: below900 ? '0' : '2rem',
flexWrap: 'wrap',
}}
>
<FixedPanel onClick={() => history.push(`/token/${token0?.id}`)}>
<RowFixed>
<TokenLogo address={token0?.id} size={'16px'} />
<TYPE.main fontSize={'16px'} lineHeight={1} fontWeight={500} ml={'4px'}>
{token0 && token1
? `1 ${formattedSymbol0} = ${token0Rate} ${formattedSymbol1} ${
parseFloat(token0?.derivedETH) ? '(' + token0USD + ')' : ''
}`
: '-'}
</TYPE.main>
</RowFixed>
</FixedPanel>
<FixedPanel onClick={() => history.push(`/token/${token1?.id}`)}>
<RowFixed>
<TokenLogo address={token1?.id} size={'16px'} />
<TYPE.main fontSize={'16px'} lineHeight={1} fontWeight={500} ml={'4px'}>
{token0 && token1
? `1 ${formattedSymbol1} = ${token1Rate} ${formattedSymbol0} ${
parseFloat(token1?.derivedETH) ? '(' + token1USD + ')' : ''
}`
: '-'}
</TYPE.main>
</RowFixed>
</FixedPanel>
</AutoRow>
<>
{!below1080 && <TYPE.main fontSize={'1.125rem'}>Pair Stats</TYPE.main>}
<PanelWrapper style={{ marginTop: '1.5rem' }}>
<Panel style={{ height: '100%' }}>
<AutoColumn gap="20px">
<RowBetween>
<TYPE.main>Total Liquidity {!usingTracked ? '(Untracked)' : ''}</TYPE.main>
<div />
</RowBetween>
<RowBetween align="flex-end">
<TYPE.main fontSize={'1.5rem'} lineHeight={1} fontWeight={500}>
{liquidity}
</TYPE.main>
<TYPE.main>{liquidityChange}</TYPE.main>
</RowBetween>
</AutoColumn>
</Panel>
<Panel style={{ height: '100%' }}>
<AutoColumn gap="20px">
<RowBetween>
<TYPE.main>Volume (24hrs) {usingUtVolume && '(Untracked)'}</TYPE.main>
<div />
</RowBetween>
<RowBetween align="flex-end">
<TYPE.main fontSize={'1.5rem'} lineHeight={1} fontWeight={500}>
{volume}
</TYPE.main>
<TYPE.main>{volumeChange}</TYPE.main>
</RowBetween>
</AutoColumn>
</Panel>
<Panel style={{ height: '100%' }}>
<AutoColumn gap="20px">
<RowBetween>
<TYPE.main>Fees (24hrs)</TYPE.main>
<div />
</RowBetween>
<RowBetween align="flex-end">
<TYPE.main fontSize={'1.5rem'} lineHeight={1} fontWeight={500}>
{fees}
</TYPE.main>
<TYPE.main>{volumeChange}</TYPE.main>
</RowBetween>
</AutoColumn>
</Panel>
<Panel style={{ height: '100%' }}>
<AutoColumn gap="20px">
<RowBetween>
<TYPE.main>Pooled Tokens</TYPE.main>
<div />
</RowBetween>
<Hover onClick={() => history.push(`/token/${token0?.id}`)} fade={true}>
<AutoRow gap="4px">
<TokenLogo address={token0?.id} />
<TYPE.main fontSize={20} lineHeight={1} fontWeight={500}>
<RowFixed>
{reserve0 ? formattedNum(reserve0) : ''}{' '}
<FormattedName text={token0?.symbol ?? ''} maxCharacters={8} margin={true} />
</RowFixed>
</TYPE.main>
</AutoRow>
</Hover>
<Hover onClick={() => history.push(`/token/${token1?.id}`)} fade={true}>
<AutoRow gap="4px">
<TokenLogo address={token1?.id} />
<TYPE.main fontSize={20} lineHeight={1} fontWeight={500}>
<RowFixed>
{reserve1 ? formattedNum(reserve1) : ''}{' '}
<FormattedName text={token1?.symbol ?? ''} maxCharacters={8} margin={true} />
</RowFixed>
</TYPE.main>
</AutoRow>
</Hover>
</AutoColumn>
</Panel>
<Panel
style={{
gridColumn: below1080 ? '1' : '2/4',
gridRow: below1080 ? '' : '1/5',
}}
>
<PairChart
address={pairAddress}
color={backgroundColor}
base0={reserve1 / reserve0}
base1={reserve0 / reserve1}
/>
</Panel>
</PanelWrapper>
<TYPE.main fontSize={'1.125rem'} style={{ marginTop: '3rem' }}>
Transactions
</TYPE.main>{' '}
<Panel
style={{
marginTop: '1.5rem',
}}
>
{transactions ? <TxnList transactions={transactions} /> : <Loader />}
</Panel>
<RowBetween style={{ marginTop: '3rem' }}>
<TYPE.main fontSize={'1.125rem'}>Pair Information</TYPE.main>{' '}
</RowBetween>
<Panel
rounded
style={{
marginTop: '1.5rem',
}}
p={20}
>
<TokenDetailsLayout>
<Column>
<TYPE.main>Pair Name</TYPE.main>
<TYPE.main style={{ marginTop: '.5rem' }}>
<RowFixed>
<FormattedName text={token0?.symbol ?? ''} maxCharacters={8} />
-
<FormattedName text={token1?.symbol ?? ''} maxCharacters={8} />
</RowFixed>
</TYPE.main>
</Column>
<Column>
<TYPE.main>Pair Address</TYPE.main>
<AutoRow align="flex-end">
<TYPE.main style={{ marginTop: '.5rem' }}>
{pairAddress.slice(0, 6) + '...' + pairAddress.slice(38, 42)}
</TYPE.main>
<CopyHelper toCopy={pairAddress} />
</AutoRow>
</Column>
<Column>
<TYPE.main>
<RowFixed>
<FormattedName text={token0?.symbol ?? ''} maxCharacters={8} />{' '}
<span style={{ marginLeft: '4px' }}>Address</span>
</RowFixed>
</TYPE.main>
<AutoRow align="flex-end">
<TYPE.main style={{ marginTop: '.5rem' }}>
{token0 && token0.id.slice(0, 6) + '...' + token0.id.slice(38, 42)}
</TYPE.main>
<CopyHelper toCopy={token0?.id} />
</AutoRow>
</Column>
<Column>
<TYPE.main>
<RowFixed>
<FormattedName text={token1?.symbol ?? ''} maxCharacters={8} />{' '}
<span style={{ marginLeft: '4px' }}>Address</span>
</RowFixed>
</TYPE.main>
<AutoRow align="flex-end">
<TYPE.main style={{ marginTop: '.5rem' }} fontSize={16}>
{token1 && token1.id.slice(0, 6) + '...' + token1.id.slice(38, 42)}
</TYPE.main>
<CopyHelper toCopy={token1?.id} />
</AutoRow>
</Column>
<ButtonLight color={backgroundColor}>
<Link color={backgroundColor} external href={'https://bscscan.com/address/' + pairAddress}>
View on BscScan ↗
</Link>
</ButtonLight>
</TokenDetailsLayout>
</Panel>
</>
</DashboardWrapper>
</WarningGrouping>
</ContentWrapperLarge>
</PageWrapper>
)
}
Example #8
| Source File: TokenPage.js From pancake-info-v1 with GNU General Public License v3.0 | 4 votes |
|
function TokenPage({ address, history }) {
const {
id,
name,
symbol,
priceUSD,
oneDayVolumeUSD,
totalLiquidityUSD,
volumeChangeUSD,
oneDayVolumeUT,
volumeChangeUT,
priceChangeUSD,
liquidityChangeUSD,
oneDayTxns,
txnChange,
} = useTokenData(address)
useEffect(() => {
document.querySelector('body').scrollTo(0, 0)
}, [])
// detect color from token
const backgroundColor = useColor(id, symbol)
const allPairs = useTokenPairs(address)
// pairs to show in pair list
const fetchedPairsList = useDataForList(allPairs)
// all transactions with this token
const transactions = useTokenTransactions(address)
// price
const price = priceUSD ? formattedNum(priceUSD, true) : ''
const priceChange = priceChangeUSD ? formattedPercent(priceChangeUSD) : ''
// volume
const volume =
oneDayVolumeUSD || oneDayVolumeUSD === 0
? formattedNum(oneDayVolumeUSD === 0 ? oneDayVolumeUT : oneDayVolumeUSD, true)
: oneDayVolumeUSD === 0
? '$0'
: '-'
// mark if using untracked volume
const [usingUtVolume, setUsingUtVolume] = useState(false)
useEffect(() => {
setUsingUtVolume(oneDayVolumeUSD === 0 ? true : false)
}, [oneDayVolumeUSD])
const volumeChange = formattedPercent(!usingUtVolume ? volumeChangeUSD : volumeChangeUT)
// liquidity
const liquidity = totalLiquidityUSD ? formattedNum(totalLiquidityUSD, true) : totalLiquidityUSD === 0 ? '$0' : '-'
const liquidityChange = formattedPercent(liquidityChangeUSD)
// transactions
const txnChangeFormatted = formattedPercent(txnChange)
const below1080 = useMedia('(max-width: 1080px)')
const below800 = useMedia('(max-width: 800px)')
const below600 = useMedia('(max-width: 600px)')
const below500 = useMedia('(max-width: 500px)')
// format for long symbol
const LENGTH = below1080 ? 10 : 16
const formattedSymbol = symbol?.length > LENGTH ? symbol.slice(0, LENGTH) + '...' : symbol
const [dismissed, markAsDismissed] = usePathDismissed(history.location.pathname)
const [savedTokens, addToken] = useSavedTokens()
const listedTokens = useListedTokens()
useEffect(() => {
window.scrollTo({
behavior: 'smooth',
top: 0,
})
}, [])
return (
<PageWrapper>
<ThemedBackground backgroundColor={transparentize(0.6, backgroundColor)} />
<Warning
type={'token'}
show={!dismissed && listedTokens && !listedTokens.includes(address)}
setShow={markAsDismissed}
address={address}
/>
<ContentWrapper>
<RowBetween style={{ flexWrap: 'wrap', alingItems: 'start' }}>
<AutoRow align="flex-end" style={{ width: 'fit-content' }}>
<TYPE.body>
<BasicLink to="/tokens">{'Tokens '}</BasicLink>→ {symbol}
{' '}
</TYPE.body>
<Link
style={{ width: 'fit-content' }}
color={backgroundColor}
external
href={'https://bscscan.com/address/' + address}
>
<Text style={{ marginLeft: '.15rem' }} fontSize={'14px'} fontWeight={400}>
({address.slice(0, 8) + '...' + address.slice(36, 42)})
</Text>
</Link>
</AutoRow>
{!below600 && <Search small={true} />}
</RowBetween>
<WarningGrouping disabled={!dismissed && listedTokens && !listedTokens.includes(address)}>
<DashboardWrapper style={{ marginTop: below1080 ? '0' : '1rem' }}>
<RowBetween
style={{
flexWrap: 'wrap',
marginBottom: '2rem',
alignItems: 'flex-start',
}}
>
<RowFixed style={{ flexWrap: 'wrap' }}>
<RowFixed style={{ alignItems: 'baseline' }}>
<TokenLogo address={address} size="32px" style={{ alignSelf: 'center' }} />
<TYPE.main fontSize={below1080 ? '1.5rem' : '2rem'} fontWeight={500} style={{ margin: '0 1rem' }}>
<RowFixed gap="6px">
<FormattedName text={name ? name + ' ' : ''} maxCharacters={16} style={{ marginRight: '6px' }} />{' '}
{formattedSymbol ? `(${formattedSymbol})` : ''}
</RowFixed>
</TYPE.main>{' '}
{!below1080 && (
<>
<TYPE.main fontSize={'1.5rem'} fontWeight={500} style={{ marginRight: '1rem' }}>
{price}
</TYPE.main>
{priceChange}
</>
)}
</RowFixed>
</RowFixed>
<span>
<RowFixed ml={below500 ? '0' : '2.5rem'} mt={below500 ? '1rem' : '0'}>
{!!!savedTokens[address] && !below800 ? (
<Hover onClick={() => addToken(address, symbol)}>
<StyledIcon>
<PlusCircle style={{ marginRight: '0.5rem' }} />
</StyledIcon>
</Hover>
) : !below1080 ? (
<StyledIcon>
<Bookmark style={{ marginRight: '0.5rem', opacity: 0.4 }} />
</StyledIcon>
) : (
<></>
)}
<Link href={getPoolLink(address)} target="_blank">
<ButtonLight color={backgroundColor}>+ Add Liquidity</ButtonLight>
</Link>
<Link href={getSwapLink(address)} target="_blank">
<ButtonDark ml={'.5rem'} mr={below1080 && '.5rem'} color={backgroundColor}>
Trade
</ButtonDark>
</Link>
</RowFixed>
</span>
</RowBetween>
<>
<PanelWrapper style={{ marginTop: below1080 ? '0' : '1rem' }}>
{below1080 && price && (
<Panel>
<AutoColumn gap="20px">
<RowBetween>
<TYPE.main>Price</TYPE.main>
<div />
</RowBetween>
<RowBetween align="flex-end">
{' '}
<TYPE.main fontSize={'1.5rem'} lineHeight={1} fontWeight={500}>
{price}
</TYPE.main>
<TYPE.main>{priceChange}</TYPE.main>
</RowBetween>
</AutoColumn>
</Panel>
)}
<Panel>
<AutoColumn gap="20px">
<RowBetween>
<TYPE.main>Total Liquidity</TYPE.main>
<div />
</RowBetween>
<RowBetween align="flex-end">
<TYPE.main fontSize={'1.5rem'} lineHeight={1} fontWeight={500}>
{liquidity}
</TYPE.main>
<TYPE.main>{liquidityChange}</TYPE.main>
</RowBetween>
</AutoColumn>
</Panel>
<Panel>
<AutoColumn gap="20px">
<RowBetween>
<TYPE.main>Volume (24hrs) {usingUtVolume && '(Untracked)'}</TYPE.main>
<div />
</RowBetween>
<RowBetween align="flex-end">
<TYPE.main fontSize={'1.5rem'} lineHeight={1} fontWeight={500}>
{volume}
</TYPE.main>
<TYPE.main>{volumeChange}</TYPE.main>
</RowBetween>
</AutoColumn>
</Panel>
<Panel>
<AutoColumn gap="20px">
<RowBetween>
<TYPE.main>Transactions (24hrs)</TYPE.main>
<div />
</RowBetween>
<RowBetween align="flex-end">
<TYPE.main fontSize={'1.5rem'} lineHeight={1} fontWeight={500}>
{oneDayTxns ? localNumber(oneDayTxns) : oneDayTxns === 0 ? 0 : '-'}
</TYPE.main>
<TYPE.main>{txnChangeFormatted}</TYPE.main>
</RowBetween>
</AutoColumn>
</Panel>
<Panel
style={{
gridColumn: below1080 ? '1' : '2/4',
gridRow: below1080 ? '' : '1/4',
}}
>
<TokenChart address={address} color={backgroundColor} base={priceUSD} />
</Panel>
</PanelWrapper>
</>
<span>
<TYPE.main fontSize={'1.125rem'} style={{ marginTop: '3rem' }}>
Top Pairs
</TYPE.main>
</span>
<Panel
rounded
style={{
marginTop: '1.5rem',
padding: '1.125rem 0 ',
}}
>
{address && fetchedPairsList ? (
<PairList color={backgroundColor} address={address} pairs={fetchedPairsList} />
) : (
<Loader />
)}
</Panel>
<RowBetween mt={40} mb={'1rem'}>
<TYPE.main fontSize={'1.125rem'}>Transactions</TYPE.main> <div />
</RowBetween>
<Panel rounded>
{transactions ? <TxnList color={backgroundColor} transactions={transactions} /> : <Loader />}
</Panel>
<>
<RowBetween style={{ marginTop: '3rem' }}>
<TYPE.main fontSize={'1.125rem'}>Token Information</TYPE.main>{' '}
</RowBetween>
<Panel
rounded
style={{
marginTop: '1.5rem',
}}
p={20}
>
<TokenDetailsLayout>
<Column>
<TYPE.main>Symbol</TYPE.main>
<Text style={{ marginTop: '.5rem' }} fontSize={24} fontWeight="500">
<FormattedName text={symbol} maxCharacters={12} />
</Text>
</Column>
<Column>
<TYPE.main>Name</TYPE.main>
<TYPE.main style={{ marginTop: '.5rem' }} fontSize={24} fontWeight="500">
<FormattedName text={name} maxCharacters={16} />
</TYPE.main>
</Column>
<Column>
<TYPE.main>Address</TYPE.main>
<AutoRow align="flex-end">
<TYPE.main style={{ marginTop: '.5rem' }} fontSize={24} fontWeight="500">
{address.slice(0, 8) + '...' + address.slice(36, 42)}
</TYPE.main>
<CopyHelper toCopy={address} />
</AutoRow>
</Column>
<ButtonLight color={backgroundColor}>
<Link color={backgroundColor} external href={'https://bscscan.com/address/' + address}>
View on BscScan ↗
</Link>
</ButtonLight>
</TokenDetailsLayout>
</Panel>
</>
</DashboardWrapper>
</WarningGrouping>
</ContentWrapper>
</PageWrapper>
)
}
