{"id":48588962,"url":"https://github.com/moazamtech/web3-wallet-connect","last_synced_at":"2026-04-08T18:26:47.668Z","repository":{"id":301136543,"uuid":"1008270123","full_name":"moazamtech/web3-wallet-connect","owner":"moazamtech","description":"⚡ Beautiful Web3 wallet connector with Next.js 15, TypeScript, Tailwind CSS \u0026 Reown AppKit. Multi-wallet, multi-network support with modern glassmorphism UI.","archived":false,"fork":false,"pushed_at":"2025-09-09T09:26:44.000Z","size":203,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-09-09T12:42:31.511Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://web3-wallet-connect-six.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/moazamtech.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-06-25T09:34:39.000Z","updated_at":"2025-09-09T09:26:47.000Z","dependencies_parsed_at":"2025-06-25T11:02:00.076Z","dependency_job_id":null,"html_url":"https://github.com/moazamtech/web3-wallet-connect","commit_stats":null,"previous_names":["moazamtech/web3-wallet-connect"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/moazamtech/web3-wallet-connect","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/moazamtech%2Fweb3-wallet-connect","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/moazamtech%2Fweb3-wallet-connect/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/moazamtech%2Fweb3-wallet-connect/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/moazamtech%2Fweb3-wallet-connect/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/moazamtech","download_url":"https://codeload.github.com/moazamtech/web3-wallet-connect/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/moazamtech%2Fweb3-wallet-connect/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31568216,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-08T14:31:17.711Z","status":"ssl_error","status_checked_at":"2026-04-08T14:31:17.202Z","response_time":54,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-04-08T18:26:47.048Z","updated_at":"2026-04-08T18:26:47.654Z","avatar_url":"https://github.com/moazamtech.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🌐 Web3 Wallet Connect\n\n[![Next.js](https://img.shields.io/badge/Next.js-15-black)](https://nextjs.org/)\n[![TypeScript](https://img.shields.io/badge/TypeScript-5.0-blue)](https://www.typescriptlang.org/)\n[![Tailwind CSS](https://img.shields.io/badge/Tailwind_CSS-3.3-38B2AC)](https://tailwindcss.com/)\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](http://makeapullrequest.com)\n\nA **modern, responsive Web3 wallet connection interface** built with **Next.js 14**, **TypeScript**, **Tailwind CSS**, and **Reown AppKit**. This project provides a clean, user-friendly way to connect multiple Web3 wallets with support for various blockchain networks.\n\n![Web3 Wallet Connect Preview](https://via.placeholder.com/800x400/007AFF/FFFFFF?text=Web3+Wallet+Connect+Preview)\n\n## ✨ Features\n\n- 🔌 **Multi-wallet Support** - Connect with MetaMask, WalletConnect, Coinbase Wallet, and more\n- 🌐 **Multi-network** - Support for Ethereum, Polygon, Arbitrum, Base, and testnets\n- 📱 **Fully Responsive** - Perfect on desktop, tablet, and mobile devices\n- 🎨 **Modern UI/UX** - Beautiful glassmorphism design with smooth animations\n- 🔐 **Secure \u0026 Reliable** - Built with security best practices\n- ⚡ **Optimized Performance** - Fast loading with Next.js 14 App Router\n- 🎯 **TypeScript Ready** - Full type safety throughout the application\n- 🎨 **Tailwind CSS** - Utility-first CSS framework for rapid UI development\n- 🔔 **Smart Notifications** - Enhanced user feedback with Sonner toasts\n- 🔗 **Blockchain Explorer Integration** - Direct links to view addresses on explorers\n\n## 🛠️ Tech Stack\n\n| Technology | Version | Purpose |\n|------------|---------|---------|\n| **Next.js** | 14.x | React framework with App Router |\n| **TypeScript** | 5.x | Type safety and developer experience |\n| **Tailwind CSS** | 3.x | Utility-first CSS framework |\n| **Reown AppKit** | 1.x | Web3 wallet connection infrastructure |\n| **Wagmi** | 2.x | React hooks for Ethereum |\n| **Sonner** | 1.x | Beautiful toast notifications |\n| **Lucide React** | Latest | Modern icon library |\n| **Radix UI** | Latest | Accessible UI components |\n\n## 🚀 Quick Start\n\n### Prerequisites\n\n- **Node.js** 18.0 or higher\n- **npm** / **yarn** / **pnpm**\n- A **Reown Project ID** (free at [cloud.reown.com](https://cloud.reown.com))\n\n### Installation\n\n1. **Clone the repository**\n   ```bash\n   git clone https://github.com/moazamtech/web3-wallet-connect.git\n   cd web3-wallet-connect\n   Install dependencies\nbashnpm install\n# or\nyarn install\n# or\npnpm install\n\nSet up environment variables\nbashcp .env.example .env.local\nUpdate your environment variables:\nenvNEXT_PUBLIC_PROJECT_ID=your_reown_project_id_here\n\nRun the development server\nbashnpm run dev\n# or\nyarn dev\n# or\npnpm dev\n\nOpen your browser\nNavigate to http://localhost:3000 🎉\n\n📁 Project Structure\nweb3-wallet-connect/\n├── 📁 app/                     # Next.js 14 App Router\n│   ├── 📄 globals.css         # Global styles with Tailwind\n│   ├── 📄 layout.tsx          # Root layout with providers\n│   └── 📄 page.tsx            # Home page component\n├── 📁 components/             # Reusable components\n│   ├── 📁 ui/                 # UI component library\n│   │   ├── 📄 button.tsx      # Button component\n│   │   ├── 📄 card.tsx        # Card component\n│   │   └── 📄 badge.tsx       # Badge component\n│   ├── 📄 WalletConnect.tsx   # Main wallet connection component\n│   └── 📄 Web3Provider.tsx    # Web3 context provider\n├── 📁 lib/                    # Utility functions\n│   └── 📄 utils.ts            # Helper functions\n├── 📁 public/                 # Static assets\n│   └── 📄 favicon.ico         # Favicon\n├── 📄 .env.example            # Environment variables template\n├── 📄 tailwind.config.js      # Tailwind CSS configuration\n├── 📄 tsconfig.json           # TypeScript configuration\n└── 📄 package.json            # Dependencies and scripts\n🎨 Design Features\nModern UI Components\n\nGlassmorphism Effects - Semi-transparent cards with backdrop blur\nGradient Backgrounds - Beautiful blue to purple gradients\nSmooth Animations - Loading states and hover effects\nResponsive Grid - Adapts to all screen sizes\n\nUX Enhancements\n\nSmart Loading States - Visual feedback during connections\nToast Notifications - Success, error, and info messages\nAddress Formatting - Clean display of wallet addresses\nOne-click Copy - Easy address copying with feedback\nExplorer Links - Direct links to blockchain explorers\n\n🔧 Configuration\nEnvironment Variables\nCreate a .env.local file with:\nenv# Required - Get from https://cloud.reown.com\nNEXT_PUBLIC_PROJECT_ID=your_project_id_here\n\n# Optional - Custom app metadata\nNEXT_PUBLIC_APP_NAME=\"Web3 Wallet Connect\"\nNEXT_PUBLIC_APP_DESCRIPTION=\"Modern Web3 wallet connection interface\"\nNEXT_PUBLIC_APP_URL=\"https://your-domain.com\"\nGetting a Reown Project ID\n\nVisit Reown Cloud\nCreate an account or sign in\nCreate a new project\nCopy your Project ID\nAdd it to your .env.local file\n\nSupported Networks\nThe app supports these networks out of the box:\n\n✅ Ethereum Mainnet\n✅ Polygon\n✅ Arbitrum\n✅ Base\n✅ Sepolia Testnet\n\nAdd more networks in components/Web3Provider.tsx:\ntypescriptimport { mainnet, polygon, arbitrum, base, sepolia, optimism } from '@reown/appkit/networks'\n\nconst networks = [mainnet, polygon, arbitrum, base, optimism, sepolia]\n📱 Mobile Support\nFully responsive design includes:\n\nTouch-optimized buttons - Perfect for mobile interaction\nMobile wallet deep linking - Direct app connections\nResponsive layouts - Adapts to all screen sizes\nMobile-first approach - Designed for mobile, enhanced for desktop\n\n🎨 Customization\nTheme Colors\nCustomize the color scheme in your Tailwind config:\njavascript// tailwind.config.js\nmodule.exports = {\n  theme: {\n    extend: {\n      colors: {\n        primary: {\n          500: '#3B82F6', // Blue\n          600: '#2563EB',\n        },\n        secondary: {\n          500: '#8B5CF6', // Purple\n          600: '#7C3AED',\n        }\n      }\n    }\n  }\n}\nAppKit Theme\nModify the Web3 modal appearance:\ntypescript// components/Web3Provider.tsx\ncreateAppKit({\n  // ... other config\n  themeMode: 'light', // or 'dark'\n  themeVariables: {\n    '--w3m-color-mix': '#007AFF',\n    '--w3m-color-mix-strength': 20,\n    '--w3m-font-family': 'Inter, sans-serif'\n  }\n})\n🧪 Development Scripts\nbash# Development server\nnpm run dev\n\n# Type checking\nnpm run type-check\n\n# Build for production\nnpm run build\n\n# Start production server\nnpm run start\n\n# Lint code\nnpm run lint\n\n# Format code\nnpm run format\n🚀 Deployment\nVercel (Recommended)\n\nPush your code to GitHub\nConnect your repository to Vercel\nAdd your environment variables\nDeploy! 🚀\n\nOther Platforms\nThe app works on any platform that supports Next.js:\n\nNetlify\nRailway\nAWS Amplify\nDigital Ocean App Platform\n\n🤝 Contributing\nContributions are welcome! Here's how you can help:\nGetting Started\n\nFork the repository\nCreate a feature branch: git checkout -b feature/amazing-feature\nMake your changes\nAdd tests if applicable\nCommit: git commit -m 'Add amazing feature'\nPush: git push origin feature/amazing-feature\nOpen a Pull Request\n\nDevelopment Guidelines\n\nFollow the existing code style\nUse TypeScript strictly\nAdd comments for complex logic\nTest on multiple devices\nUpdate documentation\n\n🐛 Bug Reports\nFound a bug? Please create an issue with:\n\nClear description of the problem\nSteps to reproduce the issue\nExpected vs actual behavior\nScreenshots if applicable\nEnvironment details (OS, browser, etc.)\n\n💡 Feature Requests\nHave an idea? Open an issue with:\n\nClear description of the feature\nUse case and motivation\nImplementation ideas (optional)\n\n📊 Roadmap\n\n Dark mode support\n Multi-language support\n Advanced wallet management\n Transaction history\n ENS name resolution\n Wallet balance display\n NFT collection viewer\n DeFi protocol integration\n\n📄 License\nThis project is licensed under the MIT License - see the LICENSE file for details.\n🙏 Acknowledgments\nSpecial thanks to:\n\nReown - Excellent Web3 infrastructure\nWagmi - React hooks for Ethereum\nNext.js - Amazing React framework\nTailwind CSS - Utility-first CSS framework\nVercel - Best deployment platform\nOpen Source Community - For making this possible\n\n💬 Community \u0026 Support\n\n📧 Email: moazamtech@example.com\n🐛 Issues: GitHub Issues\n💬 Discussions: GitHub Discussions\n🐦 Twitter: @moazamtech\n\n⭐ Show Your Support\nIf this project helped you, please consider:\n\n⭐ Starring the repository\n🍴 Forking for your own projects\n📢 Sharing with the community\n☕ Sponsoring the development\n\n\n\u003cdiv align=\"center\"\u003e\nBuilt with ❤️ by MoazamTech\nMaking Web3 accessible to everyone\n⬆ Back to Top\n\u003c/div\u003e\n```\n📄 Additional Files\n.env.example\nenv# Reown Project ID (Required)\n# Get yours at: https://cloud.reown.com\nNEXT_PUBLIC_PROJECT_ID=your_project_id_here\n\n# App Metadata (Optional)\nNEXT_PUBLIC_APP_NAME=\"Web3 Wallet Connect\"\nNEXT_PUBLIC_APP_DESCRIPTION=\"Modern Web3 wallet connection interface\"\nNEXT_PUBLIC_APP_URL=\"https://your-domain.com\"\nNEXT_PUBLIC_APP_ICON=\"https://your-domain.com/icon.png\"\nLICENSE\nMIT License\n\nCopyright (c) 2025 MoazamTech\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\nThis README is comprehensive, professional, and highlights all the key technologies (Next.js, TypeScript, Tailwind CSS) prominently. The repository name web3-wallet-connect is perfect for SEO and clarity. The documentation covers everything from setup to deployment, making it easy for other developers to use and contribute to your project!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmoazamtech%2Fweb3-wallet-connect","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmoazamtech%2Fweb3-wallet-connect","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmoazamtech%2Fweb3-wallet-connect/lists"}