@dynamic-labs/sdk-react-core
Version:
A React SDK for implementing wallet web3 authentication and authorization to your website.
280 lines (277 loc) • 17.1 kB
JavaScript
'use client'
import { __awaiter } from '../../../../../../../_virtual/_tslib.js';
import { useCallback } from 'react';
import { EmbeddedWalletVersionEnum, JwtVerifiedCredentialFormatEnum } from '@dynamic-labs/sdk-api-core';
import '../../../../../context/DynamicContext/DynamicContext.js';
import '../../../../../store/state/loadingAndLifecycle/loadingAndLifecycle.js';
import { logger } from '../../../../../shared/logger.js';
import '@dynamic-labs/iconic';
import '@dynamic-labs/wallet-connector-core';
import 'react/jsx-runtime';
import { useViewContext } from '../../../../../context/ViewContext/ViewContext.js';
import '@dynamic-labs/wallet-book';
import '@dynamic-labs/utils';
import '../../../../constants/colors.js';
import '../../../../constants/values.js';
import '../../../../../shared/consts/index.js';
import { dynamicEvents } from '../../../../../events/dynamicEvents.js';
import '../../../../../context/CaptchaContext/CaptchaContext.js';
import '../../../../../context/ErrorContext/ErrorContext.js';
import { findEmbeddedWalletFromVerifiedCredentials } from '../../../../functions/findEmbeddedWalletFromVerifiedCredentials/findEmbeddedWalletFromVerifiedCredentials.js';
import { findTurnkeyWalletByChain } from '../../../../functions/findTurnkeyWallet/findTurnkeyWallet.js';
import '@dynamic-labs/multi-wallet';
import 'react-international-phone';
import { getUserWalletsFromVerifiedCredentials } from '../../../../functions/getUserWalletsFromVerifiedCredentials/getUserWalletsFromVerifiedCredentials.js';
import '../../../../../store/state/nonce/nonce.js';
import '../../../../../store/state/projectSettings/projectSettings.js';
import { getUserVerifiedCredentialType } from '../../../../functions/getUserVerifiedCredentialType/getUserVerifiedCredentialType.js';
import { updatePrimaryWalletId } from '../../../../functions/updatePrimaryWalletId/updatePrimaryWalletId.js';
import '../../../../../store/state/connectedWalletsInfo/connectedWalletsInfo.js';
import '../../../../../store/state/dynamicContextProps/dynamicContextProps.js';
import '../../../../../store/state/primaryWalletId/primaryWalletId.js';
import '../../../../../context/AccessDeniedContext/AccessDeniedContext.js';
import '../../../../../context/AccountExistsContext/AccountExistsContext.js';
import '../../../../../context/UserWalletsContext/UserWalletsContext.js';
import '../../../../../config/ApiEndpoint.js';
import '../../../../../store/state/user/user.js';
import '../../../../../locale/locale.js';
import { USER_NOT_LOGGED_IN } from '../../../../constants/errors.js';
import '../../../../../store/state/authMode/authMode.js';
import '../../../../../context/VerificationContext/VerificationContext.js';
import 'react-dom';
import { useCreateDynamicEmbeddedWalletMutation } from '../../../useCreateDynamicEmbeddedWalletMutation/useCreateDynamicEmbeddedWalletMutation.js';
import '../../../../../context/ThemeContext/ThemeContext.js';
import { useSmartWallets } from '../../../useSmartWallets/useSmartWallets.js';
import '../../../useUserUpdateRequest/useUpdateUser/userFieldsSchema.js';
import 'bs58';
import '@dynamic-labs/types';
import '../../../../../context/SocialRedirectContext/SocialRedirectContext.js';
import '../../../../../context/LoadingContext/LoadingContext.js';
import '../../../../../context/WalletContext/WalletContext.js';
import { findPrimaryEmbeddedChain } from '../../../../../views/Passkey/utils/findPrimaryEmbeddedChain/findPrimaryEmbeddedChain.js';
import '../constants.js';
import { findPasskeyEmailWalletConnector } from '../../../../../views/Passkey/utils/findPasskeyEmailWalletConnector/findPasskeyEmailWalletConnector.js';
import { findSmartWallet, initializeSmartWallet } from '../../../useWalletConnectors/utils/smartWallet/smartWallet.js';
import 'yup';
import '../../../../../context/MockContext/MockContext.js';
import '../../../../../views/CollectUserDataView/useFields.js';
import '../../../../../context/FieldsStateContext/FieldsStateContext.js';
import '../../../../../context/UserFieldEditorContext/UserFieldEditorContext.js';
import '@dynamic-labs/rpc-providers';
import '../../../../../store/state/walletOptions/walletOptions.js';
import '../../../../functions/compareChains/compareChains.js';
import 'react-i18next';
import '../../../../../components/Accordion/components/AccordionItem/AccordionItem.js';
import '../../../../../components/Alert/Alert.js';
import '../../../../../components/ShadowDOM/ShadowDOM.js';
import '../../../../../components/IconButton/IconButton.js';
import '../../../../../components/InlineWidget/InlineWidget.js';
import '../../../../../components/Input/Input.js';
import '../../../../../components/IsBrowser/IsBrowser.js';
import '../../../../../components/MenuList/Dropdown/Dropdown.js';
import '../../../../../components/OverlayCard/OverlayCard.js';
import '../../../../../components/Transition/ZoomTransition/ZoomTransition.js';
import '../../../../../components/Transition/SlideInUpTransition/SlideInUpTransition.js';
import '../../../../../components/Transition/OpacityTransition/OpacityTransition.js';
import '../../../../../components/PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.js';
import '../../../../../components/Popper/Popper/Popper.js';
import '../../../../../components/Popper/PopperContext/PopperContext.js';
import 'react-focus-lock';
import 'qrcode';
import 'formik';
import '../../../useSubdomainCheck/useSubdomainCheck.js';
import '../../../../../context/WalletGroupContext/WalletGroupContext.js';
import '../../../../../context/IpConfigurationContext/IpConfigurationContext.js';
import '../../../../../context/ConnectWithOtpContext/ConnectWithOtpContext.js';
import '../../../../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.js';
import '@hcaptcha/react-hcaptcha';
import '../../../../../widgets/DynamicWidget/context/DynamicWidgetContext.js';
import '../../../../../context/FooterAnimationContext/index.js';
import '../../../../../context/ErrorContext/hooks/useErrorText/useErrorText.js';
import '../../../../../context/PasskeyContext/PasskeyContext.js';
import '../../../../../widgets/DynamicWidget/helpers/convertExchangeKeyAndProviderEnum.js';
import '../../../../../store/state/sendBalances.js';
import '../../../../../store/state/connectorsInitializing/connectorsInitializing.js';
import '../../../../../components/OverlayCardBase/OverlayCardTarget/OverlayCardTarget.js';
import '../../../../../widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.js';
import '../../../../../views/TransactionConfirmationView/TransactionConfirmationView.js';
import '../../../../../widgets/DynamicWidget/views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.js';
import '../../../../../context/OnrampContext/OnrampContext.js';
import '../../../../../widgets/DynamicWidget/views/ReceiveWalletFunds/ReceiveWalletFunds.js';
import '../../../../../../index.js';
import '../../../../../store/state/tokenBalances.js';
import '../../../../../shared/utils/functions/getInitialUrl/getInitialUrl.js';
import { useInternalDynamicContext } from '../../../../../context/DynamicContext/useDynamicContext/useInternalDynamicContext/useInternalDynamicContext.js';
// Hook exposed to customers and used internally to trigger embedded wallet creation
const useTurnkey = () => {
const { projectSettings, walletConnectorOptions, setShowAuthFlow, environmentId, user, primaryWallet, } = useInternalDynamicContext();
const { pushView } = useViewContext();
const { createDynamicEmbeddedWalletMutation } = useCreateDynamicEmbeddedWalletMutation();
const { getEOAWallet } = useSmartWallets();
const startHeadlessEmbeddedWalletCreationFlow = useCallback((chains, options) => __awaiter(void 0, void 0, void 0, function* () {
return new Promise((resolve, reject) => {
// register the event listeners before calling create embedded wallet
// as the event might fire before the listeners are registered.
dynamicEvents.once('embeddedWalletCreated', (wallet) => {
resolve(wallet);
});
dynamicEvents.once('embeddedWalletFailed', (error) => reject(error));
createDynamicEmbeddedWalletMutation({
chains,
environmentId,
options,
walletConnectorOptions,
withAuthenticator: false,
})
.then(() => {
setShowAuthFlow(false, { performMultiWalletChecks: false }); // close email otp pin modal
})
.catch((error) => {
reject(error);
});
});
}), [
createDynamicEmbeddedWalletMutation,
environmentId,
walletConnectorOptions,
setShowAuthFlow,
]);
const startPasskeyEmbeddedWalletCreationFlow = useCallback((chains) => __awaiter(void 0, void 0, void 0, function* () {
setShowAuthFlow(true, {
ignoreIfIsEmbeddedWidget: false,
performMultiWalletChecks: false,
});
pushView('passkey-intro', { chains });
return new Promise((resolve, reject) => {
dynamicEvents.once('embeddedWalletCreated', (wallet) => resolve(wallet));
dynamicEvents.once('embeddedWalletFailed', (error) => {
// when creating a passkey, if user cancels the passkey modal more than once
// it will throw this DOMException, but we don't want to let user to have access
// to the app before they've a passkey correctly setup
if (error instanceof DOMException &&
error.name === 'NotAllowedError') {
logger.error('User cancelled the passkey creation.', error);
return;
}
reject(error);
});
});
}), [setShowAuthFlow, pushView]);
const returnEmbeddedWallet = useCallback((embeddedWalletVerifiedCredential) => __awaiter(void 0, void 0, void 0, function* () {
var _a, _b;
const { chain } = embeddedWalletVerifiedCredential;
const turnkeyWallet = findTurnkeyWalletByChain(walletConnectorOptions, chain);
let newPrimaryWalletId = null;
// if user already has embedded wallet, set it as primary wallet
if (user) {
(_a = turnkeyWallet === null || turnkeyWallet === void 0 ? void 0 : turnkeyWallet.walletConnector) === null || _a === void 0 ? void 0 : _a.setVerifiedCredentials(user.verifiedCredentials);
const smartWallet = findSmartWallet(embeddedWalletVerifiedCredential, user.verifiedCredentials);
if (smartWallet) {
yield initializeSmartWallet({
account: smartWallet,
primaryWalletId: smartWallet.id,
verifiedCredentials: user.verifiedCredentials,
walletConnectorOptions,
});
newPrimaryWalletId = smartWallet.id;
}
else {
newPrimaryWalletId = embeddedWalletVerifiedCredential.id;
}
}
if (newPrimaryWalletId) {
updatePrimaryWalletId(newPrimaryWalletId);
}
/** It's not authenticated if it still hasn't created a passkey */
const isAuthenticated = Boolean((_b = embeddedWalletVerifiedCredential.walletProperties) === null || _b === void 0 ? void 0 : _b.isAuthenticatorAttached);
if (!(turnkeyWallet === null || turnkeyWallet === void 0 ? void 0 : turnkeyWallet.walletConnector)) {
throw new Error('Could not find the embedded wallet connector');
}
const connector = turnkeyWallet.walletConnector;
const passkeyWallet = connector.createWallet({
address: (yield connector.getAddress()) || '',
chain: connector.connectedChain,
connector,
id: embeddedWalletVerifiedCredential.id,
isAuthenticated,
key: embeddedWalletVerifiedCredential.walletName || connector.key || '',
});
return Promise.resolve(passkeyWallet);
}), [walletConnectorOptions, user]);
const createTurnkeyWallet = useCallback((chains, options) => __awaiter(void 0, void 0, void 0, function* () {
var _c, _d, _e, _f, _g, _h;
if (!user) {
throw new Error(USER_NOT_LOGGED_IN);
}
const isManualMode = ((_c = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk.embeddedWallets) === null || _c === void 0 ? void 0 : _c.automaticEmbeddedWalletCreation) === false;
const shouldCreateV2WalletsByDefault = ((_d = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk.embeddedWallets) === null || _d === void 0 ? void 0 : _d.defaultWalletVersion) ===
EmbeddedWalletVersionEnum.V2;
const primaryChain = findPrimaryEmbeddedChain(projectSettings);
// if embedded wallet already exists
// get the one with the primary chain if `chains` is undefined
const embeddedWalletVerifiedCredential = findEmbeddedWalletFromVerifiedCredentials(user, chains !== null && chains !== void 0 ? chains : [primaryChain]);
const userWalletsCredentials = getUserWalletsFromVerifiedCredentials(user);
// If the user doesn't have a wallet, or if the customer is in Manual
// Mode, we should attempt to create a new wallet. Note that if in manual
// mode, the check for the existance of an embedded wallet was arbitrarily
// added as a safeguard given the pre-existing condition we're overriding.
if (!(userWalletsCredentials === null || userWalletsCredentials === void 0 ? void 0 : userWalletsCredentials.length) ||
(!embeddedWalletVerifiedCredential && isManualMode)) {
const hasEmailVC = getUserVerifiedCredentialType(user, JwtVerifiedCredentialFormatEnum.Email);
if ((!((_e = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk.embeddedWallets) === null || _e === void 0 ? void 0 : _e.forceAuthenticatorAtSignup) &&
hasEmailVC) ||
(options === null || options === void 0 ? void 0 : options.webAuthnAttestation) ||
shouldCreateV2WalletsByDefault) {
// create embedded wallet fully headless
return startHeadlessEmbeddedWalletCreationFlow(chains, options);
}
else {
// show the passkey view to create an embedded wallet
return startPasskeyEmbeddedWalletCreationFlow(chains);
}
}
else {
// the pregenerated wallet must have been created at this point in the
// backend if this called as part of a new user sign up.
if (embeddedWalletVerifiedCredential &&
user.newUser &&
((_f = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk.embeddedWallets) === null || _f === void 0 ? void 0 : _f.automaticEmbeddedWalletCreation)) {
const walletConnector = findPasskeyEmailWalletConnector(walletConnectorOptions, primaryChain);
if (!walletConnector) {
throw new Error('Could not find the embedded wallet connector');
}
const wallet = walletConnector.createWallet({
address: (yield walletConnector.getAddress()) || '',
chain: walletConnector.connectedChain,
connector: walletConnector,
id: embeddedWalletVerifiedCredential.id,
isAuthenticated: Boolean((_g = embeddedWalletVerifiedCredential === null || embeddedWalletVerifiedCredential === void 0 ? void 0 : embeddedWalletVerifiedCredential.walletProperties) === null || _g === void 0 ? void 0 : _g.isAuthenticatorAttached),
key: (_h = embeddedWalletVerifiedCredential.walletName) !== null && _h !== void 0 ? _h : walletConnector.key,
});
updatePrimaryWalletId(embeddedWalletVerifiedCredential.id);
dynamicEvents.emit('embeddedWalletCreated', wallet, embeddedWalletVerifiedCredential, user);
}
}
setShowAuthFlow(false, { performMultiWalletChecks: false });
// if user logged in with MM for example, just continue the flow
if (!embeddedWalletVerifiedCredential) {
throw new Error('Primary wallet is not an embedded wallet');
}
// if user already has embedded wallet, returns it
return returnEmbeddedWallet(embeddedWalletVerifiedCredential);
}), [
user,
projectSettings,
primaryWallet,
getEOAWallet,
setShowAuthFlow,
returnEmbeddedWallet,
startHeadlessEmbeddedWalletCreationFlow,
startPasskeyEmbeddedWalletCreationFlow,
walletConnectorOptions,
]);
return {
createTurnkeyWallet,
};
};
export { useTurnkey };