chore: add missing Web3Provider to git

The providers directory was untracked, causing build failures on the server.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Jeff Emmett 2026-01-02 18:18:25 +01:00
parent 95d7f9631c
commit f15b137686
1 changed files with 92 additions and 0 deletions

View File

@ -0,0 +1,92 @@
/**
* Web3Provider - Wagmi + WalletConnect configuration
*
* Provides wallet connection capabilities to the application.
* Wraps wagmi's WagmiProvider with React Query for data fetching.
*/
import React, { ReactNode } from 'react';
import { WagmiProvider, createConfig, http } from 'wagmi';
import { mainnet, optimism, arbitrum, base, polygon } from 'wagmi/chains';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { injected, walletConnect } from 'wagmi/connectors';
// =============================================================================
// Configuration
// =============================================================================
// WalletConnect Project ID - get one at https://cloud.walletconnect.com/
// For development, we'll use a placeholder that will show a warning
const WALLETCONNECT_PROJECT_ID = import.meta.env.VITE_WALLETCONNECT_PROJECT_ID || 'YOUR_PROJECT_ID';
// Supported chains
const chains = [mainnet, optimism, arbitrum, base, polygon] as const;
// Create wagmi config
const config = createConfig({
chains,
connectors: [
// Injected wallets (MetaMask, Coinbase Wallet, etc.)
injected({
shimDisconnect: true,
}),
// WalletConnect v2 (for mobile wallets)
walletConnect({
projectId: WALLETCONNECT_PROJECT_ID,
showQrModal: true,
metadata: {
name: 'Canvas',
description: 'Collaborative Canvas with Web3 Integration',
url: typeof window !== 'undefined' ? window.location.origin : 'https://jeffemmett.com',
icons: ['https://jeffemmett.com/favicon.ico'],
},
}),
],
transports: {
[mainnet.id]: http(),
[optimism.id]: http(),
[arbitrum.id]: http(),
[base.id]: http(),
[polygon.id]: http(),
},
});
// Create React Query client
const queryClient = new QueryClient({
defaultOptions: {
queries: {
// Don't refetch on window focus for wallet data
refetchOnWindowFocus: false,
// Cache wallet data for 30 seconds
staleTime: 30_000,
},
},
});
// =============================================================================
// Provider Component
// =============================================================================
interface Web3ProviderProps {
children: ReactNode;
}
export function Web3Provider({ children }: Web3ProviderProps) {
return (
<WagmiProvider config={config}>
<QueryClientProvider client={queryClient}>
{children}
</QueryClientProvider>
</WagmiProvider>
);
}
// =============================================================================
// Exports
// =============================================================================
// Export config for use in hooks
export { config };
// Re-export chains for convenience
export { mainnet, optimism, arbitrum, base, polygon };