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 @@ - + 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",