Fix split error

* Make ping interval 45s

Co-authored-by: Vaclav Barta <vbarta@mangrove.cz>

components/Accounts.tsx

@@ -31,7 +31,6 @@ import transactionsData from "../content/transactions.json";
 import { SetHookDialog } from "./SetHookDialog";
 import { addFunds } from "../state/actions/addFaucetAccount";
 import { deleteHook } from "../state/actions/deployHook";
-import { capitalize } from "../utils/helpers";
 
 export const AccountDialog = ({
   activeAccountAddress,
@@ -43,12 +42,12 @@ export const AccountDialog = ({
   const snap = useSnapshot(state);
   const [showSecret, setShowSecret] = useState(false);
   const activeAccount = snap.accounts.find(
-    account => account.address === activeAccountAddress
+    (account) => account.address === activeAccountAddress
   );
   return (
     <Dialog
       open={Boolean(activeAccountAddress)}
-      onOpenChange={open => {
+      onOpenChange={(open) => {
         setShowSecret(false);
         !open && setActiveAccountAddress(null);
       }}
@@ -100,7 +99,7 @@ export const AccountDialog = ({
               tabIndex={-1}
               onClick={() => {
                 const index = state.accounts.findIndex(
-                  acc => acc.address === activeAccount?.address
+                  (acc) => acc.address === activeAccount?.address
                 );
                 state.accounts.splice(index, 1);
               }}
@@ -166,7 +165,7 @@ export const AccountDialog = ({
                     }}
                     ghost
                     size="xs"
-                    onClick={() => setShowSecret(curr => !curr)}
+                    onClick={() => setShowSecret((curr) => !curr)}
                   >
                     {showSecret ? "Hide" : "Show"}
                   </Button>
@@ -253,7 +252,7 @@ export const AccountDialog = ({
                   }}
                 >
                   {activeAccount && activeAccount.hooks.length > 0
-                    ? activeAccount.hooks.map(i => {
+                    ? activeAccount.hooks.map((i) => {
                         return (
                           <a
                             key={i}
@@ -302,7 +301,7 @@ interface AccountProps {
   showHookStats?: boolean;
 }
 
-const Accounts: FC<AccountProps> = props => {
+const Accounts: FC<AccountProps> = (props) => {
   const snap = useSnapshot(state);
   const [activeAccountAddress, setActiveAccountAddress] = useState<
     string | null
@@ -310,7 +309,7 @@ const Accounts: FC<AccountProps> = props => {
   useEffect(() => {
     const fetchAccInfo = async () => {
       if (snap.clientStatus === "online") {
-        const requests = snap.accounts.map(acc =>
+        const requests = snap.accounts.map((acc) =>
           snap.client?.send({
             id: `hooks-builder-req-info-${acc.address}`,
             command: "account_info",
@@ -323,7 +322,7 @@ const Accounts: FC<AccountProps> = props => {
           const balance = res?.account_data?.Balance as string;
           const sequence = res?.account_data?.Sequence as number;
           const accountToUpdate = state.accounts.find(
-            acc => acc.address === address
+            (acc) => acc.address === address
           );
           if (accountToUpdate) {
             accountToUpdate.xrp = balance;
@@ -331,7 +330,7 @@ const Accounts: FC<AccountProps> = props => {
             accountToUpdate.error = null;
           } else {
             const oldAccount = state.accounts.find(
-              acc => acc.address === res?.account
+              (acc) => acc.address === res?.account
             );
             if (oldAccount) {
               oldAccount.xrp = "0";
@@ -342,7 +341,7 @@ const Accounts: FC<AccountProps> = props => {
             }
           }
         });
-        const objectRequests = snap.accounts.map(acc => {
+        const objectRequests = snap.accounts.map((acc) => {
           return snap.client?.send({
             id: `hooks-builder-req-objects-${acc.address}`,
             command: "account_objects",
@@ -353,7 +352,7 @@ const Accounts: FC<AccountProps> = props => {
         objectResponses.forEach((res: any) => {
           const address = res?.account as string;
           const accountToUpdate = state.accounts.find(
-            acc => acc.address === address
+            (acc) => acc.address === address
           );
           if (accountToUpdate) {
             accountToUpdate.hooks =
@@ -417,7 +416,9 @@ const Accounts: FC<AccountProps> = props => {
             <Wallet size="15px" /> <Text css={{ lineHeight: 1 }}>Accounts</Text>
           </Heading>
           <Flex css={{ ml: "auto", gap: "$3", marginRight: "$3" }}>
-            <ImportAccountDialog type="create" />
+            <Button ghost size="sm" onClick={() => addFaucetAccount(true)}>
+              Create
+            </Button>
             <ImportAccountDialog />
           </Flex>
         </Flex>
@@ -434,7 +435,7 @@ const Accounts: FC<AccountProps> = props => {
             overflowY: "auto",
           }}
         >
-          {snap.accounts.map(account => (
+          {snap.accounts.map((account) => (
             <Flex
               column
               key={account.address + account.name}
@@ -487,7 +488,7 @@ const Accounts: FC<AccountProps> = props => {
                 {!props.hideDeployBtn && (
                   <div
                     className="hook-deploy-button"
-                    onClick={e => {
+                    onClick={(e) => {
                       e.stopPropagation();
                     }}
                   >
@@ -513,71 +514,32 @@ const Accounts: FC<AccountProps> = props => {
   );
 };
 
-export const transactionsOptions = transactionsData.map(tx => ({
+export const transactionsOptions = transactionsData.map((tx) => ({
   value: tx.TransactionType,
   label: tx.TransactionType,
 }));
 
-const ImportAccountDialog = ({
+const ImportAccountDialog = () => {
-  type = "import",
+  const [value, setValue] = useState("");
-}: {
-  type?: "import" | "create";
-}) => {
-  const [secret, setSecret] = useState("");
-  const [name, setName] = useState("");
-
-  const btnText = type === "import" ? "Import" : "Create";
-  const title = type === "import" ? "Import Account" : "Create Account";
-
-  const handleSubmit = async () => {
-    if (type === "create") {
-      const value = capitalize(name);
-      await addFaucetAccount(value, true);
-      setName("");
-      setSecret("");
-      return;
-    }
-    importAccount(secret, name);
-    setName("");
-    setSecret("");
-  };
   return (
     <Dialog>
       <DialogTrigger asChild>
         <Button ghost size="sm">
-          {btnText}
+          Import
         </Button>
       </DialogTrigger>
-      <DialogContent aria-describedby={undefined}>
+      <DialogContent>
-        <DialogTitle css={{ mb: "$4" }}>{title}</DialogTitle>
+        <DialogTitle>Import account</DialogTitle>
-        <Flex column>
+        <DialogDescription>
-          <Box css={{ mb: "$2" }}>
+          <Label>Add account secret</Label>
-            <Label>
+          <Input
-              Account name <Text muted>(optional)</Text>
+            name="secret"
-            </Label>
+            type="password"
-            <Input
+            autoComplete="new-password"
-              name="name"
+            value={value}
-              type="text"
+            onChange={(e) => setValue(e.target.value)}
-              autoComplete="off"
+          />
-              autoCapitalize="on"
+        </DialogDescription>
-              value={name}
-              onChange={e => setName(e.target.value)}
-            />
-          </Box>
-          {type === "import" && (
-            <Box>
-              <Label>Account secret</Label>
-              <Input
-                required
-                name="secret"
-                type="password"
-                autoComplete="new-password"
-                value={secret}
-                onChange={e => setSecret(e.target.value)}
-              />
-            </Box>
-          )}
-        </Flex>
 
         <Flex
           css={{
@@ -590,8 +552,14 @@ const ImportAccountDialog = ({
             <Button outline>Cancel</Button>
           </DialogClose>
           <DialogClose asChild>
-            <Button type="submit" variant="primary" onClick={handleSubmit}>
+            <Button
-              {title}
+              variant="primary"
+              onClick={() => {
+                importAccount(value);
+                setValue("");
+              }}
+            >
+              Import account
             </Button>
           </DialogClose>
         </Flex>

components/DebugStream.tsx

@@ -87,7 +87,7 @@ const addListeners = (account: ISelect | null) => {
     if (streamState.socket) {
       interval = setInterval(() => {
         streamState.socket?.send("");
-      }, 10000);
+      }, 45000);
     }
 
     streamState.socket.addEventListener("open", () => onOpen(account));

components/SetHookDialog.tsx

@@ -22,12 +22,12 @@ import {
 import { TTS, tts } from "../utils/hookOnCalculator";
 import { deployHook } from "../state/actions";
 import { useSnapshot } from "valtio";
-import state from "../state";
+import state, { SelectOption } from "../state";
 import toast from "react-hot-toast";
 import { prepareDeployHookTx, sha256 } from "../state/actions/deployHook";
 import estimateFee from "../utils/estimateFee";
 
-const transactionOptions = Object.keys(tts).map((key) => ({
+const transactionOptions = Object.keys(tts).map(key => ({
   label: key,
   value: key as keyof TTS,
 }));
@@ -56,11 +56,22 @@ export type SetHookData = {
 export const SetHookDialog: React.FC<{ accountAddress: string }> = React.memo(
   ({ accountAddress }) => {
     const snap = useSnapshot(state);
-    const account = snap.accounts.find((acc) => acc.address === accountAddress);
     const activeFile = snap.files[snap.active]?.compiledContent
       ? snap.files[snap.active]
-      : snap.files.filter((file) => file.compiledContent)[0];
+      : snap.files.filter(file => file.compiledContent)[0];
     const [isSetHookDialogOpen, setIsSetHookDialogOpen] = useState(false);
+
+    const accountOptions: SelectOption[] = snap.accounts.map(acc => ({
+      label: acc.name,
+      value: acc.address,
+    }));
+
+    const [selectedAccount, setSelectedAccount] = useState(
+      accountOptions.find(acc => acc.value === accountAddress)
+    );
+    const account = snap.accounts.find(
+      acc => acc.address === selectedAccount?.value
+    );
     const {
       register,
       handleSubmit,
@@ -75,7 +86,7 @@ export const SetHookDialog: React.FC<{ accountAddress: string }> = React.memo(
         : {
             HookNamespace:
               snap.files?.[snap.activeWat]?.name?.split(".")?.[0] || "",
-            Invoke: transactionOptions.filter((to) => to.label === "ttPAYMENT"),
+            Invoke: transactionOptions.filter(to => to.label === "ttPAYMENT"),
           },
     });
     const { fields, append, remove } = useFieldArray({
@@ -149,14 +160,10 @@ export const SetHookDialog: React.FC<{ accountAddress: string }> = React.memo(
       // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [formInitialized]);
 
-    if (!account) {
-      return null;
-    }
-
     const tooLargeFile = () => {
       const activeFile = snap.files[snap.active].compiledContent
         ? snap.files[snap.active]
-        : snap.files.filter((file) => file.compiledContent)[0];
+        : snap.files.filter(file => file.compiledContent)[0];
       return Boolean(
         activeFile?.compiledContent?.byteLength &&
           activeFile?.compiledContent?.byteLength >= 64000
@@ -165,8 +172,9 @@ export const SetHookDialog: React.FC<{ accountAddress: string }> = React.memo(
 
     const onSubmit: SubmitHandler<SetHookData> = async (data) => {
       const currAccount = state.accounts.find(
-        (acc) => acc.address === account.address
+        (acc) => acc.address === account?.address
       );
+      if (!account) return;
       if (currAccount) currAccount.isLoading = true;
       const res = await deployHook(account, data);
       if (currAccount) currAccount.isLoading = false;
@@ -186,8 +194,9 @@ export const SetHookDialog: React.FC<{ accountAddress: string }> = React.memo(
             uppercase
             variant={"secondary"}
             disabled={
+              !account ||
               account.isLoading ||
-              !snap.files.filter((file) => file.compiledWatContent).length ||
+              !snap.files.filter(file => file.compiledWatContent).length ||
               tooLargeFile()
             }
           >
@@ -199,6 +208,17 @@ export const SetHookDialog: React.FC<{ accountAddress: string }> = React.memo(
             <DialogTitle>Deploy configuration</DialogTitle>
             <DialogDescription as="div">
               <Stack css={{ width: "100%", flex: 1 }}>
+                <Box css={{ width: "100%" }}>
+                  <Label>Account</Label>
+                  <Select
+                    instanceId="deploy-account"
+                    placeholder="Select account"
+                    hideSelectedOptions
+                    options={accountOptions}
+                    value={selectedAccount}
+                    onChange={(acc: any) => setSelectedAccount(acc)}
+                  />
+                </Box>
                 <Box css={{ width: "100%" }}>
                   <Label>Invoke on transactions</Label>
                   <Controller
@@ -282,7 +302,7 @@ export const SetHookDialog: React.FC<{ accountAddress: string }> = React.memo(
                       type="number"
                       {...register("Fee", { required: true })}
                       autoComplete={"off"}
-                      onKeyPress={(e) => {
+                      onKeyPress={e => {
                         if (e.key === "." || e.key === ",") {
                           e.preventDefault();
                         }
@@ -314,8 +334,9 @@ export const SetHookDialog: React.FC<{ accountAddress: string }> = React.memo(
                         alignContent: "center",
                         display: "flex",
                       }}
-                      onClick={async (e) => {
+                      onClick={async e => {
                         e.preventDefault();
+                        if (!account) return;
                         setEstimateLoading(true);
                         const formValues = getValues();
                         try {
@@ -414,7 +435,7 @@ export const SetHookDialog: React.FC<{ accountAddress: string }> = React.memo(
               <Button
                 variant="primary"
                 type="submit"
-                isLoading={account.isLoading}
+                isLoading={account?.isLoading}
               >
                 Set Hook
               </Button>

components/Tabs.tsx

@@ -31,13 +31,15 @@ interface TabProps {
 
 // TODO customise messages shown
 interface Props {
+  label?: string;
   activeIndex?: number;
   activeHeader?: string;
   headless?: boolean;
   children: ReactElement<TabProps>[];
   keepAllAlive?: boolean;
   defaultExtension?: string;
-  forceDefaultExtension?: boolean;
+  appendDefaultExtension?: boolean;
+  allowedExtensions?: string[];
   onCreateNewTab?: (name: string) => any;
   onCloseTab?: (index: number, header?: string) => any;
   onChangeActive?: (index: number, header?: string) => any;
@@ -46,6 +48,7 @@ interface Props {
 export const Tab = (props: TabProps) => null;
 
 export const Tabs = ({
+  label = "Tab",
   children,
   activeIndex,
   activeHeader,
@@ -55,7 +58,8 @@ export const Tabs = ({
   onCloseTab,
   onChangeActive,
   defaultExtension = "",
-  forceDefaultExtension,
+  appendDefaultExtension = false,
+  allowedExtensions,
 }: Props) => {
   const [active, setActive] = useState(activeIndex || 0);
   const tabs: TabProps[] = children.map(elem => elem.props);
@@ -86,9 +90,13 @@ export const Tabs = ({
       if (tabs.find(tab => tab.header === tabname)) {
         return { error: "Name already exists." };
       }
+      const ext = tabname.split(".").pop() || "";
+      if (allowedExtensions && !allowedExtensions.includes(ext)) {
+        return { error: "This file extension is not allowed!" };
+      }
       return { error: null };
     },
-    [tabs]
+    [allowedExtensions, tabs]
   );
 
   const handleActiveChange = useCallback(
@@ -101,9 +109,11 @@ export const Tabs = ({
 
   const handleCreateTab = useCallback(() => {
     // add default extension in case omitted
-    let _tabname = tabname.includes(".") ? tabname : tabname + defaultExtension;
+    let _tabname = tabname.includes(".")
-    if (forceDefaultExtension && !_tabname.endsWith(defaultExtension)) {
+      ? tabname
-      _tabname = _tabname + defaultExtension;
+      : `${tabname}.${defaultExtension}`;
+    if (appendDefaultExtension && !_tabname.endsWith(defaultExtension)) {
+      _tabname = `${_tabname}.${defaultExtension}`;
     }
 
     const chk = validateTabname(_tabname);
@@ -122,7 +132,7 @@ export const Tabs = ({
   }, [
     tabname,
     defaultExtension,
-    forceDefaultExtension,
+    appendDefaultExtension,
     validateTabname,
     onCreateNewTab,
     handleActiveChange,
@@ -206,13 +216,13 @@ export const Tabs = ({
                   size="sm"
                   css={{ alignItems: "center", px: "$2", mr: "$3" }}
                 >
-                  <Plus size="16px" /> {tabs.length === 0 && "Add new tab"}
+                  <Plus size="16px" /> {tabs.length === 0 && `Add new ${label.toLocaleLowerCase()}`}
                 </Button>
               </DialogTrigger>
               <DialogContent>
-                <DialogTitle>Create new tab</DialogTitle>
+                <DialogTitle>Create new {label.toLocaleLowerCase()}</DialogTitle>
                 <DialogDescription>
-                  <Label>Tabname</Label>
+                  <Label>{label} name</Label>
                   <Input
                     value={tabname}
                     onChange={e => setTabname(e.target.value)}

pages/test/[[...slug]].tsx

@@ -45,7 +45,7 @@ const Test = () => {
             ? [50, 20, 30]
             : hasScripts
             ? [50, 20, 50]
-            : [50, 50]
+            : [50, 50, 0]
         }
         gutterSize={4}
         gutterAlign="center"
@@ -76,14 +76,15 @@ const Test = () => {
           >
             <Box css={{ width: "55%", px: "$2" }}>
               <Tabs
+                label='Transaction'
                 activeHeader={activeHeader}
                 // TODO make header a required field
                 onChangeActive={(idx, header) => {
                   if (header) transactionsState.activeHeader = header;
                 }}
                 keepAllAlive
-                forceDefaultExtension
+                defaultExtension="json"
-                defaultExtension=".json"
+                allowedExtensions={['json']}
                 onCreateNewTab={(header) => modifyTransaction(header, {})}
                 onCloseTab={(idx, header) =>
                   header && modifyTransaction(header, undefined)

state/actions/addFaucetAccount.ts

@@ -27,7 +27,7 @@ export const names = [
  * new account with 10 000 XRP. Hooks Testnet /newcreds endpoint
  * is protected with CORS so that's why we did our own endpoint
  */
-export const addFaucetAccount = async (name?: string, showToast: boolean = false) => {
+export const addFaucetAccount = async (showToast: boolean = false) => {
   // Lets limit the number of faucet accounts to 5 for now
   if (state.accounts.length > 5) {
     return toast.error("You can only have maximum 6 accounts");
@@ -52,7 +52,7 @@ export const addFaucetAccount = async (name?: string, showToast: boolean = false
       }
       const currNames = state.accounts.map(acc => acc.name);
       state.accounts.push({
-        name: name || names.filter(name => !currNames.includes(name))[0],
+        name: names.filter(name => !currNames.includes(name))[0],
         xrp: (json.xrp || 0 * 1000000).toString(),
         address: json.address,
         secret: json.secret,

state/actions/importAccount.ts

@@ -5,7 +5,7 @@ import state from '../index';
 import { names } from './addFaucetAccount';
 
 // Adds test account to global state with secret key
-export const importAccount = (secret: string, name?: string) => {
+export const importAccount = (secret: string) => {
   if (!secret) {
     return toast.error("You need to add secret!");
   }
@@ -27,7 +27,7 @@ export const importAccount = (secret: string, name?: string) => {
     return toast.error(`Couldn't create account!`);
   }
   state.accounts.push({
-    name: name || names[state.accounts.length],
+    name: names[state.accounts.length],
     address: account.address || "",
     secret: account.secret.familySeed || "",
     xrp: "0",

utils/helpers.ts

@@ -7,9 +7,3 @@ export const guessZipFileName = (files: File[]) => {
     parts = parts.length > 1 ? parts.slice(0, -1) : parts
     return parts.join('')
 }
-
-export const capitalize = (value?: string) => {
-    if (!value) return '';
-
-    return value[0].toLocaleUpperCase() + value.slice(1);
-}

yarn.lock

@@ -3480,7 +3480,7 @@ react-select@^5.2.1:
 
 react-split@^2.0.14:
   version "2.0.14"
-  resolved "https://registry.npmjs.org/react-split/-/react-split-2.0.14.tgz"
+  resolved "https://registry.yarnpkg.com/react-split/-/react-split-2.0.14.tgz#ef198259bf43264d605f792fb3384f15f5b34432"
   integrity sha512-bKWydgMgaKTg/2JGQnaJPg51T6dmumTWZppFgEbbY0Fbme0F5TuatAScCLaqommbGQQf/ZT1zaejuPDriscISA==
   dependencies:
     prop-types "^15.5.7"