Fix build & add Next example

Co-authored-by: 0xPenryn <penryn@pm.me>

examples/with-html/package.json

@@ -9,7 +9,7 @@
 		"lint": "prettier index.html -c"
 	},
 	"dependencies": {
-		"@worldcoin/idkit-standalone": "workspace:^"
+		"@worldcoin/idkit-standalone": "workspace:*"
 	},
 	"devDependencies": {
 		"vite": "^4.4.5"

examples/with-next/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

examples/with-next/.gitignore

@@ -0,0 +1,35 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

examples/with-next/README.md

@@ -0,0 +1,40 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
+
+[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
+
+The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
+
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

examples/with-next/next.config.js

@@ -0,0 +1,6 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+}
+
+module.exports = nextConfig

examples/with-next/package.json

@@ -0,0 +1,25 @@
+{
+	"name": "with-next",
+	"version": "0.1.0",
+	"private": true,
+	"scripts": {
+		"dev": "next dev",
+		"build": "next build",
+		"start": "next start",
+		"lint": "next lint"
+	},
+	"dependencies": {
+		"@worldcoin/idkit-react": "workspace:*",
+		"next": "13.5.5",
+		"react": "^18",
+		"react-dom": "^18"
+	},
+	"devDependencies": {
+		"@types/node": "^20",
+		"@types/react": "^18",
+		"@types/react-dom": "^18",
+		"eslint": "^8",
+		"eslint-config-next": "13.5.5",
+		"typescript": "^5"
+	}
+}

examples/with-next/pages/index.tsx

@@ -0,0 +1,12 @@
+import { IDKitWidget } from '@worldcoin/idkit-react'
+
+export default function Home() {
+	return (
+		<IDKitWidget
+			action="test-action"
+			signal="test_signal"
+			onSuccess={response => console.log(response)}
+			app_id="wid_staging_a8d860d5b3450f05ae09e8f4aa935b90"
+		/>
+	)
+}

examples/with-next/tsconfig.json

@@ -0,0 +1,22 @@
+{
+	"compilerOptions": {
+		"target": "es5",
+		"lib": ["dom", "dom.iterable", "esnext"],
+		"allowJs": true,
+		"skipLibCheck": true,
+		"strict": true,
+		"noEmit": true,
+		"esModuleInterop": true,
+		"module": "esnext",
+		"moduleResolution": "bundler",
+		"resolveJsonModule": true,
+		"isolatedModules": true,
+		"jsx": "preserve",
+		"incremental": true,
+		"paths": {
+			"@/*": ["./*"]
+		}
+	},
+	"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+	"exclude": ["node_modules"]
+}

package.json

@@ -4,7 +4,8 @@
 	"name": "idkit-monorepo",
 	"scripts": {
 		"lint": "turbo run lint",
-		"build": "turbo run build"
+		"build": "turbo run build",
+		"dev": "turbo run dev"
 	},
 	"devDependencies": {
 		"turbo": "^1.10.14"

packages/core/package.json

@@ -21,12 +21,22 @@
 			"types": "./build/lib/hashing.d.ts"
 		}
 	},
-	"types": "./build/index.d.ts",
+	"typesVersions": {
+		"*": {
+			"hashing": [
+				"./build/lib/hashing.d.ts"
+			],
+			"*": [
+				"./build/*/index.d.ts",
+				"./build/index.d.ts"
+			]
+		}
+	},
 	"engines": {
 		"node": ">=12.4"
 	},
 	"files": [
-		"build",
+		"build/**",
 		"README.md"
 	],
 	"scripts": {

packages/core/src/bridge.ts

@@ -1,4 +1,5 @@
 import { create } from 'zustand'
+import { buffer_decode } from './lib/utils'
 import type { IDKitConfig } from '@/types/config'
 import { VerificationState } from '@/types/bridge'
 import type { AppErrorCodes } from '@/types/bridge'
@@ -100,7 +101,9 @@ export const useWorldBridgeStore = create<WorldBridgeStore>((set, get) => ({
 
 		if (!res.ok) return
 
-		const result = JSON.parse(await decryptResponse(key, get().iv!, await res.text())) as
+		const { iv, payload } = (await res.json()) as { iv: string; payload: string }
+
+		const result = JSON.parse(await decryptResponse(key, buffer_decode(iv), payload)) as
 			| ISuccessResult
 			| { error_code: AppErrorCodes }
 

packages/core/src/index.ts

@@ -1,3 +1,11 @@
-export * from '@/types'
-export * as hashing from '@/lib/hashing'
+export {
+	ISuccessResult,
+	IErrorState,
+	AppErrorCodes,
+	VerificationState,
+	AbiEncodedValue,
+	CredentialType,
+	IDKitConfig,
+} from '@/types'
+
 export { useWorldBridgeStore, WorldBridgeStore } from '@/bridge'

packages/core/src/lib/crypto.ts

@@ -16,7 +16,7 @@ export const exportKey = async (key: CryptoKey): Promise<string> => {
 
 export const encryptRequest = async (
 	key: CryptoKey,
-	iv: Uint8Array,
+	iv: ArrayBuffer,
 	request: string
 ): Promise<{ payload: string; iv: string }> => {
 	return {
@@ -27,6 +27,6 @@ export const encryptRequest = async (
 	}
 }
 
-export const decryptResponse = async (key: CryptoKey, iv: Uint8Array, payload: string): Promise<string> => {
+export const decryptResponse = async (key: CryptoKey, iv: ArrayBuffer, payload: string): Promise<string> => {
 	return decoder.decode(await window.crypto.subtle.decrypt({ name: 'AES-GCM', iv }, key, buffer_decode(payload)))
 }

packages/core/src/lib/utils.ts

@@ -1,21 +1,7 @@
 export const buffer_encode = (buffer: ArrayBuffer): string => {
-	let encoded = ''
-
-	const bytes = new Uint8Array(buffer)
-	for (let i = 0; i < bytes.byteLength; i++) {
-		encoded += String.fromCharCode(bytes[i])
-	}
-
-	return Buffer.from(encoded).toString('base64')
+	return Buffer.from(buffer).toString('base64')
 }
 
 export const buffer_decode = (encoded: string): ArrayBuffer => {
-	const byteCharacters = Buffer.from(encoded, 'base64').toString('utf-8')
-
-	const byteNumbers = new Array(byteCharacters.length)
-	for (let i = 0; i < byteCharacters.length; i++) {
-		byteNumbers[i] = byteCharacters.charCodeAt(i)
-	}
-
-	return new Uint8Array(byteNumbers)
+	return Buffer.from(encoded, 'base64')
 }

packages/react/package.json

@@ -21,7 +21,8 @@
 			"types": "./build/internal.d.ts"
 		}
 	},
-	"types": "./build/index.d.ts",
+	"main": "src/index.ts",
+	"types": "src/index.ts",
 	"engines": {
 		"node": ">=12.4"
 	},
@@ -52,7 +53,7 @@
 		"@radix-ui/react-toast": "^1.1.3",
 		"@stitches/react": "^1.2.8",
 		"@tailwindcss/forms": "^0.5.3",
-		"@worldcoin/idkit-core": "workspace:^",
+		"@worldcoin/idkit-core": "workspace:*",
 		"copy-to-clipboard": "^3.3.3",
 		"country-telephone-data": "^0.6.3",
 		"framer-motion": "^7.6.7",

packages/react/src/index.ts

@@ -1,13 +1,11 @@
 import useIDKit from './hooks/useIDKit'
-import { hashing } from '@worldcoin/idkit-core'
 import SignInButton from './components/SignInButton'
 import { CredentialType } from '@worldcoin/idkit-core'
 import IDKitWidget from '@/components/IDKitWidget/index'
 import type { WidgetProps, Config } from '@/types/config'
 import type { ISuccessResult } from '@worldcoin/idkit-core'
+import { solidityEncode } from '@worldcoin/idkit-core/hashing'
 import SignInWithWorldID from './components/SignInWithWorldID'
 
-const solidityEncode = hashing.solidityEncode
-
 export { IDKitWidget, useIDKit, solidityEncode, SignInWithWorldID, CredentialType, SignInButton }
 export type { ISuccessResult, Config, WidgetProps }

packages/react/src/types/config.ts

@@ -1,5 +1,5 @@
-import { CallbackFn } from '.'
-import { ISuccessResult, IDKitConfig } from '@worldcoin/idkit-core'
+import type { CallbackFn } from '.'
+import type { ISuccessResult, IDKitConfig } from '@worldcoin/idkit-core'
 
 export enum ConfigSource {
 	HOOK = 'hook',

packages/standalone/package.json

@@ -11,9 +11,9 @@
 		"url": "git+https://github.com/worldcoin/idkit-js"
 	},
 	"type": "module",
-	"main": "./build/index.global.js",
+	"main": "src/index.tsx",
 	"exports": "./build/index.global.js",
-	"types": "./build/index.d.ts",
+	"types": "src/index.tsx",
 	"engines": {
 		"node": ">=12.4"
 	},