Set payment as default transaction

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,14 +89,6 @@ 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,
@@ -129,7 +121,7 @@ export const SetHookDialog: React.FC<{ accountAddress: string }> = React.memo(
           }
           const res = await estimateFee(tx, account);
           if (res && res.base_fee) {
-            setValue("Fee", Math.round(Number(res.base_fee || "")).toString());
+            setValue("Fee", res.base_fee);
           }
         })();
       }
@@ -264,12 +256,6 @@ 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",
@@ -309,12 +295,7 @@ export const SetHookDialog: React.FC<{ accountAddress: string }> = React.memo(
                             const res = await estimateFee(tx, account);
 
                             if (res && res.base_fee) {
-                              setValue(
-                                "Fee",
-                                Math.round(
-                                  Number(res.base_fee || "")
-                                ).toString()
-                              );
+                              setValue("Fee", res.base_fee);
                             }
                           }
                         } catch (err) {}

components/Transaction/ui.tsx

@@ -1,4 +1,4 @@
-import { FC, useCallback, useState } from "react";
+import { FC, useCallback, useEffect, useState } from "react";
 import Container from "../Container";
 import Flex from "../Flex";
 import Input from "../Input";
@@ -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,9 +107,19 @@ 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];
 
+  useEffect(() => {
+    const defaultOption = transactionsOptions.find(
+      tt => tt.value === "Payment"
+    );
+    if (defaultOption) {
+      handleChangeTxType(defaultOption);
+    }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   return (
     <Container
       css={{
@@ -190,7 +200,7 @@ export const TxUI: FC<UIProps> = ({
             />
           </Flex>
         )}
-        {otherFields.map((field) => {
+        {otherFields.map(field => {
           let _value = txFields[field];
 
           let value: string | undefined;
@@ -223,13 +233,8 @@ export const TxUI: FC<UIProps> = ({
                 </Text>
                 <Input
                   value={value}
-                  onChange={(e) => {
-                    let value = e.target.value;
-                    if (value && (value.includes(".") || value.includes(","))) {
-                      value = value.replaceAll(".", "").replaceAll(",", "");
-                    }
-
-                    handleSetField(field, value);
+                  onChange={e => {
+                    handleSetField(field, e.target.value);
                   }}
                   css={{ width: "70%", flex: "inherit" }}
                 />