Merge pull request #513 from DFXswiss/develop

[DEV-3475] Basic sumsub video ident setup (#509)
DFXswiss · Jan 6, 2025 · fba623d · fba623d
2 parents ef2b19d + 030dff3
commit fba623d
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 20 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -12,13 +12,14 @@
     "access": "public"
   },
   "dependencies": {
-    "@dfx.swiss/react": "^1.3.0-beta.109",
-    "@dfx.swiss/react-components": "^1.3.0-beta.109",
+    "@dfx.swiss/react": "^1.3.0-beta.110",
+    "@dfx.swiss/react-components": "^1.3.0-beta.110",
     "@ledgerhq/hw-app-btc": "^6.24.1",
     "@ledgerhq/hw-app-eth": "^6.33.7",
     "@ledgerhq/hw-transport-webhid": "^6.27.19",
     "@r2wc/react-to-web-component": "^2.0.2",
-    "@sumsub/websdk-react": "^2.3.4",
+    "@sumsub/websdk": "^2.3.11",
+    "@sumsub/websdk-react": "^2.3.11",
     "@trezor/connect-web": "^9.1.1",
     "@wagmi/connectors": "^5.0.7",
     "@wagmi/core": "^2.10.5",

diff --git a/src/hooks/kyc-helper.hook.ts b/src/hooks/kyc-helper.hook.ts
@@ -52,6 +52,7 @@ export function useKycHelper(): KycHelperInterface {
     [KycStepType.VIDEO]: 'video',
     [KycStepType.MANUAL]: 'manual',
     [KycStepType.SUMSUB_AUTO]: 'auto',
+    [KycStepType.SUMSUB_VIDEO]: 'video',
   };
 
   const legalEntityMap: Record<LegalEntity, string> = {

diff --git a/src/screens/kyc.screen.tsx b/src/screens/kyc.screen.tsx
@@ -63,13 +63,14 @@ import {
   StyledSearchDropdown,
   StyledVerticalStack,
 } from '@dfx.swiss/react-components';
+import snsWebSdk from '@sumsub/websdk';
 import SumsubWebSdk from '@sumsub/websdk-react';
 import { RefObject, useEffect, useRef, useState } from 'react';
 import { isMobile } from 'react-device-detect';
 import { useForm, useWatch } from 'react-hook-form';
 import { useLocation } from 'react-router-dom';
 import { useAppHandlingContext } from 'src/contexts/app-handling.context';
-import { SumsubMessage, SumsubReviewAnswer } from 'src/dto/sumsub.dto';
+import { SumsubReviewAnswer } from 'src/dto/sumsub.dto';
 import { useAppParams } from 'src/hooks/app-params.hook';
 import { ErrorHint } from '../components/error-hint';
 import { Layout } from '../components/layout';
@@ -1138,6 +1139,29 @@ function Ident({ step, lang, onDone, onBack, onError }: EditProps): JSX.Element
     if (message.type === IframeMessageType) isStepDone(message as KycStepBase) ? onDone() : onBack();
   }
 
+  useEffect(() => {
+    if (step.type === KycStepType.SUMSUB_VIDEO && step.session?.url) {
+      launchWebSdk(step.session.url);
+    }
+  }, [step]);
+
+  function launchWebSdk(accessToken: string) {
+    const snsWebSdkInstance = snsWebSdk
+      .init(accessToken, () => {
+        onError('Token expired');
+        return Promise.resolve('');
+      })
+      .withConf({
+        lang: lang.symbol.toLowerCase(),
+      })
+      .withOptions({ addViewportTag: false, adaptIframeHeight: true })
+      .on('idCheck.stepCompleted', (_payload) => setIsDone(true))
+      .on('idCheck.onError', ({ error }) => onError(error))
+      .build();
+
+    snsWebSdkInstance.launch('#sumsub-websdk-container');
+  }
+
   return step.session ? (
     error ? (
       <div>
@@ -1155,15 +1179,20 @@ function Ident({ step, lang, onDone, onBack, onError }: EditProps): JSX.Element
       </div>
     ) : isDone ? (
       <StyledLoadingSpinner size={SpinnerSize.LG} />
+    ) : step.type === KycStepType.SUMSUB_VIDEO ? (
+      <div id="sumsub-websdk-container"></div>
     ) : (
       <>
         {step.session.type === UrlType.TOKEN ? (
           <SumsubWebSdk
             className="w-full h-full max-h-[900px]"
             accessToken={step.session.url}
-            expirationHandler={() => onError('Token expired')}
+            expirationHandler={() => {
+              onError('Token expired');
+              return Promise.resolve('');
+            }}
             config={{ lang: lang.symbol.toLowerCase() }}
-            onMessage={(type: string, payload: SumsubMessage) => {
+            onMessage={(type: string, payload: any) => {
               if (type === 'idCheck.onApplicantStatusChanged') {
                 if (payload?.reviewResult?.reviewAnswer === SumsubReviewAnswer.RED) {
                   setError(payload.reviewResult.moderationComment ?? 'Unknown error');
@@ -1172,7 +1201,7 @@ function Ident({ step, lang, onDone, onBack, onError }: EditProps): JSX.Element
                 }
               }
             }}
-            onError={setError}
+            onError={({ error }) => setError(error)}
           />
         ) : (
           <iframe