fix(connect-react): improve extension detection with polling and prop… (#1)

* fix(connect-react): improve extension detection with polling and proper cleanup

Enhance the KleverProvider extension detection to handle cases where
window.kleverWeb is injected with a delay by browser extensions.

Changes:
- Add exponential backoff polling (50ms to 1000ms, up to 10 attempts)
- Implement proper cleanup with cancellation flag to prevent race conditions
- Add detailed debug logging for extension detection attempts
- Stop polling immediately when extension is detected
- Handle StrictMode double-mounting correctly with cleanup function

This ensures reliable extension detection in both fast and slow injection
scenarios while maintaining proper React lifecycle management.

Related: KLC-1882

* fix(ci): add pull-requests write permission to size-check workflow

The workflow needs explicit permission to comment on pull requests.
Without this, it fails with 'Resource not accessible by integration' error.

* fix(ci): save bundle size report to file for PR comment

The GITHUB_STEP_SUMMARY is not accessible between steps, so we now:
- Write the report to both GITHUB_STEP_SUMMARY and a temporary file
- Read from the file in the PR comment step
- Add fallback message if report file is empty or missing

* fix(connect-react): use ref for debug flag to satisfy React hooks rules

The useEffect for extension detection was using config?.debug without
including it in the dependency array, violating React's Rules of Hooks.

Solution: Store debug flag in a ref that updates separately, allowing:
- Access to latest debug value for logging
- No re-runs of extension detection when debug changes
- Proper React hooks compliance

This prevents ESLint warnings and potential issues in strict mode.

Author: fbsobreira

.changeset/fix-extension-detection.md

@@ -0,0 +1,11 @@
+---
+'@klever/connect-react': patch
+---
+
+Improve extension detection with polling and proper cleanup
+
+- Add exponential backoff polling (50ms to 1000ms, up to 10 attempts) to handle delayed window.kleverWeb injection
+- Implement proper cleanup with cancellation flag to prevent race conditions
+- Add detailed debug logging for extension detection attempts
+- Stop polling immediately when extension is detected
+- Handle React StrictMode double-mounting correctly with cleanup function

.github/workflows/size-check.yml

@@ -4,6 +4,10 @@ on:
   pull_request:
     branches: [master, develop]
 
+permissions:
+  contents: read
+  pull-requests: write
+
 jobs:
   size:
     runs-on: ubuntu-latest
@@ -30,11 +34,12 @@ jobs:
         run: pnpm build
 
       - name: Check bundle sizes
+        id: size-check
         run: |
-          echo "## Bundle Size Report" >> $GITHUB_STEP_SUMMARY
-          echo "" >> $GITHUB_STEP_SUMMARY
-          echo "| Package | Size | Gzipped |" >> $GITHUB_STEP_SUMMARY
-          echo "|---------|------|---------|" >> $GITHUB_STEP_SUMMARY
+          # Create report
+          REPORT="## 📦 Bundle Size Report\n\n"
+          REPORT+="| Package | Size | Gzipped |\n"
+          REPORT+="|---------|------|---------|"
 
           for pkg in packages/*/dist/index.js; do
             if [ -f "$pkg" ]; then
@@ -43,21 +48,37 @@ jobs:
               gzip_size=$(gzip -c "$pkg" | wc -c)
               size_kb=$((size / 1024))
               gzip_kb=$((gzip_size / 1024))
-              echo "| $name | ${size_kb}KB | ${gzip_kb}KB |" >> $GITHUB_STEP_SUMMARY
+              REPORT+="\n| $name | ${size_kb}KB | ${gzip_kb}KB |"
             fi
           done
 
+          # Save to step summary
+          echo -e "$REPORT" >> $GITHUB_STEP_SUMMARY
+
+          # Save to output file for PR comment
+          echo -e "$REPORT" > size-report.txt
+
       - name: Comment PR
         uses: actions/github-script@v7
         if: github.event_name == 'pull_request'
         with:
           script: |
             const fs = require('fs');
-            const summary = fs.readFileSync(process.env.GITHUB_STEP_SUMMARY, 'utf8');
+            let body = '';
+
+            try {
+              body = fs.readFileSync('size-report.txt', 'utf8');
+            } catch (error) {
+              body = '## 📦 Bundle Size Report\n\nNo bundle files found to analyze.';
+            }
+
+            if (!body || body.trim() === '') {
+              body = '## 📦 Bundle Size Report\n\nNo bundle files found to analyze.';
+            }
 
             github.rest.issues.createComment({
               issue_number: context.issue.number,
               owner: context.repo.owner,
               repo: context.repo.repo,
-              body: summary
+              body: body
             });

packages/connect-react/src/context.tsx

@@ -246,25 +246,80 @@ export function KleverProvider({ children, config }: KleverProviderProps): React
     [state.wallet, state.currentNetwork, state.address, createProviderWithNetwork],
   )
 
-  // Check for extension on mount
-  React.useEffect((): void => {
-    const checkExtension = async (): Promise<void> => {
-      dispatch({ type: 'SET_SEARCHING_EXTENSION', searching: true })
+  // Store debug flag in ref to avoid re-running effect when it changes
+  const debugRef = React.useRef(config?.debug ?? false)
+  React.useEffect(() => {
+    debugRef.current = config?.debug ?? false
+  }, [config?.debug])
+
+  // Check for extension on mount with polling
+  // Note: Empty dependency array intentional - should only run once on mount
+  // Uses debugRef.current to access latest debug value without triggering re-runs
+  React.useEffect((): (() => void) => {
+    let attempts = 0
+    const MAX_ATTEMPTS = 10
+    const INITIAL_DELAY = 50 // Start with 50ms
+    const MAX_DELAY = 1000 // Cap at 1 second
+    let timeoutId: NodeJS.Timeout | null = null
+    let cancelled = false
+
+    const checkExtension = (): void => {
+      if (cancelled) return
 
       try {
         // Check if window.kleverWeb exists (Klever extension)
         const hasExtension =
           typeof window !== 'undefined' && 'kleverWeb' in window && window.kleverWeb !== undefined
 
-        dispatch({ type: 'SET_EXTENSION_INSTALLED', installed: hasExtension })
-      } catch {
+        if (debugRef.current) {
+          console.log(
+            `[KleverProvider] Extension check attempt ${attempts + 1}/${MAX_ATTEMPTS}:`,
+            hasExtension,
+          )
+        }
+
+        if (hasExtension) {
+          // Extension found - stop searching
+          dispatch({ type: 'SET_EXTENSION_INSTALLED', installed: true })
+          dispatch({ type: 'SET_SEARCHING_EXTENSION', searching: false })
+        } else if (attempts < MAX_ATTEMPTS) {
+          // Extension not found yet - schedule next check with exponential backoff
+          attempts++
+          const delay = Math.min(INITIAL_DELAY * Math.pow(1.5, attempts - 1), MAX_DELAY)
+
+          timeoutId = setTimeout(() => {
+            checkExtension()
+          }, delay)
+        } else {
+          // Max attempts reached - extension not found
+          if (debugRef.current) {
+            console.log('[KleverProvider] Extension not detected after max attempts')
+          }
+          dispatch({ type: 'SET_EXTENSION_INSTALLED', installed: false })
+          dispatch({ type: 'SET_SEARCHING_EXTENSION', searching: false })
+        }
+      } catch (error) {
+        if (debugRef.current) {
+          console.error('[KleverProvider] Extension check error:', error)
+        }
         dispatch({ type: 'SET_EXTENSION_INSTALLED', installed: false })
-      } finally {
         dispatch({ type: 'SET_SEARCHING_EXTENSION', searching: false })
       }
     }
 
-    void checkExtension()
+    // Start searching
+    dispatch({ type: 'SET_SEARCHING_EXTENSION', searching: true })
+
+    // Start checking immediately
+    checkExtension()
+
+    // Cleanup function to cancel pending timeouts
+    return () => {
+      cancelled = true
+      if (timeoutId !== null) {
+        clearTimeout(timeoutId)
+      }
+    }
   }, [])
 
   // Auto-connect on mount if configured