add import / export

waku-org · Jan 30, 2024 · 1789b78 · 1789b78
1 parent 75438f3
commit 1789b78
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 12 deletions.
diff --git a/examples/rln-identity/index.html b/examples/rln-identity/index.html
@@ -122,6 +122,10 @@
         justify-content: space-between;
         align-items: center;
       }
+
+      .hidden {
+        display: none;
+      }
     </style>
   </head>
   <body>
@@ -142,6 +146,7 @@ <h2>Wallet</h2>
         <h2>Keystore</h2>
         <div>
           <button id="import">Import</button>
+          <input id="import-file" class="hidden" type="file" />
           <button id="export">Export</button>
         </div>
       </div>

diff --git a/examples/rln-identity/package-lock.json b/examples/rln-identity/package-lock.json
diff --git a/examples/rln-identity/package.json b/examples/rln-identity/package.json
@@ -7,7 +7,7 @@
     "start": "webpack-dev-server"
   },
   "dependencies": {
-    "@waku/rln": "0.1.1-bafbe01",
+    "@waku/rln": "0.1.1-77ba0a6",
     "@waku/sdk": "^0.0.22",
     "@waku/utils": "^0.0.14",
     "ethers": "^5.7.2",

diff --git a/examples/rln-identity/src/rln.js b/examples/rln-identity/src/rln.js
@@ -1,4 +1,4 @@
-import { createRLN, Keystore } from "@waku/rln";
+import { createRLN, Keystore, extractMetaMaskSigner } from "@waku/rln";
 import { randomNumber } from "./utils";
 import { SIGNATURE_MESSAGE } from "./const";
 
@@ -70,7 +70,7 @@ export async function initRLN({ onStatusChange }) {
   };
 
   const importLocalKeystore = (keystoreStr) => {
-    rln.keystore = Keystore.fromString(keystoreStr);
+    rln.keystore = Keystore.fromString(keystoreStr) || Keystore.create();
   };
 
   return {

diff --git a/examples/rln-identity/src/ui.js b/examples/rln-identity/src/ui.js
@@ -2,8 +2,9 @@ import { renderBytes } from "./utils";
 
 const status = document.getElementById("status");
 const connectWalletButton = document.getElementById("connect");
-const importKeystore = document.getElementById("import");
-const exportKeystore = document.getElementById("export");
+const importKeystoreButton = document.getElementById("import");
+const importFileInput = document.getElementById("import-file");
+const exportKeystoreButton = document.getElementById("export");
 const keystoreOptions = document.getElementById("keystore");
 const keystorePassword = document.getElementById("password");
 const readCredentialButton = document.getElementById("read-credential");
@@ -105,6 +106,37 @@ export function initUI() {
       const credential = await readCredential(currentHash, password);
       _renderCredential(currentHash, credential);
     });
+
+    importFileInput.addEventListener("change", async (event) => {
+      const file = event.currentTarget.files[0];
+
+      if (!file) {
+        return;
+      }
+
+      const text = await file.text();
+      importLocalKeystore(text);
+
+      const keystoreOptions = readKeystoreOptions();
+      _renderKeystoreOptions(keystoreOptions);
+    });
+
+    importKeystoreButton.addEventListener("click", async () => {
+      importFileInput.click();
+    });
+
+    exportKeystoreButton.addEventListener("click", () => {
+      const filename = "keystore.json";
+      const text = saveLocalKeystore();
+      const file = new File([text], filename, {
+        type: "application/json",
+      });
+
+      const link = document.createElement("a");
+      link.href = URL.createObjectURL(file);
+      link.download = filename;
+      link.click();
+    });
   };
 
   return {