Persist transactions

src/components/navs/AppNav/AppNavActivityBtn/AppNavActivityBtn.vue

@@ -43,13 +43,13 @@
         </template>
         <template v-else>{{ $t('noRecentActivity') }}</template>
       </div>
-      <!-- <template v-if="transactions.length > 0" v-slot:footer>
+      <template v-if="transactions.length > 0" v-slot:footer>
         <div class="w-full p-3 rounded-b-lg bg-white dark:bg-gray-800 text-sm">
           <a @click="clearAllTransactions()" class="text-blue-500">
             {{ $t('clearTransactions') }}
           </a>
         </div>
-      </template> -->
+      </template>
     </BalCard>
   </BalPopover>
 </template>

src/composables/useTransactions.ts

@@ -21,6 +21,7 @@ import useNumbers from './useNumbers';
 import { GnosisTransactionDetails } from './trade/useGnosis';
 
 const WEEK_MS = 86_400_000 * 7;
+const TRANSACTIONS_SCHEMA_VERSION = '1.0';
 
 export type TransactionStatus =
   | 'pending'
@@ -79,11 +80,9 @@ export type TransactionState = {
   [networkId: number]: TransactionsMap;
 };
 
-const PERSIST_TRANSACTIONS = false;
-
 // TODO: What happens if the structure changes? Either keep a version or schema validator.
 export const transactionsState = ref<TransactionState>(
-  PERSIST_TRANSACTIONS ? lsGet<TransactionState>(LS_KEYS.Transactions, {}) : {}
+  lsGet<TransactionState>(LS_KEYS.Transactions, {}, TRANSACTIONS_SCHEMA_VERSION)
 );
 
 // COMPUTED
@@ -140,9 +139,11 @@ function getTransactions(): TransactionsMap {
 function setTransactions(transactionsMap: TransactionsMap) {
   transactionsState.value[networkId] = transactionsMap;
 
-  if (PERSIST_TRANSACTIONS) {
-    lsSet(LS_KEYS.Transactions, transactionsState.value);
-  }
+  lsSet(
+    LS_KEYS.Transactions,
+    transactionsState.value,
+    TRANSACTIONS_SCHEMA_VERSION
+  );
 }
 
 function getTransaction(id: string, type: TransactionType) {

src/lib/utils/index.ts

@@ -5,19 +5,6 @@ export function shorten(str = '') {
   return `${str.slice(0, 6)}...${str.slice(str.length - 4)}`;
 }
 
-export function jsonParse(input, fallback?) {
-  if (typeof input !== 'string') {
-    if (fallback === null) return null;
-    return fallback || {};
-  }
-  try {
-    return JSON.parse(input);
-  } catch (err) {
-    if (fallback === null) return null;
-    return fallback || {};
-  }
-}
-
 export async function sleep(time) {
   return new Promise(resolve => {
     setTimeout(resolve, time);
@@ -28,17 +15,48 @@ export function clone(item) {
   return JSON.parse(JSON.stringify(item));
 }
 
-export function lsSet(key: string, value: any) {
-  return localStorage.setItem(`${pkg.name}.${key}`, JSON.stringify(value));
+function lsAddVersion(value: any, version: string) {
+  return {
+    data: value,
+    _version: version
+  };
 }
 
-export function lsGet<T = any>(key: string, fallback?: any): T {
-  const item = localStorage.getItem(`${pkg.name}.${key}`);
-  return jsonParse(item, fallback);
+function lsGetKey(key: string) {
+  return `${pkg.name}.${key}`;
+}
+
+export function lsSet(key: string, value: any, version?: string) {
+  const data = version != null ? lsAddVersion(value, version) : value;
+
+  return localStorage.setItem(lsGetKey(key), JSON.stringify(data));
+}
+
+export function lsGet<T = any>(
+  key: string,
+  defaultValue: any = null,
+  version?: string
+): T {
+  const rawValue = localStorage.getItem(lsGetKey(key));
+
+  if (rawValue != null) {
+    try {
+      const value = JSON.parse(rawValue);
+
+      if (version != null) {
+        return value._version === version ? value.data : defaultValue;
+      }
+      return value;
+    } catch (e) {
+      return defaultValue;
+    }
+  }
+
+  return defaultValue;
 }
 
 export function lsRemove(key: string) {
-  return localStorage.removeItem(`${pkg.name}.${key}`);
+  return localStorage.removeItem(lsGetKey(key));
 }
 
 export function getCurrentTs() {

src/locales/default.json

@@ -200,7 +200,7 @@
     "requiresTransactions": "Requires 1 transaction | Requires {txCount} transactions",
     "receipt": "Receipt",
     "recentActivityTitle": "Recent activity",
-    "noRecentActivity": "Your session activity will appear here…",
+    "noRecentActivity": "Your recent activity will appear here…",
     "transactionAction": {
         "trade": "Trade",
         "approve": "Approve",