fix(extension): #32: save chainIn in localstorage

apps/extension/src/shared/components/grpc-endpoint-form/use-grpc-endpoint-form.ts

@@ -66,7 +66,7 @@ export const useGrpcEndpointForm = () => {
         if (!appParameters?.chainId) throw new ConnectError('', Code.NotFound);
 
         setIsSubmitButtonEnabled(true);
-        setChainId(appParameters.chainId);
+        void setChainId(appParameters.chainId);
 
         // Only set the original chain ID the first time, so that we can compare
         // it on submit.

apps/extension/src/state/network.test.ts

@@ -29,4 +29,15 @@ describe('Network Slice', () => {
       expect(urlFromChromeStorage).toBe(testUrl);
     });
   });
+
+  describe('setChainId', () => {
+    test('grpc endpoint can be set', async () => {
+      const testChain = 'testnet-deimos-8';
+      await useStore.getState().network.setChainId(testChain);
+
+      expect(useStore.getState().network.chainId).toBe(testChain);
+      const idFromChromeStorage = await localStorage.get('chainId');
+      expect(idFromChromeStorage).toBe(testChain);
+    });
+  });
 });

apps/extension/src/state/network.ts

@@ -7,7 +7,7 @@ export interface NetworkSlice {
   fullSyncHeight?: number;
   chainId?: string;
   setGRPCEndpoint: (endpoint: string) => Promise<void>;
-  setChainId: (chainId: string) => void;
+  setChainId: (chainId: string) => Promise<void>;
 }
 
 export const createNetworkSlice =
@@ -24,10 +24,12 @@ export const createNetworkSlice =
 
         await local.set('grpcEndpoint', endpoint);
       },
-      setChainId: (chainId: string) => {
+      setChainId: async (chainId: string) => {
         set(state => {
           state.network.chainId = chainId;
         });
+
+        await local.set('chainId', chainId);
       },
     };
   };

apps/extension/src/state/persist.ts

@@ -7,7 +7,6 @@ import { LocalStorageState } from '../storage/types';
 import { sessionExtStorage, SessionStorageState } from '../storage/session';
 import { StorageItem } from '../storage/base';
 import { walletsFromJson } from '@penumbra-zone/types/wallet';
-import { AppParameters } from '@buf/penumbra-zone_penumbra.bufbuild_es/penumbra/core/app/v1/app_pb';
 
 export type Middleware = <
   T,
@@ -30,6 +29,7 @@ export const customPersistImpl: Persist = f => (set, get, store) => {
     const passwordKey = await sessionExtStorage.get('passwordKey');
     const wallets = await localExtStorage.get('wallets');
     const grpcEndpoint = await localExtStorage.get('grpcEndpoint');
+    const chainId = await localExtStorage.get('chainId');
     const knownSites = await localExtStorage.get('knownSites');
     const frontendUrl = await localExtStorage.get('frontendUrl');
     const numeraires = await localExtStorage.get('numeraires');
@@ -39,6 +39,7 @@ export const customPersistImpl: Persist = f => (set, get, store) => {
         state.password.key = passwordKey;
         state.wallets.all = walletsFromJson(wallets);
         state.network.grpcEndpoint = grpcEndpoint;
+        state.network.chainId = chainId;
         state.connectedSites.knownSites = knownSites;
         state.defaultFrontend.url = frontendUrl;
         state.numeraires.selectedNumeraires = numeraires;
@@ -122,15 +123,13 @@ function syncLocal(changes: Record<string, chrome.storage.StorageChange>, set: S
     );
   }
 
-  if (changes['params']) {
-    const stored = changes['params'].newValue as
-      | StorageItem<LocalStorageState['params']>
+  if (changes['chainId']) {
+    const stored = changes['chainId'].newValue as
+      | StorageItem<LocalStorageState['chainId']>
       | undefined;
     set(
       produce((state: AllSlices) => {
-        state.network.chainId = stored?.value
-          ? AppParameters.fromJsonString(stored.value).chainId
-          : state.network.chainId;
+        state.network.chainId = stored?.value ?? state.network.chainId;
       }),
     );
   }

apps/extension/src/storage/local.ts

@@ -7,7 +7,7 @@ export const localDefaults: Required<LocalStorageState> = {
   fullSyncHeight: undefined,
   grpcEndpoint: undefined,
   knownSites: [],
-  params: undefined,
+  chainId: undefined,
   passwordKeyPrint: undefined,
   frontendUrl: undefined,
   numeraires: [],

apps/extension/src/storage/types.ts

@@ -1,4 +1,3 @@
-import { AppParameters } from '@buf/penumbra-zone_penumbra.bufbuild_es/penumbra/core/app/v1/app_pb';
 import { KeyPrintJson } from '@penumbra-zone/crypto-web/encryption';
 import { Stringified } from '@penumbra-zone/types/jsonified';
 import { UserChoice } from '@penumbra-zone/types/user-choice';
@@ -20,9 +19,9 @@ export interface LocalStorageState {
   wallets: WalletJson[];
   grpcEndpoint: string | undefined;
   frontendUrl: string | undefined;
+  chainId: string | undefined;
   passwordKeyPrint: KeyPrintJson | undefined;
   fullSyncHeight: number | undefined;
   knownSites: OriginRecord[];
-  params: Stringified<AppParameters> | undefined;
   numeraires: Stringified<AssetId>[];
 }

apps/extension/src/utils/test-constants.ts

@@ -7,7 +7,7 @@ export const localTestDefaults: LocalStorageState = {
   wallets: [],
   fullSyncHeight: undefined,
   knownSites: [{ origin: EXAMPLE_MINIFRONT_URL, choice: UserChoice.Approved, date: Date.now() }],
-  params: undefined,
+  chainId: undefined,
   grpcEndpoint: undefined,
   passwordKeyPrint: undefined,
   frontendUrl: EXAMPLE_MINIFRONT_URL,

apps/extension/src/wallet-services.ts

@@ -1,4 +1,3 @@
-import { AppParameters } from '@buf/penumbra-zone_penumbra.bufbuild_es/penumbra/core/app/v1/app_pb';
 import { AppService } from '@penumbra-zone/protobuf';
 import { createGrpcWebTransport } from '@connectrpc/connect-web';
 import { createPromiseClient } from '@connectrpc/connect';
@@ -39,9 +38,7 @@ export const startWalletServices = async () => {
  * local storage.
  */
 const getChainId = async (baseUrl: string) => {
-  const localChainId = await localExtStorage
-    .get('params')
-    .then(json => json && AppParameters.fromJsonString(json).chainId);
+  const localChainId = await localExtStorage.get('chainId');
 
   if (localChainId) return localChainId;
 
@@ -87,7 +84,7 @@ const attachServiceControlListener = ({
       case ServicesMessage.ClearCache:
         void (async () => {
           blockProcessor.stop('clearCache');
-          await Promise.allSettled([localExtStorage.remove('params'), indexedDb.clear()]);
+          await Promise.allSettled([localExtStorage.remove('chainId'), indexedDb.clear()]);
         })()
           .then(() => respond())
           .finally(() => chrome.runtime.reload());