From 5c7430001b5372aa3f78c5a67b0d9c502910e06a Mon Sep 17 00:00:00 2001
From: Miguel Piedrafita <github@miguel.build>
Date: Mon, 11 Dec 2023 15:08:47 +0100
Subject: [PATCH 1/2] feat: final tweaks

---
 packages/core/src/bridge.ts                   |  2 +-
 .../react/src/components/AboutWorldID.tsx     | 10 +--
 .../src/components/IDKitWidget/BaseWidget.tsx | 20 ++----
 .../react/src/components/SignInButton.tsx     | 54 ---------------
 .../src/components/SignInWithWorldID.tsx      | 68 -------------------
 packages/react/src/index.ts                   |  6 +-
 packages/react/src/store/idkit.ts             |  4 --
 packages/react/src/types/config.ts            |  2 -
 8 files changed, 12 insertions(+), 154 deletions(-)
 delete mode 100644 packages/react/src/components/SignInButton.tsx
 delete mode 100644 packages/react/src/components/SignInWithWorldID.tsx

diff --git a/packages/core/src/bridge.ts b/packages/core/src/bridge.ts
index 75e97007..9fff2265 100644
--- a/packages/core/src/bridge.ts
+++ b/packages/core/src/bridge.ts
@@ -1,10 +1,10 @@
 import { create } from 'zustand'
 import { VerificationState } from '@/types/bridge'
+import { type IDKitConfig } from '@/types/config'
 import type { ISuccessResult } from '@/types/result'
 import type { CredentialType } from '@/types/config'
 import { encodeAction, generateSignal } from '@/lib/hashing'
 import { AppErrorCodes, ResponseStatus } from '@/types/bridge'
-import { VerificationLevel, type IDKitConfig } from '@/types/config'
 import { decryptResponse, encryptRequest, exportKey, generateKey } from '@/lib/crypto'
 import {
 	DEFAULT_VERIFICATION_LEVEL,
diff --git a/packages/react/src/components/AboutWorldID.tsx b/packages/react/src/components/AboutWorldID.tsx
index 8caca4be..c563a861 100644
--- a/packages/react/src/components/AboutWorldID.tsx
+++ b/packages/react/src/components/AboutWorldID.tsx
@@ -11,7 +11,7 @@ type Props = {
 const AboutWorldID: FC<Props> = ({ className }) => {
 	return (
 		<div className={classNames(className, 'space-y-4 text-left')}>
-			<p className="text-0d151d text-sm font-medium uppercase dark:text-white">{__('What is World ID?')}</p>
+			<p className="text-sm font-medium uppercase text-0d151d dark:text-white">{__('What is World ID?')}</p>
 			<div className="space-y-3">
 				<FeatureHighlight title="Your global digital ID" icon={HumanIcon}>
 					<p>{__('With Worldcoin and World ID sign in seamlessly and prove you are a unique human.')}</p>
@@ -31,12 +31,12 @@ type FeatureHighlightProps = PropsWithChildren<{
 
 const FeatureHighlight: FC<FeatureHighlightProps> = ({ icon: Icon, title, children }) => (
 	<div className="flex space-x-6">
-		<div className="bg-d3dfea/30 dark:bg-29343f flex aspect-square h-8 w-8 items-center justify-center rounded-full">
-			<Icon className="text-0d151d h-3 w-3 dark:text-white" />
+		<div className="flex aspect-square h-8 w-8 items-center justify-center rounded-full bg-d3dfea/30 dark:bg-29343f">
+			<Icon className="h-3 w-3 text-0d151d dark:text-white" />
 		</div>
 		<div>
-			<p className="text-0d151d font-medium dark:text-white">{title}</p>
-			<div className="text-9eafc0 dark:text-9eafc0 mt-[2px] text-sm font-normal">{children}</div>
+			<p className="font-medium text-0d151d dark:text-white">{title}</p>
+			<div className="mt-[2px] text-sm font-normal text-9eafc0 dark:text-9eafc0">{children}</div>
 		</div>
 	</div>
 )
diff --git a/packages/react/src/components/IDKitWidget/BaseWidget.tsx b/packages/react/src/components/IDKitWidget/BaseWidget.tsx
index 61a664e7..77f4865c 100644
--- a/packages/react/src/components/IDKitWidget/BaseWidget.tsx
+++ b/packages/react/src/components/IDKitWidget/BaseWidget.tsx
@@ -23,9 +23,8 @@ import { AnimatePresence, motion } from 'framer-motion'
 import ArrowLongLeftIcon from '../Icons/ArrowLongLeftIcon'
 import HostAppVerificationState from './States/HostAppVerificationState'
 
-const getParams = ({ open, processing, onOpenChange, stage, setStage, theme, computed, setOptions }: IDKitStore) => ({
+const getParams = ({ open, processing, onOpenChange, stage, setStage, computed, setOptions }: IDKitStore) => ({
 	stage,
-	theme,
 	setStage,
 	processing,
 	setOptions,
@@ -35,18 +34,10 @@ const getParams = ({ open, processing, onOpenChange, stage, setStage, theme, com
 })
 
 const IDKitWidget: FC<WidgetProps> = ({ children, ...config }) => {
-	const {
-		isOpen,
-		onOpenChange,
-		processing,
-		stage,
-		setStage,
-		canGoBack,
-		setOptions,
-		theme: _theme,
-	} = useIDKitStore(getParams, shallow)
 	const media = useMedia()
 
+	const { isOpen, onOpenChange, stage, setStage, canGoBack, setOptions } = useIDKitStore(getParams, shallow)
+
 	useEffect(() => {
 		setOptions(config, ConfigSource.PROPS)
 	}, [config, setOptions])
@@ -77,10 +68,7 @@ const IDKitWidget: FC<WidgetProps> = ({ children, ...config }) => {
 						{isOpen && (
 							<root.div mode="open" id="idkit-widget">
 								<Styles />
-								<div
-									id="modal"
-									className={classNames(_theme == 'dark' && 'dark', 'fixed z-10 font-sans')}
-								>
+								<div id="modal" className="fixed z-10 font-sans">
 									<Dialog.Overlay asChild>
 										<motion.div
 											initial={{ opacity: 0 }}
diff --git a/packages/react/src/components/SignInButton.tsx b/packages/react/src/components/SignInButton.tsx
deleted file mode 100644
index 73696df0..00000000
--- a/packages/react/src/components/SignInButton.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import { __ } from '@/lang'
-import { motion } from 'framer-motion'
-import type { MotionProps } from 'framer-motion'
-import WorldcoinIcon from './Icons/WorldcoinIcon'
-import type { ButtonHTMLAttributes, FC } from 'react'
-
-type Props = ButtonHTMLAttributes<HTMLButtonElement> & MotionProps & { theme?: 'dark' | 'light' }
-
-const SignInButton: FC<Props> = ({ style, theme = 'light', ...props }) => (
-	<motion.button
-		whileTap={{ scale: 0.98 }}
-		whileHover={{ scale: 1.02 }}
-		style={{
-			overflow: 'hidden',
-			borderStyle: 'none',
-			display: 'relative',
-			padding: '1.5rem 6rem',
-			borderRadius: '0.75rem',
-			borderColor: 'rgba(255, 255, 255, 0.1)',
-			borderWidth: theme == 'dark' ? '1px' : '0px',
-			...style,
-		}}
-		{...props}
-	>
-		<div
-			style={{
-				zIndex: 10,
-				inset: '1px',
-				display: 'grid',
-				cursor: 'pointer',
-				placeItems: 'center',
-				position: 'absolute',
-				borderRadius: '0.75rem',
-				backgroundColor: theme == 'dark' ? '#000' : '#f2f5f9',
-			}}
-		>
-			<div style={{ display: 'flex', alignItems: 'center' }}>
-				<WorldcoinIcon style={{ height: '1rem', width: '1rem' }} />
-				<span
-					style={{
-						marginLeft: '1rem',
-						fontSize: '0.875rem',
-						lineHeight: '1.25rem',
-						fontFamily: 'Rubik, ui-sans-serif, system-ui, -apple-system, sans-serif',
-					}}
-				>
-					{__('Sign in with World ID')}
-				</span>
-			</div>
-		</div>
-	</motion.button>
-)
-
-export default SignInButton
diff --git a/packages/react/src/components/SignInWithWorldID.tsx b/packages/react/src/components/SignInWithWorldID.tsx
deleted file mode 100644
index 9c77c649..00000000
--- a/packages/react/src/components/SignInWithWorldID.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-import type { FC } from 'react'
-import { useMemo } from 'react'
-import { useState } from 'react'
-import { useCallback } from 'react'
-import IDKitWidget from './IDKitWidget'
-import type { ISuccessResult } from '..'
-import SignInButton from './SignInButton'
-import type { WidgetConfig } from '@/types/config'
-import type { IDKitConfig } from '@worldcoin/idkit-core'
-
-type Props = Omit<WidgetConfig, 'autoClose' | 'handleVerify'> &
-	Pick<IDKitConfig, 'app_id'> & {
-		nonce?: string
-		onSuccess: (jwt: string) => void
-		children?: ({ open }: { open: () => void }) => JSX.Element
-	}
-
-const SignInWithWorldID: FC<Props> = ({ onSuccess, app_id, nonce, theme, children, ...props }) => {
-	const [token, setToken] = useState<string>('')
-	const signal = useMemo<string>(() => {
-		if (nonce) return nonce
-		return Date.now().toString()
-	}, [nonce])
-
-	const handleVerify = useCallback(
-		async (proof: ISuccessResult) => {
-			const response = await fetch('https://developer.worldcoin.org/api/v1/oidc/authorize', {
-				method: 'POST',
-				headers: {
-					'Content-Type': 'application/json',
-				},
-				body: JSON.stringify({ ...proof, app_id, nonce: signal, response_type: 'id_token' }),
-			})
-
-			if (!response.ok) {
-				if (response.status != 400) {
-					throw new Error('Something went wrong when verifying your identity. Please try again.')
-				}
-
-				const error = (await response.json()) as { code: string; message: string }
-				throw new Error(error.message)
-			}
-
-			const { jwt } = (await response.json()) as { jwt: string }
-			setToken(jwt)
-		},
-		[app_id, signal]
-	)
-
-	const onIDKitSuccess = useCallback(() => void onSuccess(token), [onSuccess, token])
-
-	return (
-		<IDKitWidget
-			{...props}
-			action=""
-			autoClose
-			theme={theme}
-			app_id={app_id}
-			signal={signal}
-			onSuccess={onIDKitSuccess}
-			handleVerify={handleVerify}
-		>
-			{children ?? (({ open }) => <SignInButton onClick={open} theme={theme} />)}
-		</IDKitWidget>
-	)
-}
-
-export default SignInWithWorldID
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index fe343a67..c52f9170 100644
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -1,11 +1,9 @@
 import useIDKit from './hooks/useIDKit'
-import SignInButton from './components/SignInButton'
 import IDKitWidget from '@/components/IDKitWidget/index'
 import type { WidgetProps, Config } from '@/types/config'
+import { VerificationLevel } from '@worldcoin/idkit-core'
 import { solidityEncode } from '@worldcoin/idkit-core/hashing'
-import SignInWithWorldID from './components/SignInWithWorldID'
 import type { ISuccessResult, IErrorState } from '@worldcoin/idkit-core'
-import { CredentialType, VerificationLevel } from '@worldcoin/idkit-core'
 
-export { IDKitWidget, useIDKit, solidityEncode, SignInWithWorldID, CredentialType, SignInButton, VerificationLevel }
+export { IDKitWidget, useIDKit, solidityEncode, VerificationLevel }
 export type { ISuccessResult, IErrorState, Config, WidgetProps }
diff --git a/packages/react/src/store/idkit.ts b/packages/react/src/store/idkit.ts
index e9e452e7..e2604a15 100644
--- a/packages/react/src/store/idkit.ts
+++ b/packages/react/src/store/idkit.ts
@@ -26,7 +26,6 @@ export type IDKitStore = {
 	stage: IDKITStage
 	autoClose: boolean
 	processing: boolean
-	theme: Config['theme']
 	result: ISuccessResult | null
 	errorState: IErrorState | null
 	errorCallbacks: Record<ConfigSource, CallbackFn<IErrorState> | undefined> | Record<string, never>
@@ -60,7 +59,6 @@ const useIDKitStore = createWithEqualityFn<IDKitStore>()(
 
 		open: false,
 		result: null,
-		theme: 'light',
 		errorTitle: '',
 		errorDetail: '',
 		autoClose: true,
@@ -116,13 +114,11 @@ const useIDKitStore = createWithEqualityFn<IDKitStore>()(
 				action_description,
 				bridge_url,
 				autoClose,
-				theme,
 				advanced,
 			}: Config,
 			source: ConfigSource
 		) => {
 			set({
-				theme,
 				signal,
 				action,
 				autoClose,
diff --git a/packages/react/src/types/config.ts b/packages/react/src/types/config.ts
index 06f99e90..ce2e7046 100644
--- a/packages/react/src/types/config.ts
+++ b/packages/react/src/types/config.ts
@@ -10,8 +10,6 @@ export enum ConfigSource {
 export type WidgetConfig = {
 	/** Whether to automatically close the widget after a successful verification. Defaults to `false`. */
 	autoClose?: boolean
-	/** The theme to apply to the widget's UI. Defaults to `light`. */
-	theme?: 'dark' | 'light'
 	/** Function to trigger when verification is successful. Should receive a single parameter of type `ISuccessResult` which contains the proof details. */
 	onSuccess: CallbackFn<ISuccessResult>
 	/** Called after the proof is returned from the World App, but before showing the success screen. Throwing in this screen will show the user a custom error. Used to perform additional validation when needed. */

From 8a7e20ddec5b5359422a445a343cc23058e26214 Mon Sep 17 00:00:00 2001
From: Miguel Piedrafita <github@miguel.build>
Date: Mon, 11 Dec 2023 15:18:02 +0100
Subject: [PATCH 2/2] default autoClose to true

---
 packages/core/src/bridge.ts       | 2 +-
 packages/react/src/store/idkit.ts | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/core/src/bridge.ts b/packages/core/src/bridge.ts
index 9fff2265..67a8e59a 100644
--- a/packages/core/src/bridge.ts
+++ b/packages/core/src/bridge.ts
@@ -1,6 +1,6 @@
 import { create } from 'zustand'
-import { VerificationState } from '@/types/bridge'
 import { type IDKitConfig } from '@/types/config'
+import { VerificationState } from '@/types/bridge'
 import type { ISuccessResult } from '@/types/result'
 import type { CredentialType } from '@/types/config'
 import { encodeAction, generateSignal } from '@/lib/hashing'
diff --git a/packages/react/src/store/idkit.ts b/packages/react/src/store/idkit.ts
index e2604a15..2cf2e685 100644
--- a/packages/react/src/store/idkit.ts
+++ b/packages/react/src/store/idkit.ts
@@ -121,9 +121,9 @@ const useIDKitStore = createWithEqualityFn<IDKitStore>()(
 			set({
 				signal,
 				action,
-				autoClose,
 				bridge_url,
 				action_description,
+				autoClose: autoClose ?? true,
 				app_id: advanced?.self_hosted ? SELF_HOSTED_APP_ID : app_id,
 				verification_level: verification_level ?? DEFAULT_VERIFICATION_LEVEL,
 			})