fix: token creation form layout and theme #109
Conversation
WalkthroughThe pull request introduces several updates across multiple components related to token management. Key changes include the addition of informational messages in the Changes
Possibly related PRs
Suggested labels
Suggested reviewers
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## main #109 +/- ##
==========================================
- Coverage 60.20% 60.09% -0.11%
==========================================
Files 146 146
Lines 14473 14435 -38
==========================================
- Hits 8713 8675 -38
Misses 5760 5760 ☔ View full report in Codecov by Sentry. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Outside diff range and nitpick comments (4)
components/factory/forms/__tests__/ConfirmationForm.test.tsx (1)
33-34: Consider expanding test coverage for new featuresWhile the test updates align with UI changes, consider adding assertions to verify the new informational message about signing two messages that was added to the form.
Add the following test:
test('renders form with correct details', () => { renderWithProps(); + expect(screen.getByText(/You will be required to sign two messages/)).toBeInTheDocument(); // existing assertions... });components/factory/forms/Success.tsx (1)
16-16: Improve color contrast accessibilityThe specific hex color
#808080might not provide sufficient contrast in all theme modes. Consider using Tailwind's built-in color system for better theme compatibility.-<p className="text-md text-[#808080] mb-6 text-pretty"> +<p className="text-md text-gray-400 dark:text-gray-500 mb-6 text-pretty">Also applies to: 21-21, 25-25
components/factory/forms/ConfirmationForm.tsx (2)
106-112: Consider improving accessibility of form labelsThe current implementation uses gray text colors which might have insufficient contrast. Consider using semantic HTML and ARIA attributes for better accessibility.
-<div className="bg-base-300 p-4 rounded-[12px]"> - <label className="text-sm text-gray-500 dark:text-gray-400">Symbol</label> - <div className="">{formData.symbol || formData.display}</div> +<div className="bg-base-300 p-4 rounded-[12px]"> + <label htmlFor="symbol" className="text-sm font-medium text-gray-700 dark:text-gray-300">Symbol</label> + <div id="symbol" aria-label="Token symbol" className="mt-1">{formData.symbol || formData.display}</div> </div>
Line range hint
28-77: Enhance error handling and user feedbackThe transaction error handling could be improved to provide better feedback to users.
try { // First, create the denom const createDenomMsg = createDenom({ sender: address, subdenom: formData.subdenom, }); const createDenomFee = await estimateFee(address, [createDenomMsg]); const createDenomResult = await tx([createDenomMsg], { fee: createDenomFee, returnError: true, }); if (createDenomResult && createDenomResult.error) { - console.error('Error creating denom:', createDenomResult.error); + const errorMessage = createDenomResult.error.message || 'Failed to create token'; + toast.error(errorMessage); return; } // ... rest of the code } catch (error) { - console.error('Error during transaction setup:', error); + const errorMessage = error instanceof Error ? error.message : 'An unexpected error occurred'; + toast.error(errorMessage); }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (6)
components/factory/forms/ConfirmationForm.tsx(2 hunks)components/factory/forms/CreateDenom.tsx(1 hunks)components/factory/forms/Success.tsx(2 hunks)components/factory/forms/TokenDetailsForm.tsx(1 hunks)components/factory/forms/__tests__/ConfirmationForm.test.tsx(1 hunks)components/factory/forms/__tests__/Success.test.tsx(0 hunks)
💤 Files with no reviewable changes (1)
- components/factory/forms/tests/Success.test.tsx
✅ Files skipped from review due to trivial changes (2)
- components/factory/forms/CreateDenom.tsx
- components/factory/forms/TokenDetailsForm.tsx
🔇 Additional comments (3)
components/factory/forms/Success.tsx (1)
48-50: LGTM! Clear and consistent terminology
The change from URI to "Logo URL" improves user understanding.
components/factory/forms/ConfirmationForm.tsx (2)
97-101: LGTM! Clear user communication
The added message effectively communicates the two-step signing process to users.
132-135: LGTM! Improved button contrast
The dark text color on the neutral button improves readability.
This PR fixes the token creation form layout and color scheme and adds an informational blurb about the number of required signatures.
Summary by CodeRabbit
Release Notes
New Features
User Interface Enhancements
Bug Fixes
Tests