diff --git a/apps/extension/package.json b/apps/extension/package.json
index 4c4c4c20ad..e5b22b97da 100644
--- a/apps/extension/package.json
+++ b/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",
diff --git a/apps/extension/src/routes/page/onboarding/set-rpc-endpoint.tsx b/apps/extension/src/routes/page/onboarding/set-rpc-endpoint.tsx
index 5c628a7f67..ddc9707e7b 100644
--- a/apps/extension/src/routes/page/onboarding/set-rpc-endpoint.tsx
+++ b/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 && }
/>
))}
@@ -75,6 +77,7 @@ export const SetRpcEndpoint = () => {
}}
isSelected={isCustomRpcEndpoint}
value={''}
+ image={}
/>
diff --git a/apps/extension/src/shared/rpc-endpoints.ts b/apps/extension/src/shared/rpc-endpoints.ts
index aed7e50e6d..e4a2bd7742 100644
--- a/apps/extension/src/shared/rpc-endpoints.ts
+++ b/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,
},
];
diff --git a/packages/ui/components/ui/select-list.tsx b/packages/ui/components/ui/select-list.tsx
index dfeb60a454..94a26bb3e3 100644
--- a/packages/ui/components/ui/select-list.tsx
+++ b/packages/ui/components/ui/select-list.tsx
@@ -17,24 +17,30 @@ const Option = ({
value,
onSelect,
isSelected,
+ image,
}: {
label: string;
secondaryText?: ReactNode;
value: T;
onSelect: (value: T) => void;
isSelected: boolean;
+ image?: ReactNode;
}) => (
onSelect(value)}
>
-
{label}
+
{image}
- {!!secondaryText &&
{secondaryText}}
+
+
{label}
+
+ {!!secondaryText &&
{secondaryText}}
+
);
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 9d445e1e32..c07ae3ad8e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -201,6 +201,9 @@ importers:
immer:
specifier: ^10.0.4
version: 10.0.4
+ lucide-react:
+ specifier: ^0.363.0
+ version: 0.363.0(react@18.2.0)
node-fetch:
specifier: ^3.3.2
version: 3.3.2