// for 1.0.3-beta.3
import { RainbowKitProvider } from "@rainbow-me/rainbowkit";
import { configureChains, createConfig, WagmiConfig,  } from "wagmi";
import { jsonRpcProvider } from "wagmi/providers/jsonRpc";
import celoGroups from "@celo/rainbowkit-celo/lists"
import { Alfajores, Celo, Cannoli } from "@celo/rainbowkit-celo/chains";
import "@rainbow-me/rainbowkit/styles.css";

const projectId = "your-wallet-connnect-project-id" // get one at https://cloud.walletconnect.com/app

const connectors = celoGroups({chains, projectId, appName: typeof document === "object" && document.title || "Your App Name"})

const { chains, publicClient } = configureChains(
  [Alfajores, Celo, Cannoli],
  [jsonRpcProvider({ rpc: (chain) => ({ http: chain.rpcUrls.default.http[0] }) })]
);
const wagmiConfig = createConfig({
  autoConnect: true,
  connectors,
  publicClient: publicClient,
});

export default function Wrap() {
  return (
    <WagmiConfig config={wagmiConfig}>
      <RainbowKitProvider chains={chains} coolMode={true}>
        <YourApp />
      </RainbowKitProvider>
    </WagmiConfig>
  );
}

function YourApp() {
  return <ConnectButton />;
};