"Auto Download" feature, downloads every interaction to local disk

src/components/header/index.tsx

@@ -11,7 +11,9 @@ import { ReactComponent as ThemeDarkButtonIcon } from "assets/svg/theme_dark_but
 import { ReactComponent as ThemeSynthButtonIcon } from "assets/svg/theme_synth_button.svg";
 import NotificationsPopup from "components/notificationsPopup";
 import ResetPopup from "components/resetPopup";
+import ToggleBtn from "components/toggleBtn";
 import { handleDataExport } from "lib";
+import { getStoredData, writeStoredData } from "lib/localStorage";
 import { ThemeName, showThemeName } from "theme";
 import "./styles.scss";
 
@@ -69,6 +71,19 @@ const Header = ({
     </button>
   );
 
+  const data = getStoredData();
+  const [inputData, setInputData] = useState<any>({
+    responseExport: data.responseExport
+  });
+
+  const handleToggleBtn = (e: any) => {
+
+    const currentStoredData = getStoredData();
+
+    setInputData({ ...inputData, responseExport: e.target.checked});
+    writeStoredData({ ...currentStoredData, responseExport: e.target.checked});
+  };
+
   return (
     <div id="header" className="header">
       <div>interactsh</div>
@@ -77,6 +92,16 @@ const Header = ({
         <ThemeButton theme="synth" />
         <ThemeButton theme="blue" />
       </div>
+
+      <div>Auto Download</div>
+      <div>
+        <ToggleBtn
+          name="responseExport"
+          onChangeHandler={handleToggleBtn}
+          value={inputData.responseExport}
+        />
+      </div>
+
       <div className="links">
         <button
           type="button"

src/components/header/styles.scss

@@ -32,6 +32,20 @@
     margin-right: 0.8rem;
     border-right: 1px solid rgba(255, 255, 255, 0.25);
   }
+  & > div:nth-of-type(2) {
+    letter-spacing: -0.02rem;
+    text-align: left;
+    padding-right: 1rem;
+    color: #ffffff;
+    margin-right: 0.8rem;
+    border-right: 1px solid rgba(255, 255, 255, 0.25);
+  }
+  & > div:nth-of-type(3) {
+    text-align: left;
+    color: #ffffff;
+    font-size: 1.4rem;
+    padding-right: 1rem;
+  }
   & > button:nth-of-type(1) {
     margin-left: 0;
     border-radius: 0.6rem;

src/lib/index.ts

@@ -90,6 +90,11 @@ const getData = (key: string) =>
     O.chain(O.fromNullable)
   );
 
+export const handleResponseExport = (item : any) => {
+  const fileName = `${format(Date.now(), "yyyy-MM-dd_hh:mm")}_${item.protocol}_${item['remote-address']}_${item['full-id']}_${item.id}.txt`;
+  downloadData(item['raw-request'], fileName);
+}
+
 export const handleDataExport = () => {
   const values = pipe(
     R.mapWithIndex((key) => ({ key, data: getData(key) }))(localStorage),
@@ -200,6 +205,7 @@ export const register = (
           host,
           correlationIdLength: currentData.correlationIdLength,
           correlationIdNonceLength: currentData.correlationIdNonceLength,
+          responseExport: false,
           increment: 1,
           token,
           telegram: {

src/lib/localStorage/index.ts

@@ -13,6 +13,7 @@ export const defaultStoredData: StoredData = {
   correlationId: "",
   correlationIdLength: process.env.REACT_APP_CIDL ? +process.env.REACT_APP_CIDL : 20,
   correlationIdNonceLength: process.env.REACT_APP_CIDN ? +process.env.REACT_APP_CIDN : 13,  
+  responseExport: false,
   secretKey: "",
   data: [],
   aesKey: "",

src/lib/types/storedData.ts

@@ -22,6 +22,7 @@ export const StoredData_ = summon((F) =>
       correlationId: F.string(),
       correlationIdLength: F.number(),
       correlationIdNonceLength: F.number(),
+      responseExport: F.boolean(),
       theme: ThemeName(F),
 
       publicKey: F.string(),

src/pages/homePage/index.tsx

@@ -20,6 +20,7 @@ import {
   poll,
   decryptAESKey,
   processData,
+  handleResponseExport,
   copyDataToClipboard,
   clearIntervals,
   register,
@@ -213,6 +214,9 @@ const HomePage = () => {
 
           // eslint-disable-next-line array-callback-return
           const formattedString = processedData.map((item: any) => {
+
+            storedData.responseExport && handleResponseExport(item)
+
             const telegramMsg = `<i>[${item['full-id']}]</i> Received <i>${item.protocol.toUpperCase()}</i> interaction from <b><a href="https://ipinfo.io/${item['remote-address']}">${item['remote-address']}</a></b> at <i>${format(new Date(item.timestamp), "yyyy-mm-dd_hh:mm:ss")}</i>`
             storedData.telegram.enabled && notifyTelegram(telegramMsg, storedData.telegram.botToken, storedData.telegram.chatId, 'HTML')
             return {