feat(app): add deployed chains (passportxyz#1530)

* feat(app): add deployed chains

* refactor(app): use array for chainid env variables

* refactor(app): remove conditional chain add

app/.env-example.env

@@ -76,4 +76,5 @@ NEXT_PUBLIC_MAINTENANCE_MODE_ON=["2023-06-07T21:00:00.000Z", "2023-06-08T22:15:0
 NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID=YOUR_WALLET_CONNECT_PROJECT_ID
 NEXT_PUBLIC_WEB3_ONBOARD_EXPLORE_URL=http://localhost:3000/
 
-NEXT_PUBLIC_ACTIVE_ON_CHAIN_PASSPORT_CHAINIDS=["0x14a33"]
+NEXT_PUBLIC_ACTIVE_ON_CHAIN_PASSPORT_CHAINIDS=["0x14a33"]
+NEXT_PUBLIC_POSSIBLE_ON_CHAIN_PASSPORT_CHAINIDS=["0x1a8", "0x14a33"]

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 onChainPassportChainIds = JSON.parse(process.env.NEXT_PUBLIC_POSSIBLE_ON_CHAIN_PASSPORT_CHAINIDS || "[]");
+
+const deployedChains = chains.filter((chain) => onChainPassportChainIds.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 = [
   {
@@ -77,6 +81,27 @@ if (process.env.NEXT_PUBLIC_FF_MULTICHAIN_SIGNATURE === "on") {
     icon: "./assets/eth-network-logo.svg",
   });
 }
+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({