fix: minor ux changes in contacts flow#826
fix: minor ux changes in contacts flow#826kushagrasarathe merged 3 commits intopeanut-wallet-devfrom
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
WalkthroughThis set of changes updates UI components related to user profiles, search functionality, and verification status display. The profile header's share button now uses the username instead of the full URL and updates its label. The profile menu item's visual feedback changes from hover to active state. The search users component replaces the avatar with badge with a chevron-up button that closes the portal. Several components including Changes
Possibly related PRs
Suggested reviewers
Poem
✨ Finishing Touches
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. 🪧 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 (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
src/components/Profile/components/ProfileHeader.tsx(1 hunks)src/components/Profile/components/ProfileMenuItem.tsx(1 hunks)src/components/SearchUsers/index.tsx(1 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (1)
src/components/SearchUsers/index.tsx (2)
src/components/0_Bruddle/Button.tsx (1)
Button(63-91)src/components/Global/Icons/Icon.tsx (1)
Icon(99-108)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: Deploy-Preview
🔇 Additional comments (2)
src/components/Profile/components/ProfileMenuItem.tsx (1)
58-58: Improved interaction feedback!Changed from hover to active state for better visual feedback when clicking a menu item. This provides more clear user interaction indication.
src/components/SearchUsers/index.tsx (1)
46-49: Improved navigation with explicit back buttonReplacing the avatar with a clear back button improves usability by making the navigation action more explicit and discoverable. The chevron icon provides a familiar visual cue for "back" functionality.
The Button styling with stroke variant and the rotated chevron icon creates a standard back button pattern that users will immediately understand, enhancing the overall UX of the search interface.
| <ShareButton url={username} title="Share your profile"> | ||
| Share Profile link | ||
| </ShareButton> |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
Verify ShareButton implementation with username parameter
The change passes just the username instead of the full profileUrl to the ShareButton component. This might affect functionality if ShareButton expects a complete URL.
Also, the button text has been updated to be more action-oriented, which improves clarity for users.
🏁 Script executed:
#!/bin/bash
# Check if ShareButton component expects a full URL or just a username
rg -A 5 "ShareButton" --type ts --type tsx | grep -A 5 "url="Length of output: 87
🏁 Script executed:
#!/bin/bash
# Locate files defining the ShareButton component
echo "Searching for ShareButton definitions..."
rg -l "export (default )?function ShareButton" -g "src/**/*.{ts,tsx}"
rg -l "const ShareButton" -g "src/**/*.{ts,tsx}"
# If found, inspect the first definition for prop types and usage
FILE=$(rg -l "export (default )?function ShareButton" -g "src/**/*.{ts,tsx}" | head -n1)
if [ -n "$FILE" ]; then
echo "Inspecting props and usage in $FILE"
rg -n "interface ShareButtonProps" -A10 "$FILE" || true
rg -n "function ShareButton" -A10 "$FILE" || true
rg -n "url:" -A5 "$FILE" || true
else
echo "No ShareButton export found; searching all occurrences..."
FILE=$(rg -l "ShareButton" -g "src/**/*.{ts,tsx}" | head -n1)
echo "Inspecting first occurrence in $FILE"
rg -n "url:" -A5 "$FILE" || true
fiLength of output: 881
#!/bin/bash
# Inspect ShareButton implementation to determine expected url prop format
FILE="src/components/Global/ShareButton/index.tsx"
echo "Displaying top 200 lines of $FILE for context:"
sed -n '1,200p' "$FILE"
echo -e "\nSearching for url prop usage in component:"
rg -n "url[: ]" -A5 "$FILE"#!/bin/bash
# Inspect ShareButton implementation to determine expected url prop format
FILE="src/components/Global/ShareButton/index.tsx"
echo "=== Props Interface ==="
rg -n "interface ShareButtonProps" -A5 "$FILE" || true
echo -e "\n=== Component Definition ==="
rg -n "const ShareButton" -A10 "$FILE" || true
echo -e "\n=== url Prop Usage in JSX ==="
rg -n "url=" -A3 "$FILE" || true#!/usr/bin/env bash
# Inspect ShareButton implementation to confirm expected url prop format
FILE="src/components/Global/ShareButton/index.tsx"
echo "=== ShareButtonProps Interface ==="
rg -n "interface ShareButtonProps" -A5 "$FILE" || true
echo -e "\n=== ShareButton Component Definition ==="
rg -n -A10 "const ShareButton" "$FILE" || true
echo -e "\n=== url Prop Usage in JSX/Logic ==="
rg -n -C3 "url" "$FILE" || true🏁 Script executed:
#!/usr/bin/env bash
# Find and inspect the ShareButton component implementation
FILE=$(rg -l "const ShareButton" -g "src/**/*.{ts,tsx}" | grep "Global/ShareButton/index.tsx" | head -n1)
if [ -z "$FILE" ]; then
echo "ShareButton file not found."
exit 1
fi
echo ">> Inspecting props interface in $FILE"
rg -n "interface ShareButtonProps" -A5 "$FILE" || true
echo -e "\n>> Inspecting component definition in $FILE"
rg -n "const ShareButton" -A10 "$FILE" || true
echo -e "\n>> Searching for url prop usage/transform in $FILE"
rg -n "url[:=]" -A5 "$FILE" || trueLength of output: 1548
#!/usr/bin/env bash
# Extract the ShareButton component implementation to inspect url usage
FILE="src/components/Global/ShareButton/index.tsx"
echo "=== ShareButton Component (first 300 lines) ==="
sed -n '1,300p' "$FILE"Ensure ShareButton receives a full URL, not just the username
It looks like ShareButtonProps.url is defined as a string and used directly within the share logic, so passing only username will produce an incomplete share link. Please update the prop to use the full profile URL. For example, if you have a helper or constant like profileUrl, use:
- <ShareButton url={username} title="Share your profile">
+ <ShareButton url={profileUrl(username)} title="Share your profile">
Share Profile link
</ShareButton>Points to address:
- src/components/Profile/components/ProfileHeader.tsx (Lines 62–64): replace
url={username}with the complete URL. - Verify you’re constructing the URL consistently (e.g. using
window.location.originor a router helper).
Committable suggestion skipped: line range outside the PR's diff.
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
src/components/UserHeader/index.tsx (1)
32-32: Username format now displays the full profile URL pathThe username display was changed to show the full URL path (without the protocol) instead of just the username. This provides more context but could potentially lead to display issues for very long usernames on smaller screens.
Consider implementing text truncation or responsive handling for long usernames:
-<div className="text-sm font-bold">{`${BASE_URL.replace('https://', '')}/${username}`}</div> +<div className="text-sm font-bold truncate max-w-[160px]">{`${BASE_URL.replace('https://', '')}/${username}`}</div>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (6)
src/app/(mobile-ui)/home/page.tsx(1 hunks)src/app/[...recipient]/client.tsx(1 hunks)src/components/Profile/components/ProfileHeader.tsx(2 hunks)src/components/Profile/index.tsx(1 hunks)src/components/Profile/views/ProfileEdit.view.tsx(1 hunks)src/components/UserHeader/index.tsx(2 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- src/components/Profile/components/ProfileHeader.tsx
🧰 Additional context used
🧬 Code Graph Analysis (2)
src/app/(mobile-ui)/home/page.tsx (1)
src/components/UserHeader/index.tsx (1)
UserHeader(14-37)
src/components/UserHeader/index.tsx (1)
src/components/Global/DirectSendQR/utils.ts (1)
BASE_URL(70-70)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: Deploy-Preview
🔇 Additional comments (7)
src/components/UserHeader/index.tsx (3)
11-11: Good addition of theisVerifiedparameter to the interfaceAdding the optional boolean parameter allows for dynamic verification status display based on the user's actual KYC status rather than using hardcoded values.
14-14: Properly updated function signatureThe component parameter list has been correctly updated to accept and destructure the new
isVerifiedprop.
26-31: Correctly passing dynamic verification statusThe
AvatarWithBadgecomponent now receives theisVerifiedprop explicitly instead of a hardcoded value, which aligns with the updated verification status handling throughout the application.src/components/Profile/index.tsx (1)
38-43: Correctly implemented dynamic verification statusThe
isVerifiedprop now uses a dynamic expression based on the user's KYC status rather than a hardcoded value. This ensures that the verification badge accurately reflects the user's actual verification status.src/app/[...recipient]/client.tsx (1)
192-192: Consistent implementation of dynamic verification statusThe
isVerifiedprop is now correctly passed to thePublicProfilecomponent based on the user's KYC status. This change maintains consistency with the verification status handling across the application.src/components/Profile/views/ProfileEdit.view.tsx (1)
117-122: Properly implemented dynamic verification statusThe
ProfileHeadercomponent now receives theisVerifiedprop based on the user's KYC status. This change aligns with the verification status handling updates throughout the application.src/app/(mobile-ui)/home/page.tsx (1)
70-74: Great implementation of dynamic verification status!The update properly passes the verification status based on the user's KYC approval status to the UserHeader component. This aligns with the broader pattern of dynamically displaying verification status across the application, improving consistency in the UI.
The optional chaining in
user?.user.kycStatusprovides a safe way to handle cases where the user object might not be fully loaded yet, and the check for'approved'specifically ensures that only fully-verified users show as verified.
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
src/components/Send/direct-send/views/Success.direct.send.view.tsx (1)
19-40: Consider adding success state animation for better feedback.While the UI changes improve readability, adding a subtle animation for the success state could enhance the user experience by providing more visual feedback that the transaction completed successfully.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
src/components/Send/direct-send/views/Initial.direct.send.view.tsx(0 hunks)src/components/Send/direct-send/views/Success.direct.send.view.tsx(2 hunks)
💤 Files with no reviewable changes (1)
- src/components/Send/direct-send/views/Initial.direct.send.view.tsx
🧰 Additional context used
🧬 Code Graph Analysis (1)
src/components/Send/direct-send/views/Success.direct.send.view.tsx (1)
src/services/users.ts (1)
ApiUser(10-17)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: Deploy-Preview
🔇 Additional comments (5)
src/components/Send/direct-send/views/Success.direct.send.view.tsx (5)
7-7: Simple import organization change.The
getInitialsFromNameutility import was either moved or added. This is properly used to generate initials from the user's name at line 17.
9-14: Props interface simplified by removing transaction-related properties.The interface no longer includes
txHashandchainIdprops, which aligns with the UI simplification mentioned in the PR objectives. This is a good cleanup that removes unnecessary properties.
16-16: Component signature simplified to match interface changes.The component parameters have been updated to match the simplified interface, removing the transaction-related properties.
25-28: UI text styling updates for improved readability.The text styling has been adjusted with more appropriate font sizes:
- Heading now uses a smaller
text-lgsize withfont-boldweight- Amount now uses
text-3xlwithfont-extraboldfor emphasis- Message now uses
text-smwithfont-mediumfor secondary informationThese adjustments create better visual hierarchy and improve the overall user experience.
32-39: Transaction link section removed to simplify the UI.The "View transaction" link section has been completely removed, which aligns with the PR objective of simplifying the UX in the contacts flow. Users typically don't need to see transaction details in a direct send flow, so this change improves focus on the essential information.
1 participant
contributes to TASK-10790 and also fixes TASK-10924
Summary by CodeRabbit
New Features
Style
Refactor