chore: round qr code logo borders #497
Conversation
🦋 Changeset detectedLatest commit: b92831d The changes in this PR will be included in the next version bump. This PR includes changesets to release 9 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
Claude finished @ignaciosantise's task —— View job Code Review CompleteCritical Issues1. Missing error handling in QR component - The error catch block silently swallows errors without logging or user feedback: .catch(() => {
if (!cancelled) {
setQrData(null);
}
});Recommendation: Log errors for debugging and consider showing an error state to users: .catch((error) => {
if (!cancelled) {
console.error('QR code generation failed:', error);
setQrData(null);
}
});2. Incomplete memoization dependencies - The memo comparison is missing critical props:
Recommendation: export const QrCode = memo(QrCode_, (prevProps, nextProps) => {
return (
prevProps.size === nextProps.size &&
prevProps.uri === nextProps.uri &&
prevProps.style === nextProps.style &&
prevProps.logoBorderRadius === nextProps.logoBorderRadius &&
prevProps.imageSrc === nextProps.imageSrc &&
prevProps.icon === nextProps.icon &&
prevProps.arenaClear === nextProps.arenaClear &&
prevProps.logoSize === nextProps.logoSize
);
});3. Questionable async implementation - The export async function generateQRDataAsync(...): Promise<QRData> {
return new Promise((resolve, reject) => {
setTimeout(() => {
try {
// synchronous operations
} catch (error) {
reject(error);
}
}, 0);
});
}This doesn't make the QR generation truly async— Recommendation: Either:
4. Missing TypeScript type safety - Multiple uses of optional chaining with const qr = qrList[qrIdx];
if (!qr) continue; // Array access could be undefinedRecommendation: Use proper type assertions or restructure to avoid relying on optional array access. Performance Concerns5. Array pre-allocation with arbitrary sizing - const rects: QRData['rects'] = [];
rects.length = 27; // Fixed size assumptionPre-allocating arrays to specific sizes then trimming later is an optimization that may not be necessary and could introduce bugs if assumptions change. Recommendation: Use standard 6. Missing key extraction optimization - SVG elements use index-based keys ( Type Safety Issues7. Loose error typing - } catch (error) {
reject(error);
}Consider using proper error types or wrapping in a known error class for better type safety. Minor Issues8. Unused import cleanup needed - The 9. Magic numbers - Hard-coded values const LOGO_BORDER_RADIUS = 20;
const LOGO_SIZE = 60;10. Missing changeset The changeset-bot correctly flagged that this PR needs a changeset file. This appears to be a SummaryMust Fix:
Should Fix:
Consider:
|
There was a problem hiding this comment.
Pull Request Overview
This PR refactors the QR code generation logic to improve performance and add configurability. The main objective is to optimize QR code rendering by moving from synchronous to asynchronous generation and implementing data-driven rendering.
Key changes:
- Converted QR code generation from synchronous to asynchronous using
generateQRDataAsync - Introduced data structure (
QRData) to separate QR code calculation from rendering - Added
logoSizeandlogoBorderRadiusprops for customizable QR code appearance - Optimized array operations with pre-allocation and direct indexing strategies
Reviewed Changes
Copilot reviewed 7 out of 7 changed files in this pull request and generated 5 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/ui/src/utils/QRCodeUtil.tsx | Refactored QR generation logic to be async, added QRData interface, optimized with pre-allocation and direct indexing |
| packages/ui/src/composites/wui-qr-code/index.tsx | Updated to use async QR generation with useEffect/useState, added logoSize and logoBorderRadius props, changed rendering to use data arrays |
| packages/ui/src/composites/wui-qr-code/styles.ts | Removed unused icon style |
| packages/ui/src/assets/svg/WalletConnect.tsx | Updated SVG viewBox and paths for new icon design |
| packages/appkit/src/partials/w3m-connecting-qrcode/index.tsx | Added logoBorderRadius and logoSize props to QrCode component |
| packages/appkit/src/modal/w3m-modal/styles.ts | Added borderWidth style property |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| export const QrCode = memo(QrCode_, (prevProps, nextProps) => { | ||
| return ( | ||
| prevProps.size === nextProps.size && | ||
| prevProps.uri === nextProps.uri && | ||
| prevProps.style === nextProps.style | ||
| prevProps.style === nextProps.style && | ||
| prevProps.logoBorderRadius === nextProps.logoBorderRadius | ||
| ); | ||
| }); |
There was a problem hiding this comment.
The memo comparison function is missing checks for logoSize, imageSrc, icon, arenaClear, and testID props. This will cause the component to incorrectly skip re-renders when these props change, leading to stale UI. Either add all props to the comparison or remove the custom comparison function to use the default shallow comparison.
This comment was marked as outdated.
This comment was marked as outdated.
Sorry, something went wrong.
|
@claude review |
|
Claude finished @ignaciosantise's task —— View job 🔄 Incremental PR ReviewTasks
Issues Status Analysis✅ Resolved Since Previous Reviews1. Async implementation with setTimeout -
2. Array pre-allocation with incorrect sizing -
3. Changeset file missing
4. Magic numbers in consumer component -
|
|
This pull request primarily improves the flexibility and rendering of the QR code component, especially regarding logo customization and QR code generation. The changes introduce asynchronous QR code generation, allow for custom logo size and border radius, and enhance the rendering logic for better visual quality and performance.
QR Code Component Improvements
logoSizeandlogoBorderRadiusprops in theQrCodecomponent, allowing more control over the QR code's embedded logo appearance. [1] [2]QRCodeUtil.generateAsyncmethod, improving responsiveness and reliability.rect,circle, andlineSVG primitives based on structured QR data, replacing the previous approach and enabling more precise and customizable QR visuals.Component and Style Adjustments
logoBorderRadiusprop, preventing unnecessary re-renders.Consumer Updates
ConnectingQrCodecomponent to pass the newlogoBorderRadiusandlogoSizeprops to theQrCodecomponent, ensuring consistent appearance.Other Minor Changes
Note
Make QR code logo size/border radius configurable and switch to structured SVG rendering, update consumer and WalletConnect icon, and set modal card borderWidth to 0.
logoSizeandlogoBorderRadiusprops toQrCodeand render centered logo/image accordingly inpackages/ui/src/composites/wui-qr-code/index.tsx.rects,circles,lines).logoBorderRadius.packages/ui/src/utils/QRCodeUtil.tsx):QRCodeUtil.generate(uri, size, logoSize, logoBorderRadius).logoSizeandlogoBorderRadiusfromConnectingQrCodetoQrCodeinpackages/appkit/src/partials/w3m-connecting-qrcode/index.tsx.WalletConnectSVG paths andviewBoxinpackages/ui/src/assets/svg/WalletConnect.tsx.borderWidth: 0on modalcardinpackages/appkit/src/modal/w3m-modal/styles.ts.Written by Cursor Bugbot for commit b92831d. This will update automatically on new commits. Configure here.