@dynamic-labs/sdk-react-core 4.88.6 → 4.90.0

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

@@ -0,0 +1,87 @@
+'use client'
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var reactI18next = require('react-i18next');
+var walletBook = require('@dynamic-labs/wallet-book');
+var Icon = require('../../../../components/Icon/Icon.cjs');
+var ModalHeader = require('../../../../components/ModalHeader/ModalHeader.cjs');
+var Typography = require('../../../../components/Typography/Typography.cjs');
+var TypographyButton = require('../../../../components/TypographyButton/TypographyButton.cjs');
+var chevronDown = require('../../../../shared/assets/chevron-down.cjs');
+require('@dynamic-labs/iconic');
+require('../../../../context/ViewContext/ViewContext.cjs');
+var shortenWalletAddress = require('../../../../shared/utils/functions/shortenWalletAddress/shortenWalletAddress.cjs');
+require('../../../../context/DynamicContext/useDynamicContext/useDynamicContext.cjs');
+var useInternalDynamicContext = require('../../../../context/DynamicContext/useDynamicContext/useInternalDynamicContext/useInternalDynamicContext.cjs');
+var DynamicWidgetContext = require('../../context/DynamicWidgetContext.cjs');
+var createFundingButtons = require('../ReceiveWalletFunds/utils/createFundingButtons/createFundingButtons.cjs');
+var CryptoTokenSelectScreen = require('./CryptoTokenSelectScreen/CryptoTokenSelectScreen.cjs');
+var isTrustedImageUrl = require('./isTrustedImageUrl.cjs');
+var useMoonPayOnramp = require('./useMoonPayOnramp.cjs');
+
+const MoonPayOnramp = ({ onBack, hideBackButton = false, onPaymentCreated, token: initialToken, merchantName, walletAddress: walletAddressOverride, }) => {
+    var _a;
+    const { t } = reactI18next.useTranslation();
+    const { setShowAuthFlow, setShowDynamicUserProfile } = useInternalDynamicContext.useInternalDynamicContext();
+    const { setDynamicWidgetView } = DynamicWidgetContext.useWidgetContext();
+    const { primaryWallet, availableTokens, tokensLoading, tokensError, selectedToken, setSelectedToken, isOpening, error, effectiveWalletAddress, openMoonPay, } = useMoonPayOnramp.useMoonPayOnramp({
+        initialToken,
+        merchantName,
+        onPaymentCreated,
+        walletAddressOverride,
+    });
+    const [showTokenSelect, setShowTokenSelect] = React.useState(false);
+    // createFundingButtons calls onBack directly when provided, so this default
+    // only runs when no onBack prop was passed.
+    const handleBack = React.useCallback(() => {
+        setDynamicWidgetView('choose-onramp-provider');
+    }, [setDynamicWidgetView]);
+    const { backButton, closeButton } = createFundingButtons.createFundingButtons({
+        defaultBackAction: handleBack,
+        hideBackButton,
+        onBack,
+        setShowAuthFlow,
+        setShowDynamicUserProfile,
+    });
+    if (!primaryWallet)
+        return null;
+    if (showTokenSelect) {
+        return (jsxRuntime.jsx(CryptoTokenSelectScreen.CryptoTokenSelectScreen, { tokens: availableTokens, currentToken: selectedToken, onClose: () => setShowTokenSelect(false), onSelectToken: (tokenCode) => {
+                setSelectedToken(tokenCode);
+                setShowTokenSelect(false);
+            } }));
+    }
+    const selectedTokenData = availableTokens.find((tok) => tok.code === selectedToken);
+    const selectedTokenName = (_a = selectedTokenData === null || selectedTokenData === void 0 ? void 0 : selectedTokenData.name) !== null && _a !== void 0 ? _a : selectedToken;
+    const selectedTokenIcon = selectedTokenData === null || selectedTokenData === void 0 ? void 0 : selectedTokenData.icon;
+    const tokenSelectorContent = (() => {
+        if (tokensLoading) {
+            return (jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', weight: 'medium', children: t('dyn_moonpay_onramp.loading_tokens', 'Loading tokens...') }));
+        }
+        if (tokensError) {
+            return (jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', color: 'error-1', weight: 'medium', children: t('dyn_moonpay_onramp.tokens_error', 'Failed to load tokens') }));
+        }
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [isTrustedImageUrl.isTrustedImageUrl(selectedTokenIcon) && (jsxRuntime.jsx("img", { src: selectedTokenIcon, alt: selectedTokenName, className: 'fund-from-wallet__content__currency-selector__dropdown__content__icon', "aria-hidden": 'true' })), jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', weight: 'medium', children: selectedTokenName })] }));
+    })();
+    return (jsxRuntime.jsxs("div", { className: 'fund-from-wallet fund-from-wallet--moonpay', children: [jsxRuntime.jsx(ModalHeader.ModalHeader, { leading: backButton, trailing: closeButton, children: jsxRuntime.jsx(Typography.Typography, { variant: 'title', copykey: 'dyn_moonpay_onramp.title', children: t('dyn_moonpay_onramp.title', 'Buy Crypto') }) }), jsxRuntime.jsxs("div", { className: 'fund-from-wallet__content', children: [error && (jsxRuntime.jsx(Typography.Typography, { color: 'error-1', variant: 'body_normal', weight: 'medium', className: 'fund-from-wallet__content__error', children: error })), jsxRuntime.jsxs("div", { className: 'fund-from-wallet__content__currency-selector', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', weight: 'medium', color: 'secondary', copykey: 'dyn_moonpay_onramp.token_label', children: t('dyn_moonpay_onramp.token_label', 'Select Token') }), jsxRuntime.jsxs("div", { className: 'fund-from-wallet__content__currency-selector__dropdown', onClick: () => !tokensLoading && !tokensError && setShowTokenSelect(true), role: 'button', tabIndex: 0, onKeyDown: (e) => {
+                                    if (e.key === 'Enter' || e.key === ' ') {
+                                        e.preventDefault();
+                                        if (!tokensLoading && !tokensError) {
+                                            setShowTokenSelect(true);
+                                        }
+                                    }
+                                }, "aria-label": t('dyn_moonpay_onramp.select_token', 'Select Token'), "aria-expanded": showTokenSelect, "aria-haspopup": 'dialog', "data-testid": 'token-select-dropdown', children: [jsxRuntime.jsx("div", { className: 'fund-from-wallet__content__currency-selector__dropdown__content', children: tokenSelectorContent }), jsxRuntime.jsx("div", { className: 'fund-from-wallet__content__currency-selector__dropdown__icon', children: jsxRuntime.jsx(Icon.Icon, { color: 'text-tertiary', size: 'small', children: jsxRuntime.jsx(chevronDown.ReactComponent, {}) }) })] })] }), jsxRuntime.jsx("div", { className: 'fund-from-wallet__content__wallet-card', children: jsxRuntime.jsxs("div", { className: 'fund-from-wallet__content__wallet-card__wallet-details', children: [jsxRuntime.jsx(walletBook.WalletIcon, { icon: primaryWallet.connector.metadata.icon, walletKey: primaryWallet.connector.key, className: 'fund-from-wallet__content__wallet-card__wallet-details__icon' }), jsxRuntime.jsxs("div", { className: 'fund-from-wallet__content__wallet-card__wallet-details__rows', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', weight: 'medium', copykey: 'dyn_moonpay_onramp.wallet_detail_to', children: t('dyn_moonpay_onramp.wallet_detail_to', 'Tokens will be sent to') }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', color: 'secondary', weight: 'medium', children: shortenWalletAddress.shortenWalletAddress(effectiveWalletAddress) })] })] }) })] }), jsxRuntime.jsx(TypographyButton.TypographyButton, { dataTestId: 'confirm-button', buttonVariant: 'brand-primary', buttonPadding: 'large', typographyProps: { color: 'white' }, className: 'fund-from-wallet__confirm-button', disabled: isOpening ||
+                    tokensLoading ||
+                    tokensError ||
+                    !selectedToken ||
+                    availableTokens.length === 0 ||
+                    !effectiveWalletAddress, onClick: openMoonPay, children: isOpening
+                    ? t('dyn_moonpay_onramp.opening', 'Opening MoonPay...')
+                    : t('dyn_moonpay_onramp.continue', 'Continue to MoonPay') })] }));
+};
+
+exports.MoonPayOnramp = MoonPayOnramp;

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

@@ -0,0 +1,19 @@
+import { FC } from 'react';
+export type MoonPayOnrampProps = {
+    onBack?: () => void;
+    hideBackButton?: boolean;
+    /**
+     * Called with the signed MoonPay URL instead of opening a popup.
+     * Use this for headless / custom integration.
+     */
+    onPaymentCreated?: (paymentUrl: string) => void;
+    /** Pre-select a token and skip the token selector (e.g. 'eth', 'usdc_sol'). */
+    token?: string;
+    merchantName?: string;
+    /**
+     * Override the wallet address used in the MoonPay widget.
+     * Defaults to the primary wallet address when not provided.
+     */
+    walletAddress?: string;
+};
+export declare const MoonPayOnramp: FC<MoonPayOnrampProps>;

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

@@ -0,0 +1,83 @@
+'use client'
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useState, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { WalletIcon } from '@dynamic-labs/wallet-book';
+import { Icon } from '../../../../components/Icon/Icon.js';
+import { ModalHeader } from '../../../../components/ModalHeader/ModalHeader.js';
+import { Typography } from '../../../../components/Typography/Typography.js';
+import { TypographyButton } from '../../../../components/TypographyButton/TypographyButton.js';
+import { ReactComponent as SvgChevronDown } from '../../../../shared/assets/chevron-down.js';
+import '@dynamic-labs/iconic';
+import '../../../../context/ViewContext/ViewContext.js';
+import { shortenWalletAddress } from '../../../../shared/utils/functions/shortenWalletAddress/shortenWalletAddress.js';
+import '../../../../context/DynamicContext/useDynamicContext/useDynamicContext.js';
+import { useInternalDynamicContext } from '../../../../context/DynamicContext/useDynamicContext/useInternalDynamicContext/useInternalDynamicContext.js';
+import { useWidgetContext } from '../../context/DynamicWidgetContext.js';
+import { createFundingButtons } from '../ReceiveWalletFunds/utils/createFundingButtons/createFundingButtons.js';
+import { CryptoTokenSelectScreen } from './CryptoTokenSelectScreen/CryptoTokenSelectScreen.js';
+import { isTrustedImageUrl } from './isTrustedImageUrl.js';
+import { useMoonPayOnramp } from './useMoonPayOnramp.js';
+
+const MoonPayOnramp = ({ onBack, hideBackButton = false, onPaymentCreated, token: initialToken, merchantName, walletAddress: walletAddressOverride, }) => {
+    var _a;
+    const { t } = useTranslation();
+    const { setShowAuthFlow, setShowDynamicUserProfile } = useInternalDynamicContext();
+    const { setDynamicWidgetView } = useWidgetContext();
+    const { primaryWallet, availableTokens, tokensLoading, tokensError, selectedToken, setSelectedToken, isOpening, error, effectiveWalletAddress, openMoonPay, } = useMoonPayOnramp({
+        initialToken,
+        merchantName,
+        onPaymentCreated,
+        walletAddressOverride,
+    });
+    const [showTokenSelect, setShowTokenSelect] = useState(false);
+    // createFundingButtons calls onBack directly when provided, so this default
+    // only runs when no onBack prop was passed.
+    const handleBack = useCallback(() => {
+        setDynamicWidgetView('choose-onramp-provider');
+    }, [setDynamicWidgetView]);
+    const { backButton, closeButton } = createFundingButtons({
+        defaultBackAction: handleBack,
+        hideBackButton,
+        onBack,
+        setShowAuthFlow,
+        setShowDynamicUserProfile,
+    });
+    if (!primaryWallet)
+        return null;
+    if (showTokenSelect) {
+        return (jsx(CryptoTokenSelectScreen, { tokens: availableTokens, currentToken: selectedToken, onClose: () => setShowTokenSelect(false), onSelectToken: (tokenCode) => {
+                setSelectedToken(tokenCode);
+                setShowTokenSelect(false);
+            } }));
+    }
+    const selectedTokenData = availableTokens.find((tok) => tok.code === selectedToken);
+    const selectedTokenName = (_a = selectedTokenData === null || selectedTokenData === void 0 ? void 0 : selectedTokenData.name) !== null && _a !== void 0 ? _a : selectedToken;
+    const selectedTokenIcon = selectedTokenData === null || selectedTokenData === void 0 ? void 0 : selectedTokenData.icon;
+    const tokenSelectorContent = (() => {
+        if (tokensLoading) {
+            return (jsx(Typography, { variant: 'body_small', weight: 'medium', children: t('dyn_moonpay_onramp.loading_tokens', 'Loading tokens...') }));
+        }
+        if (tokensError) {
+            return (jsx(Typography, { variant: 'body_small', color: 'error-1', weight: 'medium', children: t('dyn_moonpay_onramp.tokens_error', 'Failed to load tokens') }));
+        }
+        return (jsxs(Fragment, { children: [isTrustedImageUrl(selectedTokenIcon) && (jsx("img", { src: selectedTokenIcon, alt: selectedTokenName, className: 'fund-from-wallet__content__currency-selector__dropdown__content__icon', "aria-hidden": 'true' })), jsx(Typography, { variant: 'body_small', weight: 'medium', children: selectedTokenName })] }));
+    })();
+    return (jsxs("div", { className: 'fund-from-wallet fund-from-wallet--moonpay', children: [jsx(ModalHeader, { leading: backButton, trailing: closeButton, children: jsx(Typography, { variant: 'title', copykey: 'dyn_moonpay_onramp.title', children: t('dyn_moonpay_onramp.title', 'Buy Crypto') }) }), jsxs("div", { className: 'fund-from-wallet__content', children: [error && (jsx(Typography, { color: 'error-1', variant: 'body_normal', weight: 'medium', className: 'fund-from-wallet__content__error', children: error })), jsxs("div", { className: 'fund-from-wallet__content__currency-selector', children: [jsx(Typography, { variant: 'body_small', weight: 'medium', color: 'secondary', copykey: 'dyn_moonpay_onramp.token_label', children: t('dyn_moonpay_onramp.token_label', 'Select Token') }), jsxs("div", { className: 'fund-from-wallet__content__currency-selector__dropdown', onClick: () => !tokensLoading && !tokensError && setShowTokenSelect(true), role: 'button', tabIndex: 0, onKeyDown: (e) => {
+                                    if (e.key === 'Enter' || e.key === ' ') {
+                                        e.preventDefault();
+                                        if (!tokensLoading && !tokensError) {
+                                            setShowTokenSelect(true);
+                                        }
+                                    }
+                                }, "aria-label": t('dyn_moonpay_onramp.select_token', 'Select Token'), "aria-expanded": showTokenSelect, "aria-haspopup": 'dialog', "data-testid": 'token-select-dropdown', children: [jsx("div", { className: 'fund-from-wallet__content__currency-selector__dropdown__content', children: tokenSelectorContent }), jsx("div", { className: 'fund-from-wallet__content__currency-selector__dropdown__icon', children: jsx(Icon, { color: 'text-tertiary', size: 'small', children: jsx(SvgChevronDown, {}) }) })] })] }), jsx("div", { className: 'fund-from-wallet__content__wallet-card', children: jsxs("div", { className: 'fund-from-wallet__content__wallet-card__wallet-details', children: [jsx(WalletIcon, { icon: primaryWallet.connector.metadata.icon, walletKey: primaryWallet.connector.key, className: 'fund-from-wallet__content__wallet-card__wallet-details__icon' }), jsxs("div", { className: 'fund-from-wallet__content__wallet-card__wallet-details__rows', children: [jsx(Typography, { variant: 'body_small', weight: 'medium', copykey: 'dyn_moonpay_onramp.wallet_detail_to', children: t('dyn_moonpay_onramp.wallet_detail_to', 'Tokens will be sent to') }), jsx(Typography, { variant: 'body_small', color: 'secondary', weight: 'medium', children: shortenWalletAddress(effectiveWalletAddress) })] })] }) })] }), jsx(TypographyButton, { dataTestId: 'confirm-button', buttonVariant: 'brand-primary', buttonPadding: 'large', typographyProps: { color: 'white' }, className: 'fund-from-wallet__confirm-button', disabled: isOpening ||
+                    tokensLoading ||
+                    tokensError ||
+                    !selectedToken ||
+                    availableTokens.length === 0 ||
+                    !effectiveWalletAddress, onClick: openMoonPay, children: isOpening
+                    ? t('dyn_moonpay_onramp.opening', 'Opening MoonPay...')
+                    : t('dyn_moonpay_onramp.continue', 'Continue to MoonPay') })] }));
+};
+
+export { MoonPayOnramp };

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

@@ -0,0 +1 @@
+export { MoonPayOnramp, type MoonPayOnrampProps } from './MoonPayOnramp';

package/src/lib/widgets/DynamicWidget/views/MoonPayOnramp/isTrustedImageUrl.cjs

@@ -0,0 +1,24 @@
+'use client'
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+/**
+ * Validates that an externally-sourced image URL is safe to render as an
+ * `<img src>`. Token icon URLs come from the MoonPay currencies API response,
+ * so they are treated as untrusted input: only absolute HTTPS URLs are allowed,
+ * which rules out `javascript:`, `data:`, and other non-network schemes.
+ */
+const isTrustedImageUrl = (url) => {
+    if (!url) {
+        return false;
+    }
+    try {
+        return new URL(url).protocol === 'https:';
+    }
+    catch (_a) {
+        return false;
+    }
+};
+
+exports.isTrustedImageUrl = isTrustedImageUrl;

package/src/lib/widgets/DynamicWidget/views/MoonPayOnramp/isTrustedImageUrl.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Validates that an externally-sourced image URL is safe to render as an
+ * `<img src>`. Token icon URLs come from the MoonPay currencies API response,
+ * so they are treated as untrusted input: only absolute HTTPS URLs are allowed,
+ * which rules out `javascript:`, `data:`, and other non-network schemes.
+ */
+export declare const isTrustedImageUrl: (url: string | undefined) => url is string;

package/src/lib/widgets/DynamicWidget/views/MoonPayOnramp/isTrustedImageUrl.js

@@ -0,0 +1,20 @@
+'use client'
+/**
+ * Validates that an externally-sourced image URL is safe to render as an
+ * `<img src>`. Token icon URLs come from the MoonPay currencies API response,
+ * so they are treated as untrusted input: only absolute HTTPS URLs are allowed,
+ * which rules out `javascript:`, `data:`, and other non-network schemes.
+ */
+const isTrustedImageUrl = (url) => {
+    if (!url) {
+        return false;
+    }
+    try {
+        return new URL(url).protocol === 'https:';
+    }
+    catch (_a) {
+        return false;
+    }
+};
+
+export { isTrustedImageUrl };

package/src/lib/widgets/DynamicWidget/views/MoonPayOnramp/useMoonPayOnramp.cjs

@@ -0,0 +1,123 @@
+'use client'
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _tslib = require('../../../../../../_virtual/_tslib.cjs');
+var React = require('react');
+var reactI18next = require('react-i18next');
+var sdkApiCore = require('@dynamic-labs/sdk-api-core');
+require('../../../../context/DynamicContext/useDynamicContext/useDynamicContext.cjs');
+var useInternalDynamicContext = require('../../../../context/DynamicContext/useDynamicContext/useInternalDynamicContext/useInternalDynamicContext.cjs');
+var onramp = require('../../../../data/api/onramp/onramp.cjs');
+var dynamicContextProps = require('../../../../store/state/dynamicContextProps/dynamicContextProps.cjs');
+var useMutation = require('../../../../utils/hooks/useMutation/useMutation.cjs');
+var usePromise = require('../../../../utils/hooks/usePromise/usePromise.cjs');
+
+// Only open URLs that are served over HTTPS from moonpay.com (or a subdomain).
+const isMoonPayUrl = (url) => {
+    try {
+        const parsedUrl = new URL(url);
+        return (parsedUrl.protocol === 'https:' &&
+            (parsedUrl.hostname === 'moonpay.com' ||
+                parsedUrl.hostname.endsWith('.moonpay.com')));
+    }
+    catch (_a) {
+        return false;
+    }
+};
+/**
+ * Owns the MoonPay onramp data + actions: fetching supported currencies for the
+ * connected wallet's chain, tracking the selected token, and opening the signed
+ * MoonPay URL (validated against *.moonpay.com over HTTPS). The presentational
+ * MoonPayOnramp view consumes this hook.
+ */
+const useMoonPayOnramp = ({ initialToken, merchantName, walletAddressOverride, onPaymentCreated, }) => {
+    var _a;
+    const { t } = reactI18next.useTranslation();
+    const { primaryWallet, network } = useInternalDynamicContext.useInternalDynamicContext();
+    const environmentId = dynamicContextProps.useEnvironmentId();
+    const isOpeningRef = React.useRef(false);
+    // Only the user's explicit selection is stored; initial value is set once at mount.
+    const [userSelectedToken, setUserSelectedToken] = React.useState(initialToken !== null && initialToken !== void 0 ? initialToken : '');
+    const effectiveWalletAddress = (_a = walletAddressOverride !== null && walletAddressOverride !== void 0 ? walletAddressOverride : primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.address) !== null && _a !== void 0 ? _a : '';
+    const { data: availableTokens, isLoading: tokensLoading, error: tokensRawError, } = usePromise.usePromise(() => {
+        if (!primaryWallet || !environmentId)
+            return Promise.resolve([]);
+        return onramp.getMoonPayCurrencies({
+            chain: primaryWallet.chain,
+            environmentId,
+            networkId: network ? String(network) : undefined,
+        });
+    }, {
+        deps: [primaryWallet, environmentId, network],
+        enabled: Boolean(primaryWallet && environmentId),
+        initialData: [],
+    });
+    // Derive the active token: honour the user's selection if it appears in the
+    // currency list, otherwise fall back to the first available token.
+    const selectedToken = React.useMemo(() => {
+        if (!availableTokens.length)
+            return userSelectedToken;
+        const isValid = availableTokens.some((token) => token.code === userSelectedToken);
+        return isValid ? userSelectedToken : availableTokens[0].code;
+    }, [userSelectedToken, availableTokens]);
+    const openMoonPayFn = React.useCallback(() => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+        if (!primaryWallet || !environmentId || isOpeningRef.current)
+            return;
+        isOpeningRef.current = true;
+        try {
+            const providers = yield onramp.getOnrampProviders({
+                chain: primaryWallet.chain,
+                environmentId,
+                includeDisabled: true,
+                merchantName,
+                networkId: network ? String(network) : undefined,
+                token: selectedToken,
+                walletAddress: effectiveWalletAddress,
+            });
+            const moonPayProvider = providers.find((provider) => provider.provider === sdkApiCore.ProviderEnum.MoonPay);
+            if (!(moonPayProvider === null || moonPayProvider === void 0 ? void 0 : moonPayProvider.url)) {
+                throw new Error('MoonPay provider not available');
+            }
+            if (!isMoonPayUrl(moonPayProvider.url)) {
+                throw new Error('Invalid MoonPay URL');
+            }
+            if (onPaymentCreated) {
+                onPaymentCreated(moonPayProvider.url);
+            }
+            else {
+                window.open(moonPayProvider.url, '_blank', 'noopener,noreferrer');
+            }
+        }
+        finally {
+            isOpeningRef.current = false;
+        }
+    }), [
+        primaryWallet,
+        environmentId,
+        network,
+        selectedToken,
+        effectiveWalletAddress,
+        merchantName,
+        onPaymentCreated,
+    ]);
+    const { mutate: openMoonPay, isLoading: isOpening, hasError: openMoonPayHasError, } = useMutation.useMutation(openMoonPayFn);
+    const error = openMoonPayHasError
+        ? t('dyn_moonpay_onramp.error', 'Failed to open MoonPay. Please try again.')
+        : null;
+    return {
+        availableTokens,
+        effectiveWalletAddress,
+        error,
+        isOpening,
+        openMoonPay,
+        primaryWallet,
+        selectedToken,
+        setSelectedToken: setUserSelectedToken,
+        tokensError: Boolean(tokensRawError),
+        tokensLoading,
+    };
+};
+
+exports.useMoonPayOnramp = useMoonPayOnramp;

package/src/lib/widgets/DynamicWidget/views/MoonPayOnramp/useMoonPayOnramp.d.ts

@@ -0,0 +1,30 @@
+import { useInternalDynamicContext } from '../../../../context/DynamicContext/useDynamicContext';
+import type { CryptoToken } from './CryptoTokenSelectScreen';
+export type UseMoonPayOnrampParams = {
+    /** Pre-select a token; falls back to the first available currency when invalid. */
+    initialToken?: string;
+    merchantName?: string;
+    /** Override the wallet address; defaults to the primary wallet address. */
+    walletAddressOverride?: string;
+    /** Called with the signed MoonPay URL instead of opening a popup. */
+    onPaymentCreated?: (paymentUrl: string) => void;
+};
+export type UseMoonPayOnrampReturn = {
+    primaryWallet: ReturnType<typeof useInternalDynamicContext>['primaryWallet'];
+    availableTokens: CryptoToken[];
+    tokensLoading: boolean;
+    tokensError: boolean;
+    selectedToken: string;
+    setSelectedToken: (tokenCode: string) => void;
+    isOpening: boolean;
+    error: string | null;
+    effectiveWalletAddress: string;
+    openMoonPay: () => void;
+};
+/**
+ * Owns the MoonPay onramp data + actions: fetching supported currencies for the
+ * connected wallet's chain, tracking the selected token, and opening the signed
+ * MoonPay URL (validated against *.moonpay.com over HTTPS). The presentational
+ * MoonPayOnramp view consumes this hook.
+ */
+export declare const useMoonPayOnramp: ({ initialToken, merchantName, walletAddressOverride, onPaymentCreated, }: UseMoonPayOnrampParams) => UseMoonPayOnrampReturn;

package/src/lib/widgets/DynamicWidget/views/MoonPayOnramp/useMoonPayOnramp.js

@@ -0,0 +1,119 @@
+'use client'
+import { __awaiter } from '../../../../../../_virtual/_tslib.js';
+import { useRef, useState, useMemo, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { ProviderEnum } from '@dynamic-labs/sdk-api-core';
+import '../../../../context/DynamicContext/useDynamicContext/useDynamicContext.js';
+import { useInternalDynamicContext } from '../../../../context/DynamicContext/useDynamicContext/useInternalDynamicContext/useInternalDynamicContext.js';
+import { getOnrampProviders, getMoonPayCurrencies } from '../../../../data/api/onramp/onramp.js';
+import { useEnvironmentId } from '../../../../store/state/dynamicContextProps/dynamicContextProps.js';
+import { useMutation } from '../../../../utils/hooks/useMutation/useMutation.js';
+import { usePromise } from '../../../../utils/hooks/usePromise/usePromise.js';
+
+// Only open URLs that are served over HTTPS from moonpay.com (or a subdomain).
+const isMoonPayUrl = (url) => {
+    try {
+        const parsedUrl = new URL(url);
+        return (parsedUrl.protocol === 'https:' &&
+            (parsedUrl.hostname === 'moonpay.com' ||
+                parsedUrl.hostname.endsWith('.moonpay.com')));
+    }
+    catch (_a) {
+        return false;
+    }
+};
+/**
+ * Owns the MoonPay onramp data + actions: fetching supported currencies for the
+ * connected wallet's chain, tracking the selected token, and opening the signed
+ * MoonPay URL (validated against *.moonpay.com over HTTPS). The presentational
+ * MoonPayOnramp view consumes this hook.
+ */
+const useMoonPayOnramp = ({ initialToken, merchantName, walletAddressOverride, onPaymentCreated, }) => {
+    var _a;
+    const { t } = useTranslation();
+    const { primaryWallet, network } = useInternalDynamicContext();
+    const environmentId = useEnvironmentId();
+    const isOpeningRef = useRef(false);
+    // Only the user's explicit selection is stored; initial value is set once at mount.
+    const [userSelectedToken, setUserSelectedToken] = useState(initialToken !== null && initialToken !== void 0 ? initialToken : '');
+    const effectiveWalletAddress = (_a = walletAddressOverride !== null && walletAddressOverride !== void 0 ? walletAddressOverride : primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.address) !== null && _a !== void 0 ? _a : '';
+    const { data: availableTokens, isLoading: tokensLoading, error: tokensRawError, } = usePromise(() => {
+        if (!primaryWallet || !environmentId)
+            return Promise.resolve([]);
+        return getMoonPayCurrencies({
+            chain: primaryWallet.chain,
+            environmentId,
+            networkId: network ? String(network) : undefined,
+        });
+    }, {
+        deps: [primaryWallet, environmentId, network],
+        enabled: Boolean(primaryWallet && environmentId),
+        initialData: [],
+    });
+    // Derive the active token: honour the user's selection if it appears in the
+    // currency list, otherwise fall back to the first available token.
+    const selectedToken = useMemo(() => {
+        if (!availableTokens.length)
+            return userSelectedToken;
+        const isValid = availableTokens.some((token) => token.code === userSelectedToken);
+        return isValid ? userSelectedToken : availableTokens[0].code;
+    }, [userSelectedToken, availableTokens]);
+    const openMoonPayFn = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
+        if (!primaryWallet || !environmentId || isOpeningRef.current)
+            return;
+        isOpeningRef.current = true;
+        try {
+            const providers = yield getOnrampProviders({
+                chain: primaryWallet.chain,
+                environmentId,
+                includeDisabled: true,
+                merchantName,
+                networkId: network ? String(network) : undefined,
+                token: selectedToken,
+                walletAddress: effectiveWalletAddress,
+            });
+            const moonPayProvider = providers.find((provider) => provider.provider === ProviderEnum.MoonPay);
+            if (!(moonPayProvider === null || moonPayProvider === void 0 ? void 0 : moonPayProvider.url)) {
+                throw new Error('MoonPay provider not available');
+            }
+            if (!isMoonPayUrl(moonPayProvider.url)) {
+                throw new Error('Invalid MoonPay URL');
+            }
+            if (onPaymentCreated) {
+                onPaymentCreated(moonPayProvider.url);
+            }
+            else {
+                window.open(moonPayProvider.url, '_blank', 'noopener,noreferrer');
+            }
+        }
+        finally {
+            isOpeningRef.current = false;
+        }
+    }), [
+        primaryWallet,
+        environmentId,
+        network,
+        selectedToken,
+        effectiveWalletAddress,
+        merchantName,
+        onPaymentCreated,
+    ]);
+    const { mutate: openMoonPay, isLoading: isOpening, hasError: openMoonPayHasError, } = useMutation(openMoonPayFn);
+    const error = openMoonPayHasError
+        ? t('dyn_moonpay_onramp.error', 'Failed to open MoonPay. Please try again.')
+        : null;
+    return {
+        availableTokens,
+        effectiveWalletAddress,
+        error,
+        isOpening,
+        openMoonPay,
+        primaryWallet,
+        selectedToken,
+        setSelectedToken: setUserSelectedToken,
+        tokensError: Boolean(tokensRawError),
+        tokensLoading,
+    };
+};
+
+export { useMoonPayOnramp };

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

@@ -31,6 +31,7 @@ require('../../../../context/ErrorContext/ErrorContext.cjs');
 require('@dynamic-labs/multi-wallet');
 require('react-international-phone');
 require('../../../../store/state/nonce/nonce.cjs');
+require('@dynamic-labs-wallet/browser-wallet-client');
 require('@dynamic-labs-sdk/client/core');
 require('eventemitter3');
 require('@dynamic-labs-sdk/client');
@@ -101,6 +102,7 @@ require('../../../../utils/hooks/useWalletBackup/BackupError.cjs');
 require('../../../../utils/hooks/useWalletBackup/types.cjs');
 require('../../../../utils/hooks/useWalletBackup/cloudProviders.cjs');
 require('../CryptoComOnramp/CryptoComOnramp.cjs');
+var createFundingButtons = require('./utils/createFundingButtons/createFundingButtons.cjs');
 require('../../../../context/OnrampContext/OnrampContext.cjs');
 require('../../../../../index.cjs');
 var convertExchangeKeyAndProviderEnum = require('../../helpers/convertExchangeKeyAndProviderEnum.cjs');
@@ -138,7 +140,6 @@ var useExchangeRatesForFunding = require('./utils/useExchangeRatesForFunding/use
 var useExchangeTokensForFunding = require('./utils/useExchangeTokensForFunding/useExchangeTokensForFunding.cjs');
 var useSubmitWalletFunding = require('./utils/useSubmitWalletFunding/useSubmitWalletFunding.cjs');
 var useTokensForFunding = require('./utils/useTokensForFunding/useTokensForFunding.cjs');
-var createFundingButtons = require('./utils/createFundingButtons/createFundingButtons.cjs');
 var parseQuickSuggestions = require('./utils/parseQuickSuggestions/parseQuickSuggestions.cjs');
 var useFundingHandlers = require('./utils/useFundingHandlers/useFundingHandlers.cjs');
 var useFundingDisplay = require('./utils/useFundingDisplay/useFundingDisplay.cjs');

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

@@ -27,6 +27,7 @@ import '../../../../context/ErrorContext/ErrorContext.js';
 import '@dynamic-labs/multi-wallet';
 import 'react-international-phone';
 import '../../../../store/state/nonce/nonce.js';
+import '@dynamic-labs-wallet/browser-wallet-client';
 import '@dynamic-labs-sdk/client/core';
 import 'eventemitter3';
 import '@dynamic-labs-sdk/client';
@@ -97,6 +98,7 @@ import '../../../../utils/hooks/useWalletBackup/BackupError.js';
 import '../../../../utils/hooks/useWalletBackup/types.js';
 import '../../../../utils/hooks/useWalletBackup/cloudProviders.js';
 import '../CryptoComOnramp/CryptoComOnramp.js';
+import { createFundingButtons } from './utils/createFundingButtons/createFundingButtons.js';
 import '../../../../context/OnrampContext/OnrampContext.js';
 import '../../../../../index.js';
 import { convertExchangeKeytoProviderEnum } from '../../helpers/convertExchangeKeyAndProviderEnum.js';
@@ -134,7 +136,6 @@ import { useExchangeRatesForFunding } from './utils/useExchangeRatesForFunding/u
 import { useExchangeTokensForFunding } from './utils/useExchangeTokensForFunding/useExchangeTokensForFunding.js';
 import { useSubmitWalletFunding } from './utils/useSubmitWalletFunding/useSubmitWalletFunding.js';
 import { useTokensForFunding } from './utils/useTokensForFunding/useTokensForFunding.js';
-import { createFundingButtons } from './utils/createFundingButtons/createFundingButtons.js';
 import { parseQuickSuggestions } from './utils/parseQuickSuggestions/parseQuickSuggestions.js';
 import { useFundingHandlers } from './utils/useFundingHandlers/useFundingHandlers.js';
 import { useFundingDisplay } from './utils/useFundingDisplay/useFundingDisplay.js';

package/src/lib/widgets/DynamicWidget/views/ReceiveWalletFunds/TokenSelectScreen/TokenOption/TokenOption.cjs

@@ -28,6 +28,7 @@ require('../../../../../../context/ErrorContext/ErrorContext.cjs');
 require('@dynamic-labs/multi-wallet');
 require('react-international-phone');
 require('../../../../../../store/state/nonce/nonce.cjs');
+require('@dynamic-labs-wallet/browser-wallet-client');
 require('@dynamic-labs-sdk/client/core');
 require('eventemitter3');
 require('@dynamic-labs-sdk/client');

package/src/lib/widgets/DynamicWidget/views/ReceiveWalletFunds/TokenSelectScreen/TokenOption/TokenOption.js

@@ -24,6 +24,7 @@ import '../../../../../../context/ErrorContext/ErrorContext.js';
 import '@dynamic-labs/multi-wallet';
 import 'react-international-phone';
 import '../../../../../../store/state/nonce/nonce.js';
+import '@dynamic-labs-wallet/browser-wallet-client';
 import '@dynamic-labs-sdk/client/core';
 import 'eventemitter3';
 import '@dynamic-labs-sdk/client';

package/src/lib/widgets/DynamicWidget/views/ReceiveWalletFunds/TokenSelectScreen/TokenSelectScreen.cjs

@@ -31,6 +31,7 @@ require('../../../../../context/ErrorContext/ErrorContext.cjs');
 require('@dynamic-labs/multi-wallet');
 require('react-international-phone');
 require('../../../../../store/state/nonce/nonce.cjs');
+require('@dynamic-labs-wallet/browser-wallet-client');
 require('@dynamic-labs-sdk/client/core');
 require('eventemitter3');
 require('@dynamic-labs-sdk/client');

package/src/lib/widgets/DynamicWidget/views/ReceiveWalletFunds/TokenSelectScreen/TokenSelectScreen.js

@@ -27,6 +27,7 @@ import '../../../../../context/ErrorContext/ErrorContext.js';
 import '@dynamic-labs/multi-wallet';
 import 'react-international-phone';
 import '../../../../../store/state/nonce/nonce.js';
+import '@dynamic-labs-wallet/browser-wallet-client';
 import '@dynamic-labs-sdk/client/core';
 import 'eventemitter3';
 import '@dynamic-labs-sdk/client';

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

@@ -31,6 +31,7 @@ require('../../../../../shared/consts/index.cjs');
 require('@dynamic-labs/multi-wallet');
 require('react-international-phone');
 require('../../../../../store/state/nonce/nonce.cjs');
+require('@dynamic-labs-wallet/browser-wallet-client');
 require('@dynamic-labs-sdk/client/core');
 require('eventemitter3');
 require('@dynamic-labs-sdk/client');

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

@@ -27,6 +27,7 @@ import '../../../../../shared/consts/index.js';
 import '@dynamic-labs/multi-wallet';
 import 'react-international-phone';
 import '../../../../../store/state/nonce/nonce.js';
+import '@dynamic-labs-wallet/browser-wallet-client';
 import '@dynamic-labs-sdk/client/core';
 import 'eventemitter3';
 import '@dynamic-labs-sdk/client';