@relayprotocol/relay-kit-ui 2.17.2

package/_esm/src/components/widgets/OnrampWidget/modals/steps/OnrampConfirmingStep.js

@@ -0,0 +1,38 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Anchor, Box, Button, ChainTokenIcon, Flex, Text } from '../../../../primitives/index.js';
+import { OnrampStep } from '../OnrampModal.js';
+import { LoadingSpinner } from '../../../../common/LoadingSpinner.js';
+import { EventNames } from '../../../../../constants/events.js';
+export const OnrampConfirmingStep = ({ toToken, fromToken, fromChain, toChain, requestId, depositAddress, recipient, amount, totalAmount, ethTotalAmount, isFetchingQuote, onAnalyticEvent, setStep }) => {
+    return (_jsxs(Flex, { direction: "column", css: {
+            width: '100%',
+            height: '100%',
+            gap: '4'
+        }, children: [_jsxs(Text, { style: "h6", children: ["Buy ", toToken?.symbol, " (", toChain?.displayName, ")"] }), _jsxs(Flex, { direction: "column", css: {
+                    width: '100%',
+                    overflow: 'hidden',
+                    borderRadius: 'widget-card-border-radius',
+                    '--borderColor': 'colors.subtle-border-color',
+                    border: '1px solid var(--borderColor)',
+                    p: '4'
+                }, children: [_jsxs(Flex, { align: "center", css: { gap: '2' }, children: [_jsx(ChainTokenIcon, { chainId: fromToken?.chainId, tokenlogoURI: fromToken?.logoURI, tokenSymbol: fromToken?.symbol }), _jsxs(Text, { style: "subtitle1", children: ["You'll purchase ", fromToken?.symbol, " (", fromChain?.displayName, ") via your card"] })] }), _jsx(Box, { css: {
+                            height: 24,
+                            width: 1,
+                            background: 'gray5',
+                            my: '5px',
+                            ml: 4
+                        } }), _jsxs(Flex, { align: "center", css: { gap: '2' }, children: [_jsx(ChainTokenIcon, { chainId: toToken?.chainId, tokenlogoURI: toToken?.logoURI, tokenSymbol: toToken?.symbol }), _jsxs(Text, { style: "subtitle1", children: ["Relay converts to ", toToken?.symbol, " (", toChain?.displayName, ")"] })] })] }), _jsxs(Text, { style: "subtitle2", children: ["This transaction occurs in two steps. MoonPay powers only your purchase of ", fromToken?.symbol, " (", fromChain?.displayName, ") which Relay then converts to ", toToken?.symbol, " (", toChain?.displayName, ").", ' ', _jsx(Anchor, { href: "https://support.relay.link/en/articles/10517947-fiat-on-ramps", target: "_blank", css: { ml: '1' }, children: "Learn more" })] }), _jsx(Button, { disabled: !depositAddress || isFetchingQuote, css: { justifyContent: 'center' }, onClick: (e) => {
+                    onAnalyticEvent?.(EventNames.ONRAMP_CTA_CLICKED, {
+                        recipient,
+                        depositAddress,
+                        requestId,
+                        amount,
+                        totalAmount,
+                        ethTotalAmount,
+                        toToken: toToken.address,
+                        toChain: toToken.chainId
+                    });
+                    setStep(OnrampStep.Moonpay);
+                }, children: !depositAddress || isFetchingQuote ? (_jsx(LoadingSpinner, { css: { height: 16, width: 16, fill: 'button-disabled-color' } })) : (`Purchase ${fromToken?.symbol} (${fromChain?.displayName})`) })] }));
+};
+//# sourceMappingURL=OnrampConfirmingStep.js.map

package/_esm/src/components/widgets/OnrampWidget/modals/steps/OnrampConfirmingStep.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OnrampConfirmingStep.js","sourceRoot":"","sources":["../../../../../../../src/components/widgets/OnrampWidget/modals/steps/OnrampConfirmingStep.tsx"],"names":[],"mappings":"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"}

package/_esm/src/components/widgets/OnrampWidget/modals/steps/OnrampMoonPayStep.js

@@ -0,0 +1,176 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { lazy, memo, Suspense, useEffect } from 'react';
+import { Box, ChainTokenIcon, Flex, Text } from '../../../../primitives/index.js';
+import { OnrampProcessingStep, OnrampStep } from '../OnrampModal.js';
+import { EventNames } from '../../../../../constants/events.js';
+import { arbitrum } from 'viem/chains';
+import { useMoonPayTransaction } from '../../../../../hooks/index.js';
+const MoonPayBuyWidget = memo(lazy(() => import('@moonpay/moonpay-react').then((module) => ({
+    default: module.MoonPayBuyWidget
+}))), (a, b) => {
+    return (window.relayOnrampStep === OnrampStep.Moonpay ||
+        window.relayOnrampProcessingStep ===
+            OnrampProcessingStep.Finalizing);
+});
+arbitrum;
+export const OnrampMoonPayStep = ({ step, processingStep, toToken, fromToken, fromChain, toChain, depositAddress, recipient, totalAmount, fiatCurrency, isPassthrough, moonPayCurrencyCode, moonPayThemeId, moonPayThemeMode, quoteRequestId, moonPayApiKey, passthroughExternalId, onAnalyticEvent, setStep, setProcessingStep, setMoonPayRequestId, moonpayOnUrlSignatureRequested, onPassthroughSuccess, onError }) => {
+    const moonPayExternalId = !isPassthrough
+        ? (quoteRequestId ?? undefined)
+        : passthroughExternalId;
+    useEffect(() => {
+        if (window) {
+            ;
+            window.relayOnrampStep = step;
+        }
+        return () => {
+            ;
+            window.relayOnrampStep = undefined;
+        };
+    }, [step]);
+    useEffect(() => {
+        if (window) {
+            ;
+            window.relayOnrampProcessingStep = processingStep;
+        }
+        return () => {
+            ;
+            window.processingStep = undefined;
+        };
+    }, [processingStep]);
+    useEffect(() => {
+        if (window) {
+            ;
+            window.relayIsPassthrough = isPassthrough;
+        }
+        return () => {
+            ;
+            window.relayIsPassthrough = undefined;
+        };
+    }, [isPassthrough]);
+    useMoonPayTransaction(moonPayExternalId, {
+        apiKey: moonPayApiKey
+    }, {
+        enabled: step !== OnrampStep.Confirming &&
+            step !== OnrampStep.Error &&
+            step !== OnrampStep.Success,
+        refetchInterval: (query) => {
+            let data = query.state.data;
+            if (data && 'moonPayErrorCode' in data) {
+                const errorData = data;
+                if (errorData.moonPayErrorCode != '1_SYS_UNKNOWN') {
+                    onAnalyticEvent?.(EventNames.ONRAMPING_MOONPAY_TX_API_ERROR, {
+                        data,
+                        isPassthrough
+                    });
+                }
+            }
+            else if (data && 'status' in data) {
+                const responseData = data;
+                if (responseData?.status === 'failed') {
+                    onAnalyticEvent?.(EventNames.ONRAMPING_MOONPAY_TX_FAILED, {
+                        data,
+                        isPassthrough
+                    });
+                    onError(new Error(`MoonPayTxFailed: ${data.failureReason ?? 'unknown'}`));
+                    return 0;
+                }
+                if (responseData?.status === 'completed') {
+                    onAnalyticEvent?.(EventNames.ONRAMPING_MOONPAY_TX_COMPLETE, {
+                        data,
+                        isPassthrough
+                    });
+                    if (step === OnrampStep.Processing && !isPassthrough) {
+                        setProcessingStep(OnrampProcessingStep.Relaying);
+                    }
+                    else if (isPassthrough && step !== OnrampStep.Success) {
+                        setProcessingStep(undefined);
+                        onPassthroughSuccess();
+                    }
+                    return 0;
+                }
+                if (responseData?.id && responseData?.status === 'pending') {
+                    if (step === OnrampStep.Moonpay) {
+                        if (!isPassthrough) {
+                            setStep(OnrampStep.Processing);
+                            setProcessingStep(OnrampProcessingStep.Finalizing);
+                            return 0;
+                        }
+                        else {
+                            setStep(OnrampStep.ProcessingPassthrough);
+                        }
+                    }
+                }
+            }
+            return 2000;
+        }
+    });
+    return (_jsxs(Flex, { direction: "column", id: "onramp-moonpay-step", css: {
+            width: '100%',
+            height: '100%',
+            position: step === OnrampStep.Moonpay ? undefined : 'fixed',
+            top: step === OnrampStep.Moonpay ? undefined : '-100%'
+        }, children: [_jsx(Text, { style: "h6", css: { mb: '2' }, children: !isPassthrough
+                    ? `Buy ${toToken?.symbol} (${toChain?.displayName})`
+                    : 'Checkout' }), !isPassthrough ? (_jsxs(Flex, { align: "center", css: {
+                    width: '100%',
+                    overflow: 'hidden',
+                    borderRadius: 'widget-card-border-radius',
+                    '--borderColor': 'colors.subtle-border-color',
+                    border: '1px solid var(--borderColor)',
+                    p: '4',
+                    gap: 2,
+                    mb: '2'
+                }, children: [_jsxs(Box, { css: { position: 'relative', width: 48, height: 52, flexShrink: 0 }, children: [_jsx(ChainTokenIcon, { chainId: toToken?.chainId, tokenlogoURI: toToken?.logoURI, tokenSymbol: toToken?.symbol, css: {
+                                    width: 32,
+                                    height: 32,
+                                    position: 'absolute',
+                                    top: 0,
+                                    right: 0,
+                                    zIndex: 1
+                                } }), _jsx(ChainTokenIcon, { chainId: fromToken?.chainId, tokenlogoURI: fromToken?.logoURI, tokenSymbol: fromToken?.symbol, css: {
+                                    width: 32,
+                                    height: 32,
+                                    position: 'absolute',
+                                    bottom: 0,
+                                    left: 0
+                                } })] }), _jsxs(Text, { style: "subtitle2", children: ["Purchase ", fromToken?.symbol, " (", fromChain?.displayName, ") via your card for Relay to convert to ", toToken?.symbol, " (", toChain?.displayName, ")"] })] })) : null, _jsx(Suspense, { fallback: _jsx("div", {}), children: _jsx(MoonPayBuyWidget, { variant: "embedded", baseCurrencyCode: fiatCurrency.code, quoteCurrencyAmount: `${totalAmount}`, lockAmount: "true", currencyCode: moonPayCurrencyCode, paymentMethod: "credit_debit_card", walletAddress: !isPassthrough ? depositAddress : recipient, themeId: moonPayThemeId, theme: moonPayThemeMode, externalTransactionId: moonPayExternalId, showWalletAddressForm: "false", visible: true, style: {
+                        margin: 0,
+                        width: '100%',
+                        border: 'none',
+                        height: 500,
+                        overflowY: 'scroll'
+                    }, onUrlSignatureRequested: moonpayOnUrlSignatureRequested, onTransactionCreated: async (props) => {
+                        setMoonPayRequestId(props.id);
+                        onAnalyticEvent?.(EventNames.ONRAMPING_MOONPAY_TX_START, {
+                            ...props,
+                            isPassthrough: window.relayIsPassthrough
+                        });
+                        if (window &&
+                            window.relayOnrampStep === OnrampStep.Moonpay) {
+                            if (!window.relayIsPassthrough) {
+                                setStep(OnrampStep.Processing);
+                                setProcessingStep(OnrampProcessingStep.Finalizing);
+                            }
+                            else {
+                                setStep(OnrampStep.ProcessingPassthrough);
+                            }
+                        }
+                    }, onTransactionCompleted: async (props) => {
+                        onAnalyticEvent?.(EventNames.ONRAMPING_MOONPAY_TX_COMPLETE, {
+                            ...props,
+                            isPassthrough: window.relayIsPassthrough
+                        });
+                        if (window &&
+                            window.relayOnrampStep === OnrampStep.Processing &&
+                            !window.relayIsPassthrough) {
+                            setProcessingStep(OnrampProcessingStep.Relaying);
+                        }
+                        else if (window &&
+                            window.relayIsPassthrough &&
+                            window.relayOnrampStep !== OnrampStep.Success) {
+                            setProcessingStep(undefined);
+                            onPassthroughSuccess();
+                        }
+                    } }) })] }));
+};
+//# sourceMappingURL=OnrampMoonPayStep.js.map

package/_esm/src/components/widgets/OnrampWidget/modals/steps/OnrampMoonPayStep.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OnrampMoonPayStep.js","sourceRoot":"","sources":["../../../../../../../src/components/widgets/OnrampWidget/modals/steps/OnrampMoonPayStep.tsx"],"names":[],"mappings":"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"}

package/_esm/src/components/widgets/OnrampWidget/modals/steps/OnrampProcessingPassthroughStep.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Anchor, Box, ChainTokenIcon, Flex, Text } from '../../../../primitives/index.js';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faUpRightFromSquare } from '@fortawesome/free-solid-svg-icons';
+import { LoadingSpinner } from '../../../../common/LoadingSpinner.js';
+import MoonPayLogo from '../../../../../img/MoonPayLogo.js';
+export const OnrampProcessingPassthroughStep = ({ toToken, moonpayTxUrl, amount, amountToTokenFormatted }) => {
+    return (_jsxs(Flex, { direction: "column", css: {
+            width: '100%',
+            height: '100%'
+        }, children: [_jsx(Text, { style: "h6", css: { mb: '4' }, children: "Processing Transaction" }), _jsxs(Flex, { align: "center", css: {
+                    width: '100%',
+                    p: '3',
+                    mb: '2',
+                    gap: '2',
+                    background: 'gray2',
+                    borderRadius: 12
+                }, children: [_jsx(ChainTokenIcon, { chainId: toToken?.chainId, tokenlogoURI: toToken?.logoURI, tokenSymbol: toToken?.symbol, css: {
+                            width: 32,
+                            height: 32
+                        } }), _jsxs(Flex, { align: "start", direction: "column", children: [_jsxs(Text, { style: "h6", children: [amountToTokenFormatted, " ", toToken.symbol] }), _jsx(Text, { style: "subtitle3", color: "subtle", children: amount })] })] }), _jsxs(Flex, { direction: "column", justify: "center", align: "center", css: {
+                    py: '4',
+                    px: '3',
+                    borderRadius: 'widget-card-border-radius',
+                    '--borderColor': 'colors.subtle-border-color',
+                    border: '1px solid var(--borderColor)'
+                }, children: [_jsxs(Box, { css: { position: 'relative', width: 40, height: 40 }, children: [_jsx(MoonPayLogo, { style: { borderRadius: 12, width: 40, height: 40 } }), _jsx(Flex, { align: "center", justify: "center", css: {
+                                    width: 24,
+                                    height: 24,
+                                    borderRadius: '100%',
+                                    overflow: 'hidden',
+                                    background: 'primary3',
+                                    position: 'absolute',
+                                    bottom: '-6px',
+                                    right: '-6px',
+                                    '--borderColor': 'colors.modal-background',
+                                    border: '2px solid var(--borderColor)'
+                                }, children: _jsx(LoadingSpinner, { css: { height: 16, width: 16, fill: 'primary-color' } }) })] }), _jsx(Text, { style: "subtitle2", css: { mt: '24px', textAlign: 'center' }, children: "Finalizing your purchase through MoonPay, it may take a few minutes to process." }), moonpayTxUrl ? (_jsxs(Anchor, { href: moonpayTxUrl, target: "_blank", css: { display: 'flex', alignItems: 'center', gap: '1', mt: '2' }, children: ["Track MoonPay transaction", ' ', _jsx(FontAwesomeIcon, { icon: faUpRightFromSquare, style: { width: 14 } })] })) : null] }), _jsx(Text, { style: "body2", color: "subtle", css: { mt: '2' }, children: "Feel free to leave at any time, MoonPay will email you with updates." })] }));
+};
+//# sourceMappingURL=OnrampProcessingPassthroughStep.js.map

package/_esm/src/components/widgets/OnrampWidget/modals/steps/OnrampProcessingPassthroughStep.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OnrampProcessingPassthroughStep.js","sourceRoot":"","sources":["../../../../../../../src/components/widgets/OnrampWidget/modals/steps/OnrampProcessingPassthroughStep.tsx"],"names":[],"mappings":"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"}

package/_esm/src/components/widgets/OnrampWidget/modals/steps/OnrampProcessingStepUI.js

@@ -0,0 +1,83 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { Anchor, Box, Button, ChainTokenIcon, Flex, Pill, Text } from '../../../../primitives/index.js';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faArrowUpRightFromSquare, faCheck, faUpRightFromSquare } from '@fortawesome/free-solid-svg-icons';
+import { truncateAddress } from '../../../../../utils/truncate.js';
+import { OnrampProcessingStep } from '../OnrampModal.js';
+import { LoadingSpinner } from '../../../../common/LoadingSpinner.js';
+export const OnrampProcessingStepUI = ({ toToken, fromToken, fromChain, toChain, moonpayTxUrl, fillTxHash, fillTxUrl, processingStep, baseTransactionUrl, requestId }) => {
+    const [delayedMoonpayTx, setDelayedMoonpayTx] = useState(false);
+    useEffect(() => {
+        let timer;
+        if (processingStep === OnrampProcessingStep.Finalizing) {
+            timer = setTimeout(() => {
+                setDelayedMoonpayTx(true);
+            }, 1000 * 60 * 5); //5 minutes
+        }
+        return () => {
+            if (timer) {
+                setDelayedMoonpayTx(false);
+                clearTimeout(timer);
+            }
+        };
+    }, [processingStep]);
+    return (_jsxs(Flex, { direction: "column", css: {
+            width: '100%',
+            height: '100%'
+        }, children: [_jsx(Text, { style: "h6", css: { mb: '4' }, children: "Processing Transaction" }), _jsxs(Flex, { direction: "column", css: {
+                    width: '100%',
+                    overflow: 'hidden',
+                    borderRadius: 'widget-card-border-radius',
+                    '--borderColor': 'colors.subtle-border-color',
+                    border: '1px solid var(--borderColor)',
+                    p: '4',
+                    mb: '4'
+                }, children: [_jsxs(Flex, { align: "center", css: { gap: '2' }, children: [_jsx(ChainTokenIcon, { chainId: fromToken?.chainId, tokenlogoURI: fromToken?.logoURI, tokenSymbol: fromToken?.symbol, css: {
+                                    width: 32,
+                                    height: 32,
+                                    filter: processingStep === OnrampProcessingStep.Relaying
+                                        ? 'grayscale(1)'
+                                        : 'none'
+                                } }), _jsxs(Flex, { css: { gap: '1' }, direction: "column", children: [_jsx(Text, { style: "subtitle1", color: processingStep === OnrampProcessingStep.Relaying
+                                            ? 'subtle'
+                                            : undefined, children: processingStep === OnrampProcessingStep.Relaying
+                                            ? `Purchased ${fromToken?.symbol}(${fromChain?.displayName}) via your card`
+                                            : `Finalizing your purchase of ${fromToken?.symbol}(${fromChain?.displayName}) via your card` }), moonpayTxUrl ? (_jsxs(Anchor, { href: moonpayTxUrl, target: "_blank", css: { display: 'flex', alignItems: 'center', gap: '1' }, children: ["Track MoonPay transaction", ' ', _jsx(FontAwesomeIcon, { icon: faUpRightFromSquare, style: { width: 14 } })] })) : null] }), processingStep === OnrampProcessingStep.Relaying ? (_jsx(Box, { css: { color: 'green9', ml: 'auto' }, children: _jsx(FontAwesomeIcon, { icon: faCheck, style: { height: 16 } }) })) : (_jsx(LoadingSpinner, { css: { height: 20, width: 20, fill: 'gray9', ml: 'auto' } }))] }), processingStep === OnrampProcessingStep.Finalizing ? (delayedMoonpayTx ? (_jsxs(Flex, { direction: "column", css: {
+                            width: '100%',
+                            overflow: 'hidden',
+                            borderRadius: 'widget-card-border-radius',
+                            '--borderColor': 'colors.subtle-border-color',
+                            border: '1px solid var(--borderColor)',
+                            p: '2',
+                            mb: '6px',
+                            gap: '3',
+                            mt: '6px'
+                        }, children: [_jsx(Text, { color: "warning", style: "subtitle2", children: "Looks like its taking longer than expected. Please go to MoonPay to track your transaction." }), _jsxs(Button, { color: "warning", css: {
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    gap: '2',
+                                    justifyContent: 'center'
+                                }, onClick: (e) => {
+                                    window.open(moonpayTxUrl, '_blank');
+                                }, children: ["Go to MoonPay", ' ', _jsx(FontAwesomeIcon, { icon: faArrowUpRightFromSquare, style: { width: 16, height: 16 } })] })] })) : (_jsx(Pill, { radius: "rounded", color: "gray", css: { width: '100%', py: '2', px: '3', mt: '6px' }, children: _jsx(Text, { style: "subtitle2", color: "subtle", children: "It might take a few minutes for the MoonPay transaction to finalize." }) }))) : null, _jsx(Box, { css: {
+                            height: 24,
+                            width: 1,
+                            background: 'gray5',
+                            my: '5px',
+                            ml: 4
+                        } }), _jsxs(Flex, { align: "center", css: {
+                            gap: '2'
+                        }, children: [_jsx(ChainTokenIcon, { chainId: toToken?.chainId, tokenlogoURI: toToken?.logoURI, css: {
+                                    width: 32,
+                                    height: 32,
+                                    filter: processingStep === OnrampProcessingStep.Relaying
+                                        ? 'none'
+                                        : 'grayscale(1)'
+                                } }), _jsxs(Flex, { css: { gap: '1' }, direction: "column", children: [_jsx(Text, { style: "subtitle1", color: processingStep === OnrampProcessingStep.Relaying
+                                            ? undefined
+                                            : 'subtle', children: processingStep === OnrampProcessingStep.Relaying
+                                            ? `Converting to ${toToken?.symbol}(${toChain?.displayName})`
+                                            : `Relay converts to ${toToken?.symbol}(${toChain?.displayName})` }), fillTxUrl ? (_jsxs(Anchor, { href: fillTxUrl, target: "_blank", css: { display: 'flex', alignItems: 'center', gap: '1' }, children: ["View Tx: ", truncateAddress(fillTxHash)] })) : null] }), processingStep === OnrampProcessingStep.Relaying ? (_jsx(LoadingSpinner, { css: { height: 16, width: 16, fill: 'gray9', ml: 'auto' } })) : null] })] }), processingStep === OnrampProcessingStep.Relaying ? (_jsxs(Text, { style: "body2", color: "subtle", children: ["Feel free to leave at any time, you can track your progress within the", _jsx(Anchor, { href: `${baseTransactionUrl}/transaction/${requestId}`, target: "_blank", css: { ml: '1' }, children: "transaction page" }), "."] })) : (_jsxs(Text, { style: "subtitle2", color: "subtle", children: ["This transaction occurs in two steps. MoonPay powers only your purchase of ", fromToken?.symbol, " (", fromChain?.displayName, ") which Relay then converts to ", toToken?.symbol, " (", toChain?.displayName, ").", _jsx(Anchor, { href: "https://support.relay.link/en/articles/10517947-fiat-on-ramps", target: "_blank", css: { ml: '1' }, children: "Learn more" })] }))] }));
+};
+//# sourceMappingURL=OnrampProcessingStepUI.js.map

package/_esm/src/components/widgets/OnrampWidget/modals/steps/OnrampProcessingStepUI.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OnrampProcessingStepUI.js","sourceRoot":"","sources":["../../../../../../../src/components/widgets/OnrampWidget/modals/steps/OnrampProcessingStepUI.tsx"],"names":[],"mappings":"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"}

package/_esm/src/components/widgets/OnrampWidget/modals/steps/OnrampSuccessStep.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { motion } from 'framer-motion';
+import { Anchor, Box, Button, ChainTokenIcon, Flex, Pill, Skeleton, Text } from '../../../../primitives/index.js';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faCheck, faUpRightFromSquare } from '@fortawesome/free-solid-svg-icons';
+import { truncateAddress } from '../../../../../utils/truncate.js';
+export const OnrampSuccessStep = ({ toToken, moonpayTxUrl, isLoadingTransaction, toAmountFormatted, fillTxHash, fillTxUrl, baseTransactionUrl, onOpenChange }) => {
+    return (_jsxs(Flex, { direction: "column", css: {
+            width: '100%',
+            height: '100%'
+        }, children: [_jsx(Text, { style: "h6", css: { mb: '4' }, children: "Transaction Details" }), _jsxs(Flex, { direction: "column", align: "center", justify: "between", children: [_jsx(motion.div, { initial: { scale: 0 }, animate: { scale: 1 }, transition: {
+                            type: 'spring',
+                            stiffness: 260,
+                            damping: 20
+                        }, children: _jsx(Flex, { align: "center", justify: "center", css: {
+                                height: 80,
+                                width: 80,
+                                backgroundColor: 'green2',
+                                '--borderColor': 'colors.green10',
+                                border: '6px solid var(--borderColor)',
+                                borderRadius: '999999px',
+                                position: 'relative'
+                            }, children: _jsx(Box, { css: { color: 'green9', mr: '$2' }, children: _jsx(FontAwesomeIcon, { icon: faCheck, style: { height: 40 } }) }) }) }), _jsx(Text, { style: "subtitle1", css: { mt: '4', textAlign: 'center' }, children: "Successfully purchased" }), _jsxs(Pill, { color: "gray", css: { alignItems: 'center', my: '4', py: '2', px: '3', gap: '2' }, children: [_jsx(ChainTokenIcon, { chainId: toToken.chainId, tokenlogoURI: toToken.logoURI, tokenSymbol: toToken.symbol, css: { height: 32, width: 32 } }), isLoadingTransaction ? (_jsx(Skeleton, { css: { height: 24, width: 60, background: 'gray5' } })) : (_jsxs(Text, { style: "subtitle1", ellipsify: true, children: [toAmountFormatted, " ", toToken.symbol] }))] }), _jsxs(Flex, { direction: "column", css: { gap: '2' }, align: "center", children: [_jsxs(Anchor, { href: moonpayTxUrl, target: "_blank", css: { display: 'flex', alignItems: 'center', gap: '1' }, children: ["View MoonPay transaction", ' ', _jsx(FontAwesomeIcon, { icon: faUpRightFromSquare, style: { width: 14 } })] }), fillTxUrl ? (_jsxs(Anchor, { href: fillTxUrl, target: "_blank", children: ["View Tx: ", truncateAddress(fillTxHash)] })) : null] })] }), _jsxs(Flex, { css: { width: '100%', mt: '24px', gap: '3' }, children: [fillTxHash ? (_jsx("a", { href: `${baseTransactionUrl}/transaction/${fillTxHash}`, style: { width: '100%' }, target: "_blank", onClick: (e) => {
+                            e.stopPropagation();
+                        }, children: _jsx(Button, { color: "secondary", css: {
+                                justifyContent: 'center',
+                                width: 'max-content'
+                            }, children: "View Details" }) })) : null, _jsx(Button, { onClick: () => {
+                            onOpenChange(false);
+                        }, css: {
+                            justifyContent: 'center',
+                            width: '100%'
+                        }, children: "Done" })] })] }));
+};
+//# sourceMappingURL=OnrampSuccessStep.js.map

package/_esm/src/components/widgets/OnrampWidget/modals/steps/OnrampSuccessStep.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OnrampSuccessStep.js","sourceRoot":"","sources":["../../../../../../../src/components/widgets/OnrampWidget/modals/steps/OnrampSuccessStep.tsx"],"names":[],"mappings":"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"}

package/_esm/src/components/widgets/OnrampWidget/widget/FiatCurrencyModal.js

@@ -0,0 +1,170 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from 'react';
+import { AccessibleList, AccessibleListItem, Box, Button, Flex, Input, Text } from '../../../primitives/index.js';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faChevronDown } from '@fortawesome/free-solid-svg-icons/faChevronDown';
+import { Modal } from '../../../../components/common/Modal.js';
+import { faMagnifyingGlass } from '@fortawesome/free-solid-svg-icons';
+import Fuse from 'fuse.js';
+import useMoonPayCurrencies, {} from '../../../../hooks/useMoonPayCurrencies.js';
+import moonpayFiatCurrencies from '../../../../constants/moonPayFiatCurrencies.js';
+const fuseSearchOptions = {
+    includeScore: true,
+    includeMatches: true,
+    threshold: 0.2,
+    keys: ['name', 'code']
+};
+const FiatCurrencyModal = ({ moonPayApiKey, fiatCurrency, setFiatCurrency }) => {
+    const [open, setOpen] = useState(false);
+    const [currencySearchInput, setCurrencySearchInput] = useState('');
+    const { data: moonPayCurrencies } = useMoonPayCurrencies({
+        apiKey: moonPayApiKey
+    }, {
+        staleTime: 1000 * 60 * 60 * 24, //1 day
+        retryDelay: 1000 * 60 * 60 * 10 //10 minutes
+    });
+    const fiatCurrencies = useMemo(() => {
+        if (moonPayCurrencies && moonPayCurrencies.length > 0) {
+            return moonPayCurrencies
+                .filter((currency) => currency.type === 'fiat')
+                .map((currency) => {
+                const fiatCurrency = currency;
+                return {
+                    name: fiatCurrency.name,
+                    code: fiatCurrency.code,
+                    minAmount: fiatCurrency.minBuyAmount,
+                    icon: fiatCurrency.icon
+                };
+            });
+        }
+        else {
+            return moonpayFiatCurrencies;
+        }
+    }, [moonPayCurrencies]);
+    const sortedFiatCurrencies = useMemo(() => fiatCurrencies?.sort((a, b) => a.name.localeCompare(b.name)) ?? [], [fiatCurrencies]);
+    const currenciesFuse = new Fuse(sortedFiatCurrencies, fuseSearchOptions);
+    const filteredCurrencies = useMemo(() => {
+        if (currencySearchInput.trim() !== '') {
+            return currenciesFuse
+                .search(currencySearchInput)
+                .map((result) => result.item);
+        }
+        else {
+            return sortedFiatCurrencies;
+        }
+    }, [currencySearchInput, currenciesFuse]);
+    return (_jsxs(Modal, { trigger: _jsxs(Button, { color: "white", corners: "pill", css: {
+                height: 28,
+                minHeight: 28,
+                width: 'max-content',
+                flexShrink: 0,
+                overflow: 'hidden',
+                gap: '1',
+                display: 'flex',
+                alignItems: 'center',
+                py: '1',
+                px: '2',
+                backgroundColor: 'gray2',
+                border: 'none',
+                _hover: {
+                    backgroundColor: 'gray3'
+                }
+            }, children: [_jsx("img", { alt: "currency-icon", src: fiatCurrency.icon, style: { width: 16, height: 16, borderRadius: '50%' } }), _jsx(Text, { style: "subtitle2", color: "subtle", children: fiatCurrency.code.toUpperCase() }), _jsx(Box, { css: { color: 'gray9', width: 14 }, children: _jsx(FontAwesomeIcon, { icon: faChevronDown, width: 14 }) })] }), open: open, onOpenChange: (open) => {
+            if (open) {
+                // onAnalyticEvent?.(EventNames.ONRAMP_MODAL_OPEN)
+            }
+            else {
+                // onAnalyticEvent?.(EventNames.ONRAMP_MODAL_CLOSE)
+            }
+            setOpen(open);
+        }, css: {
+            overflow: 'hidden',
+            p: '4',
+            maxWidth: '100vw',
+            maxHeight: '450px !important',
+            height: 450,
+            sm: {
+                maxWidth: '400px !important'
+            }
+        }, children: [_jsx(Text, { style: "h6", css: {
+                    width: '100%',
+                    textAlign: 'left'
+                }, children: "Select a currency" }), _jsxs(AccessibleList, { onSelect: (value) => {
+                    if (value && value !== 'input') {
+                        const selectedCurrency = sortedFiatCurrencies?.find((currency) => currency.code === value);
+                        if (selectedCurrency) {
+                            setFiatCurrency(selectedCurrency);
+                        }
+                        setOpen(false);
+                    }
+                }, css: {
+                    display: 'flex',
+                    flexDirection: 'column',
+                    width: '100%',
+                    gap: '1',
+                    height: 'calc(100% - 24px)',
+                    overflowY: 'auto',
+                    scrollPaddingTop: '40px'
+                }, children: [_jsx(AccessibleListItem, { value: "input", asChild: true, children: _jsx(Box, { css: {
+                                bg: 'modal-background',
+                                position: 'sticky',
+                                py: '2',
+                                zIndex: 1,
+                                top: 0
+                            }, children: _jsx(Input, { placeholder: "Search for a currency", icon: _jsx(Box, { css: { color: 'gray9' }, children: _jsx(FontAwesomeIcon, { icon: faMagnifyingGlass, width: 16, height: 16 }) }), containerCss: {
+                                    width: '100%',
+                                    height: 40,
+                                    scrollSnapAlign: 'start'
+                                }, css: {
+                                    width: '100%',
+                                    _placeholder_parent: {
+                                        textOverflow: 'ellipsis'
+                                    }
+                                }, value: currencySearchInput, onChange: (e) => {
+                                    setCurrencySearchInput(e.target.value);
+                                } }) }) }), filteredCurrencies.map((currency, i) => {
+                        const active = fiatCurrency.code === currency.code;
+                        return (_jsx(AccessibleListItem, { value: currency.code, asChild: true, children: _jsx(Button, { color: "ghost", size: "none", css: {
+                                    scrollSnapAlign: 'start',
+                                    p: '2',
+                                    mb: i + 1 < (fiatCurrencies?.length ?? 0) ? '1' : 0,
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    gap: '2',
+                                    position: 'relative',
+                                    ...(active && {
+                                        _before: {
+                                            content: '""',
+                                            position: 'absolute',
+                                            borderRadius: 8,
+                                            top: 0,
+                                            left: 0,
+                                            width: '100%',
+                                            height: '100%',
+                                            opacity: 0.15,
+                                            backgroundColor: 'primary-color',
+                                            zIndex: -1
+                                        }
+                                    }),
+                                    transition: 'backdrop-filter 250ms linear',
+                                    _hover: {
+                                        backgroundColor: active ? '' : 'gray/10'
+                                    },
+                                    '--focusColor': 'colors.focus-color',
+                                    _focusVisible: {
+                                        boxShadow: 'inset 0 0 0 2px var(--focusColor)'
+                                    },
+                                    '&[data-state="on"]': {
+                                        boxShadow: 'inset 0 0 0 2px var(--focusColor)'
+                                    },
+                                    _active: {
+                                        boxShadow: 'inset 0 0 0 2px var(--focusColor)'
+                                    },
+                                    _focusWithin: {
+                                        boxShadow: 'inset 0 0 0 2px var(--focusColor)'
+                                    }
+                                }, children: _jsxs(Flex, { align: "center", css: { gap: '2' }, children: [_jsx("img", { src: currency.icon, alt: `${currency.name} icon`, style: { width: 32, height: 32, borderRadius: '50%' } }), _jsxs(Flex, { css: { gap: '2px', textAlign: 'left' }, direction: "column", children: [_jsx(Text, { style: "subtitle2", children: currency.name }), _jsx(Text, { style: "body3", color: "subtle", children: currency.code.toUpperCase() })] })] }) }) }, currency.code));
+                    }), filteredCurrencies.length === 0 ? (_jsx(Text, { style: "subtitle2", css: { textAlign: 'center', py: '5' }, children: "No results found." })) : null] })] }));
+};
+export default FiatCurrencyModal;
+//# sourceMappingURL=FiatCurrencyModal.js.map