create-dynamic-app/react-templates/main.ts

CLI tool to generate sample applications using Dynamic's web3 authentication

import type { Chain } from "../types"

export const generateMainTsxContent = (
	useViem: boolean,
	useWagmi: boolean,
	selectedChains: Chain[]
) => {
	const imports = `import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
${selectedChains.map((chain) => `import { ${chain.connector} } from "${chain.package}";`).join("\n")}
import { DynamicContextProvider } from "@dynamic-labs/sdk-react-core";
${
	useWagmi
		? `import { DynamicWagmiConnector } from "@dynamic-labs/wagmi-connector";
import { createConfig, WagmiProvider } from "wagmi";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { http } from "viem";
import { mainnet } from "viem/chains";`
		: ""
}
import App from "./App";
import "./index.css";

`

	const walletConnectors = selectedChains
		.map((chain) => chain.connector)
		.join(", ")

	const content = useWagmi
		? `const config = createConfig({
  chains: [mainnet],
  multiInjectedProviderDiscovery: false,
  transports: {
    [mainnet.id]: http(),
  },
});

const queryClient = new QueryClient();

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <DynamicContextProvider
      theme="auto"
      settings={{
        environmentId: import.meta.env.VITE_DYNAMIC_ENVIRONMENT_ID,
        walletConnectors: [${walletConnectors}],
      }}
    >
      <WagmiProvider config={config}>
        <QueryClientProvider client={queryClient}>
          <DynamicWagmiConnector>
            <App />
          </DynamicWagmiConnector>
        </QueryClientProvider>
      </WagmiProvider>
    </DynamicContextProvider>
  </StrictMode>
);`
		: `createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <DynamicContextProvider
      theme="auto"
      settings={{
        environmentId: import.meta.env.VITE_DYNAMIC_ENVIRONMENT_ID,
        walletConnectors: [${walletConnectors}],
      }}
    >
      <App />
    </DynamicContextProvider>
  </StrictMode>
);`

	return `${imports}${content}`
}