ButterflyEffect/uniswap-interface-uncensored
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(token-details): link between native:wrapped assets in the balance summary (#4817)

Browse Source 
* feat(token-details): link between native:wrapped assets in the balance summary

* update pageChainName access method
This commit is contained in:
Jordan Frankfurt 2022-10-06 11:36:52 -05:00 committed by GitHub
parent 22b26de78d
commit a96d13978b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 43 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
src/components/Tokens/TokenDetails/BalanceSummary.tsx
View File

@ -2,8 +2,11 @@ import { Trans } from '@lingui/macro'
import { Currency, CurrencyAmount, Token } from '@uniswap/sdk-core'
import { formatToDecimal } from 'analytics/utils'
import CurrencyLogo from 'components/CurrencyLogo'
import { validateUrlChainParam } from 'graphql/data/util'
import { useStablecoinValue } from 'hooks/useStablecoinPrice'
import { useParams } from 'react-router-dom'
import styled from 'styled-components/macro'
import { StyledInternalLink } from 'theme'
import { formatDollarAmount } from 'utils/formatDollarAmt'
const BalancesCard = styled.div`
@ -43,6 +46,32 @@ const TotalBalanceItem = styled.div`
display: flex;
`
const BalanceRowLink = styled(StyledInternalLink)`
color: unset;
`
function BalanceRow({ currency, formattedBalance, formattedUSDValue, href }: BalanceRowData) {
const content = (
<TotalBalance key={currency.wrapped.address}>
<TotalBalanceItem>
<CurrencyLogo currency={currency} />
&nbsp;{formattedBalance} {currency?.symbol}
</TotalBalanceItem>
<TotalBalanceItem>{formatDollarAmount(formattedUSDValue === 0 ? undefined : formattedUSDValue)}</TotalBalanceItem>
</TotalBalance>
)
if (href) {
return <BalanceRowLink to={href}>{content}</BalanceRowLink>
}
return content
}
interface BalanceRowData {
currency: Currency
formattedBalance: number
formattedUSDValue: number | undefined
href?: string
}
export interface BalanceSummaryProps {
tokenAmount: CurrencyAmount<Token> | undefined
nativeCurrencyAmount: CurrencyAmount<Currency> | undefined
@ -53,6 +82,9 @@ export default function BalanceSummary({ tokenAmount, nativeCurrencyAmount, isNa
const balanceUsdValue = useStablecoinValue(tokenAmount)?.toFixed(2)
const nativeBalanceUsdValue = useStablecoinValue(nativeCurrencyAmount)?.toFixed(2)
const { chainName } = useParams<{ chainName?: string }>()
const pageChainName = validateUrlChainParam(chainName).toLowerCase()
const tokenIsWrappedNative =
tokenAmount &&
nativeCurrencyAmount &&
@ -70,14 +102,18 @@ export default function BalanceSummary({ tokenAmount, nativeCurrencyAmount, isNa
const currencies = []
if (tokenAmount) {
currencies.push({
const tokenData: BalanceRowData = {
currency: tokenAmount.currency,
formattedBalance: formatToDecimal(tokenAmount, Math.min(tokenAmount.currency.decimals, 2)),
formattedUSDValue: balanceUsdValue ? parseFloat(balanceUsdValue) : undefined,
})
}
if (isNative) {
tokenData.href = `/tokens/${pageChainName}/${tokenAmount.currency.address}`
}
currencies.push(tokenData)
}
if (showNative && nativeCurrencyAmount) {
const nativeData = {
const nativeData: BalanceRowData = {
currency: nativeCurrencyAmount.currency,
formattedBalance: formatToDecimal(nativeCurrencyAmount, Math.min(nativeCurrencyAmount.currency.decimals, 2)),
formattedUSDValue: nativeBalanceUsdValue ? parseFloat(nativeBalanceUsdValue) : undefined,
@ -85,6 +121,7 @@ export default function BalanceSummary({ tokenAmount, nativeCurrencyAmount, isNa
if (isNative) {
currencies.unshift(nativeData)
} else {
nativeData.href = `/tokens/${pageChainName}/NATIVE`
currencies.push(nativeData)
}
}
@ -93,16 +130,8 @@ export default function BalanceSummary({ tokenAmount, nativeCurrencyAmount, isNa
<BalancesCard>
<TotalBalanceSection>
<Trans>Your balance</Trans>
{currencies.map(({ currency, formattedBalance, formattedUSDValue }) => (
<TotalBalance key={currency.wrapped.address}>
<TotalBalanceItem>
<CurrencyLogo currency={currency} />
&nbsp;{formattedBalance} {currency?.symbol}
</TotalBalanceItem>
<TotalBalanceItem>
{formatDollarAmount(formattedUSDValue === 0 ? undefined : formattedUSDValue)}
</TotalBalanceItem>
</TotalBalance>
{currencies.map((props) => (
<BalanceRow {...props} key={props.currency.wrapped.address} />
))}
</TotalBalanceSection>
</BalancesCard>

2
src/pages/TokenDetails/index.tsx
View File

@ -84,7 +84,7 @@ export default function TokenDetails() {
const { tokenAddress: tokenAddressParam, chainName } = useParams<{ tokenAddress?: string; chainName?: string }>()
const { account } = useWeb3React()
const currentChainName = validateUrlChainParam(chainName)
const pageChainId = CHAIN_NAME_TO_CHAIN_ID[validateUrlChainParam(chainName)]
const pageChainId = CHAIN_NAME_TO_CHAIN_ID[currentChainName]
const nativeCurrency = nativeOnChain(pageChainId)
const timePeriod = useAtomValue(filterTimeAtom)
const isNative = tokenAddressParam === 'NATIVE'