feat: minor refactors & v0.0.1 publish (#20)

worldcoin · Dec 19, 2022 · cb6a59e · cb6a59e
1 parent 108a82b
commit cb6a59e
Show file tree

Hide file tree

Showing 19 changed files with 146 additions and 80 deletions.
diff --git a/.gitignore b/.gitignore
@@ -6,3 +6,6 @@ node_modules
 !/.vscode/extensions.json
 /.idea
 /.history
+
+# yarn
+yarn-error.log
diff --git a/cspell.json b/cspell.json
@@ -1,9 +1,9 @@
 {
-  "version": "0.2",
-  "enabled": true,
-  "language": "en-US",
-  "allowCompoundWords": true,
-  "dictionaries": ["typescript", "node", "npm", "html"],
-  "enabledLanguageIds": ["typescript", "typescriptreact", "javascript", "markdown", "yaml", "json"],
-  "words": ["esbuild", "idkit", "IDQR", "iife", "zustand", "dfea", "eafc", "gassless", "nextjs", "TTFB"]
+	"version": "0.2",
+	"enabled": true,
+	"language": "en-US",
+	"allowCompoundWords": true,
+	"dictionaries": ["typescript", "node", "npm", "html"],
+	"enabledLanguageIds": ["typescript", "typescriptreact", "javascript", "markdown", "yaml", "json"],
+	"words": ["dfea", "eafc", "esbuild", "idkit", "IDQR", "iife", "merkle", "NextJS", "TTFB", "zustand"]
 }
diff --git a/example-nextjs/package.json b/example-nextjs/package.json
@@ -18,6 +18,6 @@
 		"react": "18.2.0",
 		"react-dom": "18.2.0",
 		"typescript": "4.9.3",
-		"@worldcoin/idkit": "0.1.0"
+		"@worldcoin/idkit": "^0.0.1"
 	}
 }
diff --git a/example-nextjs/pages/index.tsx b/example-nextjs/pages/index.tsx
@@ -1,8 +1,15 @@
 import Head from "next/head";
-import { IDKitWidget } from "@worldcoin/idkit";
+import { useCallback } from "react";
 import styles from "../styles/Home.module.css";
+import { IDKitWidget, ISuccessResult } from "@worldcoin/idkit";
 
 export default function Home() {
+	const handleProof = useCallback(
+		() => (result: ISuccessResult) => {
+			console.log(result);
+		},
+		[]
+	);
 	return (
 		<div className={styles.container}>
 			<Head>
@@ -12,7 +19,9 @@ export default function Home() {
 			</Head>
 
 			<div style={{ display: "flex", alignItems: "center", justifyContent: "center", minHeight: "100vh" }}>
-				<IDKitWidget />
+				<IDKitWidget actionId="get_this_from_the_dev_portal" onSuccess={handleProof}>
+					{({ open }) => <button onClick={open}>Click me</button>}
+				</IDKitWidget>
 			</div>
 		</div>
 	);

diff --git a/example-react/package.json b/example-react/package.json
@@ -10,7 +10,7 @@
 		"@types/node": "^16.18.3",
 		"@types/react": "^18.0.25",
 		"@types/react-dom": "^18.0.9",
-		"@worldcoin/idkit": "0.1.0",
+		"@worldcoin/idkit": "^0.0.1",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"react-scripts": "5.0.1",

diff --git a/example-react/src/App.tsx b/example-react/src/App.tsx
@@ -1,12 +1,18 @@
-import { IDKitWidget } from "@worldcoin/idkit";
+import { IDKitWidget, ISuccessResult } from "@worldcoin/idkit";
 
 function App() {
+	const handleProof = (result: ISuccessResult) => {
+		console.log(result);
+	};
+
 	return (
 		<div
 			className="App"
 			style={{ minHeight: "100vh", display: "flex", justifyContent: "center", alignItems: "center" }}
 		>
-			<IDKitWidget />
+			<IDKitWidget actionId="get_this_from_the_dev_portal" onSuccess={handleProof}>
+				{({ open }) => <button onClick={open}>Click me</button>}
+			</IDKitWidget>
 		</div>
 	);
 }

diff --git a/idkit/package.json b/idkit/package.json
@@ -1,4 +1,48 @@
 {
+	"name": "@worldcoin/idkit",
+	"description": "The identity SDK. Add sybil resistance to your apps through the World ID protocol.",
+	"type": "module",
+	"types": "./build/index.d.ts",
+	"version": "0.0.1",
+	"private": false,
+	"main": "./build/index.cjs",
+	"module": "./build/index.js",
+	"files": [
+		"build/**",
+		"!build/idkit-js-dev.js"
+	],
+	"keywords": [
+		"identity",
+		"ID",
+		"web3",
+		"proof-of-personhood",
+		"sybil resistance"
+	],
+	"author": "",
+	"license": "MIT",
+	"homepage": "https://github.com/worldcoin/idkit-js",
+	"repository": "github:worldcoin/idkit-js",
+	"scripts": {
+		"build": "npm-run-all clean build:*",
+		"build:css": "npx tailwindcss -i ./src/styles/styles.css -o ./build/index.css --minify",
+		"build:declarations": "tsc && tsc-alias",
+		"build:esm": "node esbuild/production.js -p esm",
+		"build:iife": "node esbuild/production.js -p iife",
+		"clean": "rimraf build/",
+		"dev": "npm-run-all clean dev:styles --parallel dev:*",
+		"dev:bundle": "node esbuild/development.js",
+		"dev:styles": "npx tailwindcss -i ./src/styles/styles.css -o ./build/index.css",
+		"dev:styles-watch": "npx tailwindcss -i ./src/styles/styles.css -o ./build/index.css --watch",
+		"format": "prettier -w ./",
+		"format:check": "prettier --check ./",
+		"lint": "eslint --ext .tsx,.ts,.js,.jsx ./",
+		"lint:fix": "eslint --ext .tsx,.ts,.js,.jsx ./ --fix",
+		"typecheck": "tsc"
+	},
+	"peerDependencies": {
+		"react": ">18.0.0",
+		"react-dom": ">18.0.0"
+	},
 	"dependencies": {
 		"@fontsource/rubik": "^4.5.11",
 		"@headlessui/react": "^1.7.4",
@@ -54,38 +98,5 @@
 		"rimraf": "^3.0.2",
 		"tailwindcss": "^3.2.4",
 		"tsc-alias": "^1.7.1"
-	},
-	"files": [
-		"build/**",
-		"!build/idkit-js-dev.js"
-	],
-	"main": "./build/index.cjs",
-	"module": "./build/index.js",
-	"name": "@worldcoin/idkit",
-	"peerDependencies": {
-		"react": ">18.0.0",
-		"react-dom": ">18.0.0"
-	},
-	"private": true,
-	"scripts": {
-		"build": "npm-run-all clean build:*",
-		"build:css": "npx tailwindcss -i ./src/styles/styles.css -o ./build/index.css --minify",
-		"build:declarations": "tsc && tsc-alias",
-		"build:esm": "node esbuild/production.js -p esm",
-		"build:iife": "node esbuild/production.js -p iife",
-		"clean": "rimraf build/",
-		"dev": "npm-run-all clean dev:styles --parallel dev:*",
-		"dev:bundle": "node esbuild/development.js",
-		"dev:styles": "npx tailwindcss -i ./src/styles/styles.css -o ./build/index.css",
-		"dev:styles-watch": "npx tailwindcss -i ./src/styles/styles.css -o ./build/index.css --watch",
-		"format": "prettier -w ./",
-		"format:check": "prettier --check ./",
-		"lint": "eslint --ext .tsx,.ts,.js,.jsx ./",
-		"lint:fix": "eslint --ext .tsx,.ts,.js,.jsx ./ --fix",
-		"spellcheck": "cspell **/*.{ts,js,tsx,json} -e build/ -e node_modules -e pnpm-lock.yaml -e esbuild/",
-		"typecheck": "tsc"
-	},
-	"type": "module",
-	"types": "./build/index.d.ts",
-	"version": "0.1.0"
+	}
 }
diff --git a/idkit/src/components/IDKitWidget/BaseWidget.tsx b/idkit/src/components/IDKitWidget/BaseWidget.tsx
@@ -3,9 +3,10 @@ import root from 'react-shadow'
 import { IDKITStage } from '@/types'
 import Styles from '@build/index.css'
 import useIDKitStore from '@/store/idkit'
-import type { Config } from '@/types/Config'
+import type { Config } from '@/types/config'
 import ErrorState from './States/ErrorState'
 import AboutState from './States/AboutState'
+import { DEFAULT_COPY } from '@/types/config'
 import LoadingIcon from '../Icons/LoadingIcon'
 import * as Toast from '@radix-ui/react-toast'
 import type { IDKitStore } from '@/store/idkit'
@@ -122,7 +123,8 @@ const IDKitWidget: FC<Props> = ({ children, actionId, onSuccess, autoClose, copy
 															</button>
 														) : null}
 														<Dialog.Title className="dark:text-d3dfea font-medium text-gray-900">
-															{stage != IDKITStage.ABOUT && _copy.title}
+															{stage != IDKITStage.ABOUT &&
+																(_copy?.title || DEFAULT_COPY.title)}
 														</Dialog.Title>
 														<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-4 w-4" />

diff --git a/idkit/src/components/IDKitWidget/States/EnterPhoneState.tsx b/idkit/src/components/IDKitWidget/States/EnterPhoneState.tsx
@@ -1,6 +1,7 @@
 import { motion } from 'framer-motion'
 import { classNames } from '@/lib/utils'
 import useIDKitStore from '@/store/idkit'
+import { DEFAULT_COPY } from '@/types/config'
 import * as Toast from '@radix-ui/react-toast'
 import type { IDKitStore } from '@/store/idkit'
 import { ErrorState, IDKITStage } from '@/types'
@@ -74,8 +75,14 @@ const EnterPhoneState = () => {
 				</motion.div>
 			</Toast.Root>
 			<div>
-				<p className="text-center text-2xl font-semibold text-gray-900 dark:text-white">{copy.heading}</p>
-				<p className="text-70868f mt-3 text-center md:mt-2">{copy.subheading}</p>
+				<p className="text-center text-2xl font-semibold text-gray-900 dark:text-white">
+					{/* eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing */}
+					{copy?.heading || DEFAULT_COPY.heading}
+				</p>
+				<p className="text-70868f mt-3 text-center md:mt-2">
+					{/* eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing */}
+					{copy?.subheading || DEFAULT_COPY.subheading}
+				</p>
 			</div>
 			<div className="mt-2 space-y-2">
 				<PhoneInput disabled={processing} onSubmit={onSubmit} />

diff --git a/idkit/src/components/IDKitWidget/States/SuccessState.tsx b/idkit/src/components/IDKitWidget/States/SuccessState.tsx
@@ -1,4 +1,5 @@
 import useIDKitStore from '@/store/idkit'
+import { DEFAULT_COPY } from '@/types/config'
 import type { IDKitStore } from '@/store/idkit'
 import { CheckIcon } from '@heroicons/react/20/solid'
 
@@ -18,7 +19,8 @@ const SuccessState = () => {
 			</div>
 			<div>
 				<p className="text-center text-2xl font-semibold text-gray-900 dark:text-white">Success! 🎉</p>
-				<p className="text-70868f mt-2 text-center text-lg">{copy.success}</p>
+				{/* eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing */}
+				<p className="text-70868f mt-2 text-center text-lg">{copy?.success || DEFAULT_COPY.success}</p>
 			</div>
 		</div>
 	)

diff --git a/idkit/src/components/IDKitWidget/States/VerifyCodeState.tsx b/idkit/src/components/IDKitWidget/States/VerifyCodeState.tsx
@@ -1,11 +1,12 @@
 import { motion } from 'framer-motion'
 import { useMemo, useRef } from 'react'
 import useIDKitStore from '@/store/idkit'
+import { DEFAULT_COPY } from '@/types/config'
 import type { IDKitStore } from '@/store/idkit'
-import { ErrorState, IDKITStage } from '@/types'
 import WorldIDIcon from '@/components/WorldIDIcon'
 import ResendButton from '@/components/ResendButton'
 import SMSCodeInput from '@/components/SMSCodeInput'
+import { ErrorState, IDKITStage, SignalType } from '@/types'
 import { isVerifyCodeError, verifyCode } from '@/services/phone'
 
 const getParams = ({
@@ -34,7 +35,8 @@ const getParams = ({
 			setErrorState(null)
 			setProcessing(true)
 			// FIXME: Add ph_distinct_id
-			onSuccess(await verifyCode(phoneNumber, code, actionId, ''))
+			const { nullifier_hash, ...proof_payload } = await verifyCode(phoneNumber, code, actionId, '')
+			onSuccess({ signal_type: SignalType.Phone, nullifier_hash, proof_payload })
 		} catch (error) {
 			setProcessing(false)
 			setCode('')
@@ -65,7 +67,8 @@ const VerifyCodeState = () => {
 				<p className="text-center text-2xl font-semibold text-gray-900 dark:text-white">
 					Enter your 6-digit code to complete the verification.
 				</p>
-				<p className="text-70868f mt-2 text-center">{copy.subheading}</p>
+				{/* eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing */}
+				<p className="text-70868f mt-2 text-center">{copy?.subheading || DEFAULT_COPY.subheading}</p>
 			</div>
 			<form className="mt-2 space-y-2">
 				<motion.div animate={animation} transition={{ type: 'spring', stiffness: 30 }}>

diff --git a/idkit/src/hooks/useIDKit.ts b/idkit/src/hooks/useIDKit.ts
@@ -1,5 +1,5 @@
 import useIDKitStore from '@/store/idkit'
-import type { Config } from '@/types/Config'
+import type { Config } from '@/types/config'
 
 const useIDKit = (options: Config) => {
 	const { open, onOpenChange, setOptions } = useIDKitStore()

diff --git a/idkit/src/index.html b/idkit/src/index.html
@@ -41,9 +41,9 @@ <h1 id="heading">idkit-js</h1>
 		<script>
 			IDKit.init({
 				actionId: 'wid_staging_1234',
+				enableTelemetry: true,
 				copy: {
-					title: 'Enable Dispatcher',
-					heading: 'Verify your phone number for free gasless transactions.',
+					heading: 'Verify your phone number to enable a very cool feature.',
 				},
 			})
 

diff --git a/idkit/src/index.ts b/idkit/src/index.ts
@@ -1,7 +1,7 @@
 import useIDKit from './hooks/useIDKit'
-import type { IPhoneSignal } from '@/types'
-import type { Config } from '@/types/Config'
+import type { Config } from '@/types/config'
 import IDKitWidget from '@/components/IDKitWidget'
+import type { ISuccessResult, SignalType, PhoneSignalProof, OrbSignalProof } from '@/types'
 
 export { IDKitWidget, useIDKit }
-export type { IPhoneSignal, Config }
+export type { ISuccessResult, Config, SignalType, PhoneSignalProof, OrbSignalProof }
diff --git a/idkit/src/services/phone.ts b/idkit/src/services/phone.ts
@@ -1,4 +1,4 @@
-import type { IPhoneSignal } from '@/types'
+import type { PhoneSignalProof } from '@/types'
 
 const API_BASE_URL = 'https://developer.worldcoin.org/api/v1'
 
@@ -13,12 +13,17 @@ export async function requestCode(phone_number: string, action_id: string, ph_di
 	if (!res.ok) throw await res.json()
 }
 
+interface VerifyCodeSuccess extends Pick<PhoneSignalProof, 'signature' | 'timestamp'> {
+	success: true
+	nullifier_hash: string
+}
+
 export async function verifyCode(
 	phone_number: string,
 	code: string,
 	action_id: string,
 	ph_distinct_id: string
-): Promise<IPhoneSignal> {
+): Promise<VerifyCodeSuccess> {
 	const res = await post('/phone/verify', {
 		phone_number,
 		code,
@@ -27,10 +32,10 @@ export async function verifyCode(
 	})
 	if (!res.ok) throw await res.json()
 
-	return res.json() as Promise<IPhoneSignal>
+	return res.json() as Promise<VerifyCodeSuccess>
 }
 
-export interface RequestCodeError {
+interface RequestCodeError {
 	code: 'max_attempts' | 'server_error' | 'timeout'
 	details: string
 }

diff --git a/idkit/src/store/idkit.ts b/idkit/src/store/idkit.ts
@@ -1,7 +1,7 @@
 import create from 'zustand'
 import { IDKITStage } from '@/types'
-import type { Config } from '@/types/Config'
-import type { CallbackFn, ErrorState, IPhoneSignal } from '@/types'
+import type { Config } from '@/types/config'
+import type { CallbackFn, ErrorState, ISuccessResult } from '@/types'
 
 export type IDKitStore = {
 	code: string
@@ -22,7 +22,7 @@ export type IDKitStore = {
 	setOptions: (options: Config) => void
 	onOpenChange: (open: boolean) => void
 	setActionId: (actionId: string) => void
-	onSuccess: (result: IPhoneSignal) => void
+	onSuccess: (result: ISuccessResult) => void
 	setProcessing: (processing: boolean) => void
 	addSuccessCallback: (cb: CallbackFn) => void
 	setPhoneNumber: (phoneNumber: string) => void
@@ -39,12 +39,7 @@ const useIDKitStore = create<IDKitStore>()((set, get) => ({
 	processing: false,
 	successCallbacks: [],
 	stage: IDKITStage.ENTER_PHONE,
-	copy: {
-		title: 'Verify Phone',
-		heading: 'Verify your phone number to continue',
-		subheading: "We'll take care of the rest!",
-		success: 'Your phone number is now verified.',
-	},
+	copy: {},
 
 	setOpen: open => set({ open }),
 	setCode: code => set({ code }),
@@ -64,7 +59,7 @@ const useIDKitStore = create<IDKitStore>()((set, get) => ({
 
 		if (onSuccess) get().addSuccessCallback(onSuccess)
 	},
-	onSuccess: (result: IPhoneSignal) => {
+	onSuccess: (result: ISuccessResult) => {
 		get().successCallbacks.map(cb => cb(result))
 		set({ stage: IDKITStage.SUCCESS, processing: false })