@dynamic-labs/sdk-react-core 0.17.0-RC.25 → 0.17.0-RC.27

package/CHANGELOG.md

@@ -1,4 +1,30 @@
 
+## [0.17.0-RC.27](https://github.com/dynamic-labs/DynamicAuth/compare/v0.17.0-RC.26...v0.17.0-RC.27) (2023-06-06)
+
+
+### Features
+
+* sync wagmi to first connected eth wallet ([#2253](https://github.com/dynamic-labs/DynamicAuth/issues/2253)) ([c00aed7](https://github.com/dynamic-labs/DynamicAuth/commit/c00aed73a1014c668311c8cb59e5a466b5ee6779))
+
+
+### Bug Fixes
+
+* include username in userFieldsSchema ([#2257](https://github.com/dynamic-labs/DynamicAuth/issues/2257)) ([6e5431d](https://github.com/dynamic-labs/DynamicAuth/commit/6e5431d08323d718b11accf3790ef56fc7325b5c))
+
+## [0.17.0-RC.26](https://github.com/dynamic-labs/DynamicAuth/compare/v0.17.0-RC.25...v0.17.0-RC.26) (2023-06-05)
+
+
+### Features
+
+* disable button on social unlink ([#2234](https://github.com/dynamic-labs/DynamicAuth/issues/2234)) ([7f148de](https://github.com/dynamic-labs/DynamicAuth/commit/7f148de76b0fca632e1b4d6ff71c18eb0207c02b))
+* update magic + email icon in auth flow views ([#2224](https://github.com/dynamic-labs/DynamicAuth/issues/2224)) ([93f1ed6](https://github.com/dynamic-labs/DynamicAuth/commit/93f1ed644428701c2747565033d0ad113fa8eeb2))
+
+
+### Bug Fixes
+
+* **wallets:** keep  magic social wallet connector on mobile ([#2242](https://github.com/dynamic-labs/DynamicAuth/issues/2242)) ([35c092d](https://github.com/dynamic-labs/DynamicAuth/commit/35c092da3b8a76c74ae25558489d663ce963d72f))
+* wrong logger instance in UserProfileSocialAccount ([#2248](https://github.com/dynamic-labs/DynamicAuth/issues/2248)) ([814108d](https://github.com/dynamic-labs/DynamicAuth/commit/814108d416d9d730bed8976956bc7974c7fde2a8))
+
 ## [0.17.0-RC.25](https://github.com/dynamic-labs/DynamicAuth/compare/v0.17.0-RC.24...v0.17.0-RC.25) (2023-06-05)
 
 

package/package.cjs

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var version = "0.17.0-RC.25";
+var version = "0.17.0-RC.27";
 var dependencies = {
 	"react-focus-lock": "2.9.2",
 	"@dynamic-labs/iconic": "0.1.19",

package/package.js

@@ -1,4 +1,4 @@
-var version = "0.17.0-RC.25";
+var version = "0.17.0-RC.27";
 var dependencies = {
 	"react-focus-lock": "2.9.2",
 	"@dynamic-labs/iconic": "0.1.19",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dynamic-labs/sdk-react-core",
-  "version": "0.17.0-RC.25",
+  "version": "0.17.0-RC.27",
   "repository": {
     "type": "git",
     "url": "https://github.com/dynamic-labs/DynamicAuth.git",
@@ -17,12 +17,12 @@
     "formik": "2.2.9",
     "qrcode": "1.5.1",
     "ethers": "5.7.2",
-    "@dynamic-labs/logger": "0.17.0-RC.25",
-    "@dynamic-labs/multi-wallet": "0.17.0-RC.25",
-    "@dynamic-labs/rpc-providers": "0.17.0-RC.25",
-    "@dynamic-labs/types": "0.17.0-RC.25",
-    "@dynamic-labs/utils": "0.17.0-RC.25",
-    "@dynamic-labs/wallet-connector-core": "0.17.0-RC.25"
+    "@dynamic-labs/logger": "0.17.0-RC.27",
+    "@dynamic-labs/multi-wallet": "0.17.0-RC.27",
+    "@dynamic-labs/rpc-providers": "0.17.0-RC.27",
+    "@dynamic-labs/types": "0.17.0-RC.27",
+    "@dynamic-labs/utils": "0.17.0-RC.27",
+    "@dynamic-labs/wallet-connector-core": "0.17.0-RC.27"
   },
   "devDependencies": {
     "semver": "7.3.8"

package/src/lib/components/{WalletOrSocialMagicIcon/WalletOrSocialMagicIcon.cjs → AuthProviderIcon/AuthProviderIcon.cjs}

@@ -5,12 +5,12 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var jsxRuntime = require('react/jsx-runtime');
 var walletBook = require('@dynamic-labs/wallet-book');
 var walletConnectorCore = require('@dynamic-labs/wallet-connector-core');
+var iconic = require('@dynamic-labs/iconic');
 require('../../utils/constants/colors.cjs');
 require('@dynamic-labs/multi-wallet');
 require('@dynamic-labs/utils');
 require('@dynamic-labs/sdk-api');
 require('../../shared/logger.cjs');
-require('@dynamic-labs/iconic');
 require('../../context/ViewContext/ViewContext.cjs');
 require('react');
 require('ethers');
@@ -22,7 +22,19 @@ var useInternalDynamicContext = require('../../context/DynamicContext/useInterna
 var WalletIconWithStatus = require('../../widgets/DynamicWidget/components/WalletIconWithStatus/WalletIconWithStatus.cjs');
 var AccessDeniedContext = require('../../context/AccessDeniedContext/AccessDeniedContext.cjs');
 
-const WalletOrSocialMagicIcon = ({ jwt, iconSize = 64, showStatus, wallet, }) => {
+const getMagicEmailOrSocialIcon = ({ wallet, jwt, }) => {
+    let Icon = null;
+    if (walletConnectorCore.isEmailOTPWalletConnector(wallet.connector)) {
+        Icon = iconic.SignInWithEmailIcon;
+    }
+    if (walletConnectorCore.isSocialWalletConnector(wallet.connector)) {
+        const socialAccountDataForWallet = getReferencedAccount.getReferencedAccount(jwt, wallet.id);
+        const MagicSocialWalletIcon = getSocialIcon.getSocialIcon(socialAccountDataForWallet === null || socialAccountDataForWallet === void 0 ? void 0 : socialAccountDataForWallet.oauthProvider);
+        Icon = MagicSocialWalletIcon;
+    }
+    return Icon;
+};
+const AuthProviderIcon = ({ jwt, iconSize = 64, showStatus, wallet, }) => {
     const { primaryWallet, selectedWalletConnector } = useInternalDynamicContext.useInternalDynamicContext();
     const { deniedOauthProvider, deniedAddress } = AccessDeniedContext.useAccessDeniedContext();
     // when access is denied we don't have jwt set, so we're getting this value out of useAccessDeniedContext
@@ -41,22 +53,14 @@ const WalletOrSocialMagicIcon = ({ jwt, iconSize = 64, showStatus, wallet, }) =>
         return null;
     }
     const walletForIcon = wallet ? wallet : primaryWallet;
-    if (walletConnectorCore.isSocialWalletConnector(walletForIcon.connector)) {
-        const socialAccountDataForWallet = getReferencedAccount.getReferencedAccount(jwt, walletForIcon.id);
-        const MagicSocialWalletIcon = getSocialIcon.getSocialIcon(socialAccountDataForWallet === null || socialAccountDataForWallet === void 0 ? void 0 : socialAccountDataForWallet.oauthProvider);
-        // to show social icon with status dot
-        if (showStatus) {
-            return (jsxRuntime.jsx(IconWithStatus.IconWithStatus, { iconSize: iconSize, Icon: MagicSocialWalletIcon, variant: walletForIcon.connected ? 'green' : 'red' }));
-        }
-        // to show social icon
-        return (jsxRuntime.jsx(MagicSocialWalletIcon, { style: { height: pixelToRem.pixelToRem(iconSize), width: pixelToRem.pixelToRem(iconSize) } }));
-    }
-    // to show wallet icon with status dot
-    if (showStatus) {
-        return (jsxRuntime.jsx(WalletIconWithStatus.WalletIconWithStatus, { iconSize: iconSize, walletName: walletForIcon.connector.name, connected: walletForIcon.connected, variant: 'secondary' }));
+    const MagicEmailOrSocialIcon = getMagicEmailOrSocialIcon({
+        jwt,
+        wallet: walletForIcon,
+    });
+    if (MagicEmailOrSocialIcon) {
+        return showStatus ? (jsxRuntime.jsx(IconWithStatus.IconWithStatus, { iconSize: iconSize, Icon: MagicEmailOrSocialIcon, variant: walletForIcon.connected ? 'green' : 'red' })) : (jsxRuntime.jsx(MagicEmailOrSocialIcon, { style: { height: pixelToRem.pixelToRem(iconSize), width: pixelToRem.pixelToRem(iconSize) } }));
     }
-    // to show wallet icon without status dot
-    return (jsxRuntime.jsx(walletBook.WalletIcon, { walletName: walletForIcon.connector.name, style: { height: pixelToRem.pixelToRem(iconSize), width: pixelToRem.pixelToRem(iconSize) } }));
+    return showStatus ? (jsxRuntime.jsx(WalletIconWithStatus.WalletIconWithStatus, { iconSize: iconSize, walletName: walletForIcon.connector.name, connected: walletForIcon.connected, variant: 'secondary' })) : (jsxRuntime.jsx(walletBook.WalletIcon, { walletName: walletForIcon.connector.name, style: { height: pixelToRem.pixelToRem(iconSize), width: pixelToRem.pixelToRem(iconSize) } }));
 };
 
-exports.WalletOrSocialMagicIcon = WalletOrSocialMagicIcon;
+exports.AuthProviderIcon = AuthProviderIcon;

package/src/lib/components/{WalletOrSocialMagicIcon/WalletOrSocialMagicIcon.d.ts → AuthProviderIcon/AuthProviderIcon.d.ts}

@@ -6,5 +6,5 @@ type Props = {
     wallet?: Wallet | null;
     showStatus?: boolean;
 };
-export declare const WalletOrSocialMagicIcon: FC<Props>;
+export declare const AuthProviderIcon: FC<Props>;
 export {};

package/src/lib/components/{WalletOrSocialMagicIcon/WalletOrSocialMagicIcon.js → AuthProviderIcon/AuthProviderIcon.js}

@@ -1,12 +1,12 @@
 import { jsx } from 'react/jsx-runtime';
 import { WalletIcon } from '@dynamic-labs/wallet-book';
-import { isSocialWalletConnector } from '@dynamic-labs/wallet-connector-core';
+import { isEmailOTPWalletConnector, isSocialWalletConnector } from '@dynamic-labs/wallet-connector-core';
+import { SignInWithEmailIcon } from '@dynamic-labs/iconic';
 import '../../utils/constants/colors.js';
 import '@dynamic-labs/multi-wallet';
 import '@dynamic-labs/utils';
 import '@dynamic-labs/sdk-api';
 import '../../shared/logger.js';
-import '@dynamic-labs/iconic';
 import '../../context/ViewContext/ViewContext.js';
 import 'react';
 import 'ethers';
@@ -18,7 +18,19 @@ import { useInternalDynamicContext } from '../../context/DynamicContext/useInter
 import { WalletIconWithStatus } from '../../widgets/DynamicWidget/components/WalletIconWithStatus/WalletIconWithStatus.js';
 import { useAccessDeniedContext } from '../../context/AccessDeniedContext/AccessDeniedContext.js';
 
-const WalletOrSocialMagicIcon = ({ jwt, iconSize = 64, showStatus, wallet, }) => {
+const getMagicEmailOrSocialIcon = ({ wallet, jwt, }) => {
+    let Icon = null;
+    if (isEmailOTPWalletConnector(wallet.connector)) {
+        Icon = SignInWithEmailIcon;
+    }
+    if (isSocialWalletConnector(wallet.connector)) {
+        const socialAccountDataForWallet = getReferencedAccount(jwt, wallet.id);
+        const MagicSocialWalletIcon = getSocialIcon(socialAccountDataForWallet === null || socialAccountDataForWallet === void 0 ? void 0 : socialAccountDataForWallet.oauthProvider);
+        Icon = MagicSocialWalletIcon;
+    }
+    return Icon;
+};
+const AuthProviderIcon = ({ jwt, iconSize = 64, showStatus, wallet, }) => {
     const { primaryWallet, selectedWalletConnector } = useInternalDynamicContext();
     const { deniedOauthProvider, deniedAddress } = useAccessDeniedContext();
     // when access is denied we don't have jwt set, so we're getting this value out of useAccessDeniedContext
@@ -37,22 +49,14 @@ const WalletOrSocialMagicIcon = ({ jwt, iconSize = 64, showStatus, wallet, }) =>
         return null;
     }
     const walletForIcon = wallet ? wallet : primaryWallet;
-    if (isSocialWalletConnector(walletForIcon.connector)) {
-        const socialAccountDataForWallet = getReferencedAccount(jwt, walletForIcon.id);
-        const MagicSocialWalletIcon = getSocialIcon(socialAccountDataForWallet === null || socialAccountDataForWallet === void 0 ? void 0 : socialAccountDataForWallet.oauthProvider);
-        // to show social icon with status dot
-        if (showStatus) {
-            return (jsx(IconWithStatus, { iconSize: iconSize, Icon: MagicSocialWalletIcon, variant: walletForIcon.connected ? 'green' : 'red' }));
-        }
-        // to show social icon
-        return (jsx(MagicSocialWalletIcon, { style: { height: pixelToRem(iconSize), width: pixelToRem(iconSize) } }));
-    }
-    // to show wallet icon with status dot
-    if (showStatus) {
-        return (jsx(WalletIconWithStatus, { iconSize: iconSize, walletName: walletForIcon.connector.name, connected: walletForIcon.connected, variant: 'secondary' }));
+    const MagicEmailOrSocialIcon = getMagicEmailOrSocialIcon({
+        jwt,
+        wallet: walletForIcon,
+    });
+    if (MagicEmailOrSocialIcon) {
+        return showStatus ? (jsx(IconWithStatus, { iconSize: iconSize, Icon: MagicEmailOrSocialIcon, variant: walletForIcon.connected ? 'green' : 'red' })) : (jsx(MagicEmailOrSocialIcon, { style: { height: pixelToRem(iconSize), width: pixelToRem(iconSize) } }));
     }
-    // to show wallet icon without status dot
-    return (jsx(WalletIcon, { walletName: walletForIcon.connector.name, style: { height: pixelToRem(iconSize), width: pixelToRem(iconSize) } }));
+    return showStatus ? (jsx(WalletIconWithStatus, { iconSize: iconSize, walletName: walletForIcon.connector.name, connected: walletForIcon.connected, variant: 'secondary' })) : (jsx(WalletIcon, { walletName: walletForIcon.connector.name, style: { height: pixelToRem(iconSize), width: pixelToRem(iconSize) } }));
 };
 
-export { WalletOrSocialMagicIcon };
+export { AuthProviderIcon };

package/src/lib/components/AuthProviderIcon/index.d.ts

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

package/src/lib/components/FormFieldLabel/FormFieldLabel.cjs

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var classNames = require('../../utils/functions/classNames/classNames.cjs');
+
+const FormFieldLabel = ({ children, htmlFor, className, divider, }) => (jsxRuntime.jsx("label", Object.assign({ className: classNames.classNames('form-field-label', { 'form-field-label__with-divider': divider }, className), htmlFor: htmlFor }, { children: children })));
+
+exports.FormFieldLabel = FormFieldLabel;

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

@@ -0,0 +1,8 @@
+import { FC, PropsWithChildren } from 'react';
+type FormFieldLabelProps = {
+    htmlFor?: string;
+    className?: string;
+    divider?: boolean;
+};
+export declare const FormFieldLabel: FC<PropsWithChildren<FormFieldLabelProps>>;
+export {};

package/src/lib/components/FormFieldLabel/FormFieldLabel.js

@@ -0,0 +1,6 @@
+import { jsx } from 'react/jsx-runtime';
+import { classNames } from '../../utils/functions/classNames/classNames.js';
+
+const FormFieldLabel = ({ children, htmlFor, className, divider, }) => (jsx("label", Object.assign({ className: classNames('form-field-label', { 'form-field-label__with-divider': divider }, className), htmlFor: htmlFor }, { children: children })));
+
+export { FormFieldLabel };

package/src/lib/components/FormFieldLabel/index.d.ts

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

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

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

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

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

package/src/lib/components/SendBalanceForm/SendBalanceForm.cjs

@@ -37,6 +37,6 @@ const getDisplayErrorMessage = (errors, field) => {
     }
     return '';
 };
-const SendBalanceForm = ({ initialValues, onSubmit }) => (jsxRuntime.jsx(formik.Formik, Object.assign({ initialValues: initialValues || sendBalanceFormInitialValues, validationSchema: sendBalanceFormValidationSchema, onSubmit: (values) => onSubmit(values), validateOnChange: false, validateOnBlur: false }, { children: ({ errors, touched }) => (jsxRuntime.jsxs(formik.Form, Object.assign({ className: 'send-balance-form' }, { children: [jsxRuntime.jsx(formik.Field, { className: 'send-balance-form__field', name: 'amount', label: 'Amount', placeholder: 'Select amount', as: Input.Input, error: errors['amount'], message: touched['amount'] && getDisplayErrorMessage(errors, 'amount') }), jsxRuntime.jsx(formik.Field, { className: 'send-balance-form__field', placeholder: 'Enter wallet address...', label: 'Recipient', id: 'recipient', name: 'recipient', as: Input.Input, error: errors['recipient'], message: touched['recipient'] && getDisplayErrorMessage(errors, 'recipient') }), jsxRuntime.jsx(Button.Button, Object.assign({ dataTestId: 'sendBalanceFormSubmitButton', expanded: true, type: 'submit', buttonVariant: 'primary', buttonPadding: 'large', buttonRounded: 'default', buttonClassName: 'send-balance-form__button' }, { children: "Send now" }))] }))) })));
+const SendBalanceForm = ({ initialValues, onSubmit }) => (jsxRuntime.jsx(formik.Formik, Object.assign({ initialValues: initialValues || sendBalanceFormInitialValues, validationSchema: sendBalanceFormValidationSchema, onSubmit: (values) => onSubmit(values), validateOnChange: false, validateOnBlur: false }, { children: ({ errors, touched }) => (jsxRuntime.jsxs(formik.Form, Object.assign({ className: 'send-balance-form' }, { children: [jsxRuntime.jsx(formik.Field, { variant: 'regular', className: 'send-balance-form__field', name: 'amount', label: 'Amount', placeholder: 'Select amount', as: Input.Input, error: errors['amount'], message: touched['amount'] && getDisplayErrorMessage(errors, 'amount') }), jsxRuntime.jsx(formik.Field, { variant: 'regular', className: 'send-balance-form__field', placeholder: 'Enter wallet address...', label: 'Recipient', id: 'recipient', name: 'recipient', as: Input.Input, error: errors['recipient'], message: touched['recipient'] && getDisplayErrorMessage(errors, 'recipient') }), jsxRuntime.jsx(Button.Button, Object.assign({ dataTestId: 'sendBalanceFormSubmitButton', expanded: true, type: 'submit', buttonVariant: 'primary', buttonPadding: 'large', buttonRounded: 'default', buttonClassName: 'send-balance-form__button' }, { children: "Send now" }))] }))) })));
 
 exports.SendBalanceForm = SendBalanceForm;

package/src/lib/components/SendBalanceForm/SendBalanceForm.js

@@ -33,6 +33,6 @@ const getDisplayErrorMessage = (errors, field) => {
     }
     return '';
 };
-const SendBalanceForm = ({ initialValues, onSubmit }) => (jsx(Formik, Object.assign({ initialValues: initialValues || sendBalanceFormInitialValues, validationSchema: sendBalanceFormValidationSchema, onSubmit: (values) => onSubmit(values), validateOnChange: false, validateOnBlur: false }, { children: ({ errors, touched }) => (jsxs(Form, Object.assign({ className: 'send-balance-form' }, { children: [jsx(Field, { className: 'send-balance-form__field', name: 'amount', label: 'Amount', placeholder: 'Select amount', as: Input, error: errors['amount'], message: touched['amount'] && getDisplayErrorMessage(errors, 'amount') }), jsx(Field, { className: 'send-balance-form__field', placeholder: 'Enter wallet address...', label: 'Recipient', id: 'recipient', name: 'recipient', as: Input, error: errors['recipient'], message: touched['recipient'] && getDisplayErrorMessage(errors, 'recipient') }), jsx(Button, Object.assign({ dataTestId: 'sendBalanceFormSubmitButton', expanded: true, type: 'submit', buttonVariant: 'primary', buttonPadding: 'large', buttonRounded: 'default', buttonClassName: 'send-balance-form__button' }, { children: "Send now" }))] }))) })));
+const SendBalanceForm = ({ initialValues, onSubmit }) => (jsx(Formik, Object.assign({ initialValues: initialValues || sendBalanceFormInitialValues, validationSchema: sendBalanceFormValidationSchema, onSubmit: (values) => onSubmit(values), validateOnChange: false, validateOnBlur: false }, { children: ({ errors, touched }) => (jsxs(Form, Object.assign({ className: 'send-balance-form' }, { children: [jsx(Field, { variant: 'regular', className: 'send-balance-form__field', name: 'amount', label: 'Amount', placeholder: 'Select amount', as: Input, error: errors['amount'], message: touched['amount'] && getDisplayErrorMessage(errors, 'amount') }), jsx(Field, { variant: 'regular', className: 'send-balance-form__field', placeholder: 'Enter wallet address...', label: 'Recipient', id: 'recipient', name: 'recipient', as: Input, error: errors['recipient'], message: touched['recipient'] && getDisplayErrorMessage(errors, 'recipient') }), jsx(Button, Object.assign({ dataTestId: 'sendBalanceFormSubmitButton', expanded: true, type: 'submit', buttonVariant: 'primary', buttonPadding: 'large', buttonRounded: 'default', buttonClassName: 'send-balance-form__button' }, { children: "Send now" }))] }))) })));
 
 export { SendBalanceForm };

package/src/lib/components/SendBalancePageLayout/SendBalancePageLayout.cjs

@@ -30,12 +30,13 @@ var VerticalDrawerTransition = require('../Transition/VerticalDrawerTransition/V
 var Alert = require('../Alert/Alert.cjs');
 var SendBalanceForm = require('../SendBalanceForm/SendBalanceForm.cjs');
 var Chip = require('../Chip/Chip.cjs');
+var FormFieldLabel = require('../FormFieldLabel/FormFieldLabel.cjs');
 var TokenBalanceCard = require('./components/TokenBalanceCard/TokenBalanceCard.cjs');
 
 const SendBalancePageLayout = ({ error, walletAddress, onClickClose, onClickBack, walletName, onSubmit, displayPoweredByDynamicFooter = false, balance, chain, currencySymbol, initialValues, networkName, networkIcon, }) => {
     const closeButton = onClickClose && (jsxRuntime.jsx(IconButton.IconButton, Object.assign({ type: 'button', onClick: onClickClose, "data-testid": 'close-button' }, { children: jsxRuntime.jsx(close.ReactComponent, {}) })));
     const backButton = onClickBack && (jsxRuntime.jsx(IconButton.IconButton, Object.assign({ type: 'button', onClick: onClickBack, "data-testid": 'back-button' }, { children: jsxRuntime.jsx(chevronLeft.ReactComponent, {}) })));
-    return (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(ModalHeader.ModalHeader, Object.assign({ leading: backButton, trailing: closeButton }, { children: jsxRuntime.jsxs("div", Object.assign({ className: 'send-balance-page-layout__header-content' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_normal', color: 'primary', as: 'p' }, { children: "Send from" })), walletName && (jsxRuntime.jsx(Icon.Icon, Object.assign({ size: 'small' }, { children: jsxRuntime.jsx(walletBook.WalletIcon, { walletName: walletName }) }))), jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_normal', color: 'primary', as: 'p' }, { children: shortenWalletAddress.shortenWalletAddress(walletAddress, 3, 3) }))] })) })), jsxRuntime.jsxs("div", Object.assign({ className: 'send-balance-page-layout__body' }, { children: [jsxRuntime.jsx(AnimatePresence.AnimatePresence, Object.assign({ animationComponent: jsxRuntime.jsx(VerticalDrawerTransition.VerticalDrawerTransition, {}) }, { children: error && (jsxRuntime.jsx("div", Object.assign({ className: 'send-balance-page-layout__error' }, { children: jsxRuntime.jsx(Alert.Alert, Object.assign({ icon: 'error', variant: 'error' }, { children: error })) }))) })), networkName && networkIcon && (jsxRuntime.jsx("div", Object.assign({ className: 'send-balance-page-layout__network-container' }, { children: jsxRuntime.jsx(Chip.Chip, Object.assign({ icon: networkIcon }, { children: networkName })) }))), jsxRuntime.jsx(TokenBalanceCard.TokenBalanceCard, { chain: chain, currencySymbol: currencySymbol, balance: balance }), jsxRuntime.jsx(SendBalanceForm.SendBalanceForm, { onSubmit: onSubmit, initialValues: initialValues }), displayPoweredByDynamicFooter && (jsxRuntime.jsx("div", Object.assign({ className: 'send-balance-page-layout__footer' }, { children: jsxRuntime.jsx(PoweredByDynamic.PoweredByDynamic, {}) })))] }))] }));
+    return (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(ModalHeader.ModalHeader, Object.assign({ leading: backButton, trailing: closeButton }, { children: jsxRuntime.jsxs("div", Object.assign({ className: 'send-balance-page-layout__header-content' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_normal', color: 'primary', as: 'p' }, { children: "Send from" })), walletName && (jsxRuntime.jsx(Icon.Icon, Object.assign({ size: 'small' }, { children: jsxRuntime.jsx(walletBook.WalletIcon, { walletName: walletName }) }))), jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_normal', color: 'primary', as: 'p' }, { children: shortenWalletAddress.shortenWalletAddress(walletAddress, 3, 3) }))] })) })), jsxRuntime.jsxs("div", Object.assign({ className: 'send-balance-page-layout__body' }, { children: [jsxRuntime.jsx(AnimatePresence.AnimatePresence, Object.assign({ animationComponent: jsxRuntime.jsx(VerticalDrawerTransition.VerticalDrawerTransition, {}) }, { children: error && (jsxRuntime.jsx("div", Object.assign({ className: 'send-balance-page-layout__error' }, { children: jsxRuntime.jsx(Alert.Alert, Object.assign({ icon: 'error', variant: 'error' }, { children: error })) }))) })), networkName && networkIcon && (jsxRuntime.jsx("div", Object.assign({ className: 'send-balance-page-layout__network-container' }, { children: jsxRuntime.jsx(Chip.Chip, Object.assign({ icon: networkIcon }, { children: networkName })) }))), jsxRuntime.jsxs("div", Object.assign({ className: 'send-balance-page-layout__balance-container' }, { children: [jsxRuntime.jsx(FormFieldLabel.FormFieldLabel, Object.assign({ divider: true }, { children: "Token" })), jsxRuntime.jsx(TokenBalanceCard.TokenBalanceCard, { chain: chain, currencySymbol: currencySymbol, balance: balance })] })), jsxRuntime.jsx(SendBalanceForm.SendBalanceForm, { onSubmit: onSubmit, initialValues: initialValues }), displayPoweredByDynamicFooter && (jsxRuntime.jsx("div", Object.assign({ className: 'send-balance-page-layout__footer' }, { children: jsxRuntime.jsx(PoweredByDynamic.PoweredByDynamic, {}) })))] }))] }));
 };
 
 exports.SendBalancePageLayout = SendBalancePageLayout;

package/src/lib/components/SendBalancePageLayout/SendBalancePageLayout.js

@@ -26,12 +26,13 @@ import { VerticalDrawerTransition } from '../Transition/VerticalDrawerTransition
 import { Alert } from '../Alert/Alert.js';
 import { SendBalanceForm } from '../SendBalanceForm/SendBalanceForm.js';
 import { Chip } from '../Chip/Chip.js';
+import { FormFieldLabel } from '../FormFieldLabel/FormFieldLabel.js';
 import { TokenBalanceCard } from './components/TokenBalanceCard/TokenBalanceCard.js';
 
 const SendBalancePageLayout = ({ error, walletAddress, onClickClose, onClickBack, walletName, onSubmit, displayPoweredByDynamicFooter = false, balance, chain, currencySymbol, initialValues, networkName, networkIcon, }) => {
     const closeButton = onClickClose && (jsx(IconButton, Object.assign({ type: 'button', onClick: onClickClose, "data-testid": 'close-button' }, { children: jsx(SvgClose, {}) })));
     const backButton = onClickBack && (jsx(IconButton, Object.assign({ type: 'button', onClick: onClickBack, "data-testid": 'back-button' }, { children: jsx(SvgChevronLeft, {}) })));
-    return (jsxs("div", { children: [jsx(ModalHeader, Object.assign({ leading: backButton, trailing: closeButton }, { children: jsxs("div", Object.assign({ className: 'send-balance-page-layout__header-content' }, { children: [jsx(Typography, Object.assign({ variant: 'body_normal', color: 'primary', as: 'p' }, { children: "Send from" })), walletName && (jsx(Icon, Object.assign({ size: 'small' }, { children: jsx(WalletIcon, { walletName: walletName }) }))), jsx(Typography, Object.assign({ variant: 'body_normal', color: 'primary', as: 'p' }, { children: shortenWalletAddress(walletAddress, 3, 3) }))] })) })), jsxs("div", Object.assign({ className: 'send-balance-page-layout__body' }, { children: [jsx(AnimatePresence, Object.assign({ animationComponent: jsx(VerticalDrawerTransition, {}) }, { children: error && (jsx("div", Object.assign({ className: 'send-balance-page-layout__error' }, { children: jsx(Alert, Object.assign({ icon: 'error', variant: 'error' }, { children: error })) }))) })), networkName && networkIcon && (jsx("div", Object.assign({ className: 'send-balance-page-layout__network-container' }, { children: jsx(Chip, Object.assign({ icon: networkIcon }, { children: networkName })) }))), jsx(TokenBalanceCard, { chain: chain, currencySymbol: currencySymbol, balance: balance }), jsx(SendBalanceForm, { onSubmit: onSubmit, initialValues: initialValues }), displayPoweredByDynamicFooter && (jsx("div", Object.assign({ className: 'send-balance-page-layout__footer' }, { children: jsx(PoweredByDynamic, {}) })))] }))] }));
+    return (jsxs("div", { children: [jsx(ModalHeader, Object.assign({ leading: backButton, trailing: closeButton }, { children: jsxs("div", Object.assign({ className: 'send-balance-page-layout__header-content' }, { children: [jsx(Typography, Object.assign({ variant: 'body_normal', color: 'primary', as: 'p' }, { children: "Send from" })), walletName && (jsx(Icon, Object.assign({ size: 'small' }, { children: jsx(WalletIcon, { walletName: walletName }) }))), jsx(Typography, Object.assign({ variant: 'body_normal', color: 'primary', as: 'p' }, { children: shortenWalletAddress(walletAddress, 3, 3) }))] })) })), jsxs("div", Object.assign({ className: 'send-balance-page-layout__body' }, { children: [jsx(AnimatePresence, Object.assign({ animationComponent: jsx(VerticalDrawerTransition, {}) }, { children: error && (jsx("div", Object.assign({ className: 'send-balance-page-layout__error' }, { children: jsx(Alert, Object.assign({ icon: 'error', variant: 'error' }, { children: error })) }))) })), networkName && networkIcon && (jsx("div", Object.assign({ className: 'send-balance-page-layout__network-container' }, { children: jsx(Chip, Object.assign({ icon: networkIcon }, { children: networkName })) }))), jsxs("div", Object.assign({ className: 'send-balance-page-layout__balance-container' }, { children: [jsx(FormFieldLabel, Object.assign({ divider: true }, { children: "Token" })), jsx(TokenBalanceCard, { chain: chain, currencySymbol: currencySymbol, balance: balance })] })), jsx(SendBalanceForm, { onSubmit: onSubmit, initialValues: initialValues }), displayPoweredByDynamicFooter && (jsx("div", Object.assign({ className: 'send-balance-page-layout__footer' }, { children: jsx(PoweredByDynamic, {}) })))] }))] }));
 };
 
 export { SendBalancePageLayout };

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

@@ -8,7 +8,7 @@ var React = require('react');
 var iconic = require('@dynamic-labs/iconic');
 var Typography = require('../../../Typography/Typography.cjs');
 require('@dynamic-labs/sdk-api');
-require('../../../../shared/logger.cjs');
+var logger = require('../../../../shared/logger.cjs');
 require('@dynamic-labs/wallet-connector-core');
 require('../../../../context/ViewContext/ViewContext.cjs');
 var add = require('../../../../shared/assets/add.cjs');
@@ -80,14 +80,23 @@ const UserProfileSocialAccount = ({ provider, authorizationUrl, verifiedCredenti
     };
     const disconnectAccount = () => _tslib.__awaiter(void 0, void 0, void 0, function* () {
         var _c;
-        const jwt = yield api.unlinkOAuth({
-            environmentId,
-            verifiedCrentialId: (_c = verifiedCredential === null || verifiedCredential === void 0 ? void 0 : verifiedCredential.id) !== null && _c !== void 0 ? _c : '',
-        }, String(authToken || onboardingOnlyJwt));
-        if (!jwt) {
-            return;
+        try {
+            setLoading(true);
+            const jwt = yield api.unlinkOAuth({
+                environmentId,
+                verifiedCrentialId: (_c = verifiedCredential === null || verifiedCredential === void 0 ? void 0 : verifiedCredential.id) !== null && _c !== void 0 ? _c : '',
+            }, String(authToken || onboardingOnlyJwt));
+            if (!jwt) {
+                return;
+            }
+            updateUserProfileByJWT(jwt);
+        }
+        catch (err) {
+            logger.logger.error(err);
+        }
+        finally {
+            setLoading(false);
         }
-        updateUserProfileByJWT(jwt);
     });
     if (!verifiedCredential && !authorizationUrl) {
         return null;

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

@@ -4,7 +4,7 @@ import { useState } from 'react';
 import { SocialIcon } from '@dynamic-labs/iconic';
 import { Typography } from '../../../Typography/Typography.js';
 import '@dynamic-labs/sdk-api';
-import '../../../../shared/logger.js';
+import { logger } from '../../../../shared/logger.js';
 import '@dynamic-labs/wallet-connector-core';
 import '../../../../context/ViewContext/ViewContext.js';
 import { ReactComponent as SvgAdd } from '../../../../shared/assets/add.js';
@@ -76,14 +76,23 @@ const UserProfileSocialAccount = ({ provider, authorizationUrl, verifiedCredenti
     };
     const disconnectAccount = () => __awaiter(void 0, void 0, void 0, function* () {
         var _c;
-        const jwt = yield unlinkOAuth({
-            environmentId,
-            verifiedCrentialId: (_c = verifiedCredential === null || verifiedCredential === void 0 ? void 0 : verifiedCredential.id) !== null && _c !== void 0 ? _c : '',
-        }, String(authToken || onboardingOnlyJwt));
-        if (!jwt) {
-            return;
+        try {
+            setLoading(true);
+            const jwt = yield unlinkOAuth({
+                environmentId,
+                verifiedCrentialId: (_c = verifiedCredential === null || verifiedCredential === void 0 ? void 0 : verifiedCredential.id) !== null && _c !== void 0 ? _c : '',
+            }, String(authToken || onboardingOnlyJwt));
+            if (!jwt) {
+                return;
+            }
+            updateUserProfileByJWT(jwt);
+        }
+        catch (err) {
+            logger.error(err);
+        }
+        finally {
+            setLoading(false);
         }
-        updateUserProfileByJWT(jwt);
     });
     if (!verifiedCredential && !authorizationUrl) {
         return null;

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

@@ -38,3 +38,4 @@ export * from './Popper';
 export * from './TransactionConfirmationPageLayout';
 export * from './SendBalancePageLayout';
 export * from './Chip';
+export * from './FormFieldLabel';