From 6ed2d87152d6b8baef4198a5928f0d053e0cf86f Mon Sep 17 00:00:00 2001 From: Florin Dzeladini Date: Wed, 18 Dec 2024 15:00:37 +0100 Subject: [PATCH] chore: wallet-ui send workflow back --- .../molecule/AmountInput/AmountInput.view.tsx | 77 +++++++++---------- .../Header/SendModal/SendModal.view.tsx | 17 +++- .../SendSummaryModal.view.tsx | 10 ++- 3 files changed, 59 insertions(+), 45 deletions(-) diff --git a/packages/wallet-ui/src/components/ui/molecule/AmountInput/AmountInput.view.tsx b/packages/wallet-ui/src/components/ui/molecule/AmountInput/AmountInput.view.tsx index 52409d84..eee7bd1a 100644 --- a/packages/wallet-ui/src/components/ui/molecule/AmountInput/AmountInput.view.tsx +++ b/packages/wallet-ui/src/components/ui/molecule/AmountInput/AmountInput.view.tsx @@ -1,4 +1,4 @@ -import { KeyboardEvent, useEffect } from 'react'; +import { KeyboardEvent, useCallback, useEffect } from 'react'; import { InputHTMLAttributes, useRef, useState } from 'react'; import { HelperText } from '../../atom/HelperText'; import { Label } from '../../atom/Label'; @@ -20,6 +20,7 @@ interface Props extends InputHTMLAttributes { error?: boolean; helperText?: string; label?: string; + value?: string; decimalsMax?: number; asset: Erc20TokenBalance; onChangeCustom?: (value: string) => void; @@ -30,6 +31,7 @@ export const AmountInputView = ({ error, helperText, label, + value, decimalsMax = 18, asset, onChangeCustom, @@ -37,55 +39,46 @@ export const AmountInputView = ({ }: Props) => { const [focused, setFocused] = useState(false); const inputRef = useRef(null); + const [inputValue, setInputValue] = useState(value || ''); // Manage the input's value const [totalPrice, setTotalPrice] = useState(''); const [usdMode, setUsdMode] = useState(false); - const fetchTotalPrice = () => { - const inputValue = inputRef.current?.value || ''; + const fetchTotalPrice = useCallback(() => { if (asset.usdPrice && inputValue && inputValue !== '.') { const inputFloat = parseFloat(inputValue); setTotalPrice(getAmountPrice(asset, inputFloat, usdMode)); } else { setTotalPrice(''); } - }; + }, [asset, inputValue, usdMode]); - const resizeInput = () => { - if (inputRef.current !== null) - inputRef.current.style.width = - inputRef.current.value.length * 8 + 6 + 'px'; - }; + const resizeInput = useCallback(() => { + if (inputRef.current !== null) { + inputRef.current.style.width = inputValue.length * 8 + 6 + 'px'; + } + }, [inputValue]); - const triggerOnChange = () => { - //If we are in USD mode we sent the eth amount as the value - let valueToSend = inputRef.current?.value || ''; + const triggerOnChange = (newValue: string) => { + setInputValue(newValue); if (onChangeCustom) { - if ( - usdMode && - asset.usdPrice && - inputRef.current?.value && - inputRef.current?.value !== '.' - ) { - const inputFloat = parseFloat(inputRef.current.value); + let valueToSend = newValue; + if (usdMode && asset.usdPrice && newValue && newValue !== '.') { + const inputFloat = parseFloat(newValue); valueToSend = getAmountPrice(asset, inputFloat, usdMode); } onChangeCustom(valueToSend); } }; - const handleOnKeyUp = () => { - //Resize the input depending on content + useEffect(() => { + // Adjust the input size whenever the value changes resizeInput(); - inputRef.current && fetchTotalPrice(); - }; - + }, [resizeInput]); const handleOnKeyDown = (event: KeyboardEvent) => { //Only accept numeric and decimals if ( (!/[0-9]|\./.test(event.key) || - (event.key === '.' && - inputRef.current && - inputRef.current.value.includes('.'))) && + (event.key === '.' && inputValue.includes('.'))) && !isSpecialInputKey(event) ) { event.preventDefault(); @@ -93,9 +86,9 @@ export const AmountInputView = ({ } //Check decimals - if (inputRef.current && inputRef.current.value.includes('.')) { - const decimalIndex = inputRef.current.value.indexOf('.'); - const decimals = inputRef.current.value.substring(decimalIndex); + if (inputValue.includes('.')) { + const decimalIndex = inputValue.indexOf('.'); + const decimals = inputValue.substring(decimalIndex); if (decimals.length >= decimalsMax && !isSpecialInputKey(event)) { event.preventDefault(); return; @@ -110,29 +103,29 @@ export const AmountInputView = ({ }; const handleMaxClick = () => { - if (inputRef.current && asset.usdPrice) { + if (value && asset.usdPrice) { const amountStr = ethers.utils .formatUnits(asset.amount, asset.decimals) .toString(); const amountFloat = parseFloat(amountStr); - inputRef.current.value = usdMode + const value = usdMode ? getAmountPrice(asset, amountFloat, false) : amountStr; fetchTotalPrice(); resizeInput(); - triggerOnChange(); + triggerOnChange(value); } }; useEffect(() => { - if (inputRef.current?.value && inputRef.current?.value !== '.') { - inputRef.current.value = totalPrice; - fetchTotalPrice(); - triggerOnChange(); - resizeInput(); + if (value !== undefined) { + setInputValue(value); } - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [usdMode]); + }, [value]); + + useEffect(() => { + fetchTotalPrice(); + }, [fetchTotalPrice]); return ( @@ -150,14 +143,14 @@ export const AmountInputView = ({ setFocused(true)} onBlur={() => setFocused(false)} ref={inputRef} - onKeyUp={() => handleOnKeyUp()} onKeyDown={(event) => handleOnKeyDown(event)} - onChange={(event) => triggerOnChange()} + onChange={(event) => triggerOnChange(event.target.value)} {...otherProps} /> {!usdMode && ( diff --git a/packages/wallet-ui/src/components/ui/organism/Header/SendModal/SendModal.view.tsx b/packages/wallet-ui/src/components/ui/organism/Header/SendModal/SendModal.view.tsx index 83bd1fe0..eac7fb43 100644 --- a/packages/wallet-ui/src/components/ui/organism/Header/SendModal/SendModal.view.tsx +++ b/packages/wallet-ui/src/components/ui/organism/Header/SendModal/SendModal.view.tsx @@ -1,4 +1,4 @@ -import { useRef, useState } from 'react'; +import { useEffect, useRef, useState } from 'react'; import { AmountInput } from 'components/ui/molecule/AmountInput'; import { SendSummaryModal } from '../SendSummaryModal'; import { @@ -47,6 +47,18 @@ export const SendModalView = ({ closeModal }: Props) => { const debounceRef = useRef(null); const [loading, setLoading] = useState(false); + useEffect(() => {}, [fields]); + + const handleBack = (amount: string, address: string) => { + setSummaryModalOpen(false); + + setFields((prevFields) => ({ + ...prevFields, + amount: amount, + address: address, + })); + }; + const handleChange = (fieldName: string, fieldValue: string) => { //Check if input amount does not exceed user balance setErrors((prevErrors) => ({ @@ -142,6 +154,7 @@ export const SendModalView = ({ closeModal }: Props) => { label="To" placeholder="Paste recipient address or .stark name here" onChange={(value) => handleChange('address', value.target.value)} + value={fields.address} disableValidate validateError={errors.address} /> @@ -157,6 +170,7 @@ export const SendModalView = ({ closeModal }: Props) => { handleChange('amount', value)} + value={fields.amount} error={errors.amount !== '' ? true : false} helperText={errors.amount} decimalsMax={wallet.erc20TokenBalanceSelected.decimals} @@ -198,6 +212,7 @@ export const SendModalView = ({ closeModal }: Props) => { {summaryModalOpen && ( void; + handleBack: (amount: string, address: string) => void; selectedFeeToken: FeeToken; } @@ -47,6 +48,7 @@ export const SendSummaryModalView = ({ amount, chainId, closeModal, + handleBack, selectedFeeToken, }: Props) => { const wallet = useAppSelector((state) => state.wallet); @@ -316,8 +318,12 @@ export const SendSummaryModalView = ({ )} - - REJECT + handleBack(amount, address)} + backgroundTransparent + borderVisible + > + BACK