Improve UI and UX

[yogesh0509]

• Improve component designs.
• Migrate wagmi version v1 to v2.

[sanaa9012]

Hello, I would like to contribute in this issue. Can you assign it to me?

[yogesh0509]

I can only assign issues after 25th September but meanwhile can you share any design components or your approach to this issue?

[sanaa9012]

My approach for a project like web3-DREAM11 would be, the UI prioritizes clarity, ease of use, and interactivity for an immersive fantasy sports experience.

Key features include:

1. Home/Dashboard: Displays account details, tokens, leaderboard, live auctions, and notifications.
2. Team Selection & Auction: Player cards with stats, real-time auction status, bidding options, and token visibility.
3. Game Progress & Results: Real-time match stats, oracles integration for scores, and match results.
4. Profile/Wallet: Tracks player history, token balances, and transactions.
5. Blockchain Transparency: Smart contract viewer, transaction history, and data trust indicators.
6. Game Winner Determination: Shows rankings and scores verified by blockchain.
7. Onboarding: Interactive tutorials and guides.
   Design focuses on mobile-first optimization, real-time updates, and seamless blockchain integration using React/Next.js, Web3.js, and Socket.io. This UI simplifies fantasy team management, auctions, and ensures transparency.

[yogesh0509]

Nice, these look really good. I cannot assign you the project before 25th but feel free to clone the repo and look around. Are you familiar with the front-end tech stack for this project. (tailwind CSS and wagmi)?

[sanaa9012]

Sure. I will be glad if you assign this task to me. Yes, I am familiar with tailwind CSS and also have worked with it, I have started to learn wagmi.

[yogesh0509]

Cool, I will assign the issue to you after 25th. One important thing the current front-end of the project is not visible as the current contracts are deployed on polygon Mumbai which are deprecated. So either you have to wait until this [issue] (#10) is merged or you can find another way to temporarily disable metamask firewall in your local to view the current UI. To understand current UI is important as it will give you a idea of all the current features in our project.

[sanaa9012]

Yes, sure. I will start working with either of these alternatives.

[yogesh0509]

@sanaa9012 I have assigned you the issue. Do let me know if the issue is too big and you want me to break it down into smaller issues.

[sanaa9012]

@yogesh0509 Thank you for assigning the Issue. Please break it down into smaller issues, easier for me to finish fast.

[yogesh0509]

Sure, can you provide a list of components from the current frontend that would be refactored along with new pages that you intend to add?
I will create separate issues. Also tell which page or component are you working on first?

[yogesh0509]

@sanaa9012 any updates??

[sanaa9012]

@yogesh0509 not yet. Working on it.

[yogesh0509]

Sure, can you provide a list of components from the current frontend that would be refactored along with new pages that you intend to add? I will create separate issues. Also tell which page or component are you working on first?

@sanaa9012 If possible can you do this first. Also can you post updates once a week on discord server, so that it is easier for other devs to communicate and track progress.

[sanaa9012]

@yogesh0509 i won't be able to contribute for a week from now due to severe health issues. i will be glad if you understand the situation and give me some more time. please.

[yogesh0509]

@sanaa9012 It's alright. Don't worry!! 😁

[yogesh0509]

Hello @sanaa9012 , are you working on this issue currently?

[sanaa9012]

@yogesh0509 No i am not. Occupied. sorry