Skip to content

Conversation

@sarahraines
Copy link
Contributor

@sarahraines sarahraines commented Jul 23, 2025

Description

This PR shows an error when Plaid is unable to link a bank rather than failing silently.

As an error state In the LinkAccounts component
Screenshot 2025-07-22 at 7 11 14 PM

As a dismissable modal in the LinkedAccounts component
Screenshot 2025-07-22 at 7 10 06 PM

Copy link
Contributor

@greptile-apps greptile-apps bot left a comment

Choose a reason for hiding this comment

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

Greptile Summary

This PR implements comprehensive error handling for Plaid bank linking failures by introducing a new error state management system. The changes add a PlaidLinkErrorStoreProvider that uses Zustand to track Plaid link errors globally across the application.

The implementation integrates error detection in the useLinkedAccounts hook by adding an onEvent callback that listens for Plaid's ERROR events and records them in the store. When errors occur, users see different UI presentations depending on context: an alternate error state in the LinkAccounts onboarding component (via early return in LinkAccountsLinkStep) and a dismissable modal in the regular LinkedAccounts component.

The error UI provides two clear actions - "Link another bank" to retry the connection process, or "Complete" to proceed without linking additional accounts. The error state is automatically dismissed when a successful link occurs or when manually dismissed by the user.

The changes also include visual styling updates to the DataState component's error state, using proper design system error colors instead of transparent backgrounds, and responsive CSS for the error modal that stacks buttons vertically on smaller screens.

Confidence score: 4/5

  • This PR is generally safe to merge with well-structured error handling that improves user experience
  • The score reflects minor concerns about error event detection specificity and potential edge cases in async operations
  • Files that need more attention: useLinkedAccounts.ts for the event handling logic and PlaidLinkErrorModal.tsx for the modal state management

9 files reviewed, 3 comments

Edit Code Review Bot Settings | Greptile

@sarahraines sarahraines requested a review from doneel July 23, 2025 02:26
}
}

@container (max-width: 26.25rem) {
Copy link
Contributor

Choose a reason for hiding this comment

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

Where does this number come from? Asking to see if it's a repeatable constant we should re-use as a var.

@@ -0,0 +1,76 @@
import { useCallback, useContext } from 'react'
Copy link
Contributor

Choose a reason for hiding this comment

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

I think this is inconsequential, but why should this PlaidLinkError component be nested under LinkedAccounts? We're reusing it for multiple other components.

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