🧪 thirdweb-issue-7654

A minimal reproduction demo for SDK bug reported in thirdweb-dev/js#7654

This repository demonstrates an issue with wallet disconnection when using thirdweb in a React + Vite setup with react-router-dom. Specifically, it reproduces a bug where the connected wallet gets disconnected upon page reload after navigating to a new route.

---

🐛 Issue Description

Problem:
When using @thirdweb-dev/react with react-router-dom, the connected wallet (e.g., MetaMask, Rainbow, or social login) disconnects after a route change followed by a page reload. This issue affects user experience, especially in single-page applications where routing is commonly used.

---

🔁 Steps to Reproduce

1. Clone this repository:

   git clone https://github.com/[your-username]/thirdweb-issue-7654.git
   cd thirdweb-issue-7654

2. Install dependencies:

   npm install

3. Run the app:

   npm run dev

4. Reproduce the issue:

   • Connect your wallet (MetaMask, Rainbow, etc.)
   • Use the navigation to go to a different route (e.g., /about)
   • Reload the page
   • Observe: the wallet connection is lost ❌

---

🧩 Tech Stack

• ⚛️ React + Vite
• 🧭 react-router-dom v7.7.0
• 🔌 @thirdweb-dev/react v5.105.16
• 🔐 EVM Wallets tried: MetaMask, Rainbow, and Social

---

📂 Project Structure

src/
├── App.tsx             # Main routing and layout
├── main.tsx            # ThirdwebProvider setup
└── components/
    ├── Home.tsx     # Wallet connection component
    └── About.tsx

---

💡 Notes

• No backend — frontend-only reproduction
• No custom wallet logic or state management
• No clearing of localStorage or sessionStorage
• Minimal setup focused only on reproducing the issue

---

🔗 Related Issue

• GitHub: thirdweb-dev/js#7654

---

📽️ Demo Video

• Demo Video: View

---

🙌 Contributing

Feel free to fork, clone, or open PRs to help investigate or fix the issue.

---

Author: Mustafa Siddique