@dynamic-labs/sdk-react-core 0.19.0-alpha.15 → 0.19.0-alpha.16

package/CHANGELOG.md

@@ -1,4 +1,27 @@
 
+## [0.19.0-alpha.16](https://github.com/dynamic-labs/DynamicAuth/compare/v0.19.0-alpha.15...v0.19.0-alpha.16) (2023-10-17)
+
+
+### ⚠ BREAKING CHANGES
+
+* ethers extension integration and rename provider methods (#3573)
+
+### Features
+
+* add onDisconnect ([#3572](https://github.com/dynamic-labs/DynamicAuth/issues/3572)) ([3e612f7](https://github.com/dynamic-labs/DynamicAuth/commit/3e612f72540781b9246a47ac12a7c979fb6c0d88))
+* user callback on passkey creation complete ([#3591](https://github.com/dynamic-labs/DynamicAuth/issues/3591)) ([92d5f7d](https://github.com/dynamic-labs/DynamicAuth/commit/92d5f7df2ac1cc06338f7e9e75125f7bb71455ab))
+
+
+### Bug Fixes
+
+* argentX in-browser wallet ([#3588](https://github.com/dynamic-labs/DynamicAuth/issues/3588)) ([7f3b22d](https://github.com/dynamic-labs/DynamicAuth/commit/7f3b22d003182aa0d84406086a313fc4de25e4a8))
+* display a better message when transaction amount decimals are invalid ([#3577](https://github.com/dynamic-labs/DynamicAuth/issues/3577)) ([0238d9b](https://github.com/dynamic-labs/DynamicAuth/commit/0238d9b7712d6a52aec89193c751224dd8fd8b17))
+* remove passkey success view ([#3536](https://github.com/dynamic-labs/DynamicAuth/issues/3536)) ([b559de9](https://github.com/dynamic-labs/DynamicAuth/commit/b559de9c83096ed98e9f073b998ac08f876af24e))
+* **wagmi-connector:** use wallets list to sync wagmi client ([#3563](https://github.com/dynamic-labs/DynamicAuth/issues/3563)) ([1d551b9](https://github.com/dynamic-labs/DynamicAuth/commit/1d551b933aefe0c535285d68c2e6f819cd321e62))
+
+
+* ethers extension integration and rename provider methods ([#3573](https://github.com/dynamic-labs/DynamicAuth/issues/3573)) ([efd73c3](https://github.com/dynamic-labs/DynamicAuth/commit/efd73c3b8121df9a7d4ec8c1fb6c4fd76ecce6df))
+
 ## [0.19.0-alpha.15](https://github.com/dynamic-labs/DynamicAuth/compare/v0.19.0-alpha.14...v0.19.0-alpha.15) (2023-10-11)
 
 ## [0.19.0-alpha.14](https://github.com/dynamic-labs/DynamicAuth/compare/v0.19.0-alpha.13...v0.19.0-alpha.14) (2023-10-10)

package/package.cjs

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var version = "0.19.0-alpha.15";
+var version = "0.19.0-alpha.16";
 var dependencies = {
 	"@dynamic-labs/iconic": "0.1.34",
 	"@dynamic-labs/sdk-api": "0.0.281",

package/package.js

@@ -1,4 +1,4 @@
-var version = "0.19.0-alpha.15";
+var version = "0.19.0-alpha.16";
 var dependencies = {
 	"@dynamic-labs/iconic": "0.1.34",
 	"@dynamic-labs/sdk-api": "0.0.281",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dynamic-labs/sdk-react-core",
-  "version": "0.19.0-alpha.15",
+  "version": "0.19.0-alpha.16",
   "repository": {
     "type": "git",
     "url": "https://github.com/dynamic-labs/DynamicAuth.git",
@@ -17,13 +17,13 @@
     "react-focus-lock": "2.9.2",
     "react-i18next": "^13.2.0",
     "yup": "0.32.11",
-    "@dynamic-labs/logger": "0.19.0-alpha.15",
-    "@dynamic-labs/multi-wallet": "0.19.0-alpha.15",
-    "@dynamic-labs/rpc-providers": "0.19.0-alpha.15",
-    "@dynamic-labs/types": "0.19.0-alpha.15",
-    "@dynamic-labs/utils": "0.19.0-alpha.15",
-    "@dynamic-labs/wallet-book": "0.19.0-alpha.15",
-    "@dynamic-labs/wallet-connector-core": "0.19.0-alpha.15",
+    "@dynamic-labs/logger": "0.19.0-alpha.16",
+    "@dynamic-labs/multi-wallet": "0.19.0-alpha.16",
+    "@dynamic-labs/rpc-providers": "0.19.0-alpha.16",
+    "@dynamic-labs/types": "0.19.0-alpha.16",
+    "@dynamic-labs/utils": "0.19.0-alpha.16",
+    "@dynamic-labs/wallet-book": "0.19.0-alpha.16",
+    "@dynamic-labs/wallet-connector-core": "0.19.0-alpha.16",
     "eventemitter3": "5.0.1"
   },
   "devDependencies": {

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

@@ -8,6 +8,19 @@ var formik = require('formik');
 var yup = require('yup');
 var Input = require('../Input/Input.cjs');
 var Button = require('../Button/Button.cjs');
+require('@dynamic-labs/sdk-api');
+require('../../shared/logger.cjs');
+require('@dynamic-labs/iconic');
+require('@dynamic-labs/wallet-connector-core');
+require('../../context/ViewContext/ViewContext.cjs');
+require('@dynamic-labs/wallet-book');
+require('@dynamic-labs/utils');
+require('../../utils/constants/colors.cjs');
+require('../../shared/utils/classes/storage/localStorage.cjs');
+require('viem');
+require('../../shared/consts/index.cjs');
+require('@dynamic-labs/multi-wallet');
+var getOrdinalNumber = require('../../utils/functions/getOrdinalNumber/getOrdinalNumber.cjs');
 
 const sendBalanceFormInitialValues = {
     amount: '',
@@ -15,6 +28,7 @@ const sendBalanceFormInitialValues = {
 };
 const mapFieldAndErrorToMessage = {
     amount: {
+        invalidDecimals: 'Please enter a value up to the {decimals} decimal place.',
         invalidFormat: 'The amount is in invalid format',
         overBalance: 'Insufficient funds to send this amount.',
         required: 'The amount field is required',
@@ -24,37 +38,43 @@ const mapFieldAndErrorToMessage = {
         required: 'The recipient is required',
     },
 };
-const getDisplayErrorMessage = (errors, field) => {
+const getDisplayErrorMessage = (errors, field, decimals) => {
     const errorType = errors[field];
     if (errorType) {
-        return mapFieldAndErrorToMessage[field][errorType];
+        const errorMessage = mapFieldAndErrorToMessage[field][errorType];
+        return errorMessage.replace('{decimals}', getOrdinalNumber.getOrdinalNumber(decimals !== null && decimals !== void 0 ? decimals : 0));
     }
     return '';
 };
-const SendBalanceForm = ({ initialValues, onSubmit, balance, }) => {
-    const sendBalanceFormValidationSchema = React.useMemo(() => yup.object().shape({
-        amount: yup.string()
-            .required('required')
-            .matches(/^\d+(\.\d{1,8})?$/, 'invalidFormat')
-            .test({
-            message: 'overBalance',
-            test: (value) => {
-                if (!value || balance === undefined)
-                    return true;
-                try {
-                    const valueNumber = parseFloat(value);
-                    return valueNumber < balance;
-                }
-                catch (err) {
-                    return true;
-                }
-            },
-        }),
-        recipient: yup.string()
-            .required('required')
-            .matches(/^0x[0-9a-fA-F]{40}$/, 'invalidFormat'),
-    }), [balance]);
-    return (jsxRuntime.jsx(formik.Formik, { initialValues: initialValues || sendBalanceFormInitialValues, validationSchema: sendBalanceFormValidationSchema, onSubmit: (values) => onSubmit(values), validateOnChange: false, validateOnBlur: false, children: ({ errors, touched }) => (jsxRuntime.jsxs(formik.Form, { 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'] &&
+const SendBalanceForm = ({ initialValues, onSubmit, balance, decimals = 18, }) => {
+    const sendBalanceFormValidationSchema = React.useMemo(() => {
+        const decimalsRegex = new RegExp(`^\\d*(\\.\\d{1,${decimals}})?$`);
+        return yup.object().shape({
+            amount: yup.string()
+                .required('required')
+                .matches(/^\d*(\.\d+)?$/, 'invalidFormat')
+                .matches(decimalsRegex, 'invalidDecimals')
+                .test({
+                message: 'overBalance',
+                test: (value) => {
+                    if (!value || balance === undefined)
+                        return true;
+                    try {
+                        const valueNumber = parseFloat(value);
+                        return valueNumber < balance;
+                    }
+                    catch (err) {
+                        return true;
+                    }
+                },
+            }),
+            recipient: yup.string()
+                .required('required')
+                .matches(/^0x[0-9a-fA-F]{40}$/, 'invalidFormat'),
+        });
+    }, [balance, decimals]);
+    return (jsxRuntime.jsx(formik.Formik, { initialValues: initialValues || sendBalanceFormInitialValues, validationSchema: sendBalanceFormValidationSchema, onSubmit: (values) => onSubmit(values), validateOnChange: false, validateOnBlur: false, children: ({ errors, touched }) => (jsxRuntime.jsxs(formik.Form, { 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', decimals) }), 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, { dataTestId: 'sendBalanceFormSubmitButton', expanded: true, type: 'submit', buttonVariant: 'primary', buttonPadding: 'large', buttonRounded: 'default', buttonClassName: 'send-balance-form__button', children: "Send now" })] })) }));
 };
 

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

@@ -7,5 +7,6 @@ export type Props = {
     initialValues?: SendBalanceFormValues;
     onSubmit: (formValues: SendBalanceFormValues) => void;
     balance?: number;
+    decimals?: number;
 };
 export declare const SendBalanceForm: FC<Props>;

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

@@ -4,6 +4,19 @@ import { Formik, Form, Field } from 'formik';
 import { object, string } from 'yup';
 import { Input } from '../Input/Input.js';
 import { Button } from '../Button/Button.js';
+import '@dynamic-labs/sdk-api';
+import '../../shared/logger.js';
+import '@dynamic-labs/iconic';
+import '@dynamic-labs/wallet-connector-core';
+import '../../context/ViewContext/ViewContext.js';
+import '@dynamic-labs/wallet-book';
+import '@dynamic-labs/utils';
+import '../../utils/constants/colors.js';
+import '../../shared/utils/classes/storage/localStorage.js';
+import 'viem';
+import '../../shared/consts/index.js';
+import '@dynamic-labs/multi-wallet';
+import { getOrdinalNumber } from '../../utils/functions/getOrdinalNumber/getOrdinalNumber.js';
 
 const sendBalanceFormInitialValues = {
     amount: '',
@@ -11,6 +24,7 @@ const sendBalanceFormInitialValues = {
 };
 const mapFieldAndErrorToMessage = {
     amount: {
+        invalidDecimals: 'Please enter a value up to the {decimals} decimal place.',
         invalidFormat: 'The amount is in invalid format',
         overBalance: 'Insufficient funds to send this amount.',
         required: 'The amount field is required',
@@ -20,37 +34,43 @@ const mapFieldAndErrorToMessage = {
         required: 'The recipient is required',
     },
 };
-const getDisplayErrorMessage = (errors, field) => {
+const getDisplayErrorMessage = (errors, field, decimals) => {
     const errorType = errors[field];
     if (errorType) {
-        return mapFieldAndErrorToMessage[field][errorType];
+        const errorMessage = mapFieldAndErrorToMessage[field][errorType];
+        return errorMessage.replace('{decimals}', getOrdinalNumber(decimals !== null && decimals !== void 0 ? decimals : 0));
     }
     return '';
 };
-const SendBalanceForm = ({ initialValues, onSubmit, balance, }) => {
-    const sendBalanceFormValidationSchema = useMemo(() => object().shape({
-        amount: string()
-            .required('required')
-            .matches(/^\d+(\.\d{1,8})?$/, 'invalidFormat')
-            .test({
-            message: 'overBalance',
-            test: (value) => {
-                if (!value || balance === undefined)
-                    return true;
-                try {
-                    const valueNumber = parseFloat(value);
-                    return valueNumber < balance;
-                }
-                catch (err) {
-                    return true;
-                }
-            },
-        }),
-        recipient: string()
-            .required('required')
-            .matches(/^0x[0-9a-fA-F]{40}$/, 'invalidFormat'),
-    }), [balance]);
-    return (jsx(Formik, { initialValues: initialValues || sendBalanceFormInitialValues, validationSchema: sendBalanceFormValidationSchema, onSubmit: (values) => onSubmit(values), validateOnChange: false, validateOnBlur: false, children: ({ errors, touched }) => (jsxs(Form, { 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'] &&
+const SendBalanceForm = ({ initialValues, onSubmit, balance, decimals = 18, }) => {
+    const sendBalanceFormValidationSchema = useMemo(() => {
+        const decimalsRegex = new RegExp(`^\\d*(\\.\\d{1,${decimals}})?$`);
+        return object().shape({
+            amount: string()
+                .required('required')
+                .matches(/^\d*(\.\d+)?$/, 'invalidFormat')
+                .matches(decimalsRegex, 'invalidDecimals')
+                .test({
+                message: 'overBalance',
+                test: (value) => {
+                    if (!value || balance === undefined)
+                        return true;
+                    try {
+                        const valueNumber = parseFloat(value);
+                        return valueNumber < balance;
+                    }
+                    catch (err) {
+                        return true;
+                    }
+                },
+            }),
+            recipient: string()
+                .required('required')
+                .matches(/^0x[0-9a-fA-F]{40}$/, 'invalidFormat'),
+        });
+    }, [balance, decimals]);
+    return (jsx(Formik, { initialValues: initialValues || sendBalanceFormInitialValues, validationSchema: sendBalanceFormValidationSchema, onSubmit: (values) => onSubmit(values), validateOnChange: false, validateOnBlur: false, children: ({ errors, touched }) => (jsxs(Form, { 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', decimals) }), 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, { dataTestId: 'sendBalanceFormSubmitButton', expanded: true, type: 'submit', buttonVariant: 'primary', buttonPadding: 'large', buttonRounded: 'default', buttonClassName: 'send-balance-form__button', children: "Send now" })] })) }));
 };
 

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

@@ -34,7 +34,7 @@ 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, walletKey, onSubmit, displayPoweredByDynamicFooter = false, balance, chain, currencySymbol, initialValues, networkName, networkIcon, }) => {
+const SendBalancePageLayout = ({ error, walletAddress, onClickClose, onClickBack, walletKey, onSubmit, displayPoweredByDynamicFooter = false, balance, chain, currencySymbol, initialValues, networkName, networkIcon, networkCurrencyDecimals, }) => {
     const closeButton = onClickClose && (jsxRuntime.jsx(IconButton.IconButton, { type: 'button', onClick: onClickClose, "data-testid": 'close-button', children: jsxRuntime.jsx(close.ReactComponent, {}) }));
     const backButton = onClickBack && (jsxRuntime.jsx(IconButton.IconButton, { type: 'button', onClick: onClickBack, "data-testid": 'back-button', children: jsxRuntime.jsx(chevronLeft.ReactComponent, {}) }));
     const balanceNumber = React.useMemo(() => {
@@ -45,7 +45,7 @@ const SendBalancePageLayout = ({ error, walletAddress, onClickClose, onClickBack
             return;
         return parseFloat(balance);
     }, [balance]);
-    return (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(ModalHeader.ModalHeader, { leading: backButton, trailing: closeButton, children: jsxRuntime.jsxs("div", { className: 'send-balance-page-layout__header-content', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'primary', as: 'p', children: "Send from" }), walletKey && (jsxRuntime.jsx(Icon.Icon, { size: 'small', children: jsxRuntime.jsx(walletBook.WalletIcon, { walletKey: walletKey }) })), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'primary', as: 'p', children: shortenWalletAddress.shortenWalletAddress(walletAddress, 3, 3) })] }) }), jsxRuntime.jsxs("div", { className: 'send-balance-page-layout__body', children: [jsxRuntime.jsx(AnimatePresence.AnimatePresence, { animationComponent: jsxRuntime.jsx(VerticalDrawerTransition.VerticalDrawerTransition, {}), children: error && (jsxRuntime.jsx("div", { className: 'send-balance-page-layout__error', children: jsxRuntime.jsx(Alert.Alert, { icon: 'error', variant: 'error', children: error }) })) }), networkName && networkIcon && (jsxRuntime.jsx("div", { className: 'send-balance-page-layout__network-container', children: jsxRuntime.jsx(Chip.Chip, { icon: networkIcon, children: networkName }) })), jsxRuntime.jsxs("div", { className: 'send-balance-page-layout__balance-container', children: [jsxRuntime.jsx(FormFieldLabel.FormFieldLabel, { divider: true, children: "Token" }), jsxRuntime.jsx(TokenBalanceCard.TokenBalanceCard, { chain: chain, currencySymbol: currencySymbol, balance: balance })] }), jsxRuntime.jsx(SendBalanceForm.SendBalanceForm, { onSubmit: onSubmit, initialValues: initialValues, balance: balanceNumber }), displayPoweredByDynamicFooter && (jsxRuntime.jsx(PoweredByDynamic.PoweredByDynamic, { classNameRoot: 'send-balance-page-layout__footer' }))] })] }));
+    return (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(ModalHeader.ModalHeader, { leading: backButton, trailing: closeButton, children: jsxRuntime.jsxs("div", { className: 'send-balance-page-layout__header-content', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'primary', as: 'p', children: "Send from" }), walletKey && (jsxRuntime.jsx(Icon.Icon, { size: 'small', children: jsxRuntime.jsx(walletBook.WalletIcon, { walletKey: walletKey }) })), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'primary', as: 'p', children: shortenWalletAddress.shortenWalletAddress(walletAddress, 3, 3) })] }) }), jsxRuntime.jsxs("div", { className: 'send-balance-page-layout__body', children: [jsxRuntime.jsx(AnimatePresence.AnimatePresence, { animationComponent: jsxRuntime.jsx(VerticalDrawerTransition.VerticalDrawerTransition, {}), children: error && (jsxRuntime.jsx("div", { className: 'send-balance-page-layout__error', children: jsxRuntime.jsx(Alert.Alert, { icon: 'error', variant: 'error', children: error }) })) }), networkName && networkIcon && (jsxRuntime.jsx("div", { className: 'send-balance-page-layout__network-container', children: jsxRuntime.jsx(Chip.Chip, { icon: networkIcon, children: networkName }) })), jsxRuntime.jsxs("div", { className: 'send-balance-page-layout__balance-container', children: [jsxRuntime.jsx(FormFieldLabel.FormFieldLabel, { divider: true, children: "Token" }), jsxRuntime.jsx(TokenBalanceCard.TokenBalanceCard, { chain: chain, currencySymbol: currencySymbol, balance: balance })] }), jsxRuntime.jsx(SendBalanceForm.SendBalanceForm, { onSubmit: onSubmit, initialValues: initialValues, balance: balanceNumber, decimals: networkCurrencyDecimals }), displayPoweredByDynamicFooter && (jsxRuntime.jsx(PoweredByDynamic.PoweredByDynamic, { classNameRoot: 'send-balance-page-layout__footer' }))] })] }));
 };
 
 exports.SendBalancePageLayout = SendBalancePageLayout;

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

@@ -10,6 +10,7 @@ export type SendBalancePageLayoutProps = {
     isLoading: boolean;
     networkIcon?: ReactNode;
     networkName?: string;
+    networkCurrencyDecimals?: number;
     onClickBack?: MouseEventHandler<HTMLButtonElement>;
     onClickClose?: MouseEventHandler<HTMLButtonElement>;
     onSubmit: (formValues: SendBalanceFormValues) => void;

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

@@ -30,7 +30,7 @@ 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, walletKey, onSubmit, displayPoweredByDynamicFooter = false, balance, chain, currencySymbol, initialValues, networkName, networkIcon, }) => {
+const SendBalancePageLayout = ({ error, walletAddress, onClickClose, onClickBack, walletKey, onSubmit, displayPoweredByDynamicFooter = false, balance, chain, currencySymbol, initialValues, networkName, networkIcon, networkCurrencyDecimals, }) => {
     const closeButton = onClickClose && (jsx(IconButton, { type: 'button', onClick: onClickClose, "data-testid": 'close-button', children: jsx(SvgClose, {}) }));
     const backButton = onClickBack && (jsx(IconButton, { type: 'button', onClick: onClickBack, "data-testid": 'back-button', children: jsx(SvgChevronLeft, {}) }));
     const balanceNumber = useMemo(() => {
@@ -41,7 +41,7 @@ const SendBalancePageLayout = ({ error, walletAddress, onClickClose, onClickBack
             return;
         return parseFloat(balance);
     }, [balance]);
-    return (jsxs("div", { children: [jsx(ModalHeader, { leading: backButton, trailing: closeButton, children: jsxs("div", { className: 'send-balance-page-layout__header-content', children: [jsx(Typography, { variant: 'body_normal', color: 'primary', as: 'p', children: "Send from" }), walletKey && (jsx(Icon, { size: 'small', children: jsx(WalletIcon, { walletKey: walletKey }) })), jsx(Typography, { variant: 'body_normal', color: 'primary', as: 'p', children: shortenWalletAddress(walletAddress, 3, 3) })] }) }), jsxs("div", { className: 'send-balance-page-layout__body', children: [jsx(AnimatePresence, { animationComponent: jsx(VerticalDrawerTransition, {}), children: error && (jsx("div", { className: 'send-balance-page-layout__error', children: jsx(Alert, { icon: 'error', variant: 'error', children: error }) })) }), networkName && networkIcon && (jsx("div", { className: 'send-balance-page-layout__network-container', children: jsx(Chip, { icon: networkIcon, children: networkName }) })), jsxs("div", { className: 'send-balance-page-layout__balance-container', children: [jsx(FormFieldLabel, { divider: true, children: "Token" }), jsx(TokenBalanceCard, { chain: chain, currencySymbol: currencySymbol, balance: balance })] }), jsx(SendBalanceForm, { onSubmit: onSubmit, initialValues: initialValues, balance: balanceNumber }), displayPoweredByDynamicFooter && (jsx(PoweredByDynamic, { classNameRoot: 'send-balance-page-layout__footer' }))] })] }));
+    return (jsxs("div", { children: [jsx(ModalHeader, { leading: backButton, trailing: closeButton, children: jsxs("div", { className: 'send-balance-page-layout__header-content', children: [jsx(Typography, { variant: 'body_normal', color: 'primary', as: 'p', children: "Send from" }), walletKey && (jsx(Icon, { size: 'small', children: jsx(WalletIcon, { walletKey: walletKey }) })), jsx(Typography, { variant: 'body_normal', color: 'primary', as: 'p', children: shortenWalletAddress(walletAddress, 3, 3) })] }) }), jsxs("div", { className: 'send-balance-page-layout__body', children: [jsx(AnimatePresence, { animationComponent: jsx(VerticalDrawerTransition, {}), children: error && (jsx("div", { className: 'send-balance-page-layout__error', children: jsx(Alert, { icon: 'error', variant: 'error', children: error }) })) }), networkName && networkIcon && (jsx("div", { className: 'send-balance-page-layout__network-container', children: jsx(Chip, { icon: networkIcon, children: networkName }) })), jsxs("div", { className: 'send-balance-page-layout__balance-container', children: [jsx(FormFieldLabel, { divider: true, children: "Token" }), jsx(TokenBalanceCard, { chain: chain, currencySymbol: currencySymbol, balance: balance })] }), jsx(SendBalanceForm, { onSubmit: onSubmit, initialValues: initialValues, balance: balanceNumber, decimals: networkCurrencyDecimals }), displayPoweredByDynamicFooter && (jsx(PoweredByDynamic, { classNameRoot: 'send-balance-page-layout__footer' }))] })] }));
 };
 
 export { SendBalancePageLayout };

package/src/lib/components/TransactionConfirmationPageLayout/TransactionConfirmationPageLayout.cjs

@@ -38,7 +38,7 @@ const TransactionConfirmationPageLayout = ({ onClickClose, isLoading, onClickBac
     const backButton = onClickBack && (jsxRuntime.jsx(IconButton.IconButton, { type: 'button', onClick: onClickBack, "data-testid": 'back-button', children: jsxRuntime.jsx(chevronLeft.ReactComponent, {}) }));
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ModalHeader.ModalHeader, { trailing: closeButton, leading: backButton, alignContent: 'bottom', children: jsxRuntime.jsx(IconWithSpinner.IconWithSpinner, { Icon: (props) => (jsxRuntime.jsx(Icon.Icon, { color: 'brand-primary', children: jsxRuntime.jsx(signCircle.ReactComponent, Object.assign({}, props)) })), iconSize: 64, isSpinning: true }) }), jsxRuntime.jsxs("div", { className: 'transaction-confirmation__body', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'title', color: 'primary', className: 'transaction-confirmation__title', children: title }), jsxRuntime.jsx(AnimatePresence.AnimatePresence, { animationComponent: jsxRuntime.jsx(VerticalDrawerTransition.VerticalDrawerTransition, {}), children: error && (jsxRuntime.jsx("div", { className: 'transaction-confirmation__error', children: jsxRuntime.jsx(Alert.Alert, { icon: 'error', variant: 'error', children: error }) })) }), jsxRuntime.jsxs("div", { className: 'transaction-confirmation__content', children: [jsxRuntime.jsx("div", { className: 'transaction-confirmation__app-origin-tile', children: jsxRuntime.jsx(AppOriginTile.AppOriginTile, { appLogoUrl: appLogoUrl, appName: appName, appOrigin: appOrigin }) }), jsxRuntime.jsx("div", { className: 'transaction-confirmation__rows', children: children })] }), jsxRuntime.jsx(AnimatePresence.AnimatePresence, { animationComponent: jsxRuntime.jsx(VerticalDrawerTransition.VerticalDrawerTransition, {}), children: warningMessage && (jsxRuntime.jsx("div", { className: 'transaction-confirmation__warning', children: jsxRuntime.jsx(Alert.Alert, { icon: 'error', variant: 'warning', contentDataTestId: 'warning_content', children: warningMessage }) })) }), jsxRuntime.jsxs("div", { className: 'transaction-confirmation__actions', children: [onClickClose && (jsxRuntime.jsx(Button.Button, { buttonVariant: 'secondary', onClick: onClickClose, expanded: true, buttonPadding: 'large', buttonRounded: 'default', disabled: isLoading, children: "Cancel" })), jsxRuntime.jsx(Button.Button, { buttonVariant: 'primary', buttonPadding: 'large', onClick: (event) => {
                                     onClickSend === null || onClickSend === void 0 ? void 0 : onClickSend(event);
-                                }, expanded: true, buttonRounded: 'default', loading: isLoading, disabled: disableSendButton, children: "Send" })] }), displayPoweredByDynamicFooter && (jsxRuntime.jsx(PoweredByDynamic.PoweredByDynamic, { classNameRoot: 'transaction-confirmation__footer' }))] })] }));
+                                }, expanded: true, buttonRounded: 'default', loading: isLoading, disabled: disableSendButton, children: "Confirm" })] }), displayPoweredByDynamicFooter && (jsxRuntime.jsx(PoweredByDynamic.PoweredByDynamic, { classNameRoot: 'transaction-confirmation__footer' }))] })] }));
 };
 
 exports.TransactionConfirmationPageLayout = TransactionConfirmationPageLayout;

package/src/lib/components/TransactionConfirmationPageLayout/TransactionConfirmationPageLayout.js

@@ -34,7 +34,7 @@ const TransactionConfirmationPageLayout = ({ onClickClose, isLoading, onClickBac
     const backButton = onClickBack && (jsx(IconButton, { type: 'button', onClick: onClickBack, "data-testid": 'back-button', children: jsx(SvgChevronLeft, {}) }));
     return (jsxs(Fragment, { children: [jsx(ModalHeader, { trailing: closeButton, leading: backButton, alignContent: 'bottom', children: jsx(IconWithSpinner, { Icon: (props) => (jsx(Icon, { color: 'brand-primary', children: jsx(SvgSignCircle, Object.assign({}, props)) })), iconSize: 64, isSpinning: true }) }), jsxs("div", { className: 'transaction-confirmation__body', children: [jsx(Typography, { variant: 'title', color: 'primary', className: 'transaction-confirmation__title', children: title }), jsx(AnimatePresence, { animationComponent: jsx(VerticalDrawerTransition, {}), children: error && (jsx("div", { className: 'transaction-confirmation__error', children: jsx(Alert, { icon: 'error', variant: 'error', children: error }) })) }), jsxs("div", { className: 'transaction-confirmation__content', children: [jsx("div", { className: 'transaction-confirmation__app-origin-tile', children: jsx(AppOriginTile, { appLogoUrl: appLogoUrl, appName: appName, appOrigin: appOrigin }) }), jsx("div", { className: 'transaction-confirmation__rows', children: children })] }), jsx(AnimatePresence, { animationComponent: jsx(VerticalDrawerTransition, {}), children: warningMessage && (jsx("div", { className: 'transaction-confirmation__warning', children: jsx(Alert, { icon: 'error', variant: 'warning', contentDataTestId: 'warning_content', children: warningMessage }) })) }), jsxs("div", { className: 'transaction-confirmation__actions', children: [onClickClose && (jsx(Button, { buttonVariant: 'secondary', onClick: onClickClose, expanded: true, buttonPadding: 'large', buttonRounded: 'default', disabled: isLoading, children: "Cancel" })), jsx(Button, { buttonVariant: 'primary', buttonPadding: 'large', onClick: (event) => {
                                     onClickSend === null || onClickSend === void 0 ? void 0 : onClickSend(event);
-                                }, expanded: true, buttonRounded: 'default', loading: isLoading, disabled: disableSendButton, children: "Send" })] }), displayPoweredByDynamicFooter && (jsx(PoweredByDynamic, { classNameRoot: 'transaction-confirmation__footer' }))] })] }));
+                                }, expanded: true, buttonRounded: 'default', loading: isLoading, disabled: disableSendButton, children: "Confirm" })] }), displayPoweredByDynamicFooter && (jsx(PoweredByDynamic, { classNameRoot: 'transaction-confirmation__footer' }))] })] }));
 };
 
 export { TransactionConfirmationPageLayout };

package/src/lib/context/DynamicContext/DynamicContext.cjs

@@ -104,6 +104,7 @@ var useCustomerCallbacks = require('./useCustomerCallbacks/useCustomerCallbacks.
 var useCustomerAuthFlowCallbacks = require('./useCustomerCallbacks/useCustomerAuthFlowCallbacks.cjs');
 var validators = require('./validators.cjs');
 var internalEvents = require('./internalEvents/internalEvents.cjs');
+var handleDisconnectWallet = require('./handleDisconnectWallet/handleDisconnectWallet.cjs');
 
 const PUBLIC_PROJECT_LIVE_ENVIRONMENT_ID = '2762a57b-faa4-41ce-9f16-abff9300e2c9';
 const EMPTY_INITIAL_USER = undefined;
@@ -202,10 +203,13 @@ const DynamicContextProvider = ({ children, theme, settings, locale: locale$1, }
         enableVisitTrackingOnConnectOnly,
         environmentId,
         onBeforeConnectSuccessConfirmation: eventsCallbacks === null || eventsCallbacks === void 0 ? void 0 : eventsCallbacks.onBeforeConnectSuccessConfirmation,
-        onUnlink: (walletId, connectedWalletsInfo) => {
-            const missingChains = getMissingChains.getMissingChains(walletsByChain, connectedWalletsInfo);
-            setWalletsToConnectByChain(missingChains);
-        },
+        onUnlink: (wallet, connectedWalletsInfo) => handleDisconnectWallet.handleDisconnectWallet({
+            connectedWalletsInfo,
+            eventsCallbacks,
+            setWalletsToConnectByChain,
+            wallet,
+            walletsByChain,
+        }),
         primaryWalletId,
         setPrimaryWalletId,
         setShowAuthFlow,
@@ -267,7 +271,7 @@ const DynamicContextProvider = ({ children, theme, settings, locale: locale$1, }
         clearOphanedWalletConnectSessions,
     ]);
     const handleLogOut = React.useCallback(() => _tslib.__awaiter(void 0, void 0, void 0, function* () {
-        var _j, _k;
+        var _j, _k, _l;
         clearAllWalletConnectSessions();
         setWalletsToConnectByChain(walletsByChain);
         setShowDynamicUserProfile(false);
@@ -300,13 +304,21 @@ const DynamicContextProvider = ({ children, theme, settings, locale: locale$1, }
         removeIsFullyConnected();
         clearPrimaryWalletId();
         removeConnectedNameService();
-        (_k = eventsCallbacks === null || eventsCallbacks === void 0 ? void 0 : eventsCallbacks.onLogout) === null || _k === void 0 ? void 0 : _k.call(eventsCallbacks, user);
+        if (connectedWallet) {
+            (_k = eventsCallbacks === null || eventsCallbacks === void 0 ? void 0 : eventsCallbacks.onDisconnect) === null || _k === void 0 ? void 0 : _k.call(eventsCallbacks, {
+                walletConnector: connectedWallet === null || connectedWallet === void 0 ? void 0 : connectedWallet.connector,
+            });
+        }
+        (_l = eventsCallbacks === null || eventsCallbacks === void 0 ? void 0 : eventsCallbacks.onLogout) === null || _l === void 0 ? void 0 : _l.call(eventsCallbacks, user);
         internalEventsRef.current.emit('logout');
     }), [
         clearAllWalletConnectSessions,
         walletsByChain,
+        toolkitEnabled,
         user,
-        connectedWallet === null || connectedWallet === void 0 ? void 0 : connectedWallet.connector,
+        connectedWallet,
+        isVerificationInProgress,
+        setIsVerificationInProgress,
         setAuthMode,
         initialAuthenticationMode,
         setMultiWalletWidgetState,
@@ -386,6 +398,7 @@ const DynamicContextProvider = ({ children, theme, settings, locale: locale$1, }
             onConnectSuccess: eventsCallbacks === null || eventsCallbacks === void 0 ? void 0 : eventsCallbacks.onConnectSuccess,
             onEmailVerificationFailure,
             onEmailVerificationSuccess,
+            onEmbeddedWalletCreated: eventsCallbacks === null || eventsCallbacks === void 0 ? void 0 : eventsCallbacks.onEmbeddedWalletCreated,
             onLinkSuccess: eventsCallbacks === null || eventsCallbacks === void 0 ? void 0 : eventsCallbacks.onLinkSuccess,
             onUserProfileUpdate: eventsCallbacks === null || eventsCallbacks === void 0 ? void 0 : eventsCallbacks.onUserProfileUpdate,
         },

package/src/lib/context/DynamicContext/DynamicContext.js

@@ -100,6 +100,7 @@ import { useCustomerCallbacks } from './useCustomerCallbacks/useCustomerCallback
 import { useCustomerAuthFlowCallbacks } from './useCustomerCallbacks/useCustomerAuthFlowCallbacks.js';
 import { validateAuthUser } from './validators.js';
 import { getInternalEvents } from './internalEvents/internalEvents.js';
+import { handleDisconnectWallet } from './handleDisconnectWallet/handleDisconnectWallet.js';
 
 const PUBLIC_PROJECT_LIVE_ENVIRONMENT_ID = '2762a57b-faa4-41ce-9f16-abff9300e2c9';
 const EMPTY_INITIAL_USER = undefined;
@@ -198,10 +199,13 @@ const DynamicContextProvider = ({ children, theme, settings, locale, }) => {
         enableVisitTrackingOnConnectOnly,
         environmentId,
         onBeforeConnectSuccessConfirmation: eventsCallbacks === null || eventsCallbacks === void 0 ? void 0 : eventsCallbacks.onBeforeConnectSuccessConfirmation,
-        onUnlink: (walletId, connectedWalletsInfo) => {
-            const missingChains = getMissingChains(walletsByChain, connectedWalletsInfo);
-            setWalletsToConnectByChain(missingChains);
-        },
+        onUnlink: (wallet, connectedWalletsInfo) => handleDisconnectWallet({
+            connectedWalletsInfo,
+            eventsCallbacks,
+            setWalletsToConnectByChain,
+            wallet,
+            walletsByChain,
+        }),
         primaryWalletId,
         setPrimaryWalletId,
         setShowAuthFlow,
@@ -263,7 +267,7 @@ const DynamicContextProvider = ({ children, theme, settings, locale, }) => {
         clearOphanedWalletConnectSessions,
     ]);
     const handleLogOut = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
-        var _j, _k;
+        var _j, _k, _l;
         clearAllWalletConnectSessions();
         setWalletsToConnectByChain(walletsByChain);
         setShowDynamicUserProfile(false);
@@ -296,13 +300,21 @@ const DynamicContextProvider = ({ children, theme, settings, locale, }) => {
         removeIsFullyConnected();
         clearPrimaryWalletId();
         removeConnectedNameService();
-        (_k = eventsCallbacks === null || eventsCallbacks === void 0 ? void 0 : eventsCallbacks.onLogout) === null || _k === void 0 ? void 0 : _k.call(eventsCallbacks, user);
+        if (connectedWallet) {
+            (_k = eventsCallbacks === null || eventsCallbacks === void 0 ? void 0 : eventsCallbacks.onDisconnect) === null || _k === void 0 ? void 0 : _k.call(eventsCallbacks, {
+                walletConnector: connectedWallet === null || connectedWallet === void 0 ? void 0 : connectedWallet.connector,
+            });
+        }
+        (_l = eventsCallbacks === null || eventsCallbacks === void 0 ? void 0 : eventsCallbacks.onLogout) === null || _l === void 0 ? void 0 : _l.call(eventsCallbacks, user);
         internalEventsRef.current.emit('logout');
     }), [
         clearAllWalletConnectSessions,
         walletsByChain,
+        toolkitEnabled,
         user,
-        connectedWallet === null || connectedWallet === void 0 ? void 0 : connectedWallet.connector,
+        connectedWallet,
+        isVerificationInProgress,
+        setIsVerificationInProgress,
         setAuthMode,
         initialAuthenticationMode,
         setMultiWalletWidgetState,
@@ -382,6 +394,7 @@ const DynamicContextProvider = ({ children, theme, settings, locale, }) => {
             onConnectSuccess: eventsCallbacks === null || eventsCallbacks === void 0 ? void 0 : eventsCallbacks.onConnectSuccess,
             onEmailVerificationFailure,
             onEmailVerificationSuccess,
+            onEmbeddedWalletCreated: eventsCallbacks === null || eventsCallbacks === void 0 ? void 0 : eventsCallbacks.onEmbeddedWalletCreated,
             onLinkSuccess: eventsCallbacks === null || eventsCallbacks === void 0 ? void 0 : eventsCallbacks.onLinkSuccess,
             onUserProfileUpdate: eventsCallbacks === null || eventsCallbacks === void 0 ? void 0 : eventsCallbacks.onUserProfileUpdate,
         },

package/src/lib/context/DynamicContext/handleDisconnectWallet/handleDisconnectWallet.cjs

@@ -0,0 +1,34 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('@dynamic-labs/sdk-api');
+var logger = require('../../../shared/logger.cjs');
+require('@dynamic-labs/iconic');
+require('@dynamic-labs/wallet-connector-core');
+require('react/jsx-runtime');
+require('../../ViewContext/ViewContext.cjs');
+require('react');
+require('@dynamic-labs/wallet-book');
+require('@dynamic-labs/utils');
+require('../../../utils/constants/colors.cjs');
+require('../../../shared/utils/classes/storage/localStorage.cjs');
+require('viem');
+require('../../../shared/consts/index.cjs');
+var getMissingChains = require('../../../utils/functions/getMissingChains/getMissingChains.cjs');
+
+const handleDisconnectWallet = ({ wallet, connectedWalletsInfo, walletsByChain, setWalletsToConnectByChain, eventsCallbacks, }) => {
+    var _a;
+    const missingChains = getMissingChains.getMissingChains(walletsByChain, connectedWalletsInfo);
+    setWalletsToConnectByChain(missingChains);
+    try {
+        (_a = eventsCallbacks === null || eventsCallbacks === void 0 ? void 0 : eventsCallbacks.onDisconnect) === null || _a === void 0 ? void 0 : _a.call(eventsCallbacks, {
+            walletConnector: wallet.connector,
+        });
+    }
+    catch (error) {
+        logger.logger.warn('Error calling onDisconnect', error);
+    }
+};
+
+exports.handleDisconnectWallet = handleDisconnectWallet;

package/src/lib/context/DynamicContext/handleDisconnectWallet/handleDisconnectWallet.d.ts

@@ -0,0 +1,13 @@
+import { Dispatch, SetStateAction } from 'react';
+import { DynamicEventsCallbacks, Wallet } from '../../../shared';
+import { ConnectedWalletConnectorType } from '../../../utils/hooks/useConnectWallet/useConnectWallet';
+import { ChainsToConnect } from '../types';
+type HandleDisconnectWalletArgs = {
+    wallet: Wallet;
+    connectedWalletsInfo: ConnectedWalletConnectorType[];
+    walletsByChain: ChainsToConnect[] | undefined;
+    setWalletsToConnectByChain: Dispatch<SetStateAction<ChainsToConnect[] | undefined>>;
+    eventsCallbacks?: DynamicEventsCallbacks;
+};
+export declare const handleDisconnectWallet: ({ wallet, connectedWalletsInfo, walletsByChain, setWalletsToConnectByChain, eventsCallbacks, }: HandleDisconnectWalletArgs) => void;
+export {};

package/src/lib/context/DynamicContext/handleDisconnectWallet/handleDisconnectWallet.js

@@ -0,0 +1,30 @@
+import '@dynamic-labs/sdk-api';
+import { logger } from '../../../shared/logger.js';
+import '@dynamic-labs/iconic';
+import '@dynamic-labs/wallet-connector-core';
+import 'react/jsx-runtime';
+import '../../ViewContext/ViewContext.js';
+import 'react';
+import '@dynamic-labs/wallet-book';
+import '@dynamic-labs/utils';
+import '../../../utils/constants/colors.js';
+import '../../../shared/utils/classes/storage/localStorage.js';
+import 'viem';
+import '../../../shared/consts/index.js';
+import { getMissingChains } from '../../../utils/functions/getMissingChains/getMissingChains.js';
+
+const handleDisconnectWallet = ({ wallet, connectedWalletsInfo, walletsByChain, setWalletsToConnectByChain, eventsCallbacks, }) => {
+    var _a;
+    const missingChains = getMissingChains(walletsByChain, connectedWalletsInfo);
+    setWalletsToConnectByChain(missingChains);
+    try {
+        (_a = eventsCallbacks === null || eventsCallbacks === void 0 ? void 0 : eventsCallbacks.onDisconnect) === null || _a === void 0 ? void 0 : _a.call(eventsCallbacks, {
+            walletConnector: wallet.connector,
+        });
+    }
+    catch (error) {
+        logger.warn('Error calling onDisconnect', error);
+    }
+};
+
+export { handleDisconnectWallet };

package/src/lib/context/DynamicContext/handleDisconnectWallet/index.d.ts

@@ -0,0 +1 @@
+export * from './handleDisconnectWallet';

package/src/lib/context/DynamicContext/useCustomerCallbacks/types.d.ts

@@ -1,10 +1,12 @@
+import { JwtVerifiedCredential } from '@dynamic-labs/sdk-api/src/models/JwtVerifiedCredential';
 import { WalletConnector } from '../../../..';
-import { AuthModeType, OnAuthSuccess, OnBeforeConnectSuccessConfirmation, OnConnectSuccess, OnEmailVerificationFailure, OnEmailVerificationSuccess, OnUserProfileUpdate, UserProfile, Wallet } from '../../../shared/types';
+import { AuthModeType, OnAuthSuccess, OnBeforeConnectSuccessConfirmation, OnConnectSuccess, OnEmailVerificationFailure, OnEmailVerificationSuccess, OnEmbeddedWalletCreated, OnUserProfileUpdate, UserProfile, Wallet } from '../../../shared/types';
 import { IDynamicContext } from '../types';
-export type Callback = 'authSuccess' | 'linkSuccess' | 'emailVerificationSuccess' | 'emailVerificationFailure' | 'userProfileUpdate' | 'connectSuccess' | 'onBeforeConnectSuccessConfirmation';
+export type Callback = 'authSuccess' | 'linkSuccess' | 'emailVerificationSuccess' | 'emailVerificationFailure' | 'userProfileUpdate' | 'connectSuccess' | 'onBeforeConnectSuccessConfirmation' | 'embeddedWalletCreated';
 export type CallbackParams = {
     /** For email verification */
     email: string;
+    verifiedCredential?: JwtVerifiedCredential;
 };
 export type UseCustomerCallbacksArgs = {
     authMode: AuthModeType;
@@ -16,6 +18,7 @@ export type UseCustomerCallbacksArgs = {
         onBeforeConnectSuccessConfirmation?: OnBeforeConnectSuccessConfirmation;
         onLinkSuccess?: OnAuthSuccess;
         onUserProfileUpdate?: OnUserProfileUpdate;
+        onEmbeddedWalletCreated?: OnEmbeddedWalletCreated;
     };
     handleLogOut: () => Promise<void>;
     isAuthenticated: boolean;