Added error check

Fetch header files from c2wasm api

.env.example

@@ -2,6 +2,7 @@ NEXTAUTH_URL=https://example.com
 GITHUB_SECRET=""
 GITHUB_ID=""
 NEXT_PUBLIC_COMPILE_API_ENDPOINT="http://localhost:9000/api/build"
+NEXT_PUBLIC_COMPILE_API_BASE_URL="http://localhost:9000"
 NEXT_PUBLIC_LANGUAGE_SERVER_API_ENDPOINT="ws://localhost:9000/language-server/c"
 NEXT_PUBLIC_TESTNET_URL="hooks-testnet-v2.xrpl-labs.com"
 NEXT_PUBLIC_DEBUG_STREAM_URL="hooks-testnet-v2-debugstream.xrpl-labs.com"

components/DebugStream.tsx

@@ -10,7 +10,7 @@ interface ISelect<T = string> {
   value: T;
 }
 
-export const streamState = proxy({
+const streamState = proxy({
   selectedAccount: null as ISelect | null,
   logs: [] as ILog[],
   socket: undefined as WebSocket | undefined,

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

@@ -18,7 +18,6 @@ import transactionsData from "../../content/transactions.json";
 import state from "../../state";
 import { sendTransaction } from "../../state/actions";
 import { getSplit, saveSplit } from "../../state/actions/persistSplits";
-import { streamState } from "../../components/DebugStream";
 
 const DebugStream = dynamic(() => import("../../components/DebugStream"), {
   ssr: false,
@@ -38,11 +37,6 @@ type TxFields = Omit<
 >;
 type OtherFields = (keyof Omit<TxFields, "Destination">)[];
 
-interface AccountOption {
-  label: string;
-  value: string;
-}
-
 interface Props {
   header?: string;
 }
@@ -50,7 +44,7 @@ interface Props {
 const Transaction: FC<Props> = ({ header, ...props }) => {
   const snap = useSnapshot(state);
 
-  const transactionsOptions = transactionsData.map(tx => ({
+  const transactionsOptions = transactionsData.map((tx) => ({
     value: tx.TransactionType,
     label: tx.TransactionType,
   }));
@@ -58,24 +52,23 @@ const Transaction: FC<Props> = ({ header, ...props }) => {
     typeof transactionsOptions[0] | null
   >(null);
 
-  const accountOptions: AccountOption[] = snap.accounts.map(acc => ({
+  const accountOptions = snap.accounts.map((acc) => ({
     label: acc.name,
     value: acc.address,
   }));
+  const [selectedAccount, setSelectedAccount] = useState<
+    typeof accountOptions[0] | null
+  >(null);
 
-  const [selectedAccount, setSelectedAccount] = useState<AccountOption | null>(
-    null
-  );
-
-  const destAccountOptions: AccountOption[] = snap.accounts
-    .map(acc => ({
+  const destAccountOptions = snap.accounts
+    .map((acc) => ({
       label: acc.name,
       value: acc.address,
     }))
-    .filter(acc => acc.value !== selectedAccount?.value);
-  
-  const [selectedDestAccount, setSelectedDestAccount] =
-    useState<AccountOption | null>(null);
+    .filter((acc) => acc.value !== selectedAccount?.value);
+  const [selectedDestAccount, setSelectedDestAccount] = useState<
+    typeof destAccountOptions[0] | null
+  >(null);
 
   const [txIsLoading, setTxIsLoading] = useState(false);
   const [txIsDisabled, setTxIsDisabled] = useState(false);
@@ -84,7 +77,7 @@ const Transaction: FC<Props> = ({ header, ...props }) => {
   useEffect(() => {
     const transactionType = selectedTransaction?.value;
     const account = snap.accounts.find(
-      acc => acc.address === selectedAccount?.value
+      (acc) => acc.address === selectedAccount?.value
     );
     if (!account || !transactionType || txIsLoading) {
       setTxIsDisabled(true);
@@ -95,7 +88,7 @@ const Transaction: FC<Props> = ({ header, ...props }) => {
 
   useEffect(() => {
     let _txFields: TxFields | undefined = transactionsData.find(
-      tx => tx.TransactionType === selectedTransaction?.value
+      (tx) => tx.TransactionType === selectedTransaction?.value
     );
     if (!_txFields) return setTxFields({});
     _txFields = { ..._txFields } as TxFields;
@@ -112,7 +105,7 @@ const Transaction: FC<Props> = ({ header, ...props }) => {
 
   const submitTest = useCallback(async () => {
     const account = snap.accounts.find(
-      acc => acc.address === selectedAccount?.value
+      (acc) => acc.address === selectedAccount?.value
     );
     const TransactionType = selectedTransaction?.value;
     if (!account || !TransactionType || txIsDisabled) return;
@@ -123,7 +116,7 @@ const Transaction: FC<Props> = ({ header, ...props }) => {
       let options = { ...txFields };
 
       options.Destination = selectedDestAccount?.value;
-      (Object.keys(options) as (keyof TxFields)[]).forEach(field => {
+      (Object.keys(options) as (keyof TxFields)[]).forEach((field) => {
         let _value = options[field];
         // convert currency
         if (typeof _value === "object" && _value.type === "currency") {
@@ -189,14 +182,9 @@ const Transaction: FC<Props> = ({ header, ...props }) => {
     setTxIsLoading(false);
   }, []);
 
-  const handleSetAccount = (acc: AccountOption) => {
-    setSelectedAccount(acc);
-    streamState.selectedAccount = acc;
-  };
-
   const usualFields = ["TransactionType", "Amount", "Account", "Destination"];
   const otherFields = Object.keys(txFields).filter(
-    k => !usualFields.includes(k)
+    (k) => !usualFields.includes(k)
   ) as OtherFields;
   return (
     <Box css={{ position: "relative", height: "calc(100% - 28px)" }} {...props}>
@@ -229,7 +217,7 @@ const Transaction: FC<Props> = ({ header, ...props }) => {
               hideSelectedOptions
               css={{ width: "70%" }}
               value={selectedTransaction}
-              onChange={(tt: any) => setSelectedTransaction(tt)}
+              onChange={(tt) => setSelectedTransaction(tt as any)}
             />
           </Flex>
           <Flex
@@ -251,7 +239,7 @@ const Transaction: FC<Props> = ({ header, ...props }) => {
               css={{ width: "70%" }}
               options={accountOptions}
               value={selectedAccount}
-              onChange={(acc: any) => handleSetAccount(acc)} // TODO make react-select have correct types for acc
+              onChange={(acc) => setSelectedAccount(acc as any)}
             />
           </Flex>
           {txFields.Amount !== undefined && (
@@ -270,7 +258,7 @@ const Transaction: FC<Props> = ({ header, ...props }) => {
               </Text>
               <Input
                 value={txFields.Amount.value}
-                onChange={e =>
+                onChange={(e) =>
                   setTxFields({
                     ...txFields,
                     Amount: { type: "currency", value: e.target.value },
@@ -301,11 +289,11 @@ const Transaction: FC<Props> = ({ header, ...props }) => {
                 options={destAccountOptions}
                 value={selectedDestAccount}
                 isClearable
-                onChange={(acc: any) => setSelectedDestAccount(acc)}
+                onChange={(acc) => setSelectedDestAccount(acc as any)}
               />
             </Flex>
           )}
-          {otherFields.map(field => {
+          {otherFields.map((field) => {
             let _value = txFields[field];
             let value = typeof _value === "object" ? _value.value : _value;
             value =
@@ -331,7 +319,7 @@ const Transaction: FC<Props> = ({ header, ...props }) => {
                 </Text>
                 <Input
                   value={value}
-                  onChange={e =>
+                  onChange={(e) =>
                     setTxFields({
                       ...txFields,
                       [field]:
@@ -388,7 +376,7 @@ const Test = () => {
         gutterSize={4}
         gutterAlign="center"
         style={{ height: "calc(100vh - 60px)" }}
-        onDragEnd={e => saveSplit("testVertical", e)}
+        onDragEnd={(e) => saveSplit("testVertical", e)}
       >
         <Flex
           row
@@ -410,19 +398,21 @@ const Test = () => {
               width: "100%",
               height: "100%",
             }}
-            onDragEnd={e => saveSplit("testHorizontal", e)}
+            onDragEnd={(e) => saveSplit("testHorizontal", e)}
           >
             <Box css={{ width: "55%", px: "$2" }}>
               <Tabs
                 keepAllAlive
                 forceDefaultExtension
                 defaultExtension=".json"
-                onCreateNewTab={name => setTabHeaders(tabHeaders.concat(name))}
-                onCloseTab={index =>
+                onCreateNewTab={(name) =>
+                  setTabHeaders(tabHeaders.concat(name))
+                }
+                onCloseTab={(index) =>
                   setTabHeaders(tabHeaders.filter((_, idx) => idx !== index))
                 }
               >
-                {tabHeaders.map(header => (
+                {tabHeaders.map((header) => (
                   <Tab key={header} header={header}>
                     <Transaction header={header} />
                   </Tab>

state/actions/fetchFiles.ts

@@ -2,8 +2,6 @@ import { Octokit } from "@octokit/core";
 import Router from "next/router";
 import state from '../index';
 import { templateFileIds } from '../constants';
-import { hookapiH, hookmacroH, sfcodesH } from '../constants/headerTemplates';
-
 
 const octokit = new Octokit();
 
@@ -20,18 +18,29 @@ export const fetchFiles = (gistId: string) => {
 
     octokit
       .request("GET /gists/{gist_id}", { gist_id: gistId })
-      .then(res => {
+      .then(async res => {
         if (!Object.values(templateFileIds).includes(gistId)) {
           return res
         }
         // in case of templates, fetch header file(s) and append to res
+        let resHeaderJson;
+        try {
+          const resHeader = await fetch(`${process.env.NEXT_PUBLIC_COMPILE_API_BASE_URL}/api/header-files`);
+          if (resHeader.ok) {
+            resHeaderJson = await resHeader.json();
+          }
+        } catch (err) {
+          console.log(err)
+        }
+
         const files = {
           ...res.data.files,
-          'hookapi.h': res.data.files?.['hookapi.h'] || { filename: 'hookapi.h', content: hookapiH, language: 'C' },
-          'hookmacro.h': res.data.files?.['hookmacro.h'] || { filename: 'hookmacro.h', content: hookmacroH, language: 'C' },
-          'sfcodes.h': res.data.files?.['sfcodes.h'] || { filename: 'sfcodes.h', content: sfcodesH, language: 'C' },
+          'hookapi.h': res.data.files?.['hookapi.h'] || { filename: 'hookapi.h', content: resHeaderJson.hookapi, language: 'C' },
+          'hookmacro.h': res.data.files?.['hookmacro.h'] || { filename: 'hookmacro.h', content: resHeaderJson.hookmacro, language: 'C' },
+          'sfcodes.h': res.data.files?.['sfcodes.h'] || { filename: 'sfcodes.h', content: resHeaderJson.sfcodes, language: 'C' },
         };
         res.data.files = files;
+
         return res;
         // If you want to load templates from GIST instad, uncomment the code below and comment the code above.
         // return octokit.request("GET /gists/{gist_id}", { gist_id: templateFileIds.headers }).then(({ data: { files: headerFiles } }) => {

state/actions/importAccount.ts

@@ -1,5 +1,5 @@
 import toast from "react-hot-toast";
-import { derive } from "xrpl-accountlib";
+import { derive, XRPL_Account } from "xrpl-accountlib";
 
 import state from '../index';
 import { names } from './addFaucetAccount';
@@ -12,8 +12,18 @@ export const importAccount = (secret: string) => {
   if (state.accounts.find((acc) => acc.secret === secret)) {
     return toast.error("Account already added!");
   }
-  const account = derive.familySeed(secret);
-  if (!account.secret.familySeed) {
+  let account: XRPL_Account | null = null;
+  try {
+    account = derive.familySeed(secret);
+  } catch (err: any) {
+    if (err?.message) {
+      toast.error(err.message)
+    } else {
+      toast.error('Error occured while importing account')
+    }
+    return;
+  }
+  if (!account || !account.secret.familySeed) {
     return toast.error(`Couldn't create account!`);
   }
   state.accounts.push({