m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-22 17:33:23 +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

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

@ -43,20 +43,11 @@ exports[`Token Cell should match snapshot 1`] = `
<div
class="mm-box mm-box--width-1/3"
>
<div>
<div
class=""
style="display: inline;"
tabindex="0"
title=""
>
<p
class="mm-box mm-text mm-text--body-md mm-text--font-weight-medium mm-text--ellipsis mm-box--color-text-default"
>
TEST
</p>
</div>
</div>
<p
class="mm-box mm-text mm-text--body-md mm-text--font-weight-medium mm-text--ellipsis mm-box--color-text-default"
>
TEST
</p>
</div>
<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"

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

@ -43,11 +43,9 @@ exports[`TokenListItem should render correctly 1`] = `
<div
class="mm-box mm-box--width-1/3"
>
<div>
<p
class="mm-box mm-text mm-text--body-md mm-text--font-weight-medium mm-text--ellipsis mm-box--color-text-default"
/>
</div>
<p
class="mm-box mm-text mm-text--body-md mm-text--font-weight-medium mm-text--ellipsis mm-box--color-text-default"
/>
</div>
<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"

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

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