@dynamic-labs/sdk-react-core 0.18.0-beta.29 → 0.18.0-beta.31

package/src/lib/views/MergeUserAccountsView/MergeUserAccountsView.cjs

@@ -0,0 +1,103 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _tslib = require('../../../../_virtual/_tslib.cjs');
+var jsxRuntime = require('react/jsx-runtime');
+var utils = require('@dynamic-labs/utils');
+var walletBook = require('@dynamic-labs/wallet-book');
+var iconic = require('@dynamic-labs/iconic');
+require('react');
+var Typography = require('../../components/Typography/Typography.cjs');
+var decodeJwt = require('../../shared/utils/functions/decodeJwt/decodeJwt.cjs');
+require('@dynamic-labs/wallet-connector-core');
+var ViewContext = require('../../context/ViewContext/ViewContext.cjs');
+var doubleArrowRight = require('../../shared/assets/double-arrow-right.cjs');
+require('../../shared/logger.cjs');
+var shortenWalletAddress = require('../../shared/utils/functions/shortenWalletAddress/shortenWalletAddress.cjs');
+require('../../utils/constants/colors.cjs');
+require('../../shared/utils/classes/storage/localStorage.cjs');
+require('ethers');
+require('../../shared/consts/index.cjs');
+var useInternalDynamicContext = require('../../context/DynamicContext/useInternalDynamicContext.cjs');
+var index = require('../../utils/functions/storeAuthToken/index.cjs');
+require('@dynamic-labs/multi-wallet');
+var createUserProfile = require('../../utils/functions/createUserProfile/createUserProfile.cjs');
+require('@dynamic-labs/sdk-api');
+require('../../components/ShadowDOM/ShadowDOM.cjs');
+require('../../context/ThemeContext/ThemeContext.cjs');
+var Icon = require('../../components/Icon/Icon.cjs');
+require('react-dom');
+require('react-focus-lock');
+require('../../components/Transition/ZoomTransition/ZoomTransition.cjs');
+require('../../components/Transition/SlideInUpTransition/SlideInUpTransition.cjs');
+require('../../components/Transition/OpacityTransition/OpacityTransition.cjs');
+var api = require('../../data/api.cjs');
+require('@dynamic-labs/rpc-providers');
+require('../../utils/hooks/useWallets/utils/verifyMagicIsSetup/verifyMagicIsSetup.cjs');
+var ErrorContext = require('../../context/ErrorContext/ErrorContext.cjs');
+require('../../context/AccessDeniedContext/AccessDeniedContext.cjs');
+require('../../context/AccountExistsContext/AccountExistsContext.cjs');
+require('../../components/IconButton/IconButton.cjs');
+var Button = require('../../components/Button/Button.cjs');
+require('../../components/Alert/Alert.cjs');
+require('../../context/MockContext/MockContext.cjs');
+require('../../context/CaptchaContext/CaptchaContext.cjs');
+require('../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs');
+var shortenEmail = require('../../shared/utils/functions/shortenEmail/shortenEmail.cjs');
+require('../../components/Popper/Popper/Popper.cjs');
+require('../../components/Popper/PopperContext/PopperContext.cjs');
+require('formik');
+require('yup');
+require('../../components/InlineWidget/InlineWidget.cjs');
+require('../../components/MenuList/Dropdown/Dropdown.cjs');
+var EmailVerificationContext = require('../../context/EmailVerificationContext/EmailVerificationContext.cjs');
+
+const MergeUserAccountsView = () => {
+    const { environmentId, setUser, setOnboardingOnlyJwt, setShowAuthFlow, setCallback, primaryWallet, user, authToken, onboardingOnlyJwt, } = useInternalDynamicContext.useInternalDynamicContext();
+    const { setError } = ErrorContext.useErrorContext();
+    const { setView, goToInitialView } = ViewContext.useViewContext();
+    const { email } = EmailVerificationContext.useEmailVerificationContext();
+    // If user tries to update an email for logged user there is already an authToken and onboardingOnlyJwt is undefined
+    // If user tries to merge during KYC step, authToken is undefined and onboardingOnlyJwt is defined
+    const jwtToken = authToken || onboardingOnlyJwt;
+    const handleMergeUserAccounts = () => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+        if (!jwtToken) {
+            return;
+        }
+        try {
+            const newJwt = yield api.mergeUserAccounts(jwtToken, environmentId);
+            if (newJwt) {
+                index.storeAuthToken(newJwt);
+                const decodedJwt = decodeJwt.decodeJwt(newJwt);
+                if (decodedJwt === undefined) {
+                    throw new utils.DynamicError('Invalid token!');
+                }
+                const newUser = createUserProfile.createUserProfile(decodedJwt);
+                setOnboardingOnlyJwt(undefined);
+                setUser(newUser);
+                setShowAuthFlow(false);
+                setCallback('authSuccess');
+                return;
+            }
+            throw new utils.DynamicError('Something went wrong, please try again.');
+        }
+        catch (e) {
+            setError('Something went wrong, please try again.');
+            goToInitialView();
+        }
+    });
+    const handleUseDifferentEmail = () => {
+        setError(undefined);
+        if (user) {
+            setShowAuthFlow(false);
+            return;
+        }
+        setView('collect-user-data');
+    };
+    return (jsxRuntime.jsxs("div", Object.assign({ className: 'merge-user-accounts__container' }, { children: [jsxRuntime.jsxs("div", Object.assign({ className: 'merge-user-accounts__accounts' }, { children: [jsxRuntime.jsxs("div", Object.assign({ className: 'merge-user-accounts__accounts__item' }, { children: [jsxRuntime.jsx(walletBook.WalletIcon, { walletName: primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector.name, className: 'merge-user-accounts__accounts__item__icon' }), jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_normal', weight: 'medium', color: 'secondary', className: 'merge-user-accounts__accounts__item__text' }, { children: shortenWalletAddress.shortenWalletAddress(primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.address, 3, 3) }))] })), jsxRuntime.jsx("div", Object.assign({ className: 'merge-user-accounts__accounts__divider' }, { children: jsxRuntime.jsx(Icon.Icon, Object.assign({ color: 'text-secondary', size: 'small' }, { children: jsxRuntime.jsx(doubleArrowRight.ReactComponent, {}) })) })), jsxRuntime.jsxs("div", Object.assign({ className: 'merge-user-accounts__accounts__item' }, { children: [jsxRuntime.jsx(iconic.UserProfileIcon, { className: 'merge-user-accounts__accounts__item__icon' }), jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_normal', weight: 'medium', color: 'secondary', className: 'merge-user-accounts__accounts__item__text' }, { children: shortenEmail.shortenEmail(email, {
+                                    breakpoint: 4,
+                                }) }))] }))] })), jsxRuntime.jsxs(Typography.Typography, Object.assign({ weight: 'regular', variant: 'title', className: 'merge-user-accounts__text' }, { children: ["An account already exists that uses", ' ', jsxRuntime.jsx("span", Object.assign({ className: 'merge-user-accounts__text--bold' }, { children: email })), "."] })), jsxRuntime.jsxs("div", Object.assign({ className: 'merge-user-accounts__buttons' }, { children: [jsxRuntime.jsx(Button.Button, Object.assign({ className: 'merge-user-accounts__buttons__button', onClick: handleMergeUserAccounts, buttonVariant: 'primary', buttonPadding: 'large', buttonRounded: 'default' }, { children: "Link wallet to existing account" })), jsxRuntime.jsx(Button.Button, Object.assign({ className: 'merge-user-accounts__buttons__button', onClick: handleUseDifferentEmail, buttonVariant: 'secondary', buttonPadding: 'large', buttonRounded: 'default' }, { children: "Use different email" }))] }))] })));
+};
+
+exports.MergeUserAccountsView = MergeUserAccountsView;

package/src/lib/views/MergeUserAccountsView/MergeUserAccountsView.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const MergeUserAccountsView: () => JSX.Element;

package/src/lib/views/MergeUserAccountsView/MergeUserAccountsView.js

@@ -0,0 +1,99 @@
+import { __awaiter } from '../../../../_virtual/_tslib.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { DynamicError } from '@dynamic-labs/utils';
+import { WalletIcon } from '@dynamic-labs/wallet-book';
+import { UserProfileIcon } from '@dynamic-labs/iconic';
+import 'react';
+import { Typography } from '../../components/Typography/Typography.js';
+import { decodeJwt } from '../../shared/utils/functions/decodeJwt/decodeJwt.js';
+import '@dynamic-labs/wallet-connector-core';
+import { useViewContext } from '../../context/ViewContext/ViewContext.js';
+import { ReactComponent as SvgDoubleArrowRight } from '../../shared/assets/double-arrow-right.js';
+import '../../shared/logger.js';
+import { shortenWalletAddress } from '../../shared/utils/functions/shortenWalletAddress/shortenWalletAddress.js';
+import '../../utils/constants/colors.js';
+import '../../shared/utils/classes/storage/localStorage.js';
+import 'ethers';
+import '../../shared/consts/index.js';
+import { useInternalDynamicContext } from '../../context/DynamicContext/useInternalDynamicContext.js';
+import { storeAuthToken } from '../../utils/functions/storeAuthToken/index.js';
+import '@dynamic-labs/multi-wallet';
+import { createUserProfile } from '../../utils/functions/createUserProfile/createUserProfile.js';
+import '@dynamic-labs/sdk-api';
+import '../../components/ShadowDOM/ShadowDOM.js';
+import '../../context/ThemeContext/ThemeContext.js';
+import { Icon } from '../../components/Icon/Icon.js';
+import 'react-dom';
+import 'react-focus-lock';
+import '../../components/Transition/ZoomTransition/ZoomTransition.js';
+import '../../components/Transition/SlideInUpTransition/SlideInUpTransition.js';
+import '../../components/Transition/OpacityTransition/OpacityTransition.js';
+import { mergeUserAccounts } from '../../data/api.js';
+import '@dynamic-labs/rpc-providers';
+import '../../utils/hooks/useWallets/utils/verifyMagicIsSetup/verifyMagicIsSetup.js';
+import { useErrorContext } from '../../context/ErrorContext/ErrorContext.js';
+import '../../context/AccessDeniedContext/AccessDeniedContext.js';
+import '../../context/AccountExistsContext/AccountExistsContext.js';
+import '../../components/IconButton/IconButton.js';
+import { Button } from '../../components/Button/Button.js';
+import '../../components/Alert/Alert.js';
+import '../../context/MockContext/MockContext.js';
+import '../../context/CaptchaContext/CaptchaContext.js';
+import '../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';
+import { shortenEmail } from '../../shared/utils/functions/shortenEmail/shortenEmail.js';
+import '../../components/Popper/Popper/Popper.js';
+import '../../components/Popper/PopperContext/PopperContext.js';
+import 'formik';
+import 'yup';
+import '../../components/InlineWidget/InlineWidget.js';
+import '../../components/MenuList/Dropdown/Dropdown.js';
+import { useEmailVerificationContext } from '../../context/EmailVerificationContext/EmailVerificationContext.js';
+
+const MergeUserAccountsView = () => {
+    const { environmentId, setUser, setOnboardingOnlyJwt, setShowAuthFlow, setCallback, primaryWallet, user, authToken, onboardingOnlyJwt, } = useInternalDynamicContext();
+    const { setError } = useErrorContext();
+    const { setView, goToInitialView } = useViewContext();
+    const { email } = useEmailVerificationContext();
+    // If user tries to update an email for logged user there is already an authToken and onboardingOnlyJwt is undefined
+    // If user tries to merge during KYC step, authToken is undefined and onboardingOnlyJwt is defined
+    const jwtToken = authToken || onboardingOnlyJwt;
+    const handleMergeUserAccounts = () => __awaiter(void 0, void 0, void 0, function* () {
+        if (!jwtToken) {
+            return;
+        }
+        try {
+            const newJwt = yield mergeUserAccounts(jwtToken, environmentId);
+            if (newJwt) {
+                storeAuthToken(newJwt);
+                const decodedJwt = decodeJwt(newJwt);
+                if (decodedJwt === undefined) {
+                    throw new DynamicError('Invalid token!');
+                }
+                const newUser = createUserProfile(decodedJwt);
+                setOnboardingOnlyJwt(undefined);
+                setUser(newUser);
+                setShowAuthFlow(false);
+                setCallback('authSuccess');
+                return;
+            }
+            throw new DynamicError('Something went wrong, please try again.');
+        }
+        catch (e) {
+            setError('Something went wrong, please try again.');
+            goToInitialView();
+        }
+    });
+    const handleUseDifferentEmail = () => {
+        setError(undefined);
+        if (user) {
+            setShowAuthFlow(false);
+            return;
+        }
+        setView('collect-user-data');
+    };
+    return (jsxs("div", Object.assign({ className: 'merge-user-accounts__container' }, { children: [jsxs("div", Object.assign({ className: 'merge-user-accounts__accounts' }, { children: [jsxs("div", Object.assign({ className: 'merge-user-accounts__accounts__item' }, { children: [jsx(WalletIcon, { walletName: primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector.name, className: 'merge-user-accounts__accounts__item__icon' }), jsx(Typography, Object.assign({ variant: 'body_normal', weight: 'medium', color: 'secondary', className: 'merge-user-accounts__accounts__item__text' }, { children: shortenWalletAddress(primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.address, 3, 3) }))] })), jsx("div", Object.assign({ className: 'merge-user-accounts__accounts__divider' }, { children: jsx(Icon, Object.assign({ color: 'text-secondary', size: 'small' }, { children: jsx(SvgDoubleArrowRight, {}) })) })), jsxs("div", Object.assign({ className: 'merge-user-accounts__accounts__item' }, { children: [jsx(UserProfileIcon, { className: 'merge-user-accounts__accounts__item__icon' }), jsx(Typography, Object.assign({ variant: 'body_normal', weight: 'medium', color: 'secondary', className: 'merge-user-accounts__accounts__item__text' }, { children: shortenEmail(email, {
+                                    breakpoint: 4,
+                                }) }))] }))] })), jsxs(Typography, Object.assign({ weight: 'regular', variant: 'title', className: 'merge-user-accounts__text' }, { children: ["An account already exists that uses", ' ', jsx("span", Object.assign({ className: 'merge-user-accounts__text--bold' }, { children: email })), "."] })), jsxs("div", Object.assign({ className: 'merge-user-accounts__buttons' }, { children: [jsx(Button, Object.assign({ className: 'merge-user-accounts__buttons__button', onClick: handleMergeUserAccounts, buttonVariant: 'primary', buttonPadding: 'large', buttonRounded: 'default' }, { children: "Link wallet to existing account" })), jsx(Button, Object.assign({ className: 'merge-user-accounts__buttons__button', onClick: handleUseDifferentEmail, buttonVariant: 'secondary', buttonPadding: 'large', buttonRounded: 'default' }, { children: "Use different email" }))] }))] })));
+};
+
+export { MergeUserAccountsView };

package/src/lib/views/MergeUserAccountsView/index.d.ts

@@ -0,0 +1 @@
+export { MergeUserAccountsView } from './MergeUserAccountsView';

package/src/lib/views/viewToComponentMap.cjs

@@ -29,6 +29,7 @@ var BridgeWelcomeView = require('./BridgeWelcomeView/BridgeWelcomeView.cjs');
 var BridgeSummaryView = require('./BridgeSummaryView/BridgeSummaryView.cjs');
 var BridgeNextWalletConnectionView = require('./BridgeNextWalletConnectionView/BridgeNextWalletConnectionView.cjs');
 var AccountExistsView = require('./AccountExistsView/AccountExistsView.cjs');
+var MergeUserAccountsView = require('./MergeUserAccountsView/MergeUserAccountsView.cjs');
 
 const viewToComponentMap = {
     'account-exists': jsxRuntime.jsx(AccountExistsView.AccountExistsView, {}),
@@ -44,6 +45,7 @@ const viewToComponentMap = {
     'login-with-email-or-wallet': jsxRuntime.jsx(LoginWithEmailView.LoginWithEmailView, {}),
     'login-with-email-or-wallet-full-wallet-list': jsxRuntime.jsx(WalletList.WalletList, {}),
     'login-with-email-verification': jsxRuntime.jsx(EmailVerification.EmailVerification, {}),
+    'merge-user-accounts': jsxRuntime.jsx(MergeUserAccountsView.MergeUserAccountsView, {}),
     'network-not-supported': jsxRuntime.jsx(NetworkNotSupported.NetworkNotSupported, {}),
     'network-not-supported-manual': jsxRuntime.jsx(NetworkNotSupportedSwitchManual.NetworkNotSupportedSwitchManual, {}),
     'no-access': jsxRuntime.jsx(NoAccess.NoAccess, {}),

package/src/lib/views/viewToComponentMap.js

@@ -25,6 +25,7 @@ import { BridgeWelcomeView } from './BridgeWelcomeView/BridgeWelcomeView.js';
 import { BridgeSummaryView } from './BridgeSummaryView/BridgeSummaryView.js';
 import { BridgeNextWalletConnectionView } from './BridgeNextWalletConnectionView/BridgeNextWalletConnectionView.js';
 import { AccountExistsView } from './AccountExistsView/AccountExistsView.js';
+import { MergeUserAccountsView } from './MergeUserAccountsView/MergeUserAccountsView.js';
 
 const viewToComponentMap = {
     'account-exists': jsx(AccountExistsView, {}),
@@ -40,6 +41,7 @@ const viewToComponentMap = {
     'login-with-email-or-wallet': jsx(LoginWithEmailView, {}),
     'login-with-email-or-wallet-full-wallet-list': jsx(WalletList, {}),
     'login-with-email-verification': jsx(EmailVerification, {}),
+    'merge-user-accounts': jsx(MergeUserAccountsView, {}),
     'network-not-supported': jsx(NetworkNotSupported, {}),
     'network-not-supported-manual': jsx(NetworkNotSupportedSwitchManual, {}),
     'no-access': jsx(NoAccess, {}),