onboarding and registry (#66)

* wip * bump deps * bump @penumbra-zone/services * remove fixEmptyGrpcEndpointAfterOnboarding * should re-trigger onboarding at the stage they left off * exclude disabled property * remove unnecessary try/catch * bump registry * bump packages
prax-wallet · Jul 1, 2024 · 141639e · 141639e
1 parent cd69746
commit 141639e
Show file tree

Hide file tree

Showing 15 changed files with 160 additions and 136 deletions.
diff --git a/apps/extension/package.json b/apps/extension/package.json
@@ -19,17 +19,17 @@
     "@bufbuild/protobuf": "^1.10.0",
     "@connectrpc/connect": "^1.4.0",
     "@connectrpc/connect-web": "^1.4.0",
-    "@penumbra-labs/registry": "9.1.0",
+    "@penumbra-labs/registry": "9.2.0",
     "@penumbra-zone/bech32m": "^6.1.0",
     "@penumbra-zone/client": "^10.0.0",
     "@penumbra-zone/crypto-web": "^8.0.0",
     "@penumbra-zone/getters": "^10.0.0",
     "@penumbra-zone/keys": "^4.2.0",
     "@penumbra-zone/perspective": "^9.0.0",
     "@penumbra-zone/protobuf": "^5.3.0",
-    "@penumbra-zone/query": "^9.0.0",
-    "@penumbra-zone/services": "^10.0.0",
-    "@penumbra-zone/storage": "^9.0.0",
+    "@penumbra-zone/query": "^10.0.0",
+    "@penumbra-zone/services": "^11.0.0",
+    "@penumbra-zone/storage": "^9.1.0",
     "@penumbra-zone/transport-chrome": "^5.0.0",
     "@penumbra-zone/transport-dom": "^7.2.0",
     "@penumbra-zone/types": "^12.0.0",

diff --git a/apps/extension/src/routes/page/index.tsx b/apps/extension/src/routes/page/index.tsx
@@ -11,8 +11,12 @@ import { getDefaultFrontend } from '../../state/default-frontend';
 // Will redirect to onboarding if necessary.
 export const pageIndexLoader = async () => {
   const wallets = await localExtStorage.get('wallets');
+  const grpcEndpoint = await localExtStorage.get('grpcEndpoint');
+  const frontendUrl = await localExtStorage.get('frontendUrl');
 
   if (!wallets.length) return redirect(PagePath.WELCOME);
+  if (!grpcEndpoint) return redirect(PagePath.SET_GRPC_ENDPOINT);
+  if (!frontendUrl) return redirect(PagePath.SET_DEFAULT_FRONTEND);
 
   return null;
 };

diff --git a/apps/extension/src/routes/popup/home/index.tsx b/apps/extension/src/routes/popup/home/index.tsx
@@ -4,7 +4,7 @@ import { useStore } from '../../../state';
 import { BlockSync } from './block-sync';
 import { localExtStorage } from '../../../storage/local';
 import { getActiveWallet } from '../../../state/wallets';
-import { needsLogin } from '../popup-needs';
+import { needsLogin, needsOnboard } from '../popup-needs';
 import {
   Address,
   FullViewingKey,
@@ -22,6 +22,7 @@ export interface PopupLoaderData {
 // We need to manually check storage for accounts & password in the loader.
 // Will redirect to onboarding or password check if necessary.
 export const popupIndexLoader = async (): Promise<Response | PopupLoaderData> => {
+  await needsOnboard();
   const redirect = await needsLogin();
   if (redirect) return redirect;
 

diff --git a/apps/extension/src/routes/popup/popup-needs.ts b/apps/extension/src/routes/popup/popup-needs.ts
@@ -12,7 +12,10 @@ export const needsLogin = async (): Promise<Response | null> => {
 
 export const needsOnboard = async () => {
   const wallets = await localExtStorage.get('wallets');
-  if (wallets.length) return null;
+  const grpcEndpoint = await localExtStorage.get('grpcEndpoint');
+  const frontendUrl = await localExtStorage.get('frontendUrl');
+
+  if (wallets.length && grpcEndpoint !== undefined && frontendUrl !== undefined) return null;
 
   void chrome.runtime.openOptionsPage();
   window.close();

diff --git a/apps/extension/src/routes/popup/settings/settings.tsx b/apps/extension/src/routes/popup/settings/settings.tsx
@@ -13,6 +13,8 @@ import { passwordSelector } from '../../../state/password';
 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';
 
 const links = [
   {
@@ -51,6 +53,9 @@ export const Settings = () => {
   const navigate = usePopupNav();
   const { clearSessionPassword } = useStore(passwordSelector);
 
+  const { chainId } = useChainIdQuery();
+  const numeraires = getNumeraireFromRegistry(chainId);
+
   return (
     <SettingsScreen title='Settings'>
       <div className='flex grow flex-col justify-between'>
@@ -61,6 +66,7 @@ export const Settings = () => {
               title={i.title}
               icon={i.icon}
               onClick={() => navigate(i.href)}
+              disabled={i.href === PopupPath.SETTINGS_NUMERAIRES && numeraires.length === 0}
             />
           ))}
         </div>

diff --git a/apps/extension/src/shared/components/default-frontend-form/index.tsx b/apps/extension/src/shared/components/default-frontend-form/index.tsx
@@ -16,7 +16,6 @@ interface DisplayedFrontend {
 const getFrontendsFromRegistry = (selectedRpc?: string): DisplayedFrontend[] => {
   const registryClient = new ChainRegistryClient();
   const { frontends } = registryClient.globals();
-
   const registeredFrontends = frontends.map(frontend => ({
     title: extractDomain(frontend),
     url: frontend,

diff --git a/apps/extension/src/shared/components/link.tsx b/apps/extension/src/shared/components/link.tsx
@@ -5,12 +5,14 @@ interface LinkProps {
   icon: ReactElement;
   title: string;
   onClick: () => void;
+  disabled?: boolean;
 }
 
-export const CustomLink = ({ icon, title, onClick }: LinkProps) => {
+export const CustomLink = ({ icon, title, onClick, disabled }: LinkProps) => {
   return (
     <Button
       variant='ghost'
+      disabled={disabled}
       className='flex w-full items-center justify-start gap-2 p-[10px] text-left hover:bg-transparent hover:opacity-50'
       onClick={onClick}
     >

diff --git a/apps/extension/src/shared/components/numeraires-form.tsx b/apps/extension/src/shared/components/numeraires-form.tsx
@@ -1,20 +1,12 @@
-import { ChainRegistryClient } from '@penumbra-labs/registry';
 import { AllSlices, useStore } from '../../state';
 import { useChainIdQuery } from '../../hooks/chain-id';
-import { useMemo, useState } from 'react';
+import { useEffect, useMemo, 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 { Metadata } from '@buf/penumbra-zone_penumbra.bufbuild_es/penumbra/core/asset/v1/asset_pb';
-
-const getNumeraireFromRegistry = (chainId?: string): Metadata[] => {
-  if (!chainId) return [];
-  const registryClient = new ChainRegistryClient();
-  const registry = registryClient.get(chainId);
-  return registry.numeraires.map(n => registry.getMetadata(n));
-};
+import { getNumeraireFromRegistry } from '../../utils/get-numeraires-from-registry';
 
 const useNumerairesSelector = (state: AllSlices) => {
   return {
@@ -40,6 +32,12 @@ export const NumeraireForm = ({
   // this forces you to use two sources to guarantee 'chainId' for both settings and onboarding
   const numeraires = useMemo(() => getNumeraireFromRegistry(chainId ?? networkChainId), [chainId]);
 
+  useEffect(() => {
+    if (numeraires.length === 0) {
+      void onSuccess();
+    }
+  }, [numeraires]);
+
   const [loading, setLoading] = useState(false);
 
   const handleSubmit = () => {

diff --git a/apps/extension/src/storage/onboard.ts b/apps/extension/src/storage/onboard.ts
@@ -9,8 +9,6 @@ import { LocalStorageState } from './types';
  * requests against it.
  */
 export const onboardGrpcEndpoint = async (): Promise<string> => {
-  await fixEmptyGrpcEndpointAfterOnboarding();
-
   const grpcEndpoint = await localExtStorage.get('grpcEndpoint');
   if (grpcEndpoint) return grpcEndpoint;
 
@@ -47,14 +45,3 @@ export const onboardWallet = async (): Promise<WalletJson> => {
     localExtStorage.addListener(storageListener);
   });
 };
-
-/**
- This fixes an issue where some users do not have 'grpcEndpoint' set after they have finished onboarding
- */
-export const fixEmptyGrpcEndpointAfterOnboarding = async () => {
-  //TODO change to mainnet default RPC
-  const DEFAULT_GRPC_URL = 'https://grpc.testnet.penumbra.zone';
-  const grpcEndpoint = await localExtStorage.get('grpcEndpoint');
-  const wallets = await localExtStorage.get('wallets');
-  if (!grpcEndpoint && wallets[0]) await localExtStorage.set('grpcEndpoint', DEFAULT_GRPC_URL);
-};
diff --git a/apps/extension/src/utils/get-numeraires-from-registry.ts b/apps/extension/src/utils/get-numeraires-from-registry.ts
@@ -0,0 +1,14 @@
+import { Metadata } from '@buf/penumbra-zone_penumbra.bufbuild_es/penumbra/core/asset/v1/asset_pb';
+import { ChainRegistryClient } from '@penumbra-labs/registry';
+
+export const getNumeraireFromRegistry = (chainId?: string): Metadata[] => {
+  if (!chainId) return [];
+  try {
+    const registryClient = new ChainRegistryClient();
+    const registry = registryClient.get(chainId);
+    return registry.numeraires.map(n => registry.getMetadata(n));
+  } catch (error) {
+    console.error('Registry numeraires is not available', error);
+    return [];
+  }
+};
diff --git a/packages/context/package.json b/packages/context/package.json
@@ -22,10 +22,10 @@
     "@buf/cosmos_ibc.bufbuild_es": "1.10.0-20240625204953-f66a294d94c4.1",
     "@buf/penumbra-zone_penumbra.bufbuild_es": "1.10.0-20240625233123-429cb316aa7c.1",
     "@bufbuild/protobuf": "^1.10.0",
-    "@penumbra-labs/registry": "9.1.0",
+    "@penumbra-labs/registry": "9.2.0",
     "@penumbra-zone/crypto-web": "^8.0.0",
-    "@penumbra-zone/query": "^9.0.0",
-    "@penumbra-zone/storage": "^9.0.0",
+    "@penumbra-zone/query": "^10.0.0",
+    "@penumbra-zone/storage": "^9.1.0",
     "@penumbra-zone/types": "^12.0.0",
     "@penumbra-zone/wasm": "^12.0.0",
     "exponential-backoff": "^3.1.1"

diff --git a/packages/context/src/index.ts b/packages/context/src/index.ts
@@ -103,13 +103,12 @@ export class Services implements ServicesInterface {
       idbConstants: indexedDb.constants(),
     });
 
-    const registry = registryClient.get(chainId);
     const { stakingAssetId } = registryClient.globals();
     const blockProcessor = new BlockProcessor({
       viewServer,
       querier,
       indexedDb,
-      stakingTokenMetadata: registry.getMetadata(stakingAssetId),
+      stakingAssetId: stakingAssetId,
       numeraires: numeraires,
     });
 

diff --git a/packages/ui/components/ui/tx/index.tsx b/packages/ui/components/ui/tx/index.tsx
@@ -14,12 +14,22 @@ export const TransactionViewComponent = ({ txv }: { txv: TransactionView }) => {
   const chainId = txv.bodyView.transactionParameters.chainId;
   const assetId = txv.bodyView.transactionParameters.fee.assetId;
   const feeAssetMetadata = getFeeAssetMetadataOrDefault(chainId, assetId);
-  const feeValueView = new ValueView({
-    valueView: {
-      case: 'knownAssetId',
-      value: { amount: txv.bodyView.transactionParameters.fee.amount, metadata: feeAssetMetadata },
-    },
-  });
+  const feeValueView = feeAssetMetadata
+    ? new ValueView({
+        valueView: {
+          case: 'knownAssetId',
+          value: {
+            amount: txv.bodyView.transactionParameters.fee.amount,
+            metadata: feeAssetMetadata,
+          },
+        },
+      })
+    : new ValueView({
+        valueView: {
+          case: 'unknownAssetId',
+          value: { amount: txv.bodyView.transactionParameters.fee.amount },
+        },
+      });
 
   return (
     <div className='flex flex-col gap-8'>

diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -29,7 +29,7 @@
   "dependencies": {
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
-    "@penumbra-labs/registry": "9.1.0",
+    "@penumbra-labs/registry": "9.2.0",
     "@penumbra-zone/bech32m": "^6.1.0",
     "@penumbra-zone/getters": "^10.0.0",
     "@penumbra-zone/perspective": "^9.0.0",