feat(react): add UI components to v5#2204
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub. 1 Skipped Deployment
|
🌿 Documentation Preview
|
dphilipson
requested review from
0xfourzerofour,
AlvaroLuken,
Dan-Nolan,
Richard-Dang,
SahilAujla,
Zer0dot,
adamegyed,
alex-miao,
andysim3d,
avarobinson,
blakecduncan,
dancoombs,
florrdv,
jakehobbs,
linnall,
niveda-krish,
noam-alchemy and
thebrianchen
as code owners
There was a problem hiding this comment.
Pull Request Overview
This PR introduces UI components and hooks to the @alchemy/react package (v5), focusing on authentication flows with passkey management, OAuth integration, and email authentication. The changes add modal dialogs, loading states, error handling, and various illustration styles for a polished user experience.
Key Changes
- Added passkey management hooks (
useAddPasskey,useLoginWithPasskey) and corresponding UI components - Introduced
useAuthModalhook andAuthModal/AuthCardcomponents for authentication flows - Added comprehensive icon libraries for OAuth providers, illustrations, and UI elements
- Implemented configuration management via
useUiConfighook with illustration style support
Reviewed Changes
Copilot reviewed 100 out of 101 changed files in this pull request and generated 6 comments.
Show a summary per file
| File | Description |
|---|---|
packages/wagmi-core/src/index.ts |
Exports new passkey action functions |
packages/wagmi-core/src/actions/loginWithPasskey.ts |
Implements passkey login action |
packages/wagmi-core/src/actions/addPasskey.ts |
Implements add passkey action |
packages/react/src/index.ts |
Exports new hooks and UI components |
packages/react/src/types.ts |
Adds UI configuration types |
packages/react/src/query/*.ts |
React Query mutation options for passkey actions |
packages/react/src/icons/**/*.tsx |
SVG icon components for UI elements and illustrations |
packages/react/src/hooks/useUiConfig.tsx |
UI configuration context and provider |
packages/react/src/hooks/useResizeObserver.ts |
Resize observer hook for responsive UI |
packages/react/src/utils.ts |
Utility functions for string manipulation |
| r="18.0571" | ||
| stroke="#DC2626" | ||
| strokeWidth="2.5" | ||
| className="=stroke-[#DC2626] dark:stroke-[#EF4444]" |
There was a problem hiding this comment.
Invalid className with leading = character. Should be className="stroke-[#DC2626] dark:stroke-[#EF4444]".
| strokeWidth="2.5" | ||
| strokeLinecap="round" | ||
| strokeLinejoin="round" | ||
| className="=stroke-[#DC2626] dark:stroke-[#EF4444]" |
There was a problem hiding this comment.
Invalid className with leading = character. Should be className="stroke-[#DC2626] dark:stroke-[#EF4444]".
| strokeWidth="2.5" | ||
| strokeLinecap="round" | ||
| strokeLinejoin="round" | ||
| className="=stroke-[#DC2626] dark:stroke-[#EF4444]" |
There was a problem hiding this comment.
Invalid className with leading = character. Should be className="stroke-[#DC2626] dark:stroke-[#EF4444]".
| width="60" | ||
| height="60" | ||
| viewBox="0 0 60 60" | ||
| fill="n##363FF9" |
There was a problem hiding this comment.
Invalid fill value with extra characters. Should be fill="#363FF9".
| fill="n##363FF9" | |
| fill="#363FF9" |
| width="60" | ||
| height="60" | ||
| viewBox="0 0 60 60" | ||
| fill="363FF9" |
There was a problem hiding this comment.
Missing # prefix in fill value. Should be fill="#363FF9".
| fill="363FF9" | |
| fill="#363FF9" |
| r="18.0571" | ||
| stroke="#DC2626" | ||
| strokeWidth="2.5" | ||
| className="stroke-[#DC2626] dark:[#EF4444]" |
There was a problem hiding this comment.
Incomplete dark mode className. Should be className="stroke-[#DC2626] dark:stroke-[#EF4444]".
| className="stroke-[#DC2626] dark:[#EF4444]" | |
| className="stroke-[#DC2626] dark:stroke-[#EF4444]" |
|
All of those copilot objections are to existing code from v4, btw. |
PR-Codex overview
This PR introduces various enhancements and new features to the authentication components in the
@alchemy/reactlibrary. It includes new hooks for managing passkeys, improved error handling, and updates to UI components for better user experience.Detailed summary
useAuthModalhook for managing the Auth Modal.addPasskeyandloginWithPasskeyactions for passkey management.ConnectionErrorand loading states.PasskeyAdded,GeneralError,HelpText, and more.