Use remote registry API [prax]

.changeset/long-bees-unite.md

@@ -0,0 +1,7 @@
+---
+'@repo/context': minor
+'chrome-extension': minor
+'@repo/ui': minor
+---
+
+Update to latest penumbra-zone packages (uses v10 registry's remote methods)

apps/extension/package.json

@@ -19,21 +19,21 @@
     "@bufbuild/protobuf": "^1.10.0",
     "@connectrpc/connect": "^1.4.0",
     "@connectrpc/connect-web": "^1.4.0",
-    "@penumbra-labs/registry": "9.4.0",
+    "@penumbra-labs/registry": "10.0.0",
     "@penumbra-zone/bech32m": "^6.1.1",
-    "@penumbra-zone/client": "^11.0.0",
-    "@penumbra-zone/crypto-web": "^12.0.0",
+    "@penumbra-zone/client": "^11.0.1",
+    "@penumbra-zone/crypto-web": "^13.0.0",
     "@penumbra-zone/getters": "^11.0.0",
     "@penumbra-zone/keys": "^4.2.1",
-    "@penumbra-zone/perspective": "^13.0.0",
+    "@penumbra-zone/perspective": "^14.0.0",
     "@penumbra-zone/protobuf": "^5.4.0",
-    "@penumbra-zone/query": "^14.0.0",
-    "@penumbra-zone/services": "^16.0.0",
-    "@penumbra-zone/storage": "^13.0.0",
-    "@penumbra-zone/transport-chrome": "^5.0.1",
-    "@penumbra-zone/transport-dom": "^7.2.1",
-    "@penumbra-zone/types": "^15.0.0",
-    "@penumbra-zone/wasm": "^16.0.0",
+    "@penumbra-zone/query": "^15.0.0",
+    "@penumbra-zone/services": "^17.0.0",
+    "@penumbra-zone/storage": "^14.0.0",
+    "@penumbra-zone/transport-chrome": "^5.0.2",
+    "@penumbra-zone/transport-dom": "^7.2.2",
+    "@penumbra-zone/types": "^15.1.0",
+    "@penumbra-zone/wasm": "^17.0.0",
     "@radix-ui/react-icons": "^1.3.0",
     "@repo/context": "workspace:*",
     "@repo/ui": "workspace:*",

apps/extension/src/hooks/numeraires-query.ts

@@ -0,0 +1,28 @@
+import { useQuery } from '@tanstack/react-query';
+import { ChainRegistryClient } from '@penumbra-labs/registry';
+import { useMemo } from 'react';
+
+export const useNumeraires = (chainId?: string) => {
+  const { data, isLoading, error, isError } = useQuery({
+    queryKey: ['registry', chainId],
+    queryFn: async () => {
+      const registryClient = new ChainRegistryClient();
+      return registryClient.remote.get(chainId!);
+    },
+    staleTime: Infinity,
+    enabled: Boolean(chainId),
+  });
+
+  const numeraires = useMemo(() => {
+    if (!chainId) {
+      if (isError) {
+        console.error(`Could not load numeraires for chainId: ${chainId}`);
+      }
+      return [];
+    }
+
+    return data?.numeraires.map(n => data.getMetadata(n)) ?? [];
+  }, [data, chainId, isError]);
+
+  return { numeraires, isLoading, error };
+};

apps/extension/src/routes/popup/approval/transaction/index.tsx

@@ -1,4 +1,4 @@
-import { TransactionViewComponent } from '@repo/ui/components/ui/tx';
+import { MetadataFetchFn, TransactionViewComponent } from '@repo/ui/components/ui/tx';
 import { useStore } from '../../../../state';
 import { txApprovalSelector } from '../../../../state/tx-approval';
 import { JsonViewer } from '@repo/ui/components/ui/json-viewer';
@@ -9,6 +9,15 @@ import { ApproveDeny } from '../approve-deny';
 import { UserChoice } from '@penumbra-zone/types/user-choice';
 import type { Jsonified } from '@penumbra-zone/types/jsonified';
 import { TransactionViewTab } from './types';
+import { ChainRegistryClient } from '@penumbra-labs/registry';
+import { viewClient } from '../../../../clients';
+
+const getMetadata: MetadataFetchFn = async ({ assetId }) => {
+  const feeAssetId = assetId ? assetId : new ChainRegistryClient().bundled.globals().stakingAssetId;
+
+  const { denomMetadata } = await viewClient.assetMetadataById({ assetId: feeAssetId });
+  return denomMetadata;
+};
 
 export const TransactionApproval = () => {
   const { authorizeRequest: authReqString, setChoice, sendResponse } = useStore(txApprovalSelector);
@@ -48,7 +57,7 @@ export const TransactionApproval = () => {
           onValueChange={setSelectedTransactionViewName}
         />
 
-        <TransactionViewComponent txv={selectedTransactionView} />
+        <TransactionViewComponent txv={selectedTransactionView} metadataFetcher={getMetadata} />
 
         {selectedTransactionViewName === TransactionViewTab.SENDER && (
           <div className='mt-8'>

apps/extension/src/routes/popup/settings/settings.tsx

@@ -14,7 +14,7 @@ import { usePopupNav } from '../../../utils/navigate';
 import { PopupPath } from '../paths';
 import { SettingsScreen } from './settings-screen';
 import { useChainIdQuery } from '../../../hooks/chain-id';
-import { getNumeraireFromRegistry } from '../../../utils/get-numeraires-from-registry';
+import { useNumeraires } from '../../../hooks/numeraires-query';
 
 const links = [
   {
@@ -54,7 +54,7 @@ export const Settings = () => {
   const { clearSessionPassword } = useStore(passwordSelector);
 
   const { chainId } = useChainIdQuery();
-  const numeraires = getNumeraireFromRegistry(chainId);
+  const { numeraires } = useNumeraires(chainId);
 
   return (
     <SettingsScreen title='Settings'>

apps/extension/src/shared/components/default-frontend-form/index.tsx

@@ -1,35 +1,36 @@
 import { SelectList } from '@repo/ui/components/ui/select';
-import { ChainRegistryClient } from '@penumbra-labs/registry';
 import { AllSlices } from '../../../state';
 import { useStoreShallow } from '../../../utils/use-store-shallow';
 import { useMemo, useRef } from 'react';
 import { Button } from '@repo/ui/components/ui/button';
 import { NewFrontendInput } from './new-frontend-input';
 import { useIsFocus } from './use-is-focus';
 import { extractDomain } from './extract-domain';
+import { LoadingList } from '../loading-list';
+import { useRegistry } from '../registry';
 
 interface DisplayedFrontend {
   title: string;
   url: string;
 }
 
-const getFrontendsFromRegistry = (selectedRpc?: string): DisplayedFrontend[] => {
-  const registryClient = new ChainRegistryClient();
-  const { frontends } = registryClient.globals();
-  const registeredFrontends = frontends.map(frontend => ({
+const useFrontendsList = (selectedRpc?: string) => {
+  const { data, isLoading, error } = useRegistry();
+
+  const frontends = (data?.frontends ?? []).map(frontend => ({
     title: extractDomain(frontend),
     url: frontend,
   }));
 
   if (selectedRpc) {
-    registeredFrontends.push({
+    frontends.push({
       title: 'Embedded RPC frontend',
       /*NB: we merge using the variadic URL constructor here to avoid double-slashes*/
       url: new URL('/app/', selectedRpc).href,
     });
   }
 
-  return registeredFrontends;
+  return { frontends, isLoading, error };
 };
 
 const getIsCustomFrontendSelected = (frontends: DisplayedFrontend[], selected?: string) => {
@@ -46,7 +47,7 @@ const useDefaultFrontendSelector = (state: AllSlices) => {
 
 export const DefaultFrontendForm = ({ isOnboarding }: { isOnboarding?: boolean }) => {
   const { selectedFrontend, selectUrl, selectedRpc } = useStoreShallow(useDefaultFrontendSelector);
-  const frontends = useMemo(() => getFrontendsFromRegistry(selectedRpc), [selectedRpc]);
+  const { frontends, isLoading, error } = useFrontendsList(selectedRpc);
   const isCustomSelected = useMemo(
     () => getIsCustomFrontendSelected(frontends, selectedFrontend),
     [frontends, selectedFrontend],
@@ -76,16 +77,7 @@ export const DefaultFrontendForm = ({ isOnboarding }: { isOnboarding?: boolean }
         onSelect={selectUrl}
       />
 
-      <div key='add-to-list' className='my-1 text-right'>
-        <a
-          href='https://github.com/prax-wallet/registry'
-          target='_blank'
-          rel='noreferrer'
-          className='text-xs text-muted-foreground'
-        >
-          Add to this list
-        </a>
-      </div>
+      <LoadingList isLoading={isLoading} />
 
       {(isOnboarding ?? isFocused) && (
         <Button
@@ -97,6 +89,7 @@ export const DefaultFrontendForm = ({ isOnboarding }: { isOnboarding?: boolean }
           {isOnboarding ? 'Next' : 'Save'}
         </Button>
       )}
+      <div className='text-red-400'>{error ? String(error) : null}</div>
     </SelectList>
   );
 };

apps/extension/src/shared/components/grpc-endpoint-form/index.tsx

@@ -5,6 +5,7 @@ import { Network, Loader2 } from 'lucide-react';
 import { useGrpcEndpointForm } from './use-grpc-endpoint-form';
 import { ConfirmChangedChainIdDialog } from './confirm-changed-chain-id-dialog';
 import { ChainIdOrError } from './chain-id-or-error';
+import { LoadingList } from '../loading-list';
 
 /**
  * Renders all the parts of the gRPC endpoint form that are shared between the
@@ -24,7 +25,7 @@ export const GrpcEndpointForm = ({
     chainIdChanged,
     confirmChangedChainIdPromise,
     originalChainId,
-    grpcEndpoints,
+    grpcEndpointsQuery,
     grpcEndpointInput,
     setGrpcEndpointInput,
     onSubmit,
@@ -47,7 +48,7 @@ export const GrpcEndpointForm = ({
       <div className='flex flex-col gap-2'>
         <form className='flex flex-col gap-4' onSubmit={handleSubmit}>
           <SelectList>
-            {grpcEndpoints.map(option => {
+            {grpcEndpointsQuery.rpcs.map(option => {
               const imageUrl = option.images[0]?.png ?? option.images[0]?.svg;
               return (
                 <SelectList.Option
@@ -93,16 +94,7 @@ export const GrpcEndpointForm = ({
             />
           </SelectList>
 
-          <div className='text-right'>
-            <a
-              href='https://github.com/prax-wallet/registry'
-              target='_blank'
-              rel='noreferrer'
-              className='text-xs text-muted-foreground'
-            >
-              Add to this list
-            </a>
-          </div>
+          <LoadingList isLoading={grpcEndpointsQuery.isLoading} />
 
           <Button variant='gradient' type='submit' disabled={!isSubmitButtonEnabled}>
             {isValidationLoading ? (
@@ -117,6 +109,9 @@ export const GrpcEndpointForm = ({
         </form>
 
         <ChainIdOrError chainId={chainId} chainIdChanged={chainIdChanged} error={rpcError} />
+        <div className='text-red-400'>
+          {grpcEndpointsQuery.error ? String(grpcEndpointsQuery.error) : null}
+        </div>
       </div>
 
       <ConfirmChangedChainIdDialog

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

@@ -6,9 +6,9 @@ import { AllSlices } from '../../../state';
 import { useStoreShallow } from '../../../utils/use-store-shallow';
 import { ServicesMessage } from '../../../message/services';
 import debounce from 'lodash/debounce';
-import { ChainRegistryClient } from '@penumbra-labs/registry';
 import { randomSort } from '../../utils/random-sort';
 import { isValidUrl } from '../../utils/is-valid-url';
+import { useRegistry } from '../registry';
 
 const useSaveGrpcEndpointSelector = (state: AllSlices) => ({
   grpcEndpoint: state.network.grpcEndpoint,
@@ -17,14 +17,18 @@ const useSaveGrpcEndpointSelector = (state: AllSlices) => ({
   setChainId: state.network.setChainId,
 });
 
-const getRpcsFromRegistry = () => {
-  const registryClient = new ChainRegistryClient();
-  const { rpcs } = registryClient.globals();
-  return rpcs.toSorted(randomSort);
+const useRpcs = () => {
+  const { data, isLoading, error } = useRegistry();
+
+  const rpcs = useMemo(() => {
+    return data?.rpcs.toSorted(randomSort) ?? [];
+  }, [data]);
+
+  return { rpcs, isLoading, error };
 };
 
 export const useGrpcEndpointForm = (isOnboarding: boolean) => {
-  const grpcEndpoints = useMemo(() => getRpcsFromRegistry(), []);
+  const grpcEndpointsQuery = useRpcs();
 
   // Get the rpc set in storage (if present)
   const { grpcEndpoint, chainId, setGrpcEndpoint, setChainId } = useStoreShallow(
@@ -41,7 +45,8 @@ export const useGrpcEndpointForm = (isOnboarding: boolean) => {
   >();
 
   const isCustomGrpcEndpoint =
-    grpcEndpointInput !== '' && !grpcEndpoints.some(({ url }) => url === grpcEndpointInput);
+    grpcEndpointInput !== '' &&
+    !grpcEndpointsQuery.rpcs.some(({ url }) => url === grpcEndpointInput);
 
   const setGrpcEndpointInputOnLoadFromState = useCallback(() => {
     if (grpcEndpoint) {
@@ -155,7 +160,7 @@ export const useGrpcEndpointForm = (isOnboarding: boolean) => {
      */
     grpcEndpointInput,
     setGrpcEndpointInput,
-    grpcEndpoints,
+    grpcEndpointsQuery,
     rpcError,
     onSubmit,
     isSubmitButtonEnabled,

apps/extension/src/shared/components/loading-list.tsx

@@ -0,0 +1,39 @@
+import { AnimatePresence, motion } from 'framer-motion';
+import { LineWave } from 'react-loader-spinner';
+
+export const LoadingList = ({ isLoading }: { isLoading: boolean }) => {
+  return (
+    <div className='flex justify-between'>
+      {/* Wrapped in div to ensure sibling anchor stays flush right */}
+      <div>
+        <AnimatePresence>
+          {isLoading && (
+            <motion.div
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1, transition: { duration: 1, ease: 'easeOut' } }}
+              exit={{ opacity: 0 }}
+              className='flex gap-1'
+            >
+              <span className='text-xs text-muted-foreground'>Loading list</span>
+              <LineWave
+                visible={true}
+                height='30'
+                width='30'
+                color='#a8a29e'
+                wrapperClass='mt-[-11px]'
+              />
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </div>
+      <a
+        href='https://github.com/prax-wallet/registry/tree/main/registry'
+        target='_blank'
+        rel='noreferrer'
+        className='text-xs text-muted-foreground'
+      >
+        Add to this list
+      </a>
+    </div>
+  );
+};

apps/extension/src/shared/components/numeraires-form.tsx

@@ -1,12 +1,12 @@
 import { AllSlices, useStore } from '../../state';
 import { useChainIdQuery } from '../../hooks/chain-id';
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { ServicesMessage } from '../../message/services';
 import { SelectList } from '@repo/ui/components/ui/select';
 import { bech32mAssetId } from '@penumbra-zone/bech32m/passet';
 import { getAssetId } from '@penumbra-zone/getters/metadata';
 import { Button } from '@repo/ui/components/ui/button';
-import { getNumeraireFromRegistry } from '../../utils/get-numeraires-from-registry';
+import { useNumeraires } from '../../hooks/numeraires-query';
 
 const useNumerairesSelector = (state: AllSlices) => {
   return {
@@ -30,7 +30,7 @@ export const NumeraireForm = ({
 
   // 'chainId' from 'useChainIdQuery' is not available during onboarding,
   // this forces you to use two sources to guarantee 'chainId' for both settings and onboarding
-  const numeraires = useMemo(() => getNumeraireFromRegistry(chainId ?? networkChainId), [chainId]);
+  const { numeraires } = useNumeraires(chainId ?? networkChainId);
 
   useEffect(() => {
     if (numeraires.length === 0) {

apps/extension/src/shared/components/registry.tsx

@@ -0,0 +1,10 @@
+import { useQuery } from '@tanstack/react-query';
+import { ChainRegistryClient } from '@penumbra-labs/registry';
+
+export const useRegistry = () => {
+  return useQuery({
+    queryKey: ['registryGlobals'],
+    queryFn: () => new ChainRegistryClient().remote.globals(),
+    staleTime: Infinity,
+  });
+};