@b3dotfun/sdk 0.0.77 → 0.0.78-alpha.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/global-account/react/components/B3DynamicModal.js +18 -4
- package/dist/cjs/global-account/react/components/B3Provider/B3Provider.d.ts +4 -2
- package/dist/cjs/global-account/react/components/B3Provider/B3Provider.js +6 -3
- package/dist/cjs/global-account/react/components/B3Provider/types.d.ts +1 -0
- package/dist/cjs/global-account/react/components/B3Provider/types.js +1 -0
- package/dist/cjs/global-account/react/components/ManageAccount/BottomNavigation.js +2 -2
- package/dist/cjs/global-account/react/components/SignInWithB3/SignInWithB3Flow.js +162 -46
- package/dist/cjs/global-account/react/components/TurnkeyAuthModal.d.ts +8 -0
- package/dist/cjs/global-account/react/components/TurnkeyAuthModal.js +84 -0
- package/dist/cjs/global-account/react/components/index.d.ts +1 -0
- package/dist/cjs/global-account/react/components/index.js +6 -3
- package/dist/cjs/global-account/react/hooks/index.d.ts +1 -0
- package/dist/cjs/global-account/react/hooks/index.js +3 -1
- package/dist/cjs/global-account/react/hooks/useAuthentication.d.ts +7 -0
- package/dist/cjs/global-account/react/hooks/useTurnkeyAuth.d.ts +20 -0
- package/dist/cjs/global-account/react/hooks/useTurnkeyAuth.js +112 -0
- package/dist/cjs/global-account/react/hooks/useUserQuery.d.ts +7 -0
- package/dist/cjs/global-account/react/stores/useAuthStore.d.ts +2 -0
- package/dist/cjs/global-account/react/stores/useAuthStore.js +2 -0
- package/dist/cjs/global-account/react/stores/useModalStore.d.ts +21 -1
- package/dist/esm/global-account/react/components/B3DynamicModal.js +18 -4
- package/dist/esm/global-account/react/components/B3Provider/B3Provider.d.ts +4 -2
- package/dist/esm/global-account/react/components/B3Provider/B3Provider.js +6 -3
- package/dist/esm/global-account/react/components/B3Provider/types.d.ts +1 -0
- package/dist/esm/global-account/react/components/B3Provider/types.js +1 -0
- package/dist/esm/global-account/react/components/ManageAccount/BottomNavigation.js +2 -2
- package/dist/esm/global-account/react/components/SignInWithB3/SignInWithB3Flow.js +162 -46
- package/dist/esm/global-account/react/components/TurnkeyAuthModal.d.ts +8 -0
- package/dist/esm/global-account/react/components/TurnkeyAuthModal.js +81 -0
- package/dist/esm/global-account/react/components/index.d.ts +1 -0
- package/dist/esm/global-account/react/components/index.js +2 -0
- package/dist/esm/global-account/react/hooks/index.d.ts +1 -0
- package/dist/esm/global-account/react/hooks/index.js +1 -0
- package/dist/esm/global-account/react/hooks/useAuthentication.d.ts +7 -0
- package/dist/esm/global-account/react/hooks/useTurnkeyAuth.d.ts +20 -0
- package/dist/esm/global-account/react/hooks/useTurnkeyAuth.js +106 -0
- package/dist/esm/global-account/react/hooks/useUserQuery.d.ts +7 -0
- package/dist/esm/global-account/react/stores/useAuthStore.d.ts +2 -0
- package/dist/esm/global-account/react/stores/useAuthStore.js +2 -0
- package/dist/esm/global-account/react/stores/useModalStore.d.ts +21 -1
- package/dist/styles/index.css +1 -1
- package/dist/types/global-account/react/components/B3Provider/B3Provider.d.ts +4 -2
- package/dist/types/global-account/react/components/B3Provider/types.d.ts +1 -0
- package/dist/types/global-account/react/components/TurnkeyAuthModal.d.ts +8 -0
- package/dist/types/global-account/react/components/index.d.ts +1 -0
- package/dist/types/global-account/react/hooks/index.d.ts +1 -0
- package/dist/types/global-account/react/hooks/useAuthentication.d.ts +7 -0
- package/dist/types/global-account/react/hooks/useTurnkeyAuth.d.ts +20 -0
- package/dist/types/global-account/react/hooks/useUserQuery.d.ts +7 -0
- package/dist/types/global-account/react/stores/useAuthStore.d.ts +2 -0
- package/dist/types/global-account/react/stores/useModalStore.d.ts +21 -1
- package/package.json +2 -2
- package/src/global-account/react/components/B3DynamicModal.tsx +26 -3
- package/src/global-account/react/components/B3Provider/B3Provider.tsx +9 -0
- package/src/global-account/react/components/B3Provider/types.ts +2 -0
- package/src/global-account/react/components/ManageAccount/BottomNavigation.tsx +3 -3
- package/src/global-account/react/components/SignInWithB3/SignInWithB3Flow.tsx +170 -48
- package/src/global-account/react/components/TurnkeyAuthModal.tsx +240 -0
- package/src/global-account/react/components/index.ts +3 -0
- package/src/global-account/react/hooks/index.ts +1 -0
- package/src/global-account/react/hooks/useTurnkeyAuth.ts +138 -0
- package/src/global-account/react/stores/useAuthStore.ts +4 -0
- package/src/global-account/react/stores/useModalStore.ts +22 -0
|
@@ -14,7 +14,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
|
14
14
|
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
15
15
|
};
|
|
16
16
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
-
exports.useURLParams = exports.useUnifiedChainSwitchAndExecute = exports.useTokensFromAddress = exports.useTokenPriceWithFallback = exports.useTokenPrice = exports.useTokenFromUrl = exports.useTokenData = exports.useTokenBalancesByChain = exports.useTokenBalanceDirect = exports.useTokenBalance = exports.useSiwe = exports.useSimSvmBalance = exports.useSimBalance = exports.useSearchParamsSSR = exports.useRouter = exports.useRemoveSessionKey = exports.useQueryBSMNT = exports.useQueryB3 = exports.useProfileSettings = exports.useProfilePreference = exports.useProfile = exports.useDisplayName = exports.useOneBalance = exports.useNotifications = exports.useNativeBalanceFromRPC = exports.useNativeBalance = exports.useMediaQuery = exports.useIsomorphicLayoutEffect = exports.useIsMobile = exports.useHasMounted = exports.useHandleConnectWithPrivy = exports.useGlobalAccount = exports.useGetGeo = exports.useGetAllTWSigners = exports.useFirstEOA = exports.useExchangeRate = exports.useConnect = exports.useClient = exports.useChainSwitchWithAction = exports.useBestTransactionPath = exports.useB3EnsName = exports.useB3BalanceFromAddresses = exports.useAuthentication = exports.useAnalytics = exports.useAddTWSessionKey = exports.useAccountWallet = exports.useAccountAssets = exports.createWagmiConfig = void 0;
|
|
17
|
+
exports.useURLParams = exports.useUnifiedChainSwitchAndExecute = exports.useTurnkeyAuth = exports.useTokensFromAddress = exports.useTokenPriceWithFallback = exports.useTokenPrice = exports.useTokenFromUrl = exports.useTokenData = exports.useTokenBalancesByChain = exports.useTokenBalanceDirect = exports.useTokenBalance = exports.useSiwe = exports.useSimSvmBalance = exports.useSimBalance = exports.useSearchParamsSSR = exports.useRouter = exports.useRemoveSessionKey = exports.useQueryBSMNT = exports.useQueryB3 = exports.useProfileSettings = exports.useProfilePreference = exports.useProfile = exports.useDisplayName = exports.useOneBalance = exports.useNotifications = exports.useNativeBalanceFromRPC = exports.useNativeBalance = exports.useMediaQuery = exports.useIsomorphicLayoutEffect = exports.useIsMobile = exports.useHasMounted = exports.useHandleConnectWithPrivy = exports.useGlobalAccount = exports.useGetGeo = exports.useGetAllTWSigners = exports.useFirstEOA = exports.useExchangeRate = exports.useConnect = exports.useClient = exports.useChainSwitchWithAction = exports.useBestTransactionPath = exports.useB3EnsName = exports.useB3BalanceFromAddresses = exports.useAuthentication = exports.useAnalytics = exports.useAddTWSessionKey = exports.useAccountWallet = exports.useAccountAssets = exports.createWagmiConfig = void 0;
|
|
18
18
|
var createWagmiConfig_1 = require("../utils/createWagmiConfig");
|
|
19
19
|
Object.defineProperty(exports, "createWagmiConfig", { enumerable: true, get: function () { return createWagmiConfig_1.createWagmiConfig; } });
|
|
20
20
|
var useAccountAssets_1 = require("./useAccountAssets");
|
|
@@ -103,6 +103,8 @@ var useTokenPriceWithFallback_1 = require("./useTokenPriceWithFallback");
|
|
|
103
103
|
Object.defineProperty(exports, "useTokenPriceWithFallback", { enumerable: true, get: function () { return useTokenPriceWithFallback_1.useTokenPriceWithFallback; } });
|
|
104
104
|
var useTokensFromAddress_1 = require("./useTokensFromAddress");
|
|
105
105
|
Object.defineProperty(exports, "useTokensFromAddress", { enumerable: true, get: function () { return useTokensFromAddress_1.useTokensFromAddress; } });
|
|
106
|
+
var useTurnkeyAuth_1 = require("./useTurnkeyAuth");
|
|
107
|
+
Object.defineProperty(exports, "useTurnkeyAuth", { enumerable: true, get: function () { return useTurnkeyAuth_1.useTurnkeyAuth; } });
|
|
106
108
|
var useUnifiedChainSwitchAndExecute_1 = require("./useUnifiedChainSwitchAndExecute");
|
|
107
109
|
Object.defineProperty(exports, "useUnifiedChainSwitchAndExecute", { enumerable: true, get: function () { return useUnifiedChainSwitchAndExecute_1.useUnifiedChainSwitchAndExecute; } });
|
|
108
110
|
var useURLParams_1 = require("./useURLParams");
|
|
@@ -46,6 +46,11 @@ export declare function useAuthentication(partnerId: string): {
|
|
|
46
46
|
fid?: string | undefined;
|
|
47
47
|
};
|
|
48
48
|
}[] | undefined;
|
|
49
|
+
turnkeySubOrgs?: {
|
|
50
|
+
hasDelegatedUser?: boolean | undefined;
|
|
51
|
+
subOrgId: string;
|
|
52
|
+
accounts: Record<string, any>[];
|
|
53
|
+
}[] | undefined;
|
|
49
54
|
_id: string | {};
|
|
50
55
|
userId: string;
|
|
51
56
|
smartAccountAddress: string;
|
|
@@ -54,6 +59,8 @@ export declare function useAuthentication(partnerId: string): {
|
|
|
54
59
|
partnerIds: {
|
|
55
60
|
privyId?: string | undefined;
|
|
56
61
|
thirdwebId?: string | undefined;
|
|
62
|
+
turnkeyId?: string | undefined;
|
|
63
|
+
turnkeyOtpId?: string | undefined;
|
|
57
64
|
};
|
|
58
65
|
} | undefined;
|
|
59
66
|
refetchUser: (wallet?: Wallet) => Promise<import("@feathersjs/authentication").AuthenticationResult>;
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { TurnkeyAuthInitResponse } from "@b3dotfun/b3-api";
|
|
2
|
+
interface UseTurnkeyAuthReturn {
|
|
3
|
+
initiateLogin: (_email: string) => Promise<TurnkeyAuthInitResponse>;
|
|
4
|
+
verifyOtp: (_otpId: string, _otpCode: string) => Promise<{
|
|
5
|
+
user: any;
|
|
6
|
+
}>;
|
|
7
|
+
isLoading: boolean;
|
|
8
|
+
error: string | null;
|
|
9
|
+
clearError: () => void;
|
|
10
|
+
}
|
|
11
|
+
/**
|
|
12
|
+
* Hook for Turnkey email-based OTP authentication
|
|
13
|
+
*
|
|
14
|
+
* Usage:
|
|
15
|
+
* 1. Call initiateLogin(email) → User receives OTP email
|
|
16
|
+
* 2. Call verifyOtp(...) → Verifies OTP and authenticates with b3-api
|
|
17
|
+
* 3. User is authenticated, JWT stored in cookies automatically
|
|
18
|
+
*/
|
|
19
|
+
export declare function useTurnkeyAuth(): UseTurnkeyAuthReturn;
|
|
20
|
+
export {};
|
|
@@ -0,0 +1,112 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
exports.useTurnkeyAuth = useTurnkeyAuth;
|
|
7
|
+
const app_1 = __importDefault(require("../../app"));
|
|
8
|
+
const stores_1 = require("../stores");
|
|
9
|
+
const react_1 = require("react");
|
|
10
|
+
const useB3_1 = require("../components/B3Provider/useB3");
|
|
11
|
+
const debug_1 = require("../../../shared/utils/debug");
|
|
12
|
+
const debug = (0, debug_1.debugB3React)("useTurnkeyAuth");
|
|
13
|
+
/**
|
|
14
|
+
* Hook for Turnkey email-based OTP authentication
|
|
15
|
+
*
|
|
16
|
+
* Usage:
|
|
17
|
+
* 1. Call initiateLogin(email) → User receives OTP email
|
|
18
|
+
* 2. Call verifyOtp(...) → Verifies OTP and authenticates with b3-api
|
|
19
|
+
* 3. User is authenticated, JWT stored in cookies automatically
|
|
20
|
+
*/
|
|
21
|
+
function useTurnkeyAuth() {
|
|
22
|
+
const [isLoading, setIsLoading] = (0, react_1.useState)(false);
|
|
23
|
+
const [error, setError] = (0, react_1.useState)(null);
|
|
24
|
+
const setIsAuthenticating = (0, stores_1.useAuthStore)(state => state.setIsAuthenticating);
|
|
25
|
+
const setIsAuthenticated = (0, stores_1.useAuthStore)(state => state.setIsAuthenticated);
|
|
26
|
+
const { user } = (0, useB3_1.useB3)();
|
|
27
|
+
/**
|
|
28
|
+
* Step 1: Initiate login with email
|
|
29
|
+
* - Calls backend to create sub-org (if needed) and send OTP
|
|
30
|
+
* - Returns otpId to use in verification step
|
|
31
|
+
*/
|
|
32
|
+
const initiateLogin = (0, react_1.useCallback)(async (email) => {
|
|
33
|
+
setIsLoading(true);
|
|
34
|
+
setError(null);
|
|
35
|
+
setIsAuthenticating(true);
|
|
36
|
+
try {
|
|
37
|
+
if (!user?.userId) {
|
|
38
|
+
throw new Error("User ID is required to initiate Turnkey login.");
|
|
39
|
+
}
|
|
40
|
+
debug(`Initiating login for: ${email}`);
|
|
41
|
+
// Call FeathersJS service to initialize OTP
|
|
42
|
+
const data = await app_1.default.service("turnkey-auth").init({ email, userId: user.userId });
|
|
43
|
+
debug(`OTP initialized successfully. OtpId: ${data.otpId}`);
|
|
44
|
+
return data;
|
|
45
|
+
}
|
|
46
|
+
catch (err) {
|
|
47
|
+
debug("Error initiating login:", err);
|
|
48
|
+
const errorMessage = err.message || "Failed to send OTP email. Please try again.";
|
|
49
|
+
setError(errorMessage);
|
|
50
|
+
throw err;
|
|
51
|
+
}
|
|
52
|
+
finally {
|
|
53
|
+
setIsLoading(false);
|
|
54
|
+
setIsAuthenticating(false);
|
|
55
|
+
}
|
|
56
|
+
}, [user, setIsAuthenticating]);
|
|
57
|
+
/**
|
|
58
|
+
* Step 2: Verify OTP and authenticate
|
|
59
|
+
* - Verifies OTP with backend
|
|
60
|
+
* - Gets Turnkey session JWT
|
|
61
|
+
* - Authenticates with b3-api using "turnkey-jwt" strategy
|
|
62
|
+
* - JWT automatically stored in cookies by SDK
|
|
63
|
+
*/
|
|
64
|
+
const verifyOtp = (0, react_1.useCallback)(async (otpId, otpCode) => {
|
|
65
|
+
setIsLoading(true);
|
|
66
|
+
setError(null);
|
|
67
|
+
setIsAuthenticating(true);
|
|
68
|
+
try {
|
|
69
|
+
debug(`Verifying OTP...`, { userId: user?.userId });
|
|
70
|
+
// Step 1: Verify OTP and get Turnkey session JWT
|
|
71
|
+
const { turnkeySessionJwt } = await app_1.default.service("turnkey-auth").verify({
|
|
72
|
+
otpId,
|
|
73
|
+
otpCode,
|
|
74
|
+
});
|
|
75
|
+
debug(`OTP verified! Authenticating with b3-api...`);
|
|
76
|
+
// Step 2: Authenticate with b3-api using Turnkey JWT
|
|
77
|
+
// The SDK will automatically store the b3-api JWT in cookies
|
|
78
|
+
const authResult = await app_1.default.authenticate({
|
|
79
|
+
strategy: "turnkey-jwt",
|
|
80
|
+
accessToken: turnkeySessionJwt,
|
|
81
|
+
});
|
|
82
|
+
debug(`Successfully authenticated with b3-api!`, authResult);
|
|
83
|
+
// Update auth store to reflect authenticated state
|
|
84
|
+
setIsAuthenticated(true);
|
|
85
|
+
// Return user data
|
|
86
|
+
return {
|
|
87
|
+
user: authResult.user,
|
|
88
|
+
};
|
|
89
|
+
}
|
|
90
|
+
catch (err) {
|
|
91
|
+
debug("Error verifying OTP:", err);
|
|
92
|
+
const errorMessage = err.message || "Failed to verify OTP. Please try again.";
|
|
93
|
+
setError(errorMessage);
|
|
94
|
+
setIsAuthenticated(false);
|
|
95
|
+
throw err;
|
|
96
|
+
}
|
|
97
|
+
finally {
|
|
98
|
+
setIsLoading(false);
|
|
99
|
+
setIsAuthenticating(false);
|
|
100
|
+
}
|
|
101
|
+
}, [user, setIsAuthenticating, setIsAuthenticated]);
|
|
102
|
+
const clearError = (0, react_1.useCallback)(() => {
|
|
103
|
+
setError(null);
|
|
104
|
+
}, []);
|
|
105
|
+
return {
|
|
106
|
+
initiateLogin,
|
|
107
|
+
verifyOtp,
|
|
108
|
+
isLoading,
|
|
109
|
+
error,
|
|
110
|
+
clearError,
|
|
111
|
+
};
|
|
112
|
+
}
|
|
@@ -41,6 +41,11 @@ export declare function useUserQuery(): {
|
|
|
41
41
|
fid?: string | undefined;
|
|
42
42
|
};
|
|
43
43
|
}[] | undefined;
|
|
44
|
+
turnkeySubOrgs?: {
|
|
45
|
+
hasDelegatedUser?: boolean | undefined;
|
|
46
|
+
subOrgId: string;
|
|
47
|
+
accounts: Record<string, any>[];
|
|
48
|
+
}[] | undefined;
|
|
44
49
|
_id: string | {};
|
|
45
50
|
userId: string;
|
|
46
51
|
smartAccountAddress: string;
|
|
@@ -49,6 +54,8 @@ export declare function useUserQuery(): {
|
|
|
49
54
|
partnerIds: {
|
|
50
55
|
privyId?: string | undefined;
|
|
51
56
|
thirdwebId?: string | undefined;
|
|
57
|
+
turnkeyId?: string | undefined;
|
|
58
|
+
turnkeyOtpId?: string | undefined;
|
|
52
59
|
};
|
|
53
60
|
} | undefined;
|
|
54
61
|
setUser: (newUser?: Users) => void;
|
|
@@ -27,6 +27,8 @@ interface AuthState {
|
|
|
27
27
|
setIsAuthenticating: (isAuthenticating: boolean) => void;
|
|
28
28
|
hasStartedConnecting: boolean;
|
|
29
29
|
setHasStartedConnecting: (hasStartedConnecting: boolean) => void;
|
|
30
|
+
justCompletedLogin: boolean;
|
|
31
|
+
setJustCompletedLogin: (justCompletedLogin: boolean) => void;
|
|
30
32
|
}
|
|
31
33
|
export declare const useAuthStore: import("zustand").UseBoundStore<import("zustand").StoreApi<AuthState>>;
|
|
32
34
|
export {};
|
|
@@ -42,4 +42,6 @@ exports.useAuthStore = (0, zustand_1.create)(set => ({
|
|
|
42
42
|
setIsAuthenticating: isAuthenticating => set({ isAuthenticating: isAuthenticating }),
|
|
43
43
|
hasStartedConnecting: false,
|
|
44
44
|
setHasStartedConnecting: hasStartedConnecting => set({ hasStartedConnecting }),
|
|
45
|
+
justCompletedLogin: false,
|
|
46
|
+
setJustCompletedLogin: justCompletedLogin => set({ justCompletedLogin }),
|
|
45
47
|
}));
|
|
@@ -10,6 +10,8 @@ import { Account } from "thirdweb/wallets";
|
|
|
10
10
|
interface BaseModalProps {
|
|
11
11
|
/** Whether to show a back button in the modal header */
|
|
12
12
|
showBackButton?: boolean;
|
|
13
|
+
/** Whether the modal can be closed by clicking outside or pressing escape. Defaults to true */
|
|
14
|
+
closable?: boolean;
|
|
13
15
|
}
|
|
14
16
|
/**
|
|
15
17
|
* Props for the Sign In With B3 modal
|
|
@@ -39,6 +41,24 @@ export interface SignInWithB3ModalProps extends BaseModalProps {
|
|
|
39
41
|
/** Whether to show the signers enabled modal */
|
|
40
42
|
signersEnabled?: boolean;
|
|
41
43
|
}
|
|
44
|
+
/**
|
|
45
|
+
* Props for the Turnkey Authentication modal
|
|
46
|
+
* Handles Turnkey email/OTP authentication flow
|
|
47
|
+
*/
|
|
48
|
+
export interface TurnkeyAuthModalProps extends BaseModalProps {
|
|
49
|
+
/** Modal type identifier */
|
|
50
|
+
type: "turnkeyAuth";
|
|
51
|
+
/** Callback function called when authentication is successful */
|
|
52
|
+
onSuccess: (_user: any) => void;
|
|
53
|
+
/** Callback function called when modal is closed */
|
|
54
|
+
onClose: () => void;
|
|
55
|
+
/** Initial email to pre-fill */
|
|
56
|
+
initialEmail?: string;
|
|
57
|
+
/** Whether to skip directly to OTP step */
|
|
58
|
+
skipToOtp?: boolean;
|
|
59
|
+
/** Whether the modal can be closed - defaults to false for Turnkey */
|
|
60
|
+
closable?: boolean;
|
|
61
|
+
}
|
|
42
62
|
/**
|
|
43
63
|
* Props for the Request Permissions modal
|
|
44
64
|
* Used to request permission for session keys to interact with contracts
|
|
@@ -451,7 +471,7 @@ export interface AnySpendCollectorClubPurchaseProps extends BaseModalProps {
|
|
|
451
471
|
/**
|
|
452
472
|
* Union type of all possible modal content types
|
|
453
473
|
*/
|
|
454
|
-
export type ModalContentType = SignInWithB3ModalProps | RequestPermissionsModalProps | ManageAccountModalProps | AnySpendModalProps | AnyspendOrderDetailsProps | AnySpendNftProps | AnySpendJoinTournamentProps | AnySpendFundTournamentProps | AnySpendOrderHistoryProps | AnySpendStakeB3Props | AnySpendStakeB3ExactInProps | AnySpendStakeUpsideProps | AnySpendStakeUpsideExactInProps | AnySpendDepositUpsideProps | AnySpendBuySpinProps | AnySpendSignatureMintProps | AnySpendBondKitProps | LinkAccountModalProps | LinkNewAccountModalProps | AnySpendDepositHypeProps | AvatarEditorModalProps | DepositModalProps | SendModalProps | NotificationsModalProps | AnySpendCollectorClubPurchaseProps;
|
|
474
|
+
export type ModalContentType = SignInWithB3ModalProps | TurnkeyAuthModalProps | RequestPermissionsModalProps | ManageAccountModalProps | AnySpendModalProps | AnyspendOrderDetailsProps | AnySpendNftProps | AnySpendJoinTournamentProps | AnySpendFundTournamentProps | AnySpendOrderHistoryProps | AnySpendStakeB3Props | AnySpendStakeB3ExactInProps | AnySpendStakeUpsideProps | AnySpendStakeUpsideExactInProps | AnySpendDepositUpsideProps | AnySpendBuySpinProps | AnySpendSignatureMintProps | AnySpendBondKitProps | LinkAccountModalProps | LinkNewAccountModalProps | AnySpendDepositHypeProps | AvatarEditorModalProps | DepositModalProps | SendModalProps | NotificationsModalProps | AnySpendCollectorClubPurchaseProps;
|
|
455
475
|
/**
|
|
456
476
|
* State interface for the modal store
|
|
457
477
|
*/
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { AnySpend, AnySpendBondKit, AnySpendBuySpin, AnySpendCollectorClubPurchase, AnySpendNFT, AnyspendSignatureMint, AnySpendStakeB3, AnySpendStakeB3ExactIn, AnySpendTournament, OrderHistory, } from "../../../anyspend/react/index.js";
|
|
3
3
|
import { AnySpendDepositHype } from "../../../anyspend/react/components/AnyspendDepositHype.js";
|
|
4
|
+
import { AnySpendDepositUpside } from "../../../anyspend/react/components/AnySpendDepositUpside.js";
|
|
4
5
|
import { AnySpendStakeUpside } from "../../../anyspend/react/components/AnySpendStakeUpside.js";
|
|
5
6
|
import { AnySpendStakeUpsideExactIn } from "../../../anyspend/react/components/AnySpendStakeUpsideExactIn.js";
|
|
6
7
|
import { useGlobalAccount, useIsMobile, useModalStore } from "../../../global-account/react/index.js";
|
|
@@ -19,10 +20,10 @@ import NotificationsContent from "./ManageAccount/NotificationsContent.js";
|
|
|
19
20
|
import { RequestPermissions } from "./RequestPermissions/RequestPermissions.js";
|
|
20
21
|
import { Send } from "./Send/Send.js";
|
|
21
22
|
import { SignInWithB3Flow } from "./SignInWithB3/SignInWithB3Flow.js";
|
|
23
|
+
import { TurnkeyAuthModal } from "./TurnkeyAuthModal.js";
|
|
22
24
|
import { ToastContainer, useToastContext } from "./Toast/index.js";
|
|
23
25
|
import { Dialog, DialogContent, DialogDescription, DialogTitle } from "./ui/dialog.js";
|
|
24
26
|
import { Drawer, DrawerContent, DrawerDescription, DrawerTitle } from "./ui/drawer.js";
|
|
25
|
-
import { AnySpendDepositUpside } from "../../../anyspend/react/components/AnySpendDepositUpside.js";
|
|
26
27
|
const debug = debugB3React("B3DynamicModal");
|
|
27
28
|
export function B3DynamicModal() {
|
|
28
29
|
const isOpen = useModalStore(state => state.isOpen);
|
|
@@ -57,6 +58,7 @@ export function B3DynamicModal() {
|
|
|
57
58
|
"anySpendBuySpin",
|
|
58
59
|
"anySpendOrderHistory",
|
|
59
60
|
"signInWithB3",
|
|
61
|
+
"turnkeyAuth",
|
|
60
62
|
"anySpendSignatureMint",
|
|
61
63
|
"anySpendBondKit",
|
|
62
64
|
"linkAccount",
|
|
@@ -80,10 +82,12 @@ export function B3DynamicModal() {
|
|
|
80
82
|
];
|
|
81
83
|
// Check if current content type is in freestyle types
|
|
82
84
|
const isFreestyleType = freestyleTypes.includes(contentType?.type);
|
|
85
|
+
// Determine if modal should be closable - defaults to true unless explicitly set to false
|
|
86
|
+
const isClosable = contentType?.closable !== false;
|
|
83
87
|
const hideCloseButton = true;
|
|
84
88
|
// Build content class using cn utility
|
|
85
89
|
// eslint-disable-next-line tailwindcss/no-custom-classname
|
|
86
|
-
const contentClass = cn("b3-modal", theme === "dark" && "dark", fullWidthTypes.includes(contentType?.type) && "w-full", isFreestyleType && "b3-modal-freestyle", contentType?.type === "signInWithB3" && "p-0", contentType?.type === "anySpend" && "md:p-0", contentType?.type === "send" && "p-0", contentType?.type === "manageAccount" && " md:p-0 md:pt-2", contentType?.type === "linkAccount" && "md:p-0");
|
|
90
|
+
const contentClass = cn("b3-modal", theme === "dark" && "dark", fullWidthTypes.includes(contentType?.type) && "w-full", isFreestyleType && "b3-modal-freestyle", contentType?.type === "signInWithB3" && "p-0", contentType?.type === "turnkeyAuth" && "p-0", contentType?.type === "anySpend" && "md:p-0", contentType?.type === "send" && "p-0", contentType?.type === "manageAccount" && " md:p-0 md:pt-2", contentType?.type === "linkAccount" && "md:p-0");
|
|
87
91
|
debug("contentType", contentType);
|
|
88
92
|
const renderContent = () => {
|
|
89
93
|
if (!contentType)
|
|
@@ -91,6 +95,8 @@ export function B3DynamicModal() {
|
|
|
91
95
|
switch (contentType.type) {
|
|
92
96
|
case "signInWithB3":
|
|
93
97
|
return _jsx(SignInWithB3Flow, { ...contentType });
|
|
98
|
+
case "turnkeyAuth":
|
|
99
|
+
return _jsx(TurnkeyAuthModal, { ...contentType });
|
|
94
100
|
case "requestPermissions":
|
|
95
101
|
return _jsx(RequestPermissions, { ...contentType });
|
|
96
102
|
case "manageAccount":
|
|
@@ -148,12 +154,20 @@ export function B3DynamicModal() {
|
|
|
148
154
|
const ModalContent = isMobile ? DrawerContent : DialogContent;
|
|
149
155
|
const ModalTitle = isMobile ? DrawerTitle : DialogTitle;
|
|
150
156
|
const ModalDescription = isMobile ? DrawerDescription : DialogDescription;
|
|
151
|
-
|
|
157
|
+
// Create a wrapper for onOpenChange that respects closable property
|
|
158
|
+
const handleOpenChange = (open) => {
|
|
159
|
+
// Only allow closing if the modal is closable
|
|
160
|
+
if (!open && !isClosable) {
|
|
161
|
+
return;
|
|
162
|
+
}
|
|
163
|
+
setB3ModalOpen(open);
|
|
164
|
+
};
|
|
165
|
+
return (_jsxs(ModalComponent, { open: isOpen, onOpenChange: handleOpenChange, children: [_jsxs(ModalContent, { className: cn(contentClass, "rounded-2xl bg-white shadow-xl dark:bg-gray-900", "border border-gray-200 dark:border-gray-800", (contentType?.type === "manageAccount" ||
|
|
152
166
|
contentType?.type === "deposit" ||
|
|
153
167
|
contentType?.type === "send" ||
|
|
154
168
|
contentType?.type === "avatarEditor" ||
|
|
155
169
|
contentType?.type === "notifications") &&
|
|
156
|
-
"p-0", "mx-auto w-full max-w-md sm:max-w-lg"), hideCloseButton: hideCloseButton, children: [_jsx(ModalTitle, { className: "sr-only hidden", children: contentType?.type || "Modal" }), _jsx(ModalDescription, { className: "sr-only hidden", children: contentType?.type || "Modal Body" }), _jsxs("div", { className: cn("no-scrollbar flex max-h-[90dvh] flex-col overflow-auto sm:max-h-[80dvh]"), children: [!hideCloseButton && (_jsxs("button", { onClick: navigateBack, className: "flex items-center gap-2 px-6 py-4 text-gray-600 transition-colors hover:text-gray-900 dark:text-gray-400 dark:hover:text-white", children: [_jsxs("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { d: "M15.8337 10H4.16699", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M10.0003 15.8334L4.16699 10L10.0003 4.16669", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })] }), _jsx("span", { className: "font-inter text-sm font-semibold", children: "Back" })] })), _jsx("div", { className: "flex-1", children: renderContent() }), _jsx(AnimatePresence, { children: toasts.length > 0 && (_jsx(motion.div, { initial: { height: 0 }, animate: { height: "auto" }, exit: { height: 0 }, transition: { duration: 0.3, ease: "easeInOut" }, className: "toast-section relative z-10 overflow-hidden bg-white dark:border-gray-800 dark:bg-gray-900", children: _jsx(motion.div, { initial: { opacity: 0, y: -10 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: -10 }, transition: { duration: 0.2, delay: 0.1 }, className: "p-4 pt-0", children: _jsx(ToastContainer, { toasts: toasts, onDismiss: removeToast, theme: theme }) }) })) })] })] }), isOpen && (_jsx("style", { children: `
|
|
170
|
+
"p-0", "mx-auto w-full max-w-md sm:max-w-lg"), hideCloseButton: hideCloseButton, onEscapeKeyDown: !isClosable ? e => e.preventDefault() : undefined, onPointerDownOutside: !isClosable ? e => e.preventDefault() : undefined, onInteractOutside: !isClosable ? e => e.preventDefault() : undefined, children: [_jsx(ModalTitle, { className: "sr-only hidden", children: contentType?.type || "Modal" }), _jsx(ModalDescription, { className: "sr-only hidden", children: contentType?.type || "Modal Body" }), _jsxs("div", { className: cn("b3-modal-content no-scrollbar dark:bg-b3-background flex max-h-[90dvh] flex-col overflow-auto sm:max-h-[80dvh]"), children: [!hideCloseButton && (_jsxs("button", { onClick: navigateBack, className: "flex items-center gap-2 px-6 py-4 text-gray-600 transition-colors hover:text-gray-900 dark:text-gray-400 dark:hover:text-white", children: [_jsxs("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { d: "M15.8337 10H4.16699", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M10.0003 15.8334L4.16699 10L10.0003 4.16669", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })] }), _jsx("span", { className: "font-inter text-sm font-semibold", children: "Back" })] })), _jsx("div", { className: "flex-1", children: renderContent() }), _jsx(AnimatePresence, { children: toasts.length > 0 && (_jsx(motion.div, { initial: { height: 0 }, animate: { height: "auto" }, exit: { height: 0 }, transition: { duration: 0.3, ease: "easeInOut" }, className: "toast-section relative z-10 overflow-hidden bg-white dark:border-gray-800 dark:bg-gray-900", children: _jsx(motion.div, { initial: { opacity: 0, y: -10 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: -10 }, transition: { duration: 0.2, delay: 0.1 }, className: "p-4 pt-0", children: _jsx(ToastContainer, { toasts: toasts, onDismiss: removeToast, theme: theme }) }) })) })] })] }), isOpen && (_jsx("style", { children: `
|
|
157
171
|
.modal-inner-content {
|
|
158
172
|
transition: margin-bottom 0.3s ease-in-out;
|
|
159
173
|
margin-bottom: ${toasts.length > 0 ? "0px" : "23px"} !important;
|
|
@@ -9,7 +9,7 @@ import { B3ContextType } from "./types";
|
|
|
9
9
|
/**
|
|
10
10
|
* Main B3Provider component
|
|
11
11
|
*/
|
|
12
|
-
export declare function B3Provider({ theme, children, accountOverride, environment, automaticallySetFirstEoa, simDuneApiKey, toaster: _toaster, clientType, rpcUrls, partnerId, onConnect, connectors, overrideDefaultConnectors, createClientReferenceId, }: {
|
|
12
|
+
export declare function B3Provider({ theme, children, accountOverride, environment, automaticallySetFirstEoa, simDuneApiKey, toaster: _toaster, clientType, rpcUrls, partnerId, onConnect, connectors, overrideDefaultConnectors, createClientReferenceId, enableTurnkey, }: {
|
|
13
13
|
theme: "light" | "dark";
|
|
14
14
|
children: React.ReactNode;
|
|
15
15
|
accountOverride?: Account;
|
|
@@ -27,11 +27,12 @@ export declare function B3Provider({ theme, children, accountOverride, environme
|
|
|
27
27
|
connectors?: CreateConnectorFn[];
|
|
28
28
|
overrideDefaultConnectors?: boolean;
|
|
29
29
|
createClientReferenceId?: (params: CreateOrderParams | CreateOnrampOrderParams) => Promise<string>;
|
|
30
|
+
enableTurnkey?: boolean;
|
|
30
31
|
}): import("react/jsx-runtime").JSX.Element;
|
|
31
32
|
/**
|
|
32
33
|
* Inner provider component that provides the actual B3Context
|
|
33
34
|
*/
|
|
34
|
-
export declare function InnerProvider({ children, accountOverride, environment, defaultPermissions, automaticallySetFirstEoa, theme, clientType, partnerId, createClientReferenceId, }: {
|
|
35
|
+
export declare function InnerProvider({ children, accountOverride, environment, defaultPermissions, automaticallySetFirstEoa, theme, clientType, partnerId, createClientReferenceId, enableTurnkey, }: {
|
|
35
36
|
children: React.ReactNode;
|
|
36
37
|
accountOverride?: Account;
|
|
37
38
|
environment: B3ContextType["environment"];
|
|
@@ -41,4 +42,5 @@ export declare function InnerProvider({ children, accountOverride, environment,
|
|
|
41
42
|
clientType?: ClientType;
|
|
42
43
|
partnerId: string;
|
|
43
44
|
createClientReferenceId?: (params: CreateOrderParams | CreateOnrampOrderParams) => Promise<string>;
|
|
45
|
+
enableTurnkey?: boolean;
|
|
44
46
|
}): import("react/jsx-runtime").JSX.Element;
|
|
@@ -30,7 +30,7 @@ const queryClient = new QueryClient();
|
|
|
30
30
|
*/
|
|
31
31
|
export function B3Provider({ theme = "light", children, accountOverride, environment, automaticallySetFirstEoa, simDuneApiKey,
|
|
32
32
|
// deprecated since v0.0.87
|
|
33
|
-
toaster: _toaster, clientType = "rest", rpcUrls, partnerId, onConnect, connectors, overrideDefaultConnectors = false, createClientReferenceId, }) {
|
|
33
|
+
toaster: _toaster, clientType = "rest", rpcUrls, partnerId, onConnect, connectors, overrideDefaultConnectors = false, createClientReferenceId, enableTurnkey = false, }) {
|
|
34
34
|
// Initialize Google Analytics on mount
|
|
35
35
|
useEffect(() => {
|
|
36
36
|
loadGA4Script();
|
|
@@ -40,22 +40,24 @@ toaster: _toaster, clientType = "rest", rpcUrls, partnerId, onConnect, connector
|
|
|
40
40
|
setClientType(clientType);
|
|
41
41
|
}, [clientType]);
|
|
42
42
|
const wagmiConfig = createWagmiConfig({ partnerId, rpcUrls, connectors, overrideDefaultConnectors });
|
|
43
|
-
return (_jsx(ThirdwebProvider, { children: _jsx(WagmiProvider, { config: wagmiConfig, reconnectOnMount: false, children: _jsx(QueryClientProvider, { client: queryClient, children: _jsx(TooltipProvider, { children: _jsx(ToastProvider, { children: _jsx(LocalSDKProvider, { onConnectCallback: onConnect, children: _jsxs(InnerProvider, { accountOverride: accountOverride, environment: environment, theme: theme, automaticallySetFirstEoa: !!automaticallySetFirstEoa, clientType: clientType, partnerId: partnerId, createClientReferenceId: createClientReferenceId, children: [_jsx(ToastContextConnector, {}), _jsxs(RelayKitProviderWrapper, { simDuneApiKey: simDuneApiKey, children: [children, _jsx(StyleRoot, { id: "b3-root" })] })] }) }) }) }) }) }) }));
|
|
43
|
+
return (_jsx(ThirdwebProvider, { children: _jsx(WagmiProvider, { config: wagmiConfig, reconnectOnMount: false, children: _jsx(QueryClientProvider, { client: queryClient, children: _jsx(TooltipProvider, { children: _jsx(ToastProvider, { children: _jsx(LocalSDKProvider, { onConnectCallback: onConnect, children: _jsxs(InnerProvider, { accountOverride: accountOverride, environment: environment, theme: theme, automaticallySetFirstEoa: !!automaticallySetFirstEoa, clientType: clientType, partnerId: partnerId, createClientReferenceId: createClientReferenceId, enableTurnkey: enableTurnkey, children: [_jsx(ToastContextConnector, {}), _jsxs(RelayKitProviderWrapper, { simDuneApiKey: simDuneApiKey, children: [children, _jsx(StyleRoot, { id: "b3-root" })] })] }) }) }) }) }) }) }));
|
|
44
44
|
}
|
|
45
45
|
/**
|
|
46
46
|
* Inner provider component that provides the actual B3Context
|
|
47
47
|
*/
|
|
48
|
-
export function InnerProvider({ children, accountOverride, environment, defaultPermissions = DEFAULT_PERMISSIONS, automaticallySetFirstEoa, theme = "light", clientType = "socket", partnerId, createClientReferenceId, }) {
|
|
48
|
+
export function InnerProvider({ children, accountOverride, environment, defaultPermissions = DEFAULT_PERMISSIONS, automaticallySetFirstEoa, theme = "light", clientType = "socket", partnerId, createClientReferenceId, enableTurnkey, }) {
|
|
49
49
|
const activeAccount = useActiveAccount();
|
|
50
50
|
const [manuallySelectedWallet, setManuallySelectedWallet] = useState(undefined);
|
|
51
51
|
const wallets = useConnectedWallets();
|
|
52
52
|
const isAuthenticated = useAuthStore(state => state.isAuthenticated);
|
|
53
53
|
const isConnected = useAuthStore(state => state.isConnected);
|
|
54
|
+
const justCompletedLogin = useAuthStore(state => state.justCompletedLogin);
|
|
54
55
|
const setActiveWallet = useSetActiveWallet();
|
|
55
56
|
const { user, setUser, refetchUser } = useAuthentication(partnerId);
|
|
56
57
|
debug("@@B3Provider:isConnected", isConnected);
|
|
57
58
|
debug("@@wallets", wallets);
|
|
58
59
|
debug("@@B3Provider:user", user);
|
|
60
|
+
debug("@@B3Provider:justCompletedLogin", justCompletedLogin);
|
|
59
61
|
// Use given accountOverride or activeAccount from thirdweb
|
|
60
62
|
const effectiveAccount = isAuthenticated ? accountOverride || activeAccount : undefined;
|
|
61
63
|
const setWallet = useCallback((wallet) => {
|
|
@@ -100,6 +102,7 @@ export function InnerProvider({ children, accountOverride, environment, defaultP
|
|
|
100
102
|
clientType,
|
|
101
103
|
partnerId: partnerId,
|
|
102
104
|
createClientReferenceId,
|
|
105
|
+
enableTurnkey,
|
|
103
106
|
}, children: _jsx(InnerProvider2, { children: children }) }));
|
|
104
107
|
}
|
|
105
108
|
const InnerProvider2 = ({ children }) => {
|
|
@@ -11,11 +11,11 @@ const SettingsIcon = () => {
|
|
|
11
11
|
};
|
|
12
12
|
const BottomNavigation = () => {
|
|
13
13
|
const setB3ModalContentType = useModalStore(state => state.setB3ModalContentType);
|
|
14
|
-
return (_jsx("div", { className: "b3-modal-bottom-navigation sticky bottom-0 left-0 w-full rounded-b-xl border-t border-gray-200 bg-[#FAFAFA]", children: _jsxs(TabsListPrimitive, { className: "flex h-[68px] w-full items-center justify-center gap-4 border-none bg-transparent", children: [_jsxs(TabTriggerPrimitive, { value: "home", className: "data-[state=active]:border-b3-primary-blue group flex flex-initial flex-col items-center gap-1 border-r-0 border-t-0 px-6 pb-2 pt-2.5 text-[#a0a0ab] data-[state=active]:border-t-4 data-[state=active]:text-[#18181B]", children: [_jsx(HomeIcon, {}), _jsx("span", { className: "text-b3-grey font-neue-montreal-semibold text-xs", children: "Home" })] }), _jsxs(TabTriggerPrimitive, { value: "swap", className: "data-[state=active]:border-b3-primary-blue group flex flex-initial flex-col items-center gap-1 border-r-0 border-t-0 px-6 pb-2 pt-2.5 text-[#a0a0ab] data-[state=active]:border-t-4 data-[state=active]:text-[#18181B]", onClick: () => {
|
|
14
|
+
return (_jsx("div", { className: "b3-modal-bottom-navigation sticky bottom-0 left-0 w-full rounded-b-xl border-t border-gray-200 bg-[#FAFAFA]", children: _jsxs(TabsListPrimitive, { className: "flex h-[68px] w-full items-center justify-center gap-4 border-none bg-transparent", children: [_jsxs(TabTriggerPrimitive, { value: "home", className: "data-[state=active]:border-b3-primary-blue group flex flex-initial flex-col items-center gap-1 border-r-0 border-t-0 px-6 pb-2 pt-2.5 text-[#a0a0ab] data-[state=active]:border-t-4 data-[state=active]:text-[#18181B] dark:data-[state=active]:text-white", children: [_jsx(HomeIcon, {}), _jsx("span", { className: "text-b3-grey font-neue-montreal-semibold text-xs", children: "Home" })] }), _jsxs(TabTriggerPrimitive, { value: "swap", className: "data-[state=active]:border-b3-primary-blue group flex flex-initial flex-col items-center gap-1 border-r-0 border-t-0 px-6 pb-2 pt-2.5 text-[#a0a0ab] data-[state=active]:border-t-4 data-[state=active]:text-[#18181B] dark:data-[state=active]:text-white", onClick: () => {
|
|
15
15
|
setB3ModalContentType({
|
|
16
16
|
type: "anySpend",
|
|
17
17
|
showBackButton: true,
|
|
18
18
|
});
|
|
19
|
-
}, children: [_jsx(SwapIcon, {}), _jsx("span", { className: "text-b3-grey font-neue-montreal-semibold text-xs", children: "Swap" })] }), _jsxs(TabTriggerPrimitive, { value: "settings", className: "data-[state=active]:border-b3-primary-blue group flex flex-initial flex-col items-center gap-1 border-r-0 border-t-0 px-6 pb-2 pt-2.5 text-[#a0a0ab] data-[state=active]:border-t-4 data-[state=active]:text-[#18181B]", children: [_jsx(SettingsIcon, {}), _jsx("span", { className: "text-b3-grey font-neue-montreal-semibold text-xs", children: "Settings" })] })] }) }));
|
|
19
|
+
}, children: [_jsx(SwapIcon, {}), _jsx("span", { className: "text-b3-grey font-neue-montreal-semibold text-xs", children: "Swap" })] }), _jsxs(TabTriggerPrimitive, { value: "settings", className: "data-[state=active]:border-b3-primary-blue group flex flex-initial flex-col items-center gap-1 border-r-0 border-t-0 px-6 pb-2 pt-2.5 text-[#a0a0ab] data-[state=active]:border-t-4 data-[state=active]:text-[#18181B] dark:data-[state=active]:text-white", children: [_jsx(SettingsIcon, {}), _jsx("span", { className: "text-b3-grey font-neue-montreal-semibold text-xs", children: "Settings" })] })] }) }));
|
|
20
20
|
};
|
|
21
21
|
export default BottomNavigation;
|