Angelo/engr 730 add openpassport in widget

.yarnrc.yml

@@ -1,3 +1,5 @@
 nodeLinker: node-modules
 
+npmRegistryServer: "https://registry.yarnpkg.com"
+
 yarnPath: .yarn/releases/yarn-4.1.1.cjs

apps/console/src/analytics/events/plugins/justVerified/index.ts

@@ -11,6 +11,14 @@ import {
 import { TELEGRAM_ENABLED, TelegramEnabledPayload } from './telegram-enabled';
 import { TWITTER_DISABLED, TwitterDisabledPayload } from './twitter-disabled';
 import { TWITTER_ENABLED, TwitterEnabledPayload } from './twitter-enabled';
+import {
+  OPENPASSPORT_DISABLED,
+  OpenPassportDisabledPayload,
+} from './openpassport-disabled';
+import {
+  OPENPASSPORT_ENABLED,
+  OpenPassportEnabledPayload,
+} from './openpassport-enabled';
 
 export const JUST_VERIFIED_EVENTS = {
   DISCORD_DISABLED,
@@ -23,6 +31,8 @@ export const JUST_VERIFIED_EVENTS = {
   TELEGRAM_ENABLED,
   TWITTER_DISABLED,
   TWITTER_ENABLED,
+  OPENPASSPORT_DISABLED,
+  OPENPASSPORT_ENABLED,
 } as const;
 
 export interface JustVerifiedEventsPayload {
@@ -36,4 +46,6 @@ export interface JustVerifiedEventsPayload {
   [TELEGRAM_ENABLED]: TelegramEnabledPayload;
   [TWITTER_DISABLED]: TwitterDisabledPayload;
   [TWITTER_ENABLED]: TwitterEnabledPayload;
+  [OPENPASSPORT_DISABLED]: OpenPassportDisabledPayload;
+  [OPENPASSPORT_ENABLED]: OpenPassportEnabledPayload;
 }

apps/console/src/analytics/events/plugins/justVerified/openpassport-disabled.ts

@@ -0,0 +1,3 @@
+export const OPENPASSPORT_DISABLED = 'OPENPASSPORT_DISABLED';
+
+export interface OpenPassportDisabledPayload {}

apps/console/src/analytics/events/plugins/justVerified/openpassport-enabled.ts

@@ -0,0 +1,3 @@
+export const OPENPASSPORT_ENABLED = 'OPENPASSPORT_ENABLED';
+
+export interface OpenPassportEnabledPayload {}

apps/console/src/components/sections/customizer/PluginsSection/JustVerified/index.tsx

@@ -39,6 +39,11 @@ const socials: { logo: ReactNode; title: string; credential: Credentials }[] = [
     title: 'Discord',
     credential: 'discord',
   },
+  {
+    logo: <TelegramIcon width={20} />,
+    title: 'OpenPassport',
+    credential: 'openpassport',
+  },
   {
     logo: <EmailIcon width={20} />,
     title: 'Email',
@@ -96,6 +101,9 @@ export const JustVerified = () => {
       case 'email':
         getAnalyticsClient().track(unCheck ? 'EMAIL_DISABLED' : 'EMAIL_ENABLED', {});
         break;
+      case 'openpassport':
+        getAnalyticsClient().track(unCheck ? 'OPENPASSPORT_DISABLED' : 'OPENPASSPORT_ENABLED', {});
+        break;
       default:
         break;
     }

apps/console/src/providers/ConsoleProvider/index.tsx

@@ -21,6 +21,7 @@ export const ConsoleProvider: FC<ConsoleProviderProps> = ({ children }) => {
     'github',
     'discord',
     'email',
+    'openpassport',
   ]);
   return (
     <ConsoleContext.Provider

packages/@justverified/plugin/src/lib/components/SelectCredentialItem/index.tsx

@@ -20,6 +20,7 @@ export interface SelectCredentialItemProps {
   onClick: () => void;
   credentialValue:
     | EthereumEip712Signature2021<{ username?: string; email?: string }>
+    | EthereumEip712Signature2021<{ openPassportProof?: string }>
     | undefined;
   disabled?: boolean;
 }
@@ -36,12 +37,15 @@ export const SelectCredentialItem: FC<SelectCredentialItemProps> = ({
     () => selectedCredential === credential,
     [selectedCredential, credential]
   );
-  const username = useMemo(
-    () =>
-      credentialValue?.credentialSubject?.username ||
-      credentialValue?.credentialSubject?.email,
-    [credentialValue]
-  );
+  const username = useMemo(() => {
+    const subject = credentialValue?.credentialSubject;
+    if (!subject) return undefined;
+
+    return 'username' in subject ? subject.username :
+           'email' in subject ? subject.email :
+           'openPassportProof' in subject ? "Valid Passport" :
+           undefined;
+  }, [credentialValue]);
   const expirationDate = useMemo(
     () => credentialValue?.expirationDate,
     [credentialValue]
@@ -58,6 +62,9 @@ export const SelectCredentialItem: FC<SelectCredentialItemProps> = ({
         return <DiscordIcon width={30} />;
       case 'email':
         return <EmailIcon width={30} />;
+      case 'openpassport':
+        // TODO: Change to OpenPassportIcon
+        return <TelegramIcon width={30} />;
     }
   }, [credential]);
 

packages/@justverified/plugin/src/lib/components/VerificationCard/index.tsx

@@ -136,7 +136,7 @@ export const VerificationCard: FC<VerificationCardProps> = ({
                 fontFamily: 'var(--justweb3-font-family)'
               }}
             >
-              {verifiedRecords[credential]?.credentialSubject.username || verifiedRecords[credential]?.credentialSubject.email}
+              {verifiedRecords[credential]?.credentialSubject.username || verifiedRecords[credential]?.credentialSubject.email || (verifiedRecords[credential]?.credentialSubject.openPassportProof && "Valid Passport")}
             </P>
           </Flex>
 

packages/@justverified/plugin/src/lib/dialogs/JustVerifiedDialog/index.tsx

@@ -13,6 +13,7 @@ import {
   DiscordEthereumEip712Signature,
   GithubEthereumEip712Signature,
   TelegramEthereumEip712Signature,
+  OpenPassportEthereumEip712Signature,
   TwitterEthereumEip712Signature,
 } from '../../types';
 import { usePreviousState, useSocialVerification } from '../../hooks';
@@ -199,10 +200,17 @@ export const JustVerifiedDialog: FC<JustVerifiedDialogProps> = ({
                                 ).credentialSubject.username;
                                 break;
                               }
+                              case 'openpassport': {
+                                socialValue = (
+                                  credentialValue as OpenPassportEthereumEip712Signature
+                                ).credentialSubject.openPassportProof;
+                                break;
+                              } 
                               default: {
                                 socialValue = '';
                               }
                             }
+
                             if (mAppsAlreadyEnabled?.includes(mApp)) {
                               updateRecords({
                                 text: [

packages/@justverified/plugin/src/lib/plugins/index.tsx

@@ -53,7 +53,7 @@ export const JustVerifiedPlugin = (
       return (
         <VerificationSection
           ens={ens}
-          credentials={['twitter', 'email', 'telegram', 'discord', 'github']}
+          credentials={['twitter', 'email', 'telegram', 'discord', 'github', 'openpassport']}
           chainId={chainId}
           mApp={mApp}
           verificationBackendUrl={verificationBackendUrl}

packages/@justverified/plugin/src/lib/types/credentials/index.ts

@@ -4,24 +4,28 @@ import { TelegramEthereumEip712Signature } from './telegram-credential';
 import { TwitterEthereumEip712Signature } from './twitter-credential';
 import { DiscordEthereumEip712Signature } from './discord-credential';
 import { EmailEthereumEip712Signature } from './email-credential';
-export type Credentials = 'github' | 'twitter' | 'discord' | 'telegram' | 'email'
+import { OpenPassportEthereumEip712Signature } from './openpassport-credential';
 
-export type CredentialMetadataKey = 'com.github' | 'com.twitter' | 'com.discord' | 'org.telegram' | 'email'
+export type Credentials = 'github' | 'twitter' | 'discord' | 'telegram' | 'email' | 'openpassport'
+
+export type CredentialMetadataKey = 'com.github' | 'com.twitter' | 'com.discord' | 'org.telegram' | 'email' | 'app.openpassport'
 
 export const CredentialMetadataKeyStandard: Record<Credentials, CredentialMetadataKey> = {
   "github": "com.github",
   "twitter": "com.twitter",
   "discord": "com.discord",
   "telegram": "org.telegram",
-  "email": "email"
+  "email": "email",
+  "openpassport": "app.openpassport"
 } as const
 
 export const CredentialMetadataKeyStandardReverse: Record<CredentialMetadataKey, Credentials> = {
   "com.github": "github",
   "com.twitter": "twitter",
   "com.discord": "discord",
   "org.telegram": "telegram",
-  "email": "email"
+  "email": "email",
+  "app.openpassport": "openpassport"
 } as const
 
 export type CredentialMetadataValue = {
@@ -30,6 +34,7 @@ export type CredentialMetadataValue = {
   discord: DiscordEthereumEip712Signature
   telegram: TelegramEthereumEip712Signature
   email: EmailEthereumEip712Signature
+  openpassport: OpenPassportEthereumEip712Signature
 }
 
 
@@ -38,6 +43,7 @@ export * from './discord-credential'
 export * from './github-credential'
 export * from './telegram-credential'
 export * from './twitter-credential'
+export * from './openpassport-credential'
 
 export interface JustVerifiedResponse<T extends EthereumEip712Signature2021 = EthereumEip712Signature2021> {
   dataKey: string;

packages/@justverified/plugin/src/lib/types/credentials/openpassport-credential.ts

@@ -0,0 +1,5 @@
+import { CredentialSubjectValue, EthereumEip712Signature2021 } from "../ethereumEip712Signature";
+export interface OpenPassportCredential extends CredentialSubjectValue{
+  openPassportProof: string;
+}
+export type OpenPassportEthereumEip712Signature = EthereumEip712Signature2021<OpenPassportCredential>

packages/@justverified/plugin/src/stories/justverified.stories.tsx

@@ -52,7 +52,7 @@ const JustWeb3Config: JustWeb3ProviderConfig = {
   // enableAuth: true,
   plugins: [
     JustVerifiedPlugin(
-      ['twitter', 'github', 'discord']
+      ['twitter', 'github', 'discord', 'openpassport'],
       // 'http://localhost:3009/verifications/v1'
       // 'https://api-staging.justaname.id/verifications/v1'
     ),

packages/@justweb3/widget/src/lib/icons/records-icons/index.tsx

@@ -13,7 +13,7 @@ import {
   TelegramIcon,
   TwitterIcon,
   WebsiteIcon,
-  XIcon
+  XIcon,
 } from '@justweb3/ui';
 
 export const getTextRecordIcon = (key: string) => {
@@ -48,6 +48,8 @@ export const getTextRecordIcon = (key: string) => {
       return <EmailIcon width={24} height={24} />;
     case 'org.telegram':
       return <TelegramIcon width={24} height={24} />;
+    case 'app.openpassport':
+      return <TelegramIcon width={24} height={24} />;
     default:
       return (
         <div