@worldcoin/idkit
Version:
The identity SDK. Privacy-preserving identity and proof of personhood with World ID.
1,611 lines (1,574 loc) • 91 kB
JavaScript
"use strict";
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/index.ts
var src_exports = {};
__export(src_exports, {
IDKitWidget: () => IDKitWidget_default,
VerificationLevel: () => import_idkit_core7.VerificationLevel,
VerificationState: () => import_idkit_core7.VerificationState,
solidityEncode: () => import_hashing.solidityEncode,
useIDKit: () => useIDKit_default,
useSession: () => useSession,
verifyCloudProof: () => import_backend.verifyCloudProof
});
module.exports = __toCommonJS(src_exports);
// src/hooks/useIDKit.ts
var import_react = require("react");
// src/lang/index.ts
var translations = {};
var getLang = () => {
if (!navigator?.languages) return;
const supportedLang = navigator.languages.find((l) => translations[l] != void 0) ?? "";
return translations[supportedLang];
};
var replaceParams = (str, params) => {
let replaced = str;
for (const [key, value] of Object.entries(params ?? {})) replaced = str.replace(`:${key}`, value);
return replaced;
};
function __(str, params) {
if (typeof navigator === "undefined") return str;
return replaceParams(getLang()?.[str] ?? str, params);
}
// src/store/idkit.ts
var import_shallow = require("zustand/shallow");
var import_traditional = require("zustand/traditional");
var import_idkit_core = require("@worldcoin/idkit-core");
var SELF_HOSTED_APP_ID = "self_hosted";
var useIDKitStore = (0, import_traditional.createWithEqualityFn)()(
(set, get) => ({
app_id: "",
signal: "",
action: "",
action_description: "",
bridge_url: "",
verification_level: import_idkit_core.DEFAULT_VERIFICATION_LEVEL,
partner: false,
open: false,
result: null,
errorTitle: "",
errorDetail: "",
autoClose: true,
errorState: null,
processing: false,
errorCallbacks: {},
verifyCallbacks: {},
successCallbacks: {},
stage: "WORLD_ID" /* WORLD_ID */,
setStage: (stage) => set({ stage }),
setErrorState: (errorState) => set({ errorState }),
setProcessing: (processing) => set({ processing }),
retryFlow: () => {
set({ stage: "WORLD_ID" /* WORLD_ID */, errorState: null });
},
addErrorCallback: (cb, source) => {
set((state) => {
state.errorCallbacks[source] = cb;
return state;
});
},
addSuccessCallback: (cb, source) => {
set((state) => {
state.successCallbacks[source] = cb;
return state;
});
},
addVerificationCallback: (cb, source) => {
set((state) => {
state.verifyCallbacks[source] = cb;
return state;
});
},
setOptions: ({
handleVerify,
onSuccess,
signal,
action,
app_id,
partner,
onError,
verification_level,
action_description,
bridge_url,
autoClose,
advanced
}, source) => {
set({
signal,
action,
bridge_url,
action_description,
autoClose: autoClose ?? true,
app_id: advanced?.self_hosted ? SELF_HOSTED_APP_ID : app_id,
verification_level: verification_level ?? import_idkit_core.DEFAULT_VERIFICATION_LEVEL,
partner
});
get().addSuccessCallback(onSuccess, source);
if (onError) get().addErrorCallback(onError, source);
if (handleVerify) get().addVerificationCallback(handleVerify, source);
},
handleVerify: (result) => {
set({ stage: "HOST_APP_VERIFICATION" /* HOST_APP_VERIFICATION */, processing: false });
Promise.all(Object.values(get().verifyCallbacks).map(async (cb) => cb?.(result))).then(
() => {
set({ stage: "SUCCESS" /* SUCCESS */, result });
if (get().autoClose) setTimeout(() => get().onOpenChange(false), 2500);
},
(response) => {
let errorMessage = void 0;
if (response && typeof response === "object" && response.message) {
errorMessage = response.message;
}
set({
stage: "ERROR" /* ERROR */,
errorState: {
code: import_idkit_core.AppErrorCodes.FailedByHostApp,
message: errorMessage ? __(errorMessage) : void 0
}
});
}
);
},
onOpenChange: (open) => {
if (open) {
return set({ open });
}
const errorState = get().errorState;
if (get().stage === "ERROR" /* ERROR */ && errorState) {
const callbacks = get().errorCallbacks;
requestAnimationFrame(() => Object.values(callbacks).forEach((cb) => void cb?.(errorState)));
}
const result = get().result;
if (get().stage == "SUCCESS" /* SUCCESS */ && result) {
const callbacks = get().successCallbacks;
requestAnimationFrame(() => Object.values(callbacks).forEach((cb) => void cb?.(result)));
}
set({
open,
result: null,
errorState: null,
processing: false,
stage: "WORLD_ID" /* WORLD_ID */
});
}
}),
import_shallow.shallow
);
var idkit_default = useIDKitStore;
// src/hooks/useIDKit.ts
var getStore = ({ open, onOpenChange, addSuccessCallback, addVerificationCallback }) => ({
open,
onOpenChange,
addSuccessCallback,
addVerificationCallback
});
var useIDKit = ({ handleVerify, onSuccess } = {}) => {
const { open, onOpenChange, addSuccessCallback, addVerificationCallback } = idkit_default(getStore);
(0, import_react.useEffect)(() => {
if (onSuccess) addSuccessCallback(onSuccess, "hook" /* HOOK */);
if (handleVerify) addVerificationCallback(handleVerify, "hook" /* HOOK */);
}, [handleVerify, onSuccess]);
return { open, setOpen: onOpenChange };
};
var useIDKit_default = useIDKit;
// src/components/IDKitWidget/index.tsx
var import_react9 = require("react");
// src/hooks/useMedia.ts
var import_react2 = require("react");
var useMedia = () => {
const getInitialState = () => {
if (typeof window !== "undefined") {
return window.matchMedia("(max-width: 768px)").matches ? "mobile" : "desktop";
}
return "desktop";
};
const [media, setMedia] = (0, import_react2.useState)(getInitialState());
(0, import_react2.useEffect)(() => {
const mql = window.matchMedia("(max-width: 768px)");
const handleChange = (mql2) => setMedia(mql2.matches ? "mobile" : "desktop");
handleChange(mql);
mql.addEventListener("change", handleChange);
return () => {
mql.removeEventListener("change", handleChange);
};
}, []);
return media;
};
var useMedia_default = useMedia;
// src/components/IDKitWidget/BaseWidget.tsx
var import_react_dom2 = require("react-dom");
// src/styles/styles.css
var styles_default = `/* TODO: Use an alternative to avoid the extra request to Google (e.g. hosting ourselves, or local file) */
@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;600;700&family=Sora:wght@600&display=swap');
/* ! tailwindcss v3.4.4 | MIT License | https://tailwindcss.com */
/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/
*,
::before,
::after {
box-sizing: border-box; /* 1 */
border-width: 0; /* 2 */
border-style: solid; /* 2 */
border-color: #e5e7eb; /* 2 */
}
::before,
::after {
--tw-content: '';
}
/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured \`sans\` font-family by default.
5. Use the user's configured \`sans\` font-feature-settings by default.
6. Use the user's configured \`sans\` font-variation-settings by default.
7. Disable tap highlights on iOS
*/
html,
:host {
line-height: 1.5; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */
-moz-tab-size: 4; /* 3 */
-o-tab-size: 4;
tab-size: 4; /* 3 */
font-family: Rubik, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
font-feature-settings: normal; /* 5 */
font-variation-settings: normal; /* 6 */
-webkit-tap-highlight-color: transparent; /* 7 */
}
/*
1. Remove the margin in all browsers.
2. Inherit line-height from \`html\` so users can set them as a class directly on the \`html\` element.
*/
body {
margin: 0; /* 1 */
line-height: inherit; /* 2 */
}
/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/
hr {
height: 0; /* 1 */
color: inherit; /* 2 */
border-top-width: 1px; /* 3 */
}
/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/
abbr:where([title]) {
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted;
}
/*
Remove the default font size and weight for headings.
*/
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: inherit;
font-weight: inherit;
}
/*
Reset links to optimize for opt-in styling instead of opt-out.
*/
a {
color: inherit;
text-decoration: inherit;
}
/*
Add the correct font weight in Edge and Safari.
*/
b,
strong {
font-weight: bolder;
}
/*
1. Use the user's configured \`mono\` font-family by default.
2. Use the user's configured \`mono\` font-feature-settings by default.
3. Use the user's configured \`mono\` font-variation-settings by default.
4. Correct the odd \`em\` font sizing in all browsers.
*/
code,
kbd,
samp,
pre {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
font-feature-settings: normal; /* 2 */
font-variation-settings: normal; /* 3 */
font-size: 1em; /* 4 */
}
/*
Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
/*
Prevent \`sub\` and \`sup\` elements from affecting the line height in all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/
table {
text-indent: 0; /* 1 */
border-color: inherit; /* 2 */
border-collapse: collapse; /* 3 */
}
/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/
button,
input,
optgroup,
select,
textarea {
font-family: inherit; /* 1 */
font-feature-settings: inherit; /* 1 */
font-variation-settings: inherit; /* 1 */
font-size: 100%; /* 1 */
font-weight: inherit; /* 1 */
line-height: inherit; /* 1 */
letter-spacing: inherit; /* 1 */
color: inherit; /* 1 */
margin: 0; /* 2 */
padding: 0; /* 3 */
}
/*
Remove the inheritance of text transform in Edge and Firefox.
*/
button,
select {
text-transform: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/
button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
-webkit-appearance: button; /* 1 */
background-color: transparent; /* 2 */
background-image: none; /* 2 */
}
/*
Use the modern Firefox focus style for all focusable elements.
*/
:-moz-focusring {
outline: auto;
}
/*
Remove the additional \`:invalid\` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/
:-moz-ui-invalid {
box-shadow: none;
}
/*
Add the correct vertical alignment in Chrome and Firefox.
*/
progress {
vertical-align: baseline;
}
/*
Correct the cursor style of increment and decrement buttons in Safari.
*/
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
height: auto;
}
/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/
[type='search'] {
-webkit-appearance: textfield; /* 1 */
outline-offset: -2px; /* 2 */
}
/*
Remove the inner padding in Chrome and Safari on macOS.
*/
::-webkit-search-decoration {
-webkit-appearance: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to \`inherit\` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button; /* 1 */
font: inherit; /* 2 */
}
/*
Add the correct display in Chrome and Safari.
*/
summary {
display: list-item;
}
/*
Removes the default spacing and border for appropriate elements.
*/
blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
margin: 0;
}
fieldset {
margin: 0;
padding: 0;
}
legend {
padding: 0;
}
ol,
ul,
menu {
list-style: none;
margin: 0;
padding: 0;
}
/*
Reset default styling for dialogs.
*/
dialog {
padding: 0;
}
/*
Prevent resizing textareas horizontally by default.
*/
textarea {
resize: vertical;
}
/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/
input::-moz-placeholder, textarea::-moz-placeholder {
opacity: 1; /* 1 */
color: #9ca3af; /* 2 */
}
input::placeholder,
textarea::placeholder {
opacity: 1; /* 1 */
color: #9ca3af; /* 2 */
}
/*
Set the default cursor for buttons.
*/
button,
[role="button"] {
cursor: pointer;
}
/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
cursor: default;
}
/*
1. Make replaced elements \`display: block\` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add \`vertical-align: middle\` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
This can trigger a poorly considered lint error in some tools but is included by design.
*/
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
display: block; /* 1 */
vertical-align: middle; /* 2 */
}
/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/
img,
video {
max-width: 100%;
height: auto;
}
/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden] {
display: none;
}
[type='text'],input:where(:not([type])),[type='email'],[type='url'],[type='password'],[type='number'],[type='date'],[type='datetime-local'],[type='month'],[type='search'],[type='tel'],[type='time'],[type='week'],[multiple],textarea,select{
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: #fff;
border-color: #6b7280;
border-width: 1px;
border-radius: 0px;
padding-top: 0.5rem;
padding-right: 0.75rem;
padding-bottom: 0.5rem;
padding-left: 0.75rem;
font-size: 1rem;
line-height: 1.5rem;
--tw-shadow: 0 0 #0000;
}
[type='text']:focus, input:where(:not([type])):focus, [type='email']:focus, [type='url']:focus, [type='password']:focus, [type='number']:focus, [type='date']:focus, [type='datetime-local']:focus, [type='month']:focus, [type='search']:focus, [type='tel']:focus, [type='time']:focus, [type='week']:focus, [multiple]:focus, textarea:focus, select:focus{
outline: 2px solid transparent;
outline-offset: 2px;
--tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: #2563eb;
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
border-color: #2563eb;
}
input::-moz-placeholder, textarea::-moz-placeholder{
color: #6b7280;
opacity: 1;
}
input::placeholder,textarea::placeholder{
color: #6b7280;
opacity: 1;
}
::-webkit-datetime-edit-fields-wrapper{
padding: 0;
}
::-webkit-date-and-time-value{
min-height: 1.5em;
text-align: inherit;
}
::-webkit-datetime-edit{
display: inline-flex;
}
::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field{
padding-top: 0;
padding-bottom: 0;
}
select{
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
background-position: right 0.5rem center;
background-repeat: no-repeat;
background-size: 1.5em 1.5em;
padding-right: 2.5rem;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
[multiple],[size]:where(select:not([size="1"])){
background-image: initial;
background-position: initial;
background-repeat: unset;
background-size: initial;
padding-right: 0.75rem;
-webkit-print-color-adjust: unset;
print-color-adjust: unset;
}
[type='checkbox'],[type='radio']{
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
padding: 0;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
display: inline-block;
vertical-align: middle;
background-origin: border-box;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
flex-shrink: 0;
height: 1rem;
width: 1rem;
color: #2563eb;
background-color: #fff;
border-color: #6b7280;
border-width: 1px;
--tw-shadow: 0 0 #0000;
}
[type='checkbox']{
border-radius: 0px;
}
[type='radio']{
border-radius: 100%;
}
[type='checkbox']:focus,[type='radio']:focus{
outline: 2px solid transparent;
outline-offset: 2px;
--tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
--tw-ring-offset-width: 2px;
--tw-ring-offset-color: #fff;
--tw-ring-color: #2563eb;
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
[type='checkbox']:checked,[type='radio']:checked{
border-color: transparent;
background-color: currentColor;
background-size: 100% 100%;
background-position: center;
background-repeat: no-repeat;
}
[type='checkbox']:checked{
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
}
@media (forced-colors: active) {
[type='checkbox']:checked{
-webkit-appearance: auto;
-moz-appearance: auto;
appearance: auto;
}
}
[type='radio']:checked{
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
}
@media (forced-colors: active) {
[type='radio']:checked{
-webkit-appearance: auto;
-moz-appearance: auto;
appearance: auto;
}
}
[type='checkbox']:checked:hover,[type='checkbox']:checked:focus,[type='radio']:checked:hover,[type='radio']:checked:focus{
border-color: transparent;
background-color: currentColor;
}
[type='checkbox']:indeterminate{
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");
border-color: transparent;
background-color: currentColor;
background-size: 100% 100%;
background-position: center;
background-repeat: no-repeat;
}
@media (forced-colors: active) {
[type='checkbox']:indeterminate{
-webkit-appearance: auto;
-moz-appearance: auto;
appearance: auto;
}
}
[type='checkbox']:indeterminate:hover,[type='checkbox']:indeterminate:focus{
border-color: transparent;
background-color: currentColor;
}
[type='file']{
background: unset;
border-color: inherit;
border-width: 0;
border-radius: 0;
padding: 0;
font-size: unset;
line-height: inherit;
}
[type='file']:focus{
outline: 1px solid ButtonText;
outline: 1px auto -webkit-focus-ring-color;
}
*, ::before, ::after{
--tw-border-spacing-x: 0;
--tw-border-spacing-y: 0;
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-pan-x: ;
--tw-pan-y: ;
--tw-pinch-zoom: ;
--tw-scroll-snap-strictness: proximity;
--tw-gradient-from-position: ;
--tw-gradient-via-position: ;
--tw-gradient-to-position: ;
--tw-ordinal: ;
--tw-slashed-zero: ;
--tw-numeric-figure: ;
--tw-numeric-spacing: ;
--tw-numeric-fraction: ;
--tw-ring-inset: ;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgb(59 130 246 / 0.5);
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
--tw-blur: ;
--tw-brightness: ;
--tw-contrast: ;
--tw-grayscale: ;
--tw-hue-rotate: ;
--tw-invert: ;
--tw-saturate: ;
--tw-sepia: ;
--tw-drop-shadow: ;
--tw-backdrop-blur: ;
--tw-backdrop-brightness: ;
--tw-backdrop-contrast: ;
--tw-backdrop-grayscale: ;
--tw-backdrop-hue-rotate: ;
--tw-backdrop-invert: ;
--tw-backdrop-opacity: ;
--tw-backdrop-saturate: ;
--tw-backdrop-sepia: ;
--tw-contain-size: ;
--tw-contain-layout: ;
--tw-contain-paint: ;
--tw-contain-style: ;
}
::backdrop{
--tw-border-spacing-x: 0;
--tw-border-spacing-y: 0;
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-pan-x: ;
--tw-pan-y: ;
--tw-pinch-zoom: ;
--tw-scroll-snap-strictness: proximity;
--tw-gradient-from-position: ;
--tw-gradient-via-position: ;
--tw-gradient-to-position: ;
--tw-ordinal: ;
--tw-slashed-zero: ;
--tw-numeric-figure: ;
--tw-numeric-spacing: ;
--tw-numeric-fraction: ;
--tw-ring-inset: ;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgb(59 130 246 / 0.5);
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
--tw-blur: ;
--tw-brightness: ;
--tw-contrast: ;
--tw-grayscale: ;
--tw-hue-rotate: ;
--tw-invert: ;
--tw-saturate: ;
--tw-sepia: ;
--tw-drop-shadow: ;
--tw-backdrop-blur: ;
--tw-backdrop-brightness: ;
--tw-backdrop-contrast: ;
--tw-backdrop-grayscale: ;
--tw-backdrop-hue-rotate: ;
--tw-backdrop-invert: ;
--tw-backdrop-opacity: ;
--tw-backdrop-saturate: ;
--tw-backdrop-sepia: ;
--tw-contain-size: ;
--tw-contain-layout: ;
--tw-contain-paint: ;
--tw-contain-style: ;
}
.container{
width: 100%;
}
@media (min-width: 414px){
.container{
max-width: 414px;
}
}
@media (min-width: 640px){
.container{
max-width: 640px;
}
}
@media (min-width: 768px){
.container{
max-width: 768px;
}
}
@media (min-width: 1024px){
.container{
max-width: 1024px;
}
}
@media (min-width: 1280px){
.container{
max-width: 1280px;
}
}
@media (min-width: 1536px){
.container{
max-width: 1536px;
}
}
.visible{
visibility: visible;
}
.fixed{
position: fixed;
}
.absolute{
position: absolute;
}
.relative{
position: relative;
}
.inset-0{
inset: 0;
}
.z-50{
z-index: 50;
}
.z-\\[9999\\]{
z-index: 9999;
}
.mx-6{
margin-left: 24px;
margin-right: 24px;
}
.mx-auto{
margin-left: auto;
margin-right: auto;
}
.-mt-5{
margin-top: -20px;
}
.-mt-6{
margin-top: -24px;
}
.mb-10{
margin-bottom: 40px;
}
.mb-12{
margin-bottom: 48px;
}
.mb-3{
margin-bottom: 12px;
}
.mb-4{
margin-bottom: 16px;
}
.mb-6{
margin-bottom: 24px;
}
.mr-1{
margin-right: 4px;
}
.mr-1\\.5{
margin-right: 6px;
}
.mt-2{
margin-top: 8px;
}
.mt-3{
margin-top: 12px;
}
.mt-4{
margin-top: 16px;
}
.inline{
display: inline;
}
.flex{
display: flex;
}
.inline-flex{
display: inline-flex;
}
.hidden{
display: none;
}
.size-11{
width: 44px;
height: 44px;
}
.size-24{
width: 96px;
height: 96px;
}
.size-5{
width: 20px;
height: 20px;
}
.size-6{
width: 24px;
height: 24px;
}
.size-\\[244px\\]{
width: 244px;
height: 244px;
}
.h-10{
height: 40px;
}
.min-h-full{
min-height: 100%;
}
.min-h-screen{
min-height: 100vh;
}
.w-24{
width: 96px;
}
.w-full{
width: 100%;
}
.max-w-\\[224px\\]{
max-width: 224px;
}
.flex-1{
flex: 1 1 0%;
}
@keyframes pulse{
50%{
opacity: .5;
}
}
.animate-pulse{
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes spin{
to{
transform: rotate(360deg);
}
}
.animate-spin{
animation: spin 1s linear infinite;
}
.cursor-pointer{
cursor: pointer;
}
.flex-col{
flex-direction: column;
}
.items-end{
align-items: flex-end;
}
.items-center{
align-items: center;
}
.justify-center{
justify-content: center;
}
.justify-between{
justify-content: space-between;
}
.space-x-2 > :not([hidden]) ~ :not([hidden]){
--tw-space-x-reverse: 0;
margin-right: calc(8px * var(--tw-space-x-reverse));
margin-left: calc(8px * calc(1 - var(--tw-space-x-reverse)));
}
.space-x-4 > :not([hidden]) ~ :not([hidden]){
--tw-space-x-reverse: 0;
margin-right: calc(16px * var(--tw-space-x-reverse));
margin-left: calc(16px * calc(1 - var(--tw-space-x-reverse)));
}
.space-y-10 > :not([hidden]) ~ :not([hidden]){
--tw-space-y-reverse: 0;
margin-top: calc(40px * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(40px * var(--tw-space-y-reverse));
}
.space-y-4 > :not([hidden]) ~ :not([hidden]){
--tw-space-y-reverse: 0;
margin-top: calc(16px * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(16px * var(--tw-space-y-reverse));
}
.space-y-5 > :not([hidden]) ~ :not([hidden]){
--tw-space-y-reverse: 0;
margin-top: calc(20px * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(20px * var(--tw-space-y-reverse));
}
.space-y-6 > :not([hidden]) ~ :not([hidden]){
--tw-space-y-reverse: 0;
margin-top: calc(24px * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(24px * var(--tw-space-y-reverse));
}
.space-y-8 > :not([hidden]) ~ :not([hidden]){
--tw-space-y-reverse: 0;
margin-top: calc(32px * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(32px * var(--tw-space-y-reverse));
}
.overflow-y-hidden{
overflow-y: hidden;
}
.rounded-2xl{
border-radius: 1rem;
}
.rounded-full{
border-radius: 9999px;
}
.rounded-lg{
border-radius: 0.5rem;
}
.border{
border-width: 1px;
}
.border-t{
border-top-width: 1px;
}
.border-ebecef{
--tw-border-opacity: 1;
border-color: rgb(235 236 239 / var(--tw-border-opacity));
}
.border-f1f5f8{
--tw-border-opacity: 1;
border-color: rgb(241 245 248 / var(--tw-border-opacity));
}
.border-f5f5f7{
--tw-border-opacity: 1;
border-color: rgb(245 245 247 / var(--tw-border-opacity));
}
.border-transparent{
border-color: transparent;
}
.bg-0d151d{
--tw-bg-opacity: 1;
background-color: rgb(13 21 29 / var(--tw-bg-opacity));
}
.bg-black\\/50{
background-color: rgb(0 0 0 / 0.5);
}
.bg-transparent{
background-color: transparent;
}
.bg-white{
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
.p-2{
padding: 8px;
}
.p-4{
padding: 16px;
}
.p-7{
padding: 28px;
}
.px-2{
padding-left: 8px;
padding-right: 8px;
}
.px-8{
padding-left: 32px;
padding-right: 32px;
}
.py-1{
padding-top: 4px;
padding-bottom: 4px;
}
.py-3{
padding-top: 12px;
padding-bottom: 12px;
}
.pt-6{
padding-top: 24px;
}
.text-center{
text-align: center;
}
.font-sans{
font-family: Rubik, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
.font-sora{
font-family: Sora, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
.text-2xl{
font-size: 24px;
line-height: 32px;
}
.text-lg{
font-size: 18px;
line-height: 28px;
}
.text-sm{
font-size: 14px;
line-height: 20px;
}
.text-xs{
font-size: 12px;
line-height: 16px;
}
.font-bold{
font-weight: 700;
}
.font-medium{
font-weight: 500;
}
.font-semibold{
font-weight: 600;
}
.text-0d151d{
--tw-text-opacity: 1;
color: rgb(13 21 29 / var(--tw-text-opacity));
}
.text-29343f{
--tw-text-opacity: 1;
color: rgb(41 52 63 / var(--tw-text-opacity));
}
.text-3c424b{
--tw-text-opacity: 1;
color: rgb(60 66 75 / var(--tw-text-opacity));
}
.text-657080{
--tw-text-opacity: 1;
color: rgb(101 112 128 / var(--tw-text-opacity));
}
.text-70868f{
--tw-text-opacity: 1;
color: rgb(112 134 143 / var(--tw-text-opacity));
}
.text-9ba3ae{
--tw-text-opacity: 1;
color: rgb(155 163 174 / var(--tw-text-opacity));
}
.text-9eafc0{
--tw-text-opacity: 1;
color: rgb(158 175 192 / var(--tw-text-opacity));
}
.text-black{
--tw-text-opacity: 1;
color: rgb(0 0 0 / var(--tw-text-opacity));
}
.text-gray-900{
--tw-text-opacity: 1;
color: rgb(17 24 39 / var(--tw-text-opacity));
}
.text-red-500{
--tw-text-opacity: 1;
color: rgb(239 68 68 / var(--tw-text-opacity));
}
.text-white{
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}
.opacity-40{
opacity: 0.4;
}
.shadow{
--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-sm{
--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.blur-lg{
--tw-blur: blur(16px);
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.filter{
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.backdrop-blur-lg{
--tw-backdrop-blur: blur(16px);
-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.transition{
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.duration-300{
transition-duration: 300ms;
}
.duration-500{
transition-duration: 500ms;
}
.ease-in-out{
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button{
-webkit-appearance: none;
appearance: none;
}
.hover\\:underline:hover{
text-decoration-line: underline;
}
.hover\\:shadow:hover{
--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.focus\\:outline-none:focus{
outline: 2px solid transparent;
outline-offset: 2px;
}
.focus\\:ring-2:focus{
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus\\:ring-indigo-500:focus{
--tw-ring-opacity: 1;
--tw-ring-color: rgb(99 102 241 / var(--tw-ring-opacity));
}
.focus\\:ring-offset-2:focus{
--tw-ring-offset-width: 2px;
}
.focus-visible\\:ring:focus-visible{
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus-visible\\:ring-purple-500\\/75:focus-visible{
--tw-ring-color: rgb(168 85 247 / 0.75);
}
.disabled\\:cursor-not-allowed:disabled{
cursor: not-allowed;
}
.disabled\\:opacity-40:disabled{
opacity: 0.4;
}
@media (prefers-reduced-motion: reduce){
@keyframes spin{
to{
transform: rotate(360deg);
}
}
.motion-reduce\\:animate-\\[spin_1\\.5s_linear_infinite\\]{
animation: spin 1.5s linear infinite;
}
}
.dark\\:border-f1f5f8\\/10:is(.dark *){
border-color: rgb(241 245 248 / 0.1);
}
.dark\\:bg-0d151d:is(.dark *){
--tw-bg-opacity: 1;
background-color: rgb(13 21 29 / var(--tw-bg-opacity));
}
.dark\\:bg-white:is(.dark *){
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
.dark\\:text-0d151d:is(.dark *){
--tw-text-opacity: 1;
color: rgb(13 21 29 / var(--tw-text-opacity));
}
.dark\\:text-9eafc0:is(.dark *){
--tw-text-opacity: 1;
color: rgb(158 175 192 / var(--tw-text-opacity));
}
.dark\\:text-white:is(.dark *){
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}
@media (min-width: 768px){
.md\\:mt-2{
margin-top: 8px;
}
.md\\:hidden{
display: none;
}
.md\\:min-h-\\[35rem\\]{
min-height: 35rem;
}
.md\\:max-w-md{
max-width: 448px;
}
.md\\:items-center{
align-items: center;
}
.md\\:overflow-y-auto{
overflow-y: auto;
}
.md\\:rounded-2xl{
border-radius: 1rem;
}
.md\\:rounded-b-2xl{
border-bottom-right-radius: 1rem;
border-bottom-left-radius: 1rem;
}
.md\\:p-4{
padding: 16px;
}
}
`;
// src/components/Styles.tsx
var import_jsx_runtime = require("react/jsx-runtime");
var Styles = () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { children: styles_default });
var Styles_default = Styles;
// src/components/IDKitWidget/ShadowHost.tsx
var import_react_dom = __toESM(require("react-dom"), 1);
var import_react3 = require("react");
var import_jsx_runtime2 = require("react/jsx-runtime");
var ShadowHost = ({ id, children, mode = "open", delegatesFocus = false }) => {
const [shadowRoot, setShadowRoot] = (0, import_react3.useState)(null);
const hostRef = (0, import_react3.useCallback)(
(node) => {
if (node) {
const root = node.shadowRoot ?? node.attachShadow({ mode, delegatesFocus });
setShadowRoot(root);
}
},
[mode, delegatesFocus]
);
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { ref: hostRef, id, children: shadowRoot && import_react_dom.default.createPortal(children, shadowRoot) });
};
// src/components/IDKitWidget/BaseWidget.tsx
var import_shallow3 = require("zustand/shallow");
// src/components/Icons/XMarkIcon.tsx
var import_jsx_runtime3 = require("react/jsx-runtime");
var XMarkIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { ...props, xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
"path",
{
strokeWidth: "1.5",
stroke: "currentColor",
strokeLinecap: "round",
strokeLinejoin: "round",
d: "m16.243 7.758-8.485 8.485m8.485 0L7.758 7.758"
}
) });
var XMarkIcon_default = XMarkIcon;
// ../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs
function r(e) {
var t, f, n = "";
if ("string" == typeof e || "number" == typeof e) n += e;
else if ("object" == typeof e) if (Array.isArray(e)) {
var o = e.length;
for (t = 0; t < o; t++) e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
} else for (f in e) e[f] && (n && (n += " "), n += f);
return n;
}
function clsx() {
for (var e, t, f = 0, n = "", o = arguments.length; f < o; f++) (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
return n;
}
var clsx_default = clsx;
// src/components/Icons/ErrorIcon.tsx
var import_jsx_runtime4 = require("react/jsx-runtime");
var ErrorIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("svg", { ...props, xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 100 100", children: [
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("circle", { cx: "50", cy: "50", r: "49.375", fill: "url(#a)", fillOpacity: ".65", stroke: "url(#b)", strokeWidth: "1.25" }),
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("g", { filter: "url(#c)", children: [
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("circle", { cx: "50", cy: "50", r: "35", fill: "#fff" }),
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("circle", { cx: "50", cy: "50", r: "34.432", stroke: "#FFC9AD", strokeWidth: "1.136" })
] }),
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
"path",
{
stroke: "#FF4732",
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: "3.75",
d: "m57.5 42.5-15 14.999m15 .001-15-14.999"
}
),
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("defs", { children: [
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("linearGradient", { id: "a", x1: "50", x2: "50", y1: "0", y2: "100", gradientUnits: "userSpaceOnUse", children: [
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("stop", { stopColor: "#FFA483" }),
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("stop", { offset: "1", stopColor: "#FFA483", stopOpacity: "0" })
] }),
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("linearGradient", { id: "b", x1: "50", x2: "50", y1: "0", y2: "100", gradientUnits: "userSpaceOnUse", children: [
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("stop", { stopColor: "#FFA483" }),
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("stop", { offset: ".713", stopColor: "#FFA483", stopOpacity: "0" })
] }),
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
"filter",
{
id: "c",
width: "77.5",
height: "77.5",
x: "11.25",
y: "13.125",
colorInterpolationFilters: "sRGB",
filterUnits: "userSpaceOnUse",
children: [
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("feFlood", { floodOpacity: "0", result: "BackgroundImageFix" }),
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("feColorMatrix", { in: "SourceAlpha", result: "hardAlpha", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" }),
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("feOffset", { dy: "1.875" }),
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("feGaussianBlur", { stdDeviation: "1.875" }),
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("feColorMatrix", { values: "0 0 0 0 1 0 0 0 0 0.788235 0 0 0 0 0.678431 0 0 0 0.45 0" }),
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("feBlend", { in2: "BackgroundImageFix", result: "effect1_dropShadow_39_740" }),
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("feBlend", { in: "SourceGraphic", in2: "effect1_dropShadow_39_740", result: "shape" })
]
}
)
] })
] });
var ErrorIcon_default = ErrorIcon;
// src/components/IDKitWidget/States/ErrorState.tsx
var import_idkit_core2 = require("@worldcoin/idkit-core");
// src/components/Icons/ReloadIcon.tsx
var import_jsx_runtime5 = require("react/jsx-runtime");
var ReloadIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
"path",
{
d: "M12.3809 1.6665L13.3626 4.24214C12.3754 3.66434 11.2263 3.33317 9.99992 3.33317C6.31802 3.33317 3.33325 6.31794 3.33325 9.99984C3.33325 11.2141 3.6579 12.3526 4.22513 13.3332M7.61897 18.3332L6.63719 15.7575C7.62438 16.3353 8.77348 16.6665 9.99992 16.6665C13.6818 16.6665 16.6666 13.6817 16.6666 9.99984C16.6666 8.78555 16.3419 7.64708 15.7747 6.6665",
stroke: "#3C424B",
strokeWidth: "1.5",
strokeLinecap: "round",
strokeLinejoin: "round"
}
) });
var ReloadIcon_default = ReloadIcon;
// src/components/Icons/WarningIcon.tsx
var import_jsx_runtime6 = require("react/jsx-runtime");
var WarningIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 100 100", ...props, children: [
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
"circle",
{
cx: "50",
cy: "50",
r: "49.375",
fill: "url(#warning-a)",
fillOpacity: ".65",
stroke: "url(#warning-b)",
strokeWidth: "1.25"
}
),
/* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("g", { filter: "url(#warning-c)", children: [
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("circle", { cx: "50", cy: "50", r: "35", fill: "#fff" }),
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("circle", { cx: "50", cy: "50", r: "34.432", stroke: "#FFE999", strokeWidth: "1.136" })
] }),
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
"path",
{
fill: "#FFB200",
fillRule: "evenodd",
d: "M47.46 40.207c1.107-1.943 3.973-1.943 5.08 0l9.59 16.834c1.076 1.888-.324 4.209-2.54 4.209H40.41c-2.216 0-3.616-2.32-2.54-4.21l9.59-16.833Zm3.79 16.043a1.25 1.25 0 1 1-2.5 0 1.25 1.25 0 0 1 2.5 0Zm-.313-10a.937.937 0 1 0-1.875 0v6.25a.938.938 0 0 0 1.875 0v-6.25Z",
clipRule: "evenodd"
}
),
/* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("defs", { children: [
/* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("linearGradient", { id: "warning-a", x1: "50", x2: "50", y1: "0", y2: "100", gradientUnits: "userSpaceOnUse", children: [
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("stop", { stopColor: "#FFDA66" }),
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("stop", { offset: "1", stopColor: "#FFDA66", stopOpacity: "0" })
] }),
/* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("linearGradient", { id: "warning-b", x1: "50", x2: "50", y1: "0", y2: "100", gradientUnits: "userSpaceOnUse", children: [
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("stop", { stopColor: "#FFDA66" }),
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("stop", { offset: ".713", stopColor: "#FFDA66", stopOpacity: "0" })
] }),
/* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
"filter",
{
id: "warning-c",
width: "77.5",
height: "77.5",
x: "11.25",
y: "13.125",
colorInterpolationFilters: "sRGB",
filterUnits: "userSpaceOnUse",
children: [
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("feFlood", { floodOpacity: "0", result: "BackgroundImageFix" }),
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("feColorMatrix", { in: "SourceAlpha", result: "hardAlpha", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" }),
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("feOffset", { dy: "1.875" }),
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("feGaussianBlur", { stdDeviation: "1.875" }),
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("feColorMatrix", { values: "0 0 0 0 1 0 0 0 0 0.913725 0 0 0 0 0.6 0 0 0 0.45 0" }),
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("feBlend", { in2: "BackgroundImageFix", result: "effect1_dropShadow_39_758" }),
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("feBlend", { in: "SourceGraphic", in2: "effect1_dropShadow_39_758", result: "shape" })
]
}
)
] })
] });
var WarningIcon_default = WarningIcon;
// src/components/IDKitWidget/States/ErrorState.tsx
var import_jsx_runtime7 = require("react/jsx-runtime");
var getParams = ({ retryFlow, errorState }) => ({ retryFlow, errorState });
var ERROR_TITLES = {
[import_idkit_core2.AppErrorCodes.GenericError]: __("Something went wrong"),
[import_idkit_core2.AppErrorCodes.FailedByHostApp]: __("Verification Declined"),
[import_idkit_core2.AppErrorCodes.VerificationRejected]: __("Request cancelled")
};
var ERROR_MESSAGES = {
[import_idkit_core2.AppErrorCodes.ConnectionFailed]: __("Connection to your wallet failed. Please try again."),
[import_idkit_core2.AppErrorCodes.VerificationRejected]: __("You\u2019ve cancelled the request in World App."),
[import_idkit_core2.AppErrorCodes.MaxVerificationsReached]: __(
"You have already verified the maximum number of times for this action."
),
[import_idkit_core2.AppErrorCodes.CredentialUnavailable]: __("It seems you do not have the verification level required by this app."),
[import_idkit_core2.AppErrorCodes.MalformedRequest]: __(
"There was a problem with this request. Please try again or contact the app owner."
),
[import_idkit_core2.AppErrorCodes.InvalidNetwork]: __(
"Invalid network. If you are the app owner, visit docs.world.org/test for details."
),
[import_idkit_core2.AppErrorCodes.InclusionProofFailed]: __("There was an issue fetching your credential. Please try again."),
[import_idkit_core2.AppErrorCodes.InclusionProofPending]: __(
"Your identity is still being registered. Please wait a few minutes and try again."
),
[import_idkit_core2.AppErrorCodes.GenericError]: __("Something unexpected went wrong. Please try again."),
[import_idkit_core2.AppErrorCodes.UnexpectedResponse]: __("Unexpected response from your wallet. Please try again."),
[import_idkit_core2.AppErrorCodes.FailedByHostApp]: __("Verification failed by the app. Please contact the app owner for details.")
};
var ErrorState = (props) => {
const { retryFlow, errorState } = idkit_default(getParams);
const { show_modal } = props;
return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "space-y-8", children: [
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: clsx_default("flex items-center justify-center", show_modal ? "-mt-5" : ""), children: errorState?.code == import_idkit_core2.AppErrorCodes.VerificationRejected ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(WarningIcon_default, { className: "w-24" }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ErrorIcon_default, { className: "w-24" }) }),
/* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { children: [
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "text-center text-2xl font-semibold text-gray-900 dark:text-white", children: (errorState?.code && ERROR_TITLES[errorState.code]) ?? ERROR_TITLES[import_idkit_core2.AppErrorCodes.GenericError] }),
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "mx-auto mt-2 max-w-[224px] text-center text-657080", children: errorState?.message ?? ERROR_MESSAGES[errorState?.code ?? import_idkit_core2.AppErrorCodes.GenericError] })
] }),
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "flex justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
"button",
{
type: "button",
onClick: retryFlow,
className: "inline-flex items-center rounded-lg border border-ebecef bg-transparent px-8 py-3 font-medium text-3c424b shadow-sm transition duration-300 hover:shadow focus:outline-none focus:ring-2 focus:ring-indigo-500 f