Added a dropdown for wallets and changed UI

[muneeb-i-khan]

Note:- Detects and lists all wallets installed but currently connects only to Phantom.

[muneeb-i-khan]

PR is made to change the UI as mentioned in the following issue:- #3

[0xPratik]

Remove the .yarn folder in this PR

[muneeb-i-khan]

Done

[0xPratik]

You have modified the wallet-adapter-ui WalletMultiButton component but a much simpler and easier solution to this would be to implement the UI part of it yourself. I would suggest you check the wallet-adapter-ui react package and see how it's implement

[0xPratik]

You have modified the wallet-adapter-ui WalletMultiButton component but a much simpler and easier solution to this would be to implement the UI part of it yourself. I would suggest you check the wallet-adapter-ui react package and see how it's implement and then understand the logic of it there and implement it . I wont recommend to add a css module file in this project it's not required and directly interacting with the window object is something i am no sure about all these things logic is already managed by the wallet adapter and the types you have defined are already there in the packages so it's required.

[0xPratik]

All you need is to focus on the useWallet() hook and the wallets object is going to contain the details

[muneeb-i-khan]

Okay I will work on this and get back to you as soon as I am done.

[muneeb-i-khan]

Like you said I removed the WalletMultiButton and removed styling from css module file. Please tell me if there are anymore changes that need to be done.

[muneeb-i-khan]

@0xPratik I added support for all wallets, updated the UI as you said, added a dropdown menu and removed the WalletMultiButton. Everything looks fine on my end. Please check if everything is okay and let me know if I need to fix anything.

[0xPratik]

Hey I checked out your PR locally and it's quite different than how i intended it to be.
If you have checked the figma file which i added in the issue you might have noticed when the wallet is connected there is logo and wallet address and not a keyword called connected

In this image all the item's are not aligned properly and there is uneven padding/margin which should not be there check the network button for how it should be

When i connect the wallet i get something like this which looks very bad and there should be only disconnect button there and should have similar styles as the network items

In short there are alot of issues in the PR i would suggest to start again in a clean PR

[muneeb-i-khan]

Fine. I will open a new PR and try to fix all these issues.