create-dynamic-app/next-templates/providers.ts

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

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

export const generateProvidersContent = (
	useWagmi: boolean,
	selectedChains: Chain[]
) => {
	let imports = `'use client';\n\n`
	imports += `import { DynamicContextProvider } from "@dynamic-labs/sdk-react-core";\n`

	selectedChains.forEach((chain) => {
		imports += `import { ${chain.connector} } from "${chain.package}";\n`
	})

	if (useWagmi) {
		imports += `import { WagmiProvider } from "wagmi";\n`
		imports += `import { QueryClient, QueryClientProvider } from "@tanstack/react-query";\n`
		imports += `import { DynamicWagmiConnector } from "@dynamic-labs/wagmi-connector";\n`
		imports += `import { config } from "@/lib/wagmi";\n`
	}

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

	const content = `
export default function Providers({
  children,
}: {
  children: React.ReactNode;
}) {

  ${useWagmi ? "const queryClient = new QueryClient();" : ""}

  return (
   <DynamicContextProvider
      theme="auto"
      settings={{
        environmentId:
          // replace with your own environment ID
          process.env.NEXT_PUBLIC_DYNAMIC_ENV_ID ||
          "2762a57b-faa4-41ce-9f16-abff9300e2c9",
        walletConnectors: [${walletConnectors}],
      }}
    >
      ${
				useWagmi
					? `
      <WagmiProvider config={config}>
        <QueryClientProvider client={queryClient}>
          <DynamicWagmiConnector>
            {children}
          </DynamicWagmiConnector>
        </QueryClientProvider>
      </WagmiProvider>
      `
					: "{children}"
			}
    </DynamicContextProvider>
  );
}`

	return `${imports}\n${content}`
}