Limit input in Bridge and Send to 4 decimals

wallet/src/components/BridgeComponent/index.jsx

@@ -1,4 +1,4 @@
-import React, { useContext, useState, useCallback, useEffect } from 'react';
+import React, { useContext, useState, useEffect } from 'react';
 import Modal from 'react-bootstrap/Modal';
 import { MdArrowForwardIos } from 'react-icons/md';
 import { toast } from 'react-toastify';
@@ -54,7 +54,7 @@ const BridgeComponent = () => {
 
   const [token, setToken] = useState(initialToken);
   const [txType, setTxType] = useState(initialTx);
-  const [transferValue, setTransferValue] = useState(0);
+  const [transferValue, setTransferValue] = useState('0');
   const [show, setShow] = useState(false);
 
   const [showTokensListModal, setShowTokensListModal] = useState(false);
@@ -212,13 +212,6 @@ const BridgeComponent = () => {
     return false;
   }
 
-  const handleChange = useCallback(
-    e => {
-      setTransferValue(e.target.value);
-    },
-    [transferValue],
-  );
-
   const handleShow = () => {
     if (
       (txType === 'deposit' && transferValue > l1Balance) ||
@@ -338,7 +331,15 @@ const BridgeComponent = () => {
                       name="price"
                       prefix="$"
                       placeholder="0,00"
-                      onChange={handleChange}
+                      onKeyDown={e => {
+                        if (
+                          (transferValue.toString().split('.')[1]?.length ?? 0) > 3 &&
+                          /^[0-9]$/i.test(e.key)
+                        ) {
+                          e.preventDefault(); // If exceed input count then stop updates.
+                        }
+                      }}
+                      onChange={e => setTransferValue(e.target.value)}
                     />
                     <div className="amount_details_max" onClick={() => updateInputValue()}>
                       <span>MAX</span>

wallet/src/components/Input/index.tsx

@@ -9,7 +9,7 @@ interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
   prefix?: string;
 }
 
-const Input: React.FC<InputProps> = ({ mask, prefix, ...props }) => {
+const Input: React.FC<InputProps> = ({ mask, ...props }) => {
   const handleKeyUp = useCallback(
     (e: React.FormEvent<HTMLInputElement>) => {
       if (mask === 'cep') {

wallet/src/components/Input/masks.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 
-export function cep(e: React.FormEvent<HTMLInputElement>) {
+export function cep(e: React.FormEvent<HTMLInputElement>): React.FormEvent<HTMLInputElement> {
   e.currentTarget.maxLength = 9;
   let { value } = e.currentTarget;
   value = value.replace(/\D/g, '');
@@ -9,7 +9,7 @@ export function cep(e: React.FormEvent<HTMLInputElement>) {
   return e;
 }
 
-export function currency(e: React.FormEvent<HTMLInputElement>) {
+export function currency(e: React.FormEvent<HTMLInputElement>): React.FormEvent<HTMLInputElement> {
   let { value } = e.currentTarget;
   value = value.replace(/\D/g, '');
   value = value.replace(/(\d)(\d{2})$/, '$1,$2');
@@ -19,7 +19,7 @@ export function currency(e: React.FormEvent<HTMLInputElement>) {
   return e;
 }
 
-export function cpf(e: React.FormEvent<HTMLInputElement>) {
+export function cpf(e: React.FormEvent<HTMLInputElement>): React.FormEvent<HTMLInputElement> {
   e.currentTarget.maxLength = 14;
   let { value } = e.currentTarget;
   if (!value.match(/^(\d{3}).(\d{3}).(\d{3})-(\d{2})$/)) {

wallet/src/components/Modals/sendModal.tsx

@@ -37,7 +37,7 @@ const SendModal = (props: SendModalProps): JSX.Element => {
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   // @ts-ignore
   const [state] = useContext(UserContext); // Why does typescript think this is an object?
-  const [valueToSend, setTransferValue] = useState(0);
+  const [valueToSend, setTransferValue] = useState('0');
   const [recipient, setRecipient] = useState('');
   const { onHide, show, ...initialSendToken } = props;
   const [sendToken, setSendToken] = useState(initialSendToken);
@@ -236,7 +236,15 @@ const SendModal = (props: SendModalProps): JSX.Element => {
                     <input
                       type="text"
                       placeholder="0.00"
-                      onChange={e => setTransferValue(Number(e.target.value))}
+                      onKeyDown={e => {
+                        if (
+                          (valueToSend.toString().split('.')[1]?.length ?? 0) > 3 &&
+                          /^[0-9]$/i.test(e.key)
+                        ) {
+                          e.preventDefault(); // If exceed input count then stop updates.
+                        }
+                      }}
+                      onChange={e => setTransferValue(e.target.value)}
                       id="TokenItem_modalSend_tokenAmount"
                     />
                     <div className={stylesModal.maxButton}>MAX</div>

wallet/src/hooks/Account/index.tsx

@@ -20,7 +20,8 @@ const AccountContext = createContext<AccountContextType>({} as AccountContextTyp
  * context use
  * @param children
  */
-const AccountProvider = ({ children }: any) => {
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+const AccountProvider = ({ children }: any): JSX.Element => {
   const [accountInstance, setAccountInstance] = useState<AccountType>(accountType);
 
   return (
@@ -38,7 +39,7 @@ const AccountProvider = ({ children }: any) => {
 /**
  * Hook to allow the context call
  */
-const useAccount = () => {
+const useAccount = (): AccountContextType => {
   const context = useContext(AccountContext);
 
   if (!context) {