diff --git a/src/components/navs/AppNav/AppNavActivityBtn/AppNavActivityBtn.vue b/src/components/navs/AppNav/AppNavActivityBtn/AppNavActivityBtn.vue
index e703353d66..a718227b42 100644
--- a/src/components/navs/AppNav/AppNavActivityBtn/AppNavActivityBtn.vue
+++ b/src/components/navs/AppNav/AppNavActivityBtn/AppNavActivityBtn.vue
@@ -43,13 +43,13 @@
{{ $t('noRecentActivity') }}
-
+
diff --git a/src/composables/useTransactions.ts b/src/composables/useTransactions.ts
index afc00eac2b..51eff5347d 100644
--- a/src/composables/useTransactions.ts
+++ b/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(
- PERSIST_TRANSACTIONS ? lsGet(LS_KEYS.Transactions, {}) : {}
+ lsGet(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) {
diff --git a/src/lib/utils/index.ts b/src/lib/utils/index.ts
index 8a315cfcca..c11a0aceac 100644
--- a/src/lib/utils/index.ts
+++ b/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(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(
+ 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() {
diff --git a/src/locales/default.json b/src/locales/default.json
index d365eef799..c6f8fbed2a 100644
--- a/src/locales/default.json
+++ b/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",