chore: wallet-ui send workflow allow return back #468
Conversation
khanti42
requested review from
Julink-eth and
wantedsystem
and removed request for
a team
|
|
| @@ -47,6 +47,18 @@ export const SendModalView = ({ closeModal }: Props) => { | |||
| const debounceRef = useRef<NodeJS.Timeout | null>(null); | |||
| const [loading, setLoading] = useState(false); | |||
|
|
|||
| useEffect(() => {}, [fields]); | |||
There was a problem hiding this comment.
what is the purpose to have the useEffect?
| @@ -110,29 +103,29 @@ export const AmountInputView = ({ | |||
| }; | |||
|
|
|||
| const handleMaxClick = () => { | |||
| if (inputRef.current && asset.usdPrice) { | |||
| if (value && asset.usdPrice) { | |||
There was a problem hiding this comment.
no need to check the value here, as either the value is empty or not, the Max button should behave the same
| <ButtonStyled onClick={closeModal} backgroundTransparent borderVisible> | ||
| REJECT | ||
| <ButtonStyled | ||
| onClick={() => handleBack(amount, address)} |
There was a problem hiding this comment.
| onClick={() => handleBack(amount, address)} | |
| onClick={() => handleBack()} |
| const handleBack = (amount: string, address: string) => { | ||
| setSummaryModalOpen(false); | ||
|
|
||
| setFields((prevFields) => ({ | ||
| ...prevFields, | ||
| amount: amount, | ||
| address: address, | ||
| })); | ||
| }; |
There was a problem hiding this comment.
| const handleBack = (amount: string, address: string) => { | |
| setSummaryModalOpen(false); | |
| setFields((prevFields) => ({ | |
| ...prevFields, | |
| amount: amount, | |
| address: address, | |
| })); | |
| }; | |
| const handleBack = () => { | |
| setSummaryModalOpen(false); | |
| }; |
setFields is not necessary, as the user still in the send model after the confirmation model render, the state will be remained
| @@ -39,6 +39,7 @@ interface Props { | |||
| amount: string; | |||
| chainId: string; | |||
| closeModal?: () => void; | |||
| handleBack: (amount: string, address: string) => void; | |||
There was a problem hiding this comment.
| handleBack: (amount: string, address: string) => void; | |
| handleBack: () => void; |
| ? getAmountPrice(asset, amountFloat, false) | ||
| : amountStr; | ||
| fetchTotalPrice(); | ||
| resizeInput(); | ||
| triggerOnChange(); | ||
| triggerOnChange(value); | ||
| } | ||
| }; | ||
|
|
||
| useEffect(() => { |
There was a problem hiding this comment.
this useEffect block is no need, as setInputValue has fired in triggerOnChange
|
|
||
| useEffect(() => { | ||
| fetchTotalPrice(); | ||
| }, [fetchTotalPrice]); |
There was a problem hiding this comment.
| }, [fetchTotalPrice]); | |
| }, [asset, inputValue, usdMode]); |
remove the useCallback , but move it to useEffect for easier understand
| inputRef.current && fetchTotalPrice(); | ||
| }; | ||
|
|
||
| }, [resizeInput]); |
There was a problem hiding this comment.
| }, [resizeInput]); | |
| }, [inputValue]); | |
same comment as below, remove the useCallback
| fetchTotalPrice(); | ||
| resizeInput(); |
There was a problem hiding this comment.
| fetchTotalPrice(); | |
| resizeInput(); |
this 2 can be removed, as they will triggered at onEffect
Based on QA review, this PR introduces functionality that allows users to navigate back from the “Send Summary Modal View” to the “Send View” while retaining the address and value of the transaction. This ensures users can easily update the transaction parameters if needed without starting over.