fix tests

.changeset/tiny-wolves-cover.md

@@ -0,0 +1,7 @@
+---
+'@repo/ui': major
+'@penumbra-zone/storage': minor
+'minifront': minor
+---
+
+Utilize v10 remote registry methods

apps/minifront/src/components/tx-details/tx-viewer.tsx

@@ -1,5 +1,5 @@
 import { JsonViewer } from '@repo/ui/components/ui/json-viewer';
-import { TransactionViewComponent } from '@repo/ui/components/ui/tx';
+import { MetadataFetchFn, TransactionViewComponent } from '@repo/ui/components/ui/tx';
 import { TransactionInfo } from '@buf/penumbra-zone_penumbra.bufbuild_es/penumbra/view/v1/view_pb.js';
 import type { Jsonified } from '@penumbra-zone/types/jsonified';
 import { useState } from 'react';
@@ -16,13 +16,13 @@ import { ChainRegistryClient } from '@penumbra-labs/registry';
 export enum TxDetailsTab {
   PUBLIC = 'public',
   PRIVATE = 'private',
-  RECIEVER = 'reciever',
+  RECEIVER = 'receiver',
 }
 
 const OPTIONS = [
   { label: 'Your View', value: TxDetailsTab.PRIVATE },
   { label: 'Public View', value: TxDetailsTab.PUBLIC },
-  { label: 'Reciever View', value: TxDetailsTab.RECIEVER },
+  { label: 'Receiver View', value: TxDetailsTab.RECEIVER },
 ];
 
 const getMetadata: MetadataFetchFn = async ({ assetId }) => {
@@ -42,14 +42,14 @@ export const TxViewer = ({ txInfo }: { txInfo?: TransactionInfo }) => {
   const showReceiverTransactionView = transactionClassification === 'send';
   const filteredOptions = showReceiverTransactionView
     ? OPTIONS
-    : OPTIONS.filter(option => option.value !== TxDetailsTab.RECIEVER);
+    : OPTIONS.filter(option => option.value !== TxDetailsTab.RECEIVER);
 
   // use React-Query to invoke custom hooks that call async translators.
   const { data: receiverView } = useQuery(
     ['receiverView', txInfo, option],
     () => fetchReceiverView(txInfo!),
     {
-      enabled: option === TxDetailsTab.RECIEVER && !!txInfo,
+      enabled: option === TxDetailsTab.RECEIVER && !!txInfo,
     },
   );
 
@@ -78,7 +78,7 @@ export const TxViewer = ({ txInfo }: { txInfo?: TransactionInfo }) => {
           </div>
         </>
       )}
-      {option === TxDetailsTab.RECIEVER && receiverView && showReceiverTransactionView && (
+      {option === TxDetailsTab.RECEIVER && receiverView && showReceiverTransactionView && (
         <TransactionViewComponent txv={receiverView} metadataFetcher={getMetadata} />
       )}
       {option === TxDetailsTab.PUBLIC && txInfo && (

apps/minifront/src/fetchers/registry.ts

@@ -10,7 +10,9 @@ export const useRegistry = () => {
     queryKey: ['penumbraRegistry'],
     queryFn: async (): Promise<Registry> => {
       const chainId = await getChainId();
-      if (!chainId) throw new Error('No chain id in response');
+      if (!chainId) {
+        throw new Error('No chain id in response');
+      }
       return chainRegistryClient.remote.get(chainId);
     },
     staleTime: Infinity,
@@ -23,7 +25,7 @@ export const getStakingTokenMetadata = async () => {
     throw new Error('Could not fetch chain id');
   }
 
-  const { stakingAssetId } = await chainRegistryClient.remote.globals();
+  const { stakingAssetId } = chainRegistryClient.bundled.globals();
   const stakingAssetsMetadata = await getAssetMetadataById(stakingAssetId);
 
   if (!stakingAssetsMetadata) {

packages/storage/src/indexed-db/index.ts

@@ -283,7 +283,9 @@ export class IndexedDb implements IndexedDbInterface {
       const localVersion = await this.db.get('REGISTRY_VERSION', 'commit');
 
       // Registry version already saved
-      if (localVersion === remoteVersion) return;
+      if (localVersion === remoteVersion) {
+        return;
+      }
 
       const assets = registry.getAllAssets();
       const saveLocalMetadata = assets.map(m => this.saveAssetsMetadata(m));

packages/storage/src/indexed-db/indexed-db.test.ts

@@ -54,12 +54,31 @@ import {
   DutchAuctionDescription,
 } from '@buf/penumbra-zone_penumbra.bufbuild_es/penumbra/core/component/auction/v1/auction_pb.js';
 import { StateCommitment } from '@buf/penumbra-zone_penumbra.bufbuild_es/penumbra/crypto/tct/v1/tct_pb.js';
-import { ChainRegistryClient } from '@penumbra-labs/registry';
+import { ChainRegistryClient, Registry } from '@penumbra-labs/registry';
 import fetchMock from 'fetch-mock';
+import { uint8ArrayToBase64 } from '@penumbra-zone/types/base64';
+import { JsonValue } from '@bufbuild/protobuf';
 
 const registryClient = new ChainRegistryClient();
 const chainId = 'penumbra-testnet-deimos-8';
 
+const jsonifyRegistry = (r: Registry) => {
+  const assetById = r.getAllAssets().reduce<Record<string, JsonValue>>((acc, m) => {
+    const assetIdStr = uint8ArrayToBase64(m.penumbraAssetId!.inner);
+    acc[assetIdStr] = m.toJson();
+    return acc;
+  }, {});
+
+  const numeraires = r.numeraires.map(n => uint8ArrayToBase64(n.inner));
+
+  return {
+    chainId: r.chainId,
+    ibcConnections: r.ibcConnections,
+    numeraires,
+    assetById,
+  };
+};
+
 // uses different wallet ids so no collisions take place
 const generateInitialProps = () => ({
   chainId,
@@ -74,9 +93,9 @@ const registryEndpoint = 'https://raw.githubusercontent.com/prax-wallet/registry
 describe('IndexedDb', () => {
   beforeEach(() => {
     fetchMock.reset();
-    fetchMock.mock(`${registryEndpoint}/chains/${chainId}`, {
+    fetchMock.mock(`${registryEndpoint}/chains/${chainId}.json`, {
       status: 200,
-      body: registryClient.bundled.get(chainId),
+      body: jsonifyRegistry(registryClient.bundled.get(chainId)),
     });
   });
 
@@ -94,7 +113,7 @@ describe('IndexedDb', () => {
       const testnetDb = await IndexedDb.initialize(generateInitialProps());
       const mainnetDb = await IndexedDb.initialize({
         ...generateInitialProps(),
-        chainId: 'penumbra-testnet-deimos-7',
+        chainId,
       });
 
       await testnetDb.saveAssetsMetadata(metadataA);
@@ -159,7 +178,7 @@ describe('IndexedDb', () => {
       for await (const note of db.iterateSpendableNotes()) {
         notes.push(note);
       }
-      expect(notes.length).toBe(21);
+      expect(notes.length).toBe(1);
 
       await db.saveAssetsMetadata(metadataA);
 
@@ -343,7 +362,7 @@ describe('IndexedDb', () => {
         savedAssets.push(asset);
       }
       const registryLength = registryClient.bundled.get(chainId).getAllAssets().length;
-      expect(savedAssets.length === registryLength + 3).toBeTruthy();
+      expect(savedAssets.length).toBe(registryLength + 3);
     });
   });
 

packages/ui/components/ui/tx/index.tsx

@@ -28,23 +28,30 @@ const useFeeMetadata = (txv: TransactionView, getMetadata: MetadataFetchFn) => {
     }),
   );
 
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [error, setError] = useState<unknown>();
+
   useEffect(() => {
     const chainId = txv.bodyView?.transactionParameters?.chainId;
     const assetId = txv.bodyView?.transactionParameters?.fee?.assetId;
-    void getMetadata({ chainId, assetId }).then(metadata => {
-      if (metadata) {
-        const feeValueView = new ValueView({
-          valueView: {
-            case: 'knownAssetId',
-            value: { amount, metadata },
-          },
-        });
-        setFeeValueView(feeValueView);
-      }
-    });
-  }, []); // txv, getMetadata, setFeeValueView
+    setIsLoading(true);
+    void getMetadata({ chainId, assetId })
+      .then(metadata => {
+        if (metadata) {
+          const feeValueView = new ValueView({
+            valueView: {
+              case: 'knownAssetId',
+              value: { amount, metadata },
+            },
+          });
+          setFeeValueView(feeValueView);
+        }
+        setIsLoading(false);
+      })
+      .catch((e: unknown) => setError(e));
+  }, [txv, getMetadata, setFeeValueView]);
 
-  return feeValueView;
+  return { feeValueView, isLoading, error };
 };
 
 export const TransactionViewComponent = ({
@@ -54,7 +61,7 @@ export const TransactionViewComponent = ({
   txv: TransactionView;
   metadataFetcher: MetadataFetchFn;
 }) => {
-  const feeValueView = useFeeMetadata(txv, metadataFetcher);
+  const { feeValueView, isLoading, error } = useFeeMetadata(txv, metadataFetcher);
 
   return (
     <div className='flex flex-col gap-8'>
@@ -68,9 +75,12 @@ export const TransactionViewComponent = ({
         <ViewBox
           label='Transaction Fee'
           visibleContent={
-            <div className='font-mono'>
-              {/* Add loading indicator */}
+            <div className='flex items-center gap-2'>
               <ValueViewComponent view={feeValueView} />
+              {isLoading && <span className='font-mono text-light-brown'>Loading...</span>}
+              {error ? (
+                <span className='font-mono text-red-400'>Error: {String(error)}</span>
+              ) : null}
             </div>
           }
         />