Set gRPC endpoint during onboarding, part 2

apps/extension/package.json

@@ -32,6 +32,7 @@
     "exponential-backoff": "^3.1.1",
     "framer-motion": "^11.0.22",
     "immer": "^10.0.4",
+    "lodash": "^4.17.21",
     "lucide-react": "^0.363.0",
     "node-fetch": "^3.3.2",
     "react": "^18.2.0",
@@ -45,6 +46,7 @@
     "@penumbra-zone/polyfills": "workspace:*",
     "@radix-ui/react-icons": "^1.3.0",
     "@types/firefox-webext-browser": "^120.0.3",
+    "@types/lodash": "^4.17.0",
     "@types/react": "^18.2.72",
     "@types/react-dom": "^18.2.22",
     "autoprefixer": "^10.4.19",

apps/extension/src/routes/page/onboarding/routes.tsx

@@ -6,7 +6,7 @@ import { ImportSeedPhrase } from './import';
 import { OnboardingSuccess } from './success';
 import { SetPassword } from './set-password';
 import { pageIndexLoader } from '..';
-import { SetRpcEndpoint } from './set-rpc-endpoint';
+import { SetGrpcEndpoint } from './set-grpc-endpoint';
 
 export const onboardingRoutes = [
   {
@@ -30,8 +30,8 @@ export const onboardingRoutes = [
     element: <SetPassword />,
   },
   {
-    path: PagePath.SET_RPC_ENDPOINT,
-    element: <SetRpcEndpoint />,
+    path: PagePath.SET_GRPC_ENDPOINT,
+    element: <SetGrpcEndpoint />,
   },
   {
     path: PagePath.ONBOARDING_SUCCESS,

apps/extension/src/routes/page/onboarding/set-grpc-endpoint.tsx

@@ -0,0 +1,34 @@
+import { Card, CardDescription, CardHeader, CardTitle } from '@penumbra-zone/ui/components/ui/card';
+import { FadeTransition } from '@penumbra-zone/ui/components/ui/fade-transition';
+import { usePageNav } from '../../../utils/navigate';
+import { PagePath } from '../paths';
+import { ServicesMessage } from '@penumbra-zone/types/src/services';
+import { GrpcEndpointForm } from '../../../shared/components/grpc-endpoint-form';
+
+export const SetGrpcEndpoint = () => {
+  const navigate = usePageNav();
+
+  const onSuccess = (): void => {
+    void chrome.runtime.sendMessage(ServicesMessage.OnboardComplete);
+    navigate(PagePath.ONBOARDING_SUCCESS);
+  };
+
+  return (
+    <FadeTransition>
+      <Card className='w-[400px]' gradient>
+        <CardHeader>
+          <CardTitle>Select your preferred RPC endpoint</CardTitle>
+          <CardDescription>
+            The requests you make may reveal your intentions about transactions you wish to make, so
+            select an RPC node that you trust. If you&apos;re unsure which one to choose, leave this
+            option set to the default.
+          </CardDescription>
+        </CardHeader>
+
+        <div className='mt-6'>
+          <GrpcEndpointForm submitButtonLabel='Next' onSuccess={onSuccess} />
+        </div>
+      </Card>
+    </FadeTransition>
+  );
+};

apps/extension/src/routes/page/onboarding/set-password.tsx

@@ -25,7 +25,7 @@ export const SetPassword = () => {
 
     void (async () => {
       await onboardingSave(password);
-      navigate(PagePath.SET_RPC_ENDPOINT);
+      navigate(PagePath.SET_GRPC_ENDPOINT);
     })();
   };
 

apps/extension/src/routes/page/paths.ts

@@ -6,7 +6,7 @@ export enum PagePath {
   IMPORT_SEED_PHRASE = '/welcome/import',
   ONBOARDING_SUCCESS = '/welcome/success',
   SET_PASSWORD = '/welcome/set-password',
-  SET_RPC_ENDPOINT = '/welcome/set-rpc-endpoint',
+  SET_GRPC_ENDPOINT = '/welcome/set-grpc-endpoint',
   RESTORE_PASSWORD = '/restore-password',
   RESTORE_PASSWORD_INDEX = '/restore-password/',
   RESTORE_PASSWORD_SET_PASSWORD = '/restore-password/set-password',

apps/extension/src/routes/popup/padding-wrapper.tsx

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+
+/**
+ * Wrap this around any top-level components that should have horizontal and
+ * bottom padding in the extension popup.
+ */
+export const PaddingWrapper = ({ children }: { children: ReactNode }) => {
+  return <div className='px-[30px] pb-[30px]'>{children}</div>;
+};

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

@@ -1,27 +1,15 @@
-import { QueryService } from '@buf/penumbra-zone_penumbra.connectrpc_es/penumbra/core/app/v1/app_connect';
-import { createGrpcWebTransport } from '@connectrpc/connect-web';
-import { createPromiseClient } from '@connectrpc/connect';
-import { FormEvent, useState } from 'react';
-import { Button } from '@penumbra-zone/ui/components/ui/button';
+import { useState } from 'react';
 import { FadeTransition } from '@penumbra-zone/ui/components/ui/fade-transition';
-import { Input } from '@penumbra-zone/ui/components/ui/input';
-import { useChainIdQuery } from '../../../hooks/chain-id';
 import { ShareGradientIcon } from '../../../icons/share-gradient';
 import { SettingsHeader } from '../../../shared/components/settings-header';
-import { useStore } from '../../../state';
-import { networkSelector } from '../../../state/network';
 import '@penumbra-zone/polyfills/src/Promise.withResolvers';
-import { TrashIcon } from '@radix-ui/react-icons';
-import { ServicesMessage } from '@penumbra-zone/types/src/services';
+import { GrpcEndpointForm } from '../../../shared/components/grpc-endpoint-form';
+import { PaddingWrapper } from '../padding-wrapper';
 
 export const SettingsRPC = () => {
-  const { chainId: currentChainId } = useChainIdQuery();
-  const [newChainId, setNewChainId] = useState<string>();
-  const { grpcEndpoint, setGRPCEndpoint } = useStore(networkSelector);
-
-  const [rpcInput, setRpcInput] = useState<string>(grpcEndpoint ?? '');
-  const [rpcError, setRpcError] = useState<string>();
   const [countdownTime, setCountdownTime] = useState<number>();
+  const submitButtonLabel =
+    Number(countdownTime) > 0 ? `Saved! Restarting in ${countdownTime}...` : 'Save';
 
   const countdown = (seconds: number) => {
     const { promise, resolve } = Promise.withResolvers();
@@ -33,32 +21,11 @@ export const SettingsRPC = () => {
     return promise;
   };
 
-  const onSubmit = (evt: FormEvent<HTMLFormElement>) => {
-    evt.preventDefault();
-    void (async () => {
-      try {
-        const trialClient = createPromiseClient(
-          QueryService,
-          createGrpcWebTransport({ baseUrl: rpcInput }),
-        );
-        const { appParameters } = await trialClient.appParameters({});
-        if (!appParameters?.chainId) throw new Error('Endpoint did not provide a valid chainId');
-
-        setRpcError(undefined);
-        setNewChainId(appParameters.chainId);
-        await setGRPCEndpoint(rpcInput);
-        // If the chain id has changed, our cache is invalid
-        if (appParameters.chainId !== currentChainId)
-          void chrome.runtime.sendMessage(ServicesMessage.ClearCache);
-        // Visually confirm success for a few seconds
-        await countdown(5);
-        // Reload the extension to ensure all scopes holding the old config are killed
-        chrome.runtime.reload();
-      } catch (e: unknown) {
-        console.warn('Could not use new RPC endpoint', e);
-        setRpcError(String(e) || 'Unknown RPC failure');
-      }
-    })();
+  const onSuccess = async () => {
+    // Visually confirm success for a few seconds, then reload the extension to
+    // ensure all scopes holding the old config are killed
+    await countdown(5);
+    chrome.runtime.reload();
   };
 
   return (
@@ -68,61 +35,10 @@ export const SettingsRPC = () => {
         <div className='mx-auto size-20'>
           <ShareGradientIcon />
         </div>
-        <form
-          className='flex flex-1 flex-col items-start justify-between px-[30px] pb-[30px]'
-          onSubmit={onSubmit}
-        >
-          <div className='flex w-full flex-col gap-4'>
-            <div className='flex flex-col items-center justify-center gap-2'>
-              <div className='flex items-center gap-2 self-start'>
-                <div className='text-base font-bold'>RPC URL</div>
-                {rpcError ? <div className='italic text-red-400'>{rpcError}</div> : null}
-              </div>
-              <div className='relative w-full'>
-                <div className='absolute inset-y-0 right-4 flex cursor-pointer items-center'>
-                  {rpcInput !== grpcEndpoint ? (
-                    <Button
-                      type='reset'
-                      variant='outline'
-                      onClick={() => setRpcInput(grpcEndpoint ?? DEFAULT_GRPC_URL)}
-                    >
-                      <TrashIcon />
-                    </Button>
-                  ) : null}
-                </div>
-                <Input
-                  variant={rpcError ? 'error' : rpcInput !== grpcEndpoint ? 'warn' : 'default'}
-                  value={rpcInput}
-                  onChange={evt => {
-                    setRpcError(undefined);
-                    setRpcInput(evt.target.value);
-                  }}
-                  className='text-muted-foreground'
-                />
-              </div>
-            </div>
-            <div className='flex flex-col gap-2'>
-              <p className='font-headline text-base font-semibold'>Chain id</p>
-              <div className='flex h-11 w-full items-center rounded-lg border bg-background px-3 py-2 text-muted-foreground'>
-                {newChainId ?? currentChainId}
-              </div>
-            </div>
-          </div>
-          {countdownTime !== undefined ? (
-            <Button disabled variant='outline' size='lg' className='w-full'>
-              Saved! Restarting in {countdownTime}...
-            </Button>
-          ) : (
-            <Button
-              variant={rpcInput !== grpcEndpoint ? 'gradient' : 'outline'}
-              size='lg'
-              className='w-full'
-              type='submit'
-            >
-              Save
-            </Button>
-          )}
-        </form>
+
+        <PaddingWrapper>
+          <GrpcEndpointForm submitButtonLabel={submitButtonLabel} onSuccess={onSuccess} />
+        </PaddingWrapper>
       </div>
     </FadeTransition>
   );

apps/extension/src/shared/components/grpc-endpoint-form/chain-id-or-error.tsx

@@ -0,0 +1,25 @@
+import { cn } from '@penumbra-zone/ui/lib/utils';
+
+export const ChainIdOrError = ({
+  error,
+  chainId,
+  chainIdChanged,
+}: {
+  error?: string;
+  chainId?: string;
+  chainIdChanged: boolean;
+}) => {
+  if (!error && !chainId) return null;
+
+  return (
+    <div
+      className={cn(
+        'flex justify-center font-mono text-xs text-muted-foreground',
+        !!error && 'text-red-400',
+        !error && chainIdChanged && 'text-rust',
+      )}
+    >
+      {error ? error : chainId ? `Chain ID: ${chainId}` : null}
+    </div>
+  );
+};