UI: Copy button next to addresses

[mazurroman]

⚠️ Reading contributors guidelines to get assigned is MANDATORY!

Read contributor guidelines

Description

Similar to Etherscan, we want a copy label next to addresses to make it simpler for people to copy those hashes. Once the copy button has been clicked, let's show a quick toast indicating the address has been copied.

[martinvibes]

I'm applying for this issue via OnlyDust Platform

let me hop on this @mazurroman

I'm a frontend developer, I have contributed to many open source projects, My tech stack involves typescript, react, Tailwind CSS, Solidity, etc

this particular issue is easy to tackle

Understanding the Requirements:

Carefully review the task description and the provided example to understand the expected functionality and user experience. Setup the Development Environment:

Clone the repository and create a new branch specifically for this feature. Ensure all necessary dependencies are installed and the environment is correctly configured. Implement the Copy Button:

Identify the components where the addresses are displayed. Add a copy button next to each address using a library like react-copy-to-clipboard for simplicity and reliability. Ensure the button is styled to match the overall design of the application. Add Toast Notification:

Implement a toast notification that triggers when the copy button is clicked. Use a library like react-toastify to provide quick and visually consistent feedback to the user.

should take not up to **3 days** to get it done

[PoulavBhowmick03]

Gm, I would love to work on this issue!

My Background I am a fullstack blockchain developer, I have contributed to many open source projects, including some on Only dust. My tech stack involves Next.js, MERN, Tailwind CSS, Solidity, Rust etc

How I will tackle this issue To make these changes , I will modify the transaction component, add a new state and UI which would then allow to copy the current transaction hash imported to this component, and will be allowed to the users to copy and use the transaction hash

Would be able to complete this instantly, if assigned, Thanks!

[estherbreath]

@mazurroman May i work on this , Please?

After understanding the Current UI and Component Structure, I will; Design the Copy Button Implement Copy Functionality Show Toast Notification and Test Functionality.

[ooochoche]

@mazurroman I can work on this

[ShantelPeters]

I am applying for this issue via https://app.onlydust.com/opscan

I'm excited to help with this task. I understand the requirement

1. Add a copy label next to addresses, similar to Etherscan.
2. Implement a copy button that copies the address hash when clicked.
3. Display a toast notification indicating the address has been copied after the button is clicked.

To achieve this, I would:

1. Add an HTML element for the copy label and button next to each address.
2. Use JavaScript to add an event listener to the copy button, copying the address hash to the clipboard when clicked.
3. Implement a toast notification library (e.g., Toastify) to display a brief message indicating the address has been copied.
4. Style the copy label and button to match the design in the provided screenshots.

Please assign me this task, and I'll deliver the updated code to add the copy label, button, and toast notification.

[sanieni6]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I am Luis Sanchez, a front-end developer with experience in HTML, CSS, React, JavaScript, TypeScript, Docker, and Kubernetes. I am eager to contribute to your project. You can view my technical projects and skills on my Onlydust profile here: https://app.onlydust.com/u/sanieni6. 🥳

Plus, I am a DojoCoding Member!!!

How I plan on tackling this issue

Plan for Implementing Copy Label and Toast Notification:

Add Copy Label:

Create a copy button next to addresses, similar to Etherscan. Ensure the button is styled consistently with the existing UI. Implement Copy Functionality:

Add functionality to copy the address to the clipboard when the button is clicked. Show Toast Notification:

Implement a toast notification that briefly displays when the address is copied. Ensure the toast is non-intrusive and automatically dismisses after a short period. Test Functionality:

Test the copy button and toast notification across different browsers and devices. Ensure the functionality is smooth and user-friendly. Expected Outcome:

A user-friendly copy button next to addresses with a toast notification indicating the address has been copied.

[Abhi270303]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hi, I am a Full Stack Developer, I have previously Built a lot of Frontend and also worked on Smart Contracts. I have worked on React Js, Next Js & Tailwind CSS. My Frontend skills are eye catching and I always try to keep a good simple & easy to use UX. Hence I am confident that my skills can provide a good value, and I can contribute to op-scan.

How I plan on tackling this issue

To implement these changes, I will update the transaction component by adding a new state and UI element. This will enable users to copy the current transaction hash imported into this component and use it as needed.

If Assigned, I can complete this Immediately!

[petersdt]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

hi am peter with intermediate level expirence in frontend i would like to contribute to this project

How I plan on tackling this issue

To add a copy label next to addresses, along with a toast notification to indicate the address has been copied i will implement the following:

HTML:

Two address items are displayed with a Copy button next to each. A div element with id toast is added for displaying toast notifications.

TypeScript:

• An event listener is added to each copy button to handle the copy functionality.

• The copyToClipboard function copies the address text to the clipboard.

• The showToast function displays a toast notification for 2 seconds when an address is copied.

  CSS:

• Basic styles for the address items and copy button.

• Styles for the toast notification, including fade-in and fade-out animations.

[armandocodecr]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

As a Full-Stack Developer with a year of experience, I am well-prepared to contribute effectively to your project. My technical and soft skills have enabled me to successfully complete contributions to Walnut's repositories, demonstrating my ability to deliver high-quality solutions that meet project standards.

I am adept at problem-solving and take pride in creating applications that reduce workloads across various departments. My ability to adapt and learn quickly enables me to tackle new challenges effectively and independently, making me highly capable of addressing complex issues and implementing efficient solutions.

I am also a member of "Dojo coding," a community where many developers contribute to various projects. This community provides substantial support and knowledge-sharing, enhancing my ability to contribute effectively.

Effective communication is one of my strengths. I ensure that my explanations and descriptions are detailed and user-friendly, which has been appreciated by the maintainers I've worked with. My tech stack aligns perfectly with the project's requirements, ensuring a smooth integration and development process.

Overall, my skills, experience, and community support make me well-equipped to contribute to your project by resolving issues efficiently and delivering high-quality, impactful solutions.

How I plan on tackling this issue

Request for Issue Assignment: Add Copy Label Next to Addresses

Hi Walnut team,

I am excited about the opportunity to work on this issue. I have previously contributed to Walnut's repositories, demonstrating my ability to deliver high-quality solutions that meet project standards. Below, I have outlined a detailed plan on how I will approach and solve this issue.

Technical Plan

Objective

To add a copy label next to addresses, making it simpler for users to copy those hashes. Additionally, display a quick toast notification indicating the address has been copied.

Step-by-Step Implementation

UI Component

Copy Button Integration:

• Create or modify a component to add a copy button next to each address.
• Ensure the button is clearly visible and easy to interact with.

Copy Functionality

Clipboard API:

• Implement the copy functionality using the Clipboard API to copy the address to the user's clipboard.

Event Handling:

• Add event listeners to handle the copy action when the button is clicked.

Toast Notification

Toast Component:

• Integrate a toast notification component to display a message confirming the address has been copied.
• Ensure the toast appears quickly and disappears after a short duration.

No Backend Changes

• This feature primarily involves frontend changes, so no significant backend modifications are expected.

Frontend Modifications

Address Display:

• Update the relevant pages and components to include the copy button next to addresses.
• Ensure consistent styling and functionality across the application.

Validation and Testing

Functionality Testing:

• Test the copy functionality to ensure addresses are copied correctly.

User Experience Testing:

• Validate that the toast notification appears and disappears as expected.

Conclusion

Given my previous contributions to Walnut's repositories and my familiarity with the codebase, I am confident in my ability to resolve this issue effectively. My detailed and technical approach ensures that the solution will meet the project's standards and improve the user experience.

Thank you for considering my request. I look forward to contributing further to Walnut's repositories.

Best regards!

[jancris100]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I am member from dojo coding I have extensive experience in building user-friendly features and handling DOM interaction

How I plan on tackling this issue

Understand the Requirements: Implement a copy label next to addresses, similar to Etherscan. Set Up the Environment:

[juandiegocv27]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I'm Juan Diego Carballo, with a strong background in TypeScript and blockchain development. My experience spans developing user-friendly interfaces and integrating blockchain functionalities, which perfectly aligns with enhancing user interactions on the OP Scan platform. My participation in StarkHack and my experience at a hackerhouse in Brussels have further honed my skills in real-world, collaborative environments. My work, viewable on my GitHub Profile and OnlyDust Profile, showcases my commitment to high-quality, user-centered solutions in tech environments. I have actively participated in events like StarkHack and a hackerhouse in Brussels, enhancing my capability to tackle real-world tech challenges. Plus I´m active member of Dojo Coding community 🇨🇷. Yhis is my first contribution to Walnut’s Repositories.

How I plan on tackling this issue

To implement the copy button feature next to addresses on the OP Scan platform:

-UI Design:

Integrate a copy-to-clipboard icon next to each address in the UI. This icon will be subtle yet easily accessible to not clutter the interface. Use a modern, intuitive icon that users universally recognize as an action for copying text. Functionality Implementation:

Implement the copy functionality using JavaScript to ensure that clicking the icon copies the address to the user's clipboard. Use the navigator.clipboard.writeText() method for a seamless and efficient copy action. Feedback to Users:

Introduce a toast notification that briefly appears on the screen confirming that the address has been copied. This will be triggered each time the copy icon is clicked. Ensure the toast message is concise and disappears after a few seconds to keep the user experience smooth and not disruptive. -Testing & Validation:

Conduct rigorous testing across different devices and browsers to ensure functionality is robust and consistent. Validate the user experience through user testing sessions, if possible, to gather feedback and make necessary adjustments before final deployment. I look forward to the opportunity to bring this feature to life, enhancing the usability of the OP Scan platform and contributing to a better user experience.

[Jayse007]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I am a backend developer with experience using django. I also work with Javascript and typescript

How I plan on tackling this issue

I would make a simple script that selects the specified data store it in a variable and copy it to the user's clipboard.

[JoelVR17]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

UI: Copy Button Next to Addresses

Hello Walnut team,

I am Joel Vargas, and I'm member of Dojo Coding. I also come from OnlyDust

I would like to request the assignment of the issue related to adding a copy button next to addresses, similar to what is seen on Etherscan. I have previously contributed to your project and am familiar with it. Below is my proposed approach for implementing this issue:

How I plan on tackling this issue

Implementation Plan

• Button Implementation: Assuming that the copy-button.tsx component already exists, the implementation in the Transaction Details > Transaction Hash section can be done with the following code:

<DescriptionListItem title="Transaction Hash">
    {transaction.hash}
    <div className="mx-3 flex">
      <CopyButton
        content={"Copy TxHash to clipboard"}
        copy={transaction.hash.toString()}
      />
    </div>
</DescriptionListItem>

With this approach, we get these results:

If additional placements of the button are required, please let me know, and I will make the necessary adjustments.

---

If it is necessary to create a new component, this would be the logic I would follow to carry it out:

Component Description

• Imports: Import the necessary hooks and components from React and lucide-react, as well as the tooltip components used to display pop-up messages.

Component State:

• open: Controls whether the tooltip is open.
• copied: Indicates whether the text has been copied.

Function copyText:

• Uses the Clipboard API (navigator.clipboard.writeText) to copy the text.
• Changes the copied state to true to show the confirmation message.
• Uses setTimeout to hide the message after 1 second.

Rendering:

• Uses TooltipProvider to wrap the Tooltip, which is the component that displays the pop-up message.
• TooltipTrigger is the area that activates the tooltip. It can be the copy icon or the confirmation icon, depending on the copied state.
• TooltipContent displays the message that changes based on the copied state.

I am willing to follow any specific guidelines the team may have. I appreciate the opportunity to contribute and am ready to start as soon as the issue is assigned to me.

Also, if you need, you can contact me by Telegram

Thank you!

[lauchaves]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hey! I'm Lau Chaves, and I would like to contribute to this issue! Im a member of DOJO Coding Costa rica!

I have over 5 years of experience working with JavaScript, React, and TypeScript, ruby... My primary role has been as a front-end developer, and I have a keen eye for detail and a strong focus on mobile-first approaches. I ensure the quality of my work through rigorous self-QA processes. I have a solid knowledge of CSS, Sass, and styled-components.

Feel free to check my onlydust profile here and github profile: lauchaves!

How I plan on tackling this issue

I'd follow this approach:

• will add a small copy icon next to each address,
• Use js to copy the address when the icon is clicked.
• Show a brief toast notification confirming the copy action
• Test it on different browsers and devices
• Sent PR to review!

[ScottyDavies]

I am applying to this issue via OnlyDust platform. Review the Contributor Guidelines: I would carefully review the contributor guidelines to understand the project's conventions, coding standards, and any specific requirements or processes for submitting changes. This would help me ensure that my implementation aligns with the project's expectations and increases the chances of my pull request being accepted. Analyze the Design and Functionality: I would closely examine the design mockups and the expected functionality of the "copy label" feature. I would pay attention to the visual aspects, such as the placement, size, and appearance of the copy button, as well as the expected behavior, such as the toast notification after a successful copy operation. Implement the Copy Functionality: I would start by adding a copy button or icon next to the addresses in the UI. I would use the appropriate HTML and CSS to style the copy button and ensure it blends well with the existing design. For the copy functionality, I would use the Clipboard API in JavaScript to copy the address to the user's clipboard when the button is clicked. Implement the Toast Notification: After successfully copying the address to the clipboard, I would display a toast notification to provide visual feedback to the user. I would use a lightweight toast library or implement a custom toast component that aligns with the project's design guidelines. The toast should appear briefly and then disappear, providing a clean and unobtrusive user experience. Test the Implementation: I would thoroughly test the copy functionality and the toast notification on various devices and screen sizes to ensure a consistent and seamless user experience. I would also test edge cases, such as copying an empty string or handling any errors that may occur during the copy operation. Document the Changes: I would document the changes made in the pull request, including any relevant information about the implementation, such as the libraries used, any special considerations, or any known limitations. This would help the project maintainers and other contributors understand the rationale behind the changes and facilitate the review process. Submit the Pull Request: Once I'm satisfied with the implementation and the testing, I would submit the pull request to the update-P21 branch, following the project's contribution guidelines. I would be prepared to address any feedback or suggestions from the project maintainers during the review process and make any necessary adjustments to the code. By following this approach, I aim to deliver a high-quality implementation that aligns with the project's guidelines and provides a seamless user experience for copying addresses and displaying the toast notification.

[Dprof-in-tech]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hello I’m Isaac, a JavaScript developer with notable experience contributing to projects on OnlyDust on and off the ODHACK. I am a returning contributor to your project and would love to contribute more here.

I’m skilled in using JavaScript and typescript to build out efficient solutions and this experience of mine can be seen on my OnlyDust profile at https://app.onlydust.com/u/Dprof-in-tech and on my GitHub at https://github.com/dprof-in-tech

I have my proposed solution to this issue below.

How I plan on tackling this issue

Here's the plan for adding a copy-to-clipboard feature for Ethereum addresses on a webpage:

Find Ethereum Addresses:
    I'll scan the DOM for elements containing Ethereum addresses. These are usually 42-character hexadecimal strings starting with "0x".
    I'll use a regular expression to match the address pattern.

Add Copy Buttons:
    For each address I find, I'll add a small button or icon next to it.
    I'll use CSS to position the button nicely next to the address, maybe using absolute positioning or flexbox.

Style the Copy Button:
    I'll design a simple icon or text for the copy button, like a clipboard icon or "Copy" text.
    I'll use CSS to make sure the button looks good but isn't too distracting.

Implement Copy Functionality:
    I'll add a click event listener to each copy button.
    When clicked, the button will use the Clipboard API to copy the address to the clipboard.

Create a Toast Notification:
    I'll design a small notification that pops up briefly to confirm the address was copied.
    I'll style it with CSS so it appears for a few seconds and then fades out.
    I'll position it in a corner of the screen using fixed positioning.

Show the Toast Notification:
    I'll write a function to show the toast notification.
    I'll set a timeout to automatically hide the toast after a short duration, like 3 seconds.

Link Copy Action to Toast Notification:
    In the copy button's click event handler, I'll trigger the toast notification after the address is successfully copied.

Ensure Accessibility:
    I'll add ARIA attributes to the copy buttons so they're accessible to screen readers.
    I'll make sure the toast notification is also accessible and can be read by screen readers.

Optimize Performance:
    I'll use event delegation to handle click events for multiple copy buttons efficiently.
    I'll make sure the address detection and button creation logic is efficient, maybe using a virtual DOM or incremental updates.

Handle Edge Cases:

I'll make sure the feature works for content that's loaded dynamically.
I'll handle any potential errors in the copying process and display appropriate error messages.

Thorough Testing:

I'll test the feature on different browsers and devices to ensure compatibility.
I'll verify that it works correctly for various addresses and page layouts.

i would love to be assigned to this issue so i can contribute more to this project

[0xdevcollins]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

My name is Collins Ikechukwu. I am a fullstack developer with 4 years of experience. I'm thrilled about the chance to contribute to the Op Scan Project. With 4 years of solid experience in Next.js, TypeScript, Shadcn, and React, I'm confident in my ability to deliver an efficient and user-friendly Contract page for transactions.

How I plan on tackling this issue

I will:

Create a CopyButton Component:
    This component will handle the functionality of copying text to the clipboard.
    It will provide visual feedback by displaying a success icon once the text is copied.

Implement Copy Features:
    Add functionality to copy text to the clipboard using the browser's clipboard API.
    Show a temporary success icon to indicate that the text has been copied.

Integrate with copyButton to DOM containing eth addresses:
    Use the CopyButton within the  component.
    Make the copy button conditionally visible based on a copyable prop and ensure it only appears when the content is a string.

[saimeunt]

@JoelVR17 assigning it to you, as your comment shows you've perfectly understand how to tackle this issue.

Please update every page in the explorer where having the copy button would make sense using the already existing CopyButton we implemented during the last OD Hack. At the moment when clicking on the button, the tooltip shows up with the correct "Copied!" text but just before it disappears the text gets replaced by the standard on-hovered content (you need to test it to fully understand the current behavior). I'd also like as part of this issue to come up with a quickfix that doesn't compromise on code quality (look for a fix that is not too hacky please).