111 lines
3.1 KiB
TypeScript
111 lines
3.1 KiB
TypeScript
'use client';
|
|
|
|
import { getDefaultConfig, RainbowKitProvider, darkTheme, lightTheme } from '@rainbow-me/rainbowkit';
|
|
import { WagmiProvider } from 'wagmi';
|
|
import { mainnet, polygon, optimism, arbitrum, base, sepolia } from 'wagmi/chains';
|
|
import { QueryClientProvider, QueryClient } from '@tanstack/react-query';
|
|
import { ThemeProvider, useTheme } from 'next-themes';
|
|
import { useEffect, useState } from 'react';
|
|
import { defineChain } from 'viem';
|
|
|
|
import { TranslationsProvider } from '@/providers/translations-provider';
|
|
import { Header } from '@/components/header';
|
|
import { ToastProvider } from '@/components/ui/toast';
|
|
|
|
import deployments from '@/contracts/liqp-deployments.json';
|
|
|
|
const mockchain = defineChain({
|
|
id: 31337,
|
|
name: 'Mockchain',
|
|
nativeCurrency: {
|
|
decimals: 18,
|
|
name: 'Test Ether',
|
|
symbol: 'TETH',
|
|
},
|
|
rpcUrls: {
|
|
default: { http: ['http://localhost:8545'] },
|
|
},
|
|
testnet: true,
|
|
});
|
|
|
|
const allChains = [mainnet, polygon, optimism, arbitrum, base, sepolia, mockchain];
|
|
const chains = allChains.filter(chain =>
|
|
Object.keys(deployments || {}).includes(chain.id.toString())
|
|
);
|
|
if (chains.length === 0) {
|
|
console.error('No chains found with deployed contracts.');
|
|
}
|
|
|
|
const config = getDefaultConfig({
|
|
appName: 'Liquidity Party',
|
|
projectId: 'YOUR_PROJECT_ID', // Get this from https://cloud.walletconnect.com
|
|
chains: chains as any,
|
|
ssr: false,
|
|
});
|
|
|
|
const queryClient = new QueryClient({
|
|
defaultOptions: {
|
|
queries: {
|
|
refetchOnWindowFocus: false,
|
|
refetchOnMount: false,
|
|
refetchOnReconnect: false,
|
|
retry: false,
|
|
staleTime: 5 * 60 * 1000, // 5 minutes
|
|
},
|
|
},
|
|
});
|
|
|
|
function Web3Provider({ children }: { children: React.ReactNode }) {
|
|
const { theme } = useTheme();
|
|
const [mounted, setMounted] = useState(false);
|
|
|
|
useEffect(() => {
|
|
setMounted(true);
|
|
}, []);
|
|
|
|
// Use dark theme by default until mounted, then follow the actual theme
|
|
const rainbowKitTheme = !mounted || theme === 'dark'
|
|
? darkTheme({
|
|
accentColor: '#a855f7', // Purple to match your primary color
|
|
accentColorForeground: 'white',
|
|
})
|
|
: lightTheme({
|
|
accentColor: '#a855f7',
|
|
accentColorForeground: 'white',
|
|
});
|
|
|
|
return (
|
|
<WagmiProvider config={config}>
|
|
<QueryClientProvider client={queryClient}>
|
|
<RainbowKitProvider theme={rainbowKitTheme}>
|
|
{children}
|
|
</RainbowKitProvider>
|
|
</QueryClientProvider>
|
|
</WagmiProvider>
|
|
);
|
|
}
|
|
|
|
export function Providers({ children }: { children: React.ReactNode }) {
|
|
return (
|
|
<TranslationsProvider>
|
|
<ThemeProvider
|
|
attribute="class"
|
|
defaultTheme="dark"
|
|
enableSystem={false}
|
|
storageKey="liquidity-party-theme"
|
|
>
|
|
<Web3Provider>
|
|
<ToastProvider>
|
|
<div className="min-h-screen flex flex-col">
|
|
<Header />
|
|
<main className="flex-1 container mx-auto px-4 py-8">
|
|
{children}
|
|
</main>
|
|
</div>
|
|
</ToastProvider>
|
|
</Web3Provider>
|
|
</ThemeProvider>
|
|
</TranslationsProvider>
|
|
);
|
|
}
|