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