Skip to content

fix: NFT Grid tooltip #31625

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 12 commits into from
Apr 15, 2025
Merged

fix: NFT Grid tooltip #31625

merged 12 commits into from
Apr 15, 2025

Conversation

gambinish
Copy link
Contributor

@gambinish gambinish commented Apr 4, 2025

Description

Adds tooltip to truncated NFT Grid titles.

Open in GitHub Codespaces

Related issues

Fixes:

Manual testing steps

Hover over NFT grid item that is truncated, if truncated it should tooltip, if the title is fully visible it should not tooltip

Screenshots/Recordings

demo.mov

Pre-merge author checklist

Pre-merge reviewer checklist

  • I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed).
  • I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots.

Copy link
Contributor

github-actions bot commented Apr 4, 2025

CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes.

@metamaskbot
Copy link
Collaborator

metamaskbot commented Apr 4, 2025

✨ Files requiring CODEOWNER review ✨

✅ @MetaMask/confirmations

  • ui/pages/confirmations/components/confirm/info/nft-token-transfer/__snapshots__/nft-token-transfer.test.tsx.snap
  • ui/pages/confirmations/components/confirm/info/shared/nft-send-heading/__snapshots__/nft-send-heading.test.tsx.snap

🖥️ @MetaMask/wallet-ux

  • ui/components/multichain/nft-item/nft-item.tsx

import Tooltip from '../../ui/tooltip/tooltip';
import { ENVIRONMENT_TYPE_FULLSCREEN } from '../../../../shared/constants/app';
// eslint-disable-next-line import/no-restricted-paths
import { getEnvironmentType } from '../../../../app/scripts/lib/util';
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hmm this rule is meant to prevent the UI from requesting stuff from the background/scripts.
Is there another getEnvironmentType or utility we can use here?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As far as I know, this is the only utility. We're using it in a few places already. Do you know of another one we can use instead?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Aw damn. No I don't know of another one we can use.

Thats okay then 😄

Copy link
Contributor

@Prithpal-Sooriya Prithpal-Sooriya Apr 4, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looking at the implementation, I'm not sure why this can only be used in the background.

const getEnvironmentType = (url = window.location.href) =>
getEnvironmentTypeMemo(url);

I think it can be moved to the shared folder in the future.

ellipsis
>
{nft?.name}
</Text>{' '}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this whitespace needed?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good catch. Don't know where this came from, will remove

@metamaskbot
Copy link
Collaborator

Builds ready [93facbd]
UI Startup Metrics (1214 ± 60 ms)
PlatformBuildTypePageMetricMean (ms)Min (ms)Max (ms)Std Dev (ms)P 75 (ms)P 95 (ms)
ChromeBrowserifyHomeuiStartup1214110614026012611332
load10649361226571137990
domContentLoaded10589311220571166986
domInteractive17136571630
firstPaint779731224410230986
backgroundConnect106304910
firstReactRender19144951929
getState10449867
initialActions001001
loadScripts80667894856838919
setupStore8420378
WebpackHomeuiStartup20781689255618522152332
load16141305195413917241814
domContentLoaded16081301192313917201809
domInteractive171267121457
firstPaint160644645921890
backgroundConnect271077133159
firstReactRender181533591187796
getState1332432879
initialActions316134
loadScripts16001298189813917141796
setupStore31630063289
FirefoxBrowserifyHomeuiStartup13341170187812213731657
load11961023167811212401475
domContentLoaded11961023167811212401474
domInteractive9639186258697
firstPaintNaNNaNNaNNaNNaNNaN
backgroundConnect24165582349
firstReactRender22194342231
getState7327478
initialActions002001
loadScripts11741005165411112181454
setupStore6413267
WebpackHomeuiStartup15181316205914615891840
load13111142179913313701606
domContentLoaded13101141179913313691605
domInteractive9735206309098
firstPaintNaNNaNNaNNaNNaNNaN
backgroundConnect25185362743
firstReactRender35276063650
getState7430379
initialActions102111
loadScripts12881124177313313481579
setupStore7528378
Bundle size diffs
  • background: 0 Bytes (0%)
  • ui: 820 Bytes (0.01%)
  • common: 0 Bytes (0%)

@metamaskbot
Copy link
Collaborator

Builds ready [0c55317]
UI Startup Metrics (1202 ± 65 ms)
PlatformBuildTypePageMetricMean (ms)Min (ms)Max (ms)Std Dev (ms)P 75 (ms)P 95 (ms)
ChromeBrowserifyHomeuiStartup1202108414626512461307
load10609471295601145988
domContentLoaded10549441285611139981
domInteractive16136561527
firstPaint7491371295423220978
backgroundConnect96274910
firstReactRender18154551924
getState11433768
initialActions001001
loadScripts807706102657848891
setupStore7414278
WebpackHomeuiStartup20531679232818722012309
load16081305184414717361791
domContentLoaded16021301184014817301785
domInteractive171269121453
firstPaint160643305924995
backgroundConnect261071143161
firstReactRender14952360978595
getState1031681689
initialActions512282235
loadScripts15941298183614717131777
setupStore25629449389
FirefoxBrowserifyHomeuiStartup14241214193315314961787
load12791068178714813421616
domContentLoaded12791068178714813421615
domInteractive10137205308796
firstPaintNaNNaNNaNNaNNaNNaN
backgroundConnect2617138152549
firstReactRender23205352330
getState7420279
initialActions001001
loadScripts12541050176014513151590
setupStore7438467
WebpackHomeuiStartup15361332216115915811963
load13271152190914513671711
domContentLoaded13261152190914513671711
domInteractive9640172258998
firstPaintNaNNaNNaNNaNNaNNaN
backgroundConnect23184542533
firstReactRender35285753745
getState8430588
initialActions101111
loadScripts13051134188614413501684
setupStore8436488
Bundle size diffs
  • background: 0 Bytes (0%)
  • ui: 820 Bytes (0.01%)
  • common: 0 Bytes (0%)

@gambinish gambinish marked this pull request as ready for review April 7, 2025 16:06
@gambinish gambinish requested review from a team as code owners April 7, 2025 16:06
NidhiKJha
NidhiKJha previously approved these changes Apr 7, 2025
@metamaskbot
Copy link
Collaborator

Builds ready [1155f70]
UI Startup Metrics (1252 ± 61 ms)
PlatformBuildTypePageMetricMean (ms)Min (ms)Max (ms)Std Dev (ms)P 75 (ms)P 95 (ms)
ChromeBrowserifyHomeuiStartup1252112614086112881358
load10919491264671155958
domContentLoaded10849431257681149948
domInteractive17146791632
firstPaint765731263434235950
backgroundConnect126618910
firstReactRender2314136152248
getState14545879
initialActions003001
loadScripts82569398468868958
setupStore8523378
WebpackHomeuiStartup21651681264518022772381
load16771242204315717601970
domContentLoaded16641237203215417481957
domInteractive171260111551
firstPaint156643045323681
backgroundConnect3810397553757
firstReactRender193523811135390
getState1641652368
initialActions319146
loadScripts16551218201015317361931
setupStore21639038359
FirefoxBrowserifyHomeuiStartup13401153187614213861698
load12051008170913012581515
domContentLoaded12041007170913012581515
domInteractive10138381448697
firstPaintNaNNaNNaNNaNNaNNaN
backgroundConnect2415102132444
firstReactRender22184242230
getState7426479
initialActions001001
loadScripts1181992167412812421494
setupStore6313268
WebpackHomeuiStartup15261320214215915771899
load13121148189814413831636
domContentLoaded13121148189714413831635
domInteractive9840188249298
firstPaintNaNNaNNaNNaNNaNNaN
backgroundConnect26185562938
firstReactRender36286064046
getState1352972989
initialActions102111
loadScripts12881130187214313591609
setupStore9546789
Bundle size diffs
  • background: 0 Bytes (0%)
  • ui: 820 Bytes (0.01%)
  • common: 0 Bytes (0%)

digiwand
digiwand previously approved these changes Apr 7, 2025
@gambinish gambinish added this pull request to the merge queue Apr 7, 2025
@github-merge-queue github-merge-queue bot removed this pull request from the merge queue due to failed status checks Apr 7, 2025
@gambinish gambinish dismissed stale reviews from digiwand, NidhiKJha, and Prithpal-Sooriya via b7a8af2 April 11, 2025 16:55
@metamaskbot
Copy link
Collaborator

Builds ready [94b833f]
UI Startup Metrics (1197 ± 57 ms)
PlatformBuildTypePageMetricMean (ms)Min (ms)Max (ms)Std Dev (ms)P 75 (ms)P 95 (ms)
ChromeBrowserifyHomeuiStartup1197108713805712401299
load1044945120354946994
domContentLoaded1037941119854958988
domInteractive17136681629
firstPaint679701161418250971
backgroundConnect7424478
firstReactRender20156062032
getState145721068
initialActions001001
loadScripts80070692352839895
setupStore8420279
WebpackHomeuiStartup21511766248319423052418
load16601357211515717671886
domContentLoaded16461238199115717601876
domInteractive161176121355
firstPaint187745247525074
backgroundConnect449419683460
firstReactRender177543911156094
getState1633303379
initialActions317136
loadScripts16411235196815617581869
setupStore24730444319
FirefoxBrowserifyHomeuiStartup13801170175311614241675
load12261038159711512791478
domContentLoaded12261037159611512791477
domInteractive10442328328897
firstPaintNaNNaNNaNNaNNaNNaN
backgroundConnect2213211212032
firstReactRender24195042433
getState8447689
initialActions001001
loadScripts12061023157511212601390
setupStore7451768
WebpackHomeuiStartup14711300190810915521673
load12631114164110013291446
domContentLoaded12631113164010013281446
domInteractive7730183237090
firstPaintNaNNaNNaNNaNNaNNaN
backgroundConnect2314290282134
firstReactRender34285043644
getState9431689
initialActions002111
loadScripts1242109615389313071421
setupStore9542679

@gambinish gambinish added this pull request to the merge queue Apr 15, 2025
@github-merge-queue github-merge-queue bot removed this pull request from the merge queue due to failed status checks Apr 15, 2025
@gambinish gambinish added this pull request to the merge queue Apr 15, 2025
@github-merge-queue github-merge-queue bot removed this pull request from the merge queue due to failed status checks Apr 15, 2025
@metamaskbot
Copy link
Collaborator

Builds ready [4e2610b]
UI Startup Metrics (1225 ± 74 ms)
PlatformBuildTypePageMetricMean (ms)Min (ms)Max (ms)Std Dev (ms)P 75 (ms)P 95 (ms)
ChromeBrowserifyHomeuiStartup1225109314917412671387
load105789413096911011184
domContentLoaded105188813026810951177
domInteractive18136291630
firstPaint74080131641210661146
backgroundConnect74132812
firstReactRender22155172339
getState135100121727
initialActions001001
loadScripts813664106468857937
setupStore85162812
WebpackHomeuiStartup21131729262219422622379
load16131308203715017241820
domContentLoaded16061304202614817201813
domInteractive151164111247
firstPaint1857363672205306
backgroundConnect2613231242661
firstReactRender21255428122334363
getState134227221324
initialActions318136
loadScripts16011303200314717191810
setupStore226247341944
FirefoxBrowserifyHomeuiStartup13971205170010514701575
load12431062154310513161411
domContentLoaded12431062154310513161411
domInteractive1043719631125160
firstPaintNaNNaNNaNNaNNaNNaN
backgroundConnect2513144212280
firstReactRender23193632332
getState75202813
initialActions002001
loadScripts12211051152810712981394
setupStore64283614
WebpackHomeuiStartup14851317188611015461682
load12711133161210113301455
domContentLoaded12711133161110113301455
domInteractive78341982384122
firstPaintNaNNaNNaNNaNNaNNaN
backgroundConnect21144462231
firstReactRender35285253745
getState114569929
initialActions102111
loadScripts12521118159410113111438
setupStore85434810
Bundle size diffs
  • background: 0 Bytes (0%)
  • ui: 834 Bytes (0.01%)
  • common: 0 Bytes (0%)

@gambinish gambinish added this pull request to the merge queue Apr 15, 2025
@github-merge-queue github-merge-queue bot removed this pull request from the merge queue due to failed status checks Apr 15, 2025
@gambinish gambinish added this pull request to the merge queue Apr 15, 2025
github-merge-queue bot pushed a commit that referenced this pull request Apr 15, 2025
## **Description**

Adds tooltip to truncated NFT Grid titles.

[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/31625?quickstart=1)

## **Related issues**

Fixes:

## **Manual testing steps**

Hover over NFT grid item that is truncated, if truncated it should
tooltip, if the title is fully visible it should not tooltip

## **Screenshots/Recordings**


https://github.com/user-attachments/assets/ea98bb55-1325-4c83-ba17-a830318f3ecf

## **Pre-merge author checklist**

- [x] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've completed the PR template to the best of my ability
- [x] I’ve included tests if applicable
- [x] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.
@github-merge-queue github-merge-queue bot removed this pull request from the merge queue due to failed status checks Apr 15, 2025
@gambinish gambinish added this pull request to the merge queue Apr 15, 2025
Merged via the queue into main with commit f086000 Apr 15, 2025
166 checks passed
@gambinish gambinish deleted the fix/nft-grid-tooltip branch April 15, 2025 16:07
@github-actions github-actions bot locked and limited conversation to collaborators Apr 15, 2025
@metamaskbot metamaskbot added the release-12.18.0 Issue or pull request that will be included in release 12.18.0 label Apr 15, 2025
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
release-12.18.0 Issue or pull request that will be included in release 12.18.0 team-assets
Projects
None yet
Development

Successfully merging this pull request may close these issues.

6 participants