feat(pay): add WebView for hosted collect data form #367
Conversation
- Add CollectDataWebView component for WalletConnect Pay hosted form - Use fullscreen WebView when collectData.url is available - Handle IC_COMPLETE/IC_ERROR postMessage events from WebView - X button in WebView navigates to confirm step (not closes modal) - Add proper cleanup with isMountedRef to prevent memory leaks - Add react-native-webview dependency
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Claude finished @ganchoradkov's task in 1m 7s —— View job Code ReviewFound 3 issue(s)Issue 1: WebView security - missing origin whitelistID: collectdatawebview-origin-whitelist-a4f2 Context:
Recommendation: Add origin whitelist to restrict allowed domains: <WebView
ref={webViewRef}
source={{ uri: url }}
originWhitelist={['https://pay.walletconnect.com', 'https://pay.reown.com']}
// ... rest of props
/>Issue 2: postMessage validation insufficientID: collectdatawebview-message-validation-7bc3 Context:
Recommendation: Validate message origin before processing: const handleMessage = useCallback((event: { nativeEvent: { data: string; url: string } }) => {
if (!isMountedRef.current) return;
const messageOrigin = new URL(event.nativeEvent.url).origin;
const allowedOrigins = ['https://pay.walletconnect.com', 'https://pay.reown.com'];
if (!allowedOrigins.includes(messageOrigin)) {
LogStore.warn('Blocked postMessage from untrusted origin', 'CollectDataWebView', 'handleMessage', { origin: messageOrigin });
return;
}
// ... rest of handler
}, [onComplete, onError]);Issue 3: Type safety - unsafe type castingID: index-collectdata-type-cast-9e1a Context:
Recommendation: Extend type properly or add runtime check: // Option 1: Type extension (preferred)
interface CollectDataWithUrl extends CollectData {
url?: string;
}
const collectDataUrl = (paymentData?.collectData as CollectDataWithUrl | undefined)?.url;
// Option 2: Add comment explaining temporary nature
const collectDataUrl = (
// TEMP: url not yet in @walletconnect/pay types v1.x
paymentData?.collectData as { url?: string } | undefined
)?.url;SummaryFunctional implementation with good error handling and UX flow. Critical security concern: WebView lacks origin restrictions allowing arbitrary URLs. Add |
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
| </Text> | ||
| </View> | ||
| )} | ||
| <WebView |
There was a problem hiding this comment.
🤖 Auto Review Issue: WebView security - missing origin whitelist
Severity: HIGH
Category: security
Tool: Claude Auto Review
Context:
- Pattern: WebView accepts any URL without origin validation or whitelist
- Risk: Malicious URL in
collectData.urlcould load arbitrary external content - Impact: Phishing attacks, credential theft, or malicious script execution in payment flow
- Trigger: If API response is compromised or MITM attack modifies
collectData.url
Recommendation: Add origin whitelist to restrict allowed domains:
<WebView
ref={webViewRef}
source={{ uri: url }}
originWhitelist={['https://pay.walletconnect.com', 'https://pay.reown.com']}
// ... rest of props
/>| [onError], | ||
| ); | ||
|
|
||
| const handleMessage = useCallback( |
There was a problem hiding this comment.
🤖 Auto Review Issue: postMessage validation insufficient
Severity: MEDIUM
Category: security
Tool: Claude Auto Review
Context:
- Pattern:
handleMessageonly validates message structure, not origin - Risk: Any script in WebView can send IC_COMPLETE/IC_ERROR messages
- Impact: Malicious scripts could bypass form completion, trigger false errors
- Trigger: XSS in hosted form or compromised CDN serving form assets
Recommendation: Validate message origin before processing:
const handleMessage = useCallback((event: { nativeEvent: { data: string; url: string } }) => {
if (!isMountedRef.current) return;
const messageOrigin = new URL(event.nativeEvent.url).origin;
const allowedOrigins = ['https://pay.walletconnect.com', 'https://pay.reown.com'];
if (!allowedOrigins.includes(messageOrigin)) {
LogStore.warn('Blocked postMessage from untrusted origin', 'CollectDataWebView', 'handleMessage', { origin: messageOrigin });
return;
}
// ... rest of handler
}, [onComplete, onError]);| const hasCollectData = | ||
| paymentData?.collectData && paymentData.collectData.fields.length > 0; | ||
| // The `url` property is a new addition to the API - cast to access it | ||
| const collectDataUrl = ( |
There was a problem hiding this comment.
🤖 Auto Review Issue: Type safety - unsafe type casting
Severity: LOW
Category: code_quality
Tool: Claude Auto Review
Context:
- Pattern: Type cast to access undocumented
urlproperty:(paymentData?.collectData as { url?: string } | undefined)?.url - Risk: Runtime errors if API shape changes, no compile-time safety
- Impact: Silent failures, hard-to-debug issues when property added to types
- Trigger: When
@walletconnect/paypackage addsurlto CollectData type
Recommendation: Extend type properly or add runtime check:
// Option 1: Type extension (preferred)
interface CollectDataWithUrl extends CollectData {
url?: string;
}
const collectDataUrl = (paymentData?.collectData as CollectDataWithUrl | undefined)?.url;
// Option 2: Add comment explaining temporary nature
const collectDataUrl = (
// TEMP: url not yet in @walletconnect/pay types v1.x
paymentData?.collectData as { url?: string } | undefined
)?.url;Summary
Functional implementation with good error handling and UX flow. Critical security concern: WebView lacks origin restrictions allowing arbitrary URLs. Add originWhitelist and message origin validation before merging.
Summary
CollectDataWebViewcomponent that displays WalletConnect Pay's hosted form in a fullscreen WebViewcollectData.urlis present in payment options, use WebView instead of native formIC_COMPLETE/IC_ERRORpostMessage events from the WebViewChanges
flowchart TD A[Payment Link Received] --> B[Show Intro] B --> C{collectData.url exists?} C -->|Yes| D[Open WebView - Fullscreen] C -->|No| E[Show Native Form] D --> F{IC_COMPLETE message?} F -->|Yes| G[Move to Confirm Step] F -->|No - X pressed| G E --> G G --> H[Select Payment Option] H --> I[Sign & Confirm Payment]Test Plan