@dynamic-labs/sdk-react-core 4.80.0 → 4.81.0

package/CHANGELOG.md

@@ -1,4 +1,20 @@
 
+## [4.81.0](https://github.com/dynamic-labs/dynamic-auth/compare/v4.80.0...v4.81.0) (2026-05-07)
+
+
+### Features
+
+* **react-native:** add waitForAuthSuccess() to auth module ([#11137](https://github.com/dynamic-labs/dynamic-auth/issues/11137)) ([089a566](https://github.com/dynamic-labs/dynamic-auth/commit/089a5663283639e7e425eead291b135010c8b398))
+* **waas:** hook Aleo into DynamicWaasMixin ([#11102](https://github.com/dynamic-labs/dynamic-auth/issues/11102)) ([ff42df9](https://github.com/dynamic-labs/dynamic-auth/commit/ff42df99d8993e22894caee3c0570cd9c332a3d1))
+* **widget:** shielded/unshielded tabs + Shield Manually CTA on ActiveWalletBalance for Aleo ([#11103](https://github.com/dynamic-labs/dynamic-auth/issues/11103)) ([e278836](https://github.com/dynamic-labs/dynamic-auth/commit/e278836bfcb19c13828c10483ebb87d165f5d00d))
+
+
+### Bug Fixes
+
+* **ethereum-aa:** return hex chain ids from EIP-5792 getCapabilities ([#11146](https://github.com/dynamic-labs/dynamic-auth/issues/11146)) ([b32dc8f](https://github.com/dynamic-labs/dynamic-auth/commit/b32dc8f6fdee3722073921787c4f77908ab4f740))
+* remediate high-severity dependency vulnerabilities ([#11151](https://github.com/dynamic-labs/dynamic-auth/issues/11151)) ([1d84ef1](https://github.com/dynamic-labs/dynamic-auth/commit/1d84ef12e10544be0b2a80dbbbd63f615b03adc3))
+* **wagmi-connector:** emit change unconditionally on MM accountsChanged DYNT-549 ([#11131](https://github.com/dynamic-labs/dynamic-auth/issues/11131)) ([348ee6f](https://github.com/dynamic-labs/dynamic-auth/commit/348ee6ff9a22cb55ef0cb84c4b8f8d2e843bd10e)), closes [#11043](https://github.com/dynamic-labs/dynamic-auth/issues/11043)
+
 ## [4.80.0](https://github.com/dynamic-labs/dynamic-auth/compare/v4.79.2...v4.80.0) (2026-05-05)
 
 

package/package.cjs

@@ -3,7 +3,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var version = "4.80.0";
+var version = "4.81.0";
 var dependencies = {
 	"@dynamic-labs/sdk-api-core": "0.0.964",
 	"@dynamic-labs-sdk/client": "0.26.9",

package/package.js

@@ -1,5 +1,5 @@
 'use client'
-var version = "4.80.0";
+var version = "4.81.0";
 var dependencies = {
 	"@dynamic-labs/sdk-api-core": "0.0.964",
 	"@dynamic-labs-sdk/client": "0.26.9",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dynamic-labs/sdk-react-core",
-  "version": "4.80.0",
+  "version": "4.81.0",
   "dependencies": {
     "@dynamic-labs/sdk-api-core": "0.0.964",
     "@dynamic-labs-sdk/client": "0.26.9",
@@ -16,17 +16,17 @@
     "yup": "0.32.11",
     "react-international-phone": "4.5.0",
     "bs58": "5.0.0",
-    "@dynamic-labs/assert-package-version": "4.80.0",
-    "@dynamic-labs/iconic": "4.80.0",
-    "@dynamic-labs/locale": "4.80.0",
-    "@dynamic-labs/logger": "4.80.0",
-    "@dynamic-labs/multi-wallet": "4.80.0",
-    "@dynamic-labs/rpc-providers": "4.80.0",
-    "@dynamic-labs/store": "4.80.0",
-    "@dynamic-labs/types": "4.80.0",
-    "@dynamic-labs/utils": "4.80.0",
-    "@dynamic-labs/wallet-book": "4.80.0",
-    "@dynamic-labs/wallet-connector-core": "4.80.0",
+    "@dynamic-labs/assert-package-version": "4.81.0",
+    "@dynamic-labs/iconic": "4.81.0",
+    "@dynamic-labs/locale": "4.81.0",
+    "@dynamic-labs/logger": "4.81.0",
+    "@dynamic-labs/multi-wallet": "4.81.0",
+    "@dynamic-labs/rpc-providers": "4.81.0",
+    "@dynamic-labs/store": "4.81.0",
+    "@dynamic-labs/types": "4.81.0",
+    "@dynamic-labs/utils": "4.81.0",
+    "@dynamic-labs/wallet-book": "4.81.0",
+    "@dynamic-labs/wallet-connector-core": "4.81.0",
     "eventemitter3": "5.0.1"
   },
   "devDependencies": {

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

@@ -3,6 +3,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _tslib = require('../../../../_virtual/_tslib.cjs');
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var formik = require('formik');
@@ -21,7 +22,6 @@ require('../../utils/constants/values.cjs');
 require('@dynamic-labs/sdk-api-core');
 require('../../shared/consts/index.cjs');
 require('../../events/dynamicEvents.cjs');
-require('../../../../_virtual/_tslib.cjs');
 require('../../context/CaptchaContext/CaptchaContext.cjs');
 require('../../context/ErrorContext/ErrorContext.cjs');
 require('@dynamic-labs/multi-wallet');
@@ -60,7 +60,7 @@ require('../../context/UserFieldEditorContext/UserFieldEditorContext.cjs');
 require('@dynamic-labs/rpc-providers');
 require('../../store/state/walletOptions/walletOptions.cjs');
 require('../Accordion/components/AccordionItem/AccordionItem.cjs');
-require('../Alert/Alert.cjs');
+var Alert = require('../Alert/Alert.cjs');
 var Typography = require('../Typography/Typography.cjs');
 require('../ShadowDOM/ShadowDOM.cjs');
 var TypographyButton = require('../TypographyButton/TypographyButton.cjs');
@@ -101,6 +101,7 @@ var sendBalances = require('../../store/state/sendBalances.cjs');
 var TokensBalanceDropdown = require('../SendBalancePageLayout/components/TokensBalanceDropdown/TokensBalanceDropdown.cjs');
 var utils = require('../TransactionConfirmationPageLayout/utils.cjs');
 var FeeTokenSelector = require('./FeeTokenSelector/FeeTokenSelector.cjs');
+var TransactionModeSegmentedControl = require('./TransactionModeSegmentedControl/TransactionModeSegmentedControl.cjs');
 require('../../store/state/connectorsInitializing/connectorsInitializing.cjs');
 require('../OverlayCardBase/OverlayCardTarget/OverlayCardTarget.cjs');
 require('../../widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.cjs');
@@ -142,11 +143,55 @@ const getDisplayErrorMessage = (errors, t, field, decimals) => {
     return '';
 };
 const SendBalanceForm = ({ initialValues, onSubmit, decimals = 18, validateAddress = () => true, validateAmount = () => true, currentToken, transaction, tokenBalances, setCurrentToken, isLoading, supportsFeeTokenSelection = false, feeTokenOptions, currentFeeToken, setCurrentFeeToken, }) => {
+    var _a;
     const { t } = reactI18next.useTranslation();
     const { showFiat } = useInternalDynamicContext.useInternalDynamicContext();
     const floatingValueRef = React.useRef(null);
     const [leftSymbolPadding, setLeftSymbolPadding] = React.useState(0);
     const { amount } = sendBalances.useSendBalanceState();
+    // Aleo (and any future chain that opts in) populates `transactionModes`
+    // on its IUITransaction. We render a segmented control between the
+    // recipient field and the submit button. The chain may leave
+    // `selectedTransactionMode` undefined to force the user to explicitly
+    // pick — in that case we keep the form interactive (token list,
+    // amount, recipient all stay editable since they don't depend on the
+    // mode), and only the submit button is gated until a selection lands.
+    // `transaction` is supplied by Send-launching call sites (widget) but
+    // legacy / unit-test consumers may render the form without one. Guard
+    // every property access so the form still renders for those cases —
+    // the segmented-mode UI just stays hidden when transaction is absent.
+    const transactionModes = (_a = transaction === null || transaction === void 0 ? void 0 : transaction.transactionModes) !== null && _a !== void 0 ? _a : [];
+    const hasModes = transactionModes.length > 1;
+    const [selectedModeId, setSelectedModeId] = React.useState(transaction === null || transaction === void 0 ? void 0 : transaction.selectedTransactionMode);
+    const modeReady = !hasModes || Boolean(selectedModeId);
+    // The merge CTA is re-derived after each form change / mode change so
+    // the banner can appear, disappear, or change copy without a manual
+    // refresh. We snapshot it in state so the banner survives re-renders
+    // while the user clicks the action and the underlying merge runs.
+    const [mergeAction, setMergeAction] = React.useState(() => { var _a; return (_a = transaction === null || transaction === void 0 ? void 0 : transaction.getRecordMergeAction) === null || _a === void 0 ? void 0 : _a.call(transaction); });
+    const [isMerging, setIsMerging] = React.useState(false);
+    const refreshMergeAction = () => {
+        var _a;
+        setMergeAction((_a = transaction === null || transaction === void 0 ? void 0 : transaction.getRecordMergeAction) === null || _a === void 0 ? void 0 : _a.call(transaction));
+    };
+    const handleModeChange = (modeId) => {
+        var _a;
+        setSelectedModeId(modeId);
+        (_a = transaction === null || transaction === void 0 ? void 0 : transaction.setTransactionMode) === null || _a === void 0 ? void 0 : _a.call(transaction, modeId);
+        refreshMergeAction();
+    };
+    const handleMergeAction = () => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+        if (!mergeAction || isMerging)
+            return;
+        setIsMerging(true);
+        try {
+            yield mergeAction.onAction();
+        }
+        finally {
+            setIsMerging(false);
+            refreshMergeAction();
+        }
+    });
     React.useEffect(() => {
         if (floatingValueRef.current) {
             const floatingDivWidth = floatingValueRef.current.offsetWidth;
@@ -188,9 +233,16 @@ const SendBalanceForm = ({ initialValues, onSubmit, decimals = 18, validateAddre
                                     }
                                     sendBalances.setSendBalanceVariable('amount', (currentToken === null || currentToken === void 0 ? void 0 : currentToken.price) ? Number(newValue) : undefined);
                                 }, onBlur: (e) => {
+                                    var _a, _b;
                                     handleBlur(e);
                                     setFieldTouched('amount', true);
                                     validateField('amount');
+                                    // Push the latest amount string to the transaction so any
+                                    // chain-specific derived state (e.g. Aleo's merge CTA) can
+                                    // reflect what the user has entered without waiting for
+                                    // the submit step that would otherwise set transaction.value.
+                                    (_a = transaction === null || transaction === void 0 ? void 0 : transaction.setPendingAmount) === null || _a === void 0 ? void 0 : _a.call(transaction, (_b = e.target.value) !== null && _b !== void 0 ? _b : '');
+                                    refreshMergeAction();
                                 }, placeholder: t('dyn_send_transaction.data.amount.placeholder'), as: Input.Input, error: errors['amount'], copykey: 'dyn_send_transaction.data.amount.label', message: touched['amount'] &&
                                     getDisplayErrorMessage(errors, t, 'amount', decimals), style: {
                                     paddingLeft: `${leftSymbolPadding}px`,
@@ -201,7 +253,15 @@ const SendBalanceForm = ({ initialValues, onSubmit, decimals = 18, validateAddre
                         feeTokenOptions.length > 0 &&
                         setCurrentFeeToken &&
                         currentFeeToken && (jsxRuntime.jsx(FeeTokenSelector.FeeTokenSelector, { feeTokenOptions: feeTokenOptions, currentFeeToken: currentFeeToken, setCurrentFeeToken: setCurrentFeeToken, label: t('dyn_send_transaction.data.fee_token_label') })), jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', weight: 'regular', color: 'secondary', copykey: 'dyn_send_transaction.data.recipient.label', children: "Recipient Address" }), jsxRuntime.jsx(formik.Field, { className: 'send-balance-form__field', placeholder: t('dyn_send_transaction.data.recipient.placeholder'), label: t('dyn_send_transaction.data.recipient.label'), id: 'recipient', name: 'recipient', as: Input.Input, error: errors['recipient'], copykey: 'dyn_send_transaction.data.recipient.label', message: touched['recipient'] &&
-                            getDisplayErrorMessage(errors, t, 'recipient') }), jsxRuntime.jsx(TypographyButton.TypographyButton, { dataTestId: 'sendBalanceFormSubmitButton', expanded: true, type: 'submit', buttonVariant: 'primary', buttonPadding: 'small', buttonClassName: 'send-balance-form__button', copykey: 'dyn_send_transaction.preview_transaction', children: t('dyn_send_transaction.preview_transaction') })] }));
+                            getDisplayErrorMessage(errors, t, 'recipient'), onBlur: (e) => {
+                            handleBlur(e);
+                            setFieldTouched('recipient', true);
+                            // Re-evaluate the merge CTA once the recipient lands; some
+                            // chains' merge logic may key off both amount and address.
+                            refreshMergeAction();
+                        } }), hasModes && (jsxRuntime.jsx(TransactionModeSegmentedControl.TransactionModeSegmentedControl, { options: transactionModes, selectedId: selectedModeId, onChange: handleModeChange, disabled: isMerging })), mergeAction && (jsxRuntime.jsx("div", { className: 'send-balance-form__inline-action', children: jsxRuntime.jsx(Alert.Alert, { icon: 'error', variant: 'warning', children: jsxRuntime.jsxs("div", { className: 'send-balance-form__inline-action-content', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', weight: 'regular', children: mergeAction.message }), jsxRuntime.jsx(TypographyButton.TypographyButton, { dataTestId: 'sendBalanceFormMergeRecordsButton', type: 'button', buttonVariant: 'secondary', buttonPadding: 'small', onClick: handleMergeAction, disabled: isMerging, children: isMerging
+                                            ? t('dyn_send_transaction.merging', 'Merging…')
+                                            : mergeAction.actionLabel })] }) }) })), jsxRuntime.jsx(TypographyButton.TypographyButton, { dataTestId: 'sendBalanceFormSubmitButton', expanded: true, type: 'submit', buttonVariant: 'primary', buttonPadding: 'small', buttonClassName: 'send-balance-form__button', copykey: 'dyn_send_transaction.preview_transaction', disabled: !modeReady || isMerging || Boolean(mergeAction), children: t('dyn_send_transaction.preview_transaction') })] }));
         } }));
 };
 

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

@@ -1,4 +1,5 @@
 'use client'
+import { __awaiter } from '../../../../_virtual/_tslib.js';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useRef, useState, useEffect, useMemo } from 'react';
 import { Formik, Form, Field } from 'formik';
@@ -17,7 +18,6 @@ import '../../utils/constants/values.js';
 import '@dynamic-labs/sdk-api-core';
 import '../../shared/consts/index.js';
 import '../../events/dynamicEvents.js';
-import '../../../../_virtual/_tslib.js';
 import '../../context/CaptchaContext/CaptchaContext.js';
 import '../../context/ErrorContext/ErrorContext.js';
 import '@dynamic-labs/multi-wallet';
@@ -56,7 +56,7 @@ import '../../context/UserFieldEditorContext/UserFieldEditorContext.js';
 import '@dynamic-labs/rpc-providers';
 import '../../store/state/walletOptions/walletOptions.js';
 import '../Accordion/components/AccordionItem/AccordionItem.js';
-import '../Alert/Alert.js';
+import { Alert } from '../Alert/Alert.js';
 import { Typography } from '../Typography/Typography.js';
 import '../ShadowDOM/ShadowDOM.js';
 import { TypographyButton } from '../TypographyButton/TypographyButton.js';
@@ -97,6 +97,7 @@ import { useSendBalanceState, setSendBalanceVariable } from '../../store/state/s
 import { TokensBalanceDropdown } from '../SendBalancePageLayout/components/TokensBalanceDropdown/TokensBalanceDropdown.js';
 import { getDisplayFiatPrice } from '../TransactionConfirmationPageLayout/utils.js';
 import { FeeTokenSelector } from './FeeTokenSelector/FeeTokenSelector.js';
+import { TransactionModeSegmentedControl } from './TransactionModeSegmentedControl/TransactionModeSegmentedControl.js';
 import '../../store/state/connectorsInitializing/connectorsInitializing.js';
 import '../OverlayCardBase/OverlayCardTarget/OverlayCardTarget.js';
 import '../../widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.js';
@@ -138,11 +139,55 @@ const getDisplayErrorMessage = (errors, t, field, decimals) => {
     return '';
 };
 const SendBalanceForm = ({ initialValues, onSubmit, decimals = 18, validateAddress = () => true, validateAmount = () => true, currentToken, transaction, tokenBalances, setCurrentToken, isLoading, supportsFeeTokenSelection = false, feeTokenOptions, currentFeeToken, setCurrentFeeToken, }) => {
+    var _a;
     const { t } = useTranslation();
     const { showFiat } = useInternalDynamicContext();
     const floatingValueRef = useRef(null);
     const [leftSymbolPadding, setLeftSymbolPadding] = useState(0);
     const { amount } = useSendBalanceState();
+    // Aleo (and any future chain that opts in) populates `transactionModes`
+    // on its IUITransaction. We render a segmented control between the
+    // recipient field and the submit button. The chain may leave
+    // `selectedTransactionMode` undefined to force the user to explicitly
+    // pick — in that case we keep the form interactive (token list,
+    // amount, recipient all stay editable since they don't depend on the
+    // mode), and only the submit button is gated until a selection lands.
+    // `transaction` is supplied by Send-launching call sites (widget) but
+    // legacy / unit-test consumers may render the form without one. Guard
+    // every property access so the form still renders for those cases —
+    // the segmented-mode UI just stays hidden when transaction is absent.
+    const transactionModes = (_a = transaction === null || transaction === void 0 ? void 0 : transaction.transactionModes) !== null && _a !== void 0 ? _a : [];
+    const hasModes = transactionModes.length > 1;
+    const [selectedModeId, setSelectedModeId] = useState(transaction === null || transaction === void 0 ? void 0 : transaction.selectedTransactionMode);
+    const modeReady = !hasModes || Boolean(selectedModeId);
+    // The merge CTA is re-derived after each form change / mode change so
+    // the banner can appear, disappear, or change copy without a manual
+    // refresh. We snapshot it in state so the banner survives re-renders
+    // while the user clicks the action and the underlying merge runs.
+    const [mergeAction, setMergeAction] = useState(() => { var _a; return (_a = transaction === null || transaction === void 0 ? void 0 : transaction.getRecordMergeAction) === null || _a === void 0 ? void 0 : _a.call(transaction); });
+    const [isMerging, setIsMerging] = useState(false);
+    const refreshMergeAction = () => {
+        var _a;
+        setMergeAction((_a = transaction === null || transaction === void 0 ? void 0 : transaction.getRecordMergeAction) === null || _a === void 0 ? void 0 : _a.call(transaction));
+    };
+    const handleModeChange = (modeId) => {
+        var _a;
+        setSelectedModeId(modeId);
+        (_a = transaction === null || transaction === void 0 ? void 0 : transaction.setTransactionMode) === null || _a === void 0 ? void 0 : _a.call(transaction, modeId);
+        refreshMergeAction();
+    };
+    const handleMergeAction = () => __awaiter(void 0, void 0, void 0, function* () {
+        if (!mergeAction || isMerging)
+            return;
+        setIsMerging(true);
+        try {
+            yield mergeAction.onAction();
+        }
+        finally {
+            setIsMerging(false);
+            refreshMergeAction();
+        }
+    });
     useEffect(() => {
         if (floatingValueRef.current) {
             const floatingDivWidth = floatingValueRef.current.offsetWidth;
@@ -184,9 +229,16 @@ const SendBalanceForm = ({ initialValues, onSubmit, decimals = 18, validateAddre
                                     }
                                     setSendBalanceVariable('amount', (currentToken === null || currentToken === void 0 ? void 0 : currentToken.price) ? Number(newValue) : undefined);
                                 }, onBlur: (e) => {
+                                    var _a, _b;
                                     handleBlur(e);
                                     setFieldTouched('amount', true);
                                     validateField('amount');
+                                    // Push the latest amount string to the transaction so any
+                                    // chain-specific derived state (e.g. Aleo's merge CTA) can
+                                    // reflect what the user has entered without waiting for
+                                    // the submit step that would otherwise set transaction.value.
+                                    (_a = transaction === null || transaction === void 0 ? void 0 : transaction.setPendingAmount) === null || _a === void 0 ? void 0 : _a.call(transaction, (_b = e.target.value) !== null && _b !== void 0 ? _b : '');
+                                    refreshMergeAction();
                                 }, placeholder: t('dyn_send_transaction.data.amount.placeholder'), as: Input, error: errors['amount'], copykey: 'dyn_send_transaction.data.amount.label', message: touched['amount'] &&
                                     getDisplayErrorMessage(errors, t, 'amount', decimals), style: {
                                     paddingLeft: `${leftSymbolPadding}px`,
@@ -197,7 +249,15 @@ const SendBalanceForm = ({ initialValues, onSubmit, decimals = 18, validateAddre
                         feeTokenOptions.length > 0 &&
                         setCurrentFeeToken &&
                         currentFeeToken && (jsx(FeeTokenSelector, { feeTokenOptions: feeTokenOptions, currentFeeToken: currentFeeToken, setCurrentFeeToken: setCurrentFeeToken, label: t('dyn_send_transaction.data.fee_token_label') })), jsx(Typography, { variant: 'body_small', weight: 'regular', color: 'secondary', copykey: 'dyn_send_transaction.data.recipient.label', children: "Recipient Address" }), jsx(Field, { className: 'send-balance-form__field', placeholder: t('dyn_send_transaction.data.recipient.placeholder'), label: t('dyn_send_transaction.data.recipient.label'), id: 'recipient', name: 'recipient', as: Input, error: errors['recipient'], copykey: 'dyn_send_transaction.data.recipient.label', message: touched['recipient'] &&
-                            getDisplayErrorMessage(errors, t, 'recipient') }), jsx(TypographyButton, { dataTestId: 'sendBalanceFormSubmitButton', expanded: true, type: 'submit', buttonVariant: 'primary', buttonPadding: 'small', buttonClassName: 'send-balance-form__button', copykey: 'dyn_send_transaction.preview_transaction', children: t('dyn_send_transaction.preview_transaction') })] }));
+                            getDisplayErrorMessage(errors, t, 'recipient'), onBlur: (e) => {
+                            handleBlur(e);
+                            setFieldTouched('recipient', true);
+                            // Re-evaluate the merge CTA once the recipient lands; some
+                            // chains' merge logic may key off both amount and address.
+                            refreshMergeAction();
+                        } }), hasModes && (jsx(TransactionModeSegmentedControl, { options: transactionModes, selectedId: selectedModeId, onChange: handleModeChange, disabled: isMerging })), mergeAction && (jsx("div", { className: 'send-balance-form__inline-action', children: jsx(Alert, { icon: 'error', variant: 'warning', children: jsxs("div", { className: 'send-balance-form__inline-action-content', children: [jsx(Typography, { variant: 'body_small', weight: 'regular', children: mergeAction.message }), jsx(TypographyButton, { dataTestId: 'sendBalanceFormMergeRecordsButton', type: 'button', buttonVariant: 'secondary', buttonPadding: 'small', onClick: handleMergeAction, disabled: isMerging, children: isMerging
+                                            ? t('dyn_send_transaction.merging', 'Merging…')
+                                            : mergeAction.actionLabel })] }) }) })), jsx(TypographyButton, { dataTestId: 'sendBalanceFormSubmitButton', expanded: true, type: 'submit', buttonVariant: 'primary', buttonPadding: 'small', buttonClassName: 'send-balance-form__button', copykey: 'dyn_send_transaction.preview_transaction', disabled: !modeReady || isMerging || Boolean(mergeAction), children: t('dyn_send_transaction.preview_transaction') })] }));
         } }));
 };
 

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

@@ -0,0 +1,40 @@
+'use client'
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var classNames = require('../../../utils/functions/classNames/classNames.cjs');
+var Typography = require('../../Typography/Typography.cjs');
+var icons = require('./icons.cjs');
+
+const renderIcon = (icon) => {
+    if (icon === 'individual')
+        return jsxRuntime.jsx(icons.IndividualIcon, {});
+    if (icon === 'exchange')
+        return jsxRuntime.jsx(icons.ExchangeIcon, {});
+    return null;
+};
+/**
+ * Generic 2+ option segmented control rendered inside the SDK's send form
+ * when an `IUITransaction` exposes `transactionModes`. Aleo is the first
+ * caller (Individual / Exchange = private vs. public transfer); the
+ * component is intentionally chain-agnostic so any future chain can opt
+ * in by populating the same field on its UI transaction.
+ */
+const TransactionModeSegmentedControl = ({ options, selectedId, onChange, disabled = false }) => (jsxRuntime.jsx("div", { className: 'transaction-mode-segmented-control', role: 'radiogroup', "aria-label": 'Transaction mode', children: options.map((option) => {
+        const active = option.id === selectedId;
+        const isDisabled = disabled || option.disabled === true;
+        return (jsxRuntime.jsxs("button", { type: 'button', role: 'radio', "aria-checked": active, "aria-label": option.label, "aria-disabled": isDisabled, title: option.disabled && option.disabledReason
+                ? option.disabledReason
+                : undefined, disabled: isDisabled, className: classNames.classNames('transaction-mode-segmented-control__option', {
+                'transaction-mode-segmented-control__option--active': active,
+                'transaction-mode-segmented-control__option--disabled': isDisabled,
+            }), onClick: () => {
+                if (!isDisabled && !active) {
+                    onChange(option.id);
+                }
+            }, children: [option.icon && (jsxRuntime.jsx("span", { className: 'transaction-mode-segmented-control__option-icon', children: renderIcon(option.icon) })), jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', weight: active ? 'bold' : 'regular', color: active ? 'primary' : 'secondary', children: option.label })] }, option.id));
+    }) }));
+
+exports.TransactionModeSegmentedControl = TransactionModeSegmentedControl;

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

@@ -0,0 +1,16 @@
+import { FC } from 'react';
+import { TransactionModeOption } from '@dynamic-labs/types';
+export type TransactionModeSegmentedControlProps = {
+    options: TransactionModeOption[];
+    selectedId: string | undefined;
+    onChange: (modeId: string) => void;
+    disabled?: boolean;
+};
+/**
+ * Generic 2+ option segmented control rendered inside the SDK's send form
+ * when an `IUITransaction` exposes `transactionModes`. Aleo is the first
+ * caller (Individual / Exchange = private vs. public transfer); the
+ * component is intentionally chain-agnostic so any future chain can opt
+ * in by populating the same field on its UI transaction.
+ */
+export declare const TransactionModeSegmentedControl: FC<TransactionModeSegmentedControlProps>;

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

@@ -0,0 +1,36 @@
+'use client'
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { classNames } from '../../../utils/functions/classNames/classNames.js';
+import { Typography } from '../../Typography/Typography.js';
+import { IndividualIcon, ExchangeIcon } from './icons.js';
+
+const renderIcon = (icon) => {
+    if (icon === 'individual')
+        return jsx(IndividualIcon, {});
+    if (icon === 'exchange')
+        return jsx(ExchangeIcon, {});
+    return null;
+};
+/**
+ * Generic 2+ option segmented control rendered inside the SDK's send form
+ * when an `IUITransaction` exposes `transactionModes`. Aleo is the first
+ * caller (Individual / Exchange = private vs. public transfer); the
+ * component is intentionally chain-agnostic so any future chain can opt
+ * in by populating the same field on its UI transaction.
+ */
+const TransactionModeSegmentedControl = ({ options, selectedId, onChange, disabled = false }) => (jsx("div", { className: 'transaction-mode-segmented-control', role: 'radiogroup', "aria-label": 'Transaction mode', children: options.map((option) => {
+        const active = option.id === selectedId;
+        const isDisabled = disabled || option.disabled === true;
+        return (jsxs("button", { type: 'button', role: 'radio', "aria-checked": active, "aria-label": option.label, "aria-disabled": isDisabled, title: option.disabled && option.disabledReason
+                ? option.disabledReason
+                : undefined, disabled: isDisabled, className: classNames('transaction-mode-segmented-control__option', {
+                'transaction-mode-segmented-control__option--active': active,
+                'transaction-mode-segmented-control__option--disabled': isDisabled,
+            }), onClick: () => {
+                if (!isDisabled && !active) {
+                    onChange(option.id);
+                }
+            }, children: [option.icon && (jsx("span", { className: 'transaction-mode-segmented-control__option-icon', children: renderIcon(option.icon) })), jsx(Typography, { variant: 'body_small', weight: active ? 'bold' : 'regular', color: active ? 'primary' : 'secondary', children: option.label })] }, option.id));
+    }) }));
+
+export { TransactionModeSegmentedControl };

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

@@ -0,0 +1,17 @@
+'use client'
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+
+/**
+ * Inline SVG icons for the TransactionModeSegmentedControl. We deliberately
+ * inline these rather than depending on an icon set so the segmented
+ * control is self-contained and easy to drop into other widgets.
+ */
+const IndividualIcon = () => (jsxRuntime.jsxs("svg", { width: '16', height: '16', viewBox: '0 0 16 16', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', "aria-hidden": 'true', children: [jsxRuntime.jsx("circle", { cx: '8', cy: '5.5', r: '2.5', stroke: 'currentColor', strokeWidth: '1.25' }), jsxRuntime.jsx("path", { d: 'M3 13.5c.5-2.4 2.6-4 5-4s4.5 1.6 5 4', stroke: 'currentColor', strokeWidth: '1.25', strokeLinecap: 'round' })] }));
+const ExchangeIcon = () => (jsxRuntime.jsxs("svg", { width: '16', height: '16', viewBox: '0 0 16 16', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', "aria-hidden": 'true', children: [jsxRuntime.jsx("path", { d: 'M2 6.5h12M3.5 6.5V13M12.5 6.5V13M2 13h12', stroke: 'currentColor', strokeWidth: '1.25', strokeLinecap: 'round' }), jsxRuntime.jsx("path", { d: 'M8 2L13 6.5H3L8 2Z', stroke: 'currentColor', strokeWidth: '1.25', strokeLinejoin: 'round' })] }));
+
+exports.ExchangeIcon = ExchangeIcon;
+exports.IndividualIcon = IndividualIcon;

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+/**
+ * Inline SVG icons for the TransactionModeSegmentedControl. We deliberately
+ * inline these rather than depending on an icon set so the segmented
+ * control is self-contained and easy to drop into other widgets.
+ */
+export declare const IndividualIcon: () => JSX.Element;
+export declare const ExchangeIcon: () => JSX.Element;

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

@@ -0,0 +1,12 @@
+'use client'
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+/**
+ * Inline SVG icons for the TransactionModeSegmentedControl. We deliberately
+ * inline these rather than depending on an icon set so the segmented
+ * control is self-contained and easy to drop into other widgets.
+ */
+const IndividualIcon = () => (jsxs("svg", { width: '16', height: '16', viewBox: '0 0 16 16', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', "aria-hidden": 'true', children: [jsx("circle", { cx: '8', cy: '5.5', r: '2.5', stroke: 'currentColor', strokeWidth: '1.25' }), jsx("path", { d: 'M3 13.5c.5-2.4 2.6-4 5-4s4.5 1.6 5 4', stroke: 'currentColor', strokeWidth: '1.25', strokeLinecap: 'round' })] }));
+const ExchangeIcon = () => (jsxs("svg", { width: '16', height: '16', viewBox: '0 0 16 16', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', "aria-hidden": 'true', children: [jsx("path", { d: 'M2 6.5h12M3.5 6.5V13M12.5 6.5V13M2 13h12', stroke: 'currentColor', strokeWidth: '1.25', strokeLinecap: 'round' }), jsx("path", { d: 'M8 2L13 6.5H3L8 2Z', stroke: 'currentColor', strokeWidth: '1.25', strokeLinejoin: 'round' })] }));
+
+export { ExchangeIcon, IndividualIcon };

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

@@ -0,0 +1 @@
+export { TransactionModeSegmentedControl, type TransactionModeSegmentedControlProps, } from './TransactionModeSegmentedControl';