import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { WagmiProvider } from 'wagmi'
import { base, mainnet } from 'viem/chains'
import { WylletButton, WylletProvider, getDefaultConfig } from 'wyllet'

const config = getDefaultConfig({
  appName: 'My dApp',
  walletConnectProjectId: 'YOUR_PROJECT_ID', // free at https://cloud.reown.com
  chains: [mainnet, base],
})
const queryClient = new QueryClient()

export function App() {
  return (
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>
        <WylletProvider shortcut="mod+k">
          <WylletButton />
        </WylletProvider>
      </QueryClientProvider>
    </WagmiProvider>
  )
}

<WylletProvider
  appearance={{
    presentation: 'drawer',   // 'drawer' | 'popover' | 'modal'
    drawerSide: 'right',      // 'left' | 'right'
    mobileSheet: true,        // bottom sheet on phones
    identityCard: false,      // true → holographic card instead of the compact summary
    cardTilt: true,           // 3D tilt on the identity card
    accountTabs: ['tokens', 'activity', 'networks'],
    closeOnConnect: true,     // false → go straight to the account panel
    tokenSort: 'balance',     // 'balance' | 'list'
    walletSearch: 'auto',     // true | false | 'auto' (6+ wallets)
    walletDirectory: true,    // "All wallets" via the WalletConnect registry (needs a project id)
    toastPosition: 'top-center',
    branding: true,           // “Powered by Wyllet” footer badge
    disableAnimations: false, // prefers-reduced-motion is always respected
  }}
/>

import { auroraTheme, obsidianTheme, porcelainTheme, terminalTheme } from 'wyllet'

<WylletProvider theme={obsidianTheme({ accentColor: '#C6F432', radius: 'round' })} />

// Light/dark pair following the OS (this is the default)
<WylletProvider theme={{ light: porcelainTheme(), dark: obsidianTheme() }} colorMode="auto" />

<WylletProvider classNames={{ panel: 'ring-1 ring-white/10', walletRow: 'hover:translate-x-1' }} />

<WylletProvider nonce={nonce} />
// Content-Security-Policy: style-src 'self' 'nonce-<nonce>'

import 'wyllet/styles.css'
import 'wyllet/themes/default.css' // or obsidian, porcelain, aurora, terminal

<WylletProvider injectStyles={false} injectTheme={false} />
// Content-Security-Policy: style-src 'self'

<WylletButton size="lg" display="compact" label="Enter app" />
// display: 'full' (avatar + name + balance) | 'compact' | 'avatar'

<WylletEmbed />  // the real panel inline, e.g. a connect card on a sign-in page

const { mounted, account, chain, open } = useWylletButton()

<button onClick={(e) => open(e.currentTarget)}>
  {account ? account.displayName : 'Connect'}
</button>

// Control the panel
const { open, close, openConnect, openAccount, openTab, view, isConnected } = useWyllet()
openTab('activity')

// Activity timeline + transaction tracking
const { activity, addTransaction, log, clearActivity } = useWylletActivity()
const hash = await writeContractAsync({ ... })
addTransaction({ hash, description: 'Mint 1 NFT' }) // live toast + timeline entry, resumes after reload
log({ title: 'Staked 10 ETH', status: 'success' })   // your own entries

// Toasts
const toast = useWylletToast()
toast.success('Saved')
await toast.promise(bridge(), { loading: 'Bridging…', success: 'Bridged!', error: 'Bridge failed' })

// SIWE status
const { status, signIn, signOut } = useWylletAuth()

<ConnectGate>
  <Dashboard /> {/* rendered only when connected, on a supported chain, and signed in */}
</ConnectGate>

<ConnectGate requireAuth={false} fallback={(reason) => <MyPrompt reason={reason} />}>…</ConnectGate>

const auth: WylletAuthAdapter = {
  getNonce: () => fetch('/api/nonce').then((r) => r.text()),
  verify: ({ message, signature }) =>
    fetch('/api/verify', { method: 'POST', body: JSON.stringify({ message, signature }) }).then((r) => r.ok),
  signOut: () => fetch('/api/logout', { method: 'POST' }).then(() => {}),
  getSession: () => fetch('/api/me').then((r) => (r.ok ? r.json() : null)), // optional: restore on load
}

<WylletProvider auth={auth} />

import { sepolia } from 'viem/chains'
import { customChain, getDefaultConfig, popularChains, popularTestnets } from 'wyllet'

// Any EVM chain in one call: your L2, an appchain, a devnet.
const myChain = customChain({
  id: 424242,
  name: 'My Chain',
  rpcUrl: 'https://rpc.mychain.xyz',
  explorerUrl: 'https://scan.mychain.xyz',
  nativeCurrency: { name: 'My Token', symbol: 'MYT', decimals: 18 },
  icon: '/mychain.svg',       // or `color: '#FF5500'` for a generated monogram
  nativeIcon: '/myt.svg',     // native currency icon in the Tokens tab
})

getDefaultConfig({
  appName: 'My dApp',
  chains: [myChain, ...popularChains, sepolia], // order = priority; the first chain is the default
})

<WylletProvider chainOrder={[8453, 424242]} />  // Base, then My Chain, then the rest in config order

import { withDefaultTokens } from 'wyllet'

const tokens = withDefaultTokens([
  { chainId: 8453, address: '0x…', symbol: 'MYTKN', decimals: 18, icon: '/mytkn.svg', pinned: true },
  { chainId: 424242, address: '0x…', symbol: 'USDC', decimals: 6 },
])

<WylletProvider tokens={tokens} />

const { tokens, importToken, removeToken, canImport } = useWylletTokens() // connected chain (or pass a chainId): your list, then user imports
const { chains } = useWylletChains()                            // ordered by chainOrder

<TokenIcon symbol="USDC" chainId={8453} size={28} />
<ChainIcon chainId={424242} />

import { burnerWallet, metaMaskWallet, phantomWallet, walletConnectWallet } from 'wyllet'

getDefaultConfig({ ..., wallets: [metaMaskWallet(), phantomWallet(), walletConnectWallet(), burnerWallet()] })

coinbaseWallet({ overrides: { icon: '/brand/coinbase-wallet.svg' } }) // also rainbowWallet(), trustWallet()

// Custom wallet
const acme: Wallet = {
  id: 'acme',
  name: 'Acme',
  icon: 'https://acme.xyz/icon.png',
  rdns: 'xyz.acme',
  walletConnect: { mobileUri: (uri) => `acme://wc?uri=${encodeURIComponent(uri)}` },
  downloadUrls: { browserExtension: 'https://acme.xyz/download' },
}

// Swap how a preset connects
import { coinbaseWallet as coinbaseSdk } from 'wagmi/connectors'
coinbaseWallet({ connector: () => coinbaseSdk({ appName: 'My dApp' }) })

<WylletProvider messages={{ connect: 'Conectar', connectTo: 'Conectar a {app}' }} />