feat(setting): implement basic local storage data exporter/importer

refs #56

deploy-web/src/components/settings/LocalDataManager/LocalDataManager.component.tsx

@@ -0,0 +1,61 @@
+import React, { FC, useCallback, useRef } from "react";
+import { Download, Upload } from "iconoir-react";
+import { Button } from "@src/components/ui/button";
+
+export type LocalData = Record<string, any>;
+
+interface LocalDataManagerProps {
+  read: () => LocalData;
+  write: (data: LocalData) => void;
+  onDone?: () => void;
+}
+
+export const LocalDataManagerComponent: FC<LocalDataManagerProps> = ({ read, write, onDone }) => {
+  const ref = useRef<HTMLInputElement>(null);
+
+  const triggerFileUpload = useCallback(() => {
+    ref.current?.click();
+  }, [ref.current]);
+
+  const importLocalData = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (!file) return;
+
+    const reader = new FileReader();
+    reader.onload = () => {
+      const data = JSON.parse(reader.result as string);
+      write(data);
+
+      if (typeof onDone === "function") {
+        onDone();
+      }
+    };
+    reader.readAsText(file);
+  }, []);
+
+  const downloadLocalData = useCallback(() => {
+    const data = JSON.stringify(read());
+    const blob = new Blob([data], { type: "application/json" });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement("a");
+    link.href = url;
+    link.download = "console.akash.network.data.json";
+    link.click();
+  }, []);
+
+  return (
+    <div className="grid-col-1 mt-4 grid gap-4 md:grid-cols-2">
+      <Button onClick={downloadLocalData} size="sm" className="mt-6">
+        <Download className="text-sm" />
+        Export Local Data
+      </Button>
+
+      <input onChange={importLocalData} type="file" ref={ref} hidden accept=".json" />
+
+      <Button onClick={triggerFileUpload} size="sm" className="mt-6">
+        <Upload className="text-sm" />
+        Import Local Data
+      </Button>
+    </div>
+  );
+};

deploy-web/src/components/settings/LocalDataManager/LocalDataManager.container.tsx

@@ -0,0 +1,18 @@
+import { LocalData, LocalDataManagerComponent } from "./LocalDataManager.component";
+import React, { useCallback } from "react";
+
+export const LocalDataManagerContainer = () => {
+  const importLocalData = useCallback((data: LocalData) => {
+    Object.keys(data).forEach(key => {
+      localStorage.setItem(key, data[key]);
+    });
+  }, []);
+
+  const readLocalData = useCallback(() => {
+    return localStorage;
+  }, []);
+
+  const reload = () => window.location.reload();
+
+  return <LocalDataManagerComponent read={readLocalData} write={importLocalData} onDone={reload} />;
+};

deploy-web/src/components/settings/LocalDataManager/index.ts

@@ -0,0 +1 @@
+export { LocalDataManagerContainer as LocalDataManager } from "./LocalDataManager.container";

deploy-web/src/components/settings/SettingsContainer.tsx

@@ -12,6 +12,7 @@ import { SelectNetworkModal } from "./SelectNetworkModal";
 import { SettingsForm } from "./SettingsForm";
 import { ColorModeSelect } from "./ColorModeSelect";
 import { NextSeo } from "next-seo";
+import { LocalDataManager } from "@src/components/settings/LocalDataManager";
 
 type Props = {};
 
@@ -48,6 +49,7 @@ export const SettingsContainer: React.FunctionComponent<Props> = ({}) => {
 
           <Fieldset label="General">
             <ColorModeSelect />
+            <LocalDataManager />
           </Fieldset>
         </div>
 

deploy-web/src/components/settings/SettingsLayout.tsx

@@ -46,7 +46,7 @@ export const SettingsLayout: React.FunctionComponent<Props> = ({ children, page,
         </TabsTrigger>
       </TabsList>
 
-      <div className="flex flex-wrap items-center py-4 mt-4">
+      <div className="mt-4 flex flex-wrap items-center py-4">
         <Title>{title}</Title>
         {headerActions}
       </div>