feat: UI tweaks

README.md

@@ -93,4 +93,4 @@ This is a new SDK, integrating v2 of the World ID protocol. If you want to find
 
 <!-- WORLD-ID-SHARED-README-TAG:END -->
 
-[docs]: https://id.worldcoin.org/docs/js
+[docs]: https://docs.worldcoin.org/js

idkit/src/components/AboutWorldID.tsx

@@ -12,12 +12,11 @@ const AboutWorldID: FC<Props> = ({ className }) => {
 		<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>
 			<div className="space-y-3">
-				<FeatureHighlight title="Proving unique-humanness" icon={HumanIcon}>
-					<p>Human is doing an action only once.</p>
-					<p>Stop bots, stop abouse.</p>
+				<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>
 				</FeatureHighlight>
-				<FeatureHighlight title="Completely private" icon={LockIcon}>
-					<p>Using Zero-knowledge proofs so no traceable information is ever public.</p>
+				<FeatureHighlight title="Privacy-preserving" icon={LockIcon}>
+					<p>Maximum privacy. Prevents cross-tracking and can be used fully anonymously.</p>
 				</FeatureHighlight>
 			</div>
 		</div>

idkit/src/components/IDKitWidget/BaseWidget.tsx

@@ -3,10 +3,10 @@ import root from 'react-shadow'
 import { IDKITStage } from '@/types'
 import Styles from '@build/index.css'
 import useMedia from '@/hooks/useMedia'
+import { classNames } from '@/lib/utils'
 import useIDKitStore from '@/store/idkit'
 import { shallow } from 'zustand/shallow'
 import XMarkIcon from '../Icons/XMarkIcon'
-import AboutState from './States/AboutState'
 import ErrorState from './States/ErrorState'
 import { ConfigSource } from '@/types/config'
 import LoadingIcon from '../Icons/LoadingIcon'
@@ -16,12 +16,12 @@ import PrivacyState from './States/PrivacyState'
 import SuccessState from './States/SuccessState'
 import WorldIDState from './States/WorldIDState'
 import * as Dialog from '@radix-ui/react-dialog'
-import { classNames, getCopy } from '@/lib/utils'
 import type { WidgetProps } from '@/types/config'
 import { Fragment, useEffect, useMemo } from 'react'
 import WorldIDWordmark from '../Icons/WorldIDWordmark'
 import { AnimatePresence, motion } from 'framer-motion'
 import ArrowLongLeftIcon from '../Icons/ArrowLongLeftIcon'
+import WorldcoinIcon from '@/components/Icons/WorldcoinIcon'
 import HostAppVerificationState from './States/HostAppVerificationState'
 
 const getParams = ({
@@ -68,7 +68,6 @@ const IDKitWidget: FC<WidgetProps> = ({
 		setStage,
 		canGoBack,
 		setOptions,
-		copy: _copy,
 		theme: _theme,
 	} = useIDKitStore(getParams, shallow)
 	const media = useMedia()
@@ -113,8 +112,6 @@ const IDKitWidget: FC<WidgetProps> = ({
 				return SuccessState
 			case IDKITStage.ERROR:
 				return ErrorState
-			case IDKITStage.ABOUT:
-				return AboutState
 			case IDKITStage.PRIVACY:
 				return PrivacyState
 			case IDKITStage.HOST_APP_VERIFICATION:
@@ -161,7 +158,7 @@ const IDKitWidget: FC<WidgetProps> = ({
 													}}
 													transition={{ layout: { duration: 0.15 } }}
 													className={
-														'dark:bg-0d151d relative z-50 w-full rounded-t-3xl bg-white pt-6 shadow focus:outline-none focus-visible:ring focus-visible:ring-purple-500/75 md:max-w-md md:rounded-b-3xl'
+														'dark:bg-0d151d relative z-50 w-full rounded-t-2xl bg-white pt-6 shadow focus:outline-none focus-visible:ring focus-visible:ring-purple-500/75 md:max-w-md md:rounded-b-2xl'
 													}
 												>
 													<Toast.Provider>
@@ -177,9 +174,11 @@ const IDKitWidget: FC<WidgetProps> = ({
 															>
 																<ArrowLongLeftIcon className="w-4" />
 															</button>
-															<Dialog.Title className="dark:text-d3dfea font-medium text-gray-900">
-																{stage != IDKITStage.ABOUT && getCopy(_copy, 'title')}
-															</Dialog.Title>
+
+															<div className="flex items-center justify-center">
+																<WorldcoinIcon className="text-0d151d h-8 dark:text-white" />
+															</div>
+
 															<Dialog.Close className="dark:bg-d3dfea/15 flex h-8 w-8 items-center justify-center rounded-full bg-gray-100 dark:text-white">
 																<XMarkIcon className="h-5 w-5" />
 															</Dialog.Close>
@@ -208,11 +207,11 @@ const IDKitWidget: FC<WidgetProps> = ({
 																)}
 															</AnimatePresence>
 														</div>
-														<div className="flex items-center justify-between py-3 px-5 md:rounded-b-3xl">
+														<div className="flex items-center justify-between py-3 px-5 md:rounded-b-2xl">
 															<p className="text-9eafc0 flex items-center gap-1 text-sm">
 																<span>Verified with</span>
 																<a
-																	href="https://id.worldcoin.org"
+																	href="https://worldcoin.org/world-id"
 																	target="_blank"
 																	rel="noreferrer"
 																>
@@ -229,8 +228,8 @@ const IDKitWidget: FC<WidgetProps> = ({
 															) : (
 																<a
 																	target="_blank"
-																	href="https://id.worldcoin.org/privacy"
-																	className="text-0d151d dark:text-9eafc0 text-sm"
+																	href="https://docs.worldcoin.org/privacy"
+																	className="text-9eafc0 dark:text-9eafc0 text-sm hover:underline"
 																	rel="noreferrer"
 																>
 																	Learn More &rarr;

idkit/src/components/IDKitWidget/States/PrivacyState.tsx

@@ -3,32 +3,31 @@ import InfoIcon from '@/components/Icons/InfoIcon'
 
 const PrivacyState = () => {
 	return (
-		<div className="-mt-6 flex flex-col items-center justify-center space-y-6">
+		<div className="-mt-6 flex flex-col items-center justify-center space-y-6 font-sans text-sm">
 			<WorldIDIcon className="h-12 w-12" />
-			<p className="text-center text-2xl font-semibold dark:text-white">
-				IDKit and World ID are fully privacy preserving.
-			</p>
-			<ul className="mb-6 list-disc space-y-3 px-4">
-				<li className="text-left dark:text-white">
-					Orb biometrics analyzed by the Orb are not stored. Orb credential is used with Zero-Knowledge Proofs
-					which makes it cryptographically impossible to track persons across applications.
+			<p className="text-center text-2xl font-semibold dark:text-white">Privacy preserving to the core.</p>
+			<ul className="text-9eafc0 mb-6 list-disc space-y-3 px-12 dark:text-white">
+				<li className="text-left">
+					World ID uses Zero-Knowledge Proofs to make it cryptographically impossible to track persons across
+					applications.
 				</li>
-				<li className="text-left dark:text-white">
-					Our code is fully open source or source available on{' '}
+				<li className="text-left">Orb biometrics analyzed by the Orb are not stored.</li>
+				<li className="text-left ">
+					Code and hardware are open source or source available on{' '}
 					<a
 						href="https://github.com/worldcoin/idkit-js"
 						target="_blank"
-						className="text-4940e0 underline"
+						className="text-4940e0"
 						rel="noreferrer"
 					>
 						GitHub
 					</a>
 					.
 				</li>
 			</ul>
-			<div className="-ml-4 flex items-center space-x-3">
-				<InfoIcon className="h-4 w-4 text-white" />
-				<p className="whitespace-nowrap text-sm font-medium text-white">Apps will never see your biometrics.</p>
+			<div className="text-9eafc0 dark:text-9eafc0 -ml-4 flex items-center space-x-3">
+				<InfoIcon className=" h-4 w-4 " />
+				<p className="whitespace-nowrap text-sm font-medium">Biometrics are never shared.</p>
 			</div>
 		</div>
 	)

idkit/src/components/IDKitWidget/States/SuccessState.tsx

@@ -1,13 +1,6 @@
-import { getCopy } from '@/lib/utils'
-import useIDKitStore from '@/store/idkit'
-import type { IDKitStore } from '@/store/idkit'
 import CheckIcon from '@/components/Icons/CheckIcon'
 
-const getStore = (store: IDKitStore) => store.copy
-
 const SuccessState = () => {
-	const copy = useIDKitStore(getStore)
-
 	return (
 		<div className="space-y-6">
 			<div className="-mt-5 flex items-center justify-center">
@@ -20,7 +13,7 @@ const SuccessState = () => {
 			<div>
 				<p className="text-center text-2xl font-semibold text-gray-900 dark:text-white">Success! 🎉</p>
 				{/* eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing */}
-				<p className="text-70868f mt-2 text-center text-lg">{getCopy(copy, 'success')}</p>
+				<p className="text-70868f mt-2 text-center text-lg">World ID verification was successful</p>
 			</div>
 		</div>
 	)

idkit/src/components/IDKitWidget/States/WorldIDState.tsx

@@ -1,5 +1,4 @@
 import { IDKITStage } from '@/types'
-import { getCopy } from '@/lib/utils'
 import useMedia from '@/hooks/useMedia'
 import QRState from './WorldID/QRState'
 import useIDKitStore from '@/store/idkit'
@@ -27,7 +26,6 @@ const WorldIDState = () => {
 	const media = useMedia()
 	const [showQR, setShowQR] = useState<boolean>(false)
 	const {
-		copy,
 		app_id,
 		action,
 		signal,
@@ -60,17 +58,17 @@ const WorldIDState = () => {
 	return (
 		<div className="-mt-6 space-y-6">
 			<div>
-				<p className="text-center text-2xl font-semibold text-gray-900 dark:text-white">
+				<p className="font-sora text-center text-2xl font-semibold text-gray-900 dark:text-white">
 					{/* eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing */}
 					{verificationState === VerificationState.AwaitingVerification
-						? 'Confirm on the Worldcoin app'
-						: getCopy(copy, 'heading')}
-				</p>
-				<p className="text-70868f dark:text-9eafc0 mt-3 text-center md:mt-2">
-					{verificationState === VerificationState.AwaitingVerification
-						? 'Please confirm the request inside the Worldcoin app to continue.'
-						: getCopy(copy, 'subheading')}
+						? 'Confirm in World App'
+						: 'Continue with Worldcoin'}
 				</p>
+				{verificationState === VerificationState.AwaitingVerification && (
+					<p className="text-70868f dark:text-9eafc0 mt-3 text-center md:mt-2">
+						Please confirm the request in your app to continue.
+					</p>
+				)}
 			</div>
 			{verificationState === VerificationState.AwaitingVerification ? (
 				<div className="flex items-center justify-center">
@@ -79,7 +77,9 @@ const WorldIDState = () => {
 			) : (
 				<QRState showQR={showQR} setShowQR={setShowQR} qrData={qrData} />
 			)}
-			{(media == 'desktop' || !showQR) && <AboutWorldID />}
+			{(media == 'desktop' || !showQR) &&
+				(verificationState === VerificationState.AwaitingConnection ||
+					verificationState === VerificationState.LoadingWidget) && <AboutWorldID />}
 		</div>
 	)
 }

idkit/src/components/Icons/LoadingIcon.tsx

@@ -1,42 +1,14 @@
-import { motion } from 'framer-motion'
-import type { Transition } from 'framer-motion'
-
-const animate = { opacity: [1, 0.1, 0.2, 0.4, 0.6, 0.8] }
-const transitionSettings: Transition = { repeat: Infinity, duration: 1, type: 'spring' }
-
 const LoadingIcon = ({ className = '' }: { className?: string }) => (
-	<svg className={className} xmlns="http://www.w3.org/2000/svg" fill="#6345DB" viewBox="0 0 48 48">
-		<motion.path
-			animate={animate}
-			transition={transitionSettings}
-			d="M21.985 17.835a.742.742 0 0 0 .492-.211.768.768 0 0 0 .227-.492c.106-1.73.337-4.651.692-7.72 4.857-.214 8.217 2.033 8.217 2.033-.98-3.45-3.206-12.771-9.196-11.286-5.069 1.339-3.38 14.296-1.047 17.393a.75.75 0 0 0 .615.284Z"
-		/>
-		<motion.path
-			animate={animate}
-			transition={{ ...transitionSettings, delay: 0.15 }}
-			d="M27.946 18.265c.892-3.791 9.724-13.28 13.938-10.113 4.905 3.8-.816 11.432-2.832 14.383 0 0-.403-4.084-3.619-7.788a162.5 162.5 0 0 0-6.326 4.31.748.748 0 0 1-.839-.004.784.784 0 0 1-.323-.788Zm3.6 5.727a.714.714 0 0 0-.404.547.764.764 0 0 0 .097.532.74.74 0 0 0 .422.328c1.632.489 4.387 1.349 7.247 2.365-.844 4.866-3.724 7.73-3.724 7.73 3.523-.235 12.94-.421 12.815-6.704-.183-5.325-12.978-6.45-16.453-4.798Z"
-		/>
-		<motion.path
-			animate={animate}
-			transition={{ ...transitionSettings, delay: 0.35 }}
-			d="M29.386 30.421a.727.727 0 0 0-.834.128.756.756 0 0 0-.174.84c.633 1.602 1.699 4.329 2.697 7.25-4.272 2.355-8.265 1.837-8.265 1.837 2.371 2.658 8.38 10.045 13.122 6.039 3.984-3.46-3.11-14.354-6.546-16.094Z"
-		/>
-		<motion.path
-			animate={animate}
-			transition={{ ...transitionSettings, delay: 0.55 }}
-			d="M23.098 32.706a.739.739 0 0 0-.432-.527.718.718 0 0 0-.533-.027.733.733 0 0 0-.408.35 160.789 160.789 0 0 1-3.897 6.654c-4.464-1.935-6.556-5.443-6.556-5.443-.567 3.547-2.506 12.937 3.532 14.227 5.136 1.016 9.1-11.423 8.294-15.233Z"
-		/>
-		<motion.path
-			animate={animate}
-			transition={{ ...transitionSettings, delay: 0.7 }}
-			d="M17.434 29.113a.778.778 0 0 0-.177-1.108.729.729 0 0 0-.523-.114c-1.68.274-4.531.714-7.546 1.046-1.295-4.769.096-8.609.096-8.609-3.08 1.75-11.5 6.058-8.735 11.657 2.42 4.73 14.447.137 16.885-2.872Z"
-		/>
-		<motion.path
-			animate={animate}
-			transition={{ ...transitionSettings, delay: 0.85 }}
-			d="M16.657 22.361a.709.709 0 0 0 .605-.303.772.772 0 0 0-.096-1.016 145.357 145.357 0 0 1-5.5-5.355c2.86-3.996 6.68-5.276 6.68-5.276-3.264-1.368-11.817-5.404-14.399.303-2.13 4.866 8.88 11.588 12.71 11.647Z"
-		/>
-	</svg>
+	<div className="flex items-center justify-center">
+		<div
+			className={`inline-block h-8 w-8 animate-spin rounded-full border-4 border-solid border-current border-r-transparent align-[-0.125em] motion-reduce:animate-[spin_1.5s_linear_infinite] ${className}`}
+			role="status"
+		>
+			<span className="!absolute !-m-px !h-px !w-px !overflow-hidden !whitespace-nowrap !border-0 !p-0 ![clip:rect(0,0,0,0)]">
+				Loading...
+			</span>
+		</div>
+	</div>
 )
 
 export default LoadingIcon