@dynamic-labs/sdk-react-core 0.19.0-alpha.24 → 0.19.0-alpha.26

package/src/lib/views/LoginView/sections/SocialSignInSection/SocialSignInSection.cjs

@@ -22,11 +22,12 @@ var getSocialSignInProviderFromString = require('../../../../utils/functions/get
 var MagicSocialSignIn = require('./MagicSocialSignIn/MagicSocialSignIn.cjs');
 var DynamicSocialSignIn = require('./DynamicSocialSignIn/DynamicSocialSignIn.cjs');
 
-const SocialSignInSection = ({ sectionData }) => {
+const SocialSignInSection = ({ sectionData, collapsedLayout, }) => {
     var _a, _b, _c;
     const { projectSettings } = useInternalDynamicContext.useInternalDynamicContext();
     const providers = (_a = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.providers) !== null && _a !== void 0 ? _a : [];
     const componentProps = {
+        collapsedLayout,
         defaultProvider: getSocialSignInProviderFromString.getSocialSignInProviderFromString(sectionData.defaultItem),
         numOfItemsToDisplay: sectionData.numOfItemsToDisplay,
     };

package/src/lib/views/LoginView/sections/SocialSignInSection/SocialSignInSection.d.ts

@@ -2,6 +2,7 @@
 import { SdkViewSection } from '@dynamic-labs/sdk-api';
 type Props = {
     sectionData: SdkViewSection;
+    collapsedLayout?: boolean;
 };
-export declare const SocialSignInSection: ({ sectionData }: Props) => JSX.Element | null;
+export declare const SocialSignInSection: ({ sectionData, collapsedLayout, }: Props) => JSX.Element | null;
 export {};

package/src/lib/views/LoginView/sections/SocialSignInSection/SocialSignInSection.js

@@ -18,11 +18,12 @@ import { getSocialSignInProviderFromString } from '../../../../utils/functions/g
 import { MagicSocialSignIn } from './MagicSocialSignIn/MagicSocialSignIn.js';
 import { DynamicSocialSignIn } from './DynamicSocialSignIn/DynamicSocialSignIn.js';
 
-const SocialSignInSection = ({ sectionData }) => {
+const SocialSignInSection = ({ sectionData, collapsedLayout, }) => {
     var _a, _b, _c;
     const { projectSettings } = useInternalDynamicContext();
     const providers = (_a = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.providers) !== null && _a !== void 0 ? _a : [];
     const componentProps = {
+        collapsedLayout,
         defaultProvider: getSocialSignInProviderFromString(sectionData.defaultItem),
         numOfItemsToDisplay: sectionData.numOfItemsToDisplay,
     };

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

@@ -6,6 +6,7 @@ var React = require('react');
 var reactI18next = require('react-i18next');
 var sdkApi = require('@dynamic-labs/sdk-api');
 var useInternalDynamicContext = require('../../context/DynamicContext/useInternalDynamicContext.cjs');
+var SocialRedirectContext = require('../../context/SocialRedirectContext/SocialRedirectContext.cjs');
 require('../../shared/logger.cjs');
 require('@dynamic-labs/iconic');
 require('@dynamic-labs/wallet-connector-core');
@@ -24,14 +25,16 @@ var index = require('../../utils/functions/getEnabledProviders/index.cjs');
 /* eslint-disable multiline-comment-style */
 const NUMBER_OF_WALLETS = 3;
 const useLoginView = () => {
-    const { projectSettings, authorizationViewDisplayOrder, loginWithEmail, wallets, } = useInternalDynamicContext.useInternalDynamicContext();
+    var _a, _b, _c, _d;
+    const { projectSettings, authorizationViewDisplayOrder, loginWithEmail, wallets, walletsFilter, } = useInternalDynamicContext.useInternalDynamicContext();
+    const { enabledSocialProviders } = SocialRedirectContext.useSocialRedirectContext();
     /** Takes from wallets only those that can be selected in the wallet list by the user.
      * Should filter out embedded wallets
      * WHY: when we decide whether to show wallets or not, we need to know how many wallets
      * will actually be rendered. It would be especially bad to only have for ex "turnkey" in
      * wallets and then display an empty wallet list (since turnkey doesn't render)
      */
-    const selectableWallets = wallets.filter(({ key }) => key !== 'turnkey');
+    const selectableWallets = (walletsFilter ? walletsFilter(wallets) : wallets).filter(({ key }) => key !== 'turnkey');
     const { t } = reactI18next.useTranslation();
     const hasEnabledProviders = Boolean(index.getEnabledProviders(projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.providers).length);
     const isWalletOnly = React.useMemo(() => {
@@ -55,46 +58,51 @@ const useLoginView = () => {
      * build email and social view sections from project settings design.modal props - backwards compatibility
      * @returns SdkViewSection[]
      */
-    const getEmailViewSectionDefinition = () => {
-        var _a, _b, _c, _d;
+    const getEmailViewSectionDefinition = React.useCallback(() => {
+        var _a, _b;
         const loginViewSections = [
             {
                 type: sdkApi.SdkViewSectionType.Email,
             },
         ];
-        const enabledSocialProviders = (_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);
         if (enabledSocialProviders === null || enabledSocialProviders === void 0 ? void 0 : enabledSocialProviders.length) {
-            loginViewSections.push({
+            const socialSection = {
                 numOfItemsToDisplay: 5,
                 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.push(socialSection);
+            if ((_a = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.design.modal) === null || _a === void 0 ? void 0 : _a.splitEmailAndSocial) {
                 loginViewSections.splice(1, 0, {
                     label: t('dyn_login.separators.default'),
                     type: sdkApi.SdkViewSectionType.Separator,
                 });
-                loginViewSections[loginViewSections.length - 1].defaultItem =
-                    enabledSocialProviders[0].provider;
+                // eslint-disable-next-line prefer-destructuring
+                socialSection.defaultItem = enabledSocialProviders[0];
             }
         }
-        if ((_d = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.design.modal) === null || _d === void 0 ? void 0 : _d.socialAboveEmail) {
+        if ((_b = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.design.modal) === null || _b === void 0 ? void 0 : _b.socialAboveEmail) {
             loginViewSections.reverse();
         }
         return loginViewSections;
-    };
+    }, [
+        enabledSocialProviders,
+        (_a = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.design.modal) === null || _a === void 0 ? void 0 : _a.socialAboveEmail,
+        (_b = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.design.modal) === null || _b === void 0 ? void 0 : _b.splitEmailAndSocial,
+        t,
+    ]);
     // 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) => {
+    const filterLoginViewSections = React.useCallback((sections) => {
         if (selectableWallets === null || selectableWallets === void 0 ? void 0 : selectableWallets.length) {
             return sections;
         }
         return sections.filter((section) => section.type !== 'wallet');
-    };
-    const addSeparator = (index, loginItem) => {
+    }, [selectableWallets === null || selectableWallets === void 0 ? void 0 : selectableWallets.length]);
+    const addSeparator = React.useCallback((index) => {
         // 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
@@ -107,12 +115,12 @@ const useLoginView = () => {
                 type: sdkApi.SdkViewSectionType.Separator,
             },
         ];
-    };
+    }, [hasEnabledProviders, selectableWallets === null || selectableWallets === void 0 ? void 0 : selectableWallets.length, t]);
     /**
      * build login view sections array from project settings design.modal props - backwards compatibility
      * @returns SdkViewSection[]
      */
-    const buildLoginSections = () => {
+    const buildLoginSections = React.useCallback(() => {
         let loginViewSections = [];
         authorizationViewDisplayOrder === null || authorizationViewDisplayOrder === void 0 ? void 0 : authorizationViewDisplayOrder.forEach((loginItem, index) => {
             var _a, _b;
@@ -139,7 +147,14 @@ const useLoginView = () => {
             }
         });
         return loginViewSections;
-    };
+    }, [
+        addSeparator,
+        authorizationViewDisplayOrder,
+        getEmailViewSectionDefinition,
+        (_d = (_c = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.design) === null || _c === void 0 ? void 0 : _c.modal) === null || _d === void 0 ? void 0 : _d.showWalletsButton,
+        projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.providers,
+        selectableWallets === null || selectableWallets === void 0 ? void 0 : selectableWallets.length,
+    ]);
     /**
      * returns the login view sections to be displayed in order from projectSettings?.sdk?.views
      * and has backwards compatibility with project settings design.modal props
@@ -156,7 +171,6 @@ const useLoginView = () => {
         return buildLoginSections();
     }, [
         projectSettings,
-        authorizationViewDisplayOrder,
         getEmailViewSectionDefinition,
         filterLoginViewSections,
         buildLoginSections,

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

@@ -1,7 +1,8 @@
-import { useMemo } from 'react';
+import { useMemo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { SdkViewType, SdkViewSectionType } from '@dynamic-labs/sdk-api';
 import { useInternalDynamicContext } from '../../context/DynamicContext/useInternalDynamicContext.js';
+import { useSocialRedirectContext } from '../../context/SocialRedirectContext/SocialRedirectContext.js';
 import '../../shared/logger.js';
 import '@dynamic-labs/iconic';
 import '@dynamic-labs/wallet-connector-core';
@@ -20,14 +21,16 @@ import { getEnabledProviders } from '../../utils/functions/getEnabledProviders/i
 /* eslint-disable multiline-comment-style */
 const NUMBER_OF_WALLETS = 3;
 const useLoginView = () => {
-    const { projectSettings, authorizationViewDisplayOrder, loginWithEmail, wallets, } = useInternalDynamicContext();
+    var _a, _b, _c, _d;
+    const { projectSettings, authorizationViewDisplayOrder, loginWithEmail, wallets, walletsFilter, } = useInternalDynamicContext();
+    const { enabledSocialProviders } = useSocialRedirectContext();
     /** Takes from wallets only those that can be selected in the wallet list by the user.
      * Should filter out embedded wallets
      * WHY: when we decide whether to show wallets or not, we need to know how many wallets
      * will actually be rendered. It would be especially bad to only have for ex "turnkey" in
      * wallets and then display an empty wallet list (since turnkey doesn't render)
      */
-    const selectableWallets = wallets.filter(({ key }) => key !== 'turnkey');
+    const selectableWallets = (walletsFilter ? walletsFilter(wallets) : wallets).filter(({ key }) => key !== 'turnkey');
     const { t } = useTranslation();
     const hasEnabledProviders = Boolean(getEnabledProviders(projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.providers).length);
     const isWalletOnly = useMemo(() => {
@@ -51,46 +54,51 @@ const useLoginView = () => {
      * build email and social view sections from project settings design.modal props - backwards compatibility
      * @returns SdkViewSection[]
      */
-    const getEmailViewSectionDefinition = () => {
-        var _a, _b, _c, _d;
+    const getEmailViewSectionDefinition = useCallback(() => {
+        var _a, _b;
         const loginViewSections = [
             {
                 type: SdkViewSectionType.Email,
             },
         ];
-        const enabledSocialProviders = (_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);
         if (enabledSocialProviders === null || enabledSocialProviders === void 0 ? void 0 : enabledSocialProviders.length) {
-            loginViewSections.push({
+            const socialSection = {
                 numOfItemsToDisplay: 5,
                 type: SdkViewSectionType.Social,
-            });
-            if ((_c = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.design.modal) === null || _c === void 0 ? void 0 : _c.splitEmailAndSocial) {
+            };
+            loginViewSections.push(socialSection);
+            if ((_a = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.design.modal) === null || _a === void 0 ? void 0 : _a.splitEmailAndSocial) {
                 loginViewSections.splice(1, 0, {
                     label: t('dyn_login.separators.default'),
                     type: SdkViewSectionType.Separator,
                 });
-                loginViewSections[loginViewSections.length - 1].defaultItem =
-                    enabledSocialProviders[0].provider;
+                // eslint-disable-next-line prefer-destructuring
+                socialSection.defaultItem = enabledSocialProviders[0];
             }
         }
-        if ((_d = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.design.modal) === null || _d === void 0 ? void 0 : _d.socialAboveEmail) {
+        if ((_b = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.design.modal) === null || _b === void 0 ? void 0 : _b.socialAboveEmail) {
             loginViewSections.reverse();
         }
         return loginViewSections;
-    };
+    }, [
+        enabledSocialProviders,
+        (_a = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.design.modal) === null || _a === void 0 ? void 0 : _a.socialAboveEmail,
+        (_b = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.design.modal) === null || _b === void 0 ? void 0 : _b.splitEmailAndSocial,
+        t,
+    ]);
     // 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) => {
+    const filterLoginViewSections = useCallback((sections) => {
         if (selectableWallets === null || selectableWallets === void 0 ? void 0 : selectableWallets.length) {
             return sections;
         }
         return sections.filter((section) => section.type !== 'wallet');
-    };
-    const addSeparator = (index, loginItem) => {
+    }, [selectableWallets === null || selectableWallets === void 0 ? void 0 : selectableWallets.length]);
+    const addSeparator = useCallback((index) => {
         // 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
@@ -103,12 +111,12 @@ const useLoginView = () => {
                 type: SdkViewSectionType.Separator,
             },
         ];
-    };
+    }, [hasEnabledProviders, selectableWallets === null || selectableWallets === void 0 ? void 0 : selectableWallets.length, t]);
     /**
      * build login view sections array from project settings design.modal props - backwards compatibility
      * @returns SdkViewSection[]
      */
-    const buildLoginSections = () => {
+    const buildLoginSections = useCallback(() => {
         let loginViewSections = [];
         authorizationViewDisplayOrder === null || authorizationViewDisplayOrder === void 0 ? void 0 : authorizationViewDisplayOrder.forEach((loginItem, index) => {
             var _a, _b;
@@ -135,7 +143,14 @@ const useLoginView = () => {
             }
         });
         return loginViewSections;
-    };
+    }, [
+        addSeparator,
+        authorizationViewDisplayOrder,
+        getEmailViewSectionDefinition,
+        (_d = (_c = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.design) === null || _c === void 0 ? void 0 : _c.modal) === null || _d === void 0 ? void 0 : _d.showWalletsButton,
+        projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.providers,
+        selectableWallets === null || selectableWallets === void 0 ? void 0 : selectableWallets.length,
+    ]);
     /**
      * returns the login view sections to be displayed in order from projectSettings?.sdk?.views
      * and has backwards compatibility with project settings design.modal props
@@ -152,7 +167,6 @@ const useLoginView = () => {
         return buildLoginSections();
     }, [
         projectSettings,
-        authorizationViewDisplayOrder,
         getEmailViewSectionDefinition,
         filterLoginViewSections,
         buildLoginSections,

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

@@ -53,9 +53,10 @@ const WalletList = ({ isWalletConnectList = false, }) => {
         multiWallet,
         numberOfWalletsToShow: defaultNumberOfWalletsToShow,
         searchFilter: filterValue,
+        showMoreWalletsWithFilter: true,
         signWithEmailWalletName,
         walletBook: walletBook$1,
-        walletsFilter: walletsFilter,
+        walletsFilter,
     });
     const isSearchEnabled = numberOfWallets > defaultNumberOfWalletsToShow &&
         walletsList.length !== numberOfWallets;

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

@@ -49,9 +49,10 @@ const WalletList = ({ isWalletConnectList = false, }) => {
         multiWallet,
         numberOfWalletsToShow: defaultNumberOfWalletsToShow,
         searchFilter: filterValue,
+        showMoreWalletsWithFilter: true,
         signWithEmailWalletName,
         walletBook,
-        walletsFilter: walletsFilter,
+        walletsFilter,
     });
     const isSearchEnabled = numberOfWallets > defaultNumberOfWalletsToShow &&
         walletsList.length !== numberOfWallets;