adding session timer and track private key existence in UI (#13)

* adding session timer and track private key existence in UI

* rm debugger

* rm unnecessary const's

Author: piyalbasu

src/api/internal/index.ts

@@ -105,9 +105,14 @@ export const recoverAccount = async (
 
 export const confirmPassword = async (
   password: string,
-): Promise<{ publicKey: string; applicationState: APPLICATION_STATE }> => {
+): Promise<{
+  publicKey: string;
+  hasPrivateKey: boolean;
+  applicationState: APPLICATION_STATE;
+}> => {
   let response = {
     publicKey: "",
+    hasPrivateKey: false,
     applicationState: APPLICATION_STATE.MNEMONIC_PHRASE_CONFIRMED,
   };
   try {

src/api/types/index.ts

@@ -7,6 +7,7 @@ import {
 export interface Response {
   applicationState: APPLICATION_STATE;
   publicKey: string;
+  hasPrivateKey: boolean;
   mnemonicPhrase: string;
   isCorrectPhrase: boolean;
   confirmedPassword: boolean;

src/background/ducks/session.ts

@@ -0,0 +1,71 @@
+import { combineReducers } from "redux";
+import { configureStore, createSelector, createSlice } from "@reduxjs/toolkit";
+
+const initialState = {
+  publicKey: "",
+  privateKey: "",
+  mnemonicPhrase: "",
+};
+
+interface UiData {
+  publicKey: string;
+  mnemonicPhrase?: string;
+}
+
+interface AppData {
+  privateKey: string;
+}
+
+const sessionSlice = createSlice({
+  name: "session",
+  initialState,
+  reducers: {
+    logIn: (state, action: { payload: UiData }) => {
+      const { publicKey, mnemonicPhrase = "" } = action.payload;
+
+      return {
+        ...state,
+        publicKey,
+        mnemonicPhrase,
+      };
+    },
+    logOut: () => initialState,
+    grantAccountAccess: (state, action: { payload: AppData }) => {
+      const { privateKey } = action.payload;
+
+      return {
+        ...state,
+        privateKey,
+      };
+    },
+    timeoutAccountAccess: (state) => ({ ...state, privateKey: "" }),
+  },
+});
+
+export const store = configureStore({
+  reducer: combineReducers({
+    session: sessionSlice.reducer,
+  }),
+});
+
+export const {
+  actions: { logIn, logOut, grantAccountAccess, timeoutAccountAccess },
+} = sessionSlice;
+
+const sessionSelector = (state: { session: UiData & AppData }) => state.session;
+export const publicKeySelector = createSelector(
+  sessionSelector,
+  (session) => session.publicKey,
+);
+export const mnemonicPhraseSelector = createSelector(
+  sessionSelector,
+  (session) => session.mnemonicPhrase,
+);
+export const hasPrivateKeySelector = createSelector(
+  sessionSelector,
+  (session) => !!session.privateKey.length,
+);
+export const privateKeySelector = createSelector(
+  sessionSelector,
+  (session) => session.privateKey,
+);

src/background/helpers/session.ts

@@ -0,0 +1,21 @@
+import {
+  grantAccountAccess,
+  store,
+  timeoutAccountAccess,
+} from "../ducks/session";
+
+const SESSION_LENGTH = 5;
+
+export class SessionTimer {
+  DURATION = 1000 * 60 * SESSION_LENGTH;
+  constructor(duration?: number) {
+    this.DURATION = duration || this.DURATION;
+  }
+
+  startSession(key: { privateKey: string }) {
+    store.dispatch(grantAccountAccess(key));
+    setTimeout(() => {
+      store.dispatch(timeoutAccountAccess());
+    }, this.DURATION);
+  }
+}

src/background/messageListener/externalMessageListener.ts

@@ -4,11 +4,8 @@ import { ExternalRequest as Request } from "api/types";
 import { EXTERNAL_SERVICE_TYPES } from "statics";
 import { removeQueryParam } from "helpers";
 import { Sender, SendResponseInterface } from "../types";
-import {
-  responseQueue,
-  uiData,
-  transactionQueue,
-} from "./internalMessageListener";
+import { responseQueue, transactionQueue } from "./internalMessageListener";
+import { store, publicKeySelector } from "../ducks/session";
 
 const WHITELIST_ID = "whitelist";
 const WINDOW_DIMENSIONS = "height=600,width=357";
@@ -22,14 +19,15 @@ const externalMessageListener = (
     // TODO: add check to make sure this origin is on whitelist
     const whitelistStr = localStorage.getItem(WHITELIST_ID) || "";
     const whitelist = whitelistStr.split(",");
+    const publicKey = publicKeySelector(store.getState());
 
     const { tab } = sender;
     const tabUrl = tab?.url ? tab.url : "";
 
     if (whitelist.includes(removeQueryParam(tabUrl))) {
-      if (uiData.publicKey) {
+      if (publicKey) {
         // okay, the requester checks out and we have public key, send it
-        sendResponse({ publicKey: uiData.publicKey });
+        sendResponse({ publicKey });
         return;
       }
     }
@@ -46,7 +44,7 @@ const externalMessageListener = (
       // queue it up, we'll let user confirm the url looks okay and then we'll send publicKey
       // if we're good, of course
       if (url === tabUrl) {
-        sendResponse({ publicKey: uiData.publicKey });
+        sendResponse({ publicKey });
       } else {
         sendResponse({ error: "User declined access" });
       }

src/background/messageListener/internalMessageListener.ts

@@ -6,26 +6,25 @@ import { SERVICE_TYPES, APPLICATION_STATE, SERVER_URL } from "statics";
 import { Response as Request } from "api/types";
 import { removeQueryParam } from "helpers";
 import { Sender, SendResponseInterface } from "../types";
+import {
+  hasPrivateKeySelector,
+  privateKeySelector,
+  store,
+  logIn,
+  logOut,
+  mnemonicPhraseSelector,
+  publicKeySelector,
+} from "../ducks/session";
+import { SessionTimer } from "../helpers/session";
 
 const server = new StellarSdk.Server(SERVER_URL);
 
-let KEY_STORE: { privateKey: string } | null = null;
-
-interface UiData {
-  publicKey: string;
-  mnemonicPhrase: string;
-  [key: string]: string;
-}
-
-export const uiData: UiData = {
-  publicKey: "",
-  mnemonicPhrase: "",
-};
-
 const KEY_ID = "keyId";
 const WHITELIST_ID = "whitelist";
 const APPLICATION_ID = "applicationState";
 
+const sessionTimer = new SessionTimer();
+
 export const responseQueue: Array<(message?: any) => void> = [];
 export const transactionQueue: Array<{ sign: (sourceKeys: {}) => void }> = [];
 
@@ -55,14 +54,17 @@ const internalMessageListener = (
     password: string;
     wallet: StellarHdWallet;
   }) => {
-    uiData.publicKey = wallet.getPublicKey(0);
+    const publicKey = wallet.getPublicKey(0);
+    const privateKey = wallet.getSecret(0);
+
+    store.dispatch(logIn({ publicKey, mnemonicPhrase }));
 
     const keyMetadata = {
       key: {
         extra: { mnemonicPhrase },
         type: KeyType.plaintextKey,
-        publicKey: uiData.publicKey,
-        privateKey: wallet.getSecret(0),
+        publicKey,
+        privateKey,
       },
 
       password,
@@ -83,8 +85,8 @@ const internalMessageListener = (
   const createAccount = async () => {
     const { password } = request;
 
-    uiData.mnemonicPhrase = generateMnemonic({ entropyBits: 128 });
-    const wallet = fromMnemonic(uiData.mnemonicPhrase);
+    const mnemonicPhrase = generateMnemonic({ entropyBits: 128 });
+    const wallet = fromMnemonic(mnemonicPhrase);
 
     try {
       const response = await fetch(
@@ -99,30 +101,31 @@ const internalMessageListener = (
       throw new Error("Error creating account");
     }
 
-    _storeAccount({
+    await _storeAccount({
       password,
       wallet,
-      mnemonicPhrase: uiData.mnemonicPhrase,
+      mnemonicPhrase,
     });
     localStorage.setItem(APPLICATION_ID, APPLICATION_STATE.PASSWORD_CREATED);
 
-    sendResponse({ publicKey: uiData.publicKey });
+    sendResponse({ publicKey: publicKeySelector(store.getState()) });
   };
 
   const loadAccount = () => {
     sendResponse({
-      publicKey: uiData.publicKey,
+      publicKey: publicKeySelector(store.getState()),
       applicationState: localStorage.getItem(APPLICATION_ID) || "",
     });
   };
 
   const getMnemonicPhrase = () => {
-    sendResponse({ mnemonicPhrase: uiData.mnemonicPhrase });
+    sendResponse({ mnemonicPhrase: mnemonicPhraseSelector(store.getState()) });
   };
 
   const confirmMnemonicPhrase = () => {
     const isCorrectPhrase =
-      uiData.mnemonicPhrase === request.mnemonicPhraseToConfirm;
+      mnemonicPhraseSelector(store.getState()) ===
+      request.mnemonicPhraseToConfirm;
 
     const applicationState = isCorrectPhrase
       ? APPLICATION_STATE.MNEMONIC_PHRASE_CONFIRMED
@@ -158,13 +161,14 @@ const internalMessageListener = (
     }
 
     sendResponse({
-      publicKey: uiData.publicKey,
+      publicKey: publicKeySelector(store.getState()),
       applicationState: localStorage.getItem(APPLICATION_ID) || "",
     });
   };
 
   const confirmPassword = async () => {
     const { password } = request;
+    const state = store.getState();
     let keyStore;
     try {
       keyStore = await keyManager.loadKey(
@@ -175,14 +179,16 @@ const internalMessageListener = (
       console.error(e);
     }
     let publicKey = "";
+    let privateKey = "";
     if (keyStore) {
-      ({ publicKey } = keyStore);
-      uiData.publicKey = publicKey;
-      KEY_STORE = keyStore;
+      ({ privateKey, publicKey } = keyStore);
+      store.dispatch(logIn({ publicKey }));
+      sessionTimer.startSession({ privateKey });
     }
 
     sendResponse({
-      publicKey: uiData.publicKey,
+      publicKey: publicKeySelector(state),
+      hasPrivateKey: hasPrivateKeySelector(state),
       applicationState: localStorage.getItem(APPLICATION_ID) || "",
     });
   };
@@ -216,8 +222,8 @@ const internalMessageListener = (
   };
 
   const signTransaction = async () => {
-    if (KEY_STORE) {
-      const { privateKey } = KEY_STORE;
+    const privateKey = privateKeySelector(store.getState());
+    if (privateKey.length) {
       const sourceKeys = StellarSdk.Keypair.fromSecret(privateKey);
 
       let response;
@@ -239,6 +245,8 @@ const internalMessageListener = (
         transactionResponse(response);
         sendResponse({});
       }
+    } else {
+      sendResponse({ error: "Session timed out" });
     }
   };
 
@@ -251,12 +259,10 @@ const internalMessageListener = (
   };
 
   const signOut = () => {
-    Object.keys(uiData).forEach((key) => {
-      uiData[key] = "";
-    });
+    store.dispatch(logOut());
 
     sendResponse({
-      publicKey: uiData.publicKey,
+      publicKey: publicKeySelector(store.getState()),
       applicationState: localStorage.getItem(APPLICATION_ID) || "",
     });
   };

src/background/types/index.ts

@@ -4,6 +4,7 @@ export interface Sender {
 
 export interface SendResponseInterface {
   publicKey?: string;
+  hasPrivateKey?: boolean;
   applicationState?: string;
   mnemonicPhrase?: string;
   isCorrectPhrase?: boolean;