Your team is on the Bugbot Free tier. On this plan, Bugbot will review limited PRs each billing cycle for each member of your team.

To receive Bugbot reviews on all of your PRs, visit the Cursor dashboard to activate Pro and start your 14-day free trial.

sdk/qrcode/utils/styles.ts (2)

51-67: getDesktopBorderColor duplicates getBorderColor with a single color difference.

Consider extracting a shared helper parameterized by the verified-state color to avoid maintaining two near-identical switch statements.

♻️ Example consolidation

-const getBorderColor = (step: number): string => {
-  ...
-};
-
-const getDesktopBorderColor = (step: number): string => {
-  ...
-};
+const makeBorderColorFn = (verifiedColor: string) => (step: number): string => {
+  switch (step) {
+    case QRcodeSteps.DISCONNECTED:
+    case QRcodeSteps.WAITING_FOR_MOBILE:
+      return '#E2E8F0';
+    case QRcodeSteps.MOBILE_CONNECTED:
+    case QRcodeSteps.PROOF_GENERATION_STARTED:
+    case QRcodeSteps.PROOF_GENERATED:
+      return '#3B82F6';
+    case QRcodeSteps.PROOF_GENERATION_FAILED:
+      return '#EF4444';
+    case QRcodeSteps.PROOF_VERIFIED:
+      return verifiedColor;
+    default:
+      return '#E2E8F0';
+  }
+};
+
+const getBorderColor = makeBorderColorFn('#01BFFF');
+const getDesktopBorderColor = makeBorderColorFn('#00FFB6');

---

69-245: Parameterless style functions create new object references on every render, defeating React.memo.

Functions like desktopCardStyle(), desktopHeaderStyle(), etc. return fresh objects each call. Since the desktop components are wrapped in memo(), these always-new style objects will cause unnecessary re-renders of children that compare props by reference. Consider exporting them as constants instead of zero-arg functions.

♻️ Example: convert zero-arg style functions to constants

-export const desktopCardStyle = (): React.CSSProperties => ({
+export const desktopCardStyle: React.CSSProperties = {
   display: 'flex',
   flexDirection: 'column',
   alignItems: 'center',
   border: '1px solid `#E2E8F0`',
   borderRadius: '10px',
   backgroundColor: '#FFFFFF',
   overflow: 'hidden',
   width: '373px',
   fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif',
-});
+};

Apply the same pattern to all other zero-arg style functions. This also simplifies call sites (e.g., style={desktopCardStyle} instead of style={desktopCardStyle()}).

sdk/qrcode/components/SelfQRcode.tsx (1)

13-24: Consider documenting which props are ignored in desktop mode.

showBorder and showStatusText have no effect when variant="desktop", which could surprise SDK consumers. A JSDoc comment on the variant prop or on the ignored props noting this would improve the public API clarity.

sdk/qrcode/components/icons.tsx (2)

16-46: Export order doesn't match the project's lint rules.

Static analysis flagged that the named exports aren't in alphabetical order. The linter expects BoltIcon before ReturnIcon, and ReturnIcon before SelfShieldIcon.

♻️ Reorder exports alphabetically

-export const DotsIcon = ({ size = 18 }: IconProps) => (
-  <img src={dotsIcon} alt="" width={size} height={size} style={{ display: 'block' }} />
-);
-
-export const ScanIcon = ({ size = 24 }: IconProps) => (
-  <img src={qrcodeIcon} alt="" width={size} height={size} style={{ display: 'block' }} />
-);
-
-export const SelfShieldIcon = ({ size = 24 }: IconProps) => (
-  <img src={shieldcheckIcon} alt="" width={size} height={size} style={{ display: 'block' }} />
-);
-
-export const ReturnIcon = ({ size = 24 }: IconProps) => (
-  <img src={squarecheckIcon} alt="" width={size} height={size} style={{ display: 'block' }} />
-);
-
-export const BoltIcon = ({ size = 24 }: IconProps) => (
-  <img src={shieldlightningIcon} alt="" width={size} height={size} style={{ display: 'block' }} />
-);
-
-export const CheckIcon = ({ size = 24 }: IconProps) => (
-  <img src={shieldcheck2Icon} alt="" width={size} height={size} style={{ display: 'block' }} />
-);
-
-export const ExclamationIcon = ({ size = 24 }: IconProps) => (
-  <img src={errorIcon} alt="" width={size} height={size} style={{ display: 'block' }} />
-);
-
-export const WarningIcon = ({ size = 24 }: IconProps) => (
-  <img src={warningIcon} alt="" width={size} height={size} style={{ display: 'block' }} />
-);
+export const BoltIcon = ({ size = 24 }: IconProps) => (
+  <img src={shieldlightningIcon} alt="" width={size} height={size} style={{ display: 'block' }} />
+);
+
+export const CheckIcon = ({ size = 24 }: IconProps) => (
+  <img src={shieldcheck2Icon} alt="" width={size} height={size} style={{ display: 'block' }} />
+);
+
+export const DotsIcon = ({ size = 18 }: IconProps) => (
+  <img src={dotsIcon} alt="" width={size} height={size} style={{ display: 'block' }} />
+);
+
+export const ExclamationIcon = ({ size = 24 }: IconProps) => (
+  <img src={errorIcon} alt="" width={size} height={size} style={{ display: 'block' }} />
+);
+
+export const ReturnIcon = ({ size = 24 }: IconProps) => (
+  <img src={squarecheckIcon} alt="" width={size} height={size} style={{ display: 'block' }} />
+);
+
+export const ScanIcon = ({ size = 24 }: IconProps) => (
+  <img src={qrcodeIcon} alt="" width={size} height={size} style={{ display: 'block' }} />
+);
+
+export const SelfShieldIcon = ({ size = 24 }: IconProps) => (
+  <img src={shieldcheckIcon} alt="" width={size} height={size} style={{ display: 'block' }} />
+);
+
+export const WarningIcon = ({ size = 24 }: IconProps) => (
+  <img src={warningIcon} alt="" width={size} height={size} style={{ display: 'block' }} />
+);

---

16-17: Empty alt attributes on icons that convey status meaning.

Using alt="" is correct for purely decorative icons. However, some of these icons (e.g., CheckIcon, ExclamationIcon, WarningIcon) are used in DesktopFooter to convey proof status — they carry semantic meaning. Consider accepting an optional alt prop so consuming components can provide meaningful alternative text for screen readers when the icon isn't purely decorative.

♻️ Accept optional alt prop

 interface IconProps {
   size?: number;
+  alt?: string;
 }

-export const BoltIcon = ({ size = 24 }: IconProps) => (
-  <img src={shieldlightningIcon} alt="" width={size} height={size} style={{ display: 'block' }} />
+export const BoltIcon = ({ size = 24, alt = '' }: IconProps) => (
+  <img src={shieldlightningIcon} alt={alt} width={size} height={size} style={{ display: 'block' }} />
 );

Apply the same pattern to the other icon components.

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro