Add class hash on debug page

[0xquantum3labs]

Issue Overview

Display class hash on /debug contracts

• below the address as a secondary label.
• should be able to copy to clipboard like the address component
• should be clickable and send to starkscan

this basically should follow a similar functionality to the address component but should be smaller below it as secondary

Proposed Solutions or Ideas

• if needed update the packages/snfoundry/deploy-contract.ts script
• follow the current design / layout / colors

[EmmanuelAR]

Hey can work on this ?

I am Emmanuel a software engineer from Costa Rica 🇨🇷

I will..

Implementation Outline

1. Modify the UI Component:

• Update the contract address display component to include the class hash as a secondary label.
• Ensure it follows the current design standards in terms of layout and colors.

2. Positioning and Styling:

• Place the class hash below the address.
• Use a smaller font size and different styling to differentiate it from the primary address label.

3. Clipboard Functionality:

• Add a copy-to-clipboard feature for the class hash, similar to the existing address component.

4. Clickable Link:

• Make the class hash clickable, directing users to StarkScan for more details.

5. Update Script (if necessary):

• Check if packages/snfoundry/deploy-contract.ts needs updates to ensure the class hash is fetched and displayed correctly.

Proposed Steps

1. Update UI Layout:

   • Identify the component responsible for displaying contract details.
   • Add a section for the class hash below the address.
   • Apply appropriate styling to make the class hash a secondary label.

2. Add Copy-to-Clipboard Functionality:

   • Integrate the copy-to-clipboard functionality for the class hash, mimicking the existing implementation for the address.

3. Make Class Hash Clickable:

   • Implement functionality to make the class hash clickable.
   • Ensure it links to StarkScan, providing more information about the contract.

4. Styling Consistency:

   • Follow the current design guidelines for colors and layout to maintain a consistent look and feel.

5. Update Deployment Script (if applicable):

   • Review and update packages/snfoundry/deploy-contract.ts to ensure the class hash is properly fetched and displayed.

[Jemiiah]

Hello @0xquantum3labs i would love to work on this issue 🚀

[onlydustapp[bot]]

Hey @Jemiiah! Thanks for showing interest. We've created an application for you to contribute to Speedrun & Scaffold Stark. Go check it out on OnlyDust!

[Nadai2010]

Hi everyone, @EmmanuelAR and @Jemiiah we are preparing the issues for tomorrow's OD Hach, they will be assigned tomorrow

Remember that you can only work on one issue at a time, choose well

[Jemiiah]

Thanks for the feedback @Nadai2010 would love to work on this when it start to get assigned

[EmmanuelAR]

Thks for the opportunity, will be a pleasure @Nadai2010

[ScottyDavies]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

As an experienced analyst and blockchain developer with 15 years in the industry. i likely encountered a variety of challenges that these technologies can help address. My technical expertise and problem-solving skills will be valuable assets in leveraging JavaScript, Cairo, and TypeScript.

How I plan on tackling this issue

Fetch Class Hash Update deploy-contract.ts to retrieve class hash along with contract address. Display Class Hash Add class hash display below contract address on /debug page. Include "Copy to clipboard" and "View on Starkscan" functionality. Style Updates Adjust CSS to make class hash display smaller and position it below the contract address. Ensure layout and colors match existing design. The key points are:

[ShantelPeters]

Hey can I work on this ?

Background and Leverage: As a frontend developer with experience in building interactive UI components and API integrations, I'm confident in my ability to tackle this challenge. My background in UI/UX design and development has equipped me with the skills to create intuitive and visually appealing interfaces. I'm well-versed in React and JavaScript, having worked on multiple projects that utilize these technologies.

Approach to the Problem:

1. Update deploy-contract.ts script: I'll modify the packages/snfoundry/deploy-contract.ts script to include the class hash display functionality.
2. Display Class Hash: I'll add a secondary label below the address on the /debug contracts page to display the class hash.
3. Copy to Clipboard: I'll implement a copy-to-clipboard feature for the class hash, similar to the address component.
4. Clickable and StarkScan Integration: I'll make the class hash label clickable, sending users to StarkScan when clicked.
5. Design and Layout: I'll ensure the design and layout follow the existing guidelines, maintaining a consistent user experience.

Solution: My proposed solution involves updating the deploy-contract.ts script and adding a secondary label to display the class hash. The label will be clickable, sending users to StarkScan, and will have a copy-to-clipboard feature.

Technical Details:

• I'll use React and JavaScript to implement the changes.
• I'll utilize the existing design system and components to maintain consistency.
• I'll ensure the class hash label is smaller and secondary to the address component.

[onlydustapp[bot]]

Hey @ShantelPeters! Thanks for showing interest. We've created an application for you to contribute to Speedrun & Scaffold Stark. Go check it out on OnlyDust!

[Nadai2010]

Hi @Jemiiah, we remind you that you must upload your PR or comments in order to continue with the assigned issue.

[Jemiiah]

I would create a PR soon @Nadai2010

[Nadai2010]

Thank you very much @Jemiiah