[FEAT] Add a placeholder if wallet not connected

[metalboyrick]

Issue Overview

Currently if the wallet component is not connected, it will stay as skeleton, which might make people think that it is still connecting when it is actually not connected.

Proposed Solutions or Ideas

See how you can update the Address.tsx component to achieve this goal.

[OWK50GA]

Hi, @metalboyrick
I can handle this.
Let me contribute to this project 🙂

[Yunusabdul38]

Hi @metalboyrick
May I be assigned to this?
will be glad to work on this as my first contribution to this project
I have solid experience with contract integration and have worked on multiple web3 projects (open source and personal projects)

[michojekunle]

Hi 👋🏻 @metalboyrick I discovered that the issue was coming from this block of code in the Address.tsx component

 // Skeleton UI
  if (!checkSumAddress || isLoading) {
    return (
      <div className="animate-pulse flex space-x-4">
        <div className="rounded-md bg-slate-300 h-6 w-6"></div>
        <div className="flex items-center space-y-6">
          <div className="h-2 w-28 bg-slate-300 rounded"></div>
        </div>
      </div>
    );
  }

If the loading check and the checkSumAddress check can be checked for differently that'd make the difference.

As I've tested locally checking for the checkSumAddress after the block of code checking for the isLoading and displaying the skeleton

I can fix this ETA: 30 Mins

[estherbreath]

I would like to handle this issue.

Here’s an overview of what I would do;
Modify the Address.tsx component to prioritize the isLoading heck over checkSumAddress.
Update the conditional rendering logic to display the skeleton UI only when isLoading is true.
Ensure the checkSumAddress validation occurs after the skeleton UI has been rendered.
ETA 1 day

[Agbeleshe]

About me
I am a diligent frontend developer with more than 3 years of working experience in creating responsive, pixel-perfect web and mobile applications with various libraries and frameworks, especially HTML Javascript React, Next.Js, TypeScript. And for styling tailwindCss, Vanila CSS, SCSS, mantime, etc.

My Approach in solving this issue
i will Update the Address.tsx component to check isLoading for displaying the skeleton UI and perform checkSumAddress validation afterward.

ETA
My estimated time to complete this task is within 1hour - 24hours.

[jaykayudo]

can i be assigned this issue?
I am a full stack developer with ample experience in building innovative and scalable solutions. on the blockchain side, i bring expertise in DAPP development, smart contract design and integration of several chains technology.

How i will tackle this

• I will follow the contribution guideline to the letter
• I will open a PR within 3 business days

[Luluameh]

Hi, I’m a frontend developer experienced in TypeScript and JavaScript. I’ve reviewed the issue and understand the problem.

Plan to Solve the Issue:

Investigate the Address.tsx component to identify the current behavior when the wallet is not connected.
Implement a check for the wallet connection status and show a placeholder (such as "Wallet not connected") instead of the skeleton loader.
Ensure the placeholder is styled consistently with the UI and provides a clear user experience.
Test the change to confirm the placeholder displays correctly when the wallet is not connected.
Estimated Completion Time: 1 day

I’m excited to help improve the user experience and look forward to contributing!

[melnikga]

Can I contribute to this one?
Hi, my name is Georgiy, I'm a fullstack blockchain developer. I have extensive experience in developing tools for Starknet, and I've participated in almost all ODHacks, during which I worked on many projects. My OnlyDust profile: https://app.onlydust.com/u/melnikga

[josephchimebuka]

Let me try this one!

[petersdt]

Can I be assigned to this?

[Supa-mega]

Can I take this from here?

[SudiptaPaul-31]

Would love to work on this issue

I am a fullstack and blockchain developer having experience for more than 1.5 years and had worked on many projects from previous odhack my profile: (https://app.onlydust.com/u/SudiptaPaul-31)

[Belloabraham121]

Hey! I'm Iteooluwakisi.
Member of Web3bridge. I have contributed before to other projects like:
• CoinSafe
• Scaffold-ETH
• BuidlGuidl
Can I work on this issue?
Plan to Solve the Issue:
Study the codebase to understand the current structure and functionality.
Understand the problem that needs to be solved by thoroughly reading the issue details.
Leverage all provided resources within the issue to get a better grasp of the task at hand.
If I encounter roadblocks, I will ask questions ASAP in the relevant group/chat to move forward effectively.
I will open a PR and wait for your feedback.

[jedstroke]

Can I try solving this issue?

[abdegenius]

I’d like to work on this.

[1nonlypiece]

Hi,
I’d like to work on this issue as I have experience with Cairo and building on StarkNet, including writing and optimizing smart contracts.

ETA:
I estimate completing this task in about 12-24 hours. Let me know if I can get started!

[Jagadeeshftw]

Hi,
I’d love to work on this issue as I have strong experience in developing secure and efficient smart contracts using Cairo and deploying them on StarkNet. Please assign this to me, and I’ll ensure to deliver a robust and high-quality PR within 12-24 hours.

[SudiptaPaul-31]

Would love to work on this issue

I'm a fullstack and blockchain developer having experience for more than 1.5 years and worked on many projects from the previous odhack my profle:(https://app.onlydust.com/u/SudiptaPaul-31)

[Pvsaint]

I’d love to work on this task please, I'm Victor Peter, a front-end and smart contract developer. I promise to write a pixel perfect code.

[Kachimercy1]

I’m interested in this one.

[ONEONUORA]

Can I take this issue? I am a full stack and blockchain developer. ETA 24 hours

[caxtonacollins]

Can I try solving this issue?

[ryzen-xp]

Hi, I am a proficient blockchain developer, expert in Cairo, Rust, Solidity, Aptos, and web development. I have contributed to several projects like Chainevents and Arkprojects.
I will update the Address.tsx component to include a clear placeholder when the wallet is not connected, improving the user experience by avoiding confusion with the skeleton loader. Please assign this issue to me.

Thank you!

[kimcascante]

I'm Kimberly Cascante, a proud member of Dojo Coding! ⛩️
I have previously worked with TypeScript, including implementing conditional logic to disable buttons based on specific criteria. I'm passionate about design and frontend development and excited to contribute to this project.
My plan is to start by reviewing the code, then proceed to update following the project's structure. I'll ensure proper validations, test the solution, and prepare a PR for review.
I value clear communication and constructive feedback, as I believe they are key to collaborative success.
Happy to contribute!

[ShantelPeters]

Can I start working on this?

[omsant02]

i would like to take this issue

My approach to solve this issue is I'll split the initial conditional check in the Address component by separating !checkSumAddress from isLoading. When there's no address (wallet not connected), I'll display a placeholder component with a gray circle avatar and 'Connect wallet to view address' text. The loading skeleton will only show during actual loading states (when isLoading is true). This will prevent any confusion between disconnected and loading states.

ETA : 12hrs

[Amarjeet325]

Can I take care of this issue?

[vestor-dev]

hey sir i would love to work on this issue
i'm a blockchain dev and i would love to handle this issue
assign me and i'll get to work