From ec0cad7761abfd70aeb2cde5d6ce9fcfdefd7b9e Mon Sep 17 00:00:00 2001 From: Carlos Andres Perez Ubeda Date: Mon, 27 Jan 2025 14:20:30 -0600 Subject: [PATCH 01/10] feat(ui): update tabs alignment and scroll button behavior - 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/user/view/user-profile-view.tsx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/sections/user/view/user-profile-view.tsx b/src/sections/user/view/user-profile-view.tsx index dda889b7..ac857b72 100644 --- a/src/sections/user/view/user-profile-view.tsx +++ b/src/sections/user/view/user-profile-view.tsx @@ -126,8 +126,12 @@ const UserProfileView = ({ id }: any) => { width: 1, zIndex: 9, borderBottom: '1px solid rgba(255, 255, 255, 0.08)', - [`& .${tabsClasses.flexContainer}`]: { justifyContent: 'center', px: 1, pl: { xs: 10, md: 0 } }, - [`& .${tabsClasses.scroller}`]: { display: 'flex', justifyContent: 'center' }, + [`& .${tabsClasses.flexContainer}`]: { justifyContent: 'flex-start', px: 0 }, + [`& .${tabsClasses.scroller}`]: { display: 'flex', justifyContent: {xs: 'flex-start', sm: 'center'} }, + [`& .${tabsClasses.scrollButtons}`]: { + '&.MuiTabs-scrollButtons.Mui-disabled': { display: 'none' }, + '&:first-of-type': { display: currentTab === 'publications' ? 'none' : 'flex' }, + }, }} > {tabsWithCounts.map((tab) => ( From dc1a0131fcda240a76f821015a11d039e7e5eeba Mon Sep 17 00:00:00 2001 From: Carlos Andres Perez Ubeda Date: Mon, 27 Jan 2025 16:12:49 -0600 Subject: [PATCH 02/10] feat(finance): enhance quick transfer UI with new components - **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. --- .../components/finance-display-name.tsx | 47 +++++++++++++ .../finance-no-followings-quick-transfer.tsx | 69 +++++++++++++++++++ .../components/finance-quick-transfer.tsx | 11 ++- src/sections/finance/index.tsx | 2 +- 4 files changed, 126 insertions(+), 3 deletions(-) create mode 100644 src/sections/finance/components/finance-display-name.tsx create mode 100644 src/sections/finance/components/finance-no-followings-quick-transfer.tsx diff --git a/src/sections/finance/components/finance-display-name.tsx b/src/sections/finance/components/finance-display-name.tsx new file mode 100644 index 00000000..aeb0e873 --- /dev/null +++ b/src/sections/finance/components/finance-display-name.tsx @@ -0,0 +1,47 @@ +import Box from "@mui/material/Box"; +import Typography from "@mui/material/Typography"; +import {FC} from "react"; +import {Profile} from "@lens-protocol/api-bindings"; +import {truncateAddress} from "@src/utils/wallet.ts"; + +interface FinanceDisplayNameProps { + initialList?: Profile[]; + carousel: any; +} + +/** + * FinanceDisplayName is a functional component responsible for rendering the display name + * of a selected profile from a provided list. If no list is provided or the list is empty, + * the component returns null. Otherwise, it displays the name of the currently selected + * profile in a styled container. + * + * Props: + * @param {Object} initialList - Array of profiles containing details such as the local name. + * @param {Object} carousel - Object containing the current index used to determine the selected profile. + * + * Behavior: + * - If initialList is empty or null, the component does not render anything. + * - It selects a profile based on the carousel's currentIndex and renders the localName of that profile. + * - If no profile is selected, it falls back to a default message ('No profile selected'). + */ +const FinanceDisplayName: FC = ({initialList, carousel}) => { + // If the initial list is empty, return + if (!initialList?.length) { + return null; + } + + const selectedProfile = initialList?.[carousel.currentIndex]; + return ( + + + {selectedProfile?.metadata?.displayName ?? 'No profile selected'} + + + {truncateAddress(selectedProfile?.ownedBy?.address)} + + + + ); +} + +export default FinanceDisplayName; diff --git a/src/sections/finance/components/finance-no-followings-quick-transfer.tsx b/src/sections/finance/components/finance-no-followings-quick-transfer.tsx new file mode 100644 index 00000000..bf53ce7c --- /dev/null +++ b/src/sections/finance/components/finance-no-followings-quick-transfer.tsx @@ -0,0 +1,69 @@ +import Box from "@mui/material/Box"; +import Stack from "@mui/material/Stack"; +import Typography from "@mui/material/Typography"; + +/** + * FinanceNoFollowingsQuickTransfer is a React functional component that serves as a user interface element + * to guide users when there are no followings available for quick transfers. + * + * Features: + * - Displays a message prompting the user to follow someone in order to make transfers. + * - Includes a visual divider with an "OR" indicator for alternate actions. + * - Provides instructions to perform a search to initiate a transfer. + * + * Styling: + * - The component utilizes a centrally aligned design with spacing between elements. + * - A dashed line and a circular indicator are used as visual cues. + * - Background color and opacity settings enhance readability and focus. + */ +const FinanceNoFollowingsQuickTransfer = () => { + return ( + + + + Here appear your followings. Follow one to transfer. + + + + + + OR + + + + + Perform a search to start a transfer. + + + + ); +} + +export default FinanceNoFollowingsQuickTransfer; diff --git a/src/sections/finance/components/finance-quick-transfer.tsx b/src/sections/finance/components/finance-quick-transfer.tsx index f23ba4ef..3c4b5791 100644 --- a/src/sections/finance/components/finance-quick-transfer.tsx +++ b/src/sections/finance/components/finance-quick-transfer.tsx @@ -30,6 +30,9 @@ import { InputAmount } from '@src/components/input-amount.tsx'; import FinanceQuickTransferModal from '@src/sections/finance/components/finance-quick-transfer-modal.tsx'; import FinanceSearchProfileModal from '@src/sections/finance/components/finance-search-profile-modal.tsx'; import AvatarProfile from "@src/components/avatar/avatar.tsx"; +import FinanceDisplayName from "@src/sections/finance/components/finance-display-name.tsx"; +import FinanceNoFollowingsQuickTransfer + from "@src/sections/finance/components/finance-no-followings-quick-transfer.tsx"; // ---------------------------------------------------------------------- @@ -294,6 +297,7 @@ export default function FinanceQuickTransfer({ const contactInfoToPass = currentIndex === -1 ? undefined : getContactInfo; // Render the wallet address input + // @ts-ignore const renderWalletInput = ( - {renderWalletInput} - {!!list?.length && renderCarousel} + {/*{renderWalletInput}*/} + + {!!list?.length ? renderCarousel : } {renderInput} @@ -471,3 +477,4 @@ export default function FinanceQuickTransfer({ ); } + diff --git a/src/sections/finance/index.tsx b/src/sections/finance/index.tsx index eaca528e..e776d3c6 100644 --- a/src/sections/finance/index.tsx +++ b/src/sections/finance/index.tsx @@ -110,7 +110,7 @@ export default function OverviewBankingView() { Date: Mon, 27 Jan 2025 17:52:46 -0600 Subject: [PATCH 03/10] refactor: modularize amount constraints logic and UI updates - 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. --- .../components/finance-quick-transfer.tsx | 34 ++++++------------- src/utils/format-number.ts | 31 +++++++++++++++++ 2 files changed, 41 insertions(+), 24 deletions(-) diff --git a/src/sections/finance/components/finance-quick-transfer.tsx b/src/sections/finance/components/finance-quick-transfer.tsx index 3c4b5791..1bbe8ac1 100644 --- a/src/sections/finance/components/finance-quick-transfer.tsx +++ b/src/sections/finance/components/finance-quick-transfer.tsx @@ -30,16 +30,17 @@ import { InputAmount } from '@src/components/input-amount.tsx'; import FinanceQuickTransferModal from '@src/sections/finance/components/finance-quick-transfer-modal.tsx'; import FinanceSearchProfileModal from '@src/sections/finance/components/finance-search-profile-modal.tsx'; import AvatarProfile from "@src/components/avatar/avatar.tsx"; -import FinanceDisplayName from "@src/sections/finance/components/finance-display-name.tsx"; import FinanceNoFollowingsQuickTransfer - from "@src/sections/finance/components/finance-no-followings-quick-transfer.tsx"; + from "@src/sections/finance/components/finance-no-followings-quick-transfer"; +import FinanceDisplayProfileInfo from "@src/sections/finance/components/finance-display-profile-info"; +import {handleAmountConstraints} from "@src/utils/format-number.ts"; // ---------------------------------------------------------------------- const STEP = 50; const MIN_AMOUNT = 0; // A thousand millions allowed in the pool -const MAX_POOL: number = 1000000000; +export const MAX_POOL: number = 1000000000; interface Props extends CardProps { title?: string; @@ -214,31 +215,14 @@ export default function FinanceQuickTransfer({ } }, [MAX_AMOUNT]); - // Helper function to handle amount constraints - const handleAmountConstraints = (value: number, MAX_AMOUNT: number) => { - if (value > MAX_POOL) { - value = MAX_POOL; // Truncate to a thousand millions - } - if (value < 0) { - value = 0; // Set amount to 0 if lower than 0 - } - setAmount(value); - setCanContinue(value <= MAX_AMOUNT); - - // If amount is greater than balance, allow input but setCanContinue to false - if (value > MAX_AMOUNT) { - setCanContinue(false); - } - }; - const handleChangeInput = useCallback((event: React.ChangeEvent) => { const value = Number(event.target.value); - handleAmountConstraints(value, MAX_AMOUNT); + handleAmountConstraints({value, MAX_AMOUNT, MAX_POOL, setAmount, setCanContinue}); }, [MAX_AMOUNT]); const handleBlur = useCallback(() => { - handleAmountConstraints(amount, MAX_AMOUNT); + handleAmountConstraints({value: amount, MAX_AMOUNT, MAX_POOL, setAmount, setCanContinue}); }, [amount, MAX_AMOUNT]); @@ -422,7 +406,7 @@ export default function FinanceQuickTransfer({ disabled={amount === 0 || !isValidAddress(walletAddress) || !canContinue} onClick={confirm.onTrue} > - Transfer Now + Quick transfer ); @@ -447,6 +431,7 @@ export default function FinanceQuickTransfer({ {...other} > } @@ -455,8 +440,9 @@ export default function FinanceQuickTransfer({ {/* Content */} {/*{renderWalletInput}*/} - + {!!list?.length ? renderCarousel : } + {renderInput} diff --git a/src/utils/format-number.ts b/src/utils/format-number.ts index b8242a75..357b25cd 100644 --- a/src/utils/format-number.ts +++ b/src/utils/format-number.ts @@ -42,3 +42,34 @@ export function formatBalanceNumber(balance: number) { const balanceOptions = { minimumFractionDigits: 1, maximumFractionDigits: 3 }; return new Intl.NumberFormat('en-US', balanceOptions).format(balance as any); } + +interface AmountConstraintsProps { + value: number; + MAX_AMOUNT: number; + MAX_POOL: number; + setAmount: (value: number) => void; + setCanContinue: (canContinue: boolean) => void; +} + +export const handleAmountConstraints = ({ + value, + MAX_AMOUNT, + MAX_POOL, + setAmount, + setCanContinue, + }: AmountConstraintsProps) => { + if (value > MAX_POOL) { + value = MAX_POOL; // Truncate to a thousand millions + } + if (value < 0) { + value = 0; // Set amount to 0 if lower than 0 + } + setAmount(value); + setCanContinue(value <= MAX_AMOUNT); + + // If amount is greater than balance, allow input but setCanContinue to false + if (value > MAX_AMOUNT || value <= 0) { + setCanContinue(false); + } + console.log('value', value); +}; From 345240f3b5d920c0b6bde39d2d4d3379d1d75b3e Mon Sep 17 00:00:00 2001 From: Carlos Andres Perez Ubeda Date: Mon, 27 Jan 2025 17:53:04 -0600 Subject: [PATCH 04/10] refactor: rename and enhance finance display component - 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. --- ...e.tsx => finance-display-profile-info.tsx} | 25 ++++++++++++------- 1 file changed, 16 insertions(+), 9 deletions(-) rename src/sections/finance/components/{finance-display-name.tsx => finance-display-profile-info.tsx} (66%) diff --git a/src/sections/finance/components/finance-display-name.tsx b/src/sections/finance/components/finance-display-profile-info.tsx similarity index 66% rename from src/sections/finance/components/finance-display-name.tsx rename to src/sections/finance/components/finance-display-profile-info.tsx index aeb0e873..2f802c68 100644 --- a/src/sections/finance/components/finance-display-name.tsx +++ b/src/sections/finance/components/finance-display-profile-info.tsx @@ -5,6 +5,7 @@ import {Profile} from "@lens-protocol/api-bindings"; import {truncateAddress} from "@src/utils/wallet.ts"; interface FinanceDisplayNameProps { + mode: 'profile' | 'wallet'; initialList?: Profile[]; carousel: any; } @@ -18,13 +19,14 @@ interface FinanceDisplayNameProps { * Props: * @param {Object} initialList - Array of profiles containing details such as the local name. * @param {Object} carousel - Object containing the current index used to determine the selected profile. + * @param {string} mode - Determines whether to display the profile name or wallet address. * * Behavior: * - If initialList is empty or null, the component does not render anything. * - It selects a profile based on the carousel's currentIndex and renders the localName of that profile. * - If no profile is selected, it falls back to a default message ('No profile selected'). */ -const FinanceDisplayName: FC = ({initialList, carousel}) => { +const FinanceDisplayProfileInfo: FC = ({initialList, carousel, mode}) => { // If the initial list is empty, return if (!initialList?.length) { return null; @@ -33,15 +35,20 @@ const FinanceDisplayName: FC = ({initialList, carousel} const selectedProfile = initialList?.[carousel.currentIndex]; return ( - - {selectedProfile?.metadata?.displayName ?? 'No profile selected'} - - - {truncateAddress(selectedProfile?.ownedBy?.address)} - - + { + mode === 'profile' ? + ( + {selectedProfile?.metadata?.displayName ?? 'No profile selected'} + ) : null + } + { + mode === 'wallet' ? + + {truncateAddress(selectedProfile?.ownedBy?.address)} + : null + } ); } -export default FinanceDisplayName; +export default FinanceDisplayProfileInfo; From 681dd5958868a11beeee690980a0ecb88b03c68e Mon Sep 17 00:00:00 2001 From: Carlos Andres Perez Ubeda Date: Mon, 27 Jan 2025 17:53:12 -0600 Subject: [PATCH 05/10] feat: enhance transfer modal with input validation and constraints - `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. --- .../finance-quick-transfer-modal.tsx | 46 +++++++++++++++---- 1 file changed, 36 insertions(+), 10 deletions(-) diff --git a/src/sections/finance/components/finance-quick-transfer-modal.tsx b/src/sections/finance/components/finance-quick-transfer-modal.tsx index ecdc1ad0..db1dacd1 100644 --- a/src/sections/finance/components/finance-quick-transfer-modal.tsx +++ b/src/sections/finance/components/finance-quick-transfer-modal.tsx @@ -1,4 +1,4 @@ -import { useEffect, useState } from 'react'; +import React, {useCallback, useEffect, useState} from 'react'; import { useSelector } from 'react-redux'; // MUI components @@ -21,7 +21,7 @@ import LoadingButton from '@mui/lab/LoadingButton'; import { supabase } from '@src/utils/supabase'; import { useNotificationPayload } from '@src/hooks/use-notification-payload.ts'; import { useNotifications } from '@src/hooks/use-notifications.ts'; -import { InputAmountProps } from '@src/components/input-amount.tsx'; +import {InputAmount, InputAmountProps} from '@src/components/input-amount.tsx'; import { useTransfer } from '@src/hooks/use-transfer.ts'; // Notifications @@ -30,6 +30,8 @@ import { SUCCESS } from '@notifications/success.ts'; import { ERRORS } from '@notifications/errors.ts'; import {dicebear} from "@src/utils/dicebear.ts"; import AvatarProfile from "@src/components/avatar/avatar.tsx"; +import {MAX_POOL} from "@src/sections/finance/components/finance-quick-transfer.tsx"; +import {handleAmountConstraints} from "@src/utils/format-number.ts"; type TConfirmTransferDialogProps = InputAmountProps & DialogProps; @@ -55,6 +57,12 @@ function FinanceQuickTransferModal({ const { sendNotification } = useNotifications(); const [message, setMessage] = useState(''); + // For transfer button is clicked in some profile + const balance = useSelector((state: any) => state.auth.balance); + const MAX_AMOUNT = balance; + const [value, setValue] = useState(0); + const [canContinue, setCanContinue] = useState(true); + // Check if we have a valid profile or not const hasProfile = !!contactInfo; @@ -100,7 +108,7 @@ function FinanceQuickTransferModal({ const handleConfirmTransfer = async () => { try { - await transfer({ amount, recipient: address ?? '' }); + await transfer({ amount: amount > 0 ? amount: value, recipient: address ?? '' }); onFinish(); @@ -123,7 +131,7 @@ function FinanceQuickTransferModal({ // Store transaction in supabase await storeTransactionInSupabase(contactInfo?.id ?? address, senderId, { address: contactInfo?.ownedBy?.address ?? address, - amount, + amount: amount > 0 ? amount : value, message, ...notificationPayload, }); @@ -143,6 +151,16 @@ function FinanceQuickTransferModal({ } }; + const handleChangeInput = useCallback((event: React.ChangeEvent) => { + const value = Number(event.target.value); + handleAmountConstraints({value, MAX_AMOUNT, MAX_POOL, setAmount: setValue, setCanContinue}); + }, [MAX_AMOUNT]); + + + const handleBlur = useCallback(() => { + handleAmountConstraints({value, MAX_AMOUNT, MAX_POOL, setAmount: setValue, setCanContinue}); + }, [value, MAX_AMOUNT]); + const RainbowEffect = transferLoading ? NeonPaper : Box; return ( @@ -165,11 +183,19 @@ function FinanceQuickTransferModal({ - + {amount > 0 ? ( + + + ) : } @@ -190,7 +216,7 @@ function FinanceQuickTransferModal({ variant="contained" sx={{ backgroundColor: '#fff' }} onClick={handleConfirmTransfer} - disabled={transferLoading} + disabled={transferLoading || !canContinue} loading={transferLoading} > Confirm From 1e4dfb8365dd7aa35142aec2027aa78d4857179b Mon Sep 17 00:00:00 2001 From: Carlos Andres Perez Ubeda Date: Mon, 27 Jan 2025 17:53:20 -0600 Subject: [PATCH 06/10] feat: add profile transfer component - 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-transfer.tsx | 41 ++++++++++++++++++++++++++ 1 file changed, 41 insertions(+) create mode 100644 src/sections/user/profile-transfer.tsx diff --git a/src/sections/user/profile-transfer.tsx b/src/sections/user/profile-transfer.tsx new file mode 100644 index 00000000..d3aec67e --- /dev/null +++ b/src/sections/user/profile-transfer.tsx @@ -0,0 +1,41 @@ +import {Profile} from "@lens-protocol/api-bindings"; +import {FC} from "react"; +import FinanceQuickTransferModal from "@src/sections/finance/components/finance-quick-transfer-modal.tsx"; +import LoadingButton from "@mui/lab/LoadingButton"; +import {useBoolean} from "@src/hooks/use-boolean.ts"; + +interface ProfileTransferProps { + profile: Profile; +} + +const ProfileTransfer: FC = ({profile}) => { + const confirm = useBoolean(); + + const handleOpen = () => { + confirm.onTrue(); + } + + const handleTransferFinish = () => { + confirm.onFalse(); + } + + return ( + <> + + Transfer + + + + + ) +} + +export default ProfileTransfer; From 5a95a99c061e8a3cbe33b6d7d6020b9948dd3599 Mon Sep 17 00:00:00 2001 From: Carlos Andres Perez Ubeda Date: Mon, 27 Jan 2025 17:53:32 -0600 Subject: [PATCH 07/10] feat: add profile transfer component and clean up quick transfer - **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. --- src/sections/finance/index.tsx | 3 +-- src/sections/user/profile-header.tsx | 4 ++++ 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/src/sections/finance/index.tsx b/src/sections/finance/index.tsx index e776d3c6..86aca3f6 100644 --- a/src/sections/finance/index.tsx +++ b/src/sections/finance/index.tsx @@ -76,7 +76,7 @@ export default function OverviewBankingView() { }} /> - {!mdUp ? : null} + {!mdUp ? : null} {lgUp ? : null} @@ -110,7 +110,6 @@ export default function OverviewBankingView() { )} + {profile?.id !== sessionData?.profile?.id && ( + + )} From 56fc8aefb825b17de74c5ff3de1d5b74d990c593 Mon Sep 17 00:00:00 2001 From: Carlos Andres Perez Ubeda Date: Mon, 27 Jan 2025 18:02:28 -0600 Subject: [PATCH 08/10] fix: enhance profile transfer behavior and button styling - **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. --- src/sections/user/profile-header.tsx | 8 +++++--- src/sections/user/profile-transfer.tsx | 5 ++++- 2 files changed, 9 insertions(+), 4 deletions(-) diff --git a/src/sections/user/profile-header.tsx b/src/sections/user/profile-header.tsx index 1d50d1c3..5eb25957 100644 --- a/src/sections/user/profile-header.tsx +++ b/src/sections/user/profile-header.tsx @@ -127,9 +127,11 @@ const ProfileHeader = ({ {profile?.id !== sessionData?.profile?.id && ( )} - {profile?.id !== sessionData?.profile?.id && ( - - )} + { + sessionData?.authenticated && profile?.id !== sessionData?.profile?.id && ( + + ) + } diff --git a/src/sections/user/profile-transfer.tsx b/src/sections/user/profile-transfer.tsx index d3aec67e..795a4bbc 100644 --- a/src/sections/user/profile-transfer.tsx +++ b/src/sections/user/profile-transfer.tsx @@ -21,7 +21,10 @@ const ProfileTransfer: FC = ({profile}) => { return ( <> - + Transfer From 9a46e28531a034328b87843223fb5a294f46cb08 Mon Sep 17 00:00:00 2001 From: Carlos Andres Perez Ubeda Date: Mon, 27 Jan 2025 18:19:29 -0600 Subject: [PATCH 09/10] refactor: remove unused wallet input from quick transfer - 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. --- .../components/finance-quick-transfer.tsx | 19 +------------------ 1 file changed, 1 insertion(+), 18 deletions(-) diff --git a/src/sections/finance/components/finance-quick-transfer.tsx b/src/sections/finance/components/finance-quick-transfer.tsx index 1bbe8ac1..051bfc1f 100644 --- a/src/sections/finance/components/finance-quick-transfer.tsx +++ b/src/sections/finance/components/finance-quick-transfer.tsx @@ -280,22 +280,6 @@ export default function FinanceQuickTransfer({ // We pick the contactInfo to pass to the modal. If currentIndex is -1, there's no matched profile const contactInfoToPass = currentIndex === -1 ? undefined : getContactInfo; - // Render the wallet address input - // @ts-ignore - const renderWalletInput = ( - - - - ); - // Render the carousel of profiles const renderCarousel = ( @@ -439,9 +423,8 @@ export default function FinanceQuickTransfer({ {/* Content */} - {/*{renderWalletInput}*/} - {!!list?.length ? renderCarousel : } + {list?.length > 0 ? renderCarousel : } {renderInput} From 0d48d2e4fb5831dcee1ab03e0a65c734348d95d5 Mon Sep 17 00:00:00 2001 From: Carlos Andres Perez Ubeda Date: Mon, 27 Jan 2025 18:55:27 -0600 Subject: [PATCH 10/10] refactor: remove unused address error handling logic - 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. --- .../components/finance-quick-transfer.tsx | 25 +------------------ 1 file changed, 1 insertion(+), 24 deletions(-) diff --git a/src/sections/finance/components/finance-quick-transfer.tsx b/src/sections/finance/components/finance-quick-transfer.tsx index 051bfc1f..efca0d98 100644 --- a/src/sections/finance/components/finance-quick-transfer.tsx +++ b/src/sections/finance/components/finance-quick-transfer.tsx @@ -3,7 +3,7 @@ import React, { useCallback, useEffect, useState } from 'react'; // REDUX IMPORTS import { useDispatch, useSelector } from 'react-redux'; -import { storeAddress, toggleRainbow } from '@redux/address'; +import { storeAddress } from '@redux/address'; // LENS IMPORTS import { Profile } from '@lens-protocol/api-bindings'; @@ -17,7 +17,6 @@ import Stack from '@mui/material/Stack'; import Button from '@mui/material/Button'; import Slider from '@mui/material/Slider'; import Tooltip from '@mui/material/Tooltip'; -import TextField from '@mui/material/TextField'; import Box from '@mui/material/Box'; import CardHeader from '@mui/material/CardHeader'; import { CardProps } from '@mui/material/Card'; @@ -71,7 +70,6 @@ export default function FinanceQuickTransfer({ // Local states const [walletAddress, setWalletAddress] = useState(storedAddress.address ?? ''); - const [addressError, setAddressError] = useState(false); const [currentIndex, setCurrentIndex] = useState(0); const [addressFiltered, setAddressFiltered] = useState(false); const [initialized, setInitialized] = useState(false); @@ -186,27 +184,6 @@ export default function FinanceQuickTransfer({ } }, [initialList]); - // Handle changes in the input field for the wallet address - const handleInputChange = (event: React.ChangeEvent) => { - const value = event.target.value; - setWalletAddress(value); - dispatch(storeAddress({ address: value, profileId: getContactInfo?.id ?? '' })); - - // If it's a valid address, let the next effect handle searching in the list - if (isValidAddress(value)) { - setAddressFiltered(true); // We set a flag that we typed a valid address - dispatch(toggleRainbow()); - setAddressError(false); - } else { - setAddressError(true); - } - - // Rainbow effect trigger - setTimeout(() => { - dispatch(toggleRainbow()); - }, 1400); - }; - // Handle changes in the slider const handleChangeSlider = useCallback((_event: Event, newValue: number | number[]) => { setAmount(newValue as number);