Skip to content
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

Add tooltip to contacts #8974

Merged
merged 11 commits into from
Jul 24, 2020
Merged

Add tooltip to contacts #8974

merged 11 commits into from
Jul 24, 2020

Conversation

muzakparov
Copy link
Contributor

@muzakparov muzakparov commented Jul 13, 2020

Related to #8790

Contact page:

contact

Seed phrase page:

seed

Not sure if it is necessary, but I think that copy logic could be abstracted to hooks since it seems to repeat in different places.

@muzakparov muzakparov requested a review from a team as a code owner July 13, 2020 18:38
@muzakparov muzakparov changed the title [WIP] add tooltip to contacts Add tooltip to contacts Jul 14, 2020
Copy link
Member

@Gudahtt Gudahtt left a comment

Choose a reason for hiding this comment

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

Thanks @muzakparov! Looks pretty good overall - I had a few comments/questions.

Not sure if it is necessary, but I think that copy logic could be abstracted to hooks since it seems to repeat in different places.

Definitely not necessary, but I agree that would be great. We'd just need to convert these to functional components first, so we could use hooks.

onClick={() => copyToClipboard(text)}
onClick={() => {
this.setState({ copied: true })
setTimeout(() => this.setState({ copied: false }), 3000)
Copy link
Member

Choose a reason for hiding this comment

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

This will throw an error in the console if this component is unmounted when this timer resolves. It's a harmless error in this case, but still nice to avoid. It could be avoided by saving the timeout ID, and clearing the timeout on unmount.

Copy link
Member

Choose a reason for hiding this comment

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

The same applies to the similar change made to the ViewContact component as well

className="address-book__view-contact__group__static-address--copy-icon"
onClick={() => copyToClipboard(checkSummedAddress)}
<Tooltip
wrapperClassName="address-book__tooltip-wrapper"
Copy link
Member

Choose a reason for hiding this comment

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

It looks like this class doesn't exist? 🤔 If so, better to not reference it.

Suggested change
wrapperClassName="address-book__tooltip-wrapper"

ui/app/pages/settings/contact-list-tab/index.scss Outdated Show resolved Hide resolved
@muzakparov
Copy link
Contributor Author

muzakparov commented Jul 15, 2020

thank you @Gudahtt
refactored to function components and added two react hooks, now it clears timeout on unmount
I am running yarn lint before committing my changes
In config, the following line seems to be commented out:

77.   // 'number-leading-zero': 'always',

Locally, I tried merging and then linting, there were no changes, so I haven't pushed the last commit.

@Gudahtt
Copy link
Member

Gudahtt commented Jul 15, 2020

Hey @muzakparov, we only just merged the PR that included uncommenting that linting rule. After you update this branch, it should work properly if you try linting again. Sorry for the confusion!

@muzakparov
Copy link
Contributor Author

muzakparov commented Jul 15, 2020

Cool stuff! I merged with your changes and seems to be fine now. Also, github seems to be having some synchronization issues at the moment, so I am unable to see my changes on the Pull Request. I will try again tomorrow

@muzakparov
Copy link
Contributor Author

Linting seems a bit different on CI/CD, I had to add a comma to make the linting test pass.

@Gudahtt
Copy link
Member

Gudahtt commented Jul 17, 2020

Oh, that might be because we recently updated eslint in #8978, which resulted in eslint requiring dangling commas for parameters as well. You might need to run yarn locally to get the updated version, or you might be running a different version of eslint that is installed globally or in your editor.

@muzakparov
Copy link
Contributor Author

I merged with develop branch, didn't notice that I had many commits sorry

@muzakparov
Copy link
Contributor Author

muzakparov commented Jul 21, 2020

hi @Gudahtt could you please help me with the error:) not urgent

@Gudahtt
Copy link
Member

Gudahtt commented Jul 21, 2020

Sure, no problem! I'll take a look

@Gudahtt
Copy link
Member

Gudahtt commented Jul 21, 2020

I'm not sure exactly what went wrong, but I backtracked and merged develop into this branch again, and now it seems to be OK!

Sorry for the delay in reviewing this - I'm hoping to get to it today or tomorrow.

Copy link
Member

@Gudahtt Gudahtt left a comment

Choose a reason for hiding this comment

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

These changes look fantastic! I had a couple of follow up suggestions/questions, let me know what you think.

ui/app/pages/settings/contact-list-tab/index.scss Outdated Show resolved Hide resolved
ui/app/hooks/useTimeout.js Outdated Show resolved Hide resolved
ui/app/hooks/useTimeout.js Outdated Show resolved Hide resolved
ui/app/hooks/useTimeout.js Outdated Show resolved Hide resolved
@muzakparov muzakparov requested a review from Gudahtt July 24, 2020 10:04
Copy link
Member

@Gudahtt Gudahtt left a comment

Choose a reason for hiding this comment

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

LGTM, great work!

@Gudahtt Gudahtt merged commit 1747f91 into MetaMask:develop Jul 24, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants