UI: Fix Styling for Address Highlighting

[mazurroman]

⚠️ Reading contributors guidelines to get assigned is MANDATORY!

Read contributors guidelines

Current state

Notes:

• When hovering it is yellow
• When leaving the address, it gets orange for a second

What we want

Same colors as here (same background and border style; no changes when hovering vs leaving the element; see gif attached): https://optimistic.etherscan.io/tx/0xe66ea43e24234b750c1faade1412c3a4e8520e2c1322d13315e4327271dd737f

[melnikga]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I can take this

I've worked with a lot of Walnut projects and I'm ready to tackle this issue. In the OP scan project, I was developing token transfers in tx details page (#13 )

How I plan on tackling this issue

This problem can be solved by changing the tailwind classes "hover:", "bg" and "border" My profile on OnlyDust: https://app.onlydust.com/u/melnikga

[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 use tailwind css to change the required div and change the hover effect, and on hover, border effect which would then make the required changes

I will modify the required part and test it to see if the implementation is done properly, check the hover animation and the border color change doesn't happen

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

[martinvibes]

hello @mazurroman i would love to be assigned to this issue

[Joy-Adah]

Hi @mazurroman can I be assigned this? I am a frontend developer and can easily fix this issue using shadcn utility classes.

[ShantelPeters]

I am applying to this issue via OnlyDust platform. Comment to get the task assigned:

Hello, I've read the contributors guidelines and I'm excited to help with this task. I understand that the current state of the address input field has a yellow background when hovering and an orange background for a second when leaving the element. However, the desired behavior is to have the same colors and border style as the example on Optimistic Etherscan, without any changes when hovering or leaving the element.

To achieve this, I would:

1. Inspect the CSS styles applied to the address input field and identify the necessary changes.
2. Update the CSS to match the desired colors and border style, ensuring consistency with the Optimistic Etherscan example.
3. Test the changes to ensure the address input field behaves as expected, without any color changes when hovering or leaving the element.

Please assign me this task, and I'll deliver the updated CSS styles to achieve the desired behavior.

[martinvibes]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I am a frontend developer with experience in working with html, css, javascript, Tailwind css, Sass, Reactand TypeScript. I have a strong understanding of CSS and UI design principles, which I have applied in various projects to create responsive and visually appealing web applications. In my current role, I have successfully resolved numerous styling issues for most of my colleagues and improved the user experience. My background in managing UI components makes me well-suited to tackle this issue.

How I plan on tackling this issue

To address the styling issue for address highlighting, I would follow these steps:

Analyze the Current Implementation:

Review the current CSS styles applied to the address elements. Understand how the hover and leave states are being handled. Identify the Discrepancy:

Compare the current styles with the desired styles provided in the example link. Note the differences in background color, border style, and state transitions. Update the CSS:

Modify the CSS to match the exact styles used in the provided example. Ensure that there are no changes in styles when hovering and leaving the element. Test the Changes:

Thoroughly test the changes across different browsers to ensure consistency. Optimize and Refactor:

Ensure the CSS is clean and well-organized. Remove any redundant styles or classes.

[Joy-Adah]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

My name is Joy and I am a frontend developer that can get this issue fixed. I am proficient with the following stacks: Shadcn, CSS, Javascript, Tailwind CSS, Typescript and React.

How I plan on tackling this issue

I would approach this problem by utilizing shadcn utility classes to fix the focus and hover issue.

[MariangelaNM]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hello, I'm Mariangela. I'm a software developer specializing in front-end development, and I would like to work on this project.

How I plan on tackling this issue

• Inspect CSS Styles: Identify the current styles, including colors, border, padding, margin, font size, and any pseudo-classes (like :hover and :focus).

• Identify Necessary Changes: Compare the inspected styles with the desired styles from the Optimistic Etherscan example. List the differences in colors, border style, and any other relevant CSS properties that need to be updated.

• Update the CSS: Apply the necessary changes to match the desired colors and border style. Ensure that the changes are specific to the address input field. Add a comment to document why these changes were made, referencing the consistency goal with the Optimistic Etherscan example.

[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 use Tailwind CSS to update the necessary div and adjust the hover effect. On hover, the border effect will be applied to reflect the desired changes.

I will modify the specified section and test it to ensure proper implementation. I'll verify that the hover animation works correctly and that the border color change does not occur.

If Assigned, I can complete this instantly!

[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 It will be the first time for opscan!

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 QA processes. Additionally, I'm proficient in working with design tools like Figma and Zeplin to follow designs meticulously. 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 will set the project, then I will debug/inspect the address highlighting, styles, active & hover states...
• Once the issue is identified I will update the CSS on the code
• Review it again locally
• Sent it for review

By leveraging my background and expertise, I am confident in delivering a high-quality, interactive UI that effectively showcases the usage of Scaffold custom hooks, I’ll be able to come up with a PR within 2-3 working days!

[saimeunt]

@Joy-Adah assigning this to you since you hinted at the solution I chose for a similar issue, which is using shadcn/ui directly.

You will need to refactor the AddressLink component like this:

• move it from components/pages/home/AddressLink.tsx to components/lib/address-link.tsx.
• copy the implementation of tx-method-badge which is leveraging shadcn/ui Tooltip to manage the hover status.
• add hoveredAddress and the accompanying SET_HOVERED_ADDRESS action in the global context in components/lib/context/reducer.ts.
• add setHoveredAddress in components/lib/context/hook.ts.
• in the new AddressLink component, use an encapsulating Tooltip that will display the full address when hovered, use this tooltip to trigger setHoveredAddress using onOpenChange.
• style the link using the same colors found in TxMethodBadge.
• get rid of the isSameOrigin / setIsSameOrigin logic and replace it with an optional isExternal boolean prop that defaults to false, if the prop is true display the external link icon SquareArrowOutUpRight.
• the only top level props of the component should beaddress: Address; href: string; isExternal?: boolean;
• get rid of AddressContext and use the AddressLink component everywhere we display an address in the explorer.

Please follow these guidelines carefully and don't hesitate to ask me if something is unclear.

[Joy-Adah]

Hi @saimeunt thanks! I'll get to work.

[Joy-Adah]

Hi @saimeunt can you please give me env values?

[saimeunt]

You have example values in .env.local.example that should get you started, but for the RPC urls you need to provide your own by signing up to a 3rd party provider, please follow the directions in README.