chore: wallet-ui send workflow allow return back

packages/wallet-ui/src/assets/locales/en.json

@@ -34,6 +34,9 @@
     "amount": {
       "message": "Amount"
     },
+    "back": {
+      "message": "Back"
+    },
     "cancel": {
       "message": "CANCEL"
     },

packages/wallet-ui/src/assets/locales/fr.json

@@ -34,6 +34,9 @@
     "amount": {
       "message": "Montant"
     },
+    "back": {
+      "message": "Retour"
+    },
     "cancel": {
       "message": "ANNULER"
     },

packages/wallet-ui/src/components/ui/molecule/AmountInput/AmountInput.style.ts

@@ -65,7 +65,6 @@ export const MaxButton = styled(Button).attrs((props) => ({
 export const Input = styled.input<IInput>`
   border: none;
   height: 50px;
-  width: 8px;
   font-size: ${(props) => props.theme.typography.p2.fontSize};
   font-family: ${(props) => props.theme.typography.p2.fontFamily};
   color: ${(props) =>

packages/wallet-ui/src/components/ui/molecule/AmountInput/AmountInput.view.tsx

@@ -20,6 +20,7 @@ interface Props extends InputHTMLAttributes<HTMLInputElement> {
   error?: boolean;
   helperText?: string;
   label?: string;
+  value?: string;
   decimalsMax?: number;
   asset: Erc20TokenBalance;
   onChangeCustom?: (value: string) => void;
@@ -30,72 +31,52 @@ export const AmountInputView = ({
   error,
   helperText,
   label,
+  value,
   decimalsMax = 18,
   asset,
   onChangeCustom,
   ...otherProps
 }: Props) => {
   const [focused, setFocused] = useState(false);
   const inputRef = useRef<HTMLInputElement>(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 || '';
-    if (asset.usdPrice && inputValue && inputValue !== '.') {
-      const inputFloat = parseFloat(inputValue);
-      setTotalPrice(getAmountPrice(asset, inputFloat, usdMode));
-    } else {
-      setTotalPrice('');
-    }
-  };
-
-  const resizeInput = () => {
-    if (inputRef.current !== null)
-      inputRef.current.style.width =
-        inputRef.current.value.length * 8 + 6 + 'px';
-  };
-
-  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
-    resizeInput();
-    inputRef.current && fetchTotalPrice();
-  };
+  useEffect(() => {
+    // Adjust the input size whenever the value changes
+    if (inputRef.current !== null) {
+      inputRef.current.style.width = inputValue.length * 8 + 6 + 'px';
+    }
+  }, [inputValue]);
 
   const handleOnKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
     //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();
       return;
     }
 
     //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 +91,24 @@ export const AmountInputView = ({
   };
 
   const handleMaxClick = () => {
-    if (inputRef.current && asset.usdPrice) {
-      const amountStr = ethers.utils
-        .formatUnits(asset.amount, asset.decimals)
-        .toString();
-      const amountFloat = parseFloat(amountStr);
-      inputRef.current.value = usdMode
-        ? getAmountPrice(asset, amountFloat, false)
-        : amountStr;
-      fetchTotalPrice();
-      resizeInput();
-      triggerOnChange();
-    }
+    const amountStr = ethers.utils
+      .formatUnits(asset.amount, asset.decimals)
+      .toString();
+    const amountFloat = parseFloat(amountStr);
+    const value = usdMode
+      ? getAmountPrice(asset, amountFloat, false)
+      : amountStr;
+    triggerOnChange(value);
   };
 
   useEffect(() => {
-    if (inputRef.current?.value && inputRef.current?.value !== '.') {
-      inputRef.current.value = totalPrice;
-      fetchTotalPrice();
-      triggerOnChange();
-      resizeInput();
+    if (asset.usdPrice && inputValue && inputValue !== '.') {
+      const inputFloat = parseFloat(inputValue);
+      setTotalPrice(getAmountPrice(asset, inputFloat, usdMode));
+    } else {
+      setTotalPrice('');
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [usdMode]);
+  }, [asset, inputValue, usdMode]);
 
   return (
     <Wrapper>
@@ -150,14 +126,14 @@ export const AmountInputView = ({
         <Left>
           <Input
             error={error}
+            value={inputValue}
             disabled={disabled}
             focused={focused}
             onFocus={() => setFocused(true)}
             onBlur={() => setFocused(false)}
             ref={inputRef}
-            onKeyUp={() => handleOnKeyUp()}
             onKeyDown={(event) => handleOnKeyDown(event)}
-            onChange={(event) => triggerOnChange()}
+            onChange={(event) => triggerOnChange(event.target.value)}
             {...otherProps}
           />
           {!usdMode && (

packages/wallet-ui/src/components/ui/organism/Header/SendModal/SendModal.view.tsx

@@ -48,6 +48,10 @@ export const SendModalView = ({ closeModal }: Props) => {
   const debounceRef = useRef<NodeJS.Timeout | null>(null);
   const [loading, setLoading] = useState(false);
 
+  const handleBack = () => {
+    setSummaryModalOpen(false);
+  };
+
   const handleChange = (fieldName: string, fieldValue: string) => {
     //Check if input amount does not exceed user balance
     setErrors((prevErrors) => ({
@@ -143,6 +147,7 @@ export const SendModalView = ({ closeModal }: Props) => {
               label={translate('to')}
               placeholder={translate('pasteRecipientAddress')}
               onChange={(value) => handleChange('address', value.target.value)}
+              value={fields.address}
               disableValidate
               validateError={errors.address}
             />
@@ -158,6 +163,7 @@ export const SendModalView = ({ closeModal }: Props) => {
             <AmountInput
               label={translate('amount')}
               onChangeCustom={(value) => handleChange('amount', value)}
+              value={fields.amount}
               error={errors.amount !== '' ? true : false}
               helperText={errors.amount}
               decimalsMax={wallet.erc20TokenBalanceSelected.decimals}
@@ -199,6 +205,7 @@ export const SendModalView = ({ closeModal }: Props) => {
       {summaryModalOpen && (
         <SendSummaryModal
           closeModal={closeModal}
+          handleBack={handleBack}
           address={resolvedAddress}
           amount={fields.amount}
           chainId={fields.chainId}

packages/wallet-ui/src/components/ui/organism/Header/SendSummaryModal/SendSummaryModal.view.tsx

@@ -39,6 +39,7 @@ interface Props {
   amount: string;
   chainId: string;
   closeModal?: () => void;
+  handleBack: () => void;
   selectedFeeToken: FeeToken;
 }
 
@@ -47,6 +48,7 @@ export const SendSummaryModalView = ({
   amount,
   chainId,
   closeModal,
+  handleBack,
   selectedFeeToken,
 }: Props) => {
   const wallet = useAppSelector((state) => state.wallet);
@@ -310,8 +312,12 @@ export const SendSummaryModalView = ({
         )}
       </Wrapper>
       <Buttons>
-        <ButtonStyled onClick={closeModal} backgroundTransparent borderVisible>
-          {translate('reject')}
+        <ButtonStyled
+          onClick={() => handleBack()}
+          backgroundTransparent
+          borderVisible
+        >
+          {translate('back').toUpperCase()}
         </ButtonStyled>
         <ButtonStyled
           enabled={!estimatingGas && !gasFeesError && !totalExceedsBalance}