Update react qs

yashovardhan · yashovardhan · commit 82156d19d40a · 2025-08-06T17:57:19.000+04:00
diff --git a/src/pages/quickstart/MediaStep/index.tsx b/src/pages/quickstart/MediaStep/index.tsx
@@ -10,10 +10,9 @@ interface MediaStepProps {
 }
 
 const MediaStep: React.FC<MediaStepProps> = ({ step, className, isVisible = true }) => {
-  const [isLoading, setIsLoading] = useState(false); // Start with false for lazy loading
+  const [isLoading, setIsLoading] = useState(true); // Start loading immediately
   const [hasError, setHasError] = useState(false);
   const [isPlaying, setIsPlaying] = useState(false);
-  const [shouldLoad, setShouldLoad] = useState(false);
   const videoRef = useRef<HTMLVideoElement>(null);
   const imageRef = useRef<HTMLImageElement>(null);
 
@@ -47,42 +46,18 @@ const MediaStep: React.FC<MediaStepProps> = ({ step, className, isVisible = true
     setIsPlaying(false);
   }, []);
 
-  const startLoading = useCallback(() => {
-    if (!shouldLoad) {
-      setShouldLoad(true);
-      setIsLoading(true);
-      setHasError(false);
-      setIsPlaying(false);
-    }
-  }, [shouldLoad]);
 
-  // Lazy loading effect - only load when visible
-  useEffect(() => {
-    if (isVisible && !shouldLoad) {
-      // Auto-load YouTube videos (they're lightweight), but require manual loading for local videos
-      if (type === 'youtube') {
-        const timer = setTimeout(() => {
-          startLoading();
-        }, 200); // Small delay for YouTube
-        return () => clearTimeout(timer);
-      }
-      // Local videos and images still require manual loading
-    }
-  }, [isVisible, shouldLoad, startLoading, type]);
+
+
 
   // Reset when URL changes
   useEffect(() => {
-    setShouldLoad(false);
-    setIsLoading(false);
+    setIsLoading(true);
     setHasError(false);
     setIsPlaying(false);
   }, [url]);
 
   const renderMedia = () => {
-    // Don't render media until shouldLoad is true
-    if (!shouldLoad) {
-      return null;
-    }
 
     if (type === 'youtube') {
       const youtubeUrl = `https://www.youtube.com/embed/${youtubeId}?rel=0&modestbranding=1&showinfo=0${autoplay ? '&autoplay=1' : ''}${muted ? '&mute=1' : ''}`;
@@ -91,7 +66,7 @@ const MediaStep: React.FC<MediaStepProps> = ({ step, className, isVisible = true
         <iframe
           className={styles.youtubePlayer}
           src={youtubeUrl}
-          title={step.title}
+          title={`${type === 'youtube' ? 'YouTube video' : 'Video'} - ${caption || 'Media content'}`}
           frameBorder="0"
           allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
           allowFullScreen
@@ -108,12 +83,12 @@ const MediaStep: React.FC<MediaStepProps> = ({ step, className, isVisible = true
           className={styles.videoPlayer}
           src={url}
           poster={poster}
-          autoPlay={autoplay && isVisible} // Only autoplay if visible
+          autoPlay={autoplay}
           loop={loop}
           muted={muted}
           controls
           playsInline
-          preload="none" // Prevent preloading for performance
+          preload="metadata" // Load metadata immediately
           onLoadedData={handleLoad}
           onError={handleError}
           onPlay={handlePlay}
@@ -130,8 +105,8 @@ const MediaStep: React.FC<MediaStepProps> = ({ step, className, isVisible = true
           ref={imageRef}
           className={styles.imageDisplay}
           src={url}
-          alt={alt || step.title}
-          loading="lazy" // Native lazy loading
+          alt={alt || 'Image content'}
+          loading="eager" // Load immediately
           onLoad={handleLoad}
           onError={handleError}
         />
@@ -143,21 +118,7 @@ const MediaStep: React.FC<MediaStepProps> = ({ step, className, isVisible = true
 
   return (
     <div className={classNames(styles.mediaContainer, className)}>
-      {/* Placeholder State - before loading */}
-      {!shouldLoad && (
-        <div className={styles.mediaPlaceholder}>
-          <div className={styles.placeholderIcon}>
-            {type === 'youtube' ? '▶️' : type === 'video' ? '🎬' : '🖼️'}
-          </div>
-          <p>Click to load {type === 'youtube' ? 'YouTube video' : type}</p>
-          <button
-            className={styles.loadButton}
-            onClick={startLoading}
-          >
-            Load {type === 'youtube' ? 'YouTube Video' : type}
-          </button>
-        </div>
-      )}
+
 
       {/* Loading State */}
       {isLoading && !hasError && (
@@ -175,9 +136,8 @@ const MediaStep: React.FC<MediaStepProps> = ({ step, className, isVisible = true
           <button
             className={styles.retryButton}
             onClick={() => {
-              setShouldLoad(false);
-              // Reset and try again
-              setTimeout(() => startLoading(), 100);
+              setIsLoading(true);
+              setHasError(false);
             }}
           >
             Retry
@@ -188,21 +148,21 @@ const MediaStep: React.FC<MediaStepProps> = ({ step, className, isVisible = true
       {/* Media Content */}
       <div
         className={classNames(styles.mediaContent, {
-          [styles.hidden]: isLoading || hasError || !shouldLoad,
+          [styles.hidden]: isLoading || hasError,
           [styles.playing]: isPlaying
         })}
       >
         {renderMedia()}
 
         {/* Caption */}
-        {caption && shouldLoad && (
+        {caption && !isLoading && !hasError && (
           <div className={styles.mediaCaption}>
             <p>{caption}</p>
           </div>
         )}
 
         {/* Video Play Status Indicator */}
-        {type === 'video' && shouldLoad && (
+        {type === 'video' && !isLoading && !hasError && (
           <div className={classNames(styles.playStatus, {
             [styles.visible]: isPlaying
           })}>
diff --git a/src/pages/quickstart/builder/embedded-wallets/react/stepContent/installation.mdx b/src/pages/quickstart/builder/embedded-wallets/react/stepContent/installation.mdx
@@ -2,7 +2,7 @@
 
 Install the Web3Auth package in your project.
 
-> Additionally, for blockchain calls, we're using `wagmi` and its dependency, `@tanstack/react-query` for this example.
+Additionally, for blockchain calls, we're using `wagmi` for this example.
 
 ```bash npm2yarn
 npm install --save @web3auth/modal wagmi @tanstack/react-query
diff --git a/src/pages/quickstart/builder/embedded-wallets/react/stepContent/reactBundlerIssues.mdx b/src/pages/quickstart/builder/embedded-wallets/react/stepContent/reactBundlerIssues.mdx
@@ -1,5 +1,11 @@
-### Fixing Bundler Issues
+### Troubleshooting
 
 While using any web3 library in React, you may run into issues building. This issue occurs because some core packages like `eccrypto` have certain dependencies which are not present within the browser build environment.
 
 > To solve this, please have a look at our troubleshooting pages about [Vite Issues](/troubleshooting/vite-issues)
+
+:::info
+
+If you face any problem anytime, you can always find help in the [**Web3Auth Community**](https://web3auth.io/community/c/help-pnp/pnp-web/7).
+
+:::
diff --git a/src/pages/quickstart/builder/embedded-wallets/react/stepContent/reactQuickStart.mdx b/src/pages/quickstart/builder/embedded-wallets/react/stepContent/reactQuickStart.mdx
@@ -1,15 +1,9 @@
-### Embedded Wallets React Quick Start
+### Web3Auth Embedded Wallets Quick Start
 
-Enable social login and wallet login in your React app using Web3Auth.
+Add social login and wallet connection functionality to your React app.
 
-Clone the React Quick Start Application
+Clone the Quick Start in your terminal.
 
-```shell
+```bash
 npx degit Web3Auth/web3auth-examples/quick-starts/react-quick-start w3a-quick-start
 ```
-
-:::info
-
-If you face any problem anytime, you can always find help in the [**Web3Auth Community**](https://web3auth.io/community/c/help-pnp/pnp-web/7).
-
-:::
diff --git a/src/pages/quickstart/builder/embedded-wallets/react/steps.ts b/src/pages/quickstart/builder/embedded-wallets/react/steps.ts
@@ -19,14 +19,6 @@ export default function getSteps(steps, files, replacementAggregator) {
         'Web3Auth Installation'
       ),
     },
-    {
-      ...STEPS.reactBundlerIssues,
-      pointer: replacementAggregator.highlightRange(
-        IBfileLinks.EW_REACT_INDEX_HTML,
-        files[IBfileLinks.EW_REACT_INDEX_HTML],
-        'Bundler Issues'
-      ),
-    },
     {
       ...STEPS.registerApp,
       pointer: replacementAggregator.highlightRange(
@@ -82,6 +74,14 @@ export default function getSteps(steps, files, replacementAggregator) {
         files[IBfileLinks.EW_REACT_APP_TSX],
         'Logout'
       ),
+    },
+    {
+      ...STEPS.reactBundlerIssues,
+      pointer: replacementAggregator.highlightRange(
+        IBfileLinks.EW_REACT_INDEX_HTML,
+        files[IBfileLinks.EW_REACT_INDEX_HTML],
+        'Bundler Issues'
+      ),
     }
   )
 }
diff --git a/src/pages/quickstart/commonSteps/registerApp.mdx b/src/pages/quickstart/commonSteps/registerApp.mdx
@@ -1,6 +1,11 @@
-### Get your Client ID from the Web3Auth Dashboard
+---
+contentType: 'hybrid'
+mediaContent:
+  type: 'image'
+  url: '/img/web3auth-dashboard/web3auth-client-id.png'
+---
 
-import DashboardImage from '@site/static/img/web3auth-dashboard/project-details.png'
+### Get your Client ID from the Web3Auth Dashboard
 
 Visit the Web3Auth Dashboard and create a new project. Use the Client ID of the project to start your integration.
 
diff --git a/src/pages/quickstart/index.tsx b/src/pages/quickstart/index.tsx
@@ -227,6 +227,7 @@ export default function IntegrationBuilderPage(props: any) {
     return result;
   }, [builderOptions, files, stepIndex, showNavigationOverlay]);
   const [selectedFilename, setSelectedFilename] = useState(integration.filenames[0] || "");
+  const [activeTab, setActiveTab] = useState<'media' | 'code'>('media');
 
   const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
   const ref = useRef(null);
@@ -242,6 +243,13 @@ export default function IntegrationBuilderPage(props: any) {
 
   const { steps } = integration;
 
+  // Reset to media tab when step changes for hybrid content
+  useEffect(() => {
+    if (steps[stepIndex]?.contentType === 'hybrid') {
+      setActiveTab('media');
+    }
+  }, [stepIndex, steps]);
+
   // Navigation handlers with smooth scrolling to exact top
   const scrollToStep = useCallback((stepElementId: string) => {
     const stepsContainer = document.getElementById('steps-container');
@@ -778,26 +786,50 @@ export default function IntegrationBuilderPage(props: any) {
                 isVisible={true} // Always visible when it's the active step
               />
             ) : steps[stepIndex]?.contentType === 'hybrid' ? (
-              <div className={styles.hybridContainer}>
-                <div className={styles.hybridMediaSection}>
-                  <MediaStep
-                    step={steps[stepIndex]}
-                    className={styles.hybridMediaStep}
-                    isVisible={true} // Always visible when it's the active step
-                  />
+              <div className={styles.hybridTabContainer}>
+                {/* Tab Navigation */}
+                <div className={styles.tabNavigation}>
+                  <button
+                    className={classNames(styles.tabButton, {
+                      [styles.tabButtonActive]: activeTab === 'media'
+                    })}
+                    onClick={() => setActiveTab('media')}
+                  >
+                    Media
+                  </button>
+                  <button
+                    className={classNames(styles.tabButton, {
+                      [styles.tabButtonActive]: activeTab === 'code'
+                    })}
+                    onClick={() => setActiveTab('code')}
+                  >
+                    Code
+                  </button>
                 </div>
-                <div className={styles.hybridCodeSection}>
-                  <IntegrationBuilderCodeView
-                    filenames={integration.filenames}
-                    fileContents={integration.files}
-                    highlight={
-                      steps[stepIndex]?.pointer?.filename === selectedFilename
-                        ? steps[stepIndex]?.pointer?.range
-                        : undefined
-                    }
-                    selectedFilename={selectedFilename}
-                    onClickFilename={(filename: string) => setSelectedFilename(filename)}
-                  />
+
+                {/* Tab Content */}
+                <div className={styles.tabContent}>
+                  {activeTab === 'media' ? (
+                    <MediaStep
+                      step={steps[stepIndex]}
+                      className={styles.hybridMediaStep}
+                      isVisible={true} // Always visible when it's the active step
+                    />
+                  ) : (
+                    <div className={styles.hybridCodeView}>
+                      <IntegrationBuilderCodeView
+                        filenames={integration.filenames}
+                        fileContents={integration.files}
+                        highlight={
+                          steps[stepIndex]?.pointer?.filename === selectedFilename
+                            ? steps[stepIndex]?.pointer?.range
+                            : undefined
+                        }
+                        selectedFilename={selectedFilename}
+                        onClickFilename={(filename: string) => setSelectedFilename(filename)}
+                      />
+                    </div>
+                  )}
                 </div>
               </div>
             ) : (
diff --git a/src/pages/quickstart/interfaces.ts b/src/pages/quickstart/interfaces.ts
@@ -1,6 +1,7 @@
 import { ReactNode } from 'react'
 
 export interface IntegrationStep {
+  title?: string // Optional title for the step
   content?: ReactNode // Make optional for media-only steps
   contentType?: 'text' | 'media' | 'hybrid' // Default: 'text'
   mediaContent?: {
diff --git a/src/pages/quickstart/styles.module.css b/src/pages/quickstart/styles.module.css
diff --git a/static/img/web3auth-dashboard/web3auth-client-id.png b/static/img/web3auth-dashboard/web3auth-client-id.png
