Show RPC node images

apps/extension/package.json

@@ -32,6 +32,7 @@
     "exponential-backoff": "^3.1.1",
     "framer-motion": "^11.0.22",
     "immer": "^10.0.4",
+    "lucide-react": "^0.363.0",
     "node-fetch": "^3.3.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

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

@@ -9,6 +9,7 @@ import { useStoreShallow } from '../../../utils/use-store-shallow';
 import { usePageNav } from '../../../utils/navigate';
 import { PagePath } from '../paths';
 import { ServicesMessage } from '@penumbra-zone/types/src/services';
+import { Network } from 'lucide-react';
 
 const randomSort = () => (Math.random() >= 0.5 ? 1 : -1);
 
@@ -55,6 +56,7 @@ export const SetRpcEndpoint = () => {
                 onSelect={value => void setGRPCEndpoint(value)}
                 value={rpcEndpoint.url}
                 isSelected={rpcEndpoint.url === grpcEndpoint}
+                image={!!rpcEndpoint.imageUrl && <img src={rpcEndpoint.imageUrl} />}
               />
             ))}
 
@@ -75,6 +77,7 @@ export const SetRpcEndpoint = () => {
               }}
               isSelected={isCustomRpcEndpoint}
               value={''}
+              image={<Network />}
             />
           </SelectList>
 

apps/extension/src/shared/rpc-endpoints.ts

@@ -1,3 +1,5 @@
+import { STAKING_TOKEN_METADATA } from '@penumbra-zone/constants/src/assets';
+
 interface RpcEndpoint {
   name: string;
   url: string;
@@ -8,9 +10,11 @@ export const RPC_ENDPOINTS: RpcEndpoint[] = [
   {
     name: 'Penumbra Labs Testnet RPC',
     url: 'https://grpc.testnet.penumbra.zone',
+    imageUrl: STAKING_TOKEN_METADATA.images[0]?.svg,
   },
   {
     name: 'Penumbra Labs Testnet Preview RPC',
     url: 'https://grpc.testnet-preview.penumbra.zone',
+    imageUrl: STAKING_TOKEN_METADATA.images[0]?.svg,
   },
 ];

packages/ui/components/ui/select-list.tsx

@@ -17,24 +17,30 @@ const Option = <T,>({
   value,
   onSelect,
   isSelected,
+  image,
 }: {
   label: string;
   secondaryText?: ReactNode;
   value: T;
   onSelect: (value: T) => void;
   isSelected: boolean;
+  image?: ReactNode;
 }) => (
   <div
     className={cn(
-      'bg-charcoal border-[1px] border-solid border-border rounded-[6px] p-4 flex cursor-pointer flex-col gap-1 transition-colors',
+      'flex items-center cursor-pointer gap-2 rounded-[6px] border-[1px] border-DEFAULT border-solid border-border bg-charcoal p-4 transition-colors',
       isSelected && 'border-teal',
     )}
     role='button'
     onClick={() => onSelect(value)}
   >
-    <span>{label}</span>
+    <div className='flex size-10 shrink-0 items-center justify-center'>{image}</div>
 
-    {!!secondaryText && <span className='text-xs text-muted-foreground'>{secondaryText}</span>}
+    <div className='flex grow flex-col gap-1'>
+      <div>{label}</div>
+
+      {!!secondaryText && <span className='text-xs text-muted-foreground'>{secondaryText}</span>}
+    </div>
   </div>
 );