Resetable widget when fatal error happens (KYC-874)

.eslintrc.json

@@ -1,47 +1,41 @@
 {
-    "env": {
-        "browser": true,
-        "es2021": true
-    },
-
-    "extends": [
-        "eslint:recommended",
-        "plugin:react/recommended",
-        "plugin:@typescript-eslint/recommended",
-        "plugin:react/jsx-runtime",
-        "prettier",
-        "react-app",
-        "plugin:rxjs/recommended"
-    ],
-    "overrides": [
-        {
-            "files": [
-                "src/**/*.ts",
-                "src/**/*.tsx"
-            ]
-        }
-    ],
-    "parser": "@typescript-eslint/parser",
-    "parserOptions": {
-        "ecmaVersion": "latest",
-        "sourceType": "module",
-        "project": ["./tsconfig.json"]
-    },
-    "plugins": [
-        "react",
-        "@typescript-eslint",
-        "prettier"
-    ],
-    "rules": {
-        "react/react-in-jsx-scope": "off",
-        "@typescript-eslint/no-empty-function": "warn",
-        "prettier/prettier": 1,
-        "react/prop-types": "off"
-    },
-    "settings": {
-        "react": {
-            "version": "18.2.0"
-        }
-    },
-    "ignorePatterns": ["config-overrides.js"]
-}
+	"env": {
+		"browser": true,
+		"es2021": true
+	},
+
+	"extends": [
+		"eslint:recommended",
+		"plugin:react/recommended",
+		"plugin:@typescript-eslint/recommended",
+		"plugin:react/jsx-runtime",
+		"prettier",
+		"react-app",
+		"plugin:rxjs/recommended",
+		"plugin:react-hooks/recommended"
+	],
+	"overrides": [
+		{
+			"files": ["src/**/*.ts", "src/**/*.tsx"]
+		}
+	],
+	"parser": "@typescript-eslint/parser",
+	"parserOptions": {
+		"ecmaVersion": "latest",
+		"sourceType": "module",
+		"project": ["./tsconfig.json"]
+	},
+	"plugins": ["react", "@typescript-eslint", "prettier", "react-hooks"],
+	"rules": {
+		"react/react-in-jsx-scope": "off",
+		"@typescript-eslint/no-empty-function": "warn",
+		"prettier/prettier": 1,
+		"react/prop-types": "off"
+	},
+	"settings": {
+		"react": {
+			"version": "18.2.0"
+		}
+	},
+	"ignorePatterns": ["config-overrides.js"]
+}

.yarnrc.yml

@@ -1,3 +1,3 @@
 nodeLinker: node-modules
 
-enableInlineBuilds: true
+enableInlineBuilds: true

CHANGELOG.md

@@ -10,11 +10,15 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 ### Added
 
 - Celo with metamask on the testpage
+- Fatal error page & restart button
+- Grant flow
 
 ### Changed
 
 ### Fixed
 
+NFT selection page related issues
+
 - If the user cancels a transaction, it still navigates to the success page, just to show an empty page
 
 ## [0.4.2] - 2023-01-31
@@ -32,4 +36,4 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 ### Fixed
 
 - Modal backdrop is not disabling elements
-- Use minting result as the nft image
+- Use minting result as the nft image

package.json

@@ -108,12 +108,12 @@
 		"@testing-library/react": "^13.4.0",
 		"@testing-library/user-event": "^14.4.3",
 		"@types/jest": "^29.4.0",
-		"@types/node": "^18.11.18",
+		"@types/node": "^18.13.0",
 		"@types/react": "^18.0.27",
 		"@types/react-dom": "^18.0.10",
 		"@types/styled-components": "^5.1.26",
-		"@typescript-eslint/eslint-plugin": "^5.50.0",
-		"@typescript-eslint/parser": "^5.50.0",
+		"@typescript-eslint/eslint-plugin": "^5.51.0",
+		"@typescript-eslint/parser": "^5.51.0",
 		"babel-plugin-module-resolver": "^5.0.0",
 		"babel-plugin-transform-remove-imports": "1.7.0",
 		"babel-preset-es2015": "^6.24.1",
@@ -131,9 +131,9 @@
 		"eslint-plugin-react-hooks": "^4.6.0",
 		"eslint-plugin-rxjs": "^5.0.2",
 		"husky": "^8.0.3",
-		"lint-staged": "^13.1.0",
+		"lint-staged": "^13.1.1",
 		"npm-dts-webpack-plugin": "^1.3.12",
-		"prettier": "^2.8.3",
+		"prettier": "^2.8.4",
 		"react": "^18.2.0",
 		"react-app-rewired": "^2.2.1",
 		"react-dom": "^18.2.0",

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()

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>
 	)
 }