Merge branch 'main' of github.com:eqlabs/xrpl-hooks-ide into feat/prevent-decimals

components/SetHookDialog.tsx

@@ -80,7 +80,7 @@ export const SetHookDialog: React.FC<{ accountAddress: string }> = React.memo(
     });
     const [formInitialized, setFormInitialized] = useState(false);
     const [estimateLoading, setEstimateLoading] = useState(false);
-
+    const watchedFee = watch("Fee");
     // Update value if activeWat changes
     useEffect(() => {
       setValue(
@@ -89,6 +89,14 @@ export const SetHookDialog: React.FC<{ accountAddress: string }> = React.memo(
       );
       setFormInitialized(true);
     }, [snap.activeWat, snap.files, setValue]);
+    useEffect(() => {
+      if (
+        watchedFee &&
+        (watchedFee.includes(".") || watchedFee.includes(","))
+      ) {
+        setValue("Fee", watchedFee.replaceAll(".", "").replaceAll(",", ""));
+      }
+    }, [watchedFee, setValue]);
     // const {
     //   fields: grantFields,
     //   append: grantAppend,
@@ -121,7 +129,7 @@ export const SetHookDialog: React.FC<{ accountAddress: string }> = React.memo(
           }
           const res = await estimateFee(tx, account);
           if (res && res.base_fee) {
-            setValue("Fee", res.base_fee);
+            setValue("Fee", Math.round(Number(res.base_fee || "")).toString());
           }
         })();
       }
@@ -256,6 +264,12 @@ export const SetHookDialog: React.FC<{ accountAddress: string }> = React.memo(
                       type="number"
                       {...register("Fee", { required: true })}
                       autoComplete={"off"}
+                      onKeyPress={(e) => {
+                        if (e.key === "." || e.key === ",") {
+                          e.preventDefault();
+                        }
+                      }}
+                      step="1"
                       defaultValue={10000}
                       css={{
                         "-moz-appearance": "textfield",
@@ -295,7 +309,12 @@ export const SetHookDialog: React.FC<{ accountAddress: string }> = React.memo(
                             const res = await estimateFee(tx, account);
 
                             if (res && res.base_fee) {
-                              setValue("Fee", res.base_fee);
+                              setValue(
+                                "Fee",
+                                Math.round(
+                                  Number(res.base_fee || "")
+                                ).toString()
+                              );
                             }
                           }
                         } catch (err) {}

components/Transaction/ui.tsx

@@ -37,22 +37,22 @@ export const TxUI: FC<UIProps> = ({
     txFields,
   } = txState;
 
-  const transactionsOptions = transactionsData.map(tx => ({
+  const transactionsOptions = transactionsData.map((tx) => ({
     value: tx.TransactionType,
     label: tx.TransactionType,
   }));
 
-  const accountOptions: SelectOption[] = accounts.map(acc => ({
+  const accountOptions: SelectOption[] = accounts.map((acc) => ({
     label: acc.name,
     value: acc.address,
   }));
 
   const destAccountOptions: SelectOption[] = accounts
-    .map(acc => ({
+    .map((acc) => ({
       label: acc.name,
       value: acc.address,
     }))
-    .filter(acc => acc.value !== selectedAccount?.value);
+    .filter((acc) => acc.value !== selectedAccount?.value);
 
   const [feeLoading, setFeeLoading] = useState(false);
 
@@ -107,7 +107,7 @@ export const TxUI: FC<UIProps> = ({
   const specialFields = ["TransactionType", "Account", "Destination"];
 
   const otherFields = Object.keys(txFields).filter(
-    k => !specialFields.includes(k)
+    (k) => !specialFields.includes(k)
   ) as [keyof TxFields];
 
   return (
@@ -190,7 +190,7 @@ export const TxUI: FC<UIProps> = ({
             />
           </Flex>
         )}
-        {otherFields.map(field => {
+        {otherFields.map((field) => {
           let _value = txFields[field];
 
           let value: string | undefined;
@@ -223,8 +223,13 @@ export const TxUI: FC<UIProps> = ({
                 </Text>
                 <Input
                   value={value}
-                  onChange={e => {
-                    handleSetField(field, e.target.value);
+                  onChange={(e) => {
+                    let value = e.target.value;
+                    if (value && (value.includes(".") || value.includes(","))) {
+                      value = value.replaceAll(".", "").replaceAll(",", "");
+                    }
+
+                    handleSetField(field, value);
                   }}
                   css={{ width: "70%", flex: "inherit" }}
                 />