feat: standalone improvements and widget mobile compatibility (#272)

* Introduce an is initialized param in standalone mode

* cleanup and mobile improvements

* adds close to standalone

Author: andy-t-wang

examples/with-html/index.html

@@ -53,6 +53,7 @@ <h1 id="heading">idkit-js</h1>
 			})
 
 			document.getElementById('open-idkit').addEventListener('click', async () => {
+				console.log(IDKit.isInitialized)
 				await IDKit.open()
 			})
 		</script>

packages/react/package.json

@@ -78,6 +78,7 @@
 		"@typescript-eslint/eslint-plugin": "^6.21.0",
 		"@typescript-eslint/parser": "^6.21.0",
 		"autoprefixer": "^10.4.19",
+		"clsx": "^2.1.1",
 		"eslint": "8.54.0",
 		"eslint-config-prettier": "^8.10.0",
 		"eslint-plugin-compat": "^4.2.0",

packages/react/src/components/IDKitWidget/BaseWidget.tsx

@@ -97,7 +97,7 @@ const IDKitWidget: FC<WidgetProps> = ({ children, ...config }) => {
 														<Toast.Viewport className="flex justify-center" />
 														<div className="mx-6 mb-12 flex items-center justify-between">
 															<Dialog.Close className="flex items-center justify-center rounded-full dark:text-white">
-																<XMarkIcon className="h-5 w-5" />
+																<XMarkIcon className="size-5" />
 															</Dialog.Close>
 														</div>
 														<div className="relative mx-6 mb-6 flex flex-1 flex-col items-center justify-center">

packages/react/src/components/IDKitWidget/States/WorldID/QRState.tsx

@@ -8,6 +8,7 @@ import { useCallback, useState } from 'react'
 import { AnimatePresence, motion } from 'framer-motion'
 import WorldcoinIcon from '@/components/Icons/WorldcoinIcon'
 import QRPlaceholderIcon from '@/components/Icons/QRPlaceholderIcon'
+import clsx from 'clsx'
 
 type Props = {
 	qrData: string | null
@@ -28,19 +29,19 @@ const QRState: FC<Props> = ({ qrData, showQR, setShowQR }) => {
 
 	return (
 		<>
-			<div className="mb-10 space-y-4 md:hidden">
+			<div className={clsx("md:hidden", {"mb-10 space-y-4": !showQR})}>
 				<motion.a
 					href={qrData ?? ''}
 					whileTap={{ scale: 0.95 }}
 					whileHover={{ scale: 1.05 }}
 					transition={{ layout: { duration: 0.15 } }}
 					layoutId={media == 'desktop' ? undefined : 'worldid-button'}
-					className={classNames(
-						'flex w-full space-x-2 items-center px-4 py-4 border border-transparent font-medium rounded-2xl shadow-sm',
-						'bg-0d151d dark:bg-white text-white dark:text-0d151d'
+					className={clsx(
+						'flex w-full items-center space-x-2 rounded-2xl border border-transparent p-4 font-medium shadow-sm',
+						'bg-0d151d text-white dark:bg-white dark:text-0d151d', {hidden: showQR}
 					)}
 				>
-					<WorldcoinIcon className="h-5 w-5" />
+					<WorldcoinIcon className="size-5" />
 					<motion.span
 						className="flex-1 text-center"
 						transition={{ layout: { duration: 0.15 } }}
@@ -49,8 +50,8 @@ const QRState: FC<Props> = ({ qrData, showQR, setShowQR }) => {
 						{__('Open Worldcoin App')}
 					</motion.span>
 				</motion.a>
-				<div className="space-y-4">
-					<div className="flex items-center space-x-4 ">
+				<div className={clsx("mb-3", {"space-y-4": !showQR})}>
+					<div className={clsx("flex items-center space-x-4 ", {hidden: showQR})}>
 						<hr className="flex-1" />
 						<span className="text-xs font-medium text-9ba3ae">or</span>
 						<hr className="flex-1" />
@@ -114,8 +115,8 @@ const QRState: FC<Props> = ({ qrData, showQR, setShowQR }) => {
 									<Qrcode data={qrData} size={244} />
 								</div>
 							) : (
-								<div className="flex h-[244px] w-[244px] items-center justify-center">
-									<QRPlaceholderIcon className="h-[244px] w-[244px] animate-pulse" />
+								<div className="flex size-[244px] items-center justify-center">
+									<QRPlaceholderIcon className="size-[244px] animate-pulse" />
 								</div>
 							)}
 						</div>

packages/react/src/components/IDKitWidget/States/WorldIDState.tsx

@@ -9,6 +9,7 @@ import { useWorldBridge } from '@/services/wld-bridge'
 import LoadingIcon from '@/components/Icons/LoadingIcon'
 import WorldcoinIcon from '@/components/Icons/WorldcoinIcon'
 import { AppErrorCodes, VerificationState, VerificationLevel } from '@worldcoin/idkit-core'
+import clsx from 'clsx'
 
 const getOptions = (store: IDKitStore) => ({
 	signal: store.signal,
@@ -67,7 +68,7 @@ const WorldIDState = () => {
 	}, [result, handleVerify, verificationState, setStage, errorCode, setErrorState, verification_level])
 
 	return (
-		<div className="-mt-6 space-y-10">
+		<div className={clsx("-mt-6 space-y-5", {"space-y-10": !showQR})}>
 			<div>
 				<div className="mb-4 flex items-center justify-center">
 					<WorldcoinIcon className="h-10 text-0d151d dark:text-white" />
@@ -82,7 +83,7 @@ const WorldIDState = () => {
 			<div className="relative">
 				{verificationState == VerificationState.WaitingForApp && (
 					<div className="absolute inset-0 flex flex-col items-center justify-center space-y-6">
-						<LoadingIcon className="h-6 w-6" />
+						<LoadingIcon className="size-6" />
 						<div>
 							<p className="font-bold text-657080">Verifying</p>
 							<p className="text-sm text-657080">Please continue in app</p>

packages/standalone/src/index.tsx

@@ -54,6 +54,13 @@ const open = () => {
 	})
 }
 
+const close = () => {
+	return new Promise((_, reject) => {
+		if (!isInitialized) return reject(__('IDKitWidget is not initialized'))
+		useIDKitStore.setState({ open: false })
+	})
+}
+
 /**
  * Reset internal state. Useful for unit-testing
  */
@@ -65,7 +72,16 @@ const reset = () => {
 	useIDKitStore.destroy()
 }
 
-const IDKit = { init, update, open, reset }
+const IDKit = {
+	init,
+	update,
+	open,
+	close,
+	reset,
+	get isInitialized() {
+		return isInitialized
+	},
+}
 window.IDKit = IDKit
 
 declare global {