Add STRK token balance

[0xquantum3labs]

Issue Overview

Add support for STRK balance:

• next to header ETH balance.
• below contract ETH balance on /debug page
• predeployed contract STRK to interact with on /debug page

Proposed Solutions or Ideas

• follow the implementation of useScaffoldEthBalance
• should work on ALL networks
• propose a solution that follows the current UI design / colors

[raizo07]

I'll like to pick this

[EmmanuelAR]

Hey can I work on this?

I am Emmanuel a software engineer from Costa Rica 🇨🇷

I will...

1. Add STRK Balance Next to Header ETH Balance

• Fetch STRK Balance: Implement a function similar to how you fetch ETH balance, using useScaffoldEthBalance as a reference.
• Display Balance: Add the STRK balance next to the ETH balance in the header. Ensure that it matches the current UI design and colors.

2. Add STRK Balance Below Contract ETH Balance on /debug Page

• Fetch Contract STRK Balance: Implement a function to fetch the STRK balance of the contract.
• Display Balance: Modify the /debug page to display the STRK balance below the ETH balance for the contract, maintaining the existing design elements.

3. Predeployed Contract STRK to Interact with on /debug Page

• Interact with STRK Contract: Provide an interface on the /debug page to interact with a predeployed STRK contract. Ensure that the interaction elements (buttons, input fields) follow the existing UI/UX standards.

Proposed Solutions or Ideas

• Follow useScaffoldEthBalance Implementation:

  • Use similar logic and structure to implement STRK balance fetching to ensure consistency.
  • Ensure that the solution works across all networks by adapting network-specific configurations.

• Consistency with Current UI Design/Colors:

  • Use existing design components and colors to display the STRK balance.
  • Ensure that the new elements blend seamlessly with the current UI to maintain a uniform look and feel.

[onlydustapp[bot]]

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

[onlydustapp[bot]]

Hey @EmmanuelAR! 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 @Gift-Naomi 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

[Ayoazeez26]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I am a web developer with over 6 years experience building applications both personal and professional projects. I started contributing to open source via onlydust in march this year and I have contributed to a couple of issues, you can see them in my profile.

How I plan on tackling this issue

By following the implementation of useScaffoldEthBalance, I would use similar logic to implement STRK balance fetching. I would also make sure that the implementation works across all networks. I would also make sure to follow the current project color scheme and components to ensure consistency across the app

[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

STRK Balance Hook Create useScaffoldStrBalance hook to fetch STRK token balance. Display STRK Balance Show STRK balance in header, next to ETH balance. Display STRK balance on /debug page, below contract ETH balance. STRK Interaction Add section on /debug page to interact with pre-deployed STRK contract. Styling Ensure STRK balance display matches existing design and colors.

[ShantelPeters]

Please can I be assigned this issue

Background and Leverage: As a frontend developer.I'm well-versed in React and JavaScript, having worked on multiple projects that utilize these technologies.

Approach to the Problem:

1. Implement useScaffoldStrkBalance: I'll create a new hook, useScaffoldStrkBalance, to fetch and display STRK balances, following the implementation of useScaffoldEthBalance.
2. Display STRK Balance: I'll add the STRK balance display next to the header ETH balance and below the contract ETH balance on the /debug page.
3. Predeployed Contract: I'll deploy a predeployed STRK contract for interaction on the /debug page.
4. Network Support: I'll ensure the solution works on all networks, following the existing implementation.
5. UI Design and Colors: I'll maintain consistency with the current UI design and colors, ensuring a seamless user experience.

Solution: My proposed solution involves implementing a new hook to fetch and display STRK balances, deploying a predeployed STRK contract, and ensuring network support and UI consistency.

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 STRK balance display is visually appealing and easy to

[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!

[wugalde19]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hi Speedrun & Scaffold Stark team, I’m William from Costa Rica 🇨🇷 and 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 Full Stack engineer in several technologies (including the ones used on this project JS, Typescript) and I am currently expanding my expertise in Rust, Cairo, and Solidity. I’ve participated in two past OD Hack events and understand the need and usage of faucets to fund our wallets in Sepolia and test our changes. I also want to mention that our team used this project in the StarkHack and it saved us a lot of time and headaches, I will be honored to contribute to this project and help new devs to see their STRK balance on the site after solving this issue.

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

How I plan on tackling this issue

Based on my understanding of the issue description, the core problem appears to be that you want to make it easier for devsto see their STRK balance on the site which makes a ton of sense to me since the idea is that we will develop dApps on Starknet and this will be the main “currency” to be used in most of them.

I agree with your proposed ideas, after looking at the code I see that it will be a pretty similar implementation of the useScaffoldEthBalance hook. Of course, let me know if I’m omitting any other important points

Thank you, and I look forward to your guidance and to start contributing to this project.

[Joy-Adah]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I have a strong background in web3 development, particularly with React.js and blockchain technologies, I am confident to deliver a solution that aligns with the current UI design and functionality.

How I plan on tackling this issue

I plan to approach the problem with the following steps:

• Review Existing Implementation: Analyze the useScaffoldEthBalance function to understand the current balance fetching mechanism.
• Develop STRK Balance Hook: Implement a useScaffoldStrkBalance hook to fetch STRK balances ensuring compatibility across all networks.
• Update UI Components: Header: Display STRK balance next to ETH balance.
• Debug Page: Add STRK balance below ETH balance and include an interactive section for the predeployed STRK contract.
• Ensure Design Consistency: Maintain the current UI design and color scheme for a cohesive user experience.

[ankit875]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hi, I am working as a software developer 8 Year of experience. My tech stack is React, Typescript, Cairo, Solidity, GraphQL etc. Winner of EthGlobal Brussel CDK partner prize and multiple hackathons.

How I plan on tackling this issue

Create useScaffoldStrBalance Hook: Develop a custom hook to fetch the STRK token balance. Display STRK Balance: Show STRK balance in the header, next to the ETH balance. Display STRK balance on the /debug page, beneath the contract's ETH balance. STRK Interaction: Add a section on the /debug page for interacting with the pre-deployed STRK contract. Styling: Ensure the STRK balance display aligns with the existing design and color scheme

[armandocodecr]

Request for Issue Assignment: Add Support for STRK Balance

Hi team,

I am excited about the opportunity to work on this issue. I have previously made contributions to other projects, demonstrating my ability to deliver high-quality solutions. Below, I have outlined a detailed plan on how I will approach and solve this issue.

Technical Plan

Objective

To add support for displaying the STRK balance next to the ETH balance in the header and below the contract ETH balance on the /debug page. Additionally, enable interaction with the predeployed STRK contract on the /debug page.

Step-by-Step Implementation

Integration with Existing Balance Display

Header ETH Balance:

• Modify the component responsible for displaying the ETH balance in the header to also display the STRK balance.

/debug Page Contract ETH Balance:

• Modify the /debug page to display the STRK balance below the ETH balance for contracts.

Interaction with Predeployed STRK Contract

Predeployed Contract:

• Ensure that the predeployed STRK contract is accessible and can be interacted with on the /debug page.

Functionality Implementation:

• Implement necessary functions to fetch and display the STRK balance, similar to how ETH balance is fetched using useScaffoldEthBalance.

Code Modifications

Balance Fetching:

• Follow the implementation of useScaffoldEthBalance to create a similar hook or function for fetching the STRK balance.

UI Design Consistency:

• Ensure the new balance displays follow the current UI design and color schemes for a seamless integration.

Network Compatibility:

• Verify that the STRK balance functionality works across all supported networks.

Frontend Modifications

Header Component:

• Update the header component to include STRK balance next to ETH balance.

/debug Page:

• Update the /debug page to display STRK balance below the ETH balance and ensure interaction capabilities with the STRK contract.

Validation and Testing

Cross-Network Testing:

• Test the new functionality on all supported networks to ensure compatibility and accuracy.

UI/UX Testing:

• Validate that the UI changes are consistent with the existing design and provide a good user experience.

Conclusion

Given my previous contributions to other projects and my ability to deliver detailed and high-quality solutions, 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 to this project.

Best regards!

[Nadai2010]

Hi @armandocodecr, this issue has been assigned to @raizo07, thanks to all