@dynamic-labs/sdk-react-core 3.0.0-alpha.22 → 3.0.0-alpha.23

package/CHANGELOG.md

@@ -1,4 +1,18 @@
 
+## [3.0.0-alpha.23](https://github.com/dynamic-labs/DynamicAuth/compare/v3.0.0-alpha.22...v3.0.0-alpha.23) (2024-07-19)
+
+
+### Features
+
+* show custom labels in the sdk ([#6352](https://github.com/dynamic-labs/DynamicAuth/issues/6352)) ([6eec9b2](https://github.com/dynamic-labs/DynamicAuth/commit/6eec9b26dbfd25c5138378aa92de8379a5cd0ddc))
+
+
+### Bug Fixes
+
+* add missing await to viem controller ([#6354](https://github.com/dynamic-labs/DynamicAuth/issues/6354)) ([32c7362](https://github.com/dynamic-labs/DynamicAuth/commit/32c73625c5575f9134edd541c7221aba08a741b5))
+* allow for react-native 0.74.x ([#6371](https://github.com/dynamic-labs/DynamicAuth/issues/6371)) ([37e08b6](https://github.com/dynamic-labs/DynamicAuth/commit/37e08b6b32bcaef7b7f6a4dedc45b2321f3f64a6))
+* not able to switch to secondary wallet ([#6373](https://github.com/dynamic-labs/DynamicAuth/issues/6373)) ([f85ed10](https://github.com/dynamic-labs/DynamicAuth/commit/f85ed10aca8bf41658eb1418cd87e1c5061d4b1b))
+
 ## [3.0.0-alpha.22](https://github.com/dynamic-labs/DynamicAuth/compare/v3.0.0-alpha.21...v3.0.0-alpha.22) (2024-07-18)
 
 

package/package.cjs

@@ -3,7 +3,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var version = "3.0.0-alpha.22";
+var version = "3.0.0-alpha.23";
 var dependencies = {
 	"@dynamic-labs/sdk-api-core": "0.0.489",
 	"@hcaptcha/react-hcaptcha": "1.4.4",

package/package.js

@@ -1,5 +1,5 @@
 'use client'
-var version = "3.0.0-alpha.22";
+var version = "3.0.0-alpha.23";
 var dependencies = {
 	"@dynamic-labs/sdk-api-core": "0.0.489",
 	"@hcaptcha/react-hcaptcha": "1.4.4",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dynamic-labs/sdk-react-core",
-  "version": "3.0.0-alpha.22",
+  "version": "3.0.0-alpha.23",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/dynamic-labs/dynamic-auth.git",
@@ -17,15 +17,15 @@
     "react-i18next": "13.5.0",
     "yup": "0.32.11",
     "react-international-phone": "4.2.5",
-    "@dynamic-labs/iconic": "3.0.0-alpha.22",
-    "@dynamic-labs/logger": "3.0.0-alpha.22",
-    "@dynamic-labs/multi-wallet": "3.0.0-alpha.22",
-    "@dynamic-labs/rpc-providers": "3.0.0-alpha.22",
-    "@dynamic-labs/store": "3.0.0-alpha.22",
-    "@dynamic-labs/types": "3.0.0-alpha.22",
-    "@dynamic-labs/utils": "3.0.0-alpha.22",
-    "@dynamic-labs/wallet-book": "3.0.0-alpha.22",
-    "@dynamic-labs/wallet-connector-core": "3.0.0-alpha.22",
+    "@dynamic-labs/iconic": "3.0.0-alpha.23",
+    "@dynamic-labs/logger": "3.0.0-alpha.23",
+    "@dynamic-labs/multi-wallet": "3.0.0-alpha.23",
+    "@dynamic-labs/rpc-providers": "3.0.0-alpha.23",
+    "@dynamic-labs/store": "3.0.0-alpha.23",
+    "@dynamic-labs/types": "3.0.0-alpha.23",
+    "@dynamic-labs/utils": "3.0.0-alpha.23",
+    "@dynamic-labs/wallet-book": "3.0.0-alpha.23",
+    "@dynamic-labs/wallet-connector-core": "3.0.0-alpha.23",
     "eventemitter3": "5.0.1"
   },
   "devDependencies": {

package/src/lib/components/UserProfile/UserProfile.cjs

@@ -137,7 +137,7 @@ const UserProfile = ({ rootClassName }) => {
     // if it's multiwallet, the wallet should appear in the wallets tab
     // if there's a primary wallet, it will be displayed in the header
     const wallet = !multiWallet && !primaryWallet && userWallets[0];
-    return (jsxRuntime.jsxs("div", { "data-testid": 'userProfile', className: classNames.classNames('user-profile', rootClassName), ref: containerRef, children: [error && jsxRuntime.jsx(ErrorContainer.ErrorContainer, { children: error }), wallet && (jsxRuntime.jsx(UserProfileSection.UserProfileSection, { title: t('dyn_user_profile.my_wallet.title'), children: jsxRuntime.jsx(Wallet.Wallet, { ens: (_a = getWalletVerifiedCredential.getWalletVerifiedCredential(wallet.address, user === null || user === void 0 ? void 0 : user.verifiedCredentials, wallet.chain)) === null || _a === void 0 ? void 0 : _a.nameService, wallet: wallet }, wallet.id) })), (allUserFields === null || allUserFields === void 0 ? void 0 : allUserFields.length) > 0 && (jsxRuntime.jsx(UserProfileSection.UserProfileSection, { title: t('dyn_user_profile.my_information.title'), children: jsxRuntime.jsx("div", { className: 'user-profile__fields', children: allUserFields.map(({ name, validationType, type }) => {
+    return (jsxRuntime.jsxs("div", { "data-testid": 'userProfile', className: classNames.classNames('user-profile', rootClassName), ref: containerRef, children: [error && jsxRuntime.jsx(ErrorContainer.ErrorContainer, { children: error }), wallet && (jsxRuntime.jsx(UserProfileSection.UserProfileSection, { title: t('dyn_user_profile.my_wallet.title'), children: jsxRuntime.jsx(Wallet.Wallet, { ens: (_a = getWalletVerifiedCredential.getWalletVerifiedCredential(wallet.address, user === null || user === void 0 ? void 0 : user.verifiedCredentials, wallet.chain)) === null || _a === void 0 ? void 0 : _a.nameService, wallet: wallet }, wallet.id) })), (allUserFields === null || allUserFields === void 0 ? void 0 : allUserFields.length) > 0 && (jsxRuntime.jsx(UserProfileSection.UserProfileSection, { title: t('dyn_user_profile.my_information.title'), children: jsxRuntime.jsx("div", { className: 'user-profile__fields', children: allUserFields.map(({ name, validationType, type, label }) => {
                         var _a, _b;
                         if (type === sdkApiCore.KycFieldType.Custom) {
                             const value = (_b = (_a = user.metadata) === null || _a === void 0 ? void 0 : _a[name]) !== null && _b !== void 0 ? _b : '';
@@ -146,11 +146,10 @@ const UserProfile = ({ rootClassName }) => {
                                 fieldValue = value.length > 0 ? 'Checked' : 'Unchecked';
                             return (jsxRuntime.jsx(UserProfileField.UserProfileField, { name: name, label: name, value: fieldValue }, name));
                         }
-                        else {
-                            const { label, key } = index$1.getValueByKey(fieldsConfig, name);
-                            const value = mapFieldKeyToValue(name);
-                            return (jsxRuntime.jsx(UserProfileField.UserProfileField, { copykey: key, name: name, label: label, value: value }, name));
-                        }
+                        const { label: defaultLabel, key } = index$1.getValueByKey(fieldsConfig, name);
+                        label !== null && label !== void 0 ? label : (label = defaultLabel);
+                        const value = mapFieldKeyToValue(name);
+                        return (jsxRuntime.jsx(UserProfileField.UserProfileField, { copykey: key, name: name, label: label, value: value }, name));
                     }) }) })), canLink && !multiWallet && (jsxRuntime.jsx(UserProfileSection.UserProfileSection, { title: t('dyn_user_profile.wallets.title'), children: jsxRuntime.jsx(TypographyButton.TypographyButton, { dataTestId: 'link-wallet-button', onClick: addNewWallet, startSlot: jsxRuntime.jsx(add.ReactComponent, {}), showInternalLoading: false, children: jsxRuntime.jsx(Typography.Typography, { color: 'primary', weight: 'medium', copykey: 'dyn_user_profile.wallets.link_wallet_button', children: t('dyn_user_profile.wallets.link_wallet_button') }) }) })), (providers === null || providers === void 0 ? void 0 : providers.length) > 0 && (jsxRuntime.jsx(UserProfileSection.UserProfileSection, { title: t('dyn_user_profile.social_accounts.title'), children: jsxRuntime.jsx("div", { className: 'user-profile__social-accounts', children: providers.map(({ provider }) => (jsxRuntime.jsx(UserProfileSocialAccount.UserProfileSocialAccount, { provider: provider }, provider))) }) }))] }));
 };
 

package/src/lib/components/UserProfile/UserProfile.js

@@ -133,7 +133,7 @@ const UserProfile = ({ rootClassName }) => {
     // if it's multiwallet, the wallet should appear in the wallets tab
     // if there's a primary wallet, it will be displayed in the header
     const wallet = !multiWallet && !primaryWallet && userWallets[0];
-    return (jsxs("div", { "data-testid": 'userProfile', className: classNames('user-profile', rootClassName), ref: containerRef, children: [error && jsx(ErrorContainer, { children: error }), wallet && (jsx(UserProfileSection, { title: t('dyn_user_profile.my_wallet.title'), children: jsx(Wallet, { ens: (_a = getWalletVerifiedCredential(wallet.address, user === null || user === void 0 ? void 0 : user.verifiedCredentials, wallet.chain)) === null || _a === void 0 ? void 0 : _a.nameService, wallet: wallet }, wallet.id) })), (allUserFields === null || allUserFields === void 0 ? void 0 : allUserFields.length) > 0 && (jsx(UserProfileSection, { title: t('dyn_user_profile.my_information.title'), children: jsx("div", { className: 'user-profile__fields', children: allUserFields.map(({ name, validationType, type }) => {
+    return (jsxs("div", { "data-testid": 'userProfile', className: classNames('user-profile', rootClassName), ref: containerRef, children: [error && jsx(ErrorContainer, { children: error }), wallet && (jsx(UserProfileSection, { title: t('dyn_user_profile.my_wallet.title'), children: jsx(Wallet, { ens: (_a = getWalletVerifiedCredential(wallet.address, user === null || user === void 0 ? void 0 : user.verifiedCredentials, wallet.chain)) === null || _a === void 0 ? void 0 : _a.nameService, wallet: wallet }, wallet.id) })), (allUserFields === null || allUserFields === void 0 ? void 0 : allUserFields.length) > 0 && (jsx(UserProfileSection, { title: t('dyn_user_profile.my_information.title'), children: jsx("div", { className: 'user-profile__fields', children: allUserFields.map(({ name, validationType, type, label }) => {
                         var _a, _b;
                         if (type === KycFieldType.Custom) {
                             const value = (_b = (_a = user.metadata) === null || _a === void 0 ? void 0 : _a[name]) !== null && _b !== void 0 ? _b : '';
@@ -142,11 +142,10 @@ const UserProfile = ({ rootClassName }) => {
                                 fieldValue = value.length > 0 ? 'Checked' : 'Unchecked';
                             return (jsx(UserProfileField, { name: name, label: name, value: fieldValue }, name));
                         }
-                        else {
-                            const { label, key } = getValueByKey(fieldsConfig, name);
-                            const value = mapFieldKeyToValue(name);
-                            return (jsx(UserProfileField, { copykey: key, name: name, label: label, value: value }, name));
-                        }
+                        const { label: defaultLabel, key } = getValueByKey(fieldsConfig, name);
+                        label !== null && label !== void 0 ? label : (label = defaultLabel);
+                        const value = mapFieldKeyToValue(name);
+                        return (jsx(UserProfileField, { copykey: key, name: name, label: label, value: value }, name));
                     }) }) })), canLink && !multiWallet && (jsx(UserProfileSection, { title: t('dyn_user_profile.wallets.title'), children: jsx(TypographyButton, { dataTestId: 'link-wallet-button', onClick: addNewWallet, startSlot: jsx(SvgAdd, {}), showInternalLoading: false, children: jsx(Typography, { color: 'primary', weight: 'medium', copykey: 'dyn_user_profile.wallets.link_wallet_button', children: t('dyn_user_profile.wallets.link_wallet_button') }) }) })), (providers === null || providers === void 0 ? void 0 : providers.length) > 0 && (jsx(UserProfileSection, { title: t('dyn_user_profile.social_accounts.title'), children: jsx("div", { className: 'user-profile__social-accounts', children: providers.map(({ provider }) => (jsx(UserProfileSocialAccount, { provider: provider }, provider))) }) }))] }));
 };
 

package/src/lib/utils/hooks/multiWallet/useSyncPrimaryWallet/useSyncPrimaryWallet.cjs

@@ -91,7 +91,7 @@ require('../../../../context/ReinitializeContext/ReinitializeContextProvider.cjs
 var useInternalDynamicContext = require('../../../../context/DynamicContext/useDynamicContext/useInternalDynamicContext.cjs');
 
 const useSyncPrimaryWallet = (canSync = true) => {
-    const { setShowAuthFlow, isAuthenticated, authMode, connectWallet, handleLogOut, multiWalletWidgetState, primaryWallet, setMultiWalletWidgetState, showLockedWalletView, secondaryWallets, setPrimaryWallet, setSelectedWalletWithAction, multiWallet, } = useInternalDynamicContext.useInternalDynamicContext();
+    const { setShowAuthFlow, isAuthenticated, authMode, connectWallet, handleLogOut, multiWalletWidgetState, primaryWallet, setMultiWalletWidgetState, showLockedWalletView, secondaryWallets, setPrimaryWallet, setSelectedWalletWithAction, multiWallet, selectedWalletWithAction, } = useInternalDynamicContext.useInternalDynamicContext();
     const { setView } = ViewContext.useViewContext();
     const handlePrimaryWalletNotActive = React.useCallback((connectedAddress) => {
         logVerboseTroubleshootingMessage.logVerboseTroubleshootingMessage('[useSyncPrimaryWallet] handlePrimaryWalletNotActive', {
@@ -112,7 +112,11 @@ const useSyncPrimaryWallet = (canSync = true) => {
             connectedWalletWithSameProvider,
             multiWallet,
         });
-        if (multiWallet && connectedWalletWithSameProvider) {
+        // If user was explicitly trying to switch to this new wallet, let it be
+        const wasExplicitWalletChange = (selectedWalletWithAction === null || selectedWalletWithAction === void 0 ? void 0 : selectedWalletWithAction.wallet.address) === primaryWallet.address;
+        if (multiWallet &&
+            connectedWalletWithSameProvider &&
+            !wasExplicitWalletChange) {
             setPrimaryWallet(connectedWalletWithSameProvider.id);
             return;
         }
@@ -127,6 +131,7 @@ const useSyncPrimaryWallet = (canSync = true) => {
         primaryWallet,
         secondaryWallets,
         multiWallet,
+        selectedWalletWithAction === null || selectedWalletWithAction === void 0 ? void 0 : selectedWalletWithAction.wallet.address,
         setSelectedWalletWithAction,
         setMultiWalletWidgetState,
         connectWallet,

package/src/lib/utils/hooks/multiWallet/useSyncPrimaryWallet/useSyncPrimaryWallet.js

@@ -87,7 +87,7 @@ import '../../../../context/ReinitializeContext/ReinitializeContextProvider.js';
 import { useInternalDynamicContext } from '../../../../context/DynamicContext/useDynamicContext/useInternalDynamicContext.js';
 
 const useSyncPrimaryWallet = (canSync = true) => {
-    const { setShowAuthFlow, isAuthenticated, authMode, connectWallet, handleLogOut, multiWalletWidgetState, primaryWallet, setMultiWalletWidgetState, showLockedWalletView, secondaryWallets, setPrimaryWallet, setSelectedWalletWithAction, multiWallet, } = useInternalDynamicContext();
+    const { setShowAuthFlow, isAuthenticated, authMode, connectWallet, handleLogOut, multiWalletWidgetState, primaryWallet, setMultiWalletWidgetState, showLockedWalletView, secondaryWallets, setPrimaryWallet, setSelectedWalletWithAction, multiWallet, selectedWalletWithAction, } = useInternalDynamicContext();
     const { setView } = useViewContext();
     const handlePrimaryWalletNotActive = useCallback((connectedAddress) => {
         logVerboseTroubleshootingMessage('[useSyncPrimaryWallet] handlePrimaryWalletNotActive', {
@@ -108,7 +108,11 @@ const useSyncPrimaryWallet = (canSync = true) => {
             connectedWalletWithSameProvider,
             multiWallet,
         });
-        if (multiWallet && connectedWalletWithSameProvider) {
+        // If user was explicitly trying to switch to this new wallet, let it be
+        const wasExplicitWalletChange = (selectedWalletWithAction === null || selectedWalletWithAction === void 0 ? void 0 : selectedWalletWithAction.wallet.address) === primaryWallet.address;
+        if (multiWallet &&
+            connectedWalletWithSameProvider &&
+            !wasExplicitWalletChange) {
             setPrimaryWallet(connectedWalletWithSameProvider.id);
             return;
         }
@@ -123,6 +127,7 @@ const useSyncPrimaryWallet = (canSync = true) => {
         primaryWallet,
         secondaryWallets,
         multiWallet,
+        selectedWalletWithAction === null || selectedWalletWithAction === void 0 ? void 0 : selectedWalletWithAction.wallet.address,
         setSelectedWalletWithAction,
         setMultiWalletWidgetState,
         connectWallet,

package/src/lib/views/CollectUserDataView/UserDataFields/UserField/UserField.cjs

@@ -97,7 +97,7 @@ const renderCheckboxGroup = (key, name, label, validationRules, errors, touched,
                 ? 'user-field__checkbox-container--error'
                 : ''}`, children: (validationRules === null || validationRules === void 0 ? void 0 : validationRules.checkboxText) && (jsxRuntime.jsxs("div", { className: 'user-field__consent-checkbox', children: [jsxRuntime.jsx(formik.Field, { as: Checkbox.Checkbox, id: key, name: name, type: 'checkbox', value: '0', disabled: disabled, selectDataTestId: 'customFieldCheckbox' }, key), jsxRuntime.jsx("label", { htmlFor: key, className: 'user-field__checkbox-label', children: jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', color: 'secondary', children: validationRules.checkboxText }) })] }, key)) }, 'customConsentGroup'), touched[name] && getDisplayErrorMessage.getDisplayErrorMessage(label, errors[name]) && (jsxRuntime.jsx(Typography.Typography, { variant: 'body_mini', className: 'user-field__error-message', children: `${name.charAt(0).toUpperCase() + name.slice(1)} is required` }))] }));
 const renderPoliciesConsentGroup = (key, policiesConsentInnerComponentArray, disabled) => (jsxRuntime.jsx("div", { role: 'group', "aria-labelledby": 'checkbox-group', className: 'user-field__checkbox-container', children: policiesConsentInnerComponentArray === null || policiesConsentInnerComponentArray === void 0 ? void 0 : policiesConsentInnerComponentArray.map((component, index) => (jsxRuntime.jsxs("div", { className: 'user-field__consent-checkbox', children: [jsxRuntime.jsx(formik.Field, { copykey: key, as: Checkbox.Checkbox, id: `policiesConsent_${index}`, name: 'policiesConsentArray', type: 'checkbox', value: `${index}`, disabled: disabled }, `policiesConsent_${index}`), jsxRuntime.jsx("label", { htmlFor: `policiesConsent_${index}`, className: 'user-field__checkbox-label', children: jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', color: 'secondary', children: component }) })] }, `policiesConsent_${index}`))) }, 'policiesConsentGroup'));
-const UserField = ({ fieldData: { validationRules, isCustom, key, label, type, autoComplete }, fieldSettings: { enabled, name, required, verify }, errors, touched, disabled, policiesConsentInnerComponentArray, }) => {
+const UserField = ({ fieldData: { validationRules, isCustom, key, label: defaultLabel, type, autoComplete, }, fieldSettings: { enabled, name, required, verify, label = defaultLabel }, errors, touched, disabled, policiesConsentInnerComponentArray, }) => {
     if (isCustom) {
         if (type === sdkApiCore.CustomFieldType.Select && (validationRules === null || validationRules === void 0 ? void 0 : validationRules.validOptions)) {
             const options = validationRules.validOptions.map((opt) => opt.label);

package/src/lib/views/CollectUserDataView/UserDataFields/UserField/UserField.js

@@ -93,7 +93,7 @@ const renderCheckboxGroup = (key, name, label, validationRules, errors, touched,
                 ? 'user-field__checkbox-container--error'
                 : ''}`, children: (validationRules === null || validationRules === void 0 ? void 0 : validationRules.checkboxText) && (jsxs("div", { className: 'user-field__consent-checkbox', children: [jsx(Field, { as: Checkbox, id: key, name: name, type: 'checkbox', value: '0', disabled: disabled, selectDataTestId: 'customFieldCheckbox' }, key), jsx("label", { htmlFor: key, className: 'user-field__checkbox-label', children: jsx(Typography, { variant: 'body_small', color: 'secondary', children: validationRules.checkboxText }) })] }, key)) }, 'customConsentGroup'), touched[name] && getDisplayErrorMessage(label, errors[name]) && (jsx(Typography, { variant: 'body_mini', className: 'user-field__error-message', children: `${name.charAt(0).toUpperCase() + name.slice(1)} is required` }))] }));
 const renderPoliciesConsentGroup = (key, policiesConsentInnerComponentArray, disabled) => (jsx("div", { role: 'group', "aria-labelledby": 'checkbox-group', className: 'user-field__checkbox-container', children: policiesConsentInnerComponentArray === null || policiesConsentInnerComponentArray === void 0 ? void 0 : policiesConsentInnerComponentArray.map((component, index) => (jsxs("div", { className: 'user-field__consent-checkbox', children: [jsx(Field, { copykey: key, as: Checkbox, id: `policiesConsent_${index}`, name: 'policiesConsentArray', type: 'checkbox', value: `${index}`, disabled: disabled }, `policiesConsent_${index}`), jsx("label", { htmlFor: `policiesConsent_${index}`, className: 'user-field__checkbox-label', children: jsx(Typography, { variant: 'body_small', color: 'secondary', children: component }) })] }, `policiesConsent_${index}`))) }, 'policiesConsentGroup'));
-const UserField = ({ fieldData: { validationRules, isCustom, key, label, type, autoComplete }, fieldSettings: { enabled, name, required, verify }, errors, touched, disabled, policiesConsentInnerComponentArray, }) => {
+const UserField = ({ fieldData: { validationRules, isCustom, key, label: defaultLabel, type, autoComplete, }, fieldSettings: { enabled, name, required, verify, label = defaultLabel }, errors, touched, disabled, policiesConsentInnerComponentArray, }) => {
     if (isCustom) {
         if (type === CustomFieldType.Select && (validationRules === null || validationRules === void 0 ? void 0 : validationRules.validOptions)) {
             const options = validationRules.validOptions.map((opt) => opt.label);