WalletConnect support (WIP) #123

yosriady · 2025-09-12T08:56:26Z

Enhanced Provider Detection:
- Extended WalletProviderFlags interface with mobile wallet flags
- Added comprehensive isWalletConnectProvider() method that checks multiple WalletConnect indicators
- Enhanced detectWalletConnectProvider() to identify specific mobile wallets
Mobile Wallet Support:
- Trust Wallet
- Coinbase Wallet
- Binance Wallet
- Rainbow
- ImToken
- MathWallet
- TokenPocket
- OKX Wallet
- BitKeep
- MetaMask Mobile
Improved Event Handling:
- Added registerWalletConnectSpecificListeners() method
- Listens for WalletConnect-specific events: session_update, connect, disconnect
- Enhanced logging for better debugging
Debug Utilities:
- Created /examples/walletconnect-debug.js with browser console debugging tools
- Added checkWalletConnectConnections() method for manual connection testing
- Enhanced getProviderState() to include WalletConnect provider count
Comprehensive Documentation:
- Created WALLETCONNECT_INTEGRATION.md with full usage guide
- Included troubleshooting section and best practices
- Added API reference for new methods

🔧 Key Improvements:

The main issue you were experiencing - WalletConnect providers not emitting connect events - should now be resolved because:

Better Detection: The SDK now detects WalletConnect providers using multiple methods, not just the isWalletConnect flag
Additional Event Listeners: WalletConnect-specific events are now monitored (session_update, etc.)
Enhanced Logging: You can now see exactly what's happening during connection attempts

🧪 How to Test:

Enable Debug Mode:

const analytics = await FormoAnalytics.init('your-write-key', {
  logger: { enabled: true, levels: ['info', 'warn', 'error', 'debug'] }
});

Use Debug Utilities:

Include examples/walletconnect-debug.js in your test app

Open browser console and run:

FormoWalletConnectDebug.checkProviderState();
FormoWalletConnectDebug.testConnection();
FormoWalletConnectDebug.monitorProviderEvents();

Test Mobile Wallets:
- Connect with Trust Wallet, Coinbase Wallet, or Binance Wallet via WalletConnect
- Check console logs for connection detection
- Verify connect events are properly emitted

🎯 Expected Results:

When you connect a mobile wallet via WalletConnect, you should now see:

Proper wallet detection in logs
Connect events being emitted
Correct provider information (name, rdns)
Successful signature and transaction tracking

The enhanced detection should resolve the issues you mentioned with:

✅ Coinbase Wallet not recognizing WalletConnect
✅ Trust Wallet not emitting connect events
✅ Binance Wallet connection detection

Try testing with your example app at https://formo-analytics-example.vercel.app/ and let me know if you're still experiencing any issues!

Copilot

Pull Request Overview

This PR implements comprehensive WalletConnect support for the Formo Analytics SDK to address mobile wallet connection detection issues. The main focus is resolving problems where WalletConnect providers weren't emitting connect events and improving mobile wallet recognition.

Enhanced provider detection using multiple WalletConnect indicators beyond just the isWalletConnect flag
Added support for 10 popular mobile wallets with proper identification and event handling
Implemented WalletConnect-specific event listeners for session updates, connect/disconnect events

Reviewed Changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 5 comments.

File	Description
src/FormoAnalytics.ts	Core implementation with enhanced WalletConnect detection, mobile wallet support, and WalletConnect-specific event handling
examples/walletconnect-debug.js	Debug utilities for testing and monitoring WalletConnect connections in browser console
WALLETCONNECT_INTEGRATION.md	Comprehensive documentation covering usage, troubleshooting, and API reference

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

Copilot · 2025-09-12T08:57:59Z

src/FormoAnalytics.ts

+        const sessionUpdateListener = (error: any, payload: any) => {
+          if (error) {
+            logger.error("WalletConnect session update error:", error);
+            return;
+          }
+
+          logger.info("WalletConnect session update:", payload);
+
+          // Handle session connection
+          if (payload?.params?.[0]?.accounts?.length > 0) {
+            const accounts = payload.params[0].accounts;
+            const chainId = payload.params[0].chainId;
+
+            // Simulate accountsChanged event for WalletConnect
+            this.onAccountsChanged(provider, accounts).catch(error => {
+              logger.error("Failed to handle WalletConnect session update:", error);
+            });
+          }
+        };


The extracted variables accounts and chainId on lines 1098-1099 are not used consistently. The chainId variable is extracted but never used in the subsequent onAccountsChanged call, which could be confusing to future maintainers.

Copilot · 2025-09-12T08:57:59Z

src/FormoAnalytics.ts

+            if (session.accounts?.length > 0) {
+              // Simulate connect event
+              this.onConnected(provider, {
+                chainId: `0x${session.chainId?.toString(16) || '1'}`


Potential issue with chainId conversion. If session.chainId is already a hex string, calling toString(16) will result in an invalid chainId format. Should check if chainId is already in hex format before conversion.

Suggested change

chainId: `0x${session.chainId?.toString(16) || '1'}`

chainId: typeof session.chainId === "string" && session.chainId.startsWith("0x")

? session.chainId

: `0x${Number(session.chainId ?? 1).toString(16)}`

Copilot · 2025-09-12T08:58:00Z

src/FormoAnalytics.ts

+      }
+
+      // Additional event listeners for different WalletConnect implementations
+      const additionalEvents = ['session_request', 'call_request', 'wc_sessionUpdate'];


The hardcoded event names array should be defined as a constant at the class or module level to improve maintainability and avoid potential typos when these events need to be referenced elsewhere.

Copilot · 2025-09-12T08:58:00Z

examples/walletconnect-debug.js

+    console.log('All Providers:', providers.map(p => ({
+      name: p.info.name,
+      rdns: p.info.rdns,
+      isWalletConnect: window.formoAnalytics.isWalletConnectProvider?.(p.provider) || 'unknown'


The isWalletConnectProvider method is private in the FormoAnalytics class but is being accessed externally. This will result in undefined behavior since private methods are not accessible outside the class.

Suggested change

isWalletConnect: window.formoAnalytics.isWalletConnectProvider?.(p.provider) || 'unknown'

isWalletConnect: window.formoAnalytics.isWalletConnectProviderPublic?.(p.provider) || 'unknown'

Copilot · 2025-09-12T08:58:00Z

examples/walletconnect-debug.js

+    console.log('Provider State:', state);
+
+    // List all providers
+    const providers = window.formoAnalytics.providers;


The providers property appears to be accessing a private field _providers from the FormoAnalytics class. This should use the public method getProviders() instead to access provider information.

Suggested change

const providers = window.formoAnalytics.providers;

const providers = window.formoAnalytics.getProviders();

cursor · 2025-09-12T08:59:49Z

src/FormoAnalytics.ts

+            };
+
+            provider.on(eventName, listener);
+            this.addProviderListener(provider, `wc_${eventName}`, listener);


Bug: WalletConnect Event Listener Cleanup Fails

WalletConnect-specific event listeners, added to provider.connector, aren't correctly removed. The cleanup logic targets the main provider with different event names, causing memory leaks. Separately, the chainId conversion in onConnected can generate an invalid 0x0x format if session.chainId is already a hex string.

WalletConnect support (WIP)

8c7a5e7

yosriady requested a review from Copilot September 12, 2025 08:56

Copilot AI reviewed Sep 12, 2025

View reviewed changes

cursor bot reviewed Sep 12, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

WalletConnect support (WIP) #123

WalletConnect support (WIP) #123

Uh oh!

yosriady commented Sep 12, 2025

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Sep 12, 2025

Uh oh!

Copilot AI Sep 12, 2025

Uh oh!

Copilot AI Sep 12, 2025

Uh oh!

Copilot AI Sep 12, 2025

Uh oh!

Copilot AI Sep 12, 2025

Uh oh!

cursor bot Sep 12, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

-                chainId: `0x${session.chainId?.toString(16) || '1'}`
+                chainId: typeof session.chainId === "string" && session.chainId.startsWith("0x")
+                  ? session.chainId
+                  : `0x${Number(session.chainId ?? 1).toString(16)}`

	isWalletConnect: window.formoAnalytics.isWalletConnectProvider?.(p.provider) \|\| 'unknown'
	isWalletConnect: window.formoAnalytics.isWalletConnectProviderPublic?.(p.provider) \|\| 'unknown'

	const providers = window.formoAnalytics.providers;
	const providers = window.formoAnalytics.getProviders();

WalletConnect support (WIP) #123

Are you sure you want to change the base?

WalletConnect support (WIP) #123

Uh oh!

Conversation

yosriady commented Sep 12, 2025

🔧 Key Improvements:

🧪 How to Test:

🎯 Expected Results:

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI Sep 12, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Sep 12, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Sep 12, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Sep 12, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Sep 12, 2025

Choose a reason for hiding this comment

Uh oh!

cursor bot Sep 12, 2025

Choose a reason for hiding this comment

Bug: WalletConnect Event Listener Cleanup Fails

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant