diff --git a/src/assets/icons/kleros-icon.svg b/src/assets/icons/kleros-icon.svg new file mode 100644 index 0000000..4164a7c --- /dev/null +++ b/src/assets/icons/kleros-icon.svg @@ -0,0 +1,45 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/contexts/KycContext/KycContext.tsx b/src/contexts/KycContext/KycContext.tsx index 33f4057..ad0a49d 100644 --- a/src/contexts/KycContext/KycContext.tsx +++ b/src/contexts/KycContext/KycContext.tsx @@ -10,8 +10,6 @@ import { SaveCredentialsRequestParams, W3CCredential, } from '@rarimo/rarime-connector' -import type { UserInfo } from '@uauth/js' -import { AnimatePresence } from 'framer-motion' import { createContext, FC, @@ -30,10 +28,8 @@ import { useEffectOnce, useLocalStorage } from 'react-use' import { api } from '@/api' import { AppButton, Icon } from '@/common' import { useZkpContext } from '@/contexts' -import type { QueryVariableName } from '@/contexts/ZkpContext/ZkpContext' import { ICON_NAMES, SUPPORTED_KYC_PROVIDERS } from '@/enums' import { - abbrCenter, bus, BUS_EVENTS, ErrorHandler, @@ -59,6 +55,10 @@ const KycProviderGitCoin = lazy( () => import('@/contexts/KycContext/components/KycProviderGitCoin'), ) +const KycProviderKleros = lazy( + () => import('@/contexts/KycContext/components/KycProviderKleros'), +) + const KYC_PROVIDERS_DETAILS_MAP: Record< SUPPORTED_KYC_PROVIDERS, { @@ -131,27 +131,25 @@ const KYC_PROVIDERS_DETAILS_MAP: Record< ), }, -} + [SUPPORTED_KYC_PROVIDERS.KLEROS]: { + name: 'Kleros', + iconName: ICON_NAMES.providerKleros, + link: 'https://app.proofofhumanity.id/', + isWalletRequired: true, -type GitCoinPassportUserInfo = { - address: string - score: string - stamps: { - version: string - metadata: { - group: string - platform: { - id: string - icon: string - name: string - description: string - connectMessage: string - } - name: string - description: string - hash: string - } - }[] + completeKycCb: () => { + window.open('https://app.proofofhumanity.id/', '_blank') + }, + completeKycMessage: 'Complete your Kleros Passport', + tooltipElement: ( + + {`Kleros Passport: `} + + {`decentralized arbitration service for the disputes of the new economy.`} + + + ), + }, } type QuestPlatform = { @@ -169,7 +167,6 @@ type QuestPlatform = { interface KycContextValue { selectedKycProvider?: SUPPORTED_KYC_PROVIDERS - selectedKycDetails: [string, string][] kycError?: JsonApiError verificationErrorMessages: string getVerificationErrorComponent?: (confirmCb: () => void) => ReactElement @@ -200,7 +197,6 @@ interface KycContextValue { } export const kycContext = createContext({ - selectedKycDetails: [], verificationErrorMessages: '', KYC_PROVIDERS_DETAILS_MAP, @@ -261,111 +257,6 @@ const KycContextProvider: FC> = ({ getVerifiableCredentials, } = useZkpContext() - const kycDetails = useMemo | null>( - () => verifiableCredentials?.credentialSubject || null, - [verifiableCredentials?.credentialSubject], - ) - - const selectedKycDetails = useMemo((): [string, string][] => { - if (!selectedKycProvider) return [] - - const unstoppablePartialDetails = kycDetails as unknown as UserInfo - - const gitCoinPassportPartialDetails = (kycDetails?.kycAdditionalData && - kycDetails?.kycAdditionalData !== 'none' - ? JSON.parse(kycDetails?.kycAdditionalData as string) - : {}) as unknown as GitCoinPassportUserInfo - - const civicPartialDetails = kycDetails as unknown as { - address?: string - } - - const worldcoinPartialDetails = (kycDetails?.kycAdditionalData && - kycDetails?.kycAdditionalData !== 'none' - ? JSON.parse(kycDetails?.kycAdditionalData as string) - : {}) as unknown as { sub: string } - - const kycDetailsMap: Record = { - [SUPPORTED_KYC_PROVIDERS.UNSTOPPABLEDOMAINS]: [ - [ - t( - `kyc-providers-metadata.${SUPPORTED_KYC_PROVIDERS.UNSTOPPABLEDOMAINS}.domain-lbl`, - ), - kycDetails?.unstoppableDomain || unstoppablePartialDetails?.sub, - ], - ], - [SUPPORTED_KYC_PROVIDERS.WORLDCOIN]: [ - [ - t( - `kyc-providers-metadata.${SUPPORTED_KYC_PROVIDERS.WORLDCOIN}.score-lbl`, - ), - kycDetails?.worldcoinScore ?? '', - ], - [ - t( - `kyc-providers-metadata.${SUPPORTED_KYC_PROVIDERS.WORLDCOIN}.sub-lbl`, - ), - worldcoinPartialDetails?.sub - ? abbrCenter(worldcoinPartialDetails?.sub) - : '', - ], - ], - [SUPPORTED_KYC_PROVIDERS.CIVIC]: [ - ...(civicPartialDetails?.address && - civicPartialDetails?.address !== 'none' - ? [ - [ - t( - `kyc-providers-metadata.${SUPPORTED_KYC_PROVIDERS.CIVIC}.address-lbl`, - ), - abbrCenter(civicPartialDetails?.address), - ] as [string, string], - ] - : []), - ], - [SUPPORTED_KYC_PROVIDERS.GITCOIN]: [ - [ - t( - `kyc-providers-metadata.${SUPPORTED_KYC_PROVIDERS.GITCOIN}.address-lbl`, - ), - gitCoinPassportPartialDetails?.address - ? abbrCenter(gitCoinPassportPartialDetails?.address) - : '', - ], - [ - t( - `kyc-providers-metadata.${SUPPORTED_KYC_PROVIDERS.GITCOIN}.score-lbl`, - ), - gitCoinPassportPartialDetails?.score, - ], - ...(gitCoinPassportPartialDetails?.stamps?.map<[string, string]>( - ({ metadata }) => [ - metadata?.platform?.id, - ['Encrypted', metadata?.platform?.id].includes( - metadata?.description, - ) - ? 'Confirmed' - : metadata?.description, - ], - ) ?? []), - ], - } - - return kycDetailsMap[selectedKycProvider] - }, [kycDetails, selectedKycProvider, t]) - const [isVCRequestPending, setIsVCRequestPending] = useState(false) const [isVCRequestFailed, setIsVCRequestFailed] = useState(false) @@ -534,6 +425,7 @@ const KycContextProvider: FC> = ({ GitcoinPassport: SUPPORTED_KYC_PROVIDERS.GITCOIN, UnstoppableDomains: SUPPORTED_KYC_PROVIDERS.UNSTOPPABLEDOMAINS, Worldcoin: SUPPORTED_KYC_PROVIDERS.WORLDCOIN, + Kleros: SUPPORTED_KYC_PROVIDERS.KLEROS, }[provider], ) }, @@ -637,6 +529,14 @@ const KycContextProvider: FC> = ({ // @ts-ignore signature: authKycResponse.signature, }, + [SUPPORTED_KYC_PROVIDERS.KLEROS]: { + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore + address: authKycResponse.address, + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore + signature: authKycResponse.signature, + }, [SUPPORTED_KYC_PROVIDERS.UNSTOPPABLEDOMAINS]: { access_token: (authKycResponse as { accessToken: string }) .accessToken, @@ -682,6 +582,9 @@ const KycContextProvider: FC> = ({ await sleep(1000) + /** + * Keep using CLAIM_TYPE for new claims + */ subscribeToClaimWaiting( config.CLAIM_TYPE, identityIdString, @@ -783,7 +686,6 @@ const KycContextProvider: FC> = ({ selectedKycProvider, questPlatformDetails, - selectedKycDetails, kycError, verificationErrorMessages, @@ -810,39 +712,43 @@ const KycContextProvider: FC> = ({ {children} - - {!verifiableCredentials && isShowKycProvider && ( - <> - {selectedKycProvider === - SUPPORTED_KYC_PROVIDERS.UNSTOPPABLEDOMAINS ? ( - - ) : selectedKycProvider === SUPPORTED_KYC_PROVIDERS.WORLDCOIN ? ( - - ) : selectedKycProvider === SUPPORTED_KYC_PROVIDERS.CIVIC ? ( - - ) : selectedKycProvider === SUPPORTED_KYC_PROVIDERS.GITCOIN ? ( - - ) : ( - <> - )} - - )} - + {!verifiableCredentials && isShowKycProvider && ( + <> + {selectedKycProvider === + SUPPORTED_KYC_PROVIDERS.UNSTOPPABLEDOMAINS ? ( + + ) : selectedKycProvider === SUPPORTED_KYC_PROVIDERS.WORLDCOIN ? ( + + ) : selectedKycProvider === SUPPORTED_KYC_PROVIDERS.CIVIC ? ( + + ) : selectedKycProvider === SUPPORTED_KYC_PROVIDERS.GITCOIN ? ( + + ) : selectedKycProvider === SUPPORTED_KYC_PROVIDERS.KLEROS ? ( + + ) : ( + <> + )} + + )} ) } diff --git a/src/contexts/KycContext/components/KycProviderKleros.tsx b/src/contexts/KycContext/components/KycProviderKleros.tsx new file mode 100644 index 0000000..3e91257 --- /dev/null +++ b/src/contexts/KycContext/components/KycProviderKleros.tsx @@ -0,0 +1,49 @@ +import { FC, HTMLAttributes } from 'react' +import { useEffectOnce } from 'react-use' + +import { api } from '@/api' +import { useWeb3Context } from '@/contexts' +import { ErrorHandler } from '@/helpers' + +interface Props extends HTMLAttributes { + loginCb: (response: unknown) => Promise + errorCb: (error: Error) => void +} + +const KycProviderKleros: FC = ({ loginCb, errorCb }) => { + const { provider } = useWeb3Context() + + useEffectOnce(() => { + const getSignedNonce = async () => { + try { + const { data } = await api.post<{ + message: string + }>('integrations/kyc-service/v1/public/nonce', { + body: { + data: { + type: 'nonce_request', + attributes: { + address: provider?.address, + }, + }, + }, + }) + + const signedMessage = await provider?.signMessage?.(data.message) + await loginCb({ + address: provider?.address, + signature: signedMessage, + }) + } catch (error) { + ErrorHandler.process(error) + errorCb(error as Error) + } + } + + getSignedNonce() + }) + + return <> +} + +export default KycProviderKleros diff --git a/src/contexts/KycContext/components/index.ts b/src/contexts/KycContext/components/index.ts index c82c5a1..2d06ee3 100644 --- a/src/contexts/KycContext/components/index.ts +++ b/src/contexts/KycContext/components/index.ts @@ -1,4 +1,5 @@ export { default as KycProviderCivic } from './KycProviderCivic/KycProviderCivic' export { default as KycProviderGitCoin } from './KycProviderGitCoin' +export { default as KycProviderKleros } from './KycProviderKleros' export { default as KycProviderUnstoppableDomains } from './KycProviderUnstoppableDomains' export { default as KycProviderWorldCoin } from './KycProviderWorldCoin' diff --git a/src/contexts/ZkpContext/ZkpContext.tsx b/src/contexts/ZkpContext/ZkpContext.tsx index 0973c3b..39b36cb 100644 --- a/src/contexts/ZkpContext/ZkpContext.tsx +++ b/src/contexts/ZkpContext/ZkpContext.tsx @@ -172,7 +172,6 @@ const ZkpContextProvider: FC = ({ children, ...rest }) => { async (_identityIdString?: string) => { const currIdentityIdString = _identityIdString ?? identityIdString - // FIXME: remove const { data } = await issuerApi.get( `/v1/credentials/${currIdentityIdString}/${config.CLAIM_TYPE}`, ) diff --git a/src/enums/icon-names.enum.ts b/src/enums/icon-names.enum.ts index de89550..b2bca3f 100644 --- a/src/enums/icon-names.enum.ts +++ b/src/enums/icon-names.enum.ts @@ -236,6 +236,7 @@ export enum ICON_NAMES { providerGitCoin = 'gitcoin', providerUnstoppable = 'unstoppable', providerWorldCoin = 'worldcoin', + providerKleros = 'kleros', metamask = 'metamask', diff --git a/src/enums/kyc-providers.enum.ts b/src/enums/kyc-providers.enum.ts index 415255d..7542601 100644 --- a/src/enums/kyc-providers.enum.ts +++ b/src/enums/kyc-providers.enum.ts @@ -3,4 +3,5 @@ export enum SUPPORTED_KYC_PROVIDERS { GITCOIN = 'gitcoin_passport', UNSTOPPABLEDOMAINS = 'unstoppable_domains', WORLDCOIN = 'worldcoin', + KLEROS = 'kleros', } diff --git a/src/main.tsx b/src/main.tsx index f2e79c5..b819210 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -38,11 +38,11 @@ try { } if (config.MODE === 'development') { + root.render() +} else { root.render( , ) -} else { - root.render() }