@treasure-dev/tdk-react
Version:
Treasure Development Kit for React-based projects
1,164 lines (1,133 loc) • 84.1 kB
JavaScript
// src/providers/treasure.tsx
import {
AnalyticsManager,
DEFAULT_TDK_API_BASE_URI,
DEFAULT_TDK_CHAIN_ID,
DEFAULT_TDK_ECOSYSTEM_ID,
TDKAPI,
authenticateWallet,
createTreasureConnectClient,
decodeAuthToken,
getContractAddresses,
getUserAddress,
startUserSession
} from "@treasure-dev/tdk-core";
import {
createContext,
useCallback as useCallback2,
useContext,
useEffect as useEffect3,
useMemo as useMemo2,
useState as useState3
} from "react";
import { ZERO_ADDRESS, defineChain } from "thirdweb";
import {
useActiveWallet as useActiveWallet2,
useActiveWalletChain,
useActiveWalletConnectionStatus,
useAutoConnect,
useIsAutoConnecting,
useSwitchActiveWalletChain
} from "thirdweb/react";
import { isZkSyncChain } from "thirdweb/utils";
import { ecosystemWallet } from "thirdweb/wallets";
// src/ui/hooks/useLauncher.tsx
import {
getTreasureLauncherAuthToken,
getTreasureLauncherWalletComponents,
startUserSessionViaLauncher
} from "@treasure-dev/launcher";
import {
useCallback,
useEffect as useEffect2,
useRef,
useState as useState2
} from "react";
import { useActiveWallet } from "thirdweb/react";
// src/ui/AccountModal.tsx
import * as VisuallyHidden from "@radix-ui/react-visually-hidden";
import { DEFAULT_TDK_APP_ICON_URI } from "@treasure-dev/tdk-core";
import clsx2 from "clsx";
import { MediaRenderer, useWalletImage } from "thirdweb/react";
import { shortenAddress } from "thirdweb/utils";
// src/ui/components/Dialog.tsx
import * as DialogPrimitive from "@radix-ui/react-dialog";
import clsx from "clsx";
import * as React from "react";
// src/ui/icons/CloseIcon.tsx
import { jsx, jsxs } from "react/jsx-runtime";
var CloseIcon = ({ className }) => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 20 20", className, children: /* @__PURE__ */ jsxs("g", { children: [
/* @__PURE__ */ jsx(
"path",
{
d: "M14.375 5.625L5.625 14.375",
stroke: "currentColor",
strokeWidth: "1.5",
strokeLinecap: "round",
strokeLinejoin: "round"
}
),
/* @__PURE__ */ jsx(
"path",
{
d: "M5.625 5.625L14.375 14.375",
stroke: "currentColor",
strokeWidth: "1.5",
strokeLinecap: "round",
strokeLinejoin: "round"
}
)
] }) });
// src/ui/components/Dialog.tsx
import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
var Dialog = DialogPrimitive.Root;
var DialogPortal = DialogPrimitive.Portal;
var DialogTitle = DialogPrimitive.Title;
var DialogOverlay = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx2(
DialogPrimitive.Overlay,
{
ref,
className: "tdk-fixed tdk-inset-0 tdk-z-50 tdk-bg-black/30 tdk-backdrop-blur-sm data-[state=open]:tdk-animate-in data-[state=closed]:tdk-animate-out data-[state=closed]:tdk-fade-out-0 data-[state=open]:tdk-fade-in-0",
...props
}
));
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
var DialogContent = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs2(DialogPortal, { children: [
/* @__PURE__ */ jsx2(DialogOverlay, {}),
/* @__PURE__ */ jsx2(
DialogPrimitive.Content,
{
ref,
className: clsx(
"tdk-fixed tdk-max-h-screen tdk-p-4 sm:tdk-px-6 tdk-overflow-y-auto tdk-left-1/2 tdk-top-1/2 tdk-z-50 tdk-w-full -tdk-translate-x-1/2 -tdk-translate-y-1/2 tdk-shadow-none tdk-drop-shadow-xl data-[state=open]:tdk-animate-in data-[state=closed]:tdk-animate-out data-[state=closed]:tdk-fade-out-0 data-[state=open]:tdk-fade-in-0 data-[state=closed]:tdk-zoom-out-95 data-[state=open]:tdk-zoom-in-95 data-[state=closed]:tdk-slide-out-to-left-1/2 data-[state=closed]:tdk-slide-out-to-top-[48%] data-[state=open]:tdk-slide-in-from-left-1/2 data-[state=open]:tdk-slide-in-from-top-[48%] tdk-outline-none focus:tdk-outline-none focus:tdk-ring-0",
className
),
...props,
children: /* @__PURE__ */ jsxs2("div", { className: "tdk-relative", children: [
/* @__PURE__ */ jsxs2(DialogPrimitive.Close, { className: "tdk-absolute tdk-top-0 tdk-right-0 tdk-pt-4 tdk-pr-4 tdk-pb-2 tdk-pl-2 tdk-bg-transparent tdk-border-none tdk-cursor-pointer tdk-group", children: [
/* @__PURE__ */ jsx2(CloseIcon, { className: "tdk-h-5 tdk-w-5 tdk-text-silver-300 group-hover:tdk-text-cream tdk-transition-colors" }),
/* @__PURE__ */ jsx2("span", { className: "tdk-sr-only", children: "Close" })
] }),
children
] })
}
)
] }));
DialogContent.displayName = DialogPrimitive.Content.displayName;
// src/ui/hooks/useTranslation.ts
import { useEffect, useMemo, useState } from "react";
// src/translations/en.tsx
import { Fragment, jsxs as jsxs3 } from "react/jsx-runtime";
var translation = {
connect: {
action: "Connect",
header: ({ appName }) => /* @__PURE__ */ jsxs3(Fragment, { children: [
"Connect to ",
appName
] }),
footer: ({ thirdweb }) => /* @__PURE__ */ jsxs3(Fragment, { children: [
"Powered by ",
thirdweb
] }),
option: {
email: "Email address",
or: "or",
apple: "Apple",
discord: "Discord",
google: "Google",
passkey: "Passkey",
wallet: "Wallet",
x: "X"
},
verify: {
header: "Verify code",
description: ({ recipient }) => /* @__PURE__ */ jsxs3(Fragment, { children: [
"We have sent a verification code to ",
recipient,
". You will be automatically logged in after entering your code."
] }),
inputLabel: "Enter verification code:",
action: "Confirm",
resend: {
prompt: "Didn't get a code?",
action: "Resend",
countdown: ({ seconds }) => `Resend available in ${seconds}s...`
}
},
migrate: {
header: "Migrate existing account",
description: "It looks like you have several existing Treasure profiles. Please choose one you would like to use moving forward as your identity across the Treasure ecosystem.",
approve: "Use this account",
reject: "Start fresh",
disclaimer: "NOTE: This is irreversible, so please choose carefully."
}
}
};
var en_default = translation;
// src/ui/hooks/useTranslation.ts
var SUPPORTED_LANGUAGES = ["en", "es", "ja", "ru"];
var isSupportedLanguage = (language) => SUPPORTED_LANGUAGES.includes(language);
var getTranslation = async (language) => {
switch (language) {
case "es": {
return (await import("./es-KTIFZIPQ.mjs")).default;
}
case "ja": {
return (await import("./ja-SIE26U6T.mjs")).default;
}
case "ru": {
return (await import("./ru-Q24KPIZX.mjs")).default;
}
default:
return en_default;
}
};
var useTranslation = (options) => {
const treasure3 = useTreasure();
const [translation2, setTranslation] = useState(en_default);
const browserLanguage = navigator?.language.slice(0, 2).toLowerCase();
const language = options?.language ?? treasure3.language ?? (browserLanguage && isSupportedLanguage(browserLanguage) ? browserLanguage : void 0) ?? "en";
useEffect(() => {
(async () => {
setTranslation(await getTranslation(language));
})();
}, [language]);
const thirdwebLocale = useMemo(() => {
switch (language) {
case "en":
return "en_US";
case "es":
return "es_ES";
case "ja":
return "ja_JP";
default:
return void 0;
}
}, [language]);
return { language, thirdwebLocale, t: translation2 };
};
// src/ui/AccountModal.tsx
import { jsx as jsx3, jsxs as jsxs4 } from "react/jsx-runtime";
var AccountModal = ({ open, size = "lg", onOpenChange }) => {
const {
client,
user,
userAddress,
appName,
appIconUri = DEFAULT_TDK_APP_ICON_URI,
ecosystemId
} = useTreasure();
const { t } = useTranslation();
const { data: walletImage } = useWalletImage(ecosystemId);
if (!user) {
return null;
}
const userWalletImage = user.pfp ?? walletImage;
return /* @__PURE__ */ jsx3(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs4(
DialogContent,
{
className: clsx2(
size === "lg" && "tdk-max-w-lg",
size === "xl" && "tdk-max-w-xl",
size === "2xl" && "tdk-max-w-2xl",
size === "3xl" && "tdk-max-w-3xl"
),
"aria-describedby": void 0,
children: [
/* @__PURE__ */ jsx3(VisuallyHidden.Root, { children: /* @__PURE__ */ jsx3(DialogTitle, { children: t.connect.header({ appName }) }) }),
/* @__PURE__ */ jsx3("div", { className: "tdk-rounded-lg tdk-overflow-hidden tdk-bg-night tdk-border tdk-border-night-600", children: /* @__PURE__ */ jsxs4("div", { className: "tdk-p-6 tdk-flex tdk-flex-col tdk-items-center", children: [
appIconUri && /* @__PURE__ */ jsx3(
"img",
{
src: appIconUri,
alt: appName,
className: "tdk-w-16 tdk-h-16"
}
),
/* @__PURE__ */ jsx3("h1", { className: "tdk-mt-4 tdk-text-2xl tdk-font-semibold", children: appName }),
/* @__PURE__ */ jsxs4("div", { className: "tdk-mt-6 tdk-flex tdk-items-center tdk-space-x-4", children: [
userWalletImage ? /* @__PURE__ */ jsx3(
MediaRenderer,
{
client,
src: userWalletImage,
className: "tdk-w-12 tdk-h-12 tdk-rounded-full"
}
) : /* @__PURE__ */ jsx3("div", { className: "tdk-w-12 tdk-h-12 tdk-rounded-full tdk-bg-gray-500" }),
/* @__PURE__ */ jsxs4("div", { children: [
/* @__PURE__ */ jsx3("h2", { className: "tdk-text-lg tdk-font-semibold", children: user.tag || shortenAddress(userAddress) }),
user.email && /* @__PURE__ */ jsx3("p", { className: "tdk-text-sm tdk-text-gray-400", children: user.email })
] })
] })
] }) })
]
}
) });
};
// src/ui/hooks/useLauncher.tsx
import { jsx as jsx4 } from "react/jsx-runtime";
var useLauncher = ({
launcherOptions,
setRootElement,
onAuthTokenUpdated
}) => {
const activeWallet = useActiveWallet();
const hasSetUrlParams = useRef(false);
const [isUsingTreasureLauncher, setIsUsingTreasureLauncher] = useState2(false);
const [isUsingLauncherAuthToken, setIsUserLauncherAuthToken] = useState2(false);
const openLauncherAccountModal = (size) => {
if (!isUsingTreasureLauncher) {
console.debug(
"[useLauncher] openLauncherAccountModal cannot be used when not using Treasure Launcher"
);
return;
}
setRootElement(
/* @__PURE__ */ jsx4(
AccountModal,
{
open: true,
size,
onOpenChange: () => setRootElement(null)
}
)
);
};
const onWalletComponentsUpdated = useCallback(
async (authProvider, walletId, authCookie) => {
if (activeWallet || hasSetUrlParams.current) {
return;
}
hasSetUrlParams.current = true;
const url = new URL(window.location.href);
url.searchParams.set("authProvider", authProvider);
url.searchParams.set("walletId", walletId);
url.searchParams.set("authCookie", authCookie);
window.history.pushState({}, "", url.toString());
},
[activeWallet]
);
const startUserSession2 = useCallback(
(sessionOptions) => {
return startUserSessionViaLauncher({
sessionOptions,
getPort: launcherOptions?.getPortOverride
});
},
[launcherOptions?.getPortOverride]
);
useEffect2(() => {
const authToken = launcherOptions?.getAuthTokenOverride?.() ?? getTreasureLauncherAuthToken();
const walletComponents = launcherOptions?.getWalletComponentsOverride?.() ?? getTreasureLauncherWalletComponents();
if (walletComponents) {
onWalletComponentsUpdated(
walletComponents.authProvider,
walletComponents.walletId,
walletComponents.authCookie
);
setIsUsingTreasureLauncher(true);
return;
}
if (authToken) {
setIsUsingTreasureLauncher(true);
setIsUserLauncherAuthToken(true);
onAuthTokenUpdated(authToken);
return;
}
setIsUsingTreasureLauncher(false);
}, [
launcherOptions?.getAuthTokenOverride,
launcherOptions?.getWalletComponentsOverride,
onAuthTokenUpdated,
onWalletComponentsUpdated
]);
return {
isUsingTreasureLauncher,
isUsingLauncherAuthToken,
openLauncherAccountModal,
startUserSession: startUserSession2
};
};
// src/utils/defaultAnalytics.ts
var EVT_TREASURECONNECT_CONNECTED = "tc_connected";
var EVT_TREASURECONNECT_DISCONNECTED = "tc_disconnected";
var EVT_TREASURECONNECT_UI_LOGIN = "tc_ui_login";
var EVT_TREASURECONNECT_UI_ACCOUNT = "tc_ui_account";
// src/utils/store.ts
var AUTH_TOKEN_KEY = "tdk:authToken";
var AUTH_METHOD_KEY = "tdk:authMethod";
var getStoredAuthToken = () => localStorage.getItem(AUTH_TOKEN_KEY) || void 0;
var setStoredAuthToken = (authToken) => localStorage.setItem(AUTH_TOKEN_KEY, authToken);
var clearStoredAuthToken = () => localStorage.removeItem(AUTH_TOKEN_KEY);
var getStoredAuthMethod = () => localStorage.getItem(AUTH_METHOD_KEY) || void 0;
var setStoredAuthMethod = (authMethod) => localStorage.setItem(AUTH_METHOD_KEY, authMethod);
var clearStoredAuthMethod = () => localStorage.removeItem(AUTH_METHOD_KEY);
// src/providers/treasure.tsx
import { jsxs as jsxs5 } from "react/jsx-runtime";
var Context = createContext({});
var useTreasure = () => {
const context = useContext(Context);
if (!context) {
throw new Error(
"Must call `useTreasure` within a `TreasureProvider` component."
);
}
return context;
};
var TreasureProvider = ({
children,
language,
appName,
appIconUri,
apiUri = DEFAULT_TDK_API_BASE_URI,
defaultChainId = DEFAULT_TDK_CHAIN_ID,
clientId,
ecosystemId = DEFAULT_TDK_ECOSYSTEM_ID,
ecosystemPartnerId,
analyticsOptions,
authOptions,
launcherOptions,
sessionOptions,
autoConnectTimeout = 5e3,
onConnect
}) => {
const [isAuthenticating, setIsAuthenticating] = useState3(false);
const [user, setUser] = useState3();
const [authToken, setAuthToken] = useState3();
const [el, setEl] = useState3(null);
const client = useMemo2(
() => createTreasureConnectClient({ clientId }),
[clientId]
);
const activeWallet = useActiveWallet2();
const activeWalletStatus = useActiveWalletConnectionStatus();
const activeWalletChain = useActiveWalletChain();
const switchActiveWalletChain = useSwitchActiveWalletChain();
const isAutoConnecting = useIsAutoConnecting();
const chain = (user ? activeWalletChain : void 0) ?? defineChain(defaultChainId);
const tdk = useMemo2(
() => new TDKAPI({
baseUri: apiUri,
chainId: chain.id,
backendWallet: sessionOptions?.backendWallet,
authToken,
client,
activeWallet
}),
[
apiUri,
chain.id,
sessionOptions?.backendWallet,
authToken,
client,
activeWallet
]
);
const contractAddresses = useMemo2(
() => getContractAddresses(chain.id),
[chain.id]
);
const userAddress = user ? getUserAddress(user, chain.id) ?? user.smartAccounts[0]?.address : void 0;
useEffect3(() => {
if (!analyticsOptions || AnalyticsManager.instance.initialized) {
return;
}
AnalyticsManager.instance.init({
apiUri: analyticsOptions.apiUri,
apiKey: analyticsOptions.apiKey,
app: analyticsOptions.appInfo,
cartridgeTag: analyticsOptions.cartridgeTag,
device: analyticsOptions.device
});
}, [analyticsOptions]);
const trackCustomEvent = useCallback2(
async (event) => {
if (!AnalyticsManager.instance.initialized) {
return void 0;
}
let address = event.address ?? userAddress;
if (address === void 0 && event.userId === void 0) {
address = "";
event.userId = "";
}
const authMethod = getStoredAuthMethod();
const playerId = {
smart_account: address,
user_id: event.userId
};
const properties = event.properties ?? {};
properties.authentication = {
method: authMethod ?? null,
email: event.email ?? user?.email ?? null,
external_wallet_addresses: event.externalWalletAddresses ?? []
};
const trackableEvent = {
...playerId,
name: event.name,
properties: event.properties ?? {}
};
return AnalyticsManager.instance.trackCustomEvent(trackableEvent);
},
[userAddress, user]
);
const onAuthTokenUpdated = useCallback2(
(authToken2) => {
tdk.user.me({ overrideAuthToken: authToken2 }).then((user2) => {
setUser(user2);
setAuthToken(authToken2);
setStoredAuthToken(authToken2);
onConnect?.(user2);
});
},
[tdk.user.me, onConnect]
);
const {
isUsingTreasureLauncher,
isUsingLauncherAuthToken,
openLauncherAccountModal,
startUserSession: startUserSessionViaLauncher2
} = useLauncher({
launcherOptions,
setRootElement: setEl,
onAuthTokenUpdated
});
const logOut = () => {
if (analyticsOptions?.automaticTrackLogout !== false) {
trackCustomEvent({
name: EVT_TREASURECONNECT_DISCONNECTED,
properties: {
isUsingTreasureLauncher,
isUsingLauncherAuthToken
}
}).then((eventId) => {
if (eventId) {
console.debug(
`[TreasureProvider] tracked logout event: ${eventId}`
);
}
}).catch((err) => {
console.error(`[TreasureProvider] error tracking logout: ${err}`);
});
}
setUser(void 0);
setAuthToken(void 0);
clearStoredAuthToken();
clearStoredAuthMethod();
activeWallet?.disconnect();
};
const logIn = async (wallet, chainId, authMethod, skipCurrentUser = false) => {
if (isUsingLauncherAuthToken) {
console.debug(
"[TreasureProvider] Skipping login because launcher is being used"
);
return { user: void 0, legacyProfiles: [] };
}
if (chainId) {
tdk.chainId = chainId;
}
let nextUser;
let nextAuthToken;
let legacyProfiles = [];
if (!skipCurrentUser) {
const storedAuthToken = getStoredAuthToken();
if (storedAuthToken) {
try {
const { exp: authTokenExpirationDate } = decodeAuthToken(storedAuthToken);
if (authTokenExpirationDate > Date.now() / 1e3) {
setIsAuthenticating(true);
nextUser = await tdk.user.me({
overrideAuthToken: storedAuthToken
});
nextAuthToken = storedAuthToken;
}
} catch (err) {
console.debug(
"[TreasureProvider] Error fetching user with stored auth token:",
err
);
}
}
}
if (!nextUser) {
setIsAuthenticating(true);
try {
const result = await authenticateWallet({
wallet,
tdk,
authTokenDurationSec: authOptions?.authTokenDurationSec ?? sessionOptions?.sessionDurationSec
});
nextAuthToken = result.token;
nextUser = result.user;
legacyProfiles = result.legacyProfiles;
} catch (err) {
setIsAuthenticating(false);
throw err;
}
}
if (!nextUser || !nextAuthToken) {
throw new Error("An unknown error occurred during login");
}
tdk.setAuthToken(nextAuthToken);
if (sessionOptions && !await isZkSyncChain(chainId ? defineChain(chainId) : chain)) {
setIsAuthenticating(true);
try {
await startUserSession({
client,
wallet,
chainId: chainId ?? chain.id,
tdk,
sessions: nextUser.sessions,
options: sessionOptions
});
} catch (err) {
setIsAuthenticating(false);
throw err;
}
}
if (authMethod) {
setStoredAuthMethod(authMethod);
}
setUser(nextUser);
setAuthToken(nextAuthToken);
setStoredAuthToken(nextAuthToken);
if (analyticsOptions?.automaticTrackLogin !== false) {
trackCustomEvent({
name: EVT_TREASURECONNECT_CONNECTED,
email: nextUser.email,
externalWalletAddresses: nextUser.externalWalletAddresses,
address: nextUser.address,
properties: {
isUsingTreasureLauncher,
isUsingLauncherAuthToken
}
}).then((eventId) => {
if (eventId) {
console.debug(`[TreasureProvider] tracked login event: ${eventId}`);
}
}).catch((err) => {
console.error(`[TreasureProvider] error tracking login: ${err}`);
});
}
onConnect?.(nextUser);
setIsAuthenticating(false);
return { user: nextUser, legacyProfiles };
};
const switchChain = async (chainId) => {
if (activeWallet) {
await switchActiveWalletChain(defineChain(chainId));
await logIn(activeWallet, chainId, void 0, true);
}
};
useAutoConnect({
client,
chain,
wallets: [
ecosystemWallet(ecosystemId, {
partnerId: ecosystemPartnerId
})
],
timeout: autoConnectTimeout,
onConnect: logIn
});
return /* @__PURE__ */ jsxs5(
Context.Provider,
{
value: {
language,
appName,
appIconUri,
chain,
contractAddresses,
tdk,
client,
ecosystemId,
ecosystemPartnerId,
isConnecting: isAutoConnecting || activeWalletStatus === "connecting" || isAuthenticating,
...user ? {
isConnected: true,
user,
userAddress: userAddress ?? ZERO_ADDRESS
// should not reach here
} : {
isConnected: false,
user: void 0,
userAddress: void 0
},
isUsingTreasureLauncher,
isUsingLauncherAuthToken,
logIn,
logOut,
updateUser: (partialUser) => setUser((curr) => curr ? { ...curr, ...partialUser } : void 0),
startUserSession: (options) => isUsingTreasureLauncher ? startUserSessionViaLauncher2(options) : startUserSession({
client,
wallet: activeWallet,
chainId: chain.id,
tdk,
options
}),
switchChain,
setRootElement: setEl,
openLauncherAccountModal,
trackCustomEvent
},
children: [
children,
el
]
}
);
};
// src/ui/components/Button.tsx
import { cva } from "class-variance-authority";
import clsx4 from "clsx";
// src/ui/components/Spinner.tsx
import clsx3 from "clsx";
import { jsx as jsx5, jsxs as jsxs6 } from "react/jsx-runtime";
var Spinner = ({ className }) => /* @__PURE__ */ jsxs6(
"svg",
{
className: clsx3("tdk-animate-spin", className),
xmlns: "http://www.w3.org/2000/svg",
fill: "none",
viewBox: "0 0 24 24",
children: [
/* @__PURE__ */ jsx5(
"circle",
{
className: "tdk-opacity-25",
cx: "12",
cy: "12",
r: "10",
stroke: "currentColor",
strokeWidth: "4"
}
),
/* @__PURE__ */ jsx5(
"path",
{
className: "tdk-opacity-75",
fill: "currentColor",
d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
}
)
]
}
);
// src/ui/components/Button.tsx
import { jsx as jsx6 } from "react/jsx-runtime";
var buttonClassName = cva(
[
"tdk-rounded-lg tdk-px-4 tdk-py-1 tdk-transition-colors tdk-text-sm tdk-border tdk-border-solid tdk-min-h-9 disabled:tdk-cursor-not-allowed disabled:tdk-opacity-90"
],
{
variants: {
intent: {
primary: [
"tdk-text-cream tdk-border-ruby-600 tdk-bg-ruby-700 hover:tdk-border-ruby-400 hover:tdk-bg-ruby-500 active:tdk-border-ruby-700 active:tdk-bg-ruby-800 disabled:hover:tdk-border-ruby-600 disabled:hover:tdk-bg-ruby-700"
],
secondary: [
"tdk-text-black tdk-border-honey-400 tdk-bg-honey-500 hover:tdk-border-honey-300 hover:tdk-bg-honey-400 active:tdk-border-honey-500 active:tdk-bg-honey-800 disabled:hover:tdk-border-honey-400 disabled:hover:tdk-bg-honey-500"
]
},
isLoading: {
false: "tdk-cursor-pointer",
true: "tdk-flex tdk-items-center tdk-justify-center tdk-cursor-wait"
}
},
compoundVariants: [
{
intent: "primary",
isLoading: true,
class: "tdk-border-ruby-700 tdk-bg-ruby-800 hover:tdk-border-ruby-700 hover:tdk-bg-ruby-800"
},
{
intent: "secondary",
isLoading: true,
class: "tdk-border-honey-500 tdk-bg-honey-800 hover:tdk-border-honey-500 hover:tdk-bg-honey-800"
}
],
defaultVariants: {
intent: "primary",
isLoading: false
}
}
);
var Button = (props) => {
const { variant = "primary", isLoading = false } = props;
const children = isLoading ? /* @__PURE__ */ jsx6(Spinner, { className: "tdk-w-3.5 tdk-h-3.5 tdk-mx-auto" }) : props.children;
if (props.as === "link") {
const { as: _2, variant: __2, isLoading: ___2, ...linkProps } = props;
return /* @__PURE__ */ jsx6(
"a",
{
...linkProps,
className: clsx4(
buttonClassName({ intent: variant, isLoading }),
props.className
),
children
}
);
}
const { as: _, variant: __, isLoading: ___, ...buttonProps } = props;
return /* @__PURE__ */ jsx6(
"button",
{
...buttonProps,
className: clsx4(
buttonClassName({
intent: variant,
isLoading
}),
buttonProps.className
),
onClick: isLoading ? void 0 : props.onClick,
children
}
);
};
// src/ui/hooks/useConnect.tsx
import { getContractAddress } from "@treasure-dev/tdk-core";
import { defineChain as defineChain2 } from "thirdweb";
import { treasure as treasure2 } from "thirdweb/chains";
import {
useActiveWallet as useActiveWallet3,
useWalletDetailsModal
} from "thirdweb/react";
import { ecosystemWallet as ecosystemWallet2 } from "thirdweb/wallets";
// src/ui/ConnectModal/ConnectModal.tsx
import * as VisuallyHidden2 from "@radix-ui/react-visually-hidden";
import {
DEFAULT_TDK_APP_ICON_URI as DEFAULT_TDK_APP_ICON_URI3,
SUPPORTED_WEB3_WALLETS,
connectEcosystemWallet,
isSocialConnectMethod,
sendEmailVerificationCode
} from "@treasure-dev/tdk-core";
import clsx8 from "clsx";
import { useEffect as useEffect4, useState as useState7 } from "react";
import { useConnect, useConnectModal } from "thirdweb/react";
import { authenticateWithRedirect } from "thirdweb/wallets";
// src/utils/error.ts
var getErrorMessage = (err) => {
let message = err instanceof Error ? err.message : String(err);
if (err instanceof Object) {
const outerMessage = err.message;
if (outerMessage) {
try {
const parsed = JSON.parse(outerMessage);
if (parsed.message) {
message = parsed.message;
}
} catch (_err) {
message = outerMessage;
}
} else {
message = JSON.stringify(err);
}
}
if (
// Sent from Thirdweb if the user closes the social login window
message === "User closed login window" || // Sent from passkey login if the user cancels the process
err instanceof Error && err.name === "NotAllowedError"
) {
return "";
}
return message;
};
// src/ui/ConnectModal/ConnectMethodSelectionView.tsx
import {
DEFAULT_TDK_APP_ICON_URI as DEFAULT_TDK_APP_ICON_URI2,
DEFAULT_TDK_APP_NAME
} from "@treasure-dev/tdk-core";
import clsx5 from "clsx";
import { useRef as useRef2, useState as useState4 } from "react";
// src/ui/icons/AppleIcon.tsx
import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
var AppleIcon = ({ className }) => /* @__PURE__ */ jsx7("svg", { viewBox: "0 0 17 18", className, children: /* @__PURE__ */ jsxs7("g", { children: [
/* @__PURE__ */ jsx7(
"path",
{
d: "M12.3765 0C12.4222 0 12.4679 0 12.5161 0C12.6282 1.26937 12.0999 2.21784 11.4579 2.90469C10.8279 3.5868 9.96523 4.24836 8.56999 4.14798C8.47692 2.89679 9.00606 2.01866 9.64723 1.33339C10.2419 0.694755 11.332 0.126463 12.3765 0Z",
fill: "currentColor"
}
),
/* @__PURE__ */ jsx7(
"path",
{
d: "M16.6001 13.2126C16.6001 13.2252 16.6001 13.2363 16.6001 13.2482C16.208 14.3373 15.6487 15.2708 14.9661 16.137C14.3431 16.9235 13.5795 17.9818 12.2162 17.9818C11.0381 17.9818 10.2556 17.2871 9.04823 17.2681C7.77105 17.2491 7.0687 17.849 5.90097 18C5.76739 18 5.63382 18 5.50282 18C4.64534 17.8862 3.95332 17.2633 3.44918 16.7022C1.96259 15.0439 0.813822 12.902 0.600098 10.1609C0.600098 9.89215 0.600098 9.6242 0.600098 9.35547C0.690586 7.39371 1.7299 5.7987 3.11135 5.0257C3.84043 4.61469 4.84269 4.26455 5.95871 4.42105C6.437 4.48902 6.92564 4.6392 7.35395 4.78779C7.75985 4.93085 8.26745 5.18457 8.74833 5.17113C9.07408 5.16244 9.39812 5.00673 9.72646 4.89686C10.6882 4.57834 11.631 4.21317 12.8737 4.38469C14.3672 4.59177 15.4272 5.20037 16.0822 6.13936C14.8188 6.8768 13.82 7.98809 13.9906 9.88582C14.1423 11.6097 15.235 12.6182 16.6001 13.2126Z",
fill: "currentColor"
}
)
] }) });
// src/ui/icons/DiscordIcon.tsx
import { jsx as jsx8 } from "react/jsx-runtime";
var DiscordIcon = ({ className }) => /* @__PURE__ */ jsx8("svg", { viewBox: "0 0 24 24", className, children: /* @__PURE__ */ jsx8("g", { children: /* @__PURE__ */ jsx8(
"path",
{
d: "M18.6536 5.99368C17.4296 5.44168 16.1176 5.03368 14.7456 4.80168C14.7334 4.79933 14.7208 4.80084 14.7095 4.806C14.6981 4.81116 14.6887 4.81972 14.6824 4.83048C14.5144 5.12568 14.3272 5.51048 14.196 5.81448C12.7409 5.59707 11.2616 5.59707 9.80644 5.81448C9.66031 5.47757 9.49552 5.14906 9.31284 4.83048C9.30665 4.81958 9.29728 4.81084 9.28599 4.8054C9.2747 4.79997 9.26202 4.79811 9.24964 4.80008C7.87844 5.03208 6.56644 5.44008 5.34164 5.99288C5.33111 5.9973 5.32217 6.00483 5.31604 6.01448C2.82644 9.67448 2.14404 13.2441 2.47924 16.7689C2.48018 16.7775 2.48286 16.7859 2.48712 16.7934C2.49138 16.801 2.49714 16.8076 2.50404 16.8129C3.95716 17.8708 5.57791 18.6767 7.29844 19.1969C7.31044 19.2006 7.32327 19.2006 7.33525 19.1968C7.34724 19.1931 7.35783 19.1859 7.36564 19.1761C7.73588 18.6809 8.06396 18.1556 8.34644 17.6057C8.35036 17.5982 8.35262 17.5899 8.35307 17.5814C8.35351 17.5729 8.35214 17.5645 8.34903 17.5566C8.34591 17.5487 8.34115 17.5416 8.33504 17.5357C8.32894 17.5298 8.32164 17.5253 8.31364 17.5225C7.79685 17.3279 7.29611 17.093 6.81604 16.8201C6.80742 16.8152 6.80015 16.8082 6.79489 16.7997C6.78963 16.7913 6.78654 16.7817 6.78591 16.7718C6.78527 16.7619 6.78711 16.752 6.79125 16.7429C6.7954 16.7339 6.80171 16.7261 6.80964 16.7201C6.91044 16.6457 7.01124 16.5681 7.10724 16.4905C7.11588 16.4835 7.12629 16.4791 7.13731 16.4776C7.14833 16.4762 7.15952 16.4779 7.16964 16.4825C10.3112 17.8937 13.7136 17.8937 16.8184 16.4825C16.8286 16.4776 16.8399 16.4757 16.8511 16.477C16.8623 16.4783 16.8728 16.4827 16.8816 16.4897C16.9776 16.5681 17.0776 16.6457 17.1792 16.7201C17.1872 16.7259 17.1937 16.7337 17.1979 16.7426C17.2022 16.7516 17.2042 16.7615 17.2037 16.7714C17.2033 16.7813 17.2003 16.7909 17.1952 16.7994C17.1901 16.8079 17.183 16.815 17.1744 16.8201C16.696 17.0953 16.1984 17.3281 15.676 17.5217C15.668 17.5246 15.6607 17.5292 15.6546 17.5351C15.6485 17.5411 15.6437 17.5483 15.6406 17.5563C15.6375 17.5642 15.6362 17.5727 15.6366 17.5812C15.6371 17.5898 15.6393 17.5981 15.6432 17.6057C15.9312 18.1553 16.2608 18.6785 16.6232 19.1753C16.6308 19.1855 16.6413 19.1931 16.6533 19.1971C16.6653 19.2011 16.6783 19.2013 16.6904 19.1977C18.4139 18.679 20.0373 17.8727 21.492 16.8129C21.4991 16.8079 21.5051 16.8015 21.5095 16.794C21.5139 16.7866 21.5167 16.7783 21.5176 16.7697C21.9176 12.6945 20.8472 9.15368 18.6784 6.01608C18.6731 6.00588 18.6643 5.99793 18.6536 5.99368ZM8.81604 14.6225C7.87044 14.6225 7.09044 13.7673 7.09044 12.7185C7.09044 11.6689 7.85524 10.8145 8.81604 10.8145C9.78404 10.8145 10.5568 11.6761 10.5416 12.7185C10.5416 13.7681 9.77684 14.6225 8.81604 14.6225ZM15.196 14.6225C14.2496 14.6225 13.4704 13.7673 13.4704 12.7185C13.4704 11.6689 14.2344 10.8145 15.196 10.8145C16.164 10.8145 16.9368 11.6761 16.9216 12.7185C16.9216 13.7681 16.1648 14.6225 15.196 14.6225Z",
fill: "currentColor"
}
) }) });
// src/ui/icons/GoogleIcon.tsx
import { jsx as jsx9 } from "react/jsx-runtime";
var GoogleIcon = ({ className }) => /* @__PURE__ */ jsx9("svg", { viewBox: "0 0 25 24", className, children: /* @__PURE__ */ jsx9("g", { children: /* @__PURE__ */ jsx9(
"path",
{
d: "M12.7991 16.25C14.7113 16.25 16.3285 14.9872 16.8623 13.25H13.55V10.75H19.9417C20.0123 11.1561 20.0491 11.5737 20.0491 12C20.0491 12.4263 20.0123 12.8439 19.9417 13.25C19.3494 16.6584 16.3769 19.25 12.7991 19.25C8.79501 19.25 5.54907 16.0041 5.54907 12C5.54907 7.99594 8.79501 4.75 12.7991 4.75C14.6102 4.75 16.2663 5.41412 17.5369 6.51213L15.4059 8.64314C14.6861 8.08336 13.7815 7.75 12.7991 7.75C10.4519 7.75 8.54907 9.65279 8.54907 12C8.54907 14.3472 10.4519 16.25 12.7991 16.25Z",
fill: "currentColor"
}
) }) });
// src/ui/icons/PasskeyIcon.tsx
import { jsx as jsx10 } from "react/jsx-runtime";
var PasskeyIcon = ({ className }) => /* @__PURE__ */ jsx10("svg", { viewBox: "0 0 25 24", className, children: /* @__PURE__ */ jsx10("g", { children: /* @__PURE__ */ jsx10(
"path",
{
fillRule: "evenodd",
clipRule: "evenodd",
d: "M19.45 9C19.45 11.3472 17.5472 13.25 15.2 13.25C14.8898 13.25 14.5875 13.2168 14.2962 13.1537L13.7 13.75H11.95V15.5L10.7 16.75H8.94995V18.5L8.19995 19.25H4.94995V16L11.0462 9.90372C10.9832 9.61248 10.95 9.31012 10.95 9C10.95 6.65279 12.8527 4.75 15.2 4.75C17.5472 4.75 19.45 6.65279 19.45 9ZM15.7 9.12891C16.2522 9.12891 16.7 8.68119 16.7 8.12891C16.7 7.57662 16.2522 7.12891 15.7 7.12891C15.1477 7.12891 14.7 7.57662 14.7 8.12891C14.7 8.68119 15.1477 9.12891 15.7 9.12891Z",
fill: "currentColor"
}
) }) });
// src/ui/icons/WalletIcon.tsx
import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
var WalletIcon = ({ className }) => /* @__PURE__ */ jsx11("svg", { viewBox: "0 0 24 24", className, children: /* @__PURE__ */ jsxs8("g", { children: [
/* @__PURE__ */ jsxs8("g", { children: [
/* @__PURE__ */ jsx11(
"path",
{
fillRule: "evenodd",
clipRule: "evenodd",
d: "M19.25 9.91667V17.25C19.25 18.3546 18.3546 19.25 17.25 19.25H6.75C5.64543 19.25 4.75 18.3546 4.75 17.25V6.75C4.75 8.04688 5.58333 8.29036 6 8.25H17.5833C18.5038 8.25 19.25 8.99619 19.25 9.91667ZM16 15.1289C17.1046 15.1289 18 14.2335 18 13.1289C18 12.0243 17.1046 11.1289 16 11.1289C14.8954 11.1289 14 12.0243 14 13.1289C14 14.2335 14.8954 15.1289 16 15.1289Z",
fill: "currentColor"
}
),
/* @__PURE__ */ jsx11(
"path",
{
d: "M5.375 6.75C5.375 6.40482 5.09518 6.125 4.75 6.125C4.40482 6.125 4.125 6.40482 4.125 6.75H5.375ZM6 8.25V7.625C5.97988 7.625 5.95976 7.62597 5.93974 7.62791L6 8.25ZM19.875 17.25V9.91667H18.625V17.25H19.875ZM17.25 19.875C18.6997 19.875 19.875 18.6997 19.875 17.25H18.625C18.625 18.0094 18.0094 18.625 17.25 18.625V19.875ZM6.75 19.875H17.25V18.625H6.75V19.875ZM4.125 17.25C4.125 18.6997 5.30025 19.875 6.75 19.875V18.625C5.99061 18.625 5.375 18.0094 5.375 17.25H4.125ZM4.125 6.75V17.25H5.375V6.75H4.125ZM5.93974 7.62791C5.86727 7.63493 5.72987 7.61422 5.61987 7.52216C5.53136 7.44809 5.375 7.25648 5.375 6.75H4.125C4.125 7.5404 4.38531 8.11896 4.81763 8.48077C5.22846 8.82458 5.71606 8.90543 6.06026 8.87209L5.93974 7.62791ZM17.5833 7.625H6V8.875H17.5833V7.625ZM19.875 9.91667C19.875 8.65101 18.849 7.625 17.5833 7.625V8.875C18.1586 8.875 18.625 9.34137 18.625 9.91667H19.875ZM17.375 13.1289C17.375 13.8883 16.7594 14.5039 16 14.5039V15.7539C17.4497 15.7539 18.625 14.5787 18.625 13.1289H17.375ZM16 11.7539C16.7594 11.7539 17.375 12.3695 17.375 13.1289H18.625C18.625 11.6792 17.4497 10.5039 16 10.5039V11.7539ZM14.625 13.1289C14.625 12.3695 15.2406 11.7539 16 11.7539V10.5039C14.5503 10.5039 13.375 11.6792 13.375 13.1289H14.625ZM16 14.5039C15.2406 14.5039 14.625 13.8883 14.625 13.1289H13.375C13.375 14.5787 14.5503 15.7539 16 15.7539V14.5039Z",
fill: "currentColor"
}
)
] }),
/* @__PURE__ */ jsx11(
"path",
{
d: "M17.25 8.25H6.5C5.5335 8.25 4.75 7.4665 4.75 6.5C4.75 5.5335 5.5335 4.75 6.5 4.75H15.25C16.3546 4.75 17.25 5.64543 17.25 6.75V8.25ZM17.25 8.25L17.5 8.25",
stroke: "currentColor",
strokeWidth: "1.25",
strokeLinecap: "round",
strokeLinejoin: "round"
}
)
] }) });
// src/ui/icons/XIcon.tsx
import { jsx as jsx12 } from "react/jsx-runtime";
var XIcon = ({ className }) => /* @__PURE__ */ jsx12("svg", { viewBox: "0 0 24 24", className, children: /* @__PURE__ */ jsx12(
"path",
{
d: "M14.095479,10.316482L22.286354,1h-1.940718l-7.115352,8.087682L7.551414,1H1l8.589488,12.231093L1,23h1.940717 l7.509372-8.542861L16.448587,23H23L14.095479,10.316482z M11.436522,13.338465l-0.871624-1.218704l-6.924311-9.68815h2.981339 l5.58978,7.82155l0.867949,1.218704l7.26506,10.166271h-2.981339L11.436522,13.338465z",
fill: "currentColor"
}
) });
// src/ui/icons/ThirdwebTextIcon.tsx
import { jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
var ThirdwebTextIcon = (props) => {
return /* @__PURE__ */ jsxs9(
"svg",
{
width: props.height * 74 / 11,
height: props.height,
viewBox: "0 0 74 11",
fill: "none",
xmlns: "http://www.w3.org/2000/svg",
children: [
/* @__PURE__ */ jsx13(
"path",
{
fillRule: "evenodd",
clipRule: "evenodd",
d: "M34.1489 0.373291C33.5297 0.373291 33.022 0.874761 33.022 1.51414C33.022 2.14097 33.5297 2.64244 34.1489 2.64244C34.7681 2.64244 35.2758 2.14097 35.2758 1.51414C35.2758 0.874761 34.7681 0.373291 34.1489 0.373291ZM35.1396 3.21913H33.1706V9.97644H35.1396V3.21913ZM21.6787 0.624035H23.5982V3.21914H25.0718V5.02444H23.5982V7.40642C23.5982 7.75745 23.8706 8.03326 24.205 8.03326H25.0594V9.95138H24.205C22.818 9.95138 21.6787 8.81054 21.6787 7.39389V5.0119H20.7871V3.20661H21.6787V0.624035ZM29.7652 3.0687C28.8736 3.0687 28.1677 3.44481 27.8953 4.03403V0.624035H25.9263V9.96392H27.8953V6.17782C27.8953 5.388 28.403 4.83639 29.1213 4.83639C29.8519 4.83639 30.2605 5.31278 30.2605 6.11514V9.97646H32.2295V5.8644C32.2295 4.10925 31.3379 3.0687 29.7652 3.0687ZM37.9507 3.2066V4.13432C38.2479 3.45734 38.9661 3.0687 39.8701 3.05616C40.0063 3.05616 40.1797 3.0687 40.3902 3.09377V4.97429C40.1921 4.93668 39.9692 4.9116 39.7339 4.9116C38.607 4.9116 37.9507 5.55098 37.9507 6.66675V9.96392H35.9817V3.2066H37.9507ZM45.9257 4.09672C45.7275 3.50749 44.9474 3.09378 43.9443 3.09378C43.0032 3.09378 42.2106 3.43227 41.5791 4.10926C40.9599 4.7737 40.6379 5.61367 40.6379 6.59154C40.6379 7.5694 40.9599 8.39683 41.5791 9.08635C42.2106 9.7508 43.0032 10.0893 43.9443 10.0893C44.9474 10.0893 45.7275 9.67558 45.9257 9.08635V9.97646H47.8946V0.624035H45.9257V4.09672ZM45.5294 7.79506C45.195 8.12102 44.7864 8.27146 44.3034 8.27146C43.8329 8.27146 43.4242 8.10848 43.1022 7.79506C42.7679 7.45657 42.6069 7.0554 42.6069 6.59154C42.6069 6.12767 42.7679 5.7265 43.1022 5.40054C43.4366 5.06205 43.8329 4.89907 44.3034 4.89907C44.7988 4.89907 45.2074 5.06205 45.5294 5.40054C45.8761 5.7265 46.0495 6.12767 46.0495 6.59154C46.0495 7.0554 45.8761 7.45657 45.5294 7.79506ZM53.5787 3.2442L55.3619 6.45361L56.5631 3.21913H58.4949L55.7458 10.3651L53.5787 6.47868L51.4115 10.3651L48.6748 3.21913H50.6066L51.7954 6.45361L53.5787 3.2442ZM61.7394 3.05616C60.7239 3.05616 59.8694 3.38212 59.2007 4.03403C58.5444 4.6734 58.2101 5.5259 58.2101 6.57899V6.64167C58.2101 7.69476 58.5444 8.54726 59.2007 9.18664C59.8818 9.81347 60.7487 10.1394 61.8384 10.1394C62.8539 10.1394 63.6836 9.93884 64.3151 9.52513V7.78252C63.6959 8.22131 62.9034 8.43443 61.9499 8.43443C60.9097 8.43443 60.2286 7.92042 60.1914 7.11807H65.0829C65.1077 6.91748 65.12 6.69182 65.12 6.46616C65.12 5.50083 64.7981 4.69848 64.1789 4.04657C63.5597 3.38212 62.73 3.05616 61.7394 3.05616ZM60.1914 5.82679C60.2038 5.51337 60.3648 5.25009 60.662 5.03697C60.9716 4.82385 61.3183 4.71101 61.7394 4.71101C62.5195 4.71101 63.1263 5.22502 63.1263 5.82679H60.1914ZM69.8135 3.09378C70.7546 3.09378 71.5472 3.43227 72.1663 4.10925C72.7979 4.78624 73.1199 5.60113 73.1199 6.579C73.1199 7.55686 72.7979 8.38429 72.1663 9.07381C71.5472 9.73826 70.7546 10.0768 69.8135 10.0768C68.8104 10.0768 68.0302 9.66304 67.8321 9.07381V9.96392H65.8631V0.624035H67.8321V4.09672C68.0302 3.50749 68.8104 3.09378 69.8135 3.09378ZM69.4543 8.27146C69.9249 8.27146 70.3212 8.12102 70.6555 7.79506C70.9899 7.45657 71.1509 7.05539 71.1509 6.59153C71.1509 6.12767 70.9899 5.7265 70.6555 5.40054C70.3336 5.06205 69.9249 4.89907 69.4543 4.89907C68.9714 4.89907 68.5627 5.06205 68.216 5.40054C67.8816 5.7265 67.7083 6.12767 67.7083 6.59153C67.7083 7.05539 67.8816 7.45657 68.216 7.79506C68.5503 8.10848 68.959 8.27146 69.4543 8.27146Z",
fill: "currentColor"
}
),
/* @__PURE__ */ jsx13("g", { clipPath: "url(#clip0_5017_2727)", children: /* @__PURE__ */ jsx13(
"path",
{
fillRule: "evenodd",
clipRule: "evenodd",
d: "M0.045011 0.900694C-0.126602 0.467742 0.193222 0 0.661257 0H3.56697C3.83999 0 4.08181 0.162357 4.18322 0.413623L6.49609 6.18115C6.55849 6.33578 6.55849 6.50973 6.49609 6.66822L5.04128 10.2903C4.81896 10.8431 4.03111 10.8431 3.80879 10.2903L0.045011 0.900694ZM5.65759 0.881366C5.50158 0.45228 5.8214 0 6.28164 0H8.81292C9.09374 0 9.34336 0.173954 9.43697 0.432951L11.5392 6.20048C11.5899 6.34351 11.5899 6.502 11.5392 6.6489L10.2755 10.1164C10.0649 10.6962 9.23805 10.6962 9.02744 10.1164L5.65759 0.881366ZM11.3404 0C10.8724 0 10.5525 0.467742 10.7241 0.900694L14.4879 10.2903C14.7102 10.8431 15.4981 10.8431 15.7204 10.2903L17.1752 6.66822C17.2376 6.50973 17.2376 6.33578 17.1752 6.18115L14.8623 0.413623C14.7609 0.162357 14.5191 0 14.2461 0H11.3404Z",
fill: "currentColor"
}
) }),
/* @__PURE__ */ jsx13("defs", { children: /* @__PURE__ */ jsx13("clipPath", { id: "clip0_5017_2727", children: /* @__PURE__ */ jsx13("rect", { width: "17.219", height: "10.7049", fill: "white" }) }) })
]
}
);
};
// src/ui/ConnectModal/ConnectFooter.tsx
import { jsx as jsx14 } from "react/jsx-runtime";
var ConnectFooter = () => {
const { t } = useTranslation();
return /* @__PURE__ */ jsx14("div", { className: "tdk-flex tdk-items-center tdk-justify-center", children: /* @__PURE__ */ jsx14(
"a",
{
href: "https://thirdweb.com/connect?utm_source=cw_text",
target: "_blank",
rel: "noopener noreferrer",
className: "tdk-inline-flex tdk-items-center tdk-gap-1 tdk-text-silver tdk-font-semibold hover:tdk-text-white tdk-transition-colors tdk-text-xs tdk-no-underline hover:tdk-no-underline",
children: t.connect.footer({ thirdweb: /* @__PURE__ */ jsx14(ThirdwebTextIcon, { height: 13 }) })
}
) });
};
// src/ui/ConnectModal/ConnectMethodSelectionView.tsx
import { jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
var ConnectMethodSelectionView = ({
appName,
appIconUri = DEFAULT_TDK_APP_ICON_URI2,
isLoading = false,
error,
disablePasskey = true,
disableWallet = false,
onConnect
}) => {
const { t } = useTranslation();
const emailInputRef = useRef2(null);
const [email, setEmail] = useState4("");
return /* @__PURE__ */ jsxs10("div", { className: "tdk-bg-night tdk-p-8 tdk-text-silver-100 tdk-font-sans tdk-space-y-6", children: [
/* @__PURE__ */ jsxs10("div", { className: "tdk-flex tdk-items-center tdk-gap-3", children: [
/* @__PURE__ */ jsx15("div", { className: "tdk-w-12 tdk-h-12 tdk-bg-night-500 tdk-rounded-lg tdk-overflow-hidden", children: /* @__PURE__ */ jsx15("img", { src: appIconUri, alt: "", className: "tdk-w-full tdk-h-full" }) }),
/* @__PURE__ */ jsx15("div", { "aria-hidden": "true", className: "tdk-text-silver-400 tdk-text-sm", children: t.connect.header({
appName: /* @__PURE__ */ jsx15("span", { className: "tdk-text-lg tdk-block tdk-font-semibold tdk-text-silver-100", children: appName || DEFAULT_TDK_APP_NAME })
}) })
] }),
error ? /* @__PURE__ */ jsx15("p", { className: "tdk-bg-ruby-200 tdk-border tdk-border-ruby-800 tdk-text-ruby-800 tdk-px-3 tdk-py-2 tdk-rounded-md", children: error }) : null,
/* @__PURE__ */ jsxs10(
"form",
{
className: "tdk-space-y-6",
onSubmit: (e) => {
e.preventDefault();
if (email) {
onConnect("email", email);
} else {
emailInputRef.current?.focus();
}
},
children: [
/* @__PURE__ */ jsxs10("div", { className: "tdk-space-y-1.5", children: [
/* @__PURE__ */ jsx15("label", { className: "tdk-block tdk-text-sm", htmlFor: "email", children: t.connect.option.email }),
/* @__PURE__ */ jsx15(
"input",
{
ref: emailInputRef,
id: "email",
type: "email",
className: "tdk-w-full tdk-rounded-lg tdk-border tdk-border-solid tdk-border-night-500 tdk-bg-night tdk-px-3 tdk-py-2.5 tdk-text-white tdk-box-border",
value: email,
onChange: (e) => setEmail(e.target.value)
}
)
] }),
/* @__PURE__ */ jsx15(Button, { type: "submit", className: "tdk-w-full", isLoading, children: t.connect.action })
]
}
),
/* @__PURE__ */ jsxs10("div", { className: "tdk-relative tdk-flex tdk-items-center tdk-justify-center", children: [
/* @__PURE__ */ jsx15("div", { className: "tdk-h-[1px] tdk-bg-night-500 tdk-absolute tdk-left-0 tdk-right-0 tdk-z-0" }),
/* @__PURE__ */ jsx15("span", { className: "tdk-text-sm tdk-text-silver-600 tdk-px-4 tdk-uppercase tdk-bg-night tdk-z-10", children: t.connect.option.or })
] }),
/* @__PURE__ */ jsxs10("div", { className: "tdk-grid tdk-gap-2 tdk-grid-cols-2 md:tdk-grid-cols-4", children: [
/* @__PURE__ */ jsx15(
ConnectMethodButton,
{
title: t.connect.option.google,
onClick: () => onConnect("google"),
disabled: isLoading,
children: /* @__PURE__ */ jsx15(GoogleIcon, { className: "tdk-w-7 tdk-h-7" })
}
),
/* @__PURE__ */ jsx15(
ConnectMethodButton,
{
title: t.connect.option.x,
onClick: () => onConnect("x"),
disabled: isLoading,
children: /* @__PURE__ */ jsx15(XIcon, { className: "tdk-w-5 tdk-h-5" })
}
),
/* @__PURE__ */ jsx15(
ConnectMethodButton,
{
title: t.connect.option.discord,
onClick: () => onConnect("discord"),
disabled: isLoading,
children: /* @__PURE__ */ jsx15(DiscordIcon, { className: "tdk-w-6 tdk-h-6" })
}
),
/* @__PURE__ */ jsx15(
ConnectMethodButton,
{
title: t.connect.option.apple,
onClick: () => onConnect("apple"),
disabled: isLoading,
children: /* @__PURE__ */ jsx15(AppleIcon, { className: "tdk-w-5 tdk-h-5" })
}
),
!disablePasskey ? /* @__PURE__ */ jsxs10(
ConnectMethodButton,
{
className: "tdk-py-2 tdk-col-span-full",
onClick: () => onConnect("passkey"),
disabled: isLoading,
children: [
/* @__PURE__ */ jsx15(PasskeyIcon, { className: "tdk-w-6 tdk-h-6" }),
/* @__PURE__ */ jsx15("span", { className: "tdk-block", children: t.connect.option.passkey })
]
}
) : null,
!disableWallet ? /* @__PURE__ */ jsxs10(
ConnectMethodButton,
{
className: "tdk-py-2 tdk-col-span-full",
onClick: () => onConnect("wallet"),
disabled: isLoading,
children: [
/* @__PURE__ */ jsx15(WalletIcon, { className: "tdk-w-6 tdk-h-6" }),
t.connect.option.wallet
]
}
) : null
] }),
/* @__PURE__ */ jsx15(ConnectFooter, {})
] });
};
var ConnectMethodButton = ({
className,
...props
}) => {
return /* @__PURE__ */ jsx15(
"button",
{
type: "button",
className: clsx5(
"tdk-flex tdk-items-center tdk-justify-center tdk-gap-1 tdk-bg-night-500 tdk-border tdk-border-solid tdk-border-night-400 tdk-p-3 tdk-text-xs tdk-text-silver-100 tdk-transition-colors tdk-rounded-lg",
props.disabled ? "tdk-opacity-50 tdk-cursor-not-allowed" : "tdk-cursor-pointer hover:tdk-bg-cream hover:tdk-border-cream hover:tdk-text-night-800",
className
),
...props
}
);
};
// src/ui/ConnectModal/ConnectMigrateUserView.tsx
import clsx6 from "clsx";
import { useState as useState5 } from "react";
import { ZERO_ADDRESS as ZERO_ADDRESS2 } from "thirdweb";
import { shortenAddress as shortenAddress2 } from "thirdweb/utils";
// src/ui/icons/TreasureSparklesIcon.tsx
import { jsx as jsx16, jsxs as jsxs11 } from "react/jsx-runtime";
var TreasureSparklesIcon = ({ className }) => /* @__PURE__ */ jsx16("svg", { viewBox: "0 0 14 14", className, children: /* @__PURE__ */ jsxs11("g", { children: [
/* @__PURE__ */ jsx16(
"path",
{
d: "M13.8428 6.78117L11.784 6.09469C11.0279 5.84156 10.464 5.21515 10.3067 4.44716L9.43683 0.233928C9.41498 0.126667 9.31882 0.0494385 9.20517 0.0494385C9.09153 0.0494385 8.99536 0.126667 8.97351 0.233928L8.10369 4.44716C7.94633 5.21515 7.38248 5.84156 6.6263 6.09469L4.56757 6.78117C4.47141 6.8112 4.41022 6.9013 4.41022 6.99998C4.41022 7.09866 4.47578 7.18447 4.56757 7.21879L6.6263 7.90527C7.38248 8.1584 7.94633 8.78481 8.10369 9.5528L8.97351 13.766C8.99536 13.8733 9.09153 13.9505 9.20517 13.9505C9.31882 13.9505 9.41498 13.8733 9.43683 13.766L10.3067 9.5528C10.464 8.78481 11.0279 8.1584 11.784 7.90527L13.8428 7.21879