diff --git a/signup-ui/src/pages/EkycVerificationPage/EkycVerificationPage.tsx b/signup-ui/src/pages/EkycVerificationPage/EkycVerificationPage.tsx index 73aee108..5a6adde5 100644 --- a/signup-ui/src/pages/EkycVerificationPage/EkycVerificationPage.tsx +++ b/signup-ui/src/pages/EkycVerificationPage/EkycVerificationPage.tsx @@ -27,6 +27,7 @@ import { setHashCodeSelector, setKycProviderSelector, setKycProvidersListSelector, + setProviderListStatusSelector, stepSelector, useEkycVerificationStore, } from "./useEkycVerificationStore"; @@ -51,6 +52,7 @@ export const EkycVerificationPage = ({ setKycProvider, setKycProviderList, setHashCode, + setProviderListStatus, } = useEkycVerificationStore( useCallback( (state) => ({ @@ -60,6 +62,7 @@ export const EkycVerificationPage = ({ setKycProvider: setKycProviderSelector(state), setKycProviderList: setKycProvidersListSelector(state), setHashCode: setHashCodeSelector(state), + setProviderListStatus: setProviderListStatusSelector(state), }), [] ) @@ -109,6 +112,7 @@ export const EkycVerificationPage = ({ setCriticalError(errors[0]); } else { setKycProviderList(response?.identityVerifiers); + setProviderListStatus(true); if (response?.identityVerifiers.length === 1) { setKycProvider(response?.identityVerifiers[0]); } diff --git a/signup-ui/src/pages/EkycVerificationPage/KycProviderList/KycProviderList.tsx b/signup-ui/src/pages/EkycVerificationPage/KycProviderList/KycProviderList.tsx index 848730cd..d8926d3c 100644 --- a/signup-ui/src/pages/EkycVerificationPage/KycProviderList/KycProviderList.tsx +++ b/signup-ui/src/pages/EkycVerificationPage/KycProviderList/KycProviderList.tsx @@ -15,10 +15,7 @@ import { } from "~components/ui/step"; import { useL2Hash } from "~hooks/useL2Hash"; import langConfigService from "~services/langConfig.service"; -import { - DefaultEkyVerificationProp, - UpdateProcessRequestDto, -} from "~typings/types"; +import { DefaultEkyVerificationProp } from "~typings/types"; import LoadingIndicator from "~/common/LoadingIndicator"; import { @@ -43,24 +40,18 @@ export const KycProviderList = ({ const { state } = useL2Hash(); - const { - setStep, - setKycProvider, - kycProvider, - providerListStore, - hashCode, - } = useEkycVerificationStore( - useCallback( - (state: EkycVerificationStore) => ({ - setStep: setStepSelector(state), - setKycProvider: setKycProviderSelector(state), - kycProvider: kycProviderSelector(state), - providerListStore: kycProvidersListSelector(state), - hashCode: hashCodeSelector(state), - }), - [] - ) - ); + const { setStep, setKycProvider, kycProvider, providerListStore } = + useEkycVerificationStore( + useCallback( + (state: EkycVerificationStore) => ({ + setStep: setStepSelector(state), + setKycProvider: setKycProviderSelector(state), + kycProvider: kycProviderSelector(state), + providerListStore: kycProvidersListSelector(state), + }), + [] + ) + ); const [cancelButton, setCancelButton] = useState(false); const [kycProvidersList, setKycProvidersList] = useState([]); diff --git a/signup-ui/src/pages/EkycVerificationPage/VerificationSteps/VerificationSteps.tsx b/signup-ui/src/pages/EkycVerificationPage/VerificationSteps/VerificationSteps.tsx index e5d59adc..76cb36cc 100644 --- a/signup-ui/src/pages/EkycVerificationPage/VerificationSteps/VerificationSteps.tsx +++ b/signup-ui/src/pages/EkycVerificationPage/VerificationSteps/VerificationSteps.tsx @@ -21,6 +21,7 @@ import { EkycVerificationStore, kycProvidersListSelector, setStepSelector, + providerListStatusSelector, useEkycVerificationStore, } from "../useEkycVerificationStore"; import { checkBrowserCompatible } from "./utils/checkBrowserCompatible"; @@ -34,12 +35,13 @@ export const VerificationSteps = ({ }); const [cancelButton, setCancelButton] = useState(false); const [isLoading, setIsLoading] = useState(true); - const { setStep, providerListStore } = + const { setStep, providerListStore, providerListStatus } = useEkycVerificationStore( useCallback( (state: EkycVerificationStore) => ({ setStep: setStepSelector(state), providerListStore: kycProvidersListSelector(state), + providerListStatus: providerListStatusSelector(state), }), [] ) @@ -120,10 +122,10 @@ export const VerificationSteps = ({ }; useEffect(() => { - if (providerListStore !== null) { + if (providerListStatus) { setIsLoading(false); } - }, [providerListStore]); + }, [providerListStatus]); return ( <> diff --git a/signup-ui/src/pages/EkycVerificationPage/useEkycVerificationStore.tsx b/signup-ui/src/pages/EkycVerificationPage/useEkycVerificationStore.tsx index 264b7056..88202e7d 100644 --- a/signup-ui/src/pages/EkycVerificationPage/useEkycVerificationStore.tsx +++ b/signup-ui/src/pages/EkycVerificationPage/useEkycVerificationStore.tsx @@ -39,6 +39,8 @@ export type EkycVerificationStore = { setErrorBannerMessage: (errorBannerMessage: string | null) => void; slotId: string | null; setSlotId: (slotId: string | null) => void; + providerListStatus: boolean; + setProviderListStatus: (providerListStatus: boolean) => void; }; export const useEkycVerificationStore = create()( @@ -97,6 +99,12 @@ export const useEkycVerificationStore = create()( if (isEqual(current.slotId, slotId)) return; set((state) => ({ slotId })); }, + providerListStatus: false, + setProviderListStatus: (providerListStatus: boolean) => { + const current = get(); + if (isEqual(current.providerListStatus, providerListStatus)) return; + set((state) => ({ providerListStatus })); + }, })) ); @@ -172,3 +180,11 @@ export const slotIdSelector = ( export const setSlotIdSelector = ( state: EkycVerificationStore ): EkycVerificationStore["setSlotId"] => state.setSlotId; + +export const providerListStatusSelector = ( + state: EkycVerificationStore +): EkycVerificationStore["providerListStatus"] => state.providerListStatus; + +export const setProviderListStatusSelector = ( + state: EkycVerificationStore +): EkycVerificationStore["setProviderListStatus"] => state.setProviderListStatus;