some refactoring

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

@@ -1,11 +1,11 @@
 import dynamic from "next/dynamic";
 import Split from "react-split";
-import { proxy, useSnapshot } from "valtio";
+import { useSnapshot } from "valtio";
 import { Box, Container, Flex, Tab, Tabs } from "../../components";
-import Transaction, { TransactionState } from "../../components/Transaction";
+import Transaction from "../../components/Transaction";
 import state from "../../state";
 import { getSplit, saveSplit } from "../../state/actions/persistSplits";
-import { deepEqual } from "../../utils/object";
+import { transactionsState, modifyTransaction } from '../../state';
 
 const DebugStream = dynamic(() => import("../../components/DebugStream"), {
   ssr: false,
@@ -18,64 +18,9 @@ const Accounts = dynamic(() => import("../../components/Accounts"), {
   ssr: false,
 });
 
-const defaultTransaction: TransactionState = {
-  selectedTransaction: null,
-  selectedAccount: null,
-  selectedDestAccount: null,
-  txIsLoading: false,
-  txIsDisabled: false,
-  txFields: {},
-};
-
-const testState = proxy({
-  transactions: [
-    {
-      header: "test1.json",
-      state: defaultTransaction,
-    },
-  ],
-});
-
-/**
- * Simple transaction state changer
- * @param header Unique key and tab name for the transaction tab
- * @param partialTx partial transaction state, `{}` resets the state and `undefined` deletes the transaction
- */
-const modifyTransaction = (
-  header: string,
-  partialTx?: Partial<TransactionState>
-) => {
-  const tx = testState.transactions.find(tx => tx.header === header);
-
-  if (partialTx === undefined) {
-    testState.transactions = testState.transactions.filter(
-      tx => tx.header !== header
-    );
-    return;
-  }
-
-  if (!tx) {
-    testState.transactions.push({
-      header,
-      state: {
-        ...defaultTransaction,
-        ...partialTx,
-      },
-    });
-    return;
-  }
-
-  Object.keys(partialTx).forEach(k => {
-    // Typescript mess here, but is definetly safe!
-    const s = tx.state as any;
-    const p = partialTx as any;
-    if (!deepEqual(s[k], p[k])) s[k] = p[k];
-  });
-};
-
 const Test = () => {
   const { transactionLogs } = useSnapshot(state);
-  const { transactions } = useSnapshot(testState);
+  const { transactions } = useSnapshot(transactionsState);
   return (
     <Container css={{ px: 0 }}>
       <Split

state/index.ts

@@ -159,3 +159,5 @@ if (typeof window !== "undefined") {
   });
 }
 export default state
+
+export * from './transactions'

state/transactions.ts

@@ -0,0 +1,58 @@
+import { proxy } from 'valtio';
+import { TransactionState } from '../components/Transaction';
+import { deepEqual } from '../utils/object';
+
+export const defaultTransaction: TransactionState = {
+    selectedTransaction: null,
+    selectedAccount: null,
+    selectedDestAccount: null,
+    txIsLoading: false,
+    txIsDisabled: false,
+    txFields: {},
+};
+
+export const transactionsState = proxy({
+    transactions: [
+        {
+            header: "test1.json",
+            state: defaultTransaction,
+        },
+    ],
+});
+
+/**
+ * Simple transaction state changer
+ * @param header Unique key and tab name for the transaction tab
+ * @param partialTx partial transaction state, `{}` resets the state and `undefined` deletes the transaction
+ */
+export const modifyTransaction = (
+    header: string,
+    partialTx?: Partial<TransactionState>
+) => {
+    const tx = transactionsState.transactions.find(tx => tx.header === header);
+
+    if (partialTx === undefined) {
+        transactionsState.transactions = transactionsState.transactions.filter(
+            tx => tx.header !== header
+        );
+        return;
+    }
+
+    if (!tx) {
+        transactionsState.transactions.push({
+            header,
+            state: {
+                ...defaultTransaction,
+                ...partialTx,
+            },
+        });
+        return;
+    }
+
+    Object.keys(partialTx).forEach(k => {
+        // Typescript mess here, but is definetly safe!
+        const s = tx.state as any;
+        const p = partialTx as any;
+        if (!deepEqual(s[k], p[k])) s[k] = p[k];
+    });
+};