refactor: quick transfer UI, profile tabs rendering, profile transfer modal #502
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- In `user-profile-view.tsx`: - Changed tabs alignment to `flex-start` for better layout consistency. - Adjusted scroll button visibility: hide for disabled states and conditionally based on `currentTab`. - Enhanced responsiveness by aligning tabs differently for `xs` and `sm` viewports.
- **src/sections/finance/index.tsx**: Updated the title in `FinanceQuickTransfer` component to "Quick transfer to" for better clarity. - **src/sections/finance/components/finance-display-name.tsx**: Added a new component to display the currently selected profile's name and address. - **src/sections/finance/components/finance-no-followings-quick-transfer.tsx**: Added a new component to guide users when no followings are available for transfers. - **src/sections/finance/components/finance-quick-transfer.tsx**: Integrated the new components, replacing the wallet input with a display name or fallback guidance for no followings. Improves user experience during the quick transfer process by adding profile context and fallback handling.
- Extract `handleAmountConstraints` to a utility in `format-number.ts` for better reusability and modularity. - Update calls to `handleAmountConstraints` in `finance-quick-transfer.tsx` to use the new utility function with the updated parameters. - Replace `FinanceDisplayName` with `FinanceDisplayProfileInfo` and refine its rendering logic to support multiple modes (`profile` and `wallet`). - Adjust `CardHeader` styling with additional padding for consistency. - Rename button text from "Transfer Now" to "Quick transfer" for improved clarity.
- Renamed `FinanceDisplayName` to `FinanceDisplayProfileInfo` for clarity. - Added a new `mode` prop to toggle between displaying profile name or wallet address. - Updated rendering logic to conditionally display content based on the mode selection.
- `finance-quick-transfer-modal.tsx`: - Add dynamic input support for transfer amount when "amount" is zero. - Introduce `MAX_AMOUNT` and `MAX_POOL` constraints for input validation. - Add callbacks `handleChangeInput` and `handleBlur` to manage input changes with constraints. - Update UI to display input field dynamically based on "amount" value. - Disable confirm button if the input amount violates constraints or is invalid.
- Introduced `ProfileTransfer` component in `src/sections/user/profile-transfer.tsx`. - Utilizes `FinanceQuickTransferModal` for transferring profiles with a maximum limit of 500. - Implements `useBoolean` hook to manage modal state efficiently.
- **src/sections/user/profile-header.tsx**: Added `ProfileTransfer` component to the profile header, making it available for user-to-user interactions. - **src/sections/finance/index.tsx**: Removed redundant `title` prop from `FinanceQuickTransfer` component to simplify its usage and improve consistency.
- **profile-header.tsx**: Add authentication check before rendering `ProfileTransfer` to ensure availability only for authenticated users. - **profile-transfer.tsx**: Update transfer button with new styling: defined min-width, background color, and changed button variant to `outlined` for consistency.
- Removed the unused `renderWalletInput` component from `finance-quick-transfer.tsx`. - Updated logic to directly handle the rendering condition for the carousel and the no-followings fallback. - Simplified conditional rendering by removing commented-out code and refining checks.
This was
linked to
issues
Jan 28, 2025
- Removed `toggleRainbow` import and related logic from `finance-quick-transfer.tsx` as it was no longer used. - Eliminated `addressError` state and associated `handleInputChange` function. - Cleaned up unused `TextField` import to streamline the component.
|
geolffreym
approved these changes
Jan 29, 2025
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This pull request introduces several new components and enhancements related to the finance section of the application, focusing on improving the user interface and functionality for profile and wallet management, as well as quick transfers.
New components and enhancements:
src/sections/finance/components/finance-display-profile-info.tsx: AddedFinanceDisplayProfileInfocomponent to display the profile name or wallet address based on the provided mode and the carousel's current index.src/sections/finance/components/finance-no-followings-quick-transfer.tsx: AddedFinanceNoFollowingsQuickTransfercomponent to guide users when there are no followings available for quick transfers.Modifications to existing components:
src/sections/finance/components/finance-quick-transfer-modal.tsx: Introduced new state variables and callback functions to handle amount constraints and input changes, ensuring valid transfer amounts. [1] [2] [3] [4] [5] [6] [7] [8] [9]src/sections/finance/components/finance-quick-transfer.tsx: Refactored to remove the wallet address input field, added new components for profile display and no followings message, and updated the quick transfer button text. [1] [2] [3] [4] [5] [6] [7] [8] [9] [10]Other changes:
src/sections/finance/index.tsx: Removed the title prop fromFinanceQuickTransfercomponent instances. [1] [2]src/sections/user/profile-header.tsx: AddedProfileTransfercomponent to the profile header for authenticated users to transfer to other profiles. [1] [2]