wip

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

@@ -0,0 +1,47 @@
+import { useState } from 'react'
+import {
+  Box,
+  Button,
+  Text,
+  Spinner,
+} from '@0xsequence/design-system'
+import { PINCodeInput } from './PINCodeInput'
+
+
+export interface WaasCodeInputContentProps {
+  isLoading: boolean
+  onVerify: () => {}
+}
+
+export const WaasCodeInputContent = ({
+  isLoading,
+  onVerify
+}: WaasCodeInputContentProps) => {
+  const [waasEmailPinCode, setWaasEmailPinCode] = useState<string[]>([])
+
+
+  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' }}>
+          {isLoading ? (
+            <Spinner />
+          ) : (
+            <Button
+              variant="primary"
+              disabled={waasEmailPinCode.includes('')}
+              label="Verify"
+              onClick={() => onVerify()}
+              data-id="verifyButton"
+            />
+          )}
+        </Box>
+      </Box>
+    </>
+  )
+}

packages/kit/src/hooks/useWaasRevalidation.ts

@@ -8,7 +8,6 @@ import type { SequenceWaasConnector } from '@0xsequence/kit-connectors'
 
 
 export function useWaasRevalidation(
-  // waasConnector?: any
 ) {
   const { connector } = useAccount()
 
@@ -30,6 +29,9 @@ export function useWaasRevalidation(
 
       sequenceWaas.onValidationRequired(() => {
         console.log('TODO: requires validation!')
+        // Trigger modal + input callback
+
+        // sequenceWaas.finishValidateSession('string')
       })
     }
     setup()