> ## Documentation Index
> Fetch the complete documentation index at: https://developers.particle.network/llms.txt
> Use this file to discover all available pages before exploring further.

# Custom Page with Toggles

export const InteractiveLayout = () => {
  const ethereumIcon = "https://static.particle.network/mintlify/snippets/logos/eth.png";
  const polygonIcon = 'https://static.particle.network/mintlify/snippets/logos/polygon.png';
  const seiIcon = 'https://static.particle.network/mintlify/snippets/logos/sei.png';
  const baseIcon = 'https://static.particle.network/mintlify/snippets/logos/base.png';
  const BerachainbArtioIcon = 'https://static.particle.network/mintlify/snippets/logos/bera.png';
  const authIcons = {
    email: 'https://static.particle.network/mintlify/snippets/logos/email.png',
    phone: 'https://static.particle.network/mintlify/snippets/logos/phone.png',
    facebook: 'https://static.particle.network/mintlify/snippets/logos/facebook.png',
    google: 'https://static.particle.network/mintlify/snippets/logos/google.png',
    apple: 'https://static.particle.network/mintlify/snippets/logos/apple.png',
    twitter: 'https://static.particle.network/mintlify/snippets/logos/twitter.png',
    discord: 'https://static.particle.network/mintlify/snippets/logos/discord.png',
    github: 'https://static.particle.network/mintlify/snippets/logos/github.png',
    microsoft: 'https://static.particle.network/mintlify/snippets/logos/microsoft.png',
    linkedin: 'https://static.particle.network/mintlify/snippets/logos/linkedin.png'
  };
  if (typeof document === "undefined") {
    return null;
  } else {
    setTimeout(() => {
      const chains = [{
        id: 'mainnet',
        name: 'Ethereum',
        icon: ethereumIcon
      }, {
        id: 'polygon',
        name: 'Polygon',
        icon: polygonIcon
      }, {
        id: 'sei',
        name: 'Sei',
        icon: seiIcon
      }, {
        id: 'base',
        name: 'Bese',
        icon: baseIcon
      }, {
        id: 'berachainTestnetbArtio',
        name: 'BerachainbArtio',
        icon: BerachainbArtioIcon
      }];
      let selectedChains = ['mainnet', 'polygon'];
      let selectedAuthTypes = ['email', 'google', 'twitter', 'github'];
      let allSocialLoginsSelected = false;
      const authTypes = Object.keys(authIcons);
      const handleToggleChain = chainId => {
        const index = selectedChains.indexOf(chainId);
        if (index > -1) {
          selectedChains = selectedChains.filter(id => id !== chainId);
        } else {
          selectedChains.push(chainId);
        }
        renderToggles();
        renderCodeSnippet();
      };
      const handleToggleAuthType = authTypeId => {
        if (authTypeId === 'allSocialLogins') {
          allSocialLoginsSelected = !allSocialLoginsSelected;
          selectedAuthTypes = allSocialLoginsSelected ? [] : selectedAuthTypes;
        } else {
          const index = selectedAuthTypes.indexOf(authTypeId);
          if (index > -1) {
            selectedAuthTypes = selectedAuthTypes.filter(id => id !== authTypeId);
          } else {
            selectedAuthTypes.push(authTypeId);
          }
          allSocialLoginsSelected = false;
        }
        renderAuthToggles();
        renderCodeSnippet();
      };
      const renderToggles = () => {
        const toggleContainer = document.getElementById('toggle-buttons');
        toggleContainer.innerHTML = chains.map(chain => `
          <button
            class="toggle-button ${selectedChains.includes(chain.id) ? 'selected' : ''}"
            onclick="handleToggleChain('${chain.id}')"
          >
            <img src="${chain.icon}" alt="${chain.name}" class="icon"/>
          </button>
        `).join('') + `<button
          class="toggle-button"
          onclick="window.location.href='/guides/network-coverage';"
          style="opacity: 0.5; color: white; background-color: rgba(255, 255, 255, 0.1);"
        >
          +62
        </button>`;
      };
      const renderAuthToggles = () => {
        const authToggleContainer = document.getElementById('auth-toggle-buttons');
        authToggleContainer.innerHTML = `
          <button
            class="toggle-button ${allSocialLoginsSelected ? 'selected' : ''}"
            onclick="handleToggleAuthType('allSocialLogins')"
          >
            All
          </button>
        ` + authTypes.map(authType => `
          <button
            class="toggle-button ${selectedAuthTypes.includes(authType) ? 'selected' : ''}"
            onclick="handleToggleAuthType('${authType}')"
          >
            <img src="${authIcons[authType]}" alt="${authType}" class="icon"/>
          </button>
        `).join('');
      };
      const renderCodeSnippet = () => {
        const importStatements = `import { ${selectedChains.join(", ")} } from "@particle-network/authkit/chains";`;
        const supportChainsArray = `chains: [${selectedChains.join(", ")}],`;
        const authTypesArray = !allSocialLoginsSelected ? `authTypes: [${selectedAuthTypes.map(type => `AuthType.${type}`).join(", ")}],` : "// No need for the authTypes array if you want to include all of the available social login options";
        const codeSnippet = `
  "use client";

  // Particle imports
  ${importStatements} // Chains are imported here
  import { AuthType } from "@particle-network/auth-core";
  import {
    AuthCoreContextProvider,
    PromptSettingType,
  } from "@particle-network/authkit"; 

  export const ParticleAuthkit = ({ children }: React.PropsWithChildren) => {
    return (
      <AuthCoreContextProvider
        options={{
          projectId: process.env.NEXT_PUBLIC_PROJECT_ID!,
          clientKey: process.env.NEXT_PUBLIC_CLIENT_KEY!,
          appId: process.env.NEXT_PUBLIC_APP_ID!,
          ${authTypesArray}
          themeType: "dark",

          // List the chains you want to include
          ${supportChainsArray}

          // Optionally, switches the embedded wallet modal to reflect a smart account
          // erc4337: {
          //   name: "SIMPLE",
          //   version: "2.0.0",
          // },

          // You can prompt the user to set up extra security measures upon login or other interactions
          promptSettingConfig: {
            promptPaymentPasswordSettingWhenSign: PromptSettingType.first,
            promptMasterPasswordSettingWhenLogin: PromptSettingType.first,
          },

          wallet: {
            themeType: "dark", // Wallet modal theme

            // Set to false to remove the embedded wallet modal
            visible: true,
            customStyle: {
              supportUIModeSwitch: true,
              supportLanguageSwitch: false,
            },
          },
        }}
      >
        {children}
      </AuthCoreContextProvider>
    );
  };

  `;
        const codeSnippetContainer = document.getElementById('code-snippets');
        codeSnippetContainer.innerHTML = `
  <div class="snippet-header">
    <span class="language-label">AuthKit.tsx</span>
    <button id="copy-button" class="copy-button">
      <img src="https://static.particle.network/mintlify/snippets/logos/copy.png" alt="Copy icon" class="copy-icon"/>
    </button>
  </div>
  <pre><code>${escapeHtml(codeSnippet)}</code></pre>
`;
        const copyButton = document.getElementById('copy-button');
        copyButton.addEventListener('click', () => {
          navigator.clipboard.writeText(codeSnippet).then(() => {
            copyButton.innerHTML = '<span class="copied-text">Copied!</span>';
          }).catch(err => {
            console.error('Failed to copy: ', err);
          });
        });
      };
      const escapeHtml = unsafe => {
        return unsafe.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;");
      };
      window.handleToggleChain = handleToggleChain;
      window.handleToggleAuthType = handleToggleAuthType;
      renderToggles();
      renderAuthToggles();
      renderCodeSnippet();
    }, 1);
    return <div>
        <p class="section-header chain-selection">Chain selection</p>

        <div id="toggle-buttons" className="toggles"></div>
        <p class="section-header auth-selection">AuthType selection</p>
        <div id="auth-toggle-buttons" className="toggles"></div>
        <div id="code-snippets" className="code-snippet"></div>
      </div>;
  }
};

<InteractiveLayout />