feat(app): enabling verax on linea goerli (#1674)

passportxyz · Sep 11, 2023 · 2be0b05 · 2be0b05
1 parent 7e69aa0
commit 2be0b05
Show file tree

Hide file tree

Showing 18 changed files with 783 additions and 339 deletions.
diff --git a/app/.env-example.env b/app/.env-example.env
@@ -59,6 +59,8 @@ NEXT_PUBLIC_ALLO_SCORER_API_KEY=SCORER_API_KEY
 NEXT_PUBLIC_SCORER_ENDPOINT=http://localhost:8002
 
 NEXT_PUBLIC_FF_CHAIN_SYNC=on
+NEXT_PUBLIC_FF_LINEA_ATTESTATIONS=on
+NEXT_PUBLIC_LINEA_VERIFIER_ADDRESS_OVERRIDE=
 
 NEXT_PUBLIC_ENABLE_TESTNET=on
 
@@ -73,6 +75,3 @@ 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_POSSIBLE_ON_CHAIN_PASSPORT_CHAINIDS=["0x1a8", "0x14a33"]
diff --git a/app/__test-fixtures__/onboardHookValues.ts b/app/__test-fixtures__/onboardHookValues.ts
@@ -1,6 +1,6 @@
 import { Account, ConnectedChain, WalletState } from "@web3-onboard/core/dist/types";
-import { sepoliaChainId } from "../utils/onboard";
 
+const sepoliaChainId = "0xaa36a7";
 export const mockAddress = "0xmyAddress";
 export const mockAccount: Account = {
   address: mockAddress,

diff --git a/app/__tests__/components/SyncToChainButton.test.tsx b/app/__tests__/components/SyncToChainButton.test.tsx
@@ -9,6 +9,7 @@ import {
   renderWithContext,
 } from "../../__test-fixtures__/contextTestHelpers";
 import { CeramicContextState } from "../../context/ceramicContext";
+import { Chain } from "../../utils/chains";
 
 jest.mock("../../utils/onboard.ts");
 const mockSetChain = jest.fn();
@@ -24,7 +25,11 @@ jest.mock("@web3-onboard/react", () => ({
 jest.mock("axios");
 // Create a jest mock function for recipientNonces and verifyAndAttest
 const mockRecipientNonces = jest.fn();
-const mockVerifyAndAttest = jest.fn();
+const mockVerifyAndAttest = jest.fn().mockImplementation(() => {
+  return {
+    wait: () => Promise.resolve(undefined),
+  };
+});
 
 // Mock the getSigner method of ethers.BrowserProvider
 const mockGetSigner = jest.fn().mockImplementation(() => {
@@ -59,38 +64,60 @@ describe("getButtonMsg function", () => {
   });
 });
 
-const chain = {
+const chainConfig = {
   id: "test",
   token: "test",
   label: "test",
   rpcUrl: "test",
   icon: "icon",
 };
 
+const chainWithoutEas = new Chain(chainConfig);
+
+const chainWithEas = new Chain({
+  ...chainConfig,
+  id: "0x14a33",
+  attestationProviderConfig: {
+    status: "enabled",
+    name: "Ethereum Attestation Service",
+    easScanUrl: "test.com",
+  },
+});
+
 const mockUserContext: UserContextState = makeTestUserContext();
 const mockCeramicContext: CeramicContextState = makeTestCeramicContext();
 
 describe("SyncToChainButton component", () => {
   it("should show coming soon if in active", async () => {
-    render(<SyncToChainButton onChainStatus={OnChainStatus.NOT_MOVED} isActive={false} chain={chain} />);
+    render(<SyncToChainButton onChainStatus={OnChainStatus.NOT_MOVED} chain={chainWithoutEas} />);
 
     expect(screen.getByText("Coming Soon")).toBeInTheDocument();
   });
   it("should be disabled if not active", async () => {
-    render(<SyncToChainButton onChainStatus={OnChainStatus.NOT_MOVED} isActive={false} chain={chain} />);
+    render(<SyncToChainButton onChainStatus={OnChainStatus.NOT_MOVED} chain={chainWithoutEas} />);
     const btn = screen.getByTestId("sync-to-chain-button");
     expect(btn).toHaveAttribute("disabled");
   });
   it("should be disabled if up to date", async () => {
-    render(<SyncToChainButton onChainStatus={OnChainStatus.MOVED_UP_TO_DATE} isActive={true} chain={chain} />);
+    render(<SyncToChainButton onChainStatus={OnChainStatus.MOVED_UP_TO_DATE} chain={chainWithEas} />);
     const btn = screen.getByTestId("sync-to-chain-button");
     expect(btn).toHaveAttribute("disabled");
   });
   it("should initiate chain change if on different chain", async () => {
+    const anotherChainWithEas = new Chain({
+      ...chainConfig,
+      id: "0x123",
+      attestationProviderConfig: {
+        status: "enabled",
+        name: "Ethereum Attestation Service",
+        easScanUrl: "test.com",
+      },
+    });
+
     renderWithContext(
       mockUserContext,
       mockCeramicContext,
-      <SyncToChainButton onChainStatus={OnChainStatus.NOT_MOVED} isActive={true} chain={chain} />
+      <SyncToChainButton onChainStatus={OnChainStatus.NOT_MOVED} chain={anotherChainWithEas} />
     );
     const btn = screen.getByTestId("sync-to-chain-button");
     expect(btn).toHaveTextContent("Go");
@@ -101,7 +128,7 @@ describe("SyncToChainButton component", () => {
     renderWithContext(
       mockUserContext,
       { ...mockCeramicContext },
-      <SyncToChainButton onChainStatus={OnChainStatus.NOT_MOVED} isActive={true} chain={{ ...chain, id: "0x14a33" }} />
+      <SyncToChainButton onChainStatus={OnChainStatus.NOT_MOVED} chain={chainWithEas} />
     );
     const btn = screen.getByTestId("sync-to-chain-button");
     fireEvent.click(btn);
@@ -118,7 +145,7 @@ describe("SyncToChainButton component", () => {
         ...mockCeramicContext,
         passport: { ...mockCeramicContext.passport, stamps: [{ id: "test" } as any] },
       },
-      <SyncToChainButton onChainStatus={OnChainStatus.NOT_MOVED} isActive={true} chain={{ ...chain, id: "0x14a33" }} />
+      <SyncToChainButton onChainStatus={OnChainStatus.NOT_MOVED} chain={chainWithEas} />
     );
     const btn = screen.getByTestId("sync-to-chain-button");
     fireEvent.click(btn);

diff --git a/app/components/NetworkCard.tsx b/app/components/NetworkCard.tsx
@@ -4,7 +4,7 @@ import { CeramicContext, AllProvidersState, ProviderState } from "../context/cer
 import { OnChainContext, OnChainProviderType } from "../context/onChainContext";
 import { ScorerContext, ScoreStateType } from "../context/scorerContext";
 import { SyncToChainButton } from "./SyncToChainButton";
-import { Chain } from "../utils/onboard";
+import { Chain } from "../utils/chains";
 
 export enum OnChainStatus {
   NOT_MOVED,
@@ -51,17 +51,12 @@ export const checkOnChainStatus = (
     : OnChainStatus.MOVED_OUT_OF_DATE;
 };
 
-export function NetworkCard({ chain, activeChains }: { chain: Chain; activeChains: string[] }) {
+export function NetworkCard({ chain }: { chain: Chain }) {
   const { allProvidersState } = useContext(CeramicContext);
   const { onChainProviders, onChainScores, onChainLastUpdates } = useContext(OnChainContext);
   const { rawScore, scoreState } = useContext(ScorerContext);
-  const [isActive, setIsActive] = useState(false);
   const [onChainStatus, setOnChainStatus] = useState<OnChainStatus>(OnChainStatus.NOT_MOVED);
 
-  useEffect(() => {
-    setIsActive(activeChains.includes(chain.id));
-  }, [activeChains, chain.id]);
-
   useEffect(() => {
     const checkStatus = async () => {
       const savedNetworkProviders = onChainProviders[chain.id] || [];
@@ -81,20 +76,21 @@ export function NetworkCard({ chain, activeChains }: { chain: Chain; activeChain
     <div className="mb-6 border border-accent-2 bg-background-2 p-0">
       <div className="mx-4 my-2">
         <div className="flex w-full">
-          <div className="mr-4">
+          <div className="mr-4 mt-1">
             <img className="max-h-6" src={chain.icon} alt={`${chain.label} logo`} />
           </div>
           <div>
             <div className="flex w-full flex-col">
               <h1 className="text-lg text-color-1">{chain.label}</h1>
+              <h2 className="text-sm text-color-4">{chain.attestationProvider?.name}</h2>
               <p className="mt-2 text-color-4 md:inline-block">
                 {onChainLastUpdates[chain.id] ? onChainLastUpdates[chain.id].toLocaleString() : "Not moved yet"}
               </p>
             </div>
           </div>
         </div>
       </div>
-      <SyncToChainButton onChainStatus={onChainStatus} isActive={isActive} chain={chain} />
+      <SyncToChainButton onChainStatus={onChainStatus} chain={chain} />
     </div>
   );
 }
diff --git a/app/components/OnchainSidebar.tsx b/app/components/OnchainSidebar.tsx
@@ -1,29 +1,17 @@
 import { Drawer, DrawerContent, DrawerHeader, DrawerBody, DrawerOverlay, DrawerCloseButton } from "@chakra-ui/react";
-import { useEffect, useState } from "react";
-import { chains } from "../utils/onboard";
+import { chains } from "../utils/chains";
 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));
+const chainsWithAttestations = chains.filter(
+  ({ attestationProvider }) => attestationProvider?.status === "comingSoon" || attestationProvider?.status === "enabled"
+);
 
 export function OnchainSidebar({ isOpen, onClose }: OnchainSidebarProps) {
-  const activeOnChainPassportChains = process.env.NEXT_PUBLIC_ACTIVE_ON_CHAIN_PASSPORT_CHAINIDS;
-  const [activeChains, setActiveChains] = useState<string[]>([]);
-
-  useEffect(() => {
-    if (activeOnChainPassportChains) {
-      const chainsArray = JSON.parse(activeOnChainPassportChains);
-      setActiveChains(chainsArray);
-    }
-  }, [activeOnChainPassportChains]);
-
   return (
     <Drawer isOpen={isOpen} placement="right" size="sm" onClose={onClose}>
       <DrawerOverlay />
@@ -47,8 +35,8 @@ export function OnchainSidebar({ isOpen, onClose }: OnchainSidebarProps) {
           </div>
         </DrawerHeader>
         <DrawerBody>
-          {deployedChains.map((chain) => (
-            <NetworkCard key={chain.id} chain={chain} activeChains={activeChains} />
+          {chainsWithAttestations.map((chain) => (
+            <NetworkCard key={chain.id} chain={chain} />
           ))}
         </DrawerBody>
       </DrawerContent>