Firebase + SW Demo

This is a demonstration application showcasing the integration of Firebase Authentication with Coinbase Smart Wallet functionality.

Features

Google Sign-In authentication using Firebase
Coinbase Smart Wallet integration for creating and managing wallets
Responsive UI with Tailwind CSS
Next.js framework for server-side rendering and routing

Technologies Used

Next.js
React
Firebase (Authentication)
Wagmi (Ethereum interactions)
Tailwind CSS
TypeScript

Getting Started

Clone the repository
Install dependencies:
```
npm install
```
Set up your Firebase project and add the configuration to utils/firebaseConfig.ts
Set up your Wagmi configuration in wagmi.ts (ensure Coinbase Wallet connector is configured)
Run the development server:
```
npm run dev
```
Open http://localhost:3000 in your browser

Project Structure

pages/: Next.js pages and API routes
components/: React components
- Auth/: Authentication-related components
- CreateWalletButton.tsx: Coinbase Smart Wallet creation button
- WelcomeModal.tsx: Modal displayed after user sign-in
lib/: Firebase initialization
utils/: Utility functions and configurations
styles/: Global styles and Tailwind CSS configuration

Key Components

SignInButton: Handles Google Sign-In
SignOutButton: Handles user sign-out
CreateWalletButton: Initiates Coinbase Smart Wallet creation
WelcomeModal: Displays a welcome message and wallet creation option

Authentication Flow

User clicks "Sign in with Google" button
Firebase handles authentication
Upon successful sign-in, a welcome modal is displayed
User can create a Coinbase Smart Wallet from the modal or main page

Wallet Integration

The app uses Coinbase Smart Wallet.

Notes

Ensure all required environment variables are set for Firebase and Ethereum network configurations
The app is set up to use the Ethereum mainnet, adjust the configuration in wagmi.ts if needed