From 402c16ea36d3375c62a2f7bb7a129c2633b511a0 Mon Sep 17 00:00:00 2001 From: alter-eggo Date: Fri, 5 Apr 2024 18:00:57 +0400 Subject: [PATCH] feat: change query persister to chrome storage, closes #5153 --- package.json | 2 +- pnpm-lock.yaml | 37 +++++++++---------- scripts/generate-manifest.js | 2 +- src/app/common/persistence.ts | 15 ++++++-- .../bitcoin-transaction-item.tsx | 13 +++++-- src/shared/route-urls.ts | 2 +- 6 files changed, 42 insertions(+), 29 deletions(-) diff --git a/package.json b/package.json index 0e70e4dda61..e6f821318d9 100644 --- a/package.json +++ b/package.json @@ -173,7 +173,7 @@ "@stitches/react": "1.2.8", "@storybook/addon-styling-webpack": "1.0.0", "@styled-system/theme-get": "5.1.2", - "@tanstack/query-sync-storage-persister": "4.35.7", + "@tanstack/query-async-storage-persister": "4.35.7", "@tanstack/react-query": "4.35.7", "@tanstack/react-query-devtools": "4.35.7", "@tanstack/react-query-persist-client": "4.35.7", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 633999c3991..abedd9eb10d 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -143,7 +143,7 @@ dependencies: '@styled-system/theme-get': specifier: 5.1.2 version: 5.1.2 - '@tanstack/query-sync-storage-persister': + '@tanstack/query-async-storage-persister': specifier: 4.35.7 version: 4.35.7 '@tanstack/react-query': @@ -390,7 +390,7 @@ devDependencies: version: 4.0.0(@babel/core@7.24.4)(@types/react-dom@18.2.19)(@types/styled-components@5.1.34) '@redux-devtools/remote': specifier: 0.9.3 - version: 0.9.3(@redux-devtools/core@4.0.0)(immutable@5.0.0-beta.5)(redux@5.0.1) + version: 0.9.3(@redux-devtools/core@4.0.0)(immutable@4.3.4)(redux@5.0.1) '@schemastore/web-manifest': specifier: 0.0.6 version: 0.0.6 @@ -5532,14 +5532,14 @@ packages: redux-devtools-themes: 1.0.0 dev: true - /@redux-devtools/remote@0.9.3(@redux-devtools/core@4.0.0)(immutable@5.0.0-beta.5)(redux@5.0.1): + /@redux-devtools/remote@0.9.3(@redux-devtools/core@4.0.0)(immutable@4.3.4)(redux@5.0.1): resolution: {integrity: sha512-M6sG/ekZiFjzVmm8tNra1c5asz6GfitdDnsCTt+Sg2hzK2HdR2rhHSbA0UyVk3/WNjor/wmY6wISmn1Om0T4KA==} peerDependencies: redux: ^3.5.2 || ^4.0.0 || ^5.0.0 dependencies: '@babel/runtime': 7.24.4 '@redux-devtools/instrument': 2.2.0(redux@5.0.1) - '@redux-devtools/utils': 3.0.0(@redux-devtools/core@4.0.0)(immutable@5.0.0-beta.5)(redux@5.0.1) + '@redux-devtools/utils': 3.0.0(@redux-devtools/core@4.0.0)(immutable@4.3.4)(redux@5.0.1) jsan: 3.1.14 querystring: 0.2.1 redux: 5.0.1 @@ -5586,13 +5586,13 @@ packages: - react-dom dev: true - /@redux-devtools/serialize@0.4.2(immutable@5.0.0-beta.5): + /@redux-devtools/serialize@0.4.2(immutable@4.3.4): resolution: {integrity: sha512-YVqZCChJld5l3Ni2psEZ5loe9x5xpf9J4ckz+7OJdzCNsplC7vzjnkQbFxE6+ULZbywRVp+nSBslTXmaXqAw4A==} peerDependencies: immutable: ^4.0.0 dependencies: '@babel/runtime': 7.24.4 - immutable: 5.0.0-beta.5 + immutable: 4.3.4 jsan: 3.1.14 dev: true @@ -5652,7 +5652,7 @@ packages: - react-dom dev: true - /@redux-devtools/utils@3.0.0(@redux-devtools/core@4.0.0)(immutable@5.0.0-beta.5)(redux@5.0.1): + /@redux-devtools/utils@3.0.0(@redux-devtools/core@4.0.0)(immutable@4.3.4)(redux@5.0.1): resolution: {integrity: sha512-m1AJoxQffm1/6m0qrkb7gW0FkmaAoi1/HJzmdkchAeA8sAJhzGOnXJEpsjmXPt5BIHxg0zsglA+5FsgGWXa97A==} peerDependencies: '@redux-devtools/core': ^4.0.0 @@ -5661,10 +5661,10 @@ packages: dependencies: '@babel/runtime': 7.24.4 '@redux-devtools/core': 4.0.0(react-redux@9.1.0)(react@18.2.0)(redux@5.0.1) - '@redux-devtools/serialize': 0.4.2(immutable@5.0.0-beta.5) + '@redux-devtools/serialize': 0.4.2(immutable@4.3.4) '@types/get-params': 0.1.2 get-params: 0.1.2 - immutable: 5.0.0-beta.5 + immutable: 4.3.4 jsan: 3.1.14 lodash: 4.17.21 nanoid: 3.3.4 @@ -8541,6 +8541,12 @@ packages: remove-accents: 0.4.2 dev: false + /@tanstack/query-async-storage-persister@4.35.7: + resolution: {integrity: sha512-+GftETR23j8DR0of84m1iBILu2sZvmHuZbRB9cYxoL6jVn8LEvwk8uXSV/4rRyy2kPgggjqYZclQNJntqtbfFw==} + dependencies: + '@tanstack/query-persist-client-core': 4.35.7 + dev: false + /@tanstack/query-core@4.35.7: resolution: {integrity: sha512-PgDJtX75ubFS0WCYFM7DqEoJ4QbxU3S5OH3gJSI40xr7UVVax3/J4CM3XUMOTs+EOT5YGEfssi3tfRVGte4DEw==} dev: false @@ -8551,12 +8557,6 @@ packages: '@tanstack/query-core': 4.35.7 dev: false - /@tanstack/query-sync-storage-persister@4.35.7: - resolution: {integrity: sha512-LwOV4FfbRQmCH3MUXU2xngnws5AzRJ8mtc9JlDogRVwutlDEeY2bYSiu7xV6NDRLPf0/+0KCMzWeBx6Tlgnkgw==} - dependencies: - '@tanstack/query-persist-client-core': 4.35.7 - dev: false - /@tanstack/react-query-devtools@4.35.7(@tanstack/react-query@4.35.7)(react-dom@18.2.0)(react@18.2.0): resolution: {integrity: sha512-oe3reHNvXBTUvNb9jwLY8EYOXyp8Oq8/c40iwpXBnEkAtJI+RryrCXaGKFTivg72roPcYHzKILQHR9jbX8sn1Q==} peerDependencies: @@ -15799,10 +15799,6 @@ packages: resolution: {integrity: sha512-fsXeu4J4i6WNWSikpI88v/PcVflZz+6kMhUfIwc5SY+poQRPnaf5V7qds6SUyUN3cVxEzuCab7QIoLOQ+DQ1wA==} dev: true - /immutable@5.0.0-beta.5: - resolution: {integrity: sha512-1RO6wxfJdh/uyWb2MTn3RuCPXYmpRiAhoKm8vEnA50+2Gy0j++6GBtu5q6sq2d4tpcL+e1sCHzk8NkWnRhT2/Q==} - dev: true - /import-fresh@3.3.0: resolution: {integrity: sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==} engines: {node: '>=6'} @@ -22049,6 +22045,9 @@ packages: /sqlite3@5.1.6: resolution: {integrity: sha512-olYkWoKFVNSSSQNvxVUfjiVbz3YtBwTJj+mfV5zpHmqW3sELx2Cf4QCdirMelhM5Zh+KDVaKgQHqCxrqiWHybw==} requiresBuild: true + peerDependenciesMeta: + node-gyp: + optional: true dependencies: '@mapbox/node-pre-gyp': 1.0.11 node-addon-api: 4.3.0 diff --git a/scripts/generate-manifest.js b/scripts/generate-manifest.js index 5ae153fb99f..ca234728ce5 100644 --- a/scripts/generate-manifest.js +++ b/scripts/generate-manifest.js @@ -70,7 +70,7 @@ const manifest = { author: 'Leather Wallet, LLC', description: 'Leather is the only Bitcoin wallet you need to tap into the emerging Bitcoin economy.', - permissions: ['contextMenus', 'storage'], + permissions: ['contextMenus', 'storage', 'unlimitedStorage'], commands: { _execute_browser_action: { suggested_key: { diff --git a/src/app/common/persistence.ts b/src/app/common/persistence.ts index 9aa61cf9b26..59cb6f06126 100644 --- a/src/app/common/persistence.ts +++ b/src/app/common/persistence.ts @@ -1,11 +1,20 @@ -import { createSyncStoragePersister } from '@tanstack/query-sync-storage-persister'; +import { createAsyncStoragePersister } from '@tanstack/query-async-storage-persister'; import { QueryClient } from '@tanstack/react-query'; import { persistQueryClient } from '@tanstack/react-query-persist-client'; import { PERSISTENCE_CACHE_TIME } from '@shared/constants'; import { IS_TEST_ENV } from '@shared/environment'; -const localStoragePersistor = createSyncStoragePersister({ storage: window.localStorage }); +const storage = { + getItem: async (key: string) => { + const storageVal = await chrome.storage.local.get([key]); + return storageVal[key]; + }, + setItem: (key: string, value: string) => chrome.storage.local.set({ [key]: value }), + removeItem: (key: string) => chrome.storage.local.remove(key), +}; + +const chromeStorageLocalPersister = createAsyncStoragePersister({ storage }); export const queryClient = new QueryClient({ defaultOptions: { @@ -21,7 +30,7 @@ export async function persistAndRenderApp(renderApp: () => void) { if (!IS_TEST_ENV) persistQueryClient({ queryClient, - persister: localStoragePersistor, + persister: chromeStorageLocalPersister, buster: VERSION, }); renderApp(); diff --git a/src/app/components/bitcoin-transaction-item/bitcoin-transaction-item.tsx b/src/app/components/bitcoin-transaction-item/bitcoin-transaction-item.tsx index 57546e1351d..42643641749 100644 --- a/src/app/components/bitcoin-transaction-item/bitcoin-transaction-item.tsx +++ b/src/app/components/bitcoin-transaction-item/bitcoin-transaction-item.tsx @@ -1,6 +1,8 @@ import { useMemo } from 'react'; import { useLocation, useNavigate } from 'react-router-dom'; +import { HStack } from 'leather-styles/jsx'; + import { BitcoinTx } from '@shared/models/transactions/bitcoin-transaction.model'; import { RouteUrls } from '@shared/route-urls'; @@ -39,6 +41,7 @@ export function BitcoinTransactionItem({ transaction }: BitcoinTransactionItemPr const { data: inscriptionData } = useGetInscriptionsByOutputQuery(transaction, { select(data) { + console.log(data); const inscription = data.results[0]; if (!inscription) return; return convertInscriptionToSupportedInscriptionType(inscription); @@ -74,10 +77,12 @@ export function BitcoinTransactionItem({ transaction }: BitcoinTransactionItemPr isOriginator && !transaction.status.confirmed && !containsTaprootInput(transaction); const txCaption = ( - - {caption} - {inscriptionData ? {inscriptionData.mime_type} : null} - + + + {caption} + {inscriptionData ? {inscriptionData.mime_type} : null} + + ); const title = inscriptionData ? `Ordinal inscription #${inscriptionData.number}` : 'Bitcoin'; diff --git a/src/shared/route-urls.ts b/src/shared/route-urls.ts index 7be2f0ba592..87903d8d0e5 100644 --- a/src/shared/route-urls.ts +++ b/src/shared/route-urls.ts @@ -34,7 +34,7 @@ export enum RouteUrls { ViewSecretKey = '/view-secret-key', // nested routes must have relative paths - Activity = 'activity', + Activity = '/activity', Receive = 'receive', ReceiveStx = 'receive/stx', ReceiveBtc = 'receive/btc',