@dynamic-labs/sdk-react-core 0.19.0-alpha.4 → 0.19.0-alpha.6

package/src/lib/views/{LoginWithEmailView/components/ListItemButton/ListItemButton.cjs → LoginView/components/WalletSignIn/WalletSignIn.cjs}

@@ -3,14 +3,12 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-require('@dynamic-labs/iconic');
-require('../../../../context/ViewContext/ViewContext.cjs');
-var stroke = require('../../../../shared/assets/stroke.cjs');
-var classNames = require('../../../../utils/functions/classNames/classNames.cjs');
+require('react');
 require('@dynamic-labs/sdk-api');
 require('../../../../shared/logger.cjs');
+require('@dynamic-labs/iconic');
 require('@dynamic-labs/wallet-connector-core');
+require('../../../../context/ViewContext/ViewContext.cjs');
 require('@dynamic-labs/wallet-book');
 require('@dynamic-labs/utils');
 require('../../../../utils/constants/colors.cjs');
@@ -21,7 +19,6 @@ require('../../../../context/DynamicContext/DynamicContext.cjs');
 require('@dynamic-labs/multi-wallet');
 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');
@@ -34,6 +31,7 @@ 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('formik');
 require('yup');
@@ -44,22 +42,12 @@ require('../../../../context/EmailVerificationContext/EmailVerificationContext.c
 require('@dynamic-labs/types');
 require('../../../../utils/hooks/useUserUpdateRequest/useUpdateUser/useUpdateUser.cjs');
 require('../../../../context/UserFieldEditorContext/UserFieldEditorContext.cjs');
-var ListTile = require('../../../../components/ListTile/ListTile.cjs');
 require('../../../../components/Popper/Popper/Popper.cjs');
 require('../../../../components/Popper/PopperContext/PopperContext.cjs');
 require('../../../../components/InlineWidget/InlineWidget.cjs');
 require('../../../../components/MenuList/Dropdown/Dropdown.cjs');
-var Badge = require('../../../../components/Badge/Badge.cjs');
+var WalletSimpleSignIn = require('./WalletSimpleSignIn/WalletSimpleSignIn.cjs');
 
-const ListItemButton = ({ text, onClick, numberOfWallets }) => {
-    const numberOfWalletsText = React.useMemo(() => {
-        if (numberOfWallets <= 10) {
-            return numberOfWallets;
-        }
-        return `+${Math.floor(numberOfWallets / 10) * 10}`;
-    }, [numberOfWallets]);
-    const trailing = (jsxRuntime.jsxs("div", Object.assign({ className: 'list-item-button__trailing' }, { children: [jsxRuntime.jsx("div", Object.assign({ className: classNames.classNames('list-item-button__trailing-child', 'list-item-button__trailing-label') }, { children: jsxRuntime.jsx(Badge.Badge, { text: `${numberOfWalletsText} available` }) })), jsxRuntime.jsx("div", Object.assign({ className: classNames.classNames('list-item-button__trailing-child', 'list-item-button__trailing-icon') }, { children: jsxRuntime.jsx(Icon.Icon, Object.assign({ color: 'text-primary', size: 'small' }, { children: jsxRuntime.jsx(stroke.ReactComponent, {}) })) }))] })));
-    return (jsxRuntime.jsx(ListTile.ListTile, Object.assign({ trailing: trailing, onClick: onClick, className: 'list-item-button' }, { children: text })));
-};
+const WalletSignIn = ({ numberOfItensToShow, isLoading, onSubmit, }) => numberOfItensToShow > 0 ? (jsxRuntime.jsx(WalletSimpleSignIn.WalletSimpleSignIn, { previewWalletsNumber: numberOfItensToShow, onshowAllWallets: () => onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(), disabled: isLoading })) : (jsxRuntime.jsx(Button.Button, Object.assign({ disabled: isLoading, onClick: () => onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(), buttonVariant: 'primary', buttonPadding: 'large' }, { children: "Connect with Wallet" })));
 
-exports.ListItemButton = ListItemButton;
+exports.WalletSignIn = WalletSignIn;

package/src/lib/views/LoginView/components/WalletSignIn/WalletSignIn.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { LoginWidgetProps } from '../LoginWidget';
+interface WalletLoginProps extends LoginWidgetProps {
+    numberOfItensToShow: number;
+}
+export declare const WalletSignIn: React.FC<WalletLoginProps>;
+export {};

package/src/lib/views/{LoginWithEmailView/components/ListItemButton/ListItemButton.js → LoginView/components/WalletSignIn/WalletSignIn.js}

@@ -1,12 +1,10 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { useMemo } from 'react';
-import '@dynamic-labs/iconic';
-import '../../../../context/ViewContext/ViewContext.js';
-import { ReactComponent as SvgStroke } from '../../../../shared/assets/stroke.js';
-import { classNames } from '../../../../utils/functions/classNames/classNames.js';
+import { jsx } from 'react/jsx-runtime';
+import 'react';
 import '@dynamic-labs/sdk-api';
 import '../../../../shared/logger.js';
+import '@dynamic-labs/iconic';
 import '@dynamic-labs/wallet-connector-core';
+import '../../../../context/ViewContext/ViewContext.js';
 import '@dynamic-labs/wallet-book';
 import '@dynamic-labs/utils';
 import '../../../../utils/constants/colors.js';
@@ -17,7 +15,6 @@ import '../../../../context/DynamicContext/DynamicContext.js';
 import '@dynamic-labs/multi-wallet';
 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';
@@ -30,6 +27,7 @@ import '../../../../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 'formik';
 import 'yup';
@@ -40,22 +38,12 @@ import '../../../../context/EmailVerificationContext/EmailVerificationContext.js
 import '@dynamic-labs/types';
 import '../../../../utils/hooks/useUserUpdateRequest/useUpdateUser/useUpdateUser.js';
 import '../../../../context/UserFieldEditorContext/UserFieldEditorContext.js';
-import { ListTile } from '../../../../components/ListTile/ListTile.js';
 import '../../../../components/Popper/Popper/Popper.js';
 import '../../../../components/Popper/PopperContext/PopperContext.js';
 import '../../../../components/InlineWidget/InlineWidget.js';
 import '../../../../components/MenuList/Dropdown/Dropdown.js';
-import { Badge } from '../../../../components/Badge/Badge.js';
+import { WalletSimpleSignIn } from './WalletSimpleSignIn/WalletSimpleSignIn.js';
 
-const ListItemButton = ({ text, onClick, numberOfWallets }) => {
-    const numberOfWalletsText = useMemo(() => {
-        if (numberOfWallets <= 10) {
-            return numberOfWallets;
-        }
-        return `+${Math.floor(numberOfWallets / 10) * 10}`;
-    }, [numberOfWallets]);
-    const trailing = (jsxs("div", Object.assign({ className: 'list-item-button__trailing' }, { children: [jsx("div", Object.assign({ className: classNames('list-item-button__trailing-child', 'list-item-button__trailing-label') }, { children: jsx(Badge, { text: `${numberOfWalletsText} available` }) })), jsx("div", Object.assign({ className: classNames('list-item-button__trailing-child', 'list-item-button__trailing-icon') }, { children: jsx(Icon, Object.assign({ color: 'text-primary', size: 'small' }, { children: jsx(SvgStroke, {}) })) }))] })));
-    return (jsx(ListTile, Object.assign({ trailing: trailing, onClick: onClick, className: 'list-item-button' }, { children: text })));
-};
+const WalletSignIn = ({ numberOfItensToShow, isLoading, onSubmit, }) => numberOfItensToShow > 0 ? (jsx(WalletSimpleSignIn, { previewWalletsNumber: numberOfItensToShow, onshowAllWallets: () => onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(), disabled: isLoading })) : (jsx(Button, Object.assign({ disabled: isLoading, onClick: () => onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(), buttonVariant: 'primary', buttonPadding: 'large' }, { children: "Connect with Wallet" })));
 
-export { ListItemButton };
+export { WalletSignIn };

package/src/lib/views/LoginView/components/WalletSignIn/WalletSimpleSignIn/WalletSimpleSignIn.cjs

@@ -0,0 +1,47 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var walletBook = require('@dynamic-labs/wallet-book');
+var Skeleton = require('../../../../../components/Skeleton/Skeleton.cjs');
+var useInternalDynamicContext = require('../../../../../context/DynamicContext/useInternalDynamicContext.cjs');
+require('@dynamic-labs/sdk-api');
+require('../../../../../shared/logger.cjs');
+require('@dynamic-labs/iconic');
+require('@dynamic-labs/wallet-connector-core');
+require('../../../../../context/ViewContext/ViewContext.cjs');
+require('react');
+require('@dynamic-labs/utils');
+var localStorage$1 = require('../../../../../utils/constants/localStorage.cjs');
+require('../../../../../utils/constants/colors.cjs');
+var localStorage = require('../../../../../shared/utils/classes/storage/localStorage.cjs');
+require('ethers');
+require('../../../../../shared/consts/index.cjs');
+var WalletListItem = require('../../../../WalletList/WalletListItem/WalletListItem.cjs');
+var ListItemButton = require('../ListItemButton/ListItemButton.cjs');
+var walletListBuilder = require('../../../../../utils/functions/walletListBuilder/walletListBuilder.cjs');
+
+const WalletSimpleSignIn = ({ previewWalletsNumber, disabled = false, onshowAllWallets, }) => {
+    const { wallets, projectSettings, walletsFilter, signWithEmailWalletName } = useInternalDynamicContext.useInternalDynamicContext();
+    const { walletBook: walletBook$1 } = walletBook.useWalletBookContext();
+    const { numberOfWallets, walletsList } = walletListBuilder.walletListBuilder({
+        groupWallets: true,
+        inputList: wallets,
+        isWalletConnectList: false,
+        lastUsedWalletName: localStorage.LocalStorage.getFromLS(localStorage$1.LAST_USED_WALLET),
+        loginWithEmail: true,
+        numberOfWalletsToShow: previewWalletsNumber,
+        searchFilter: undefined,
+        signWithEmailWalletName,
+        walletBook: walletBook$1,
+        walletsFilter,
+    });
+    const isUsingMultiWallet = Boolean(localStorage.LocalStorage.getFromLS(localStorage$1.AUTH_USER));
+    return !projectSettings ? (jsxRuntime.jsx(Skeleton.Skeleton, { count: previewWalletsNumber + 1, className: 'login-with-email-wallet-list__skeleton' })) : (jsxRuntime.jsxs("div", Object.assign({ className: 'login-with-email-wallet-list__container', "data-testid": 'top-wallets-list' }, { children: [walletsList.map((wallet) => {
+                var _a;
+                return (jsxRuntime.jsx(WalletListItem.WalletListItem, { wallet: wallet, usingMultiWallet: isUsingMultiWallet, disabled: disabled }, wallet.key + ((_a = wallet.groupedWallets) === null || _a === void 0 ? void 0 : _a.length)));
+            }), jsxRuntime.jsx(ListItemButton.ListItemButton, { text: 'View all wallets', onClick: onshowAllWallets, numberOfWallets: numberOfWallets, disabled: disabled })] })));
+};
+
+exports.WalletSimpleSignIn = WalletSimpleSignIn;

package/src/lib/views/LoginView/components/WalletSignIn/WalletSimpleSignIn/WalletSimpleSignIn.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+interface WalletSimpleSignInProp {
+    previewWalletsNumber: number;
+    disabled: boolean;
+    onshowAllWallets: () => void;
+}
+export declare const WalletSimpleSignIn: React.FC<WalletSimpleSignInProp>;
+export {};

package/src/lib/views/LoginView/components/WalletSignIn/WalletSimpleSignIn/WalletSimpleSignIn.js

@@ -0,0 +1,43 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useWalletBookContext } from '@dynamic-labs/wallet-book';
+import { Skeleton } from '../../../../../components/Skeleton/Skeleton.js';
+import { useInternalDynamicContext } from '../../../../../context/DynamicContext/useInternalDynamicContext.js';
+import '@dynamic-labs/sdk-api';
+import '../../../../../shared/logger.js';
+import '@dynamic-labs/iconic';
+import '@dynamic-labs/wallet-connector-core';
+import '../../../../../context/ViewContext/ViewContext.js';
+import 'react';
+import '@dynamic-labs/utils';
+import { LAST_USED_WALLET, AUTH_USER } from '../../../../../utils/constants/localStorage.js';
+import '../../../../../utils/constants/colors.js';
+import { LocalStorage } from '../../../../../shared/utils/classes/storage/localStorage.js';
+import 'ethers';
+import '../../../../../shared/consts/index.js';
+import { WalletListItem } from '../../../../WalletList/WalletListItem/WalletListItem.js';
+import { ListItemButton } from '../ListItemButton/ListItemButton.js';
+import { walletListBuilder } from '../../../../../utils/functions/walletListBuilder/walletListBuilder.js';
+
+const WalletSimpleSignIn = ({ previewWalletsNumber, disabled = false, onshowAllWallets, }) => {
+    const { wallets, projectSettings, walletsFilter, signWithEmailWalletName } = useInternalDynamicContext();
+    const { walletBook } = useWalletBookContext();
+    const { numberOfWallets, walletsList } = walletListBuilder({
+        groupWallets: true,
+        inputList: wallets,
+        isWalletConnectList: false,
+        lastUsedWalletName: LocalStorage.getFromLS(LAST_USED_WALLET),
+        loginWithEmail: true,
+        numberOfWalletsToShow: previewWalletsNumber,
+        searchFilter: undefined,
+        signWithEmailWalletName,
+        walletBook,
+        walletsFilter,
+    });
+    const isUsingMultiWallet = Boolean(LocalStorage.getFromLS(AUTH_USER));
+    return !projectSettings ? (jsx(Skeleton, { count: previewWalletsNumber + 1, className: 'login-with-email-wallet-list__skeleton' })) : (jsxs("div", Object.assign({ className: 'login-with-email-wallet-list__container', "data-testid": 'top-wallets-list' }, { children: [walletsList.map((wallet) => {
+                var _a;
+                return (jsx(WalletListItem, { wallet: wallet, usingMultiWallet: isUsingMultiWallet, disabled: disabled }, wallet.key + ((_a = wallet.groupedWallets) === null || _a === void 0 ? void 0 : _a.length)));
+            }), jsx(ListItemButton, { text: 'View all wallets', onClick: onshowAllWallets, numberOfWallets: numberOfWallets, disabled: disabled })] })));
+};
+
+export { WalletSimpleSignIn };

package/src/lib/views/LoginView/components/WalletSignIn/WalletSimpleSignIn/index.d.ts

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

package/src/lib/views/LoginView/components/WalletSignIn/index.d.ts

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

package/src/lib/views/LoginView/components/index.d.ts

@@ -0,0 +1,3 @@
+export * from './EmailSignIn';
+export * from './LoginWidget';
+export * from './WalletSignIn';

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

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

package/src/lib/views/LoginView/useLoginView.cjs

@@ -0,0 +1,146 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var sdkApi = require('@dynamic-labs/sdk-api');
+var useInternalDynamicContext = require('../../context/DynamicContext/useInternalDynamicContext.cjs');
+
+const NUMBER_OF_WALLETS = 3;
+const useLoginView = () => {
+    const { projectSettings, authorizationViewDisplayOrder, loginWithEmail, wallets, } = useInternalDynamicContext.useInternalDynamicContext();
+    const isWalletOnly = React.useMemo(() => {
+        var _a, _b, _c, _d, _e, _f;
+        if (!projectSettings) {
+            return false;
+        }
+        // toolkit functionality overrides whatever is defined
+        if (!loginWithEmail) {
+            return true;
+        }
+        const loginView = (_b = (_a = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk) === null || _a === void 0 ? void 0 : _a.views) === null || _b === void 0 ? void 0 : _b.find((view) => view.type === sdkApi.SdkViewType.Login);
+        // backwards compatibility for those that didn't set up login view sessions
+        if (!((_c = loginView === null || loginView === void 0 ? void 0 : loginView.sections) === null || _c === void 0 ? void 0 : _c.length)) {
+            return (!((_e = (_d = projectSettings.design) === null || _d === void 0 ? void 0 : _d.modal) === null || _e === void 0 ? void 0 : _e.emailOnly) &&
+                !((_f = projectSettings.providers) === null || _f === void 0 ? void 0 : _f.length));
+        }
+        return (loginView.sections.length === 1 && loginView.sections[0].type === 'wallet');
+    }, [projectSettings, loginWithEmail]);
+    /**
+     * build email and social view sections from project settings design.modal props - backwards compatibility
+     * @returns SdkViewSection[]
+     */
+    const getEmailViewSectionDefinition = () => {
+        var _a, _b, _c, _d;
+        const loginViewSections = [
+            {
+                type: sdkApi.SdkViewSectionType.Email,
+            },
+        ];
+        const numOfProvidersToDisplay = (_b = (_a = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk.socialSignIn) === null || _a === void 0 ? void 0 : _a.providers) === null || _b === void 0 ? void 0 : _b.filter((provider) => provider.enabled).length;
+        if (numOfProvidersToDisplay) {
+            loginViewSections.push({
+                numOfItemsToDisplay: numOfProvidersToDisplay,
+                type: sdkApi.SdkViewSectionType.Social,
+            });
+            if ((_c = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.design.modal) === null || _c === void 0 ? void 0 : _c.splitEmailAndSocial) {
+                loginViewSections.splice(1, 0, {
+                    label: 'Or',
+                    type: sdkApi.SdkViewSectionType.Separator,
+                });
+            }
+        }
+        if ((_d = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.design.modal) === null || _d === void 0 ? void 0 : _d.socialAboveEmail) {
+            loginViewSections.reverse();
+        }
+        return loginViewSections;
+    };
+    // TODO: https://linear.app/dynamic-labs/issue/GVTY-212/rethink-or-implement-toolkit-template-for-email-wallet-order
+    /**
+     * remove wallet view section from projectSettings?.sdk?.views if no wallet defined
+     * @param sections
+     * @returns
+     */
+    const filterLoginViewSections = (sections) => {
+        if (wallets === null || wallets === void 0 ? void 0 : wallets.length) {
+            return sections;
+        }
+        return sections.filter((section) => section.type !== 'wallet');
+    };
+    const addSeparator = (index, loginItem) => {
+        var _a;
+        // if not the first index, no separator is needed
+        // if the first index but does not have wallets or providers,
+        // it'll show only one view section - no separator is needed
+        if (index !== 0 ||
+            !(wallets === null || wallets === void 0 ? void 0 : wallets.length) ||
+            !((_a = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.providers) === null || _a === void 0 ? void 0 : _a.length)) {
+            return [];
+        }
+        const label = loginItem === 'email' ? 'Or continue with a wallet' : 'Or continue with';
+        return [
+            {
+                label,
+                type: sdkApi.SdkViewSectionType.Separator,
+            },
+        ];
+    };
+    /**
+     * build login view sections array from project settings design.modal props - backwards compatibility
+     * @returns SdkViewSection[]
+     */
+    const buildLoginSections = () => {
+        let loginViewSections = [];
+        authorizationViewDisplayOrder === null || authorizationViewDisplayOrder === void 0 ? void 0 : authorizationViewDisplayOrder.forEach((loginItem, index) => {
+            var _a, _b, _c;
+            if (loginItem === 'email' && ((_a = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.providers) === null || _a === void 0 ? void 0 : _a.length)) {
+                loginViewSections = loginViewSections.concat(getEmailViewSectionDefinition(), 
+                // add separator if wallets defined
+                addSeparator(index, loginItem));
+            }
+            if (loginItem === 'wallet' && (wallets === null || wallets === void 0 ? void 0 : wallets.length)) {
+                // if showWalletsButton is true, it should show "Connec with Wallet" button
+                const numOfItemsToDisplay = ((_c = (_b = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.design) === null || _b === void 0 ? void 0 : _b.modal) === null || _c === void 0 ? void 0 : _c.showWalletsButton)
+                    ? 0
+                    : NUMBER_OF_WALLETS;
+                loginViewSections = loginViewSections.concat([
+                    {
+                        numOfItemsToDisplay,
+                        type: sdkApi.SdkViewSectionType.Wallet,
+                    },
+                ], 
+                // add separator if email providers defined
+                addSeparator(index, loginItem));
+            }
+        });
+        return loginViewSections;
+    };
+    /**
+     * returns the login view sections to be displayed in order from projectSettings?.sdk?.views
+     * and has backwards compatibility with project settings design.modal props
+     */
+    const logingViewSections = React.useMemo(() => {
+        var _a, _b, _c, _d, _e;
+        const loginView = (_b = (_a = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk) === null || _a === void 0 ? void 0 : _a.views) === null || _b === void 0 ? void 0 : _b.find((view) => view.type === sdkApi.SdkViewType.Login);
+        if ((_c = loginView === null || loginView === void 0 ? void 0 : loginView.sections) === null || _c === void 0 ? void 0 : _c.length) {
+            return filterLoginViewSections(loginView === null || loginView === void 0 ? void 0 : loginView.sections);
+        }
+        if ((_e = (_d = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.design) === null || _d === void 0 ? void 0 : _d.modal) === null || _e === void 0 ? void 0 : _e.emailOnly) {
+            return getEmailViewSectionDefinition();
+        }
+        return buildLoginSections();
+    }, [
+        projectSettings,
+        authorizationViewDisplayOrder,
+        getEmailViewSectionDefinition,
+        filterLoginViewSections,
+        buildLoginSections,
+    ]);
+    return {
+        isWalletOnly,
+        logingViewSections,
+    };
+};
+
+exports.NUMBER_OF_WALLETS = NUMBER_OF_WALLETS;
+exports.useLoginView = useLoginView;

package/src/lib/views/LoginView/useLoginView.d.ts

@@ -0,0 +1,6 @@
+import { SdkViewSection } from '@dynamic-labs/sdk-api';
+export declare const NUMBER_OF_WALLETS = 3;
+export declare const useLoginView: () => {
+    isWalletOnly: boolean;
+    logingViewSections: SdkViewSection[];
+};

package/src/lib/views/LoginView/useLoginView.js

@@ -0,0 +1,141 @@
+import { useMemo } from 'react';
+import { SdkViewType, SdkViewSectionType } from '@dynamic-labs/sdk-api';
+import { useInternalDynamicContext } from '../../context/DynamicContext/useInternalDynamicContext.js';
+
+const NUMBER_OF_WALLETS = 3;
+const useLoginView = () => {
+    const { projectSettings, authorizationViewDisplayOrder, loginWithEmail, wallets, } = useInternalDynamicContext();
+    const isWalletOnly = useMemo(() => {
+        var _a, _b, _c, _d, _e, _f;
+        if (!projectSettings) {
+            return false;
+        }
+        // toolkit functionality overrides whatever is defined
+        if (!loginWithEmail) {
+            return true;
+        }
+        const loginView = (_b = (_a = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk) === null || _a === void 0 ? void 0 : _a.views) === null || _b === void 0 ? void 0 : _b.find((view) => view.type === SdkViewType.Login);
+        // backwards compatibility for those that didn't set up login view sessions
+        if (!((_c = loginView === null || loginView === void 0 ? void 0 : loginView.sections) === null || _c === void 0 ? void 0 : _c.length)) {
+            return (!((_e = (_d = projectSettings.design) === null || _d === void 0 ? void 0 : _d.modal) === null || _e === void 0 ? void 0 : _e.emailOnly) &&
+                !((_f = projectSettings.providers) === null || _f === void 0 ? void 0 : _f.length));
+        }
+        return (loginView.sections.length === 1 && loginView.sections[0].type === 'wallet');
+    }, [projectSettings, loginWithEmail]);
+    /**
+     * build email and social view sections from project settings design.modal props - backwards compatibility
+     * @returns SdkViewSection[]
+     */
+    const getEmailViewSectionDefinition = () => {
+        var _a, _b, _c, _d;
+        const loginViewSections = [
+            {
+                type: SdkViewSectionType.Email,
+            },
+        ];
+        const numOfProvidersToDisplay = (_b = (_a = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk.socialSignIn) === null || _a === void 0 ? void 0 : _a.providers) === null || _b === void 0 ? void 0 : _b.filter((provider) => provider.enabled).length;
+        if (numOfProvidersToDisplay) {
+            loginViewSections.push({
+                numOfItemsToDisplay: numOfProvidersToDisplay,
+                type: SdkViewSectionType.Social,
+            });
+            if ((_c = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.design.modal) === null || _c === void 0 ? void 0 : _c.splitEmailAndSocial) {
+                loginViewSections.splice(1, 0, {
+                    label: 'Or',
+                    type: SdkViewSectionType.Separator,
+                });
+            }
+        }
+        if ((_d = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.design.modal) === null || _d === void 0 ? void 0 : _d.socialAboveEmail) {
+            loginViewSections.reverse();
+        }
+        return loginViewSections;
+    };
+    // TODO: https://linear.app/dynamic-labs/issue/GVTY-212/rethink-or-implement-toolkit-template-for-email-wallet-order
+    /**
+     * remove wallet view section from projectSettings?.sdk?.views if no wallet defined
+     * @param sections
+     * @returns
+     */
+    const filterLoginViewSections = (sections) => {
+        if (wallets === null || wallets === void 0 ? void 0 : wallets.length) {
+            return sections;
+        }
+        return sections.filter((section) => section.type !== 'wallet');
+    };
+    const addSeparator = (index, loginItem) => {
+        var _a;
+        // if not the first index, no separator is needed
+        // if the first index but does not have wallets or providers,
+        // it'll show only one view section - no separator is needed
+        if (index !== 0 ||
+            !(wallets === null || wallets === void 0 ? void 0 : wallets.length) ||
+            !((_a = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.providers) === null || _a === void 0 ? void 0 : _a.length)) {
+            return [];
+        }
+        const label = loginItem === 'email' ? 'Or continue with a wallet' : 'Or continue with';
+        return [
+            {
+                label,
+                type: SdkViewSectionType.Separator,
+            },
+        ];
+    };
+    /**
+     * build login view sections array from project settings design.modal props - backwards compatibility
+     * @returns SdkViewSection[]
+     */
+    const buildLoginSections = () => {
+        let loginViewSections = [];
+        authorizationViewDisplayOrder === null || authorizationViewDisplayOrder === void 0 ? void 0 : authorizationViewDisplayOrder.forEach((loginItem, index) => {
+            var _a, _b, _c;
+            if (loginItem === 'email' && ((_a = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.providers) === null || _a === void 0 ? void 0 : _a.length)) {
+                loginViewSections = loginViewSections.concat(getEmailViewSectionDefinition(), 
+                // add separator if wallets defined
+                addSeparator(index, loginItem));
+            }
+            if (loginItem === 'wallet' && (wallets === null || wallets === void 0 ? void 0 : wallets.length)) {
+                // if showWalletsButton is true, it should show "Connec with Wallet" button
+                const numOfItemsToDisplay = ((_c = (_b = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.design) === null || _b === void 0 ? void 0 : _b.modal) === null || _c === void 0 ? void 0 : _c.showWalletsButton)
+                    ? 0
+                    : NUMBER_OF_WALLETS;
+                loginViewSections = loginViewSections.concat([
+                    {
+                        numOfItemsToDisplay,
+                        type: SdkViewSectionType.Wallet,
+                    },
+                ], 
+                // add separator if email providers defined
+                addSeparator(index, loginItem));
+            }
+        });
+        return loginViewSections;
+    };
+    /**
+     * returns the login view sections to be displayed in order from projectSettings?.sdk?.views
+     * and has backwards compatibility with project settings design.modal props
+     */
+    const logingViewSections = useMemo(() => {
+        var _a, _b, _c, _d, _e;
+        const loginView = (_b = (_a = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk) === null || _a === void 0 ? void 0 : _a.views) === null || _b === void 0 ? void 0 : _b.find((view) => view.type === SdkViewType.Login);
+        if ((_c = loginView === null || loginView === void 0 ? void 0 : loginView.sections) === null || _c === void 0 ? void 0 : _c.length) {
+            return filterLoginViewSections(loginView === null || loginView === void 0 ? void 0 : loginView.sections);
+        }
+        if ((_e = (_d = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.design) === null || _d === void 0 ? void 0 : _d.modal) === null || _e === void 0 ? void 0 : _e.emailOnly) {
+            return getEmailViewSectionDefinition();
+        }
+        return buildLoginSections();
+    }, [
+        projectSettings,
+        authorizationViewDisplayOrder,
+        getEmailViewSectionDefinition,
+        filterLoginViewSections,
+        buildLoginSections,
+    ]);
+    return {
+        isWalletOnly,
+        logingViewSections,
+    };
+};
+
+export { NUMBER_OF_WALLETS, useLoginView };

package/src/lib/views/WalletList/WalletListItem/WalletListItem.cjs

@@ -57,7 +57,7 @@ var Badge = require('../../../components/Badge/Badge.cjs');
 var isWalletGroup = require('../../../utils/functions/walletListBuilder/utils/isWalletGroup/isWalletGroup.cjs');
 var WalletGroupContext = require('../../../context/WalletGroupContext/WalletGroupContext.cjs');
 
-const WalletListItem = ({ usingMultiWallet, wallet, onResetSearchValue, tile = ({ leading, name, onClick, trailing }) => (jsxRuntime.jsx(ListTile.ListTile, Object.assign({ leading: leading, trailing: trailing, onClick: onClick, className: 'wallet-list-item__tile', dataTestId: 'ListTile' }, { children: name }))), }) => {
+const WalletListItem = ({ disabled = false, usingMultiWallet, wallet, onResetSearchValue, tile = ({ leading, name, onClick, trailing }) => (jsxRuntime.jsx(ListTile.ListTile, Object.assign({ leading: leading, trailing: trailing, onClick: onClick, className: 'wallet-list-item__tile', dataTestId: 'ListTile' }, { children: name }))), }) => {
     const { navigateToWalletGroup } = WalletGroupContext.useWalletGroupContext();
     const _isWalletGroup = isWalletGroup.isWalletGroup(wallet);
     const { walletBook: walletBook$1 } = walletBook.useWalletBookContext();
@@ -69,7 +69,7 @@ const WalletListItem = ({ usingMultiWallet, wallet, onResetSearchValue, tile = (
     const Tile = tile;
     const isComingSoon = label === 'Coming soon';
     const handleClick = () => _tslib.__awaiter(void 0, void 0, void 0, function* () {
-        if (isComingSoon) {
+        if (isComingSoon || disabled) {
             return;
         }
         onResetSearchValue === null || onResetSearchValue === void 0 ? void 0 : onResetSearchValue('');

package/src/lib/views/WalletList/WalletListItem/WalletListItem.js

@@ -53,7 +53,7 @@ import { Badge } from '../../../components/Badge/Badge.js';
 import { isWalletGroup } from '../../../utils/functions/walletListBuilder/utils/isWalletGroup/isWalletGroup.js';
 import { useWalletGroupContext } from '../../../context/WalletGroupContext/WalletGroupContext.js';
 
-const WalletListItem = ({ usingMultiWallet, wallet, onResetSearchValue, tile = ({ leading, name, onClick, trailing }) => (jsx(ListTile, Object.assign({ leading: leading, trailing: trailing, onClick: onClick, className: 'wallet-list-item__tile', dataTestId: 'ListTile' }, { children: name }))), }) => {
+const WalletListItem = ({ disabled = false, usingMultiWallet, wallet, onResetSearchValue, tile = ({ leading, name, onClick, trailing }) => (jsx(ListTile, Object.assign({ leading: leading, trailing: trailing, onClick: onClick, className: 'wallet-list-item__tile', dataTestId: 'ListTile' }, { children: name }))), }) => {
     const { navigateToWalletGroup } = useWalletGroupContext();
     const _isWalletGroup = isWalletGroup(wallet);
     const { walletBook } = useWalletBookContext();
@@ -65,7 +65,7 @@ const WalletListItem = ({ usingMultiWallet, wallet, onResetSearchValue, tile = (
     const Tile = tile;
     const isComingSoon = label === 'Coming soon';
     const handleClick = () => __awaiter(void 0, void 0, void 0, function* () {
-        if (isComingSoon) {
+        if (isComingSoon || disabled) {
             return;
         }
         onResetSearchValue === null || onResetSearchValue === void 0 ? void 0 : onResetSearchValue('');

package/src/lib/views/WalletList/WalletListItem/WalletListItem.types.d.ts

@@ -5,6 +5,7 @@ export type WalletListItemProps = {
     tile?: WalletListItemTile;
     usingMultiWallet: boolean;
     wallet: WalletOption;
+    disabled?: boolean;
 };
 export type WalletListItemComponent = (props: WalletListItemProps) => ReactElement;
 export type WalletListItemTileProps = {

package/src/lib/views/viewToComponentMap.cjs

@@ -10,7 +10,6 @@ var EmailConfirmationWaitingView = require('./EmailConfirmationWaitingView/Email
 var EmailUpdate = require('./EmailUpdate/EmailUpdate.cjs');
 var EmailVerification = require('./EmailVerification/EmailVerification.cjs');
 var EmailWalletOTPVerificationView = require('./EmailWalletOTPVerificationView/EmailWalletOTPVerificationView.cjs');
-var LoginWithEmailView = require('./LoginWithEmailView/LoginWithEmailView.cjs');
 var NetworkNotSupported = require('./NetworkNotSupported/NetworkNotSupported.cjs');
 var NetworkNotSupportedSwitchManual = require('./NetworkNotSupportedSwitchManual/NetworkNotSupportedSwitchManual.cjs');
 var NoQrNotInstalledView = require('./NoQrNotInstalledView/NoQrNotInstalledView.cjs');
@@ -31,6 +30,7 @@ var BridgeNextWalletConnectionView = require('./BridgeNextWalletConnectionView/B
 var AccountExistsView = require('./AccountExistsView/AccountExistsView.cjs');
 var MergeUserAccountsView = require('./MergeUserAccountsView/MergeUserAccountsView.cjs');
 var WalletCannotBeTransferredView = require('./WalletCannotBeTransferredView/WalletCannotBeTransferredView.cjs');
+var LoginView = require('./LoginView/LoginView.cjs');
 
 const viewToComponentMap = {
     'account-exists': jsxRuntime.jsx(AccountExistsView.AccountExistsView, {}),
@@ -43,9 +43,10 @@ const viewToComponentMap = {
     'collect-user-data-login-with-email': jsxRuntime.jsx(CollectUserDataViewLoginWithEmail.CollectUserDataViewLoginWithEmail, {}),
     'email-wallet-otp-verification-view': jsxRuntime.jsx(EmailWalletOTPVerificationView.EmailWalletOTPVerificationView, {}),
     'gate-blocked-wallet': jsxRuntime.jsx(NoAccess.NoAccess, {}),
-    'login-with-email-or-wallet': jsxRuntime.jsx(LoginWithEmailView.LoginWithEmailView, {}),
-    'login-with-email-or-wallet-full-wallet-list': jsxRuntime.jsx(WalletList.WalletList, {}),
+    'login-with-email-or-wallet': jsxRuntime.jsx(LoginView.LoginView, {}),
+    'login-with-email-or-wallet-full-wallet-list': jsxRuntime.jsx(LoginView.LoginView, {}),
     'login-with-email-verification': jsxRuntime.jsx(EmailVerification.EmailVerification, {}),
+    'login-with-wallet-only': jsxRuntime.jsx(LoginView.LoginView, {}),
     'merge-user-accounts': jsxRuntime.jsx(MergeUserAccountsView.MergeUserAccountsView, {}),
     'network-not-supported': jsxRuntime.jsx(NetworkNotSupported.NetworkNotSupported, {}),
     'network-not-supported-manual': jsxRuntime.jsx(NetworkNotSupportedSwitchManual.NetworkNotSupportedSwitchManual, {}),