Merge branch 'main' into feat/json-in-ui

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,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/Textarea.tsx

@@ -0,0 +1,115 @@
+import { styled } from "../stitches.config";
+
+export const Textarea = styled("textarea", {
+  // Reset
+  appearance: "none",
+  borderWidth: "0",
+  boxSizing: "border-box",
+  fontFamily: "inherit",
+  outline: "none",
+  width: "100%",
+  flex: "1",
+  backgroundColor: "$mauve4",
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  borderRadius: "$sm",
+  p: "$2",
+  fontSize: "$md",
+  lineHeight: 1,
+  color: "$mauve12",
+  boxShadow: `0 0 0 1px $colors$mauve8`,
+  WebkitTapHighlightColor: "rgba(0,0,0,0)",
+  "&::before": {
+    boxSizing: "border-box",
+  },
+  "&::after": {
+    boxSizing: "border-box",
+  },
+  fontVariantNumeric: "tabular-nums",
+
+  "&:-webkit-autofill": {
+    boxShadow: "inset 0 0 0 1px $colors$blue6, inset 0 0 0 100px $colors$blue3",
+  },
+
+  "&:-webkit-autofill::first-line": {
+    fontFamily: "$untitled",
+    color: "$mauve12",
+  },
+
+  "&:focus": {
+    boxShadow: `0 0 0 1px $colors$mauve10`,
+    "&:-webkit-autofill": {
+      boxShadow: `0 0 0 1px $colors$mauve10`,
+    },
+  },
+  "&::placeholder": {
+    color: "$mauve9",
+  },
+  "&:disabled": {
+    pointerEvents: "none",
+    backgroundColor: "$mauve2",
+    color: "$mauve8",
+    cursor: "not-allowed",
+    "&::placeholder": {
+      color: "$mauve7",
+    },
+  },
+
+  variants: {
+    variant: {
+      ghost: {
+        boxShadow: "none",
+        backgroundColor: "transparent",
+        "@hover": {
+          "&:hover": {
+            boxShadow: "inset 0 0 0 1px $colors$mauve7",
+          },
+        },
+        "&:focus": {
+          backgroundColor: "$loContrast",
+          boxShadow: `0 0 0 1px $colors$mauve10`,
+        },
+        "&:disabled": {
+          backgroundColor: "transparent",
+        },
+        "&:read-only": {
+          backgroundColor: "transparent",
+        },
+      },
+      deep: {
+        backgroundColor: "$deep",
+        boxShadow: "none",
+      },
+    },
+    state: {
+      invalid: {
+        boxShadow: "inset 0 0 0 1px $colors$crimson7",
+        "&:focus": {
+          boxShadow:
+            "inset 0px 0px 0px 1px $colors$crimson8, 0px 0px 0px 1px $colors$crimson8",
+        },
+      },
+      valid: {
+        boxShadow: "inset 0 0 0 1px $colors$grass7",
+        "&:focus": {
+          boxShadow:
+            "inset 0px 0px 0px 1px $colors$grass8, 0px 0px 0px 1px $colors$grass8",
+        },
+      },
+    },
+    cursor: {
+      default: {
+        cursor: "default",
+        "&:focus": {
+          cursor: "text",
+        },
+      },
+      text: {
+        cursor: "text",
+      },
+    },
+  },
+});
+
+export default Textarea;

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";
@@ -15,6 +15,7 @@ import { useSnapshot } from "valtio";
 import state from "../../state";
 import { streamState } from "../DebugStream";
 import { Button } from "..";
+import Textarea from "../Textarea";
 
 interface UIProps {
   setState: (
@@ -110,6 +111,19 @@ export const TxUI: FC<UIProps> = ({
     k => !specialFields.includes(k)
   ) as [keyof TxFields];
 
+  const switchToJson = () =>
+    setState({ editorSavedValue: null, viewType: "json" });
+  
+  useEffect(() => {
+    const defaultOption = transactionsOptions.find(
+      tt => tt.value === "Payment"
+    );
+    if (defaultOption) {
+      handleChangeTxType(defaultOption);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   return (
     <Container
       css={{
@@ -196,7 +210,7 @@ export const TxUI: FC<UIProps> = ({
           let value: string | undefined;
           if (typeof _value === "object") {
             if (_value.$type === "json" && typeof _value.$value === "object") {
-              value = JSON.stringify(_value.$value);
+              value = JSON.stringify(_value.$value, null, 2);
             } else {
               value = _value.$value.toString();
             }
@@ -204,9 +218,13 @@ export const TxUI: FC<UIProps> = ({
             value = _value?.toString();
           }
 
-          let isXrp = typeof _value === "object" && _value.$type === "xrp";
-
+          const isXrp = typeof _value === "object" && _value.$type === "xrp";
+          const isJson = typeof _value === "object" && _value.$type === "json";
           const isFee = field === "Fee";
+          let rows = isJson
+            ? (value?.match(/\n/gm)?.length || 0) + 1
+            : undefined;
+          if (rows && rows > 5) rows = 5;
           return (
             <Flex column key={field} css={{ mb: "$2", pr: "1px" }}>
               <Flex
@@ -221,13 +239,30 @@ export const TxUI: FC<UIProps> = ({
                 <Text muted css={{ mr: "$3" }}>
                   {field + (isXrp ? " (XRP)" : "")}:{" "}
                 </Text>
-                <Input
-                  value={value}
-                  onChange={e => {
-                    handleSetField(field, e.target.value);
-                  }}
-                  css={{ width: "70%", flex: "inherit" }}
-                />
+                {isJson ? (
+                  <Textarea
+                    rows={rows}
+                    value={value}
+                    spellCheck={false}
+                    onChange={switchToJson}
+                    css={{
+                      width: "70%",
+                      flex: "inherit",
+                      resize: "vertical",
+                    }}
+                  />
+                ) : (
+                  <Input
+                    value={value}
+                    onChange={e => {
+                      handleSetField(field, e.target.value);
+                    }}
+                    css={{
+                      width: "70%",
+                      flex: "inherit",
+                    }}
+                  />
+                )}
                 {isFee && (
                   <Button
                     size="xs"

pages/develop/[[...slug]].tsx

@@ -159,7 +159,7 @@ const Home: NextPage = () => {
     >
       <main style={{ display: "flex", flex: 1, position: "relative" }}>
         <HooksEditor />
-        {snap.files[snap.active]?.name?.split(".")?.[1].toLowerCase() ===
+        {snap.files[snap.active]?.name?.split(".")?.[1]?.toLowerCase() ===
           "c" && (
           <Hotkeys
             keyName="command+b,ctrl+b"

state/actions/fetchFiles.ts

@@ -58,6 +58,29 @@ export const fetchFiles = (gistId: string) => {
             language: res.data.files?.[filename]?.language?.toLowerCase() || "",
             content: res.data.files?.[filename]?.content || "",
           }));
+          // Sort files so that the source files are first
+          // In case of other files leave the order as it its
+          files.sort((a, b) => {
+            const aBasename = a.name.split('.')?.[0];
+            const aCext = a.name?.toLowerCase().endsWith('.c');
+            const bBasename = b.name.split('.')?.[0];
+            const bCext = b.name?.toLowerCase().endsWith('.c');
+            // If a has c extension and b doesn't move a up
+            if (aCext && !bCext) {
+              return -1;
+            }
+            if (!aCext && bCext) {
+              return 1
+            }
+            // Otherwise fallback to default sorting based on basename
+            if (aBasename > bBasename) {
+              return 1;
+            }
+            if (bBasename > aBasename) {
+              return -1;
+            }
+            return 0;
+          })
           state.loading = false;
           if (files.length > 0) {
             state.logs.push({