feat(app): add deployed chains

app/components/OnchainSidebar.tsx

@@ -2,12 +2,17 @@ import { Drawer, DrawerContent, DrawerHeader, DrawerBody, DrawerOverlay, DrawerC
 import { useEffect, useState } from "react";
 import { chains } from "../utils/onboard";
 import { NetworkCard } from "./NetworkCard";
+import { pgnChainId, lineaChainId, optimismChainId, goerliBaseChainId } from "../utils/onboard";
 
 type OnchainSidebarProps = {
   isOpen: boolean;
   onClose: () => void;
 };
 
+const deployedChains = chains.filter((chain) =>
+  [pgnChainId, lineaChainId, optimismChainId, goerliBaseChainId].includes(chain.id)
+);
+
 export function OnchainSidebar({ isOpen, onClose }: OnchainSidebarProps) {
   const activeOnChainPassportChains = process.env.NEXT_PUBLIC_ACTIVE_ON_CHAIN_PASSPORT_CHAINIDS;
   const [activeChains, setActiveChains] = useState<string[]>([]);
@@ -41,7 +46,7 @@ export function OnchainSidebar({ isOpen, onClose }: OnchainSidebarProps) {
           </div>
         </DrawerHeader>
         <DrawerBody>
-          {chains.map((chain) => (
+          {deployedChains.map((chain) => (
             <NetworkCard key={chain.id} chain={chain} activeChains={activeChains} />
           ))}
         </DrawerBody>

app/utils/onboard.ts

@@ -26,6 +26,10 @@ const ledger = ledgerModule();
 export const sepoliaChainId = "0xaa36a7";
 export const hardhatChainId = "0x7a69";
 export const baseGoerliChainId = "0x14a33";
+export const pgnChainId = "0x1a8";
+export const lineaChainId = "0xe708";
+export const optimismChainId = "0xa";
+export const goerliBaseChainId = "0x14a33";
 
 export const chains = [
   {
@@ -78,6 +82,30 @@ if (process.env.NEXT_PUBLIC_FF_MULTICHAIN_SIGNATURE === "on") {
   });
 }
 
+if (process.env.NEXT_PUBLIC_ON_CHAIN_PASSPORT_CHAINS === "on") {
+  chains.push({
+    id: optimismChainId,
+    token: "ETH",
+    label: "Optimism Mainnet",
+    rpcUrl: "https://mainnet.optimism.io/",
+    icon: "./assets/op-logo.svg",
+  });
+  chains.push({
+    id: lineaChainId,
+    token: "ETH",
+    label: "Linea",
+    rpcUrl: "https://rpc.linea.build",
+    icon: "./assets/linea-logo.png",
+  });
+  chains.push({
+    id: pgnChainId,
+    token: "ETH",
+    label: "PGN",
+    rpcUrl: "https://rpc.publicgoods.network	",
+    icon: "./assets/pgn-logo.png",
+  });
+}
+
 // Exports onboard-core instance (https://github.com/blocknative/web3-onboard)
 export const initWeb3Onboard = init({
   wallets: [injected, ledger, walletConnect],