Skip to content

Latest commit

 

History

History
133 lines (96 loc) · 3.35 KB

README.md

File metadata and controls

133 lines (96 loc) · 3.35 KB

Web3 Wallet Connector

A sleek cyberpunk Ethereum wallet connector designed to modernize your dApp. No outdated UI - just fast, futuristic wallet interactions.

What It Actually Does

  • Connects to MetaMask (and other wallets) without relying on the default modals
  • Shows real ETH balance - no fake data, pulls directly from the blockchain
  • Detects network changes - so users don't get confused when they switch chains
  • Copies wallet address - one click instead of manual selection
  • Looks decent on mobile - because most crypto users are on phones
  • Proper error handling - when users inevitably click "reject" by accident

Live Demo

See it in action

What's Under the Hood

  • React 18 + TypeScript - for type safety and modern React patterns
  • Ethers.js v6 - because v5 is deprecated and I like staying current
  • Custom CSS - no UI framework bloat, just clean cyberpunk styling
  • Vite - because Create React App is slow and I'm impatient

Quick Start

# Clone it
git clone https://github.com/amvitor-cm/web3-wallet-connector.git
cd web3-wallet-connector

# Install dependencies
npm install

# Start local server
npm run dev

# Build for production
npm run build

💻 Usage

Drop this component anywhere in your app:

import WalletConnector from './components/WalletConnector';

function YourApp() {
  return (
    <div>
      <WalletConnector />
    </div>
  );
}

Why It Looks Like This

I went with a cyberpunk theme because:

  • Most Web3 UIs are either too corporate or too cartoonish
  • Dark themes are easier on the eyes during late-night coding sessions
  • Glass morphism actually looks good when done right
  • The grid background gives that "matrix" feel without being cheesy

What Works Right Now

Supported Networks:

  • Ethereum Mainnet (where the real money is)
  • Goerli Testnet (deprecated)
  • Sepolia Testnet (the new hotness)
  • Polygon Mainnet (for lower gas fees)
  • Mumbai Testnet (Polygon's testnet)

Wallet Support:

  • MetaMask (the one everyone uses)
  • Any wallet that follows EIP-1193 standard

Code Structure

src/
├── components/
│   └── WalletConnector.tsx    # Main component with all the UI
├── hooks/
│   └── useWallet.ts           # Handles the wallet connection logic
├── styles/
│   └── globals.css            # All the cyberpunk CSS magic
└── App.tsx                    # Wrapper with cool grid background

Deployment

Vercel (easiest):

npm run build
npx vercel --prod

Netlify:

  • Drag the dist folder to Netlify
  • Done

Anywhere else:

  • It's a static site, put it wherever

Known Quirks

  • Mobile browsers can be finicky with wallet connections
  • Some lesser-known wallets might not work perfectly
  • Network detection depends on the wallet providing correct chain IDs
  • If MetaMask isn't installed, it shows an error (obviously)

Want to Improve This?

Found a bug? Have a cool idea?

  • Open an issue
  • Send a PR
  • Fork it and make it better

Find Me

License

MIT - feel free to use this project for personal or commercial purposes.

Built after one too many coffees and the realization that Web3 design deserves better.