feat: change query persister to chrome storage, closes #5153

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

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: {

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();

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';
 
@@ -74,10 +76,12 @@ export function BitcoinTransactionItem({ transaction }: BitcoinTransactionItemPr
     isOriginator && !transaction.status.confirmed && !containsTaprootInput(transaction);
 
   const txCaption = (
-    <BulletSeparator>
-      <Caption>{caption}</Caption>
-      {inscriptionData ? <Caption>{inscriptionData.mime_type}</Caption> : null}
-    </BulletSeparator>
+    <HStack gap="space.02">
+      <BulletSeparator>
+        <Caption>{caption}</Caption>
+        {inscriptionData ? <Caption>{inscriptionData.mime_type}</Caption> : null}
+      </BulletSeparator>
+    </HStack>
   );
 
   const title = inscriptionData ? `Ordinal inscription #${inscriptionData.number}` : 'Bitcoin';

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',