waasRevalidation onVerify

packages/checkout/src/shared/components/KitCheckoutProvider.tsx

@@ -1,9 +1,9 @@
 import React, { useState, useEffect } from 'react'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
-import { Box, Modal, ThemeProvider } from '@0xsequence/design-system'
+import { Box, Modal, Text, ThemeProvider } from '@0xsequence/design-system'
 import { AnimatePresence } from 'framer-motion'
 
-import { getModalPositionCss, useTheme } from '@0xsequence/kit'
+import { getModalPositionCss, useTheme, WaasCodeInputContent } from '@0xsequence/kit'
 
 import { PendingTransaction, TransactionError, TransactionSuccess, CheckoutSelection } from '../../views'
 import { History, Navigation, NavigationContextProvider, CheckoutModalContextProvider, CheckoutSettings } from '../../contexts'

packages/kit/src/components/KitProvider/ConnectWalletContent/WaasCodeInputContent.tsx

@@ -10,7 +10,7 @@ import { PINCodeInput } from './PINCodeInput'
 
 export interface WaasCodeInputContentProps {
   isLoading: boolean
-  onVerify: () => {}
+  onVerify: (code: string) => void
 }
 
 export const WaasCodeInputContent = ({
@@ -19,7 +19,6 @@ export const WaasCodeInputContent = ({
 }: WaasCodeInputContentProps) => {
   const [waasEmailPinCode, setWaasEmailPinCode] = useState<string[]>([])
 
-
   return (
     <>
       <Box paddingY="6" alignItems="center" justifyContent="center" flexDirection="column">
@@ -36,7 +35,7 @@ export const WaasCodeInputContent = ({
               variant="primary"
               disabled={waasEmailPinCode.includes('')}
               label="Verify"
-              onClick={() => onVerify()}
+              onClick={() => onVerify(waasEmailPinCode.join(''))}
               data-id="verifyButton"
             />
           )}

packages/kit/src/components/KitProvider/ConnectWalletContent/index.tsx

@@ -22,6 +22,7 @@ import { appleAuthHelpers, useScript } from 'react-apple-signin-auth'
 
 import { ExtendedWalletList } from './ExtendedWalletList'
 import { Banner } from './Banner'
+import { WaasCodeInputContent } from './WaasCodeInputContent'
 
 import { KitConfig } from '../../index'
 import { LocalStorageKey, defaultSignInOptions } from '../../../constants'
@@ -31,7 +32,6 @@ import { ExtendedConnector } from '../../../utils/getKitConnectWallets'
 
 import * as styles from '../../styles.css'
 import { useEmailAuth } from '../../../hooks/useWaasEmailAuth'
-import { PINCodeInput } from './PINCodeInput'
 import { getStorageItem } from '../../../utils/storage'
 
 interface ConnectWalletContentProps extends KitConnectProviderProps {
@@ -57,7 +57,6 @@ export const ConnectWalletContent = (props: ConnectWalletContentProps) => {
 
   const [email, setEmail] = useState('')
   const [showEmailWaasPinInput, setShowEmailWaasPinInput] = useState(false)
-  const [waasEmailPinCode, setWaasEmailPinCode] = useState<string[]>([])
   const { connectors: baseConnectors, connect } = useConnect()
 
   // EIP-6963 connectors will not have the _wallet property
@@ -192,28 +191,10 @@ export const ConnectWalletContent = (props: ConnectWalletContentProps) => {
 
   if (showEmailWaasPinInput) {
     return (
-      <>
-        <Box paddingY="6" alignItems="center" justifyContent="center" flexDirection="column">
-          <Text marginTop="5" marginBottom="4" variant="normal" color="text80">
-            Enter code received in email.
-          </Text>
-          <PINCodeInput value={waasEmailPinCode} digits={6} onChange={setWaasEmailPinCode} />
-
-          <Box gap="2" marginY="4" alignItems="center" justifyContent="center" style={{ height: '44px' }}>
-            {emailAuthLoading ? (
-              <Spinner />
-            ) : (
-              <Button
-                variant="primary"
-                disabled={waasEmailPinCode.includes('')}
-                label="Verify"
-                onClick={() => sendChallengeAnswer?.(waasEmailPinCode.join(''))}
-                data-id="verifyButton"
-              />
-            )}
-          </Box>
-        </Box>
-      </>
+      <WaasCodeInputContent
+        isLoading={emailAuthLoading}
+        onVerify={(code) => { sendChallengeAnswer?.(code) }}
+      />
     )
   }
 

packages/kit/src/components/index.ts

@@ -1 +1,2 @@
 export * from './KitProvider'
+export * from './KitProvider/ConnectWalletContent/WaasCodeInputContent'

packages/kit/src/hooks/useWaasRevalidation.ts

@@ -1,18 +1,46 @@
 import { SequenceWaaS } from '@0xsequence/waas'
-import { commons } from '@0xsequence/core'
-import { ethers } from 'ethers'
 import { useState, useEffect } from 'react'
-import { Deferred } from '../utils/deferred'
 import { useAccount } from 'wagmi'
-import type { SequenceWaasConnector } from '@0xsequence/kit-connectors'
 
 
-export function useWaasRevalidation(
-) {
+interface UseWaasRevalidation {
+  openWaasRevalidationModal: boolean,
+  setOpenWaasRevalidationModal: React.Dispatch<React.SetStateAction<boolean>>
+  onVerify: (code: string) => void
+  onVerifyIsLoading: boolean
+  setOnVerifyIsLoading: React.Dispatch<React.SetStateAction<boolean>>
+}
+
+export function useWaasRevalidation(): UseWaasRevalidation {
+  const [openWaasRevalidationModal, setOpenWaasRevalidationModal] = useState(false)
+  const [onVerifyIsLoading, setOnVerifyIsLoading] = useState(false)
   const { connector } = useAccount()
 
   const waasConnector = connector?.type === 'sequence-waas' ? connector : undefined
 
+  const onVerify = async (code: string) => {
+    try {
+      // @ts-ignore-next-line
+      const sequenceWaas: SequenceWaaS = waasConnector.sequenceWaas
+
+      if (!sequenceWaas) {
+        return
+      }
+
+      setOnVerifyIsLoading(true)
+      await sequenceWaas.finishValidateSession(code)
+    } catch(e) {
+      console.error(e)
+    }
+    setOnVerifyIsLoading(false)
+    setOpenWaasRevalidationModal(false)
+  }
+
+  useEffect(() => {
+    if (!openWaasRevalidationModal) {
+      setOnVerifyIsLoading(false)
+    }
+  }, [openWaasRevalidationModal])
 
   useEffect(() => {
     async function setup() {
@@ -28,14 +56,18 @@ export function useWaasRevalidation(
       }
 
       sequenceWaas.onValidationRequired(() => {
-        console.log('TODO: requires validation!')
-        // Trigger modal + input callback
-
-        // sequenceWaas.finishValidateSession('string')
+        console.log('onValidationRequire')
+        setOpenWaasRevalidationModal(true)
       })
     }
     setup()
   }, [waasConnector])
 
-  return 
+  return ({
+    openWaasRevalidationModal,
+    setOpenWaasRevalidationModal,
+    onVerifyIsLoading,
+    setOnVerifyIsLoading,
+    onVerify
+  }) 
 }