function MyApp({ Component, pageProps }: AppProps) {
  const defaultWallets: MainWalletBase[] = [...keplrWallets, ...leapWallets];
  const [wallets, setWallets] = useState<MainWalletBase[]>(defaultWallets)
  const [loadingWallets, setLoadingWallet] = useState<boolean>(false);
    
  useEffect(() => {
      setLoadingWallet(true)
      import("@cosmos-kit/leap-capsule-social-login").then(
        (CapsuleModule) => {
          return CapsuleModule.wallets;
        },
      ).then((leapSocialLogin) => {
        setWallets([...keplrWallets, ...leapWallets, ...leapSocialLogin])
        setLoadingWallet(false);
      })
    }, [])


    if (loadingWallets) {
      return <>Loading...</>
    }


    return (
      <RootLayout>
        <ChainProvider
          chains={chains}
          assetLists={[...assets]}
          wallets={wallets}
          throwErrors={false}
          subscribeConnectEvents={false}
          defaultNameService={"stargaze"}
          logLevel={"DEBUG"}
          endpointOptions={{
            isLazy: true,
            endpoints: {
              cosmoshub: {
                rpc: [
                  {
                    url: "https://rpc.cosmos.directory/cosmoshub",
                    headers: {},
                  },
                ],
              },
            },
          }}
          >
          <Component {...pageProps} />
        </ChainProvider>
        <CustomCapsuleModalViewX />
      </RootLayout>
    );
}

export default MyApp;


const LeapSocialLogin = dynamic(
  () =>
    import("@leapwallet/cosmos-social-login-capsule-provider-ui").then(
      (m) => m.CustomCapsuleModalView,
    ),
  { ssr: false },
);

export function CustomCapsuleModalViewX() {
  const [showCapsuleModal, setShowCapsuleModal] = useState(false);

  useEffect(() => {
    window.openCapsuleModal = () => {
      setShowCapsuleModal(true);
    }
  }, [])

  return (
    <>
      <LeapSocialLogin
        showCapsuleModal={showCapsuleModal}
        setShowCapsuleModal={setShowCapsuleModal}
        theme={'dark'}
        onAfterLoginSuccessful={() => {
          window.successFromCapsuleModal();
        }}
        onLoginFailure={
          () => {
            window.failureFromCapsuleModal();
          }
        }
      />
    </>
  );
}