@getpara/create-para-app 0.1.0

package/src/integrations/codeGenerators.ts

@@ -0,0 +1,690 @@
+export function getEnvFileContent(apiKey: string, isNext: boolean): string {
+  return isNext ? `NEXT_PUBLIC_PARA_API_KEY=${apiKey}\n` : `VITE_PARA_API_KEY=${apiKey}\n`;
+}
+
+export function getParaClientCode(isNext: boolean, isTypescript: boolean): string {
+  if (isNext && !isTypescript) {
+    return `import { Environment, ParaWeb } from "@getpara/react-sdk";
+
+const API_KEY = process.env.NEXT_PUBLIC_PARA_API_KEY;
+export const para = new ParaWeb(Environment.BETA, API_KEY);
+`;
+  }
+  if (isNext && isTypescript) {
+    return `import { Environment, ParaWeb } from "@getpara/react-sdk";
+
+const API_KEY: string | undefined = process.env.NEXT_PUBLIC_PARA_API_KEY;
+export const para = new ParaWeb(Environment.BETA, API_KEY || "");
+`;
+  }
+  if (!isNext && !isTypescript) {
+    return `import { Environment, ParaWeb } from "@getpara/react-sdk";
+
+const API_KEY = import.meta.env.VITE_PARA_API_KEY;
+export const para = new ParaWeb(Environment.BETA, API_KEY);
+`;
+  }
+  return `import { Environment, ParaWeb } from "@getpara/react-sdk";
+
+const API_KEY: string | undefined = import.meta.env.VITE_PARA_API_KEY;
+export const para = new ParaWeb(Environment.BETA, API_KEY || "");
+`;
+}
+
+export function getWalletProviderCodeNextjs(networks: string[], noAppRouter: boolean): { fileName: string; code: string }[] {
+  const result: { fileName: string; code: string }[] = [];
+  if (!noAppRouter) {
+    const lines: string[] = [];
+    lines.push(
+      `"use client";`,
+      `import React, { PropsWithChildren } from "react";`,
+      `import { para } from "@/client/para";`,
+      `import { QueryClient, QueryClientProvider } from "@tanstack/react-query";`,
+    );
+    let needQueryClient = false;
+    let nest = '{children}';
+    if (networks.includes('evm')) {
+      needQueryClient = true;
+      lines.push(
+        `import { ParaEvmProvider, walletConnectWallet, metaMaskWallet, rabbyWallet, rainbowWallet, coinbaseWallet, zerionWallet } from "@getpara/evm-wallet-connectors";`,
+        `import { sepolia, celo, mainnet, polygon } from "wagmi/chains";`,
+      );
+      nest = `
+  <ParaEvmProvider
+    config={{
+      projectId: "YOUR_PROJECT_ID",
+      appName: "YOUR_APP_NAME",
+      chains: [mainnet, polygon, sepolia, celo],
+      wallets: [metaMaskWallet, rainbowWallet, walletConnectWallet, zerionWallet, coinbaseWallet, rabbyWallet],
+      para: para,
+    }}
+  >
+    ${nest}
+  </ParaEvmProvider>
+  `;
+    }
+    if (networks.includes('solana')) {
+      needQueryClient = true;
+      lines.push(
+        `import { ParaSolanaProvider, glowWallet, phantomWallet, backpackWallet } from "@getpara/solana-wallet-connectors";`,
+        `import { WalletAdapterNetwork } from "@solana/wallet-adapter-base";`,
+        `import { clusterApiUrl } from "@solana/web3.js";`,
+      );
+      nest = `
+  <ParaSolanaProvider
+    endpoint={clusterApiUrl(WalletAdapterNetwork.Devnet)}
+    wallets={[glowWallet, phantomWallet, backpackWallet]}
+    chain={WalletAdapterNetwork.Devnet}
+    appIdentity={{
+      name: "YOUR_APP_NAME",
+      uri: typeof window !== "undefined" ? \`\${window.location.protocol}//\${window.location.host}\` : "",
+    }}
+  >
+    ${nest}
+  </ParaSolanaProvider>
+  `;
+    }
+    if (networks.includes('cosmos')) {
+      needQueryClient = true;
+      lines.push(
+        `import { ParaCosmosProvider, keplrWallet, leapWallet } from "@getpara/cosmos-wallet-connectors";`,
+        `import { cosmoshub } from "@getpara/graz/chains";`,
+      );
+      nest = `
+  <ParaCosmosProvider
+    chains={[{
+      ...cosmoshub,
+      rpc: "https://rpc.cosmos.directory/cosmoshub",
+      rest: "https://rest.cosmos.directory/cosmoshub",
+    }]}
+    wallets={[keplrWallet, leapWallet]}
+    selectedChainId={cosmoshub.chainId}
+    multiChain={false}
+    onSwitchChain={(chainId) => {
+      console.log("Switched chain to:", chainId);
+    }}
+  >
+    ${nest}
+  </ParaCosmosProvider>
+  `;
+    }
+    const queryClientSetup = needQueryClient ? `const queryClient = new QueryClient();` : '';
+    if (needQueryClient) {
+      nest = `
+  <QueryClientProvider client={queryClient}>
+    ${nest}
+  </QueryClientProvider>
+  `;
+    }
+    lines.push(`
+  ${queryClientSetup}
+  
+  export function ParaWalletsProvider({ children }: PropsWithChildren) {
+    return (
+      <>
+        ${nest}
+      </>
+    );
+  }
+  `);
+    result.push({ fileName: 'ParaWalletsProvider', code: lines.join('\n') });
+  } else {
+    const dynamicImport: string[] = [];
+    dynamicImport.push(`import React, { PropsWithChildren } from "react";`, `import dynamic from "next/dynamic";`);
+    dynamicImport.push(`
+  export const ParaWalletsProvider = dynamic(() => import("./ParaWalletsProviderFull").then(m => m.ParaWalletsProviderFull), {
+    ssr: false
+  });
+  `);
+    result.push({ fileName: 'ParaWalletsProvider', code: dynamicImport.join('\n') });
+    const fullProvider: string[] = [];
+    fullProvider.push(
+      `"use client";`,
+      `import React, { PropsWithChildren } from "react";`,
+      `import { para } from "@/client/para";`,
+      `import { QueryClient, QueryClientProvider } from "@tanstack/react-query";`,
+    );
+    let needQueryClient = false;
+    let nest = '{children}';
+    if (networks.includes('evm')) {
+      needQueryClient = true;
+      fullProvider.push(
+        `import { ParaEvmProvider, walletConnectWallet, metaMaskWallet, rabbyWallet, rainbowWallet, coinbaseWallet, zerionWallet } from "@getpara/evm-wallet-connectors";`,
+        `import { sepolia, celo, mainnet, polygon } from "wagmi/chains";`,
+      );
+      nest = `
+  <ParaEvmProvider
+    config={{
+      projectId: "YOUR_PROJECT_ID",
+      appName: "YOUR_APP_NAME",
+      chains: [mainnet, polygon, sepolia, celo],
+      wallets: [metaMaskWallet, rainbowWallet, walletConnectWallet, zerionWallet, coinbaseWallet, rabbyWallet],
+      para: para,
+    }}
+  >
+    ${nest}
+  </ParaEvmProvider>
+  `;
+    }
+    if (networks.includes('solana')) {
+      needQueryClient = true;
+      fullProvider.push(
+        `import { ParaSolanaProvider, glowWallet, phantomWallet, backpackWallet } from "@getpara/solana-wallet-connectors";`,
+        `import { WalletAdapterNetwork } from "@solana/wallet-adapter-base";`,
+        `import { clusterApiUrl } from "@solana/web3.js";`,
+      );
+      nest = `
+  <ParaSolanaProvider
+    endpoint={clusterApiUrl(WalletAdapterNetwork.Devnet)}
+    wallets={[glowWallet, phantomWallet, backpackWallet]}
+    chain={WalletAdapterNetwork.Devnet}
+    appIdentity={{
+      name: "YOUR_APP_NAME",
+      uri: typeof window !== "undefined" ? \`\${window.location.protocol}//\${window.location.host}\` : "",
+    }}
+  >
+    ${nest}
+  </ParaSolanaProvider>
+  `;
+    }
+    if (networks.includes('cosmos')) {
+      needQueryClient = true;
+      fullProvider.push(
+        `import { ParaCosmosProvider, keplrWallet, leapWallet } from "@getpara/cosmos-wallet-connectors";`,
+        `import { cosmoshub } from "@getpara/graz/chains";`,
+      );
+      nest = `
+  <ParaCosmosProvider
+    chains={[{
+      ...cosmoshub,
+      rpc: "https://rpc.cosmos.directory/cosmoshub",
+      rest: "https://rest.cosmos.directory/cosmoshub",
+    }]}
+    wallets={[keplrWallet, leapWallet]}
+    selectedChainId={cosmoshub.chainId}
+    multiChain={false}
+    onSwitchChain={(chainId) => {
+      console.log("Switched chain to:", chainId);
+    }}
+  >
+    ${nest}
+  </ParaCosmosProvider>
+  `;
+    }
+    const qSetup = needQueryClient ? `const queryClient = new QueryClient();` : '';
+    if (needQueryClient) {
+      nest = `
+  <QueryClientProvider client={queryClient}>
+    ${nest}
+  </QueryClientProvider>
+  `;
+    }
+    fullProvider.push(`
+  ${qSetup}
+  
+  export function ParaWalletsProviderFull({ children }: PropsWithChildren) {
+    return (
+      <>
+        ${nest}
+      </>
+    );
+  }
+  `);
+    result.push({ fileName: 'ParaWalletsProviderFull', code: fullProvider.join('\n') });
+  }
+  return result;
+}
+
+export function getWalletProviderCodeVite(networks: string[]): string {
+  const lines: string[] = [];
+  lines.push(
+    `import React, { PropsWithChildren } from "react";`,
+    `import { para } from "@/client/para";`,
+    `import { QueryClient, QueryClientProvider } from "@tanstack/react-query";`,
+  );
+  let needQueryClient = false;
+  let nest = '{children}';
+  if (networks.includes('evm')) {
+    needQueryClient = true;
+    lines.push(
+      `import { ParaEvmProvider, walletConnectWallet, metaMaskWallet, rabbyWallet, rainbowWallet, coinbaseWallet, zerionWallet } from "@getpara/evm-wallet-connectors";`,
+      `import { sepolia, celo, mainnet, polygon } from "wagmi/chains";`,
+    );
+    nest = `
+  <ParaEvmProvider
+    config={{
+      projectId: "YOUR_PROJECT_ID",
+      appName: "YOUR_APP_NAME",
+      chains: [mainnet, polygon, sepolia, celo],
+      wallets: [metaMaskWallet, rainbowWallet, walletConnectWallet, zerionWallet, coinbaseWallet, rabbyWallet],
+      para: para,
+    }}
+  >
+    ${nest}
+  </ParaEvmProvider>
+  `;
+  }
+  if (networks.includes('solana')) {
+    needQueryClient = true;
+    lines.push(
+      `import { ParaSolanaProvider, glowWallet, phantomWallet, backpackWallet } from "@getpara/solana-wallet-connectors";`,
+      `import { WalletAdapterNetwork } from "@solana/wallet-adapter-base";`,
+      `import { clusterApiUrl } from "@solana/web3.js";`,
+    );
+    nest = `
+  <ParaSolanaProvider
+    endpoint={clusterApiUrl(WalletAdapterNetwork.Devnet)}
+    wallets={[glowWallet, phantomWallet, backpackWallet]}
+    chain={WalletAdapterNetwork.Devnet}
+    appIdentity={{
+      name: "YOUR_APP_NAME",
+      uri: typeof window !== "undefined" ? \`\${window.location.protocol}//\${window.location.host}\` : "",
+    }}
+  >
+    ${nest}
+  </ParaSolanaProvider>
+  `;
+  }
+  if (networks.includes('cosmos')) {
+    needQueryClient = true;
+    lines.push(
+      `import { ParaCosmosProvider, keplrWallet, leapWallet } from "@getpara/cosmos-wallet-connectors";`,
+      `import { cosmoshub } from "@getpara/graz/chains";`,
+    );
+    nest = `
+  <ParaCosmosProvider
+    chains={[{
+      ...cosmoshub,
+      rpc: "https://rpc.cosmos.directory/cosmoshub",
+      rest: "https://rest.cosmos.directory/cosmoshub",
+    }]}
+    wallets={[keplrWallet, leapWallet]}
+    selectedChainId={cosmoshub.chainId}
+    multiChain={false}
+    onSwitchChain={(chainId) => {
+      console.log("Switched chain to:", chainId);
+    }}
+  >
+    ${nest}
+  </ParaCosmosProvider>
+  `;
+  }
+  const queryClientSetup = needQueryClient ? `const queryClient = new QueryClient();` : '';
+  if (needQueryClient) {
+    nest = `
+  <QueryClientProvider client={queryClient}>
+    ${nest}
+  </QueryClientProvider>
+  `;
+  }
+  lines.push(`
+  ${queryClientSetup}
+  
+  export function ParaWalletsProvider({ children }: PropsWithChildren) {
+    return (
+      <>
+        ${nest}
+      </>
+    );
+  }
+  `);
+  return lines.join('\n');
+}
+
+export function getHelloParaFile(tailwind: boolean, isTypescript: boolean, isNext: boolean): string {
+  if (tailwind) {
+    const ext = isTypescript ? 'tsx' : 'jsx';
+    return `export default function HelloPara({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="min-h-screen bg-[#fafafa]">
+      <main className="container mx-auto px-4 py-16">
+        <div className="text-center space-y-4 mb-12">
+          <h1 className="text-4xl md:text-6xl font-bold bg-gradient-to-r from-[#FF4E00] via-[#E73461] to-[#874AE3] text-transparent bg-clip-text">
+            Welcome to Para SDK
+          </h1>
+          <p className="text-lg text-gray-600 max-w-2xl mx-auto">
+            This template is pre-configured with Para SDK. The key files you'll work with are{" "}
+            <code className="px-2 py-1 bg-gray-100 rounded text-[#E73461] text-sm font-mono">
+              src/components/ParaWalletsProvider
+            </code>{" "}
+            for the provider and{" "}
+            <code className="px-2 py-1 bg-gray-100 rounded text-[#E73461] text-sm font-mono">
+              ${isNext ? 'src/app/page.tsx' : 'src/App.tsx'}
+            </code>{" "}
+            for the implementation.
+          </p>
+        </div>
+        <div className="grid md:grid-cols-3 gap-6 mb-12">
+          <div className="p-6 bg-white rounded-lg shadow-sm border border-gray-100">
+            <img
+              src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWNvZGUteG1sIj48cGF0aCBkPSJtMTggMTYgNC00LTQtNCIvPjxwYXRoIGQ9Im02IDgtNCA0IDQgNCIvPjxwYXRoIGQ9Im0xNC41IDQtNSAxNiIvPjwvc3ZnPg==" 
+              className="w-10 h-10 text-[#FF4E00] mb-4" 
+              alt="Code Icon"
+            />
+            <h3 className="text-lg font-semibold mb-2">Simple Integration</h3>
+            <p className="text-gray-600">
+              The ParaWalletsProvider is pre-configured. Just update your configuration in{" "}
+              <code className="px-1.5 py-0.5 bg-gray-100 rounded text-[#E73461] text-sm font-mono">
+                ParaWalletsProvider.${ext}
+              </code>
+            </p>
+          </div>
+          <div className="p-6 bg-white rounded-lg shadow-sm border border-gray-100">
+            <img
+              src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWJsb2NrcyI+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iNyIgeD0iMTQiIHk9IjMiIHJ4PSIxIi8+PHBhdGggZD0ibTEwIDIxVjhhMSAxIDAgMCAwLTEtMUg0YTEgMSAwIDAgMC0xIDF2MTJhMSAxIDAgMCAwIDEgMWgxMmExIDEgMCAwIDAgMS0xdi01YTEgMSAwIDAgMC0xLTFIMyIvPjwvc3ZnPg==" 
+              className="w-10 h-10 text-[#E73461] mb-4" 
+              alt="Blocks Icon"
+            />
+            <h3 className="text-lg font-semibold mb-2">Modular Design</h3>
+            <p className="text-gray-600">
+              All components are modular. Customize the modal and UI components in{" "}
+              <code className="px-1.5 py-0.5 bg-gray-100 rounded text-[#E73461] text-sm font-mono">
+                src/components/*
+              </code>
+            </p>
+          </div>
+          <div className="p-6 bg-white rounded-lg shadow-sm border border-gray-100">
+            <img
+              src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLXphcCI+PHBhdGggZD0iTTQgMTRhMSAxIDAgMCAxLS43OC0xLjYzbDkuOS0xMC4yYS41LjUgMCAwIDEgLjg2LjQ2bC0xLjkyIDYuMDJBMSAxIDAgMCAwIDEzIDEwaDdhMSAxIDAgMCAxIC43OCAxLjYzbC05LjkgMTAuMmEuNS41IDAgMCAxLS44Ni0uNDZsMS45Mi02LjAyQTEgMSAwIDAgMCAxMSAxNHoiLz48L3N2Zz4=" 
+              className="w-10 h-10 text-[#874AE3] mb-4" 
+              alt="Zap Icon"
+            />
+            <h3 className="text-lg font-semibold mb-2">Lightning Fast</h3>
+            <p className="text-gray-600">
+              Start building immediately. Your logic lives in{" "}
+              <code className="px-1.5 py-0.5 bg-gray-100 rounded text-[#E73461] text-sm font-mono">
+                ${isNext ? 'src/app/page.tsx' : 'src/App.tsx'}
+              </code>
+            </p>
+          </div>
+        </div>
+        {children}
+      </main>
+    </div>
+  );
+}
+`;
+  }
+  return `export default function HelloPara({ children }) {
+  return (
+    <div style={{ minHeight: '100vh', backgroundColor: '#fafafa' }}>
+      <main style={{ maxWidth: '1200px', margin: '0 auto', padding: '4rem 1rem' }}>
+        <div style={{ textAlign: 'center', marginBottom: '3rem' }}>
+          <h1 style={{ fontSize: '2.25rem', fontWeight: 'bold', background: 'linear-gradient(to right, #FF4E00, #E73461, #874AE3)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text', color: 'transparent' }}>
+            Welcome to Para SDK
+          </h1>
+          <p style={{ fontSize: '1.125rem', color: '#4B5563', maxWidth: '672px', margin: '0 auto' }}>
+            This template is pre-configured with Para SDK. The key files you'll work with are{" "}
+            <code style={{ padding: '0.25rem 0.5rem', backgroundColor: '#F3F4F6', borderRadius: '0.375rem', color: '#E73461', fontSize: '0.875rem', fontFamily: 'monospace' }}>
+              src/components/ParaWalletsProvider
+            </code>{" "}
+            for the provider and{" "}
+            <code style={{ padding: '0.25rem 0.5rem', backgroundColor: '#F3F4F6', borderRadius: '0.375rem', color: '#E73461', fontSize: '0.875rem', fontFamily: 'monospace' }}>
+              ${isNext ? 'src/app/page.jsx' : 'src/App.jsx'}
+            </code>{" "}
+            for the implementation.
+          </p>
+        </div>
+        <div style={{ display: 'grid', gridTemplateColumns: '1fr', gap: '1.5rem', marginBottom: '3rem' }}>
+          <div style={{ padding: '1.5rem', backgroundColor: '#FFFFFF', borderRadius: '0.5rem', boxShadow: '0 1px 2px rgba(0, 0, 0, 0.05)', border: '1px solid #F3F4F6' }}>
+            <img
+              src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2g9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgaWQ9ImNvZGVJY29uIj48cGF0aCBkPSJtMTggMTYgNC00LTQtNCIvPjxwYXRoIGQ9Im02IDgtNCA0IDQgNCIvPjxwYXRoIGQ9Im0xNC41IDQtNSAxNiIvPjwvc3ZnPg==" 
+              alt="Code Icon" 
+              style={{ width: '40px', height: '40px', marginBottom: '0.5rem' }}
+            />
+            <h3 style={{ fontSize: '1.125rem', fontWeight: '600', marginBottom: '0.5rem' }}>Simple Integration</h3>
+            <p style={{ color: '#4B5563' }}>
+              The ParaWalletsProvider is pre-configured. Just update your configuration in{" "}
+              <code style={{ padding: '0.375rem 0.5rem', backgroundColor: '#F3F4F6', borderRadius: '0.375rem', color: '#E73461', fontSize: '0.875rem', fontFamily: 'monospace' }}>
+                ParaWalletsProvider.jsx
+              </code>
+            </p>
+          </div>
+          <div style={{ padding: '1.5rem', backgroundColor: '#FFFFFF', borderRadius: '0.5rem', boxShadow: '0 1px 2px rgba(0, 0, 0, 0.05)', border: '1px solid #F3F4F6' }}>
+            <img
+              src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2g9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgaWQ9ImJsb2Nrc0ljb24iPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjciIHg9IjE0IiB5PSIzIiByeD0iMSIvPjxwYXRoIGQ9Im0xMCAyMVY4YTEgMSAwIDAgMC0xLTFINGExIDEgMCAwIDAtMSAxVjEyYTEgMSAwIDAgMCAxIDFoMTJhMSAxIDAgMCAwIC43OCAxLjYzbC05LjkgMTAuMmEuNS41IDAgMCAxLS44Ni0uNDZsMS45Mi02LjAyQTEgMSAwIDAgMCAxMSAxNHoiLz48L3N2Zz4=" 
+              alt="Blocks Icon" 
+              style={{ width: '40px', height: '40px', marginBottom: '0.5rem' }}
+            />
+            <h3 style={{ fontSize: '1.125rem', fontWeight: '600', marginBottom: '0.5rem' }}>Modular Design</h3>
+            <p style={{ color: '#4B5563' }}>
+              All components are modular. Customize the modal and UI elements in{" "}
+              <code style={{ padding: '0.375rem 0.5rem', backgroundColor: '#F3F4F6', borderRadius: '0.375rem', color: '#E73461', fontSize: '0.875rem', fontFamily: 'monospace' }}>
+                src/components/*
+              </code>
+            </p>
+          </div>
+          <div style={{ padding: '1.5rem', backgroundColor: '#FFFFFF', borderRadius: '0.5rem', boxShadow: '0 1px 2px rgba(0, 0, 0, 0.05)', border: '1px solid #F3F4F6' }}>
+            <img
+              src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2g9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgaWQ9InphcEljb25JY29uIj48cGF0aCBkPSJNNCAxNGExIDEgMCAwIDEtLjc4LTEuNjNsOS45LTEwLjJhLjUuNSAwIDAgMSAuODYuNDZsLTEuOTIgNi4wMkExIDEgMCAwIDAgMTMgMTBoN2ExIDEgMCAwIDEgLjc4IDEuNjNsLTkuOSAxMC4yYS41LjUgMCAwIDEtLjg2LS40NmwxLjkyLTYuMDJBMSAxIDAgMCAwIDExIDE0eiIvPjwvc3ZnPg==" 
+              alt="Zap Icon" 
+              style={{ width: '40px', height: '40px', marginBottom: '0.5rem' }}
+            />
+            <h3 style={{ fontSize: '1.125rem', fontWeight: '600', marginBottom: '0.5rem' }}>Lightning Fast</h3>
+            <p style={{ color: '#4B5563' }}>
+              Start building immediately. Your logic lives in{" "}
+              <code style={{ padding: '0.375rem 0.5rem', backgroundColor: '#F3F4F6', borderRadius: '0.375rem', color: '#E73461', fontSize: '0.875rem', fontFamily: 'monospace' }}>
+                ${isNext ? 'src/app/page.jsx' : 'src/App.jsx'}
+              </code>
+            </p>
+          </div>
+        </div>
+        <div className="flex justify-center items-center">
+          {children}
+        </div>
+      </main>
+    </div>
+  );
+}
+`;
+}
+
+export function getHomeFile(tailwind: boolean, isNext: boolean, externalWalletSupport: boolean): string {
+  const maybeUseClient = isNext ? `"use client";\n` : '';
+
+  const helloParaImport = isNext
+    ? `import HelloPara from "@/components/HelloPara";`
+    : `import HelloPara from "./HelloPara";`;
+
+  let externalImports = ``;
+  if (externalWalletSupport) {
+    if (isNext) {
+      externalImports = `import { ExternalWallet } from "@getpara/react-sdk";
+import { ParaWalletsProvider } from "@/components/ParaWalletsProvider";`;
+    } else {
+      externalImports = `import { ExternalWallet } from "@getpara/react-sdk";
+import { ParaWalletsProvider } from "./ParaWalletsProvider";`;
+    }
+  }
+
+  const wrapBegin = externalWalletSupport ? `<ParaWalletsProvider>` : ``;
+  const wrapEnd = externalWalletSupport ? `</ParaWalletsProvider>` : ``;
+  const maybeClass = tailwind
+    ? `className="bg-[#FF4E00] hover:bg-[#E73461] text-white font-semibold py-2 px-4 rounded"`
+    : `className="open-button"`;
+
+  const externalWalletSnippet = externalWalletSupport
+    ? ` externalWallets={[
+          ExternalWallet.BACKPACK,
+          ExternalWallet.COINBASE,
+          ExternalWallet.GLOW,
+          ExternalWallet.KEPLR,
+          ExternalWallet.LEAP,
+          ExternalWallet.METAMASK,
+          ExternalWallet.PHANTOM,
+          ExternalWallet.RABBY,
+          ExternalWallet.RAINBOW,
+          ExternalWallet.WALLETCONNECT,
+          ExternalWallet.ZERION,
+        ]}`
+    : ``;
+
+  return `
+${maybeUseClient}import React, { useState } from "react";
+import { para } from "@/client/para";
+import { ParaModal, OAuthMethod, AuthLayout } from "@getpara/react-sdk";
+import "@getpara/react-sdk/styles.css";
+${externalImports}
+${helloParaImport}
+
+export default function Home() {
+  const [isOpen, setIsOpen] = useState(false);
+  const handleCloseModal = () => setIsOpen(false);
+
+  return (
+    <HelloPara>
+      ${wrapBegin}
+      <button onClick={() => setIsOpen(true)} ${maybeClass}>
+        Try the SDK
+      </button>
+      <ParaModal
+        para={para}
+        isOpen={isOpen}
+        onClose={handleCloseModal}
+        ${externalWalletSnippet}
+        disableEmailLogin={false}
+        disablePhoneLogin={false}
+        authLayout={[AuthLayout.AUTH_FULL]}
+        oAuthMethods={[
+          OAuthMethod.APPLE,
+          OAuthMethod.DISCORD,
+          OAuthMethod.FACEBOOK,
+          OAuthMethod.FARCASTER,
+          OAuthMethod.GOOGLE,
+          OAuthMethod.TWITTER,
+        ]}
+        onRampTestMode={true}
+        theme={{
+          foregroundColor: "#2D3648",
+          backgroundColor: "#FFFFFF",
+          accentColor: "#0066CC",
+          darkForegroundColor: "#E8EBF2",
+          darkBackgroundColor: "#1A1F2B",
+          darkAccentColor: "#4D9FFF",
+          mode: "light",
+          borderRadius: "none",
+          font: "Inter",
+        }}
+        appName="YOUR_APP_NAME"
+        logo="YOUR_APP_LOGO"
+        recoverySecretStepEnabled={true}
+        twoFactorAuthEnabled={false}
+      />
+      ${wrapEnd}
+    </HelloPara>
+  );
+}
+`;
+}
+
+export function getStylesNonTailwind(): string {
+  return `.outer {
+  min-height: 100vh;
+  background-color: #fafafa;
+}
+
+.main-container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 4rem 1rem;
+}
+
+.header {
+  text-align: center;
+  margin-bottom: 3rem;
+}
+
+.header > *:not(:last-child) {
+  margin-bottom: 1rem;
+}
+
+.title {
+  font-size: 2.25rem;
+  font-weight: bold;
+  background: linear-gradient(to right, #FF4E00, #E73461, #874AE3);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  color: transparent;
+}
+
+.description {
+  font-size: 1.125rem;
+  color: #4B5563;
+  max-width: 672px;
+  margin: 0 auto;
+}
+
+.inline-code {
+  padding: 0.25rem 0.5rem;
+  background-color: #F3F4F6;
+  border-radius: 0.375rem;
+  color: #E73461;
+  font-size: 0.875rem;
+  font-family: monospace;
+}
+
+.grid-container {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 1.5rem;
+  margin-bottom: 3rem;
+}
+
+@media (min-width: 768px) {
+  .grid-container {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
+.card {
+  padding: 1.5rem;
+  background-color: #FFFFFF;
+  border-radius: 0.5rem;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+  border: 1px solid #F3F4F6;
+}
+
+.card-icon {
+  width: 40px;
+  height: 40px;
+  margin-bottom: 1rem;
+}
+
+.icon-code {
+  color: #FF4E00;
+}
+
+.icon-blocks {
+  color: #E73461;
+}
+
+.icon-zap {
+  color: #874AE3;
+}
+
+.card-title {
+  font-size: 1.125rem;
+  font-weight: 600;
+  margin-bottom: 0.5rem;
+}
+
+.card-text {
+  color: #4B5563;
+}
+
+.open-button {
+  background-color: #FF4E00;
+  color: #FFFFFF;
+  font-weight: 600;
+  padding: 0.5rem 1rem;
+  border: none;
+  border-radius: 0.25rem;
+  cursor: pointer;
+}
+
+.open-button:hover {
+  background-color: #E73461;
+}
+`;
+}