Fix qs builder issues

Author: yashovardhan

src/pages/quickstart/NavigationOverlay/NavigationFlow.tsx

@@ -8,18 +8,19 @@ import Button from '@site/src/components/elements/buttons/button'
 import SvgStar from '@site/static/img/icons/star.svg'
 import Shape from '@site/static/img/shapes/intro-cards/shape.svg'
 import styles from './NavigationOverlay.module.css'
-import { METAMASK_SDK, EMBEDDED_WALLETS } from '../builder/choices'
+import { METAMASK_SDK, EMBEDDED_WALLETS, YES, NO } from '../builder/choices'
 
 interface NavigationOption {
   id: string
   title: string
   description: string
   product?: string
   link?: string
+  walletAggregatorOnly?: string
 }
 
 interface NavigationFlowProps {
-  onSelect: (product: string) => void
+  onSelect: (options: { product: string; walletAggregatorOnly?: string }) => void
 }
 
 const navigationOptions: NavigationOption[] = [
@@ -34,12 +35,14 @@ const navigationOptions: NavigationOption[] = [
     title: 'I want to create wallets inside my dapp',
     description: 'Embedded Wallets SDK',
     product: EMBEDDED_WALLETS,
+    walletAggregatorOnly: NO,
   },
   {
     id: 'embedded-wallets-2',
     title: 'I want a wallet aggregator for my dapp',
     description: 'Embedded Wallets SDK',
     product: EMBEDDED_WALLETS,
+    walletAggregatorOnly: YES,
   },
   {
     id: 'delegation-toolkit-1',
@@ -67,7 +70,13 @@ const NavigationFlow: React.FC<NavigationFlowProps> = ({ onSelect }) => {
 
   const handleOptionSelect = (option: NavigationOption) => {
     if (option.product) {
-      onSelect(option.product)
+      const options: { product: string; walletAggregatorOnly?: string } = {
+        product: option.product,
+      }
+      if (option.walletAggregatorOnly !== undefined) {
+        options.walletAggregatorOnly = option.walletAggregatorOnly
+      }
+      onSelect(options)
     } else if (option.link) {
       window.location.href = option.link
     }

src/pages/quickstart/NavigationOverlay/NavigationOverlay.module.css

@@ -1,4 +1,4 @@
-/* Overlay Container - Full layover covering entire builder */
+/* Overlay Container - Covers builder area only */
 .overlayContainer {
   position: absolute;
   inset: 0;
@@ -19,7 +19,6 @@ html[data-theme='dark'] .overlayContainer {
   overflow-y: auto;
   display: flex;
   flex-direction: column;
-  margin-top: 6rem;
 }
 
 /* Tablet and up */

src/pages/quickstart/NavigationOverlay/index.tsx

@@ -1,16 +1,50 @@
 import React, { useState } from 'react'
 import styles from './NavigationOverlay.module.css'
 import NavigationFlow from './NavigationFlow'
+import { getWindowLocation } from '../../../theme/URLParams'
+import { METAMASK_SDK, EMBEDDED_WALLETS, YES, NO } from '../builder/choices'
 
 interface NavigationOverlayProps {
   onClose: () => void
-  onSelect: (product: string) => void
+  onSelect: (options: { product: string; walletAggregatorOnly?: string }) => void
+}
+
+// Check if there are relevant URL params (for close button visibility)
+const hasRelevantURLParams = () => {
+  const url = new URL(getWindowLocation())
+  const relevantParams = ['product', 'framework', 'walletAggregatorOnly']
+  return relevantParams.some(param => url.searchParams.has(param))
+}
+
+const validateURLParams = () => {
+  const url = new URL(getWindowLocation())
+  const product = url.searchParams.get('product')
+  const walletAggregatorOnly = url.searchParams.get('walletAggregatorOnly')
+
+  // Must have at least a product parameter to be valid
+  if (!product) return false
+
+  // Validate product parameter
+  const validProducts = [METAMASK_SDK, EMBEDDED_WALLETS]
+  if (!validProducts.includes(product)) return false
+
+  // If we have walletAggregatorOnly, validate its value
+  if (walletAggregatorOnly && ![YES, NO].includes(walletAggregatorOnly)) return false
+
+  return true
 }
 
 const NavigationOverlay: React.FC<NavigationOverlayProps> = ({ onClose, onSelect }) => {
+  const canClose = hasRelevantURLParams() && validateURLParams()
+
   return (
     <div className={styles.overlayContainer}>
       <div className={styles.overlayContent}>
+        {canClose && (
+          <button className={styles.closeButton} onClick={onClose}>
+            ✕
+          </button>
+        )}
         <NavigationFlow onSelect={onSelect} />
       </div>
     </div>

src/pages/quickstart/builder/choices.ts

@@ -43,3 +43,8 @@ export const TOGGLE: DisplayChoice[] = [
   { key: NO, displayName: 'No' },
   { key: YES, displayName: 'Yes' },
 ]
+
+export const WALLET_AGGREGATOR_TOGGLE: DisplayChoice[] = [
+  { key: NO, displayName: 'Social Logins' },
+  { key: YES, displayName: 'Wallet Aggregator' },
+]

src/pages/quickstart/builder/embedded-wallets/angular/index.ts

@@ -3,9 +3,9 @@ import { ReplaceFileAggregator } from '../../../utils'
 import getSteps from './steps'
 
 const framework = {
-  build({ filenames, files, steps }) {
+  build({ filenames, files, steps, ...values }) {
     const replacementAggregator = new ReplaceFileAggregator()
-    getSteps(steps, files, replacementAggregator)
+    getSteps(steps, files, replacementAggregator, values)
     filenames.push(qsFileLinks.EW_ANGULAR_APP_COMPONENT_TS)
     filenames.push(qsFileLinks.EW_ANGULAR_PACKAGE_JSON)
     filenames.push(qsFileLinks.EW_ANGULAR_APP_COMPONENT_HTML)

src/pages/quickstart/builder/embedded-wallets/angular/stepContent/index.ts

@@ -5,6 +5,7 @@ import * as login from './login.mdx'
 import * as logout from './logout.mdx'
 import * as blockchainCalls from './blockchainCalls.mdx'
 import * as registerApp from '../../../../commonSteps/registerApp.mdx'
+import * as walletAggregatorOnly from '../../../../commonSteps/walletAggregatorOnly.mdx'
 import * as installation from './installation.mdx'
 import * as config from './config.mdx'
 import { toSteps } from '../../../../utils'
@@ -16,6 +17,7 @@ const STEPS = toSteps({
   initialization,
   config,
   registerApp,
+  walletAggregatorOnly,
   blockchainCalls,
   login,
   logout,

src/pages/quickstart/builder/embedded-wallets/angular/steps.ts

@@ -1,7 +1,8 @@
 import qsFileLinks from '../../../../../utils/qs-file-links.json'
 import STEPS from './stepContent'
+import { YES } from '../../choices'
 
-export default function getSteps(steps, files, replacementAggregator) {
+export default function getSteps(steps, files, replacementAggregator, values = {}) {
   steps.push(
     {
       ...STEPS.angularQuickStart,
@@ -34,7 +35,22 @@ export default function getSteps(steps, files, replacementAggregator) {
         files[qsFileLinks.EW_ANGULAR_APP_COMPONENT_TS],
         'Dashboard Registration'
       ),
-    },
+    }
+  )
+
+  // Add wallet aggregator only step if enabled
+  if (values.walletAggregatorOnly === YES) {
+    steps.push({
+      ...STEPS.walletAggregatorOnly,
+      pointer: replacementAggregator.highlightRange(
+        qsFileLinks.EW_ANGULAR_APP_COMPONENT_TS,
+        files[qsFileLinks.EW_ANGULAR_APP_COMPONENT_TS],
+        'Wallet Aggregator Configuration'
+      ),
+    })
+  }
+
+  steps.push(
     {
       ...STEPS.config,
       pointer: replacementAggregator.highlightRange(

src/pages/quickstart/builder/embedded-wallets/nextjs/index.ts

@@ -3,9 +3,9 @@ import { ReplaceFileAggregator } from '../../../utils'
 import getSteps from './steps'
 
 const framework = {
-  build({ filenames, files, steps }) {
+  build({ filenames, files, steps, ...values }) {
     const replacementAggregator = new ReplaceFileAggregator()
-    getSteps(steps, files, replacementAggregator)
+    getSteps(steps, files, replacementAggregator, values)
     filenames.push(qsFileLinks.EW_NEXTJS_LAYOUT_TSX)
     filenames.push(qsFileLinks.EW_NEXTJS_PAGE_TSX)
     filenames.push(qsFileLinks.EW_NEXTJS_COMPONENTS_PROVIDER_TSX)

src/pages/quickstart/builder/embedded-wallets/nextjs/stepContent/index.ts

@@ -4,6 +4,7 @@ import * as logout from '../../react/stepContent/logout.mdx'
 import * as setupWeb3AuthProvider from '../../react/stepContent/setupWeb3AuthProvider.mdx'
 import * as wagmiCalls from '../../react/stepContent/wagmiCalls.mdx'
 import * as registerApp from '../../../../commonSteps/registerApp.mdx'
+import * as walletAggregatorOnly from '../../../../commonSteps/walletAggregatorOnly.mdx'
 import * as installation from '../../react/stepContent/installation.mdx'
 import * as config from '../../react/stepContent/config.mdx'
 import * as setupWagmiProvider from '../../react/stepContent/setupWagmiProvider.mdx'
@@ -15,6 +16,7 @@ const STEPS = toSteps({
   config,
   setupWagmiProvider,
   registerApp,
+  walletAggregatorOnly,
   wagmiCalls,
   login,
   logout,

src/pages/quickstart/builder/embedded-wallets/nextjs/steps.ts

@@ -1,7 +1,8 @@
 import qsFileLinks from '../../../../../utils/qs-file-links.json'
 import STEPS from './stepContent'
+import { YES } from '../../choices'
 
-export default function getSteps(steps, files, replacementAggregator) {
+export default function getSteps(steps, files, replacementAggregator, values = {}) {
   steps.push(
     {
       ...STEPS.nextjsQuickStart,
@@ -26,7 +27,22 @@ export default function getSteps(steps, files, replacementAggregator) {
         files[qsFileLinks.EW_NEXTJS_COMPONENTS_PROVIDER_TSX],
         'Dashboard Registration'
       ),
-    },
+    }
+  )
+
+  // Add wallet aggregator only step if enabled
+  if (values.walletAggregatorOnly === YES) {
+    steps.push({
+      ...STEPS.walletAggregatorOnly,
+      pointer: replacementAggregator.highlightRange(
+        qsFileLinks.EW_NEXTJS_COMPONENTS_PROVIDER_TSX,
+        files[qsFileLinks.EW_NEXTJS_COMPONENTS_PROVIDER_TSX],
+        'Wallet Aggregator Configuration'
+      ),
+    })
+  }
+
+  steps.push(
     {
       ...STEPS.config,
       pointer: replacementAggregator.highlightRange(