import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import { WagmiProvider } from 'wagmi';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { config } from './wagmi';
import { ConnectButton } from './ConnectButton';
import { WalletModalContent } from './WalletModalContent';
import './legacyBridge';

const queryClient = new QueryClient();

function mount(id: string, node: React.ReactNode) {
  const el = document.getElementById(id);
  if (!el) return;
  createRoot(el).render(
    <StrictMode>
      <WagmiProvider config={config}>
        <QueryClientProvider client={queryClient}>{node}</QueryClientProvider>
      </WagmiProvider>
    </StrictMode>,
  );
}

mount('phlece-wallet-button-root', <ConnectButton />);
mount('phlece-wallet-modal-root', <WalletModalContent />);

// Kept as a global so the small number of untouched vanilla buttons
// (e.g. #portfolioConnectBtn, the trade modal's connect CTA) that still
// call onclick="openAppKitConnect()" keep working — just opens the
// modal the curated wallet picker renders into, same as the topbar
// ConnectButton, on both desktop and mobile.
(window as unknown as { openAppKitConnect: () => void }).openAppKitConnect = () => {
  window.openModal('walletModal');
};