@dynamic-labs/sdk-react-core 0.19.0-alpha.7 → 0.19.0-alpha.9

package/src/lib/utils/hooks/useCreateUserProfileByJWTCallback/useCreateUserProfileByJWTCallback.cjs

@@ -21,6 +21,7 @@ var index = require('../../functions/storeAuthToken/index.cjs');
 require('@dynamic-labs/multi-wallet');
 var createUserProfile = require('../../functions/createUserProfile/createUserProfile.cjs');
 require('@dynamic-labs/sdk-api');
+require('../../../config/ApiEndpoint.cjs');
 
 const useCreateUserProfileByJWTCallback = () => {
     const { setUser, handleLogOut } = useInternalDynamicContext.useInternalDynamicContext();

package/src/lib/utils/hooks/useCreateUserProfileByJWTCallback/useCreateUserProfileByJWTCallback.js

@@ -17,6 +17,7 @@ import { storeAuthToken } from '../../functions/storeAuthToken/index.js';
 import '@dynamic-labs/multi-wallet';
 import { createUserProfile } from '../../functions/createUserProfile/createUserProfile.js';
 import '@dynamic-labs/sdk-api';
+import '../../../config/ApiEndpoint.js';
 
 const useCreateUserProfileByJWTCallback = () => {
     const { setUser, handleLogOut } = useInternalDynamicContext();

package/src/lib/utils/hooks/useDynamicLayoutData/useDynamicLayoutData.cjs

@@ -6,7 +6,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var reactI18next = require('react-i18next');
 var iconic = require('@dynamic-labs/iconic');
 
-const useDynamicLayoutData = ({ view }) => {
+const useDynamicLayoutData = ({ view, authMode, }) => {
     const { t } = reactI18next.useTranslation();
     if (view === 'no-access') {
         const headerData = {
@@ -21,14 +21,17 @@ const useDynamicLayoutData = ({ view }) => {
         'login-with-wallet-only': {
             heading: t('dyn_login.helper.wallet_only'),
         },
+        'passkey-intro': {
+            heading: t('dyn_passkey_intro.helper.title'),
+        },
         'pending-connect': {
-            heading: t('dyn_login.helper.pending_connect'),
+            heading: t('dyn_login.helper.pending_connect.title'),
         },
         'pending-signature': {
-            heading: t('dyn_login.helper.pending_signature'),
+            heading: t('dyn_login.helper.pending_signature.title'),
         },
         'pending-signature-without-back-button': {
-            heading: t('dyn_login.helper.pending_signature_without_back_button'),
+            heading: t('dyn_login.helper.pending_signature_without_back_button.title'),
         },
         'qr-code': {
             heading: t('dyn_login.helper.qr_code.title'),
@@ -53,7 +56,9 @@ const useDynamicLayoutData = ({ view }) => {
             heading: t('dyn_login.title.wallet_only'),
         },
         'multi-wallet-wallet-list': {
-            heading: t('dyn_wallet_list.title.link'),
+            heading: authMode === 'connect-only'
+                ? t('dyn_wallet_list.title.connect')
+                : t('dyn_wallet_list.title.link'),
         },
         'wallet-connect-mobile-wallets-list': {
             heading: (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(iconic.WalletConnectIcon, { style: { height: '1.5rem', width: '1.5rem' } }), ' ', t('dyn_wallet_conect.mobile.wallet_list.title')] })),

package/src/lib/utils/hooks/useDynamicLayoutData/useDynamicLayoutData.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import { ViewType } from '../../../context/ViewContext';
+import { AuthModeType } from '../../../shared';
 interface FooterContentProps {
     heading: string;
 }
@@ -8,8 +9,9 @@ interface HeaderContentProps {
 }
 interface DynamicLayoutProps {
     view: ViewType;
+    authMode: AuthModeType;
 }
-export declare const useDynamicLayoutData: ({ view }: DynamicLayoutProps) => {
+export declare const useDynamicLayoutData: ({ view, authMode, }: DynamicLayoutProps) => {
     headerData: {
         heading: any;
     };

package/src/lib/utils/hooks/useDynamicLayoutData/useDynamicLayoutData.js

@@ -2,7 +2,7 @@ import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { useTranslation } from 'react-i18next';
 import { WalletConnectIcon } from '@dynamic-labs/iconic';
 
-const useDynamicLayoutData = ({ view }) => {
+const useDynamicLayoutData = ({ view, authMode, }) => {
     const { t } = useTranslation();
     if (view === 'no-access') {
         const headerData = {
@@ -17,14 +17,17 @@ const useDynamicLayoutData = ({ view }) => {
         'login-with-wallet-only': {
             heading: t('dyn_login.helper.wallet_only'),
         },
+        'passkey-intro': {
+            heading: t('dyn_passkey_intro.helper.title'),
+        },
         'pending-connect': {
-            heading: t('dyn_login.helper.pending_connect'),
+            heading: t('dyn_login.helper.pending_connect.title'),
         },
         'pending-signature': {
-            heading: t('dyn_login.helper.pending_signature'),
+            heading: t('dyn_login.helper.pending_signature.title'),
         },
         'pending-signature-without-back-button': {
-            heading: t('dyn_login.helper.pending_signature_without_back_button'),
+            heading: t('dyn_login.helper.pending_signature_without_back_button.title'),
         },
         'qr-code': {
             heading: t('dyn_login.helper.qr_code.title'),
@@ -49,7 +52,9 @@ const useDynamicLayoutData = ({ view }) => {
             heading: t('dyn_login.title.wallet_only'),
         },
         'multi-wallet-wallet-list': {
-            heading: t('dyn_wallet_list.title.link'),
+            heading: authMode === 'connect-only'
+                ? t('dyn_wallet_list.title.connect')
+                : t('dyn_wallet_list.title.link'),
         },
         'wallet-connect-mobile-wallets-list': {
             heading: (jsxs(Fragment, { children: [jsx(WalletConnectIcon, { style: { height: '1.5rem', width: '1.5rem' } }), ' ', t('dyn_wallet_conect.mobile.wallet_list.title')] })),

package/src/lib/utils/hooks/useFetchProjectSettings/useFetchProjectSettings.cjs

@@ -21,6 +21,7 @@ require('../../../shared/consts/index.cjs');
 var validators = require('../../../context/DynamicContext/validators.cjs');
 require('@dynamic-labs/multi-wallet');
 var index = require('../../functions/getEnabledProviders/index.cjs');
+require('../../../config/ApiEndpoint.cjs');
 
 const useFetchProjectSettings = ({ authToken, environmentId, maxRetries = 2, dynamicContextProps, }) => {
     const [lsSettings, setLsSettings, removeLsSettings] = useLocalStorage.useLocalStorage(localStorage.PROJECT_SETTINGS_STORAGE_KEY, undefined, validators.validateLocalStorageExpiry);
@@ -44,7 +45,16 @@ const useFetchProjectSettings = ({ authToken, environmentId, maxRetries = 2, dyn
             environmentId &&
             retries < maxRetries) {
             setLoading(true);
-            api.sendDynamicProps(environmentId, { dynamicContextProps });
+            // we ReactNode components are not being serialized properly
+            // remove them for now and deal with them later
+            // context: https://linear.app/dynamic-labs/issue/GVTY-328/[starknet]-sdk-api-is-not-serializing-react-components
+            // future work: https://linear.app/dynamic-labs/issue/GVTY-330/bug-figure-out-why-react-components-are-not
+            const updatedDynamicProps = {
+                settings: Object.assign(Object.assign({}, dynamicContextProps.settings), { customPrivacyPolicy: Boolean(dynamicContextProps.settings.customPrivacyPolicy), customTermsOfServices: Boolean(dynamicContextProps.settings.customTermsOfServices), policiesConsentInnerComponent: Boolean(dynamicContextProps.settings.policiesConsentInnerComponent) }),
+            };
+            api.sendDynamicProps(environmentId, {
+                dynamicContextProps: updatedDynamicProps,
+            });
             api.fetchProjectSettings(environmentId)
                 .then((response) => {
                 if (!response)

package/src/lib/utils/hooks/useFetchProjectSettings/useFetchProjectSettings.js

@@ -17,6 +17,7 @@ import '../../../shared/consts/index.js';
 import { validateLocalStorageExpiry } from '../../../context/DynamicContext/validators.js';
 import '@dynamic-labs/multi-wallet';
 import { getEnabledProviders } from '../../functions/getEnabledProviders/index.js';
+import '../../../config/ApiEndpoint.js';
 
 const useFetchProjectSettings = ({ authToken, environmentId, maxRetries = 2, dynamicContextProps, }) => {
     const [lsSettings, setLsSettings, removeLsSettings] = useLocalStorage(PROJECT_SETTINGS_STORAGE_KEY, undefined, validateLocalStorageExpiry);
@@ -40,7 +41,16 @@ const useFetchProjectSettings = ({ authToken, environmentId, maxRetries = 2, dyn
             environmentId &&
             retries < maxRetries) {
             setLoading(true);
-            sendDynamicProps(environmentId, { dynamicContextProps });
+            // we ReactNode components are not being serialized properly
+            // remove them for now and deal with them later
+            // context: https://linear.app/dynamic-labs/issue/GVTY-328/[starknet]-sdk-api-is-not-serializing-react-components
+            // future work: https://linear.app/dynamic-labs/issue/GVTY-330/bug-figure-out-why-react-components-are-not
+            const updatedDynamicProps = {
+                settings: Object.assign(Object.assign({}, dynamicContextProps.settings), { customPrivacyPolicy: Boolean(dynamicContextProps.settings.customPrivacyPolicy), customTermsOfServices: Boolean(dynamicContextProps.settings.customTermsOfServices), policiesConsentInnerComponent: Boolean(dynamicContextProps.settings.policiesConsentInnerComponent) }),
+            };
+            sendDynamicProps(environmentId, {
+                dynamicContextProps: updatedDynamicProps,
+            });
             fetchProjectSettings(environmentId)
                 .then((response) => {
                 if (!response)

package/src/lib/utils/hooks/useHandleWalletsToConnect/useHandleWalletsToConnect.cjs

@@ -6,7 +6,7 @@ var useInternalDynamicContext = require('../../../context/DynamicContext/useInte
 var ViewContext = require('../../../context/ViewContext/ViewContext.cjs');
 
 const useHandleWalletsToConnect = () => {
-    const { walletsToConnectByChain, setWalletsToConnectByChain, setShowAuthFlow, setIsFullyConnected, isFullyConnected, } = useInternalDynamicContext.useInternalDynamicContext();
+    const { walletsToConnectByChain, setWalletsToConnectByChain, setShowAuthFlow, setIsFullyConnected, selectedWalletConnector, isFullyConnected, } = useInternalDynamicContext.useInternalDynamicContext();
     const { setView, goToInitialView } = ViewContext.useViewContext();
     const handleWalletsToConnect = () => {
         if (!walletsToConnectByChain) {
@@ -19,6 +19,20 @@ const useHandleWalletsToConnect = () => {
             setShowAuthFlow(false);
             return goToInitialView();
         }
+        if (!selectedWalletConnector || !selectedWalletConnector.connectedChain) {
+            setShowAuthFlow(false);
+            return goToInitialView();
+        }
+        // Assuming based on the logic above that we have at least one more chain/wallet to connect
+        // If the current connected wallet is already connected to the bridge,
+        // we can go directly to bridge-next-wallet-connection since we know there is a different chain to connect
+        const walletChainsToConnect = walletsToConnectByChain
+            .filter((wallet) => wallet.numberOfWallets > 0)
+            .map((wallet) => wallet.chain.toString());
+        if (!walletChainsToConnect.includes(selectedWalletConnector.connectedChain)) {
+            setView('bridge-next-wallet-connection');
+            return;
+        }
         const [firstWallet, ...restOfTheWallets] = walletsToConnectByChain;
         if (firstWallet.numberOfWallets > 1) {
             const updatedWallets = [

package/src/lib/utils/hooks/useHandleWalletsToConnect/useHandleWalletsToConnect.js

@@ -2,7 +2,7 @@ import { useInternalDynamicContext } from '../../../context/DynamicContext/useIn
 import { useViewContext } from '../../../context/ViewContext/ViewContext.js';
 
 const useHandleWalletsToConnect = () => {
-    const { walletsToConnectByChain, setWalletsToConnectByChain, setShowAuthFlow, setIsFullyConnected, isFullyConnected, } = useInternalDynamicContext();
+    const { walletsToConnectByChain, setWalletsToConnectByChain, setShowAuthFlow, setIsFullyConnected, selectedWalletConnector, isFullyConnected, } = useInternalDynamicContext();
     const { setView, goToInitialView } = useViewContext();
     const handleWalletsToConnect = () => {
         if (!walletsToConnectByChain) {
@@ -15,6 +15,20 @@ const useHandleWalletsToConnect = () => {
             setShowAuthFlow(false);
             return goToInitialView();
         }
+        if (!selectedWalletConnector || !selectedWalletConnector.connectedChain) {
+            setShowAuthFlow(false);
+            return goToInitialView();
+        }
+        // Assuming based on the logic above that we have at least one more chain/wallet to connect
+        // If the current connected wallet is already connected to the bridge,
+        // we can go directly to bridge-next-wallet-connection since we know there is a different chain to connect
+        const walletChainsToConnect = walletsToConnectByChain
+            .filter((wallet) => wallet.numberOfWallets > 0)
+            .map((wallet) => wallet.chain.toString());
+        if (!walletChainsToConnect.includes(selectedWalletConnector.connectedChain)) {
+            setView('bridge-next-wallet-connection');
+            return;
+        }
         const [firstWallet, ...restOfTheWallets] = walletsToConnectByChain;
         if (firstWallet.numberOfWallets > 1) {
             const updatedWallets = [

package/src/lib/utils/hooks/useKYCFlag/useKYCFlag.cjs

@@ -20,6 +20,7 @@ require('ethers');
 require('../../../shared/consts/index.cjs');
 require('@dynamic-labs/multi-wallet');
 var isSocialKycEnabled = require('../../functions/isSocialKycEnabled/isSocialKycEnabled.cjs');
+require('../../../config/ApiEndpoint.cjs');
 
 /* eslint-disable max-len */
 /**

package/src/lib/utils/hooks/useKYCFlag/useKYCFlag.js

@@ -16,6 +16,7 @@ import 'ethers';
 import '../../../shared/consts/index.js';
 import '@dynamic-labs/multi-wallet';
 import { isSocialKycEnabled } from '../../functions/isSocialKycEnabled/isSocialKycEnabled.js';
+import '../../../config/ApiEndpoint.js';
 
 /* eslint-disable max-len */
 /**

package/src/lib/utils/hooks/useMultiWalletFlag/useMultiWalletFlag.cjs

@@ -17,7 +17,6 @@ require('../../constants/colors.cjs');
 require('../../../shared/utils/classes/storage/localStorage.cjs');
 require('ethers');
 require('../../../shared/consts/index.cjs');
-var useOnlyConnectedMode = require('../useOnlyConnectedMode/useOnlyConnectedMode.cjs');
 
 const isMultiWalletEnabledInURL = () => {
     const flag = 'multiwallet.widget';
@@ -30,9 +29,6 @@ const isMultiWalletEnabledInURL = () => {
 };
 const useMultiWalletFlag = () => {
     const { multiWallet: isMultiWalletEnabled } = useInternalDynamicContext.useInternalDynamicContext();
-    const isOnlyConnected = useOnlyConnectedMode.useOnlyConnectedMode();
-    if (isOnlyConnected)
-        return false;
     return isMultiWalletEnabled && isMultiWalletEnabledInURL();
 };
 

package/src/lib/utils/hooks/useMultiWalletFlag/useMultiWalletFlag.js

@@ -13,7 +13,6 @@ import '../../constants/colors.js';
 import '../../../shared/utils/classes/storage/localStorage.js';
 import 'ethers';
 import '../../../shared/consts/index.js';
-import { useOnlyConnectedMode } from '../useOnlyConnectedMode/useOnlyConnectedMode.js';
 
 const isMultiWalletEnabledInURL = () => {
     const flag = 'multiwallet.widget';
@@ -26,9 +25,6 @@ const isMultiWalletEnabledInURL = () => {
 };
 const useMultiWalletFlag = () => {
     const { multiWallet: isMultiWalletEnabled } = useInternalDynamicContext();
-    const isOnlyConnected = useOnlyConnectedMode();
-    if (isOnlyConnected)
-        return false;
     return isMultiWalletEnabled && isMultiWalletEnabledInURL();
 };
 

package/src/lib/utils/hooks/usePrimaryWalletId/usePrimaryWalletId.cjs

@@ -19,6 +19,7 @@ var useLocalStorage = require('../../../shared/utils/hooks/useLocalStorage/useLo
 require('../../../shared/consts/index.cjs');
 var primaryWalletIdValidator = require('../useWalletConnectors/utils/primaryWalletIdValidator/primaryWalletIdValidator.cjs');
 require('@dynamic-labs/multi-wallet');
+require('../../../config/ApiEndpoint.cjs');
 
 const usePrimaryWalletId = (internalEvents) => {
     const [primaryWalletId, setPrimaryWalletIdState, clearPrimaryWalletIdStorage,] = useLocalStorage.useLocalStorage(localStorage.PRIMARY_WALLET_ID, undefined, primaryWalletIdValidator.primaryWalletIdValidator);

package/src/lib/utils/hooks/usePrimaryWalletId/usePrimaryWalletId.js

@@ -15,6 +15,7 @@ import { useLocalStorage } from '../../../shared/utils/hooks/useLocalStorage/use
 import '../../../shared/consts/index.js';
 import { primaryWalletIdValidator } from '../useWalletConnectors/utils/primaryWalletIdValidator/primaryWalletIdValidator.js';
 import '@dynamic-labs/multi-wallet';
+import '../../../config/ApiEndpoint.js';
 
 const usePrimaryWalletId = (internalEvents) => {
     const [primaryWalletId, setPrimaryWalletIdState, clearPrimaryWalletIdStorage,] = useLocalStorage(PRIMARY_WALLET_ID, undefined, primaryWalletIdValidator);

package/src/lib/utils/hooks/useSocialAccounts/useSocialAccounts.cjs

@@ -9,50 +9,36 @@ var useInternalDynamicContext = require('../../../context/DynamicContext/useInte
 var api = require('../../../data/api.cjs');
 var useUpdateUserProfileByJWTCallback = require('../useUpdateUserProfileByJWTCallback/useUpdateUserProfileByJWTCallback.cjs');
 require('@dynamic-labs/sdk-api');
-var logger = require('../../../shared/logger.cjs');
+require('../../../shared/logger.cjs');
 require('@dynamic-labs/iconic');
 require('@dynamic-labs/wallet-connector-core');
 require('react/jsx-runtime');
 require('../../../context/ViewContext/ViewContext.cjs');
 require('@dynamic-labs/wallet-book');
 require('@dynamic-labs/utils');
+var localStorage$1 = require('../../constants/localStorage.cjs');
 require('../../constants/colors.cjs');
-require('../../../shared/utils/classes/storage/localStorage.cjs');
+var localStorage = require('../../../shared/utils/classes/storage/localStorage.cjs');
 require('ethers');
 require('../../../shared/consts/index.cjs');
 require('@dynamic-labs/multi-wallet');
 var getAuthToken = require('../../functions/getAuthToken/getAuthToken.cjs');
 var index = require('../../functions/getEnabledOAuthProviders/index.cjs');
 var isSocialKycEnabled = require('../../functions/isSocialKycEnabled/isSocialKycEnabled.cjs');
-var randomString = require('../../functions/randomString/randomString.cjs');
-var stringifyURIQuery = require('../../functions/stringifyURIQuery/stringifyURIQuery.cjs');
-var digestSHA256 = require('../../functions/digestSHA256/digestSHA256.cjs');
-var encodeBase64URL = require('../../functions/encodeBase64URL/encodeBase64URL.cjs');
-var getRedirectURIOrigin = require('../../functions/getRedirectURIOrigin/getRedirectURIOrigin.cjs');
+require('../../../config/ApiEndpoint.cjs');
+var useSocialAuth = require('../useSocialAuth/useSocialAuth.cjs');
 
-const socialProviders = [
-    'discord',
-    'facebook',
-    'github',
-    'google',
-    'instagram',
-    'twitch',
-    'twitter',
-];
-// pkce params are only required for twitter and break if added for other providers, like google
-// so we should only add provider that support pkce to this list
-const providersRequiringPkce = ['twitter', 'github'];
-const providersWithoutWindowOpenerRefence = ['twitter'];
+// Hook exposed to customers and used internally to handle social account linking
 const useSocialAccounts = ({ sessionTimeout } = {
     sessionTimeout: 10000,
 }) => {
     var _a;
     const { environmentId, user, projectSettings, onboardingOnlyJwt } = useInternalDynamicContext.useInternalDynamicContext();
     const { updateUserProfileByJWT } = useUpdateUserProfileByJWTCallback.useUpdateUserProfileByJWTCallback();
-    const [isProcessing, setIsProcessing] = React.useState(false);
-    const [error, setError] = React.useState();
-    const providersWaitingOauthMessages = React.useRef({});
-    const authWindowInterval = React.useRef();
+    const { handleError, setError, setIsProcessing, checkValidProvider, error, isProcessing, connectSocialAccount, } = useSocialAuth.useSocialAuth({
+        authMode: 'link',
+        sessionTimeout,
+    });
     const userJwt = (_a = getAuthToken.getAuthToken()) !== null && _a !== void 0 ? _a : onboardingOnlyJwt;
     const oauthProviders = index.getEnabledOAuthProviders(projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.providers);
     const verifiedOAuthCredentialsMap = React.useMemo(() => {
@@ -66,47 +52,11 @@ const useSocialAccounts = ({ sessionTimeout } = {
             ];
         })));
     }, [user === null || user === void 0 ? void 0 : user.verifiedCredentials]);
-    const handleError = (code, message) => {
-        logger.logger.error(message);
-        setIsProcessing(false);
-        setError({ code, message });
-    };
-    const addOAuthIFrame = (url) => {
-        const container = document.getElementById('oauth-iframe-container');
-        let oauthIFrame = document.getElementById('oauth-iframe');
-        if (!container || oauthIFrame) {
-            return;
-        }
-        oauthIFrame = document.createElement('iframe');
-        oauthIFrame.setAttribute('id', 'oauth-iframe');
-        oauthIFrame.setAttribute('src', url);
-        container.appendChild(oauthIFrame);
-    };
-    const removeOAuthIFrame = () => {
-        const oauthIFrame = document.getElementById('oauth-iframe');
-        if (oauthIFrame) {
-            oauthIFrame.remove();
-        }
-    };
-    const checkValidProvider = (provider) => {
-        if (!provider) {
-            handleError(types.SocialOAuthErrorCode.NO_PROVIDER, 'Provider is required');
-            return false;
-        }
-        if (!socialProviders.includes(provider)) {
-            handleError(types.SocialOAuthErrorCode.INVALID_PROVIDER, `Invalid social provider. Valid providers are: ${socialProviders.join(', ')}`);
-            return false;
-        }
-        return true;
-    };
     const checkValidOAuthLinking = (provider) => {
         if (!isSocialKycEnabled.isSocialKycEnabled(projectSettings)) {
             handleError(types.SocialOAuthErrorCode.SOCIAL_LINKING_NOT_ENABLED, 'Social linking is not enabled on the dashboard');
             return false;
         }
-        if (!checkValidProvider(provider)) {
-            return false;
-        }
         const verifiedCredential = verifiedOAuthCredentialsMap[provider];
         if (verifiedCredential) {
             handleError(types.SocialOAuthErrorCode.ACCOUNT_ALREADY_LINKED, `Account already linked for provider: ${provider}`);
@@ -120,112 +70,10 @@ const useSocialAccounts = ({ sessionTimeout } = {
         return true;
     };
     const linkSocialAccount = (provider) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
-        var _b;
-        clearInterval(authWindowInterval.current);
-        setError(undefined);
-        setIsProcessing(true);
-        // invalid linking request
-        if (!checkValidOAuthLinking(provider)) {
-            return;
-        }
-        const state = randomString.randomString(8);
-        const verifier = randomString.randomString(43);
-        const clearListeners = () => {
-            removeOAuthIFrame();
-            window.removeEventListener('message', handleAuthWindowMessage);
-            providersWaitingOauthMessages.current = Object.assign(Object.assign({}, providersWaitingOauthMessages.current), { [provider]: false });
-        };
-        const handleAuthWindowMessage = (event) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
-            var _c;
-            const message = event.data;
-            const isAuthorizationMessage = (message === null || message === void 0 ? void 0 : message.type) === 'authorization_response';
-            if (isAuthorizationMessage) {
-                logger.logger.debug('Message received', { data: message });
-            }
-            const isValidMessage = isAuthorizationMessage && (message === null || message === void 0 ? void 0 : message.provider) === provider;
-            // don't process imvalid messages for provider
-            if (!isValidMessage) {
-                return;
-            }
-            setIsProcessing(true);
-            if (!((_c = providersWaitingOauthMessages.current) === null || _c === void 0 ? void 0 : _c[provider])) {
-                handleError(types.SocialOAuthErrorCode.SESSION_TIMEOUT, `Linking ${provider} account session timeout.`);
-                return;
-            }
-            clearListeners();
-            const { code, error } = message;
-            if (error && error !== 'undefined') {
-                handleError(types.SocialOAuthErrorCode.OAUTH_ERROR, `Failed to link ${provider} social account: ${error}`);
-                return;
-            }
-            if (!code) {
-                handleError(types.SocialOAuthErrorCode.NO_AUTH_CODE, `Failed to link ${provider} social account: no authorization code`);
-                return;
-            }
-            const jwt = yield api.verifyOAuth(environmentId, provider, {
-                code,
-                codeVerifier: verifier,
-                state,
-            }, String(userJwt));
-            if (!jwt) {
-                handleError(types.SocialOAuthErrorCode.VERIFICATION_ERROR, `Failed to link social account: ${provider}`);
-                return;
-            }
-            yield updateUserProfileByJWT(jwt);
-            setIsProcessing(false);
-        });
-        const loginUrl = yield api.getOauthLoginUrl(environmentId, provider, String(userJwt));
-        if (!loginUrl) {
-            handleError(types.SocialOAuthErrorCode.NO_OAUTH_URL, `Failed to get login url to link social account: ${provider}`);
-            return;
-        }
-        // we need to use an iframe to be the intermediary in communications between the popup and the sdk
-        // because of twitter limitations with accessing the window.opener and BroadcastChannel not working between
-        // different origins (our api redirect page and the app where the sdk is running)
-        const oauthIFrameUrl = `${getRedirectURIOrigin.getRedirectURIOrigin(loginUrl)}/sdkoauth`;
-        addOAuthIFrame(oauthIFrameUrl);
-        let oauthLoginUrl = loginUrl;
-        if (providersRequiringPkce.includes(provider)) {
-            const digest = yield digestSHA256.digestSHA256(verifier);
-            const pkceParams = stringifyURIQuery.stringifyURIQuery({
-                code_challenge: encodeBase64URL.encodeBase64URL(digest),
-                code_challenge_method: 'S256',
-                state: state,
-            });
-            oauthLoginUrl = `${loginUrl}&${pkceParams}`;
-        }
-        if (!((_b = providersWaitingOauthMessages.current) === null || _b === void 0 ? void 0 : _b[provider])) {
-            window.addEventListener('message', handleAuthWindowMessage);
-            providersWaitingOauthMessages.current = Object.assign(Object.assign({}, providersWaitingOauthMessages.current), { [provider]: true });
-        }
-        const authWindow = window.open(oauthLoginUrl, '_blank', 'width=500,height=600');
-        if (!providersWithoutWindowOpenerRefence.includes(provider)) {
-            // For provider that support window.opener, we need to clear all states/listeners when the window is closed
-            authWindowInterval.current = setInterval(() => {
-                if (!(authWindow === null || authWindow === void 0 ? void 0 : authWindow.closed)) {
-                    return;
-                }
-                clearInterval(authWindowInterval.current);
-                setIsProcessing(false);
-            });
-        }
-        else {
-            // For provider that don't support window.opener, we need to use a timeout to try to detect when the
-            // window is closed
-            authWindowInterval.current = setInterval(() => {
-                var _a;
-                // user didn't complete oauth
-                if ((_a = providersWaitingOauthMessages.current) === null || _a === void 0 ? void 0 : _a[provider]) {
-                    clearListeners();
-                    handleError(types.SocialOAuthErrorCode.OAUTH_WINDOW_TIMEOUT, `Linking ${provider} account window timeout.`);
-                }
-                setIsProcessing(false);
-                clearInterval(authWindowInterval.current);
-            }, sessionTimeout);
-        }
+        connectSocialAccount(provider, checkValidOAuthLinking);
     });
     const unlinkSocialAccount = (provider) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
-        var _d;
+        var _b;
         setError(undefined);
         setIsProcessing(true);
         if (!checkValidProvider(provider)) {
@@ -237,9 +85,11 @@ const useSocialAccounts = ({ sessionTimeout } = {
             return;
         }
         try {
+            const primaryWalletId = localStorage.LocalStorage.getFromLS(localStorage$1.PRIMARY_WALLET_ID);
             const jwt = yield api.unlinkOAuth({
                 environmentId,
-                verifiedCrentialId: (_d = verifiedCredential.id) !== null && _d !== void 0 ? _d : '',
+                primaryWalletId,
+                verifiedCrentialId: (_b = verifiedCredential.id) !== null && _b !== void 0 ? _b : '',
             }, String(userJwt));
             if (!jwt) {
                 handleError(types.SocialOAuthErrorCode.UNLINK_ERROR, `Failed to unlink social account: ${provider} | ${verifiedCredential.id}`);

package/src/lib/utils/hooks/useSocialAccounts/useSocialAccounts.d.ts

@@ -1,10 +1,10 @@
 import { ProviderEnum } from '@dynamic-labs/sdk-api';
-import { SocialAccountInformation, SocialOAuthError } from '@dynamic-labs/types';
+import { SocialAccountInformation } from '@dynamic-labs/types';
 type UseSocialAccountsProps = {
     sessionTimeout: number;
 };
 export declare const useSocialAccounts: ({ sessionTimeout }?: UseSocialAccountsProps) => {
-    readonly error: SocialOAuthError | undefined;
+    readonly error: import("@dynamic-labs/types").SocialOAuthError | undefined;
     readonly getLinkedAccountInformation: (provider: ProviderEnum) => SocialAccountInformation | undefined;
     readonly isLinked: (provider: ProviderEnum) => boolean;
     readonly isProcessing: boolean;