From 7bfd3b5faf2b2a3c6d71206e2ba48b06c9cbf5b8 Mon Sep 17 00:00:00 2001 From: samuelea Date: Wed, 8 May 2024 17:32:44 -0400 Subject: [PATCH] waasRevalidation onVerify --- .../shared/components/KitCheckoutProvider.tsx | 4 +- .../WaasCodeInputContent.tsx | 5 +- .../ConnectWalletContent/index.tsx | 29 +- packages/kit/src/components/index.ts | 1 + packages/kit/src/hooks/useWaasRevalidation.ts | 54 +- pnpm-lock.yaml | 15822 +++++++++------- 6 files changed, 9287 insertions(+), 6628 deletions(-) diff --git a/packages/checkout/src/shared/components/KitCheckoutProvider.tsx b/packages/checkout/src/shared/components/KitCheckoutProvider.tsx index 3a327417..5645573a 100644 --- a/packages/checkout/src/shared/components/KitCheckoutProvider.tsx +++ b/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' diff --git a/packages/kit/src/components/KitProvider/ConnectWalletContent/WaasCodeInputContent.tsx b/packages/kit/src/components/KitProvider/ConnectWalletContent/WaasCodeInputContent.tsx index 8621d8de..ac1e2d20 100644 --- a/packages/kit/src/components/KitProvider/ConnectWalletContent/WaasCodeInputContent.tsx +++ b/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([]) - return ( <> @@ -36,7 +35,7 @@ export const WaasCodeInputContent = ({ variant="primary" disabled={waasEmailPinCode.includes('')} label="Verify" - onClick={() => onVerify()} + onClick={() => onVerify(waasEmailPinCode.join(''))} data-id="verifyButton" /> )} diff --git a/packages/kit/src/components/KitProvider/ConnectWalletContent/index.tsx b/packages/kit/src/components/KitProvider/ConnectWalletContent/index.tsx index 259beb07..1967d75c 100644 --- a/packages/kit/src/components/KitProvider/ConnectWalletContent/index.tsx +++ b/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([]) 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 ( - <> - - - Enter code received in email. - - - - - {emailAuthLoading ? ( - - ) : ( -