feat(iam, app): implements poh stamp provider

.github/workflows/cd-iam-review.yml

@@ -21,8 +21,6 @@ jobs:
       - name: Lerna Bootstrap
         run: lerna bootstrap
       - name: Run Tests
-        env:
-          RPC_URL: ${{ secrets.GOERLI_RPC_URL }}
         run: |
           yarn test:iam
           yarn test:identity

.github/workflows/ci.yml

@@ -21,7 +21,5 @@ jobs:
         run: lerna bootstrap
       - name: Run Tests
         run: yarn test
-        env:
-          RPC_URL: ${{ secrets.GOERLI_RPC_URL }}
       - name: Run Linter
         run: yarn lint

.github/workflows/manual-iam-staging.yml

@@ -25,8 +25,6 @@ jobs:
       - name: Lerna Bootstrap
         run: lerna bootstrap
       - name: Run Tests
-        env:
-          RPC_URL: ${{ secrets.GOERLI_RPC_URL }}
         run: |
           yarn test:iam
           yarn test:identity

app/__test-fixtures__/databaseStorageFixtures.ts

@@ -39,6 +39,11 @@ export const ensStampFixture: Stamp = {
   credential,
 };
 
+export const pohStampFixture: Stamp = {
+  provider: "Poh",
+  credential,
+};
+
 export const twitterStampFixture: Stamp = {
   provider: "Twitter",
   credential,

app/__test-fixtures__/verifiableCredentialResults.ts

@@ -36,3 +36,16 @@ export const SUCCESFUL_ENS_RESULT: VerifiableCredentialRecord = {
   challenge: credential,
   credential: credential,
 };
+
+export const SUCCESFUL_POH_RESULT: VerifiableCredentialRecord = {
+  record: {
+    type: "Poh",
+    address: "0xcF323CE817E25b4F784bC1e14c9A99A525fDC50f",
+    version: "0.0.0",
+    poh: "Is registered",
+  },
+  signature:
+    "0xbdbac10fdb0921e73df7575e47cbda484be550c36570bc146bed90c5dcb7435e64178cb263864f48af1ad6eeee1ee94c9a0794a3812ae861f8898a973233abea1c",
+  challenge: credential,
+  credential: credential,
+};

app/__tests__/components/ProviderCards/PohCard.test.tsx

@@ -0,0 +1,199 @@
+import React from "react";
+import { render, screen, fireEvent, waitFor, waitForElementToBeRemoved } from "@testing-library/react";
+import { PohCard } from "../../../components/ProviderCards";
+
+import { UserContext, UserContextState } from "../../../context/userContext";
+import { mockAddress, mockWallet } from "../../../__test-fixtures__/onboardHookValues";
+import { STAMP_PROVIDERS } from "../../../config/providers";
+import { pohStampFixture } from "../../../__test-fixtures__/databaseStorageFixtures";
+import { SUCCESFUL_POH_RESULT } from "../../../__test-fixtures__/verifiableCredentialResults";
+import { fetchVerifiableCredential } from "@dpopp/identity/dist/commonjs";
+
+jest.mock("@dpopp/identity/dist/commonjs", () => ({
+  fetchVerifiableCredential: jest.fn(),
+}));
+jest.mock("../../../utils/onboard.ts");
+
+const mockHandleConnection = jest.fn();
+const mockCreatePassport = jest.fn();
+const handleAddStamp = jest.fn();
+const mockUserContext: UserContextState = {
+  loggedIn: true,
+  passport: undefined,
+  isLoadingPassport: false,
+  allProvidersState: {
+    Poh: {
+      providerSpec: STAMP_PROVIDERS.Poh,
+      stamp: undefined,
+    },
+  },
+  handleAddStamp: handleAddStamp,
+  handleCreatePassport: mockCreatePassport,
+  handleConnection: mockHandleConnection,
+  address: mockAddress,
+  wallet: mockWallet,
+  signer: undefined,
+  walletLabel: mockWallet.label,
+};
+
+describe("when user has not verfied with PohProvider", () => {
+  it("should display a verification button", () => {
+    render(
+      <UserContext.Provider value={mockUserContext}>
+        <PohCard />
+      </UserContext.Provider>
+    );
+
+    const verifyButton = screen.queryByRole("button", {
+      name: /Verify/,
+    });
+
+    expect(verifyButton).toBeInTheDocument();
+  });
+});
+
+describe("when user has verified with PohProvider", () => {
+  it("should display is verified", () => {
+    render(
+      <UserContext.Provider
+        value={{
+          ...mockUserContext,
+          allProvidersState: {
+            Poh: {
+              providerSpec: STAMP_PROVIDERS.Poh,
+              stamp: pohStampFixture,
+            },
+          },
+        }}
+      >
+        <PohCard />
+      </UserContext.Provider>
+    );
+
+    const verified = screen.queryByText(/Verified/);
+
+    expect(verified).toBeInTheDocument();
+  });
+});
+
+describe("when the verify button is clicked", () => {
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe("and when a successful POH result is returned", () => {
+    beforeEach(() => {
+      (fetchVerifiableCredential as jest.Mock).mockResolvedValue(SUCCESFUL_POH_RESULT);
+    });
+
+    it("the modal displays the verify button", async () => {
+      render(
+        <UserContext.Provider value={mockUserContext}>
+          <PohCard />
+        </UserContext.Provider>
+      );
+
+      const initialVerifyButton = screen.queryByRole("button", {
+        name: /Verify/,
+      });
+
+      fireEvent.click(initialVerifyButton!);
+
+      const verifyModal = await screen.findByRole("dialog");
+      const verifyModalButton = screen.getByTestId("modal-verify");
+
+      expect(verifyModal).toBeInTheDocument();
+
+      await waitFor(() => {
+        expect(verifyModalButton).toBeInTheDocument();
+      });
+    });
+
+    it("clicking verify adds the stamp", async () => {
+      render(
+        <UserContext.Provider value={mockUserContext}>
+          <PohCard />
+        </UserContext.Provider>
+      );
+
+      const initialVerifyButton = screen.queryByRole("button", {
+        name: /Verify/,
+      });
+
+      // Click verify button on ens card
+      fireEvent.click(initialVerifyButton!);
+
+      // Wait to see the verify button on the modal
+      await waitFor(() => {
+        const verifyModalButton = screen.getByTestId("modal-verify");
+        expect(verifyModalButton).toBeInTheDocument();
+      });
+
+      const finalVerifyButton = screen.queryByRole("button", {
+        name: /Verify/,
+      });
+
+      // Click the verify button on modal
+      fireEvent.click(finalVerifyButton!);
+
+      expect(handleAddStamp).toBeCalled();
+    });
+
+    it("clicking cancel closes the modal and a stamp should not be added", async () => {
+      (fetchVerifiableCredential as jest.Mock).mockResolvedValue(SUCCESFUL_POH_RESULT);
+      render(
+        <UserContext.Provider value={mockUserContext}>
+          <PohCard />
+        </UserContext.Provider>
+      );
+
+      const initialVerifyButton = screen.queryByRole("button", {
+        name: /Verify/,
+      });
+
+      fireEvent.click(initialVerifyButton!);
+
+      // Wait to see the cancel button on the modal
+      let modalCancelButton: HTMLElement | null = null;
+      await waitFor(() => {
+        modalCancelButton = screen.queryByRole("button", {
+          name: /Cancel/,
+        });
+        expect(modalCancelButton).toBeInTheDocument();
+      });
+
+      fireEvent.click(modalCancelButton!);
+
+      expect(handleAddStamp).not.toBeCalled();
+
+      await waitForElementToBeRemoved(modalCancelButton);
+      expect(modalCancelButton).not.toBeInTheDocument();
+    });
+  });
+
+  describe("and when a failed POH result is returned", () => {
+    it("modal displays a failed message", async () => {
+      (fetchVerifiableCredential as jest.Mock).mockRejectedValue("ERROR");
+      render(
+        <UserContext.Provider value={mockUserContext}>
+          <PohCard />
+        </UserContext.Provider>
+      );
+
+      const initialVerifyButton = screen.queryByRole("button", {
+        name: /Verify/,
+      });
+
+      fireEvent.click(initialVerifyButton!);
+
+      const verifyModal = await screen.findByRole("dialog");
+      const verifyModalText = screen.getByText("The Proof of Humanity Status for this address Is not Registered");
+
+      expect(verifyModal).toBeInTheDocument();
+
+      await waitFor(() => {
+        expect(verifyModalText).toBeInTheDocument();
+      });
+    });
+  });
+});

app/__tests__/pages/Dashboard.test.tsx

@@ -29,6 +29,10 @@ const mockUserContext: UserContextState = {
       providerSpec: STAMP_PROVIDERS.Ens,
       stamp: undefined,
     },
+    Poh: {
+      providerSpec: STAMP_PROVIDERS.Poh,
+      stamp: undefined,
+    },
     Twitter: {
       providerSpec: STAMP_PROVIDERS.Twitter,
       stamp: undefined,

app/components/CardList.tsx

@@ -2,7 +2,7 @@
 import React from "react";
 
 // --- Identity Providers
-import { GoogleCard, SimpleCard, EnsCard, TwitterCard } from "./ProviderCards";
+import { GoogleCard, SimpleCard, EnsCard, PohCard, TwitterCard } from "./ProviderCards";
 
 export const CardList = (): JSX.Element => {
   return (
@@ -13,6 +13,7 @@ export const CardList = (): JSX.Element => {
           <GoogleCard />
           <EnsCard />
           <TwitterCard />
+          <PohCard />
         </div>
       </div>
     </section>

app/components/ProviderCards/PohCard.tsx

@@ -0,0 +1,93 @@
+// --- React Methods
+import React, { useContext, useState } from "react";
+
+// --- Identity tools
+import { fetchVerifiableCredential } from "@dpopp/identity/dist/commonjs";
+
+// pull context
+import { UserContext } from "../../context/userContext";
+
+import { PROVIDER_ID, Stamp } from "@dpopp/types";
+
+const iamUrl = process.env.NEXT_PUBLIC_DPOPP_IAM_URL || "";
+
+// --- import components
+import { Card } from "../Card";
+import { VerifyModal } from "../VerifyModal";
+import { useDisclosure } from "@chakra-ui/react";
+
+const providerId: PROVIDER_ID = "Poh";
+
+export default function PohCard(): JSX.Element {
+  const { address, signer, handleAddStamp, allProvidersState } = useContext(UserContext);
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  const [credentialResponse, SetCredentialResponse] = useState<Stamp | undefined>(undefined);
+  const [credentialResponseIsLoading, setCredentialResponseIsLoading] = useState(false);
+  const [pohVerified, SetPohVerified] = useState<Stamp | undefined>(undefined);
+
+  const handleFetchCredential = (): void => {
+    setCredentialResponseIsLoading(true);
+    fetchVerifiableCredential(
+      iamUrl,
+      {
+        type: "Poh",
+        version: "0.0.0",
+        address: address || "",
+        proofs: {
+          valid: address ? "true" : "false",
+        },
+      },
+      signer as { signMessage: (message: string) => Promise<string> }
+    )
+      .then((verified: { record: any; credential: any }): void => {
+        SetPohVerified(verified.record?.poh);
+        SetCredentialResponse({
+          provider: "Poh",
+          credential: verified.credential,
+        });
+      })
+      .catch((e: any): void => {})
+      .finally((): void => {
+        setCredentialResponseIsLoading(false);
+      });
+  };
+
+  const handleUserVerify = (): void => {
+    if (credentialResponse) {
+      handleAddStamp(credentialResponse);
+    }
+    onClose();
+  };
+
+  const issueCredentialWidget = (
+    <>
+      <button
+        className="verify-btn"
+        data-testid="button-verify"
+        onClick={() => {
+          SetCredentialResponse(undefined);
+          handleFetchCredential();
+          onOpen();
+        }}
+      >
+        Verify
+      </button>
+      <VerifyModal
+        isOpen={isOpen}
+        onClose={onClose}
+        stamp={credentialResponse}
+        handleUserVerify={handleUserVerify}
+        verifyData={<>{`The Proof of Humanity Status for this address ${pohVerified || "Is not Registered"}`}</>}
+        isLoading={credentialResponseIsLoading}
+      />
+    </>
+  );
+
+  return (
+    <Card
+      providerSpec={allProvidersState[providerId].providerSpec}
+      verifiableCredential={allProvidersState[providerId].stamp?.credential}
+      issueCredentialWidget={issueCredentialWidget}
+    />
+  );
+}

app/components/ProviderCards/index.tsx

@@ -1,4 +1,5 @@
 export { default as GoogleCard } from "./GoogleCard";
 export { default as SimpleCard } from "./SimpleCard";
 export { default as EnsCard } from "./EnsCard";
+export { default as PohCard } from "./PohCard";
 export { default as TwitterCard } from "./TwitterCard";

app/config/providers.ts

@@ -23,6 +23,10 @@ export const STAMP_PROVIDERS: Readonly<Providers> = {
     name: "Ens",
     description: "Ens name",
   },
+  Poh: {
+    name: "POH",
+    description: "Proof of Humanity",
+  },
   Twitter: {
     name: "Twitter",
     description: "Twitter name",