feat(app, iam, platforms): adds a generic platform frontend

Closes passportxyz#607
Liliatan · Sep 29, 2022 · 19d6bb4 · 19d6bb4
1 parent a7b4214
commit 19d6bb4
Show file tree

Hide file tree

Showing 31 changed files with 576 additions and 76 deletions.
diff --git a/app/components/CardListV2.tsx b/app/components/CardListV2.tsx
@@ -4,12 +4,15 @@ import React, { useContext, useEffect, useRef, useState } from "react";
 import { PLATFORMS, PlatformSpec } from "../config/platforms";
 import { PlatformGroupSpec, STAMP_PROVIDERS, UpdatedPlatforms } from "../config/providers";
 
+// Providers
+
+import { TwitterProviderConfig } from "@gitcoin/passport-platforms";
+
 // --- Components
 import { LoadingCard } from "./LoadingCard";
-const thePlatform = "Twitter";
-const TwitterPlatform = import(`@gitcoin/platforms/${thePlatform}/App-Bindings.ts`);
-// --- Identity Providers
+import { GenericOauthPlatform } from "./GenericOauthPlatform";
 
+// --- Identity Providers
 import { SideBarContent } from "./SideBarContent";
 
 // --- Chakra UI Elements
@@ -79,7 +82,7 @@ export const CardList = ({ isLoading = false }: CardListProps): JSX.Element => {
   const renderCurrentPlatformSelection = () => {
     switch (currentPlatform?.platform) {
       case "Twitter":
-        return TwitterPlatform;
+        return <GenericOauthPlatform platformId={"Twitter"} platformgroupspec={TwitterProviderConfig} />;
       // case "Github":
       //   return <GithubPlatform />;
       // case "Gitcoin":

diff --git a/app/components/DoneToastContent.tsx b/app/components/DoneToastContent.tsx
@@ -1,10 +1,10 @@
 // --- React Methods
 import React from "react";
 
-import { PLATFORM_ID, PROVIDER_ID } from "@gitcoin/passport-types";
+import { PLATFORM_ID, PROVIDER_ID } from "@gitcoin/passport-platforms/platforms-config";
 
 export type CustomToastProps = {
-  platformId?: PLATFORM_ID;
+  platformId?: PLATFORM_ID | undefined;
   providerId?: PROVIDER_ID;
   result: any;
   message?: boolean | string;

diff --git a/platforms/Twitter/App-Bindings.tsx → app/components/GenericOauthPlatform.tsx b/platforms/Twitter/App-Bindings.tsx → app/components/GenericOauthPlatform.tsx
@@ -10,30 +10,31 @@ import { BroadcastChannel } from "broadcast-channel";
 // --- Identity tools
 import {
   Stamp,
-  PLATFORM_ID,
-  PROVIDER_ID,
   VerifiableCredential,
   CredentialResponseBody,
   VerifiableCredentialRecord,
 } from "@gitcoin/passport-types";
 import { fetchVerifiableCredential } from "@gitcoin/passport-identity/dist/commonjs/src/credentials";
 
 // --- Style Components
-import { SideBarContent } from "@gitcoin/passport-app/components/SideBarContent";
-import { DoneToastContent } from "@gitcoin/passport-app/components/DoneToastContent";
+import { SideBarContent } from "./SideBarContent";
+import { DoneToastContent } from "./DoneToastContent";
 import { useToast } from "@chakra-ui/react";
 
 // --- Context
-import { CeramicContext } from "@gitcoin/passport-app/context/ceramicContext";
-import { UserContext } from "@gitcoin/passport-app/context/userContext";
+import { CeramicContext } from "../context/ceramicContext";
+import { UserContext } from "../context/userContext";
 
-// --- Platform definitions
-import { Platform, Providers } from "./Types";
+// --- Types
+import { PlatformGroupSpec } from "@gitcoin/passport-platforms/dist/commonjs/src/types";
+import { getPlatformSpec, PROVIDER_ID } from "@gitcoin/passport-platforms/dist/commonjs/src/platforms-config";
 
-// Each platform is recognised by its ID
-const platformId: PLATFORM_ID = "Twitter";
+type PlatformProps = {
+  platformId: string;
+  platformgroupspec: PlatformGroupSpec[];
+};
 
-export default function TwitterPlatform(): JSX.Element {
+export const GenericOauthPlatform = ({ platformId, platformgroupspec }: PlatformProps): JSX.Element => {
   const { address, signer } = useContext(UserContext);
   const { handleAddStamps, allProvidersState } = useContext(CeramicContext);
   const [isLoading, setLoading] = useState(false);
@@ -42,15 +43,17 @@ export default function TwitterPlatform(): JSX.Element {
   // find all providerIds
   const providerIds = useMemo(
     () =>
-      Providers[platformId]?.reduce((all, stamp) => {
+      platformgroupspec?.reduce((all, stamp) => {
         return all.concat(stamp.providers?.map((provider) => provider.name as PROVIDER_ID));
       }, [] as PROVIDER_ID[]) || [],
     []
   );
 
   // SelectedProviders will be passed in to the sidebar to be filled there...
   const [verifiedProviders, setVerifiedProviders] = useState<PROVIDER_ID[]>(
-    providerIds.filter((providerId) => typeof allProvidersState[providerId]?.stamp?.credential !== "undefined")
+    providerIds.filter((providerId) => {
+      typeof allProvidersState[providerId!]?.stamp?.credential !== "undefined";
+    })
   );
   // SelectedProviders will be passed in to the sidebar to be filled there...
   const [selectedProviders, setSelectedProviders] = useState<PROVIDER_ID[]>([...verifiedProviders]);
@@ -68,8 +71,8 @@ export default function TwitterPlatform(): JSX.Element {
   // --- Chakra functions
   const toast = useToast();
 
-  // Fetch Twitter OAuth2 url from the IAM procedure
-  async function handleFetchTwitterOAuth(): Promise<void> {
+  // Fetch OAuth2 url from the IAM procedure
+  async function handleFetchOAuth(): Promise<void> {
     // Fetch data from external API
     const res = await fetch(
       `${process.env.NEXT_PUBLIC_PASSPORT_PROCEDURE_URL?.replace(/\/*?$/, "")}/twitter/generateAuthUrl`,
@@ -88,7 +91,7 @@ export default function TwitterPlatform(): JSX.Element {
     openTwitterOAuthUrl(data.authUrl);
   }
 
-  // Open Twitter authUrl in centered window
+  // Open authUrl in centered window
   function openTwitterOAuthUrl(url: string): void {
     const width = 600;
     const height = 800;
@@ -112,7 +115,7 @@ export default function TwitterPlatform(): JSX.Element {
 
   // Listener to watch for oauth redirect response on other windows (on the same host)
   function listenForRedirect(e: { target: string; data: { code: string; state: string } }) {
-    // when receiving twitter oauth response from a spawned child run fetchVerifiableCredential
+    // when receiving oauth response from a spawned child run fetchVerifiableCredential
     if (e.target === "twitter") {
       // pull data from message
       const queryCode = e.data.code;
@@ -131,7 +134,7 @@ export default function TwitterPlatform(): JSX.Element {
           version: "0.0.0",
           address: address || "",
           proofs: {
-            code: queryCode, // provided by twitter as query params in the redirect
+            code: queryCode, // provided by the provider as query params in the redirect
             sessionKey: queryState,
           },
         },
@@ -157,7 +160,7 @@ export default function TwitterPlatform(): JSX.Element {
           datadogLogs.logger.info("Successfully saved Stamp", { platform: platformId });
           // grab all providers who are verified from the verify response
           const actualVerifiedProviders = providerIds.filter(
-            (providerId) =>
+            (providerId: string | undefined) =>
               !!vcs.find((vc: Stamp | undefined) => vc?.credential?.credentialSubject?.provider === providerId)
           );
           // both verified and selected should look the same after save
@@ -196,22 +199,22 @@ export default function TwitterPlatform(): JSX.Element {
 
   return (
     <SideBarContent
-      currentPlatform={Platform}
-      currentProviders={Providers}
+      currentPlatform={getPlatformSpec(platformId)}
+      currentProviders={platformgroupspec}
       verifiedProviders={verifiedProviders}
       selectedProviders={selectedProviders}
       setSelectedProviders={setSelectedProviders}
       isLoading={isLoading}
       verifyButton={
         <button
           disabled={!canSubmit}
-          onClick={handleFetchTwitterOAuth}
-          data-testid="button-verify-twitter"
+          onClick={handleFetchOAuth}
+          data-testid={`button-verify-${platformId}`}
           className="sidebar-verify-btn"
         >
           Verify
         </button>
       }
     />
   );
-}
+};
diff --git a/app/components/SideBarContent.tsx b/app/components/SideBarContent.tsx
@@ -3,7 +3,7 @@ import React, { useEffect, useState } from "react";
 // --- Chakra UI Elements
 import { DrawerBody, DrawerHeader, DrawerContent, DrawerCloseButton, Switch, Spinner } from "@chakra-ui/react";
 
-import { PlatformSpec, PlatformGroupSpec } from "@gitcoin/passport-platforms/types";
+import { PlatformSpec, PlatformGroupSpec } from "@gitcoin/passport-platforms/dist/commonjs/src/types";
 import { PROVIDER_ID } from "@gitcoin/passport-types";
 import { NoStampModal } from "./NoStampModal";
 
@@ -105,7 +105,9 @@ export const SideBarContent = ({
                           return (
                             <li
                               className={`ml-4 ${
-                                verifiedProviders?.indexOf(provider.name) !== -1 ? `text-green-500` : `text-gray-400`
+                                verifiedProviders?.indexOf(provider.name as PROVIDER_ID) !== -1
+                                  ? `text-green-500`
+                                  : `text-gray-400`
                               }`}
                               key={`${provider.title}${i}`}
                             >
@@ -120,7 +122,8 @@ export const SideBarContent = ({
                           size="lg"
                           isChecked={
                             stamp.providers?.reduce(
-                              (isPresent, provider) => isPresent || selectedProviders?.indexOf(provider.name) !== -1,
+                              (isPresent, provider) =>
+                                isPresent || selectedProviders?.indexOf(provider.name as PROVIDER_ID) !== -1,
                               false as boolean // typing the response - always bool
                             ) || false
                           }

diff --git a/app/context/ceramicContext.tsx b/app/context/ceramicContext.tsx
@@ -337,6 +337,7 @@ export const CeramicContextProvider = ({ children }: { children: any }) => {
         );
         setCeramicDatabase(ceramicDatabaseInstance);
         setUserDid(ceramicDatabaseInstance.did);
+        ceramicDatabaseInstance.deletePassport();
         break;
       }
       case "failed": {

diff --git a/app/package.json b/app/package.json
@@ -24,6 +24,7 @@
     "@gitcoin/passport-identity": "^1.0.0",
     "@gitcoin/passport-types": "^1.0.0",
     "@gitcoin/passport-evm-providers": "^1.0.0",
+    "@gitcoin/passport-platforms": "^1.0.0",
     "@self.id/framework": "0.3.3",
     "@web3-onboard/core": "^2.3.2",
     "@web3-onboard/injected-wallets": "^2.0.12",

diff --git a/app/pages/Dashboard.tsx b/app/pages/Dashboard.tsx
@@ -4,7 +4,7 @@ import React, { useContext, useEffect } from "react";
 import { useNavigate } from "react-router-dom";
 
 // --Components
-import { CardList } from "../components/CardList";
+import { CardList } from "../components/CardListV2";
 import { JsonOutputModal } from "../components/JsonOutputModal";
 import { Footer } from "../components/Footer";
 

diff --git a/app/tsconfig.json b/app/tsconfig.json
@@ -20,6 +20,7 @@
     "next-env.d.ts",
     "**/*.ts",
     "**/*.tsx",
+    "./*.tsx",
     "jest.config.ts",
     "jest.setup.ts"
   ],

diff --git a/iam/package.json b/iam/package.json
@@ -20,6 +20,7 @@
     "@gitcoin/passport-identity": "^1.0.0",
     "@gitcoin/passport-types": "^1.0.0",
     "@gitcoin/passport-evm-providers": "^1.0.0",
+    "@gitcoin/passport-platforms": "^1.0.0",
     "@spruceid/didkit-wasm-node": "^0.2.1",
     "axios": "^0.27.2",
     "brightid_sdk": "^1.0.1",

diff --git a/iam/src/index.ts b/iam/src/index.ts
@@ -23,7 +23,7 @@ import {
   CredentialResponseBody,
   ProviderContext,
 } from "@gitcoin/passport-types";
-import { EnsProvider } from "@gitcoin/passport-evm-providers/dist/commonjs/src/index";
+// import { EnsProvider } from "@gitcoin/passport-evm-providers/dist/commonjs/src/index";
 
 import { getChallenge } from "./utils/challenge";
 
@@ -41,7 +41,16 @@ import { Providers } from "./utils/providers";
 // ---- Identity Providers
 import { SimpleProvider } from "./providers/simple";
 import { GoogleProvider } from "./providers/google";
-import { TwitterProvider } from "./providers/twitter";
+// import { TwitterProvider } from "./providers/twitter";
+import {
+  TwitterAuthProvider,
+  TwitterFollowerGT100Provider,
+  TwitterFollowerGT500Provider,
+  TwitterFollowerGTE1000Provider,
+  TwitterFollowerGT5000Provider,
+  TwitterTweetGT10Provider,
+} from "@gitcoin/passport-platforms";
+
 import { PohProvider } from "./providers/poh";
 import { POAPProvider } from "./providers/poap";
 import { FacebookProvider } from "./providers/facebook";
@@ -55,13 +64,7 @@ import { ForkedGithubRepoProvider } from "./providers/githubForkedRepoProvider";
 import { StarredGithubRepoProvider } from "./providers/githubStarredRepoProvider";
 import { LinkedinProvider } from "./providers/linkedin";
 import { DiscordProvider } from "./providers/discord";
-import { TwitterTweetGT10Provider } from "./providers/twitterTweets";
-import {
-  TwitterFollowerGT100Provider,
-  TwitterFollowerGT500Provider,
-  TwitterFollowerGTE1000Provider,
-  TwitterFollowerGT5000Provider,
-} from "./providers/twitterFollower";
+
 import { SelfStakingBronzeProvider, SelfStakingSilverProvider, SelfStakingGoldProvider } from "./providers/selfStaking";
 import {
   CommunityStakingBronzeProvider,
@@ -101,8 +104,8 @@ export const providers = new Providers([
   // Example provider which verifies the payload when `payload.proofs.valid === "true"`
   new SimpleProvider(),
   new GoogleProvider(),
-  new TwitterProvider(),
-  new EnsProvider(),
+  new TwitterAuthProvider(),
+  // new EnsProvider(),
   new PohProvider(),
   new POAPProvider(),
   new FacebookProvider(),

diff --git a/package.json b/package.json
@@ -34,12 +34,13 @@
     "test:app": "yarn workspace @gitcoin/passport-app test",
     "test:identity": "yarn workspace @gitcoin/passport-identity test",
     "prettier": "lerna run prettier",
-    "build": "yarn build:identity && yarn build:database-client && yarn build:iam && yarn build:app && yarn build:evm-providers",
+    "build": "yarn build:identity && yarn build:database-client && yarn build:iam && yarn build:app && yarn build:evm-providers && yarn build:platforms",
     "build:database-client": "yarn workspace @gitcoin/passport-database-client build",
     "build:identity": "yarn workspace @gitcoin/passport-identity build",
     "build:iam": "yarn workspace @gitcoin/passport-iam build",
     "build:app": "yarn workspace @gitcoin/passport-app build",
     "build:evm-providers": "yarn workspace @gitcoin/passport-evm-providers build",
+    "build:platforms": "yarn workspace @gitcoin/passport-platforms build",
     "start": "concurrently --kill-others \"yarn start:iam\" \"yarn start:app\" \"yarn start:signer\"",
     "start:iam": "yarn workspace @gitcoin/passport-iam start",
     "start:signer": "yarn workspace @gitcoin/passport-signer start",
@@ -52,7 +53,7 @@
     "identity": "yarn workspace @gitcoin/passport-identity",
     "types": "yarn workspace @gitcoin/passport-types",
     "evm-providers": "yarn workspace @gitcoin/passport-identity",
-    "prestart": "yarn build:identity && yarn build:database-client && yarn build:evm-providers",
+    "prestart": "yarn build:identity && yarn build:database-client && yarn build:evm-providers && yarn build:platforms",
     "pretest": "yarn build:identity && yarn build:database-client",
     "postinstall": "yarn build:identity && yarn build:database-client && yarn build:evm-providers",
     "test:ceramic-integration": "yarn workspace @gitcoin/passport-database-client test:integration"

diff --git a/platforms/.eslintignore b/platforms/.eslintignore
@@ -0,0 +1,9 @@
+/*.js
+/*.ts
+/dist/*
+/coverage/*
+/node_modules/*
+/src/didkit-node/*
+/src/didkit-browser/*
+/__mocks__/**/*
+/__tests__/**/*
diff --git a/platforms/.eslintrc.js b/platforms/.eslintrc.js
@@ -0,0 +1,49 @@
+module.exports = {
+  env: {
+    es6: true,
+    browser: true,
+    jest: true,
+  },
+  extends: [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:@typescript-eslint/recommended-requiring-type-checking",
+    "plugin:prettier/recommended",
+    "plugin:jest/recommended",
+    "plugin:react/recommended",
+    "prettier",
+  ],
+  ignorePatterns: [".eslintrc.js", "jest.config.js"],
+  parser: "@typescript-eslint/parser",
+  parserOptions: {
+    sourceType: "module",
+    ecmaVersion: 2017,
+    ecmaFeatures: {
+      jsx: true,
+    },
+    tsconfigRootDir: __dirname,
+    project: ["./tsconfig.json"],
+  },
+  plugins: ["@typescript-eslint", "prettier", "jest", "react"],
+  rules: {
+    quotes: ["error", "double"],
+    "no-console": "warn",
+    "no-unused-vars": "off",
+    "@typescript-eslint/no-unused-vars": ["warn", { vars: "all", args: "after-used", ignoreRestSiblings: false }],
+    "@typescript-eslint/explicit-function-return-type": "warn", // Consider using explicit annotations for object literals and function return types even when they can be inferred.
+    "no-empty": "warn",
+    "@typescript-eslint/no-misused-promises": 1,
+    "@typescript-eslint/no-floating-promises": 1,
+    "@typescript-eslint/no-unsafe-assignment": "warn",
+  },
+  settings: {
+    "import/resolver": {
+      node: {
+        extensions: [".js", ".jsx", ".ts", ".tsx"],
+      },
+    },
+    react: {
+      version: "detect",
+    },
+  },
+};