fix: clip long token names (#7066)

* Clip token name with ellipsis style

* Use built-in ellipsis style
This commit is contained in:
gnewfield 2023-08-02 17:02:40 -04:00 committed by GitHub
parent d9ff7b15a1
commit 18b50283d3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -82,6 +82,9 @@ export default function Tokens({ account }: { account: string }) {
const TokenBalanceText = styled(ThemedText.BodySecondary)` const TokenBalanceText = styled(ThemedText.BodySecondary)`
${EllipsisStyle} ${EllipsisStyle}
` `
const TokenNameText = styled(ThemedText.SubHeader)`
${EllipsisStyle}
`
type TokenBalance = NonNullable< type TokenBalance = NonNullable<
NonNullable<NonNullable<PortfolioBalancesQuery['portfolios']>[number]>['tokenBalances'] NonNullable<NonNullable<PortfolioBalancesQuery['portfolios']>[number]>['tokenBalances']
@ -116,7 +119,7 @@ function TokenRow({ token, quantity, denominatedValue, tokenProjectMarket }: Tok
> >
<PortfolioRow <PortfolioRow
left={<PortfolioLogo chainId={currency.chainId} currencies={[currency]} size="40px" />} left={<PortfolioLogo chainId={currency.chainId} currencies={[currency]} size="40px" />}
title={<ThemedText.SubHeader>{token?.name}</ThemedText.SubHeader>} title={<TokenNameText>{token?.name}</TokenNameText>}
descriptor={ descriptor={
<TokenBalanceText> <TokenBalanceText>
{formatNumber(quantity, NumberType.TokenNonTx)} {token?.symbol} {formatNumber(quantity, NumberType.TokenNonTx)} {token?.symbol}