Fix the bug now connect wallet appears first and if wallet is connected then profile and create button is visible

[vasusadariya]

Pull Request

Description

This pull request resolves the issue where the "Create" and "Profile" buttons were visible even when the wallet was not connected. The following updates have been made:

---

Screenshots

After (Resolved State):

• "Create" and "Profile" buttons are visible only when the wallet is connected.

---

Changes in Header.tsx

1. Dynamic Rendering of Buttons Based on Wallet Connection:

   • Added state management (isWalletConnected) to track the wallet connection status.
   • "Create" and "Profile" buttons are displayed only when the wallet is connected.

2. Improved Wallet Connection Logic:

   • Utilized an IsWalletConnected function to verify wallet connection status.
   • Implemented useEffect to check the wallet connection status on component mount and update the state accordingly.

3. Enhanced Navigation:

   • "Home" button remains visible irrespective of wallet connection status.
   • A "Checking..." button is displayed while wallet connection status is being verified.

4. Clean Integration with Web3Connect:

   • Used the Web3Connect component to handle wallet connection functionality when the wallet is not connected.

5. UI/UX Enhancements:

   • Added hover effects, scaling animations, and an underline effect using framer-motion for active navigation links.

---

Changes in Web3Connect.tsx

1. Enhanced Connection Handling:

   • Utilized the useAccount hook from wagmi to dynamically display wallet connection status.
   • If connected, displays the wallet address. If not, shows the ConnectButton from RainbowKit.

2. Simplified Logic:

   • Reduced redundant code by focusing solely on rendering the wallet connection interface.

---

How Has This Been Tested?

1. Verified that the "Create" and "Profile" buttons are only visible when the wallet is connected.
2. Tested with various wallet connection states:
   • Wallet connected
   • Wallet disconnected
   • Wallet connection status being verified
3. Ensured seamless navigation with hover animations and responsive design.
4. Verified proper rendering of the "Connect Wallet" button and wallet address display in Web3Connect.

---

Checklist:

• Verified that "Create" and "Profile" buttons are hidden when wallet is disconnected.
• Tested Web3Connect functionality with MetaMask.
• Verified no console errors or warnings during runtime.

---

Related Issues

• Resolves: "Create and Profile should be visible only after the wallet is connected"

---

Additional Notes

• These changes ensure compliance with wallet connection requirements, providing a more secure and user-friendly experience.

[vasusadariya]

@Ronnieraj37 sir can you check this pr it solves the issue and have scrrenshot also attached and give suggestion if needed