add useTeller hook

libs/client/shared/src/hooks/index.ts

@@ -9,5 +9,6 @@ export * from './useQueryParam'
 export * from './useScreenSize'
 export * from './useAccountNotifications'
 export * from './usePlaid'
+export * from './useTeller'
 export * from './useProviderStatus'
 export * from './useModalManager'

libs/client/shared/src/hooks/useTeller.ts

@@ -0,0 +1,71 @@
+import { useState } from 'react'
+import toast from 'react-hot-toast'
+import * as Sentry from '@sentry/react'
+import { useTellerConnect } from 'teller-connect-react'
+import { useAccountContext, useUserAccountContext } from '../providers'
+import { useLogger } from './useLogger'
+
+type TellerFailure = {
+    type: 'payee' | 'payment'
+    code: 'timeout' | 'error'
+    message: string
+}
+
+export function useTeller() {
+    const logger = useLogger()
+
+    const [institutionId, setInstitutionId] = useState<string | null>(null)
+
+    const { setExpectingAccounts } = useUserAccountContext()
+    const { setAccountManager } = useAccountContext()
+
+    const tellerConfig = {
+        applicationId: process.env.NEXT_PUBLIC_TELLER_APP_ID,
+        institution: institutionId,
+        environment: process.env.NEXT_PUBLIC_TELLER_ENV,
+        selectAccount: 'disabled',
+        onInit: () => {
+            toast.dismiss(toastId)
+            logger.debug(`Teller Connect has initialized`)
+        },
+        onSuccess: (enrollment) => {
+            logger.debug(`User enrolled successfully`, enrollment)
+            console.log(enrollment)
+            setExpectingAccounts(true)
+        },
+        onExit: () => {
+            logger.debug(`Teller Connect exited`)
+        },
+        onFailure: (failure: TellerFailure) => {
+            logger.error(`Teller Connect exited with error`, failure)
+            Sentry.captureEvent({
+                level: 'error',
+                message: 'TELLER_CONNECT_ERROR',
+                tags: {
+                    'teller.error.code': failure.code,
+                    'teller.error.message': failure.message,
+                },
+            })
+        },
+    }
+
+    const { open, ready } = useTellerConnect(tellerConfig)
+
+    useEffect(() => {
+        if (ready) {
+            open()
+
+            if (selectAccount === 'disabled') {
+                setAccountManager({ view: 'idle' })
+            }
+        }
+    }, [ready, open, setAccountManager])
+
+    return {
+        openTeller: async (institutionId: string) => {
+            toast('Initializing Teller...', { duration: 2_000 })
+            setInstitutionId(institutionId)
+        },
+        ready,
+    }
+}

package.json

@@ -153,6 +153,7 @@
         "stripe": "^10.17.0",
         "superjson": "^1.11.0",
         "tailwindcss": "3.2.4",
+        "teller-connect-react": "^0.1.0",
         "tslib": "^2.3.0",
         "uuid": "^9.0.0",
         "winston": "^3.8.2",

yarn.lock

@@ -16600,6 +16600,11 @@ react-script-hook@^1.6.0:
   resolved "https://registry.yarnpkg.com/react-script-hook/-/react-script-hook-1.6.0.tgz#6a44ff5e65113cb29252eadad1b8306f5fe0c626"
   integrity sha512-aJm72XGWV+wJTKiqHmAaTNC/JQZV/Drv6A1kd1VQlzhzAXLqtBRBeTt3iTESImGe5TaBDHUOUeaGNw4v+7bqDw==
 
+react-script-hook@^1.7.2:
+  version "1.7.2"
+  resolved "https://registry.yarnpkg.com/react-script-hook/-/react-script-hook-1.7.2.tgz#ec130d67f9a25fcde57fbfd1faa87e5b97521948"
+  integrity sha512-fhyCEfXb94fag34UPRF0zry1XGwmVY+79iibWwTqAoOiCzYJQOYTiWJ7CnqglA9tMSV8g45cQpHCMcBwr7dwhA==
+
 react-shallow-renderer@^16.15.0:
   version "16.15.0"
   resolved "https://registry.yarnpkg.com/react-shallow-renderer/-/react-shallow-renderer-16.15.0.tgz#48fb2cf9b23d23cde96708fe5273a7d3446f4457"
@@ -18532,6 +18537,13 @@ telejson@^6.0.8:
     lodash "^4.17.21"
     memoizerific "^1.11.3"
 
+teller-connect-react@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/teller-connect-react/-/teller-connect-react-0.1.0.tgz#b3bae24f4410d622eb8c88c7668adb003eb7bfd7"
+  integrity sha512-ZI+OULCsuo/v1qetpjepOgM7TyIzwnMVE/54IruOPguQtJ/Ui3C1ax3wUb65AKZDyVQ7ZyjA+8ypT/yMYD9bIQ==
+  dependencies:
+    react-script-hook "^1.7.2"
+
 terminal-link@^2.0.0:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/terminal-link/-/terminal-link-2.1.1.tgz#14a64a27ab3c0df933ea546fba55f2d078edc994"