fix: defaults for token list

[fernandomg]

Description:

While testing #204 I found out we didn't properly manage what happens when the dApp is pristine (no wallet ever connected)

So this is an attempt to give the user something more user-friendly.

It feels odd to be checking token availability in different parts of the app, but so far this worked from the UX perspective.

I'll be reviewing this to better extract the whole functionality in #202

Steps:

Test the preview version of this PR, withouth connecting the wallet. Open the tokenList, it should show something as in the video.

Type of change:

• [x] New feature
• [x] Bug fix
• [ ] Breaking change
• [x] Enhancement
• [x] Refactoring
• [ ] Chore

How Has This Been Tested?

• [x] Manual testing
• [ ] Automated tests
• [ ] Other (explain)

Remember to check that:

• Your code follows the style guidelines of this project
• You have performed a self-review of your code
• You have commented your code in hard-to-understand areas
• You have made corresponding changes to the documentation
• Your changes generate no new warnings

Screenshots

https://github.com/user-attachments/assets/69527a9f-36ba-43ee-9aad-0cfad9a68d89

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
dappbooster	✅ Ready (Inspect)	Visit Preview	Aug 6, 2024 10:14am

[gabitoesmiapodo]

IIRC you can just disable the dropdown if you have to. It may need some tweaking, but it should be possible.

For example, in TokenDropdown you could pass a disabled prop and disable the whole component until you have all the data you need.

Same for TokenInput.

<Wrapper>
  <Dropdown
    disabled={disabled}   
    button={
      <button>
        {currentToken ? currentToken.symbol : 'Select token'}
       </button>
     }
   (etc)
  />
</Wrapper>       

[fernandomg]

IIRC you can just disable the dropdown if you have to. It may need some tweaking, but it should be possible.

For example, in TokenDropdown you could pass a disabled prop and disable the whole component until you have all the data you need.

Same for TokenInput.

<Wrapper>
  <Dropdown
    disabled={disabled}   
    button={
      <button>
        {currentToken ? currentToken.symbol : 'Select token'}
       </button>
     }
   (etc)
  />
</Wrapper>       

that's right, I saw the network selector example. But required me to go up the tree, and move the logic there. I didn't want to do that refactor here, I just wanted it to be user friendly, so we can better focus on #202.