Resetable widget when fatal error happens

Fatal error page with reset button Expose kycdao sdk instance Rework on state management
kycdao · Feb 9, 2023 · 6310e6b · 6310e6b
1 parent a898930
commit 6310e6b
Show file tree

Hide file tree

Showing 23 changed files with 374 additions and 275 deletions.
diff --git a/public/index.html b/public/index.html
@@ -147,6 +147,9 @@
 							: window.ethereum,
 						baseUrl: "https://staging.kycdao.xyz",
 					},
+					onReady: (sdkInstance) => {
+						console.log("🥁 🥁 🥁 The sdk instance is:", sdkInstance)
+					},
 				})
 
 				client.open()

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,23 +1,11 @@
-import { KycDao, SdkConfiguration } from "@kycdao/kycdao-sdk"
-import { FC, StrictMode, useEffect, useMemo, useReducer, useState } from "react"
-
-import { getNetworkType } from "@Utils/getNetworkType"
-
-import { AppContainer } from "./AppContainer"
 import {
-	DataActionTypes,
-	DefaultData,
-	Header,
-	HeaderButtons,
-	KycDaoContext,
-	KycDaoState,
-	ModalRouter,
-	OnClose,
-	reducer,
-	StateContext,
-	StepID,
-} from "@Components/index"
-import { LoadingCard, Router } from "@Pages/index"
+	KycDaoInitializationResult,
+	SdkConfiguration,
+} from "@kycdao/kycdao-sdk"
+import { FC, useCallback, useEffect, useRef, useState } from "react"
+
+import { AppContainer, AppContainerRef } from "./AppContainer"
+import { RestartContext } from "@Components/restartContext"
 
 export type KycDaoModalProps = {
 	width?: number | string
@@ -26,158 +14,28 @@ export type KycDaoModalProps = {
 	iframeOptions?: { messageTargetOrigin: string }
 	isModal: boolean
 	grantFlowEnabled?: boolean
+	onReady?: (kycDaoSdkInstance: KycDaoInitializationResult) => void
 }
 
-export const KycDaoModal: FC<KycDaoModalProps> = ({
-	height = 650,
-	width = 400,
-	config,
-	iframeOptions,
-	isModal,
-	grantFlowEnabled = false,
-}) => {
-	DefaultData.isModal = isModal
-
-	const [data, dispatch] = useReducer(reducer, DefaultData)
-	const [kycDao, setKycDao] = useState<KycDaoState>()
-
+export const KycDaoModal: FC<KycDaoModalProps> = (props) => {
 	useEffect(() => {
-		if (iframeOptions && "virtualKeyboard" in navigator) {
+		if (props.iframeOptions && "virtualKeyboard" in navigator) {
 			navigator.virtualKeyboard.overlaysContent = true
 		}
-	}, [iframeOptions])
+	}, [props.iframeOptions])
 
-	useEffect(() => {
-		KycDao.initialize(config).then((results) => {
-			setKycDao({
-				...results,
-				width,
-				height,
-				grantFlowEnabled,
-			})
-		})
-	}, [config, width, height, grantFlowEnabled])
-
-	useEffect(() => {
-		if (isModal) {
-			const close = OnClose.subscribe(() => {
-				if (data.currentPage === StepID.finalStep) {
-					window.parent.postMessage(
-						{ type: "kycDaoSuccess", data: data.chainExplorerUrl },
-						data.messageTargetOrigin
-					)
-				} else {
-					window.parent.postMessage(
-						{ type: "kycDaoCloseModal" },
-						data.messageTargetOrigin
-					)
-				}
-			})
-			return close.unsubscribe.bind(close)
-		}
-	}, [data, isModal])
-
-	useEffect(() => {
-		if (kycDao) {
-			;(async () => {
-				try {
-					// 2x indul ez a roossz
-					await kycDao.kycDao.connectWallet(
-						getNetworkType(config.enabledBlockchainNetworks[0])
-					)
-					await kycDao.kycDao.registerOrLogin()
-
-					dispatch({
-						type: DataActionTypes.setModalMode,
-						payload: isModal,
-					})
-
-					let startPage
-					if (kycDao.redirectEvent) {
-						switch (kycDao.redirectEvent) {
-							case "NearLogin":
-								startPage = StepID.verificationStep
-								dispatch({
-									type: DataActionTypes.termsAcceptedChange,
-									payload: true,
-								})
-								break
-							case "NearUserRejectedError":
-								startPage = StepID.nftArtSelection
-								dispatch({
-									type: DataActionTypes.termsAcceptedChange,
-									payload: true,
-								})
-								break
-							case "NearMint":
-								startPage = StepID.finalStep
-								if (kycDao.transactionUrl) {
-									dispatch({
-										type: DataActionTypes.setChainExplorerUrl,
-										payload: kycDao.transactionUrl,
-									})
-								}
-						}
-					} else {
-						const { subscribed } = kycDao.kycDao
-
-						startPage = subscribed
-							? StepID.subscribedStartStep
-							: StepID.AgreementStep
-					}
-
-					dispatch({
-						payload: { current: startPage, prev: StepID.loading },
-						type: DataActionTypes.changePage,
-					})
-
-					dispatch({
-						payload:
-							iframeOptions?.messageTargetOrigin || window.location.origin,
-						type: DataActionTypes.setMessageTargetOrigin,
-					})
-					if (!isModal) {
-						dispatch({
-							type: DataActionTypes.SetHeaderButtonState,
-							payload: { button: HeaderButtons.close, state: "hidden" },
-						})
-					}
-				} catch (err) {
-					dispatch({
-						type: DataActionTypes.SetErrorModalText,
-						payload: {
-							header: "An error happened",
-							body: `${err}`,
-						},
-					})
-					dispatch({
-						type: DataActionTypes.setModal,
-						payload: "genericError",
-					})
-					console.error(err)
-				}
-			})()
-		}
-	}, [kycDao, iframeOptions, isModal, config.enabledBlockchainNetworks])
+	const kycDaoSdkInstance = useRef<AppContainerRef>(null)
 
-	const contextData = useMemo(() => ({ data, dispatch }), [data, dispatch])
+	const [key, setKey] = useState(Date.now())
 
-	if (!kycDao) {
-		return <LoadingCard />
-	}
+	const RestartApp = useCallback(() => {
+		setKey(Date.now())
+	}, [])
 
 	return (
-		<StrictMode>
-			<AppContainer>
-				<KycDaoContext.Provider value={kycDao}>
-					<StateContext.Provider value={contextData}>
-						<Header />
-						<Router />
-						<ModalRouter />
-					</StateContext.Provider>
-				</KycDaoContext.Provider>
-			</AppContainer>
-		</StrictMode>
+		<RestartContext.Provider value={RestartApp}>
+			<AppContainer ref={kycDaoSdkInstance} key={key} {...props} />
+		</RestartContext.Provider>
 	)
 }