@dynamic-labs/sdk-react-core 0.17.0-RC.18 → 0.17.0-RC.19

package/CHANGELOG.md

@@ -1,4 +1,15 @@
 
+## [0.17.0-RC.19](https://github.com/dynamic-labs/DynamicAuth/compare/v0.17.0-RC.18...v0.17.0-RC.19) (2023-05-30)
+
+
+### Features
+
+* add SocialWrongAccountView ([#2153](https://github.com/dynamic-labs/DynamicAuth/issues/2153)) ([531a29d](https://github.com/dynamic-labs/DynamicAuth/commit/531a29d7d87739d974ecc35c57ef0d333a5e7451))
+* do not show unlink button for embedded wallets ([#2169](https://github.com/dynamic-labs/DynamicAuth/issues/2169)) ([f813058](https://github.com/dynamic-labs/DynamicAuth/commit/f8130585c82c7ae73d1e32e107f67ec86b4edb89))
+* **DYN-2402:** coinbase issues after disconnecting ([#2149](https://github.com/dynamic-labs/DynamicAuth/issues/2149)) ([91d49fb](https://github.com/dynamic-labs/DynamicAuth/commit/91d49fb7f8c6fca3ab03098f3fba53d277c836ad))
+* handle user reconnecting with wrong social account ([#2157](https://github.com/dynamic-labs/DynamicAuth/issues/2157)) ([4f7c6df](https://github.com/dynamic-labs/DynamicAuth/commit/4f7c6dff7df9a7966a644bf2510cb3825b2c6408))
+* **social:** handle reconnect ([#2131](https://github.com/dynamic-labs/DynamicAuth/issues/2131)) ([2b3e5fb](https://github.com/dynamic-labs/DynamicAuth/commit/2b3e5fbb72bb7dafee3bd0bbfa73fae444055410))
+
 ## [0.17.0-RC.18](https://github.com/dynamic-labs/DynamicAuth/compare/v0.17.0-RC.17...v0.17.0-RC.18) (2023-05-19)
 
 

package/package.cjs

@@ -2,18 +2,18 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var version = "0.17.0-RC.18";
+var version = "0.17.0-RC.19";
 var dependencies = {
-	"react-focus-lock": "^2.9.2",
-	"@dynamic-labs/iconic": "^0.1.19",
+	"react-focus-lock": "2.9.2",
+	"@dynamic-labs/iconic": "0.1.19",
 	"@dynamic-labs/sdk-api": "0.0.198",
-	"@dynamic-labs/wallet-book": "^0.0.15",
-	"@hcaptcha/react-hcaptcha": "~1.4.4",
-	"country-list": "^2.3.0",
-	yup: "^0.32.11",
-	formik: "^2.2.9",
+	"@dynamic-labs/wallet-book": "0.0.18",
+	"@hcaptcha/react-hcaptcha": "1.4.4",
+	"country-list": "2.3.0",
+	yup: "0.32.11",
+	formik: "2.2.9",
 	qrcode: "1.5.1",
-	ethers: "^5.7.2"
+	ethers: "5.7.2"
 };
 
 exports.dependencies = dependencies;

package/package.js

@@ -1,15 +1,15 @@
-var version = "0.17.0-RC.18";
+var version = "0.17.0-RC.19";
 var dependencies = {
-	"react-focus-lock": "^2.9.2",
-	"@dynamic-labs/iconic": "^0.1.19",
+	"react-focus-lock": "2.9.2",
+	"@dynamic-labs/iconic": "0.1.19",
 	"@dynamic-labs/sdk-api": "0.0.198",
-	"@dynamic-labs/wallet-book": "^0.0.15",
-	"@hcaptcha/react-hcaptcha": "~1.4.4",
-	"country-list": "^2.3.0",
-	yup: "^0.32.11",
-	formik: "^2.2.9",
+	"@dynamic-labs/wallet-book": "0.0.18",
+	"@hcaptcha/react-hcaptcha": "1.4.4",
+	"country-list": "2.3.0",
+	yup: "0.32.11",
+	formik: "2.2.9",
 	qrcode: "1.5.1",
-	ethers: "^5.7.2"
+	ethers: "5.7.2"
 };
 
 export { dependencies, version };

package/package.json

@@ -1,31 +1,31 @@
 {
   "name": "@dynamic-labs/sdk-react-core",
-  "version": "0.17.0-RC.18",
+  "version": "0.17.0-RC.19",
   "repository": {
     "type": "git",
     "url": "https://github.com/dynamic-labs/DynamicAuth.git",
     "directory": "packages/sdk-react-core"
   },
   "dependencies": {
-    "react-focus-lock": "^2.9.2",
-    "@dynamic-labs/iconic": "^0.1.19",
+    "react-focus-lock": "2.9.2",
+    "@dynamic-labs/iconic": "0.1.19",
     "@dynamic-labs/sdk-api": "0.0.198",
-    "@dynamic-labs/wallet-book": "^0.0.15",
-    "@hcaptcha/react-hcaptcha": "~1.4.4",
-    "country-list": "^2.3.0",
-    "yup": "^0.32.11",
-    "formik": "^2.2.9",
+    "@dynamic-labs/wallet-book": "0.0.18",
+    "@hcaptcha/react-hcaptcha": "1.4.4",
+    "country-list": "2.3.0",
+    "yup": "0.32.11",
+    "formik": "2.2.9",
     "qrcode": "1.5.1",
-    "ethers": "^5.7.2",
-    "@dynamic-labs/logger": "0.17.0-RC.18",
-    "@dynamic-labs/multi-wallet": "0.17.0-RC.18",
-    "@dynamic-labs/rpc-providers": "0.17.0-RC.18",
-    "@dynamic-labs/types": "0.17.0-RC.18",
-    "@dynamic-labs/utils": "0.17.0-RC.18",
-    "@dynamic-labs/wallet-connector-core": "0.17.0-RC.18"
+    "ethers": "5.7.2",
+    "@dynamic-labs/logger": "0.17.0-RC.19",
+    "@dynamic-labs/multi-wallet": "0.17.0-RC.19",
+    "@dynamic-labs/rpc-providers": "0.17.0-RC.19",
+    "@dynamic-labs/types": "0.17.0-RC.19",
+    "@dynamic-labs/utils": "0.17.0-RC.19",
+    "@dynamic-labs/wallet-connector-core": "0.17.0-RC.19"
   },
   "devDependencies": {
-    "semver": "^7.3.8"
+    "semver": "7.3.8"
   },
   "peerDependencies": {
     "react": "^17.0.2 || ^18.0.0",

package/src/lib/components/ErrorContainer/ErrorContainer.cjs

@@ -17,8 +17,8 @@ require('../../shared/consts/index.cjs');
 var classNames = require('../../utils/functions/classNames/classNames.cjs');
 var Typography = require('../Typography/Typography.cjs');
 
-const ErrorContainer = ({ children, className, isMultiWalletError = false, withIcon = true, }) => {
-    const effectiveContainerClassName = classNames.classNames('error-container', className, {
+const ErrorContainer = ({ children, className, isMultiWalletError = false, withIcon = true, variant = 'error', }) => {
+    const effectiveContainerClassName = classNames.classNames('error-container', `error-container--${variant}`, className, {
         'error-container--multi-wallet': isMultiWalletError,
     });
     const effectiveErrorClassName = classNames.classNames('error', {

package/src/lib/components/ErrorContainer/ErrorContainer.d.ts

@@ -1,9 +1,11 @@
 import { ReactNode } from 'react';
+type Variant = 'error' | 'info';
 type Props = {
     children: ReactNode;
     className?: string;
     isMultiWalletError?: boolean;
+    variant?: Variant;
     withIcon?: boolean;
 };
-export declare const ErrorContainer: ({ children, className, isMultiWalletError, withIcon, }: Props) => JSX.Element;
+export declare const ErrorContainer: ({ children, className, isMultiWalletError, withIcon, variant, }: Props) => JSX.Element;
 export {};

package/src/lib/components/ErrorContainer/ErrorContainer.js

@@ -13,8 +13,8 @@ import '../../shared/consts/index.js';
 import { classNames } from '../../utils/functions/classNames/classNames.js';
 import { Typography } from '../Typography/Typography.js';
 
-const ErrorContainer = ({ children, className, isMultiWalletError = false, withIcon = true, }) => {
-    const effectiveContainerClassName = classNames('error-container', className, {
+const ErrorContainer = ({ children, className, isMultiWalletError = false, withIcon = true, variant = 'error', }) => {
+    const effectiveContainerClassName = classNames('error-container', `error-container--${variant}`, className, {
         'error-container--multi-wallet': isMultiWalletError,
     });
     const effectiveErrorClassName = classNames('error', {

package/src/lib/components/Input/Input.cjs

@@ -8,11 +8,14 @@ var classNames = require('../../utils/functions/classNames/classNames.cjs');
 var Typography = require('../Typography/Typography.cjs');
 
 const Input = (_a) => {
-    var { className = '', id, label, type, onChange, onBlur, name, value, optional, error = false, disabled, message } = _a, rest = _tslib.__rest(_a, ["className", "id", "label", "type", "onChange", "onBlur", "name", "value", "optional", "error", "disabled", "message"]);
-    return (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsxs("div", Object.assign({ className: 'input__container' }, { children: [jsxRuntime.jsx("input", Object.assign({}, rest, { name: name, value: value, onChange: onChange, onBlur: onBlur, type: type, id: id, placeholder: label, disabled: disabled, className: classNames.classNames('input', className, {
+    var { className = '', id, label, type, onChange, onBlur, name, value, optional, error = false, disabled, message, placeholder, variant = 'dense', suffix } = _a, rest = _tslib.__rest(_a, ["className", "id", "label", "type", "onChange", "onBlur", "name", "value", "optional", "error", "disabled", "message", "placeholder", "variant", "suffix"]);
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", Object.assign({ className: classNames.classNames('input__container', {
+                    'input__container--dense': variant === 'dense',
+                    'input__container--regular': variant === 'regular',
+                }) }, { children: [jsxRuntime.jsx("input", Object.assign({}, rest, { name: name, value: value, onChange: onChange, onBlur: onBlur, type: type, id: id, placeholder: variant === 'regular' ? placeholder : label, disabled: disabled, className: classNames.classNames('input', className, {
                             input__error: error,
                             input__has_trailing: optional,
-                        }) })), jsxRuntime.jsx("label", Object.assign({ htmlFor: id, className: classNames.classNames('input__label') }, { children: label })), optional && jsxRuntime.jsx("span", Object.assign({ className: 'input__trailing' }, { children: "Optional" }))] })), Boolean(message) && (jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_mini', className: classNames.classNames('input__message', {
+                        }) })), jsxRuntime.jsx("label", Object.assign({ htmlFor: id, className: classNames.classNames('input__label') }, { children: label })), suffix && jsxRuntime.jsx("div", Object.assign({ className: classNames.classNames('input__suffix') }, { children: suffix })), optional && jsxRuntime.jsx("span", Object.assign({ className: 'input__trailing' }, { children: "Optional" }))] })), Boolean(message) && (jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_mini', className: classNames.classNames('input__message', {
                     input__message__error: error,
                 }) }, { children: message })))] }));
 };

package/src/lib/components/Input/Input.js

@@ -1,14 +1,17 @@
 import { __rest } from '../../../../_virtual/_tslib.js';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { classNames } from '../../utils/functions/classNames/classNames.js';
 import { Typography } from '../Typography/Typography.js';
 
 const Input = (_a) => {
-    var { className = '', id, label, type, onChange, onBlur, name, value, optional, error = false, disabled, message } = _a, rest = __rest(_a, ["className", "id", "label", "type", "onChange", "onBlur", "name", "value", "optional", "error", "disabled", "message"]);
-    return (jsxs("div", { children: [jsxs("div", Object.assign({ className: 'input__container' }, { children: [jsx("input", Object.assign({}, rest, { name: name, value: value, onChange: onChange, onBlur: onBlur, type: type, id: id, placeholder: label, disabled: disabled, className: classNames('input', className, {
+    var { className = '', id, label, type, onChange, onBlur, name, value, optional, error = false, disabled, message, placeholder, variant = 'dense', suffix } = _a, rest = __rest(_a, ["className", "id", "label", "type", "onChange", "onBlur", "name", "value", "optional", "error", "disabled", "message", "placeholder", "variant", "suffix"]);
+    return (jsxs(Fragment, { children: [jsxs("div", Object.assign({ className: classNames('input__container', {
+                    'input__container--dense': variant === 'dense',
+                    'input__container--regular': variant === 'regular',
+                }) }, { children: [jsx("input", Object.assign({}, rest, { name: name, value: value, onChange: onChange, onBlur: onBlur, type: type, id: id, placeholder: variant === 'regular' ? placeholder : label, disabled: disabled, className: classNames('input', className, {
                             input__error: error,
                             input__has_trailing: optional,
-                        }) })), jsx("label", Object.assign({ htmlFor: id, className: classNames('input__label') }, { children: label })), optional && jsx("span", Object.assign({ className: 'input__trailing' }, { children: "Optional" }))] })), Boolean(message) && (jsx(Typography, Object.assign({ variant: 'body_mini', className: classNames('input__message', {
+                        }) })), jsx("label", Object.assign({ htmlFor: id, className: classNames('input__label') }, { children: label })), suffix && jsx("div", Object.assign({ className: classNames('input__suffix') }, { children: suffix })), optional && jsx("span", Object.assign({ className: 'input__trailing' }, { children: "Optional" }))] })), Boolean(message) && (jsx(Typography, Object.assign({ variant: 'body_mini', className: classNames('input__message', {
                     input__message__error: error,
                 }) }, { children: message })))] }));
 };

package/src/lib/components/Input/Input.types.d.ts

@@ -1,4 +1,5 @@
 import { FC, PropsWithChildren, ReactNode } from 'react';
+export type InputVariant = 'dense' | 'regular';
 export type InputProps = React.ComponentPropsWithoutRef<'input'> & {
     className?: string;
     error?: boolean;
@@ -6,5 +7,8 @@ export type InputProps = React.ComponentPropsWithoutRef<'input'> & {
     label: string;
     message?: ReactNode;
     optional?: boolean;
+    placeholder?: string;
+    suffix?: ReactNode;
+    variant?: InputVariant;
 };
 export type InputComponent = FC<PropsWithChildren<InputProps>>;

package/src/lib/context/SocialRedirectContext/SocialRedirectContext.cjs

@@ -17,6 +17,7 @@ require('../../utils/constants/colors.cjs');
 require('ethers');
 require('../../shared/consts/index.cjs');
 require('@dynamic-labs/multi-wallet');
+var getReferencedAccount = require('../../utils/functions/getReferencedAccount/getReferencedAccount.cjs');
 require('@dynamic-labs/rpc-providers');
 var useVerifyWallet = require('../../utils/hooks/useVerifyWallet/useVerifyWallet.cjs');
 require('react-dom');
@@ -40,7 +41,7 @@ require('../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs');
 const SocialRedirectContext = React.createContext(undefined);
 const SocialRedirectContextProvider = ({ children, }) => {
     var _a, _b;
-    const { setShowAuthFlow, wallets, setSelectedWalletConnector, walletUiUtils, consumeNonce, displayTermsOfService, environmentId, projectSettings, setIsSingleWalletAccount, } = useInternalDynamicContext.useInternalDynamicContext();
+    const { setShowAuthFlow, wallets, setSelectedWalletConnector, walletUiUtils, consumeNonce, displayTermsOfService, environmentId, projectSettings, setIsSingleWalletAccount, setShowDynamicUserProfile, isAuthenticated, setPrimaryWalletId, secondaryWallets, sdkHasLoaded, authToken, } = useInternalDynamicContext.useInternalDynamicContext();
     const { setView } = ViewContext.useViewContext();
     const verifyWallet = useVerifyWallet.useVerifyWallet({
         consumeNonce,
@@ -58,12 +59,11 @@ const SocialRedirectContextProvider = ({ children, }) => {
         .find(walletConnectorCore.isSocialWalletConnector);
     const [redirectStatus, setRedirectStatus] = React.useState('idle');
     const [socialProvider, setSocialProvider] = React.useState();
+    const wallet = secondaryWallets.find((wallet) => wallet.connector.key === (socialWalletConnector === null || socialWalletConnector === void 0 ? void 0 : socialWalletConnector.key));
+    const socialAccount = React.useMemo(() => (wallet ? getReferencedAccount.getReferencedAccount(authToken, wallet.id) : undefined), [authToken, wallet]);
     React.useEffect(() => {
         var _a;
-        if (!projectSettings) {
-            return;
-        }
-        if (!socialWalletConnector) {
+        if (!projectSettings || !socialWalletConnector || !sdkHasLoaded) {
             return;
         }
         const params = new URLSearchParams(window.location.search);
@@ -73,23 +73,51 @@ const SocialRedirectContextProvider = ({ children, }) => {
             setRedirectStatus('loading');
             setView('social-redirect-view');
             setShowAuthFlow(true);
-            setSelectedWalletConnector(socialWalletConnector);
+            if (!isAuthenticated) {
+                setSelectedWalletConnector(socialWalletConnector);
+            }
             (_a = socialWalletConnector
                 .getSession) === null || _a === void 0 ? void 0 : _a.call(socialWalletConnector).then((session) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
-                const address = yield socialWalletConnector.fetchPublicAddress();
-                if (!address) {
-                    return;
+                /**
+                 * If the user is already authenticated, that means that they are in the process
+                 * of setting their social wallet as their primary wallet. At this point, they
+                 * have successfully re-authenticated with the social provider. We can now finish
+                 * the setPrimaryWallet flow
+                 */
+                if (isAuthenticated) {
+                    if (!socialAccount) {
+                        throw new Error('Social account not found');
+                    }
+                    if (socialAccount.oauthAccountId === session.oauthId) {
+                        // justification: socialAccount is defined if and only if wallet is also defined
+                        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                        setPrimaryWalletId(wallet.id);
+                        setShowAuthFlow(false);
+                        setShowDynamicUserProfile(true);
+                    }
+                    else {
+                        yield socialWalletConnector.endSession();
+                        setView('social-wrong-account');
+                    }
+                }
+                else {
+                    const address = yield socialWalletConnector.fetchPublicAddress();
+                    walletUiUtils.disabledConfirmationOnce();
+                    yield verifyWallet({
+                        oauth: {
+                            accessToken: session.accessToken,
+                            didToken: session.didToken,
+                            provider: providerFromParams,
+                        },
+                        /**
+                         * justification: if the user just successfully authenticated their social,
+                         * then the social connector must return an address
+                         */
+                        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                        publicWalletAddress: address,
+                        walletConnector: socialWalletConnector,
+                    });
                 }
-                walletUiUtils.disabledConfirmationOnce();
-                yield verifyWallet({
-                    oauth: {
-                        accessToken: session.accessToken,
-                        didToken: session.didToken,
-                        provider: providerFromParams,
-                    },
-                    publicWalletAddress: address,
-                    walletConnector: socialWalletConnector,
-                });
                 setSocialProvider(undefined);
                 setRedirectStatus('success');
             })).catch((error) => {
@@ -97,18 +125,27 @@ const SocialRedirectContextProvider = ({ children, }) => {
             });
         }
     }, [
+        socialAccount,
+        authToken,
+        isAuthenticated,
         projectSettings,
+        sdkHasLoaded,
+        secondaryWallets,
+        setPrimaryWalletId,
         setSelectedWalletConnector,
         setShowAuthFlow,
+        setShowDynamicUserProfile,
         setView,
         socialWalletConnector,
         verifyWallet,
         walletUiUtils,
+        wallet,
     ]);
     return (jsxRuntime.jsx(SocialRedirectContext.Provider, Object.assign({ value: {
             enabledSocialProviders,
             redirectStatus,
             setSocialProvider,
+            socialAccount,
             socialProvider,
             socialWalletConnector,
         } }, { children: children })));

package/src/lib/context/SocialRedirectContext/SocialRedirectContext.d.ts

@@ -1,11 +1,13 @@
 import { ReactNode } from 'react';
 import { SocialOAuthProvider } from '@dynamic-labs/types';
+import { JwtVerifiedCredential } from '@dynamic-labs/sdk-api';
 import { WalletConnector } from '../../..';
 type SocialRedirectStatus = 'idle' | 'loading' | 'success' | 'error';
-type SocialContextReturnType = {
+export type SocialContextReturnType = {
     enabledSocialProviders: SocialOAuthProvider[];
     redirectStatus: SocialRedirectStatus;
     setSocialProvider: (val: SocialOAuthProvider) => void;
+    socialAccount: JwtVerifiedCredential | undefined;
     socialProvider: SocialOAuthProvider | undefined;
     socialWalletConnector: WalletConnector | undefined;
 };

package/src/lib/context/SocialRedirectContext/SocialRedirectContext.js

@@ -1,6 +1,6 @@
 import { __awaiter } from '../../../../_virtual/_tslib.js';
 import { jsx } from 'react/jsx-runtime';
-import { createContext, useContext, useState, useEffect } from 'react';
+import { createContext, useContext, useState, useMemo, useEffect } from 'react';
 import { isSocialWalletConnector } from '@dynamic-labs/wallet-connector-core';
 import { useInternalDynamicContext } from '../DynamicContext/useInternalDynamicContext.js';
 import { useViewContext } from '../ViewContext/ViewContext.js';
@@ -13,6 +13,7 @@ import '../../utils/constants/colors.js';
 import 'ethers';
 import '../../shared/consts/index.js';
 import '@dynamic-labs/multi-wallet';
+import { getReferencedAccount } from '../../utils/functions/getReferencedAccount/getReferencedAccount.js';
 import '@dynamic-labs/rpc-providers';
 import { useVerifyWallet } from '../../utils/hooks/useVerifyWallet/useVerifyWallet.js';
 import 'react-dom';
@@ -36,7 +37,7 @@ import '../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';
 const SocialRedirectContext = createContext(undefined);
 const SocialRedirectContextProvider = ({ children, }) => {
     var _a, _b;
-    const { setShowAuthFlow, wallets, setSelectedWalletConnector, walletUiUtils, consumeNonce, displayTermsOfService, environmentId, projectSettings, setIsSingleWalletAccount, } = useInternalDynamicContext();
+    const { setShowAuthFlow, wallets, setSelectedWalletConnector, walletUiUtils, consumeNonce, displayTermsOfService, environmentId, projectSettings, setIsSingleWalletAccount, setShowDynamicUserProfile, isAuthenticated, setPrimaryWalletId, secondaryWallets, sdkHasLoaded, authToken, } = useInternalDynamicContext();
     const { setView } = useViewContext();
     const verifyWallet = useVerifyWallet({
         consumeNonce,
@@ -54,12 +55,11 @@ const SocialRedirectContextProvider = ({ children, }) => {
         .find(isSocialWalletConnector);
     const [redirectStatus, setRedirectStatus] = useState('idle');
     const [socialProvider, setSocialProvider] = useState();
+    const wallet = secondaryWallets.find((wallet) => wallet.connector.key === (socialWalletConnector === null || socialWalletConnector === void 0 ? void 0 : socialWalletConnector.key));
+    const socialAccount = useMemo(() => (wallet ? getReferencedAccount(authToken, wallet.id) : undefined), [authToken, wallet]);
     useEffect(() => {
         var _a;
-        if (!projectSettings) {
-            return;
-        }
-        if (!socialWalletConnector) {
+        if (!projectSettings || !socialWalletConnector || !sdkHasLoaded) {
             return;
         }
         const params = new URLSearchParams(window.location.search);
@@ -69,23 +69,51 @@ const SocialRedirectContextProvider = ({ children, }) => {
             setRedirectStatus('loading');
             setView('social-redirect-view');
             setShowAuthFlow(true);
-            setSelectedWalletConnector(socialWalletConnector);
+            if (!isAuthenticated) {
+                setSelectedWalletConnector(socialWalletConnector);
+            }
             (_a = socialWalletConnector
                 .getSession) === null || _a === void 0 ? void 0 : _a.call(socialWalletConnector).then((session) => __awaiter(void 0, void 0, void 0, function* () {
-                const address = yield socialWalletConnector.fetchPublicAddress();
-                if (!address) {
-                    return;
+                /**
+                 * If the user is already authenticated, that means that they are in the process
+                 * of setting their social wallet as their primary wallet. At this point, they
+                 * have successfully re-authenticated with the social provider. We can now finish
+                 * the setPrimaryWallet flow
+                 */
+                if (isAuthenticated) {
+                    if (!socialAccount) {
+                        throw new Error('Social account not found');
+                    }
+                    if (socialAccount.oauthAccountId === session.oauthId) {
+                        // justification: socialAccount is defined if and only if wallet is also defined
+                        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                        setPrimaryWalletId(wallet.id);
+                        setShowAuthFlow(false);
+                        setShowDynamicUserProfile(true);
+                    }
+                    else {
+                        yield socialWalletConnector.endSession();
+                        setView('social-wrong-account');
+                    }
+                }
+                else {
+                    const address = yield socialWalletConnector.fetchPublicAddress();
+                    walletUiUtils.disabledConfirmationOnce();
+                    yield verifyWallet({
+                        oauth: {
+                            accessToken: session.accessToken,
+                            didToken: session.didToken,
+                            provider: providerFromParams,
+                        },
+                        /**
+                         * justification: if the user just successfully authenticated their social,
+                         * then the social connector must return an address
+                         */
+                        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                        publicWalletAddress: address,
+                        walletConnector: socialWalletConnector,
+                    });
                 }
-                walletUiUtils.disabledConfirmationOnce();
-                yield verifyWallet({
-                    oauth: {
-                        accessToken: session.accessToken,
-                        didToken: session.didToken,
-                        provider: providerFromParams,
-                    },
-                    publicWalletAddress: address,
-                    walletConnector: socialWalletConnector,
-                });
                 setSocialProvider(undefined);
                 setRedirectStatus('success');
             })).catch((error) => {
@@ -93,18 +121,27 @@ const SocialRedirectContextProvider = ({ children, }) => {
             });
         }
     }, [
+        socialAccount,
+        authToken,
+        isAuthenticated,
         projectSettings,
+        sdkHasLoaded,
+        secondaryWallets,
+        setPrimaryWalletId,
         setSelectedWalletConnector,
         setShowAuthFlow,
+        setShowDynamicUserProfile,
         setView,
         socialWalletConnector,
         verifyWallet,
         walletUiUtils,
+        wallet,
     ]);
     return (jsx(SocialRedirectContext.Provider, Object.assign({ value: {
             enabledSocialProviders,
             redirectStatus,
             setSocialProvider,
+            socialAccount,
             socialProvider,
             socialWalletConnector,
         } }, { children: children })));

package/src/lib/context/ViewContext/ViewContext.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode, SetStateAction, Dispatch } from 'react';
-export type ViewType = 'captcha' | 'chainalysis-blocked-wallet' | 'collect-user-data' | 'collect-user-data-login-with-email' | 'login-with-email-or-wallet-full-wallet-list' | 'login-with-email-or-wallet' | 'login-with-email-verification' | 'network-not-supported' | 'network-not-supported-manual' | 'no-access' | 'no-qr-not-installed' | 'pending-connect' | 'pending-signature-without-back-button' | 'pending-signature' | 'qr-code' | 'update-email' | 'verify-email' | 'wallet-connect-mobile-wallets-list' | 'wallet-list' | 'wallet-sign' | 'wallet-used' | 'wait-for-email-confirmation-view' | 'email-wallet-otp-verification-view' | 'social-redirect-view';
+export type ViewType = 'captcha' | 'chainalysis-blocked-wallet' | 'collect-user-data' | 'collect-user-data-login-with-email' | 'login-with-email-or-wallet-full-wallet-list' | 'login-with-email-or-wallet' | 'login-with-email-verification' | 'network-not-supported' | 'network-not-supported-manual' | 'no-access' | 'no-qr-not-installed' | 'pending-connect' | 'pending-signature-without-back-button' | 'pending-signature' | 'qr-code' | 'update-email' | 'verify-email' | 'wallet-connect-mobile-wallets-list' | 'wallet-list' | 'wallet-sign' | 'wallet-used' | 'wait-for-email-confirmation-view' | 'email-wallet-otp-verification-view' | 'social-redirect-view' | 'social-wrong-account';
 export interface ViewContextProps {
     setView: Dispatch<SetStateAction<ViewType>>;
     view: ViewType;

package/src/lib/layout/DynamicAuthLayout/Header/header.cjs

@@ -42,13 +42,21 @@ require('../../../components/SendBalanceForm/SendBalanceForm.cjs');
 var QrCodeContext = require('../../../context/QrCodeContext/QrCodeContext.cjs');
 
 const Header = ({ onClose: handleClose, heading, projectSettings, }) => {
-    const { clearStatesOnBackClick, loginWithEmail } = useInternalDynamicContext.useInternalDynamicContext();
+    const { clearStatesOnBackClick, loginWithEmail, selectedWalletConnector } = useInternalDynamicContext.useInternalDynamicContext();
     const { showQrCodeMessage, setShowQrCodeImage, showQrCodeImage } = QrCodeContext.useQrCodeContext();
     const { view, setView } = ViewContext.useViewContext();
     const handleBackClick = React.useCallback(() => {
-        clearStatesOnBackClick();
         setView(loginWithEmail ? 'login-with-email-or-wallet' : 'wallet-list');
-    }, [clearStatesOnBackClick, loginWithEmail, setView]);
+        // on back button click in Coinbase wallet clearing state would kill connection and refresh the page
+        if ((selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.name) !== 'Coinbase') {
+            clearStatesOnBackClick();
+        }
+    }, [
+        clearStatesOnBackClick,
+        loginWithEmail,
+        selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.name,
+        setView,
+    ]);
     const positionAbsolute = view === 'login-with-email-verification';
     const showCloseButton = view !== 'login-with-email-or-wallet-full-wallet-list' &&
         view !== 'login-with-email-verification';

package/src/lib/layout/DynamicAuthLayout/Header/header.js

@@ -38,13 +38,21 @@ import '../../../components/SendBalanceForm/SendBalanceForm.js';
 import { useQrCodeContext } from '../../../context/QrCodeContext/QrCodeContext.js';
 
 const Header = ({ onClose: handleClose, heading, projectSettings, }) => {
-    const { clearStatesOnBackClick, loginWithEmail } = useInternalDynamicContext();
+    const { clearStatesOnBackClick, loginWithEmail, selectedWalletConnector } = useInternalDynamicContext();
     const { showQrCodeMessage, setShowQrCodeImage, showQrCodeImage } = useQrCodeContext();
     const { view, setView } = useViewContext();
     const handleBackClick = useCallback(() => {
-        clearStatesOnBackClick();
         setView(loginWithEmail ? 'login-with-email-or-wallet' : 'wallet-list');
-    }, [clearStatesOnBackClick, loginWithEmail, setView]);
+        // on back button click in Coinbase wallet clearing state would kill connection and refresh the page
+        if ((selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.name) !== 'Coinbase') {
+            clearStatesOnBackClick();
+        }
+    }, [
+        clearStatesOnBackClick,
+        loginWithEmail,
+        selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.name,
+        setView,
+    ]);
     const positionAbsolute = view === 'login-with-email-verification';
     const showCloseButton = view !== 'login-with-email-or-wallet-full-wallet-list' &&
         view !== 'login-with-email-verification';