@dynamic-labs/sdk-react-core 0.17.0-RC.24 → 0.17.0-RC.26

package/CHANGELOG.md

@@ -1,4 +1,30 @@
 
+## [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)
+
+
+### Bug Fixes
+
+* **EmailOTPMagicWalletConnector:** allow user to reconnect with email wallet ([#2230](https://github.com/dynamic-labs/DynamicAuth/issues/2230)) ([6059886](https://github.com/dynamic-labs/DynamicAuth/commit/605988650a783ae824bb8c45edc5533fecf8726a))
+* only set wagmi connector if connected chain is evm ([#2237](https://github.com/dynamic-labs/DynamicAuth/issues/2237)) ([a7be7d3](https://github.com/dynamic-labs/DynamicAuth/commit/a7be7d302d1e74088b0aa2b6848c879079e6f963))
+* Revert "fix(ViewContext): only set view when on wallet list" ([#2235](https://github.com/dynamic-labs/DynamicAuth/issues/2235)) ([e790315](https://github.com/dynamic-labs/DynamicAuth/commit/e79031577f640161cc5f0b9b2e695e22d9a98901)), closes [#2226](https://github.com/dynamic-labs/DynamicAuth/issues/2226)
+* set view to social-redirect-view while waiting to process magic redirect ([#2229](https://github.com/dynamic-labs/DynamicAuth/issues/2229)) ([f50a29c](https://github.com/dynamic-labs/DynamicAuth/commit/f50a29c0b9623c703f1577c7a41fcc5aee58abb8))
+* user profile does not extend on mobile ([#2236](https://github.com/dynamic-labs/DynamicAuth/issues/2236)) ([5bb7912](https://github.com/dynamic-labs/DynamicAuth/commit/5bb7912a865338fdf6eca1a19ff4b74a3fb18eeb))
+* **ViewContext:** only set view when on wallet list ([#2226](https://github.com/dynamic-labs/DynamicAuth/issues/2226)) ([85e8fc1](https://github.com/dynamic-labs/DynamicAuth/commit/85e8fc140069cabff41f4067ac93ea0c5cfaa161))
+
 ## [0.17.0-RC.24](https://github.com/dynamic-labs/DynamicAuth/compare/v0.17.0-RC.23...v0.17.0-RC.24) (2023-06-02)
 
 ## [0.17.0-RC.23](https://github.com/dynamic-labs/DynamicAuth/compare/v0.17.0-RC.22...v0.17.0-RC.23) (2023-06-02)

package/package.cjs

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var version = "0.17.0-RC.24";
+var version = "0.17.0-RC.26";
 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.24";
+var version = "0.17.0-RC.26";
 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.24",
+  "version": "0.17.0-RC.26",
   "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.24",
-    "@dynamic-labs/multi-wallet": "0.17.0-RC.24",
-    "@dynamic-labs/rpc-providers": "0.17.0-RC.24",
-    "@dynamic-labs/types": "0.17.0-RC.24",
-    "@dynamic-labs/utils": "0.17.0-RC.24",
-    "@dynamic-labs/wallet-connector-core": "0.17.0-RC.24"
+    "@dynamic-labs/logger": "0.17.0-RC.26",
+    "@dynamic-labs/multi-wallet": "0.17.0-RC.26",
+    "@dynamic-labs/rpc-providers": "0.17.0-RC.26",
+    "@dynamic-labs/types": "0.17.0-RC.26",
+    "@dynamic-labs/utils": "0.17.0-RC.26",
+    "@dynamic-labs/wallet-connector-core": "0.17.0-RC.26"
   },
   "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/OTPVerificationView/OTPVerificationView.cjs

@@ -43,6 +43,7 @@ require('../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs');
 var TosAndPp = require('../TosAndPp/TosAndPp.cjs');
 var PinField = require('../PinField/PinField.cjs');
 var ModalHeaderBanner = require('../ModalHeaderBanner/ModalHeaderBanner.cjs');
+var shortenEmail = require('../../shared/utils/functions/shortenEmail/shortenEmail.cjs');
 require('../Popper/Popper/Popper.cjs');
 require('../Popper/PopperContext/PopperContext.cjs');
 require('@dynamic-labs/wallet-book');
@@ -50,7 +51,7 @@ require('../SendBalanceForm/SendBalanceForm.cjs');
 
 const OTPVerificationView = ({ onClickBack, onClickEditEmail, isLoading, email, onPinComplete, isValid, error, termsOfServiceUrl, privacyPolicyUrl, onPinChange, displayPoweredByDynamic = false, }) => {
     const backButton = (jsxRuntime.jsx(IconButton.IconButton, Object.assign({ type: 'button', onClick: onClickBack, "data-testid": 'back-button' }, { children: jsxRuntime.jsx(chevronLeft.ReactComponent, {}) })));
-    return (jsxRuntime.jsxs("div", Object.assign({ className: 'otp-verification-view' }, { children: [jsxRuntime.jsx(ModalHeaderBanner.ModalHeaderBanner, { type: 'error', message: error === null || error === void 0 ? void 0 : error.message }), jsxRuntime.jsx(ModalHeader.ModalHeader, Object.assign({ alignContent: 'bottom', leading: onClickBack && backButton }, { children: jsxRuntime.jsxs("div", Object.assign({ className: 'otp-verification-view__status-header' }, { children: [isValid && (jsxRuntime.jsx(IconWithStatus.IconWithStatus, { Icon: iconic.SignInWithEmailIcon, iconSize: 50, InnerIcon: check.ReactComponent })), !isValid && (jsxRuntime.jsx(IconWithSpinner.IconWithSpinner, { Icon: iconic.SignInWithEmailIcon, iconSize: 80, isSpinning: isLoading }))] })) })), jsxRuntime.jsx(Typography.Typography, Object.assign({ weight: 'medium', variant: 'title', color: 'primary', className: 'otp-verification-view__title' }, { children: isValid ? 'Verification code confirmed' : 'Confirm verification code' })), jsxRuntime.jsxs("div", Object.assign({ className: 'otp-verification-view__body' }, { children: [isValid && (jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_normal', weight: 'regular', color: 'secondary' }, { children: "Hang tight while we get things ready for you" }))), !isValid && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_normal', weight: 'regular', color: 'secondary' }, { children: "We\u2019ve sent a verification code to" })), jsxRuntime.jsxs("div", Object.assign({ className: 'otp-verification-view__email-container' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_normal', weight: 'bold', color: 'secondary' }, { children: email })), onClickEditEmail && (jsxRuntime.jsx(IconButton.IconButton, Object.assign({ onClick: onClickEditEmail, "data-testid": 'otp-verification-view__edit-button' }, { children: jsxRuntime.jsx(Icon.Icon, Object.assign({ color: 'text-tertiary' }, { children: jsxRuntime.jsx(pencilAltIcon.ReactComponent, {}) })) })))] }))] }))] })), jsxRuntime.jsx(PinField.PinField, { initialValue: Array(6).join('.').split('.'), isLoading: isLoading, handleComplete: onPinComplete, isValidated: isValid, inputMode: 'numeric', pattern: '[0-9]*', hasError: Boolean(error), onChange: onPinChange }), jsxRuntime.jsxs("div", Object.assign({ className: 'otp-verification-view__footer' }, { children: [termsOfServiceUrl && privacyPolicyUrl && (jsxRuntime.jsx(TosAndPp.TosAndPp, { mode: 'logging in', privacyPolicyUrl: privacyPolicyUrl, termsOfServiceUrl: termsOfServiceUrl })), displayPoweredByDynamic && jsxRuntime.jsx(PoweredByDynamic.PoweredByDynamic, {})] }))] })));
+    return (jsxRuntime.jsxs("div", Object.assign({ className: 'otp-verification-view' }, { children: [jsxRuntime.jsx(ModalHeaderBanner.ModalHeaderBanner, { type: 'error', message: error === null || error === void 0 ? void 0 : error.message }), jsxRuntime.jsx(ModalHeader.ModalHeader, Object.assign({ alignContent: 'bottom', leading: onClickBack && backButton }, { children: jsxRuntime.jsxs("div", Object.assign({ className: 'otp-verification-view__status-header' }, { children: [isValid && (jsxRuntime.jsx(IconWithStatus.IconWithStatus, { Icon: iconic.SignInWithEmailIcon, iconSize: 50, InnerIcon: check.ReactComponent })), !isValid && (jsxRuntime.jsx(IconWithSpinner.IconWithSpinner, { Icon: iconic.SignInWithEmailIcon, iconSize: 80, isSpinning: isLoading }))] })) })), jsxRuntime.jsx(Typography.Typography, Object.assign({ weight: 'medium', variant: 'title', color: 'primary', className: 'otp-verification-view__title' }, { children: isValid ? 'Verification code confirmed' : 'Confirm verification code' })), jsxRuntime.jsxs("div", Object.assign({ className: 'otp-verification-view__body' }, { children: [isValid && (jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_normal', weight: 'regular', color: 'secondary' }, { children: "Hang tight while we get things ready for you" }))), !isValid && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_normal', weight: 'regular', color: 'secondary' }, { children: "We\u2019ve sent a verification code to" })), jsxRuntime.jsxs("div", Object.assign({ className: 'otp-verification-view__email-container' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_normal', weight: 'bold', color: 'secondary' }, { children: shortenEmail.shortenEmail(email) })), onClickEditEmail && (jsxRuntime.jsx(IconButton.IconButton, Object.assign({ onClick: onClickEditEmail, "data-testid": 'otp-verification-view__edit-button' }, { children: jsxRuntime.jsx(Icon.Icon, Object.assign({ color: 'text-tertiary' }, { children: jsxRuntime.jsx(pencilAltIcon.ReactComponent, {}) })) })))] }))] }))] })), jsxRuntime.jsx(PinField.PinField, { initialValue: Array(6).join('.').split('.'), isLoading: isLoading, handleComplete: onPinComplete, isValidated: isValid, inputMode: 'numeric', pattern: '[0-9]*', hasError: Boolean(error), onChange: onPinChange }), jsxRuntime.jsxs("div", Object.assign({ className: 'otp-verification-view__footer' }, { children: [termsOfServiceUrl && privacyPolicyUrl && (jsxRuntime.jsx(TosAndPp.TosAndPp, { mode: 'logging in', privacyPolicyUrl: privacyPolicyUrl, termsOfServiceUrl: termsOfServiceUrl })), displayPoweredByDynamic && jsxRuntime.jsx(PoweredByDynamic.PoweredByDynamic, {})] }))] })));
 };
 
 exports.OTPVerificationView = OTPVerificationView;

package/src/lib/components/OTPVerificationView/OTPVerificationView.js

@@ -39,6 +39,7 @@ import '../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';
 import { TosAndPp } from '../TosAndPp/TosAndPp.js';
 import { PinField } from '../PinField/PinField.js';
 import { ModalHeaderBanner } from '../ModalHeaderBanner/ModalHeaderBanner.js';
+import { shortenEmail } from '../../shared/utils/functions/shortenEmail/shortenEmail.js';
 import '../Popper/Popper/Popper.js';
 import '../Popper/PopperContext/PopperContext.js';
 import '@dynamic-labs/wallet-book';
@@ -46,7 +47,7 @@ import '../SendBalanceForm/SendBalanceForm.js';
 
 const OTPVerificationView = ({ onClickBack, onClickEditEmail, isLoading, email, onPinComplete, isValid, error, termsOfServiceUrl, privacyPolicyUrl, onPinChange, displayPoweredByDynamic = false, }) => {
     const backButton = (jsx(IconButton, Object.assign({ type: 'button', onClick: onClickBack, "data-testid": 'back-button' }, { children: jsx(SvgChevronLeft, {}) })));
-    return (jsxs("div", Object.assign({ className: 'otp-verification-view' }, { children: [jsx(ModalHeaderBanner, { type: 'error', message: error === null || error === void 0 ? void 0 : error.message }), jsx(ModalHeader, Object.assign({ alignContent: 'bottom', leading: onClickBack && backButton }, { children: jsxs("div", Object.assign({ className: 'otp-verification-view__status-header' }, { children: [isValid && (jsx(IconWithStatus, { Icon: SignInWithEmailIcon, iconSize: 50, InnerIcon: SvgCheck })), !isValid && (jsx(IconWithSpinner, { Icon: SignInWithEmailIcon, iconSize: 80, isSpinning: isLoading }))] })) })), jsx(Typography, Object.assign({ weight: 'medium', variant: 'title', color: 'primary', className: 'otp-verification-view__title' }, { children: isValid ? 'Verification code confirmed' : 'Confirm verification code' })), jsxs("div", Object.assign({ className: 'otp-verification-view__body' }, { children: [isValid && (jsx(Typography, Object.assign({ variant: 'body_normal', weight: 'regular', color: 'secondary' }, { children: "Hang tight while we get things ready for you" }))), !isValid && (jsxs(Fragment, { children: [jsx(Typography, Object.assign({ variant: 'body_normal', weight: 'regular', color: 'secondary' }, { children: "We\u2019ve sent a verification code to" })), jsxs("div", Object.assign({ className: 'otp-verification-view__email-container' }, { children: [jsx(Typography, Object.assign({ variant: 'body_normal', weight: 'bold', color: 'secondary' }, { children: email })), onClickEditEmail && (jsx(IconButton, Object.assign({ onClick: onClickEditEmail, "data-testid": 'otp-verification-view__edit-button' }, { children: jsx(Icon, Object.assign({ color: 'text-tertiary' }, { children: jsx(SvgPencilAltIcon, {}) })) })))] }))] }))] })), jsx(PinField, { initialValue: Array(6).join('.').split('.'), isLoading: isLoading, handleComplete: onPinComplete, isValidated: isValid, inputMode: 'numeric', pattern: '[0-9]*', hasError: Boolean(error), onChange: onPinChange }), jsxs("div", Object.assign({ className: 'otp-verification-view__footer' }, { children: [termsOfServiceUrl && privacyPolicyUrl && (jsx(TosAndPp, { mode: 'logging in', privacyPolicyUrl: privacyPolicyUrl, termsOfServiceUrl: termsOfServiceUrl })), displayPoweredByDynamic && jsx(PoweredByDynamic, {})] }))] })));
+    return (jsxs("div", Object.assign({ className: 'otp-verification-view' }, { children: [jsx(ModalHeaderBanner, { type: 'error', message: error === null || error === void 0 ? void 0 : error.message }), jsx(ModalHeader, Object.assign({ alignContent: 'bottom', leading: onClickBack && backButton }, { children: jsxs("div", Object.assign({ className: 'otp-verification-view__status-header' }, { children: [isValid && (jsx(IconWithStatus, { Icon: SignInWithEmailIcon, iconSize: 50, InnerIcon: SvgCheck })), !isValid && (jsx(IconWithSpinner, { Icon: SignInWithEmailIcon, iconSize: 80, isSpinning: isLoading }))] })) })), jsx(Typography, Object.assign({ weight: 'medium', variant: 'title', color: 'primary', className: 'otp-verification-view__title' }, { children: isValid ? 'Verification code confirmed' : 'Confirm verification code' })), jsxs("div", Object.assign({ className: 'otp-verification-view__body' }, { children: [isValid && (jsx(Typography, Object.assign({ variant: 'body_normal', weight: 'regular', color: 'secondary' }, { children: "Hang tight while we get things ready for you" }))), !isValid && (jsxs(Fragment, { children: [jsx(Typography, Object.assign({ variant: 'body_normal', weight: 'regular', color: 'secondary' }, { children: "We\u2019ve sent a verification code to" })), jsxs("div", Object.assign({ className: 'otp-verification-view__email-container' }, { children: [jsx(Typography, Object.assign({ variant: 'body_normal', weight: 'bold', color: 'secondary' }, { children: shortenEmail(email) })), onClickEditEmail && (jsx(IconButton, Object.assign({ onClick: onClickEditEmail, "data-testid": 'otp-verification-view__edit-button' }, { children: jsx(Icon, Object.assign({ color: 'text-tertiary' }, { children: jsx(SvgPencilAltIcon, {}) })) })))] }))] }))] })), jsx(PinField, { initialValue: Array(6).join('.').split('.'), isLoading: isLoading, handleComplete: onPinComplete, isValidated: isValid, inputMode: 'numeric', pattern: '[0-9]*', hasError: Boolean(error), onChange: onPinChange }), jsxs("div", Object.assign({ className: 'otp-verification-view__footer' }, { children: [termsOfServiceUrl && privacyPolicyUrl && (jsx(TosAndPp, { mode: 'logging in', privacyPolicyUrl: privacyPolicyUrl, termsOfServiceUrl: termsOfServiceUrl })), displayPoweredByDynamic && jsx(PoweredByDynamic, {})] }))] })));
 };
 
 export { OTPVerificationView };

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/UserProfileField/UserProfileField.cjs

@@ -41,7 +41,7 @@ var VerifiedEmailIcon = require('./components/VerifiedEmailIcon/VerifiedEmailIco
 const UserProfileField = ({ name, label, value, }) => {
     const isEmpty = value === '';
     const isEmailField = name === 'email';
-    return (jsxRuntime.jsxs("div", Object.assign({ className: 'user-profile-field' }, { children: [label && (jsxRuntime.jsx(Typography.Typography, Object.assign({ as: 'h6', color: 'secondary', weight: 'regular', variant: 'body_small' }, { children: label }))), jsxRuntime.jsx(Typography.Typography, Object.assign({ color: isEmpty ? 'tertiary' : 'primary', as: 'span', weight: 'regular', variant: 'body_normal' }, { children: value || 'Empty' })), isEmailField && (jsxRuntime.jsx(VerifiedEmailIcon.VerifiedEmailIcon, { className: 'user-profile-field__verify-email-icon' }))] })));
+    return (jsxRuntime.jsxs("div", Object.assign({ className: 'user-profile-field' }, { children: [label && (jsxRuntime.jsx(Typography.Typography, Object.assign({ as: 'h6', color: 'secondary', weight: 'regular', variant: 'body_small' }, { children: label }))), jsxRuntime.jsxs("div", Object.assign({ className: 'user-profile-field__value' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ color: isEmpty ? 'tertiary' : 'primary', as: 'p', weight: 'regular', variant: 'body_normal' }, { children: value || 'Empty' })), isEmailField && (jsxRuntime.jsx(VerifiedEmailIcon.VerifiedEmailIcon, { className: 'user-profile-field__verify-email-icon', overwriteTooltipProps: { as: 'div' } }))] }))] })));
 };
 
 exports.UserProfileField = UserProfileField;

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

@@ -37,7 +37,7 @@ import { VerifiedEmailIcon } from './components/VerifiedEmailIcon/VerifiedEmailI
 const UserProfileField = ({ name, label, value, }) => {
     const isEmpty = value === '';
     const isEmailField = name === 'email';
-    return (jsxs("div", Object.assign({ className: 'user-profile-field' }, { children: [label && (jsx(Typography, Object.assign({ as: 'h6', color: 'secondary', weight: 'regular', variant: 'body_small' }, { children: label }))), jsx(Typography, Object.assign({ color: isEmpty ? 'tertiary' : 'primary', as: 'span', weight: 'regular', variant: 'body_normal' }, { children: value || 'Empty' })), isEmailField && (jsx(VerifiedEmailIcon, { className: 'user-profile-field__verify-email-icon' }))] })));
+    return (jsxs("div", Object.assign({ className: 'user-profile-field' }, { children: [label && (jsx(Typography, Object.assign({ as: 'h6', color: 'secondary', weight: 'regular', variant: 'body_small' }, { children: label }))), jsxs("div", Object.assign({ className: 'user-profile-field__value' }, { children: [jsx(Typography, Object.assign({ color: isEmpty ? 'tertiary' : 'primary', as: 'p', weight: 'regular', variant: 'body_normal' }, { children: value || 'Empty' })), isEmailField && (jsx(VerifiedEmailIcon, { className: 'user-profile-field__verify-email-icon', overwriteTooltipProps: { as: 'div' } }))] }))] })));
 };
 
 export { UserProfileField };

package/src/lib/components/UserProfile/parts/UserProfileField/components/VerifiedEmailIcon/VerifiedEmailIcon.cjs

@@ -20,14 +20,14 @@ var Tooltip = require('../../../../../Tooltip/Tooltip.cjs');
 var Typography = require('../../../../../Typography/Typography.cjs');
 
 const VerifiedEmailTooltip = (jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'numbers_small', color: 'tooltip' }, { children: "This email is verified" })));
-const VerifiedEmailIcon = ({ className, }) => {
+const VerifiedEmailIcon = ({ className, overwriteTooltipProps, }) => {
     const { user } = useInternalDynamicContext.useInternalDynamicContext();
     if (!(user === null || user === void 0 ? void 0 : user.email))
         return null;
     const isVerified = user === null || user === void 0 ? void 0 : user.verifiedCredentials.some(({ email }) => email === user.email);
     if (!isVerified)
         return null;
-    return (jsxRuntime.jsx(Tooltip.Tooltip, Object.assign({ content: VerifiedEmailTooltip }, { children: jsxRuntime.jsx(checkCircle.ReactComponent, { className: classNames.classNames('dynamic-verified-email-icon', className) }) })));
+    return (jsxRuntime.jsx(Tooltip.Tooltip, Object.assign({ content: VerifiedEmailTooltip }, overwriteTooltipProps, { children: jsxRuntime.jsx(checkCircle.ReactComponent, { className: classNames.classNames('dynamic-verified-email-icon', className) }) })));
 };
 
 exports.VerifiedEmailIcon = VerifiedEmailIcon;

package/src/lib/components/UserProfile/parts/UserProfileField/components/VerifiedEmailIcon/VerifiedEmailIcon.d.ts

@@ -1,5 +1,7 @@
 import { FC } from 'react';
+import { TooltipProps } from '../../../../../Tooltip/Tooltip';
 export type VerifiedEmailIconProps = {
     className?: string;
+    overwriteTooltipProps?: Partial<TooltipProps>;
 };
 export declare const VerifiedEmailIcon: FC<VerifiedEmailIconProps>;

package/src/lib/components/UserProfile/parts/UserProfileField/components/VerifiedEmailIcon/VerifiedEmailIcon.js

@@ -16,14 +16,14 @@ import { Tooltip } from '../../../../../Tooltip/Tooltip.js';
 import { Typography } from '../../../../../Typography/Typography.js';
 
 const VerifiedEmailTooltip = (jsx(Typography, Object.assign({ variant: 'numbers_small', color: 'tooltip' }, { children: "This email is verified" })));
-const VerifiedEmailIcon = ({ className, }) => {
+const VerifiedEmailIcon = ({ className, overwriteTooltipProps, }) => {
     const { user } = useInternalDynamicContext();
     if (!(user === null || user === void 0 ? void 0 : user.email))
         return null;
     const isVerified = user === null || user === void 0 ? void 0 : user.verifiedCredentials.some(({ email }) => email === user.email);
     if (!isVerified)
         return null;
-    return (jsx(Tooltip, Object.assign({ content: VerifiedEmailTooltip }, { children: jsx(SvgCheckCircle, { className: classNames('dynamic-verified-email-icon', className) }) })));
+    return (jsx(Tooltip, Object.assign({ content: VerifiedEmailTooltip }, overwriteTooltipProps, { children: jsx(SvgCheckCircle, { className: classNames('dynamic-verified-email-icon', className) }) })));
 };
 
 export { VerifiedEmailIcon };

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;
@@ -103,7 +112,7 @@ const UserProfileSocialAccount = ({ provider, authorizationUrl, verifiedCredenti
                     weight: 'medium',
                 }, startSlot: 
                 // eslint-disable-next-line react/jsx-wrap-multilines
-                jsxRuntime.jsx(Icon.Icon, Object.assign({ color: 'text-tertiary', size: 'xsmall' }, { children: jsxRuntime.jsx(add.ReactComponent, {}) })) }, { children: "Connect" })))] })));
+                jsxRuntime.jsx(Icon.Icon, Object.assign({ color: 'text-tertiary', size: 'small' }, { children: jsxRuntime.jsx(add.ReactComponent, {}) })) }, { children: "Connect" })))] })));
 };
 
 exports.UserProfileSocialAccount = UserProfileSocialAccount;