m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

UX Improvement: Fixed tooltip for token-list-item (#20258)

Browse Source 
* updated tooltip for token-list-item

* updated snapshot
This commit is contained in:
Nidhi Kumari 2023-08-02 15:07:12 +05:30 committed by GitHub
parent 446c7bb3fe
commit ad919026ab
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 27 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
ui/components/app/token-cell/__snapshots__/token-cell.test.js.snap
View File

@ -42,13 +42,6 @@ exports[`Token Cell should match snapshot 1`] = `
> >
<div <div
class="mm-box mm-box--width-1/3" class="mm-box mm-box--width-1/3"
>
<div>
<div
class=""
style="display: inline;"
tabindex="0"
title=""
> >
<p <p
class="mm-box mm-text mm-text--body-md mm-text--font-weight-medium mm-text--ellipsis mm-box--color-text-default" class="mm-box mm-text mm-text--body-md mm-text--font-weight-medium mm-text--ellipsis mm-box--color-text-default"
@ -56,8 +49,6 @@ exports[`Token Cell should match snapshot 1`] = `
TEST TEST
</p> </p>
</div> </div>
</div>
</div>
<p <p
class="mm-box mm-text mm-text--body-md mm-text--font-weight-medium mm-text--text-align-end mm-box--width-2/3 mm-box--color-text-default" class="mm-box mm-text mm-text--body-md mm-text--font-weight-medium mm-text--text-align-end mm-box--width-2/3 mm-box--color-text-default"
/> />

2
ui/components/multichain/token-list-item/__snapshots__/token-list-item.test.js.snap
View File

@ -43,12 +43,10 @@ exports[`TokenListItem should render correctly 1`] = `
<div <div
class="mm-box mm-box--width-1/3" class="mm-box mm-box--width-1/3"
> >
<div>
<p <p
class="mm-box mm-text mm-text--body-md mm-text--font-weight-medium mm-text--ellipsis mm-box--color-text-default" class="mm-box mm-text mm-text--body-md mm-text--font-weight-medium mm-text--ellipsis mm-box--color-text-default"
/> />
</div> </div>
</div>
<p <p
class="mm-box mm-text mm-text--body-md mm-text--font-weight-medium mm-text--text-align-end mm-box--width-2/3 mm-box--color-text-default" class="mm-box mm-text mm-text--body-md mm-text--font-weight-medium mm-text--text-align-end mm-box--width-2/3 mm-box--color-text-default"
/> />

14
ui/components/multichain/token-list-item/token-list-item.js
View File

@ -48,6 +48,7 @@ export const TokenListItem = ({
const primaryTokenImage = useSelector(getNativeCurrencyImage); const primaryTokenImage = useSelector(getNativeCurrencyImage);
const trackEvent = useContext(MetaMetricsContext); const trackEvent = useContext(MetaMetricsContext);
const chainId = useSelector(getCurrentChainId); const chainId = useSelector(getCurrentChainId);
const tokenTitle = title === 'ETH' ? t('networkNameEthereum') : title;
// Used for badge icon // Used for badge icon
const currentNetwork = useSelector(getCurrentNetwork); const currentNetwork = useSelector(getCurrentNetwork);
@ -121,11 +122,11 @@ export const TokenListItem = ({
gap={1} gap={1}
> >
<Box width={BlockSize.OneThird}> <Box width={BlockSize.OneThird}>
{title?.length > 12 ? (
<Tooltip <Tooltip
position="bottom" position="bottom"
interactive interactive
html={title} html={title}
disabled={title?.length < 12}
tooltipInnerClassName="multichain-token-list-item__tooltip" tooltipInnerClassName="multichain-token-list-item__tooltip"
> >
<Text <Text
@ -133,9 +134,18 @@ export const TokenListItem = ({
variant={TextVariant.bodyMd} variant={TextVariant.bodyMd}
ellipsis ellipsis
> >
{title === 'ETH' ? t('networkNameEthereum') : title} {tokenTitle}
</Text> </Text>
</Tooltip> </Tooltip>
) : (
<Text
fontWeight={FontWeight.Medium}
variant={TextVariant.bodyMd}
ellipsis
>
{tokenTitle}
</Text>
)}
</Box> </Box>
<Text <Text
fontWeight={FontWeight.Medium} fontWeight={FontWeight.Medium}