Fix Display Bug: Do Not Show Broken Icon for Tokens Without Images

Description 📹

Current :

What we want :

The Figma design file : https://www.figma.com/design/fh0OAvj4AS08kHoSxu3DkE/%F0%9F%9A%80-Starknet-Quest?node-id=5827-21468&t=Frm0fRZHicPZpme8-1

The purpose of this issue is to remove the display of a broken token icon when no image is available. Only tokens with an icon present in our database should display an image.

Issue Details

• Current State: When a token does not have an available icon, a broken image icon is displayed, which negatively affects the user experience.
• Proposed State: Do not display any icon if there is no image available for the token. Only show icons for tokens that have an image in the database.
• Design: No design changes are required; this is a bug fix to improve the current display.

Actions to Take

1. Fork and Branch Creation:

   • Fork the repository and create a new branch using the issue number.

2. Investigation and Fix:

   • Identify the current logic for displaying token icons.
   • Update the code to check if an icon is available in the database before attempting to display it.
   • Ensure that no broken or default placeholder image appears for tokens without an icon.

3. Testing and Validation:

   • Test locally with various tokens (with and without icons).
   • Verify that the display is correct and that no other elements are affected.

4. Commit and Submission:

   • Make a commit with a clear message describing the fix.
   • Submit a pull request that closes the issue.

Proposed Actions 🛠️

Here’s a checklist of actions to follow for resolving this issue:

1. Fork and Create Branch:
   Fork the repository and create a new branch using the issue number:

   git checkout -b fix-[issue-number]
   

2. Implement Changes:
   [Insert Code snippet if needed with a mardown todo list]

3. Run Tests and Commit Changes:
   Make sure your changes don't break existing functionality and commit with a clear message:

   git commit -m "Fix: [Short description of the fix]"
   

Required 📋

To keep our workflow smooth, please make sure you follow these guidelines:

• Assignment: Don't create a pull request if you weren’t assigned to this issue.
• Timeframe: Complete the task within 3 business days.
• Closing the Issue: In your PR description, close the issue by writing Close #[issue_id].
• Review Process:
  • Once you've submitted your PR, change the label to "ready for review".
  • If changes are requested, address them and then update the label back to "ready for review" once done.
• Testing: Test your PR locally before pushing, and verify that tests and build are working after pushing.

Thank you for your contribution 🙏

⚠️ WARNING: Failure to follow the requirements above may result in being added to the OnlyDust blacklist, affecting your ability to receive future rewards.

Start by locating the frontend component that renders token icons and trace how the token image value is read from the database. Test locally with tokens that have images and tokens without them. Done means tokens without an image render no broken or placeholder icon, while tokens with an image remain unchanged.