[FEAT] Separate Read and Write Tabs in Debug Contracts

[metalboyrick]

Issue Overview

If you see the screenshot above, you will notice that in the current version that the read and write are place on top of one another. This is good for smaller contracts. But for contracts with more interfaces, scrolling down would be a pain. Splitting "Read" and "Write" into tabs would make it easier to access those write interfaces.

Can place the the write tab on the right to the left tab.

Proposed Solutions or Ideas

• Use DaisyUI's tab components to implement. - https://daisyui.com/components/tab/
• (nice to have) Lazy load the write tab. - https://nextjs.org/docs/app/building-your-application/optimizing/lazy-loading

[od-hunter]

Hi @metalboyrick , please can I be assigned this please? Please I’d love to be given the opportunity to contribute to this repo.

[onlydustapp[bot]]

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

[Nadai2010]

Hello everyone, @od-hunter the Issues for the OD Hack will be assigned to each of you at the start, prepare your skills.

[onlydustapp[bot]]

Hi @vickiddev! Maintainers during the ODHack # 8.0 will be tracking applications via OnlyDust. Therefore, in order for you to have a chance at being assigned to this issue, please apply directly here, or else your application may not be considered.

[melnikga]

Hi, can I take this? My profile on OnlyDust: https://app.onlydust.com/u/melnikga

[onlydustapp[bot]]

Hi @melnikga! Maintainers during the ODHack # 8.0 will be tracking applications via OnlyDust. Therefore, in order for you to have a chance at being assigned to this issue, please apply directly here, or else your application may not be considered.

[wugalde19]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hi team, I’m William from Costa Rica 🇨🇷 and a member of the Dojo Coding community. I am interested in contributing to this issue and believe my skills and background make me well-suited for the task. I’ve worked over 7 years as a Full-Stack engineer in several technologies (including the ones used on this project Typescript/JS) and I am currently expanding my expertise in Rust, Cairo, and Solidity. I also was one of the winners (elite) of the Speedrun & Scaffold challenge/competition.

Profiles: https://app.onlydust.com/u/wugalde19 https://github.com/wugalde19

How I plan on tackling this issue

The way I’d approach this is by using DaisyUI's tab components to implement the tabs as you suggested and display each component (ContractReadMethods and ContractWriteMethods) into each tab content. I’d reuse the styles used in ContractUI.tsx

I’m interested in learning more about your team and looking forward to contributing to this project.

[martinvibes]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hi I would love to work on this issue

[DiegoB1911]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I'm a Full Stack Developer with two years of experience, primarily in Next.js. I'm also an active member of Dojo Coding, where I'm expanding my expertise in Cairo and Web3 technologies. I'm enthusiastic about learning, contributing, and becoming a part of this project.

How I plan on tackling this issue

To solve this issue, I would:

Understand the current layout: I would first review the current UI structure and how the "Read" and "Write" interfaces are positioned on top of each other.

Implement tabs using DaisyUI: I would use DaisyUI's tab components to create two separate tabs for "Read" and "Write" interfaces. This will allow users to switch between the two without scrolling. I would place the "Write" tab next to the "Read" tab for easy access, following the provided design suggestion.

Lazy-load the "Write" tab: To optimize performance, I would implement lazy loading for the "Write" tab using Next.js lazy-loading features. This way, the "Write" tab will only load its content when selected, improving the initial load time.

Test for responsiveness: I would ensure that the tabbed interface is responsive, making sure it works well on different screen sizes, especially for users working on smaller devices.

Document the changes: Lastly, I would document the implementation, including code comments and updating any related documentation for future reference.

[gianalarcon]

All yours @wugalde19!

[wugalde19]

Thanks @gianalarcon I'll let you guys know in Telegram once I have my PR ready and/or if I have questions for you