Skip to content

chore: sync develop to main#52

Merged
RishabhS7 merged 3 commits into
mainfrom
develop
Apr 29, 2026
Merged

chore: sync develop to main#52
RishabhS7 merged 3 commits into
mainfrom
develop

Conversation

@rongquan1

@rongquan1 rongquan1 commented Apr 29, 2026

Copy link
Copy Markdown
Contributor

Summary by CodeRabbit

Release Notes

  • New Features

    • Error messages from contract operations are now displayed directly in forms and confirmation overlays for better user feedback.
  • Improvements

    • Enhanced styling and layout consistency across the app, including typography, spacing, and link rendering in articles.
    • Gallery link now opens in a new tab for improved browsing experience.
  • Bug Fixes

    • Updated documentation link to current endpoint.

RishabhS7 and others added 3 commits April 28, 2026 14:18
* fix: merge conflicts

* fix: remove consoles
* fix: stabilize dropdown and news text styling

Prevent global button/text styles from breaking Contact enquiry dropdown visuals and News article link readability, while aligning news sub-body text to the left for consistent content presentation across states.

Made-with: Cursor

* feat: enhance styling for news articles and select field components
* fix: metamask traction error messages

* fix: test cases

* fix: update links and improve code formatting

---------
@coderabbitai

coderabbitai Bot commented Apr 29, 2026

Copy link
Copy Markdown
Contributor
📝 Walkthrough

Walkthrough

This PR introduces error message propagation throughout the asset management flow by threading an errorMessage prop from TokenInformationContext through AssetManagementForm and ActionForm to display errors in overlays. It updates useContractFunctionHook to return errorMessage instead of Error objects, modifies provider initialization to use environment-configured RPC URLs, adjusts transfer rejection eligibility logic, adds a TextButton component, and includes various UI styling refinements and test coverage.

Changes

Cohort / File(s) Summary
Error Message Propagation
src/components/AssetManagementPanel/AssetManagementApplication/index.tsx, src/components/AssetManagementPanel/AssetManagementForm/AssetManagementForm.tsx, src/components/AssetManagementPanel/AssetManagementForm/FormVariants/ActionForm/types.ts, src/components/AssetManagementPanel/AssetManagementForm/FormVariants/ActionForm/ActionForm.tsx
Threads optional errorMessage prop from AssetManagementApplication through AssetManagementForm and ActionForm to display in overlays; updates type definitions to include errorMessage?: string.
Context & Hook Updates
src/components/common/contexts/TokenInformationContext/TokenInformationContext.tsx, src/hooks/useContractFunctionHook.tsx, src/hooks/useContractFunctionHook.test.tsx
Consolidates error messages from contract hooks into TokenInformationContext; refactors useContractFunctionHook to return errorMessage: string instead of error: Error, with mapping of MetaMask and ethers error codes to human-readable messages; adds comprehensive test coverage for error code mapping.
Overlay Message Handling
src/components/common/Overlay/OverlayContent/DocumentTransferMessage.tsx, src/components/common/Overlay/OverlayContent/DocumentTransferMessage.test.tsx
Adds optional errorMessage prop to DocumentTransferMessage and showDocumentTransferMessage; when provided, displays errorMessage instead of children; includes full test suite verifying error rendering and overlay integration.
Provider & Configuration
src/components/common/contexts/providerContext.tsx, src/main.tsx
Changes provider creation to use environment-configured RPC URLs via getRpcUrl() and direct ethers.JsonRpcProvider instead of TrustVC provider; switches NETWORK_NAME import source; implements lazy initialization for getCurrentProvider.
Transfer Rejection Logic
src/components/AssetManagementPanel/AssetManagementForm/AssetManagementForm.test.tsx
Updates tests to verify canRejectHolderTransfer is false when holder equals beneficiary and true when they differ under token-registry-v5; removes previous "after holder transfer context" test scenario.
UI Components
src/components/common/Button/Button.tsx, src/components/home/VerifySection/VerifyResult.tsx
Introduces new TextButton component for styled text-only buttons; updates VerifyResult to use TextButton for "View Endorsement Chain" control.
Form & Selection UI
src/components/common/SelectField/SelectField.tsx, src/components/AssetManagementPanel/AssetManagementForm/FormVariants/ActionSelectionForm/ActionSelectionForm.tsx
Centralizes SelectField styling via clsx-computed classes with dark/light/error/selected modifiers; refactors ActionSelectionForm footer layout, moving ETR status tags to dedicated tag-frame and adjusting dropdown sizing.
Styling & Layout
src/components/common/Tag/Tag.tsx, src/components/common/Navbar/Navbar.tsx, src/pages/Home/index.tsx, src/pages/News/components/NewsArticlesContent.tsx, src/pages/NewsDetail/components/NewsDetailBody.tsx, src/index.css
Removes hardcoded inline-block and py-1 px-2 from Tag; updates Navbar Settings label typography; adjusts Home page container layout; adds text-left to news excerpts; updates CSS for .vr-nft-link, .vr-footer, .tag-frame, and adds SelectField class modifiers; fixes invalid media query syntax.
Verification & Gallery
src/components/home/VerifySection/VerifySection.tsx, src/components/home/VerifySection/VerifySection.test.tsx, src/components/home/VerifySection/VerifyError.tsx
Removes React Router navigation; opens external TradeTrust document gallery in new tab with noopener,noreferrer; updates spinner styling; changes external link URL from docs.trustvc.io to docs.tradetrust.io; adds test coverage for window.open invocation.
Minor Spinner Updates
src/components/home/EndorsementChain/EndorsementChain.tsx, src/components/home/VerifySection/DocumentRenderer.tsx
Removes hardcoded fill="white" prop from Spinner components, relying on default/implicit styling.

Sequence Diagram

sequenceDiagram
    participant User as User
    participant AssetApp as AssetManagementApplication
    participant AssetForm as AssetManagementForm
    participant ActionForm as ActionForm
    participant ContractHook as useContractFunctionHook
    participant TokenCtx as TokenInformationContext
    participant Overlay as DocumentTransferMessage Overlay

    User->>AssetForm: Initiates action
    AssetForm->>ActionForm: Renders with error prop
    ActionForm->>ContractHook: Calls contract method
    ContractHook-->>ContractHook: Error occurs (maps code to errorMessage)
    ContractHook-->>TokenCtx: Propagates errorMessage
    AssetApp->>TokenCtx: Reads errorMessage
    AssetApp->>AssetForm: Passes errorMessage prop
    AssetForm->>ActionForm: Forwards errorMessage
    ActionForm->>Overlay: Shows overlay with errorMessage
    Overlay-->>User: Displays error in DocumentTransferMessage
Loading

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~60 minutes

Possibly related PRs

  • trustvc-website#28 — Main PR extends the transaction flow from this PR by plumbing the new errorMessage through AssetManagement components and overlays.
  • trustvc-website#34 — Both PRs modify AssetManagementForm and ActionForm components, props, and tests with overlapping behavior changes.
  • trustvc-website#37 — Both PRs modify ActionForm and DocumentTransferMessage for error/message propagation and overlay handling.

Suggested reviewers

  • RishabhS7
  • manishdex25

🐰 A Rabbit's Ode to Error Messages

Error paths now flow so clear,
From contract hooks to context near,
Through forms and overlays they sing,
With errorMessage, clarity we bring! 🌟

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 inconclusive)

Check name Status Explanation Resolution
Title check ❓ Inconclusive The title 'chore: sync develop to main' is generic and does not clearly summarize the main changes in this substantial changeset covering error messaging, context management, component refactoring, CSS updates, and provider configuration. Consider using a more descriptive title that highlights the primary feature or refactoring effort, such as 'feat: add error message handling across asset management and transfer flows' or 'refactor: migrate to ethers JsonRpcProvider and consolidate error messaging'.
✅ Passed checks (4 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Docstring Coverage ✅ Passed Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch develop

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share
Review rate limit: 0/1 reviews remaining, refill in 60 minutes.

Comment @coderabbitai help to get the list of available commands and usage tips.

@rongquan1 rongquan1 requested a review from RishabhS7 April 29, 2026 05:58

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 7

🧹 Nitpick comments (4)
src/pages/Home/index.tsx (1)

13-13: Use responsive padding instead of fixed p-[80px] across all viewports.

Line 13 applies 80px padding on small screens too, which can make mobile sections feel cramped. Prefer breakpoint-based spacing.

Proposed Tailwind adjustment
-      <div className="flex flex-col items-center p-[80px] max-w-[1440px] mx-auto">
+      <div className="flex flex-col items-center px-4 py-12 sm:px-6 sm:py-16 lg:px-12 lg:py-20 max-w-[1440px] mx-auto">
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@src/pages/Home/index.tsx` at line 13, Replace the fixed p-[80px] on the main
container div in the Home component (the <div className="flex flex-col
items-center p-[80px] max-w-[1440px] mx-auto">) with responsive Tailwind spacing
utilities so small viewports get reduced padding and larger viewports keep
larger gaps; for example use breakpointed classes (sm:*, md:*, lg:*) such as
smaller x/y padding on mobile and larger on md/lg to maintain layout (e.g.,
sm:px-4 sm:py-8 md:px-8 md:py-16 lg:py-20), ensuring you update the className
string on that div accordingly.
src/components/common/contexts/providerContext.tsx (1)

39-39: Prefer a single RPC resolver path in createProvider.

getRpcUrl already encapsulates fallback/validation. The extra ChainInfo[chainId]?.rpcUrl fallback reintroduces parallel behavior and weakens that central guard.

Suggested fix
-  const url = getRpcUrl(String(chainId)) ?? ChainInfo[chainId]?.rpcUrl
+  const url = getRpcUrl(String(chainId))
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@src/components/common/contexts/providerContext.tsx` at line 39, The code
creates a URL with two resolution paths which duplicates logic; in
createProvider replace the dual lookup with a single call to getRpcUrl and use
its result directly (remove the fallback to ChainInfo[chainId]?.rpcUrl), i.e.,
change the url assignment so it only assigns getRpcUrl(String(chainId)); update
any downstream assumptions if null/undefined can be returned by getRpcUrl;
ensure references to getRpcUrl and the url variable in createProvider remain
consistent.
src/components/common/contexts/TokenInformationContext/TokenInformationContext.tsx (1)

415-425: Consider documenting the error aggregation behavior.

The || chain returns the first truthy error message. This works well for the current UI flow where only one operation is active at a time. However, if multiple operations could fail simultaneously (e.g., from concurrent async calls), only the first error would be surfaced.

This is acceptable for the current design, but a brief comment explaining this behavior would help future maintainers understand the intentional precedence.

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In
`@src/components/common/contexts/TokenInformationContext/TokenInformationContext.tsx`
around lines 415 - 425, Add a short comment above the errorMessage aggregation
explaining that the || chain intentionally returns the first truthy error and
therefore establishes a precedence among changeHolderErrorMessage,
destroyTokenErrorMessage, endorseBeneficiaryErrorMessage,
transferOwnersErrorMessage, nominateErrorMessage,
rejectTransferOwnerErrorMessage, rejectTransferHolderErrorMessage,
rejectTransferOwnerHolderErrorMessage, restoreTokenErrorMessage, and
returnToIssuerErrorMessage; mention this is acceptable because only one
operation is expected to be active at a time and note that if concurrent
failures become possible, the aggregation should be revisited to surface
multiple errors or combine messages.
src/hooks/useContractFunctionHook.test.tsx (1)

65-167: Consider table-driven tests to reduce repetition in mapping coverage.

The assertions are solid, but this block can be simplified with it.each for easier maintenance and faster additions.

Refactor sketch
+it.each([
+  [{ code: 4001 }, 'User Rejected Transaction'],
+  [{ code: 4100 }, 'Unauthorized: Account or method not authorized'],
+  [{ code: -32603 }, 'Internal Error'],
+  [{ code: 'INSUFFICIENT_FUNDS' }, 'Insufficient Funds'],
+])('maps %o -> %s', async (thrown, expected) => {
+  mockTransferHolder.mockRejectedValueOnce(thrown)
+  const { result } = renderHook(() =>
+    useContractFunctionHook(mockContract, 'transferHolder' as any)
+  )
+  await act(async () => {
+    await result.current.send({})
+  })
+  expect(result.current.errorMessage).toBe(expected)
+})

Also applies to: 168-241, 243-289

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@src/hooks/useContractFunctionHook.test.tsx` around lines 65 - 167, Replace
the repeated individual tests mapping numeric error codes with a table-driven
test using Jest's it.each: gather the mappings (e.g., 4001 -> "User Rejected
Transaction", 4100 -> "Unauthorized: Account or method not authorized", 4900 ->
"Wallet Disconnected", -32603 -> "Internal Error", -32000 -> "Invalid Input",
-32003 -> "Transaction Rejected") and iterate over them; inside the it.each
body, call useContractFunctionHook(mockContract, 'transferHolder'),
mockTransferHolder.mockRejectedValueOnce({ code }), invoke
result.current.send({}) via act, and assert result.current.errorMessage (and
state where applicable, e.g., code 4001 should assert state === 'ERROR'); keep
references to useContractFunctionHook, mockTransferHolder, and send so the new
test replaces the repetitive tests and can be extended easily.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@src/components/common/contexts/providerContext.tsx`:
- Line 13: The file providerContext.tsx is importing NETWORK_NAME from
src/configs/chain-config which diverges from src/main.tsx’s source; update
providerContext.tsx to use the single canonical network constant used by the app
(import NETWORK_NAME from the same env-config module used by src/main.tsx or the
shared central export) and ensure getCurrentProvider() and any other references
(e.g., the logic around getCurrentProvider() and the code at the block around
lines 51-56) use that same NETWORK_NAME source so non-hook consumers and the app
context use the identical chain value.

In `@src/components/common/Tag/Tag.tsx`:
- Line 17: The div in Tag.tsx currently builds its class list as `${rounded}
${className}` which can emit a literal "undefined" token when className is not
provided; update the class construction used in the JSX (the div that spreads
{...props}) to only include className when it exists—e.g., concatenate with a
conditional or use a small utility (clsx/classnames) so the rendered class
string for the element (and the rounded variable) never contains "undefined".

In `@src/components/home/VerifySection/DocumentRenderer.tsx`:
- Line 331: In DocumentRenderer (the JSX that renders <Spinner
data-testid={'loader'} />), fix the loading text punctuation by replacing
"Loading document preview.." with either "Loading document preview…"
(single-character ellipsis) or "Loading document preview." for consistency;
update the string adjacent to the Spinner so tests and UI show the corrected
punctuation.

In `@src/components/home/VerifySection/VerifySection.tsx`:
- Around line 148-150: The root container in VerifySection (the JSX div with
className including "verify-section") forces min-w-[360px], causing horizontal
scroll on narrow viewports; remove the min-w-[360px] token and use w-full (while
keeping the existing max-w-[1440px] and the isDarkMode conditional) so the root
div becomes responsive on small screens without breaking the max width
constraint.

In `@src/index.css`:
- Around line 3411-3414: There are extra blank lines before the declarations
that violate stylelint's declaration-empty-line-before rule; remove the empty
line between the "row-gap: 0px;" declaration and the following "min-width:
187px;" so the block reads consecutively (row-gap, min-width, max-width), and
apply the identical removal to the other block containing the same "min-width"
and "max-width" declarations referenced in the comment.
- Line 318: The stylelint keyword-case rule is tripping on the color keyword;
change the value used with -webkit-text-fill-color from "currentColor" (or any
mixed/capitalized form) to the lowercase "currentcolor" to satisfy linting —
locate the occurrence of the -webkit-text-fill-color declaration and replace its
value with currentcolor.
- Line 607: The CSS declaration "min-width: 360px" is causing horizontal
overflow on 320px devices; locate the occurrence of min-width: 360px and either
reduce it to min-width: 320px to match the app baseline or remove it and replace
with a responsive rule (e.g., wrap the larger-minimum layout in a media query
like `@media` (min-width: 361px) { ... } so the constraint only applies on wider
viewports) to prevent forced horizontal scrolling.

---

Nitpick comments:
In `@src/components/common/contexts/providerContext.tsx`:
- Line 39: The code creates a URL with two resolution paths which duplicates
logic; in createProvider replace the dual lookup with a single call to getRpcUrl
and use its result directly (remove the fallback to ChainInfo[chainId]?.rpcUrl),
i.e., change the url assignment so it only assigns getRpcUrl(String(chainId));
update any downstream assumptions if null/undefined can be returned by
getRpcUrl; ensure references to getRpcUrl and the url variable in createProvider
remain consistent.

In
`@src/components/common/contexts/TokenInformationContext/TokenInformationContext.tsx`:
- Around line 415-425: Add a short comment above the errorMessage aggregation
explaining that the || chain intentionally returns the first truthy error and
therefore establishes a precedence among changeHolderErrorMessage,
destroyTokenErrorMessage, endorseBeneficiaryErrorMessage,
transferOwnersErrorMessage, nominateErrorMessage,
rejectTransferOwnerErrorMessage, rejectTransferHolderErrorMessage,
rejectTransferOwnerHolderErrorMessage, restoreTokenErrorMessage, and
returnToIssuerErrorMessage; mention this is acceptable because only one
operation is expected to be active at a time and note that if concurrent
failures become possible, the aggregation should be revisited to surface
multiple errors or combine messages.

In `@src/hooks/useContractFunctionHook.test.tsx`:
- Around line 65-167: Replace the repeated individual tests mapping numeric
error codes with a table-driven test using Jest's it.each: gather the mappings
(e.g., 4001 -> "User Rejected Transaction", 4100 -> "Unauthorized: Account or
method not authorized", 4900 -> "Wallet Disconnected", -32603 -> "Internal
Error", -32000 -> "Invalid Input", -32003 -> "Transaction Rejected") and iterate
over them; inside the it.each body, call useContractFunctionHook(mockContract,
'transferHolder'), mockTransferHolder.mockRejectedValueOnce({ code }), invoke
result.current.send({}) via act, and assert result.current.errorMessage (and
state where applicable, e.g., code 4001 should assert state === 'ERROR'); keep
references to useContractFunctionHook, mockTransferHolder, and send so the new
test replaces the repetitive tests and can be extended easily.

In `@src/pages/Home/index.tsx`:
- Line 13: Replace the fixed p-[80px] on the main container div in the Home
component (the <div className="flex flex-col items-center p-[80px]
max-w-[1440px] mx-auto">) with responsive Tailwind spacing utilities so small
viewports get reduced padding and larger viewports keep larger gaps; for example
use breakpointed classes (sm:*, md:*, lg:*) such as smaller x/y padding on
mobile and larger on md/lg to maintain layout (e.g., sm:px-4 sm:py-8 md:px-8
md:py-16 lg:py-20), ensuring you update the className string on that div
accordingly.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: d09142e0-84c0-44b5-85c1-cc18861a6ea1

📥 Commits

Reviewing files that changed from the base of the PR and between a597daf and 688f8c2.

📒 Files selected for processing (28)
  • src/components/AssetManagementPanel/AssetManagementApplication/index.tsx
  • src/components/AssetManagementPanel/AssetManagementForm/AssetManagementForm.test.tsx
  • src/components/AssetManagementPanel/AssetManagementForm/AssetManagementForm.tsx
  • src/components/AssetManagementPanel/AssetManagementForm/FormVariants/ActionForm/ActionForm.test.tsx
  • src/components/AssetManagementPanel/AssetManagementForm/FormVariants/ActionForm/ActionForm.tsx
  • src/components/AssetManagementPanel/AssetManagementForm/FormVariants/ActionForm/types.ts
  • src/components/AssetManagementPanel/AssetManagementForm/FormVariants/ActionSelectionForm/ActionSelectionForm.tsx
  • src/components/common/Button/Button.tsx
  • src/components/common/Navbar/Navbar.tsx
  • src/components/common/Overlay/OverlayContent/DocumentTransferMessage.test.tsx
  • src/components/common/Overlay/OverlayContent/DocumentTransferMessage.tsx
  • src/components/common/SelectField/SelectField.tsx
  • src/components/common/Tag/Tag.tsx
  • src/components/common/contexts/TokenInformationContext/TokenInformationContext.tsx
  • src/components/common/contexts/providerContext.tsx
  • src/components/home/EndorsementChain/EndorsementChain.tsx
  • src/components/home/VerifySection/DocumentRenderer.tsx
  • src/components/home/VerifySection/VerifyError.tsx
  • src/components/home/VerifySection/VerifyResult.tsx
  • src/components/home/VerifySection/VerifySection.test.tsx
  • src/components/home/VerifySection/VerifySection.tsx
  • src/hooks/useContractFunctionHook.test.tsx
  • src/hooks/useContractFunctionHook.tsx
  • src/index.css
  • src/main.tsx
  • src/pages/Home/index.tsx
  • src/pages/News/components/NewsArticlesContent.tsx
  • src/pages/NewsDetail/components/NewsDetailBody.tsx

useState,
} from 'react'
import { INFURA_API_KEY, NETWORK_NAME } from '../../../configs/chain-config'
import { NETWORK_NAME } from '../../../configs/chain-config'

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

Use a single NETWORK_NAME source to prevent chain drift.

src/main.tsx resolves the app default chain from src/configs/env-config, but this file resolves getCurrentProvider() from src/configs/chain-config. If those ever diverge, non-hook provider consumers can run on a different chain than the app context.

Suggested fix
-import { NETWORK_NAME } from '../../../configs/chain-config'
+import { NETWORK_NAME } from '../../../configs/env-config'

Also applies to: 51-56

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@src/components/common/contexts/providerContext.tsx` at line 13, The file
providerContext.tsx is importing NETWORK_NAME from src/configs/chain-config
which diverges from src/main.tsx’s source; update providerContext.tsx to use the
single canonical network constant used by the app (import NETWORK_NAME from the
same env-config module used by src/main.tsx or the shared central export) and
ensure getCurrentProvider() and any other references (e.g., the logic around
getCurrentProvider() and the code at the block around lines 51-56) use that same
NETWORK_NAME source so non-hook consumers and the app context use the identical
chain value.

className={`inline-block py-1 px-2 ${rounded} ${className}`}
{...props}
>
<div className={`${rounded} ${className}`} {...props}>

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Avoid emitting undefined into the DOM class list.

At Line 17, optional className can render as a literal undefined class token.

Suggested fix
-    <div className={`${rounded} ${className}`} {...props}>
+    <div className={[rounded, className].filter(Boolean).join(' ')} {...props}>
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<div className={`${rounded} ${className}`} {...props}>
<div className={[rounded, className].filter(Boolean).join(' ')} {...props}>
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@src/components/common/Tag/Tag.tsx` at line 17, The div in Tag.tsx currently
builds its class list as `${rounded} ${className}` which can emit a literal
"undefined" token when className is not provided; update the class construction
used in the JSX (the div that spreads {...props}) to only include className when
it exists—e.g., concatenate with a conditional or use a small utility
(clsx/classnames) so the rendered class string for the element (and the rounded
variable) never contains "undefined".

<div className="flex flex-col items-center gap-2">
<Spinner data-testid={'loader'} fill="white" /> Loading document
preview..
<Spinner data-testid={'loader'} /> Loading document preview..

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Fix loading-copy punctuation.

Line 331 shows Loading document preview.. (double period). Please use a standard ellipsis or single period for consistency.

✏️ Proposed copy fix
-              <Spinner data-testid={'loader'} /> Loading document preview..
+              <Spinner data-testid={'loader'} /> Loading document preview...
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<Spinner data-testid={'loader'} /> Loading document preview..
<Spinner data-testid={'loader'} /> Loading document preview...
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@src/components/home/VerifySection/DocumentRenderer.tsx` at line 331, In
DocumentRenderer (the JSX that renders <Spinner data-testid={'loader'} />), fix
the loading text punctuation by replacing "Loading document preview.." with
either "Loading document preview…" (single-character ellipsis) or "Loading
document preview." for consistency; update the string adjacent to the Spinner so
tests and UI show the corrected punctuation.

Comment on lines +148 to +150
<div
className={`min-w-[360px] max-w-[1440px] verify-section ${isDarkMode ? 'dark-mode' : ''}`}
>

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

Avoid forcing a 360px minimum width on the root container.

Line 149 adds min-w-[360px], which can cause horizontal scrolling on narrower mobile viewports (e.g., 320px devices). Prefer w-full with only max-w constraints.

📱 Proposed responsive fix
-    <div
-      className={`min-w-[360px] max-w-[1440px] verify-section ${isDarkMode ? 'dark-mode' : ''}`}
-    >
+    <div
+      className={`w-full max-w-[1440px] verify-section ${isDarkMode ? 'dark-mode' : ''}`}
+    >
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<div
className={`min-w-[360px] max-w-[1440px] verify-section ${isDarkMode ? 'dark-mode' : ''}`}
>
<div
className={`w-full max-w-[1440px] verify-section ${isDarkMode ? 'dark-mode' : ''}`}
>
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@src/components/home/VerifySection/VerifySection.tsx` around lines 148 - 150,
The root container in VerifySection (the JSX div with className including
"verify-section") forces min-w-[360px], causing horizontal scroll on narrow
viewports; remove the min-w-[360px] token and use w-full (while keeping the
existing max-w-[1440px] and the isDarkMode conditional) so the root div becomes
responsive on small screens without breaking the max width constraint.

Comment thread src/index.css
background: none;
-webkit-background-clip: initial;
background-clip: initial;
-webkit-text-fill-color: currentColor;

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

Line 318 fails stylelint keyword-case rule.

currentColor should be lowercase to satisfy the configured linter rule.

Proposed fix
-  -webkit-text-fill-color: currentColor;
+  -webkit-text-fill-color: currentcolor;
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
-webkit-text-fill-color: currentColor;
-webkit-text-fill-color: currentcolor;
🧰 Tools
🪛 Stylelint (17.9.0)

[error] 318-318: Expected "currentColor" to be "currentcolor" (value-keyword-case)

(value-keyword-case)

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@src/index.css` at line 318, The stylelint keyword-case rule is tripping on
the color keyword; change the value used with -webkit-text-fill-color from
"currentColor" (or any mixed/capitalized form) to the lowercase "currentcolor"
to satisfy linting — locate the occurrence of the -webkit-text-fill-color
declaration and replace its value with currentcolor.

Comment thread src/index.css
.overlay-border-shadow {
align-self: stretch;
min-width: min(340px, 100%);
min-width: 360px;

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

Line 607 introduces mobile overflow risk on 320px screens.

min-width: 360px conflicts with the app’s 320px baseline and can force horizontal scroll/clipping on small devices.

Proposed fix
 .overlay-border-shadow {
   align-self: stretch;
-  min-width: 360px;
+  min-width: min(360px, 100%);
   padding: 16px;
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
min-width: 360px;
.overlay-border-shadow {
align-self: stretch;
min-width: min(360px, 100%);
padding: 16px;
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@src/index.css` at line 607, The CSS declaration "min-width: 360px" is causing
horizontal overflow on 320px devices; locate the occurrence of min-width: 360px
and either reduce it to min-width: 320px to match the app baseline or remove it
and replace with a responsive rule (e.g., wrap the larger-minimum layout in a
media query like `@media` (min-width: 361px) { ... } so the constraint only
applies on wider viewports) to prevent forced horizontal scrolling.

Comment thread src/index.css
Comment on lines +3411 to 3414
row-gap: 0px;

min-width: 187px;
max-width: 538px;

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

Extra blank lines violate stylelint declaration spacing rules.

The empty lines before min-width in these blocks trigger declaration-empty-line-before.

Proposed fix
 .dropdown-btn-frame {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: flex-end;
   align-items: flex-start;
   align-content: flex-end;
   padding: 0px;
   row-gap: 0px;
-
   min-width: 187px;
   max-width: 538px;
 }

 .tag-frame {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   align-items: flex-start;
   align-content: flex-start;
   padding: 0px;
-
   min-width: 187px;
 }

Also applies to: 3440-3443

🧰 Tools
🪛 Stylelint (17.9.0)

[error] 3413-3413: Expected no empty line before declaration (declaration-empty-line-before)

(declaration-empty-line-before)

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@src/index.css` around lines 3411 - 3414, There are extra blank lines before
the declarations that violate stylelint's declaration-empty-line-before rule;
remove the empty line between the "row-gap: 0px;" declaration and the following
"min-width: 187px;" so the block reads consecutively (row-gap, min-width,
max-width), and apply the identical removal to the other block containing the
same "min-width" and "max-width" declarations referenced in the comment.

@RishabhS7 RishabhS7 merged commit f546f0a into main Apr 29, 2026
11 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants