Highlight equal addresses

[saimeunt]

Highlight equal addresses

⚠️ Reading contributors guidelines to get assigned is MANDATORY!

Read contributors guidelines

On a Transaction detail page, when a user hovers over an address, the address should get highlighted in a yellow-ish color, similar to Etherscan.

Other addresses on this page that are equal to the address being hovered, should also be highlighted.

This will help the user to easily see equal addresses when exploring the transaction detail page.

[stevencartavia]

Hi, can I take this? This is my 4th OD Hack.
I would create the specific class and logic to iterate through the data and highlight the required values when hovering over.
This is my OD profile https://app.onlydust.com/u/stevencartavia.

[Ajith27887]

Hello, Can I work on this
I am a React JS Developer and This is my first OD Hack. so I start with this simple project hover color.

[Gerson2102]

@saimeunt hello sir. I'm Gerson, you can check my OD profile here: https://app.onlydust.com/u/Gerson2102
Even though i dont have front-end contributions, i think i know how to solve this. I will start by looking the base code trying to see something similar to this. If not i will start to do my own research, about how to do that in the tech stack of the project. I will use chatgpt to understand faster these technologies.

[melnikga]

Hi, can I take this?

[Ugo-X]

Hello Project Lead! I'm Ugo, a fullstack Dev (js,React,Node,Next.js,Three.js) developer with a strong track record in OD hack projects. I've been actively involved since Edition 2, contributing to various initiatives, and I'm thrilled to be part of Edition 5!
Having used OnlyDust extensively (see my profile:https://app.onlydust.com/u/Ugo-X), I'm confident in my ability to tackle new challenges within this edition.
I'm eager to leverage my skills and experience to contribute effectively.

Here's how I plan to approach the issue:

1. Identify the target element: I would search for the description list item (<dl>) on the transaction detail page. Inside that item, I would find the element containing the actual transaction hash value. This is typically another element called <dd> with a title like "Transaction Hash". For easier targeting in the function, I might give this element a specific class name (e.g., "transaction-hash").

2. Write the highlight function: I would create a JavaScript function that performs the following actions:

   • Grab the transaction hash: Within the function, I would use JavaScript's document.querySelector method to find the element containing the transaction hash (assuming the class name is "transaction-hash" from step 1). Then, I would extract the text content (the actual hash value) from that element.

3. Search for matching elements: I would use document.querySelectorAll to find all elements on the page. This function returns a list of all matching elements based on the selector provided.

4. Highlight matching text: I would loop through each element found in step 3. Inside the loop, I would compare the text content of the current element with the captured transaction hash. If the text content matches exactly (use strict comparison with ===), I would change the background color of that element to a bright yellowish color using the style.backgroundColor property. You can adjust the specific color value (e.g., "lightyellow") to fit your project's UI.

5. (Optional) Remove highlight onmouseout: To make the highlighting more interactive, I could add an optional part to the function. I would use addEventListener on the target element (from step 1) to listen for the mouseout event (when the mouse leaves the element). Inside this event listener, I would run another loop through all elements and reset their background color to remove the highlight.

6. Attach the function to hover event: Finally, I would use addEventListener on the target element (from step 1) to listen for the mouseover event (when the mouse hovers over the element). When this event triggers, I would call the function I wrote in step 2 to initiate the highlighting process.

[Benjtalkshow]

Hi, @saimeunt

I will be glad to contribute to the Highlight Equal Addresses feature for Op Scan. This is my first time contributing to a Walnut project as I didn't get the opportunity to work on any frontend tasks during ODHack 4.0. With my 3 years of expertise in Next.js, TypeScript, Shadcn, and React, I’m confident I can deliver a robust and user-friendly page. You can check out my Github here: https://github.com/Benjtalkshow.

Here is my implementation Approach:

I will use tailwindcss and JavaScript to highlight addresses on hover with a yellow-ish (#FFFFCC) background. I'll ensure compatibility and responsiveness using React and Shadcn.
#Here is how:
I will implement address highlighting on hover using Tailwind CSS for straightforward styling with a yellow-ish (#FFFFCC) background. JavaScript will manage dynamic class application to ensure responsive and interactive behavior, integrated smoothly with React components for efficient state management and consistent user experience across devices and browsers.

User Benefits:

I'll enhance user navigation by visually distinguishing relevant addresses within transactions. I'll maintain interface consistency akin to industry standards such as Etherscan.

Validation and Integration:

I'll conduct thorough testing across browsers and devices to ensure consistent functionality.

[MariangelaNM]

Hello, I'm Mariàngela, and I bring extensive experience in frontend development. https://github.com/MariangelaNM
I searching my first issue in the OD hack
Possible solution:
To implement address highlighting on the transaction detail page, I will use JavaScript along with CSS to achieve the desired effect of highlighting addresses when hovered over, similar to Etherscan.
Firstly, JavaScript will detect when the cursor hovers over an address. Upon detection, I will apply a specific CSS class that changes the background color of the address to a light yellow or yellowish-green tone, depending on the desired style.
Additionally, I will implement JavaScript logic to identify other addresses on the page that are identical to the hovered address. These addresses will also receive the same CSS class for consistent highlighting.
Finally, I will ensure the effect is reversible so that when the cursor moves away from the address, the highlighting disappears smoothly and naturally.
This approach will allow users to easily identify identical addresses while exploring the transaction detail page, thereby enhancing user experience and application usability.

[jedstroke]

Hello Walnut Fam,

I am a seasoned fullstack developer with a focus on front-end development. Although I haven't contributed to Walnut before, I am excited by your welcoming stance: "However, if you are new, don’t worry—we are eager to attract new talent..."

I am passionate about creating responsive, modular, and scalable UI components and would love to take on this issue.

Here are my profiles for your reference:

• OnlyDust: Jedstroke's Profile
• Portfolio: Jedidiah Gabriel
  Looking forward to contributing!

Best regards,
Jedidiah Gabriel

[JoelVR17]

Hello @saimeunt,

I'm a Full Stack Web Developer with a solid background in front-end and back-end development. I am searching my first issue in the OD hack. So it will be a pleasure to contribute for the first time to this great project.

References:

• GitHub
• OnlyDust
• Portfolio

I was reviewing the repository to see what the issue was, and I made an approximation and solved it. So here are the changes made:

1. I split the components latest-transactions.tsx and latest-l1-l2-transactions.tsx into two parts:

• One component to render the transaction body.
• Another plural component to iterate over the transactions.

With this setup, if we need to display transactions elsewhere, there's no need to rewrite the code.

2. I created two additional folders within /pages/home/:

• latest-l1-l2-transactions
• latest-transactions

Now, latest-transactions.tsx and latest-transaction.tsx, as well as latest-l1-l2-transactions.tsx and latest-l1-l2-transaction.tsx, are properly separated.

3. I implemented the highlighting logic within the singular (child) component using two props:

• hoveredAddress: Temporarily stores the address being compared.
• setHoveredAddress: Sets the address as "hovered" when onMouseLeave and onMouseEnter events are triggered on each link (Link).

I used a LatestTransactionsProps interface to pass these props in a structured way to the child component.

In the child component, I compare hoveredAddress with the transaction address, and if they match, I apply the text-yellow-200 class to highlight the address.

These are the results:

This implementation ensures that matching addresses are properly highlighted when hovering over them on the transaction details page. This applies to both the Latest L1→L2 Transactions and Latest Transactions sections. By the way, I already have the branch.

[saimeunt]

@JoelVR17 I like your approach as it's the closest to the React way of doing things, however you will need to refactor it a little bit to be sustainable in the long run.
See, this hoverable address link component will be in lot of places of the explorer and we need to turn it into a reusable component sharing global state through React Context and manage the logic using a reducer.
What I need you to do is to extract the address link in a reusable AddressLink component that will read state from a global context and modify this shared state through dispatch call with an accompanying reducer.
Please follow along with the React tutorial I linked before, do not use any other dependencies (redux or other React state management libraries), just pure React Contexts, Providers and useReducer.

[JoelVR17]

@JoelVR17 I like your approach as it's the closest to the React way of doing things, however you will need to refactor it a little bit to be sustainable in the long run. See, this hoverable address link component will be in lot of places of the explorer and we need to turn it into a reusable component sharing global state through React Context and manage the logic using a reducer. What I need you to do is to extract the address link in a reusable AddressLink component that will read state from a global context and modify this shared state through dispatch call with an accompanying reducer. Please follow along with the React tutorial I linked before, do not use any other dependencies (redux or other React state management libraries), just pure React Contexts, Providers and useReducer.

Thanks a lot @saimeunt, I already did the PR.