File prefixed logs

components/Tabs.tsx

@@ -31,6 +31,7 @@ interface Props {
   children: ReactElement<TabProps>[];
   keepAllAlive?: boolean;
   defaultExtension?: string;
+  forceDefaultExtension?: boolean;
   onCreateNewTab?: (name: string) => any;
   onCloseTab?: (index: number, header?: string) => any;
 }
@@ -46,6 +47,7 @@ export const Tabs = ({
   onCreateNewTab,
   onCloseTab,
   defaultExtension = "",
+  forceDefaultExtension,
 }: Props) => {
   const [active, setActive] = useState(activeIndex || 0);
   const tabs: TabProps[] = children.map(elem => elem.props);
@@ -83,6 +85,10 @@ export const Tabs = ({
   const handleCreateTab = useCallback(() => {
     // add default extension in case omitted
     let _tabname = tabname.includes(".") ? tabname : tabname + defaultExtension;
+    if (forceDefaultExtension && !_tabname.endsWith(defaultExtension)) {
+      _tabname = _tabname + defaultExtension;
+    }
+
     const chk = validateTabname(_tabname);
     if (chk.error) {
       setNewtabError(`Error: ${chk.error}`);

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

@@ -18,7 +18,11 @@ const Accounts = dynamic(() => import("../../components/Accounts"), {
 type TxFields = Omit<typeof transactionsData[0], "Account" | "Sequence" | "TransactionType">;
 type OtherFields = (keyof Omit<TxFields, "Destination">)[];
 
-const Transaction: FC = props => {
+interface Props {
+  header?: string;
+}
+
+const Transaction: FC<Props> = ({ header, ...props }) => {
   const snap = useSnapshot(state);
 
   const transactionsOptions = transactionsData.map(tx => ({
@@ -118,10 +122,15 @@ const Transaction: FC = props => {
           delete options[field];
         }
       });
-      await sendTransaction(account, {
+      const logPrefix = header ? `${header.split(".")[0]}: ` : undefined;
+      await sendTransaction(
+        account,
+        {
           TransactionType,
           ...options,
-      });
+        },
+        { logPrefix }
+      );
     } catch (error) {
       console.error(error);
       if (error instanceof Error) {
@@ -130,9 +139,10 @@ const Transaction: FC = props => {
     }
     setTxIsLoading(false);
   }, [
-    selectedAccount,
+    header,
-    selectedDestAccount,
+    selectedAccount?.value,
-    selectedTransaction,
+    selectedDestAccount?.value,
+    selectedTransaction?.value,
     snap.accounts,
     txFields,
     txIsDisabled,
@@ -291,13 +301,14 @@ const Test = () => {
         <Box css={{ width: "60%", px: "$2", maxWidth: "800px", height: "100%", overflow: "auto" }}>
           <Tabs
             keepAllAlive
+            forceDefaultExtension
             defaultExtension=".json"
             onCreateNewTab={name => setTabHeaders(tabHeaders.concat(name))}
             onCloseTab={index => setTabHeaders(tabHeaders.filter((_, idx) => idx !== index))}
           >
             {tabHeaders.map(header => (
               <Tab key={header} header={header}>
-                <Transaction />
+                <Transaction header={header} />
               </Tab>
             ))}
           </Tabs>

state/actions/sendTransaction.ts

@@ -10,8 +10,11 @@ interface TransactionOptions {
     Destination?: string
     [index: string]: any
 }
+interface OtherOptions {
+    logPrefix?: string
+}
 
-export const sendTransaction = async (account: IAccount, txOptions: TransactionOptions) => {
+export const sendTransaction = async (account: IAccount, txOptions: TransactionOptions, options?: OtherOptions) => {
     if (!state.client) throw Error('XRPL client not initalized')
 
     const { Fee = "1000", ...opts } = txOptions
@@ -21,7 +24,7 @@ export const sendTransaction = async (account: IAccount, txOptions: TransactionO
         Fee,  // TODO auto-fillable
         ...opts
     };
-    console.log({ tx });
+    const { logPrefix = '' } = options || {}
     try {
         const signedAccount = derive.familySeed(account.secret);
         const { signedTransaction } = sign(tx, signedAccount);
@@ -32,19 +35,19 @@ export const sendTransaction = async (account: IAccount, txOptions: TransactionO
         if (response.engine_result === "tesSUCCESS") {
             state.transactionLogs.push({
                 type: 'success',
-                message: `Transaction success [${response.engine_result}]: ${response.engine_result_message}`
+                message: `${logPrefix}[${response.engine_result}] ${response.engine_result_message}`
             })
         } else {
             state.transactionLogs.push({
                 type: "error",
-                message: `[${response.error || response.engine_result}] ${response.error_exception || response.engine_result_message}`,
+                message: `${logPrefix}[${response.error || response.engine_result}] ${response.error_exception || response.engine_result_message}`,
             });
         }
     } catch (err) {
         console.error(err);
         state.transactionLogs.push({
             type: "error",
-            message: err instanceof Error ? `Error: ${err.message}` : 'Something went wrong, try again later',
+            message: err instanceof Error ? `${logPrefix}Error: ${err.message}` : `${logPrefix}Something went wrong, try again later`,
         });
     }
 };