@dynamic-labs/sdk-react-core 4.38.0 → 4.40.0

package/src/lib/widgets/DynamicWidget/views/ReceiveWalletFunds/utils/useFundingDisplay/useFundingDisplay.cjs

@@ -0,0 +1,34 @@
+'use client'
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var formatValue = require('../formatValue/formatValue.cjs');
+var isFiatToken = require('../isFiatToken/isFiatToken.cjs');
+var isNonZero = require('../isNonZero/isNonZero.cjs');
+
+const useFundingDisplay = ({ primaryData, secondaryData, }) => {
+    var _a;
+    const isSecondaryFiatOrStable = React.useMemo(() => isFiatToken.isFiatOrStablecoin(secondaryData.symbol), [secondaryData.symbol]);
+    const secondaryDisplay = formatValue.formatValue({
+        maxDecimals: isSecondaryFiatOrStable ? 2 : undefined,
+        symbol: secondaryData.symbol,
+        value: secondaryData.amount,
+        withFixedZeros: isSecondaryFiatOrStable,
+    });
+    const grayOutSecondaryDisplay = !isNonZero.isNonZero(secondaryData.amount) ||
+        (isSecondaryFiatOrStable &&
+            parseFloat((_a = secondaryData.amount) !== null && _a !== void 0 ? _a : '0') < 0.0099);
+    const inputSymbolProp = primaryData.symbol === 'USD'
+        ? { leading: '$' }
+        : { trailing: primaryData.symbol };
+    return {
+        grayOutSecondaryDisplay,
+        inputSymbolProp,
+        isSecondaryFiatOrStable,
+        secondaryDisplay,
+    };
+};
+
+exports.useFundingDisplay = useFundingDisplay;

package/src/lib/widgets/DynamicWidget/views/ReceiveWalletFunds/utils/useFundingDisplay/useFundingDisplay.d.ts

@@ -0,0 +1,24 @@
+type AmountData = {
+    amount: string | undefined;
+    symbol: string;
+};
+type PrimaryData = AmountData & {
+    setAmount: (amount: string) => void;
+};
+export type UseFundingDisplayParams = {
+    primaryData: PrimaryData;
+    secondaryData: AmountData;
+};
+export declare const useFundingDisplay: ({ primaryData, secondaryData, }: UseFundingDisplayParams) => {
+    grayOutSecondaryDisplay: boolean;
+    inputSymbolProp: {
+        leading: string;
+        trailing?: undefined;
+    } | {
+        trailing: string;
+        leading?: undefined;
+    };
+    isSecondaryFiatOrStable: boolean;
+    secondaryDisplay: string | undefined;
+};
+export {};

package/src/lib/widgets/DynamicWidget/views/ReceiveWalletFunds/utils/useFundingDisplay/useFundingDisplay.js

@@ -0,0 +1,30 @@
+'use client'
+import { useMemo } from 'react';
+import { formatValue } from '../formatValue/formatValue.js';
+import { isFiatOrStablecoin } from '../isFiatToken/isFiatToken.js';
+import { isNonZero } from '../isNonZero/isNonZero.js';
+
+const useFundingDisplay = ({ primaryData, secondaryData, }) => {
+    var _a;
+    const isSecondaryFiatOrStable = useMemo(() => isFiatOrStablecoin(secondaryData.symbol), [secondaryData.symbol]);
+    const secondaryDisplay = formatValue({
+        maxDecimals: isSecondaryFiatOrStable ? 2 : undefined,
+        symbol: secondaryData.symbol,
+        value: secondaryData.amount,
+        withFixedZeros: isSecondaryFiatOrStable,
+    });
+    const grayOutSecondaryDisplay = !isNonZero(secondaryData.amount) ||
+        (isSecondaryFiatOrStable &&
+            parseFloat((_a = secondaryData.amount) !== null && _a !== void 0 ? _a : '0') < 0.0099);
+    const inputSymbolProp = primaryData.symbol === 'USD'
+        ? { leading: '$' }
+        : { trailing: primaryData.symbol };
+    return {
+        grayOutSecondaryDisplay,
+        inputSymbolProp,
+        isSecondaryFiatOrStable,
+        secondaryDisplay,
+    };
+};
+
+export { useFundingDisplay };

package/src/lib/widgets/DynamicWidget/views/ReceiveWalletFunds/utils/useFundingHandlers/index.d.ts

@@ -0,0 +1,2 @@
+export { useFundingHandlers } from './useFundingHandlers';
+export type { UseFundingHandlersParams } from './useFundingHandlers';

package/src/lib/widgets/DynamicWidget/views/ReceiveWalletFunds/utils/useFundingHandlers/useFundingHandlers.cjs

@@ -0,0 +1,63 @@
+'use client'
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var isFiatToken = require('../isFiatToken/isFiatToken.cjs');
+
+const useFundingHandlers = ({ setTokenSymbol, setShowTokenSelect, setHasUserInteracted, setAmountsByFiatValue, setAmountsByTokenValue, showTokenAsPrimary, setShowTokenAsPrimary, tokenAmount, setTokenAmount, fiatAmount, setFiatAmount, inputEmitter, quickSuggestionsToken, }) => {
+    const handleSelectToken = React.useCallback((token) => {
+        setTokenSymbol(token);
+        setShowTokenSelect(false);
+        setHasUserInteracted(true);
+    }, [setTokenSymbol, setShowTokenSelect, setHasUserInteracted]);
+    const handleQuickSuggestion = React.useCallback((value) => {
+        setHasUserInteracted(true);
+        if (isFiatToken.isFiatToken(quickSuggestionsToken)) {
+            setAmountsByFiatValue(value.toString());
+        }
+        else if (setAmountsByTokenValue) {
+            setAmountsByTokenValue(value.toString());
+        }
+        inputEmitter.emit('focus');
+    }, [
+        setHasUserInteracted,
+        quickSuggestionsToken,
+        setAmountsByFiatValue,
+        setAmountsByTokenValue,
+        inputEmitter,
+    ]);
+    const closeTokenSelect = React.useCallback(() => {
+        setShowTokenSelect(false);
+        inputEmitter.emit('focus');
+    }, [setShowTokenSelect, inputEmitter]);
+    const switchPrimaryAndSecondary = React.useCallback(() => {
+        setHasUserInteracted(true);
+        setShowTokenAsPrimary(!showTokenAsPrimary);
+        if (tokenAmount && isNaN(parseFloat(tokenAmount))) {
+            setTokenAmount('');
+        }
+        if (fiatAmount && isNaN(parseFloat(fiatAmount))) {
+            setFiatAmount('');
+        }
+        inputEmitter.emit('focus');
+    }, [
+        setHasUserInteracted,
+        showTokenAsPrimary,
+        setShowTokenAsPrimary,
+        tokenAmount,
+        setTokenAmount,
+        fiatAmount,
+        setFiatAmount,
+        inputEmitter,
+    ]);
+    return {
+        closeTokenSelect,
+        handleQuickSuggestion,
+        handleSelectToken,
+        switchPrimaryAndSecondary,
+    };
+};
+
+exports.useFundingHandlers = useFundingHandlers;

package/src/lib/widgets/DynamicWidget/views/ReceiveWalletFunds/utils/useFundingHandlers/useFundingHandlers.d.ts

@@ -0,0 +1,24 @@
+import EventEmitter from 'eventemitter3';
+export type UseFundingHandlersParams = {
+    setTokenSymbol: (symbol: string) => void;
+    setShowTokenSelect: (show: boolean) => void;
+    setHasUserInteracted: (interacted: boolean) => void;
+    setAmountsByFiatValue: (amount: string) => void;
+    setAmountsByTokenValue?: (amount: string) => void;
+    showTokenAsPrimary: boolean;
+    setShowTokenAsPrimary: (show: boolean) => void;
+    tokenAmount: string | undefined;
+    setTokenAmount: (amount: string) => void;
+    fiatAmount: string | undefined;
+    setFiatAmount: (amount: string) => void;
+    inputEmitter: EventEmitter<{
+        focus: () => void;
+    }>;
+    quickSuggestionsToken: string;
+};
+export declare const useFundingHandlers: ({ setTokenSymbol, setShowTokenSelect, setHasUserInteracted, setAmountsByFiatValue, setAmountsByTokenValue, showTokenAsPrimary, setShowTokenAsPrimary, tokenAmount, setTokenAmount, fiatAmount, setFiatAmount, inputEmitter, quickSuggestionsToken, }: UseFundingHandlersParams) => {
+    closeTokenSelect: () => void;
+    handleQuickSuggestion: (value: number) => void;
+    handleSelectToken: (token: string) => void;
+    switchPrimaryAndSecondary: () => void;
+};

package/src/lib/widgets/DynamicWidget/views/ReceiveWalletFunds/utils/useFundingHandlers/useFundingHandlers.js

@@ -0,0 +1,59 @@
+'use client'
+import { useCallback } from 'react';
+import { isFiatToken } from '../isFiatToken/isFiatToken.js';
+
+const useFundingHandlers = ({ setTokenSymbol, setShowTokenSelect, setHasUserInteracted, setAmountsByFiatValue, setAmountsByTokenValue, showTokenAsPrimary, setShowTokenAsPrimary, tokenAmount, setTokenAmount, fiatAmount, setFiatAmount, inputEmitter, quickSuggestionsToken, }) => {
+    const handleSelectToken = useCallback((token) => {
+        setTokenSymbol(token);
+        setShowTokenSelect(false);
+        setHasUserInteracted(true);
+    }, [setTokenSymbol, setShowTokenSelect, setHasUserInteracted]);
+    const handleQuickSuggestion = useCallback((value) => {
+        setHasUserInteracted(true);
+        if (isFiatToken(quickSuggestionsToken)) {
+            setAmountsByFiatValue(value.toString());
+        }
+        else if (setAmountsByTokenValue) {
+            setAmountsByTokenValue(value.toString());
+        }
+        inputEmitter.emit('focus');
+    }, [
+        setHasUserInteracted,
+        quickSuggestionsToken,
+        setAmountsByFiatValue,
+        setAmountsByTokenValue,
+        inputEmitter,
+    ]);
+    const closeTokenSelect = useCallback(() => {
+        setShowTokenSelect(false);
+        inputEmitter.emit('focus');
+    }, [setShowTokenSelect, inputEmitter]);
+    const switchPrimaryAndSecondary = useCallback(() => {
+        setHasUserInteracted(true);
+        setShowTokenAsPrimary(!showTokenAsPrimary);
+        if (tokenAmount && isNaN(parseFloat(tokenAmount))) {
+            setTokenAmount('');
+        }
+        if (fiatAmount && isNaN(parseFloat(fiatAmount))) {
+            setFiatAmount('');
+        }
+        inputEmitter.emit('focus');
+    }, [
+        setHasUserInteracted,
+        showTokenAsPrimary,
+        setShowTokenAsPrimary,
+        tokenAmount,
+        setTokenAmount,
+        fiatAmount,
+        setFiatAmount,
+        inputEmitter,
+    ]);
+    return {
+        closeTokenSelect,
+        handleQuickSuggestion,
+        handleSelectToken,
+        switchPrimaryAndSecondary,
+    };
+};
+
+export { useFundingHandlers };

package/src/lib/widgets/DynamicWidget/views/ReceiveWalletFunds/utils/useTokensForFunding/useTokensForFunding.cjs

@@ -97,6 +97,7 @@ require('../../../../components/DynamicWidgetHeader/DynamicWidgetHeader.cjs');
 require('../../../../../../views/TransactionConfirmationView/TransactionConfirmationView.cjs');
 require('../../../../components/PasskeyCard/PasskeyCard.cjs');
 require('../../../../../../../index.cjs');
+require('../../../CryptoComOnramp/CryptoComOnramp.cjs');
 require('../../ReceiveWalletFunds.cjs');
 var useTokenBalances = require('../../../../../../utils/hooks/useTokenBalances/useTokenBalances.cjs');
 require('../../../../../../store/state/multichainBalances.cjs');

package/src/lib/widgets/DynamicWidget/views/ReceiveWalletFunds/utils/useTokensForFunding/useTokensForFunding.js

@@ -93,6 +93,7 @@ import '../../../../components/DynamicWidgetHeader/DynamicWidgetHeader.js';
 import '../../../../../../views/TransactionConfirmationView/TransactionConfirmationView.js';
 import '../../../../components/PasskeyCard/PasskeyCard.js';
 import '../../../../../../../index.js';
+import '../../../CryptoComOnramp/CryptoComOnramp.js';
 import '../../ReceiveWalletFunds.js';
 import { useTokenBalances } from '../../../../../../utils/hooks/useTokenBalances/useTokenBalances.js';
 import '../../../../../../store/state/multichainBalances.js';

package/src/lib/widgets/DynamicWidget/views/SessionManagementView/SessionListItem/SessionListItem.cjs

@@ -83,8 +83,9 @@ require('../../../../../views/TransactionConfirmationView/TransactionConfirmatio
 require('../../../../../components/PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.cjs');
 require('../../../../../context/PasskeyContext/PasskeyContext.cjs');
 require('../../../components/PasskeyCard/PasskeyCard.cjs');
-require('../../../../../context/OnrampContext/OnrampContext.cjs');
 require('../../../../../../index.cjs');
+require('../../CryptoComOnramp/CryptoComOnramp.cjs');
+require('../../../../../context/OnrampContext/OnrampContext.cjs');
 require('../../../helpers/convertExchangeKeyAndProviderEnum.cjs');
 require('qrcode');
 require('../../ReceiveWalletFunds/ReceiveWalletFunds.cjs');

package/src/lib/widgets/DynamicWidget/views/SessionManagementView/SessionListItem/SessionListItem.js

@@ -79,8 +79,9 @@ import '../../../../../views/TransactionConfirmationView/TransactionConfirmation
 import '../../../../../components/PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.js';
 import '../../../../../context/PasskeyContext/PasskeyContext.js';
 import '../../../components/PasskeyCard/PasskeyCard.js';
-import '../../../../../context/OnrampContext/OnrampContext.js';
 import '../../../../../../index.js';
+import '../../CryptoComOnramp/CryptoComOnramp.js';
+import '../../../../../context/OnrampContext/OnrampContext.js';
 import '../../../helpers/convertExchangeKeyAndProviderEnum.js';
 import 'qrcode';
 import '../../ReceiveWalletFunds/ReceiveWalletFunds.js';

package/src/lib/widgets/DynamicWidget/views/SettingsView/SettingsView.cjs

@@ -106,6 +106,7 @@ require('../../../../views/TransactionConfirmationView/TransactionConfirmationVi
 require('../../components/PasskeyCard/PasskeyCard.cjs');
 var EmptyScreen = require('./EmptyScreen/EmptyScreen.cjs');
 require('../../../../../index.cjs');
+require('../CryptoComOnramp/CryptoComOnramp.cjs');
 require('../ReceiveWalletFunds/ReceiveWalletFunds.cjs');
 var useIsMfaEnabled = require('../../../../utils/hooks/useIsMfaEnabled/useIsMfaEnabled.cjs');
 require('../../../../store/state/tokenBalances.cjs');

package/src/lib/widgets/DynamicWidget/views/SettingsView/SettingsView.js

@@ -102,6 +102,7 @@ import '../../../../views/TransactionConfirmationView/TransactionConfirmationVie
 import '../../components/PasskeyCard/PasskeyCard.js';
 import { EmptyScreen } from './EmptyScreen/EmptyScreen.js';
 import '../../../../../index.js';
+import '../CryptoComOnramp/CryptoComOnramp.js';
 import '../ReceiveWalletFunds/ReceiveWalletFunds.js';
 import { useIsMfaEnabled } from '../../../../utils/hooks/useIsMfaEnabled/useIsMfaEnabled.js';
 import '../../../../store/state/tokenBalances.js';

package/src/lib/widgets/DynamicWidget/views/WalletsDelegatedSettingsView/WalletsDelegatedSettingsView.cjs

@@ -14,7 +14,7 @@ var check = require('../../../../shared/assets/check.cjs');
 require('@dynamic-labs/iconic');
 require('../../../../context/ViewContext/ViewContext.cjs');
 require('@dynamic-labs/wallet-connector-core');
-require('../../../../shared/logger.cjs');
+var logger = require('../../../../shared/logger.cjs');
 require('@dynamic-labs/wallet-book');
 require('../../../../utils/constants/colors.cjs');
 require('../../../../utils/constants/values.cjs');
@@ -75,6 +75,7 @@ var WalletIconWithNetwork = require('../../components/WalletIconWithNetwork/Wall
 var DynamicWidgetContext = require('../../context/DynamicWidgetContext.cjs');
 var IconButton = require('../../../../components/IconButton/IconButton.cjs');
 var TypographyButton = require('../../../../components/TypographyButton/TypographyButton.cjs');
+var useDynamicWaas = require('../../../../utils/hooks/useDynamicWaas/useDynamicWaas.cjs');
 var useWalletDelegation = require('../../../../utils/hooks/useWalletDelegation/useWalletDelegation.cjs');
 require('../../../../components/MenuList/Dropdown/Dropdown.cjs');
 require('formik');
@@ -86,8 +87,9 @@ require('../../../../views/TransactionConfirmationView/TransactionConfirmationVi
 require('../../../../components/PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.cjs');
 require('../../../../context/PasskeyContext/PasskeyContext.cjs');
 require('../../components/PasskeyCard/PasskeyCard.cjs');
-require('../../../../context/OnrampContext/OnrampContext.cjs');
 require('../../../../../index.cjs');
+require('../CryptoComOnramp/CryptoComOnramp.cjs');
+require('../../../../context/OnrampContext/OnrampContext.cjs');
 require('../../helpers/convertExchangeKeyAndProviderEnum.cjs');
 require('qrcode');
 require('../ReceiveWalletFunds/ReceiveWalletFunds.cjs');
@@ -107,11 +109,58 @@ require('../../../../components/IsBrowser/IsBrowser.cjs');
 require('../../../../components/Popper/Popper/Popper.cjs');
 require('../../../../components/Popper/PopperContext/PopperContext.cjs');
 
+// Exported helper functions for testing
+const mapWalletsForRevoke = (wallets) => wallets
+    .filter((w) => w.status === 'delegated')
+    .map((wallet) => ({
+    accountAddress: wallet.address,
+    chainName: wallet.chain,
+    status: wallet.status,
+}));
+const mapWalletsForDelegate = (wallets) => wallets.map((wallet) => ({
+    accountAddress: wallet.address,
+    chainName: wallet.chain,
+}));
+// Exported handler factory functions for testing
+const createHandleRevoke = (revokeDelegation) => (walletWithStatus) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+    try {
+        const formattedWallets = mapWalletsForRevoke(walletWithStatus);
+        yield revokeDelegation(formattedWallets);
+        return true;
+    }
+    catch (error) {
+        logger.logger.warn('Error revoking delegation:', error);
+        return false;
+    }
+});
+const createHandleDelegate = (delegateKeyShares) => (walletWithStatus) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+    try {
+        const formattedWallets = mapWalletsForDelegate(walletWithStatus);
+        yield delegateKeyShares(formattedWallets);
+        return true;
+    }
+    catch (error) {
+        logger.logger.warn('Error delegating key shares:', error);
+        return false;
+    }
+});
+const createHandleWalletStatusChange = (handleRevoke, handleDelegate) => (wallet) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+    if (wallet.status === 'delegated') {
+        yield handleRevoke([wallet]);
+    }
+    else {
+        yield handleDelegate([wallet]);
+    }
+});
+const createHandleRevokeAll = (handleRevoke, walletsWithStatus) => () => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+    yield handleRevoke(walletsWithStatus);
+});
 const WalletsDelegatedSettingsView = ({ name }) => {
     const { t } = reactI18next.useTranslation();
     const { setDynamicWidgetView } = DynamicWidgetContext.useWidgetContext();
     const [showSuccessMessage, setShowSuccessMessage] = React.useState(false);
     const { getWalletsDelegatedStatus } = useWalletDelegation.useWalletDelegation();
+    const { revokeDelegation, delegateKeyShares } = useDynamicWaas.useDynamicWaas();
     const walletsWithStatus = getWalletsDelegatedStatus();
     React.useEffect(() => {
         if (!name)
@@ -122,28 +171,38 @@ const WalletsDelegatedSettingsView = ({ name }) => {
         }, 3000);
         return () => clearTimeout(timer);
     }, [name]);
-    const handleRevoke = (walletId) => _tslib.__awaiter(void 0, void 0, void 0, function* () { });
+    const handleRevoke = createHandleRevoke(revokeDelegation);
+    const handleDelegate = createHandleDelegate(delegateKeyShares);
+    const handleWalletStatusChange = createHandleWalletStatusChange(handleRevoke, handleDelegate);
+    const handleRevokeAll = createHandleRevokeAll(handleRevoke, walletsWithStatus);
     return (jsxRuntime.jsxs("div", { className: 'wallets-delegated-settings-view', children: [jsxRuntime.jsxs("div", { className: 'header', children: [jsxRuntime.jsx(IconButton.IconButton, { onClick: () => setDynamicWidgetView('settings'), "data-testid": 'back-button', className: 'back-button', type: 'button', children: jsxRuntime.jsx(arrowLeft.ReactComponent, {}) }), jsxRuntime.jsx(Typography.Typography, { variant: 'title', color: 'primary', className: 'title', copykey: 'wallets_delegated.title', children: t('wallets_delegated.title') })] }), walletsWithStatus.length > 0 && (jsxRuntime.jsx("ul", { className: 'delegated-wallets-list', children: walletsWithStatus.map((wallet) => {
                     var _a, _b;
                     return (jsxRuntime.jsxs("li", { className: 'delegated-wallets-item', children: [jsxRuntime.jsx("div", { className: 'wallet-icon', children: jsxRuntime.jsx(WalletIconWithNetwork.WalletIconWithNetwork, { walletKey: wallet.key, Icon: null, iconUrl: (_b = (_a = wallet.connector) === null || _a === void 0 ? void 0 : _a.metadata) === null || _b === void 0 ? void 0 : _b.icon, chainName: wallet.chain, iconSize: 24, showNetwork: true }) }), jsxRuntime.jsxs("div", { className: 'wallet-info', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'primary', weight: 'medium', children: shortenWalletAddress.shortenWalletAddress(wallet.address) }), jsxRuntime.jsx("div", { className: wallet.status === 'delegated'
                                             ? 'status-badge'
                                             : 'status-badge status-badge--disconnected', children: jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', color: wallet.status === 'delegated' ? 'primary' : 'secondary', children: wallet.status === 'delegated'
                                                 ? t('connected', 'Connected')
-                                                : t('disconnected', 'Disconnected') }) })] }), jsxRuntime.jsx(TypographyButton.TypographyButton, { onClick: () => handleRevoke(wallet.id), buttonPadding: 'small', className: 'revoke-button', typographyProps: {
+                                                : t('disconnected', 'Disconnected') }) })] }), jsxRuntime.jsx(TypographyButton.TypographyButton, { onClick: () => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+                                    yield handleWalletStatusChange(wallet);
+                                }), buttonPadding: 'small', className: 'revoke-button', typographyProps: {
                                     color: 'primary',
                                     variant: 'body_small',
                                     weight: 'medium',
                                 }, children: wallet.status === 'delegated'
                                     ? t('revoke', 'Revoke')
                                     : t('delegate', 'Delegate') })] }, wallet.id));
-                }) })), walletsWithStatus.filter((w) => w.status === 'delegated').length > 0 && (jsxRuntime.jsx("div", { className: 'revoke-all-section', children: jsxRuntime.jsx(TypographyButton.TypographyButton, { onClick: () => {
-                        // Handle revoke all functionality
-                        handleRevoke();
-                    }, buttonVariant: 'tertiary', buttonPadding: 'none', className: 'revoke-all-button', typographyProps: {
+                }) })), walletsWithStatus.filter((w) => w.status === 'delegated').length > 0 && (jsxRuntime.jsx("div", { className: 'revoke-all-section', children: jsxRuntime.jsx(TypographyButton.TypographyButton, { onClick: () => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+                        yield handleRevokeAll();
+                    }), buttonVariant: 'tertiary', buttonPadding: 'none', className: 'revoke-all-button', typographyProps: {
                         variant: 'body_normal',
                         weight: 'medium',
                     }, children: t('revoke_all_wallet_access', 'Revoke all wallet access') }) })), showSuccessMessage && (jsxRuntime.jsxs("div", { className: 'success-message', children: [jsxRuntime.jsx(check.ReactComponent, {}), jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', color: 'primary', copykey: 'global_wallet.wallets_delegated.success', children: t('global_wallet.wallets_delegated.success', { name }) })] }))] }));
 };
 
 exports.WalletsDelegatedSettingsView = WalletsDelegatedSettingsView;
+exports.createHandleDelegate = createHandleDelegate;
+exports.createHandleRevoke = createHandleRevoke;
+exports.createHandleRevokeAll = createHandleRevokeAll;
+exports.createHandleWalletStatusChange = createHandleWalletStatusChange;
 exports["default"] = WalletsDelegatedSettingsView;
+exports.mapWalletsForDelegate = mapWalletsForDelegate;
+exports.mapWalletsForRevoke = mapWalletsForRevoke;

package/src/lib/widgets/DynamicWidget/views/WalletsDelegatedSettingsView/WalletsDelegatedSettingsView.d.ts

@@ -1,4 +1,6 @@
 import { FC } from 'react';
+import { WalletWithStatus } from '../../../../utils/hooks/useWalletDelegation/useWalletDelegation';
+import { ChainEnum } from '../../../../..';
 export interface WalletsDelegatedSettings {
     name: string;
     url: string;
@@ -8,5 +10,18 @@ export interface WalletsDelegatedSettings {
 export type WalletsDelegatedSettingsViewProps = {
     name?: string;
 };
+export declare const mapWalletsForRevoke: (wallets: WalletWithStatus[]) => {
+    accountAddress: string;
+    chainName: ChainEnum;
+    status: "delegated";
+}[];
+export declare const mapWalletsForDelegate: (wallets: WalletWithStatus[]) => {
+    accountAddress: string;
+    chainName: ChainEnum;
+}[];
+export declare const createHandleRevoke: (revokeDelegation: (wallets: any[]) => Promise<void>) => (walletWithStatus: WalletWithStatus[]) => Promise<boolean>;
+export declare const createHandleDelegate: (delegateKeyShares: (wallets: any[]) => Promise<void>) => (walletWithStatus: WalletWithStatus[]) => Promise<boolean>;
+export declare const createHandleWalletStatusChange: (handleRevoke: (wallets: WalletWithStatus[]) => Promise<boolean>, handleDelegate: (wallets: WalletWithStatus[]) => Promise<boolean>) => (wallet: WalletWithStatus) => Promise<void>;
+export declare const createHandleRevokeAll: (handleRevoke: (wallets: WalletWithStatus[]) => Promise<boolean>, walletsWithStatus: WalletWithStatus[]) => () => Promise<void>;
 export declare const WalletsDelegatedSettingsView: FC<WalletsDelegatedSettingsViewProps>;
 export default WalletsDelegatedSettingsView;

package/src/lib/widgets/DynamicWidget/views/WalletsDelegatedSettingsView/WalletsDelegatedSettingsView.js

@@ -10,7 +10,7 @@ import { ReactComponent as SvgCheck } from '../../../../shared/assets/check.js';
 import '@dynamic-labs/iconic';
 import '../../../../context/ViewContext/ViewContext.js';
 import '@dynamic-labs/wallet-connector-core';
-import '../../../../shared/logger.js';
+import { logger } from '../../../../shared/logger.js';
 import '@dynamic-labs/wallet-book';
 import '../../../../utils/constants/colors.js';
 import '../../../../utils/constants/values.js';
@@ -71,6 +71,7 @@ import { WalletIconWithNetwork } from '../../components/WalletIconWithNetwork/Wa
 import { useWidgetContext } from '../../context/DynamicWidgetContext.js';
 import { IconButton } from '../../../../components/IconButton/IconButton.js';
 import { TypographyButton } from '../../../../components/TypographyButton/TypographyButton.js';
+import { useDynamicWaas } from '../../../../utils/hooks/useDynamicWaas/useDynamicWaas.js';
 import { useWalletDelegation } from '../../../../utils/hooks/useWalletDelegation/useWalletDelegation.js';
 import '../../../../components/MenuList/Dropdown/Dropdown.js';
 import 'formik';
@@ -82,8 +83,9 @@ import '../../../../views/TransactionConfirmationView/TransactionConfirmationVie
 import '../../../../components/PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.js';
 import '../../../../context/PasskeyContext/PasskeyContext.js';
 import '../../components/PasskeyCard/PasskeyCard.js';
-import '../../../../context/OnrampContext/OnrampContext.js';
 import '../../../../../index.js';
+import '../CryptoComOnramp/CryptoComOnramp.js';
+import '../../../../context/OnrampContext/OnrampContext.js';
 import '../../helpers/convertExchangeKeyAndProviderEnum.js';
 import 'qrcode';
 import '../ReceiveWalletFunds/ReceiveWalletFunds.js';
@@ -103,11 +105,58 @@ import '../../../../components/IsBrowser/IsBrowser.js';
 import '../../../../components/Popper/Popper/Popper.js';
 import '../../../../components/Popper/PopperContext/PopperContext.js';
 
+// Exported helper functions for testing
+const mapWalletsForRevoke = (wallets) => wallets
+    .filter((w) => w.status === 'delegated')
+    .map((wallet) => ({
+    accountAddress: wallet.address,
+    chainName: wallet.chain,
+    status: wallet.status,
+}));
+const mapWalletsForDelegate = (wallets) => wallets.map((wallet) => ({
+    accountAddress: wallet.address,
+    chainName: wallet.chain,
+}));
+// Exported handler factory functions for testing
+const createHandleRevoke = (revokeDelegation) => (walletWithStatus) => __awaiter(void 0, void 0, void 0, function* () {
+    try {
+        const formattedWallets = mapWalletsForRevoke(walletWithStatus);
+        yield revokeDelegation(formattedWallets);
+        return true;
+    }
+    catch (error) {
+        logger.warn('Error revoking delegation:', error);
+        return false;
+    }
+});
+const createHandleDelegate = (delegateKeyShares) => (walletWithStatus) => __awaiter(void 0, void 0, void 0, function* () {
+    try {
+        const formattedWallets = mapWalletsForDelegate(walletWithStatus);
+        yield delegateKeyShares(formattedWallets);
+        return true;
+    }
+    catch (error) {
+        logger.warn('Error delegating key shares:', error);
+        return false;
+    }
+});
+const createHandleWalletStatusChange = (handleRevoke, handleDelegate) => (wallet) => __awaiter(void 0, void 0, void 0, function* () {
+    if (wallet.status === 'delegated') {
+        yield handleRevoke([wallet]);
+    }
+    else {
+        yield handleDelegate([wallet]);
+    }
+});
+const createHandleRevokeAll = (handleRevoke, walletsWithStatus) => () => __awaiter(void 0, void 0, void 0, function* () {
+    yield handleRevoke(walletsWithStatus);
+});
 const WalletsDelegatedSettingsView = ({ name }) => {
     const { t } = useTranslation();
     const { setDynamicWidgetView } = useWidgetContext();
     const [showSuccessMessage, setShowSuccessMessage] = useState(false);
     const { getWalletsDelegatedStatus } = useWalletDelegation();
+    const { revokeDelegation, delegateKeyShares } = useDynamicWaas();
     const walletsWithStatus = getWalletsDelegatedStatus();
     useEffect(() => {
         if (!name)
@@ -118,27 +167,31 @@ const WalletsDelegatedSettingsView = ({ name }) => {
         }, 3000);
         return () => clearTimeout(timer);
     }, [name]);
-    const handleRevoke = (walletId) => __awaiter(void 0, void 0, void 0, function* () { });
+    const handleRevoke = createHandleRevoke(revokeDelegation);
+    const handleDelegate = createHandleDelegate(delegateKeyShares);
+    const handleWalletStatusChange = createHandleWalletStatusChange(handleRevoke, handleDelegate);
+    const handleRevokeAll = createHandleRevokeAll(handleRevoke, walletsWithStatus);
     return (jsxs("div", { className: 'wallets-delegated-settings-view', children: [jsxs("div", { className: 'header', children: [jsx(IconButton, { onClick: () => setDynamicWidgetView('settings'), "data-testid": 'back-button', className: 'back-button', type: 'button', children: jsx(SvgArrowLeft, {}) }), jsx(Typography, { variant: 'title', color: 'primary', className: 'title', copykey: 'wallets_delegated.title', children: t('wallets_delegated.title') })] }), walletsWithStatus.length > 0 && (jsx("ul", { className: 'delegated-wallets-list', children: walletsWithStatus.map((wallet) => {
                     var _a, _b;
                     return (jsxs("li", { className: 'delegated-wallets-item', children: [jsx("div", { className: 'wallet-icon', children: jsx(WalletIconWithNetwork, { walletKey: wallet.key, Icon: null, iconUrl: (_b = (_a = wallet.connector) === null || _a === void 0 ? void 0 : _a.metadata) === null || _b === void 0 ? void 0 : _b.icon, chainName: wallet.chain, iconSize: 24, showNetwork: true }) }), jsxs("div", { className: 'wallet-info', children: [jsx(Typography, { variant: 'body_normal', color: 'primary', weight: 'medium', children: shortenWalletAddress(wallet.address) }), jsx("div", { className: wallet.status === 'delegated'
                                             ? 'status-badge'
                                             : 'status-badge status-badge--disconnected', children: jsx(Typography, { variant: 'body_small', color: wallet.status === 'delegated' ? 'primary' : 'secondary', children: wallet.status === 'delegated'
                                                 ? t('connected', 'Connected')
-                                                : t('disconnected', 'Disconnected') }) })] }), jsx(TypographyButton, { onClick: () => handleRevoke(wallet.id), buttonPadding: 'small', className: 'revoke-button', typographyProps: {
+                                                : t('disconnected', 'Disconnected') }) })] }), jsx(TypographyButton, { onClick: () => __awaiter(void 0, void 0, void 0, function* () {
+                                    yield handleWalletStatusChange(wallet);
+                                }), buttonPadding: 'small', className: 'revoke-button', typographyProps: {
                                     color: 'primary',
                                     variant: 'body_small',
                                     weight: 'medium',
                                 }, children: wallet.status === 'delegated'
                                     ? t('revoke', 'Revoke')
                                     : t('delegate', 'Delegate') })] }, wallet.id));
-                }) })), walletsWithStatus.filter((w) => w.status === 'delegated').length > 0 && (jsx("div", { className: 'revoke-all-section', children: jsx(TypographyButton, { onClick: () => {
-                        // Handle revoke all functionality
-                        handleRevoke();
-                    }, buttonVariant: 'tertiary', buttonPadding: 'none', className: 'revoke-all-button', typographyProps: {
+                }) })), walletsWithStatus.filter((w) => w.status === 'delegated').length > 0 && (jsx("div", { className: 'revoke-all-section', children: jsx(TypographyButton, { onClick: () => __awaiter(void 0, void 0, void 0, function* () {
+                        yield handleRevokeAll();
+                    }), buttonVariant: 'tertiary', buttonPadding: 'none', className: 'revoke-all-button', typographyProps: {
                         variant: 'body_normal',
                         weight: 'medium',
                     }, children: t('revoke_all_wallet_access', 'Revoke all wallet access') }) })), showSuccessMessage && (jsxs("div", { className: 'success-message', children: [jsx(SvgCheck, {}), jsx(Typography, { variant: 'body_small', color: 'primary', copykey: 'global_wallet.wallets_delegated.success', children: t('global_wallet.wallets_delegated.success', { name }) })] }))] }));
 };
 
-export { WalletsDelegatedSettingsView, WalletsDelegatedSettingsView as default };
+export { WalletsDelegatedSettingsView, createHandleDelegate, createHandleRevoke, createHandleRevokeAll, createHandleWalletStatusChange, WalletsDelegatedSettingsView as default, mapWalletsForDelegate, mapWalletsForRevoke };

package/src/lib/widgets/DynamicWidget/views/WalletsView/WalletsView.cjs

@@ -84,8 +84,9 @@ require('../../../../views/TransactionConfirmationView/TransactionConfirmationVi
 require('../../../../components/PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.cjs');
 require('../../../../context/PasskeyContext/PasskeyContext.cjs');
 require('../../components/PasskeyCard/PasskeyCard.cjs');
-require('../../../../context/OnrampContext/OnrampContext.cjs');
 require('../../../../../index.cjs');
+require('../CryptoComOnramp/CryptoComOnramp.cjs');
+require('../../../../context/OnrampContext/OnrampContext.cjs');
 require('../../helpers/convertExchangeKeyAndProviderEnum.cjs');
 require('qrcode');
 require('../ReceiveWalletFunds/ReceiveWalletFunds.cjs');

package/src/lib/widgets/DynamicWidget/views/WalletsView/WalletsView.js

@@ -80,8 +80,9 @@ import '../../../../views/TransactionConfirmationView/TransactionConfirmationVie
 import '../../../../components/PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.js';
 import '../../../../context/PasskeyContext/PasskeyContext.js';
 import '../../components/PasskeyCard/PasskeyCard.js';
-import '../../../../context/OnrampContext/OnrampContext.js';
 import '../../../../../index.js';
+import '../CryptoComOnramp/CryptoComOnramp.js';
+import '../../../../context/OnrampContext/OnrampContext.js';
 import '../../helpers/convertExchangeKeyAndProviderEnum.js';
 import 'qrcode';
 import '../ReceiveWalletFunds/ReceiveWalletFunds.js';

package/src/lib/widgets/DynamicWidget/views/index.d.ts

@@ -7,3 +7,4 @@ export { SettingsView } from './SettingsView';
 export { AccountAndSecuritySettingsView } from './AccountAndSecuritySettingsView';
 export { SessionManagementView } from './SessionManagementView';
 export { WalletsDelegatedSettingsView } from './WalletsDelegatedSettingsView';
+export { CryptoComOnramp } from './CryptoComOnramp';