@openfort/react 0.3.2 → 1.0.1

package/build/components/Pages/About/index.js

@@ -0,0 +1,142 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { MotionConfig, AnimatePresence } from 'framer-motion';
+import { useState, useRef, useEffect } from 'react';
+import useLocales from '../../../hooks/useLocales.js';
+import Button from '../../Common/Button/index.js';
+import FitText from '../../Common/FitText/index.js';
+import { OrDivider } from '../../Common/Modal/index.js';
+import { ModalH1, ModalBody, ModalContent } from '../../Common/Modal/styles.js';
+import { useOpenfort } from '../../Openfort/useOpenfort.js';
+import { PageContent } from '../../PageContent/index.js';
+import { SlideOne, SlideTwo, SlideThree } from './graphics.js';
+import { Slider, ImageContainer, ImageContainerInner, Slides, Slide, MobileImageContainer, Dots, Dot } from './styles.js';
+
+const About = () => {
+    var _a;
+    const locales = useLocales({
+    //CONNECTORNAME: connector.name,
+    });
+    const context = useOpenfort();
+    const ctaUrl = (_a = context.uiConfig.ethereumOnboardingUrl) !== null && _a !== void 0 ? _a : locales.aboutScreen_ctaUrl;
+    const [_ready, setReady] = useState(true);
+    const [slider, setSlider] = useState(0);
+    const interacted = useRef(false);
+    const scrollPos = useRef(0);
+    const animationEase = [0.16, 1, 0.3, 1];
+    const animationDuration = 600;
+    let interval;
+    useEffect(() => {
+        //interval = setTimeout(nextSlide, autoplayDelay);
+        return () => clearInterval(interval);
+    }, []);
+    const isSwipe = () => {
+        if (sliderRef.current) {
+            const { overflow } = getComputedStyle(sliderRef.current);
+            return overflow !== 'visible';
+        }
+        return false;
+    };
+    const gotoSlide = (index) => {
+        setReady(false);
+        if (isSwipe()) {
+            scrollToSlide(index);
+        }
+        else {
+            setSlider(index);
+        }
+    };
+    const scrollToSlide = (index) => {
+        if (sliderRef.current) {
+            const { offsetWidth: width } = sliderRef.current;
+            sliderRef.current.scrollLeft = width * index;
+            setTimeout(() => setSlider(index), 100);
+        }
+    };
+    // This event should not fire on mobile
+    const onScroll = () => {
+        if (!sliderRef.current)
+            return;
+        const { offsetWidth: width, scrollLeft: x } = sliderRef.current;
+        const prevScroll = scrollPos.current;
+        scrollPos.current = x;
+        // Limit when the slider should be set after swipe
+        const threshold = 4;
+        if (prevScroll - x > -threshold && prevScroll - x < threshold) {
+            const currentSlide = Math.round(x / width);
+            setSlider(currentSlide);
+        }
+    };
+    const onTouchMove = () => {
+        didInteract();
+    };
+    const onTouchEnd = () => {
+        const { offsetWidth: width, scrollLeft: x } = sliderRef.current;
+        const currentSlide = Math.round(x / width);
+        setSlider(currentSlide);
+    };
+    const didInteract = () => {
+        interacted.current = true;
+        clearTimeout(interval);
+    };
+    const sliderRef = useRef(null);
+    useEffect(() => {
+        if (!sliderRef.current)
+            return;
+        sliderRef.current.addEventListener('scroll', onScroll);
+        sliderRef.current.addEventListener('touchmove', onTouchMove);
+        sliderRef.current.addEventListener('touchend', onTouchEnd);
+        return () => {
+            if (!sliderRef.current)
+                return;
+            sliderRef.current.removeEventListener('scroll', onScroll);
+            sliderRef.current.removeEventListener('touchmove', onTouchMove);
+            sliderRef.current.removeEventListener('touchend', onTouchEnd);
+        };
+    }, [sliderRef]);
+    const graphics = [
+        jsx(SlideOne, { layoutId: 'graphicCircle', duration: animationDuration, ease: animationEase }, "slide-one"),
+        jsx(SlideTwo, { layoutId: 'graphicCircle', duration: animationDuration, ease: animationEase }, "slide-two"),
+        jsx(SlideThree, { layoutId: 'graphicCircle', duration: animationDuration, ease: animationEase }, "slide-three"),
+    ];
+    const mobileGraphics = [
+        jsx(SlideOne, { duration: animationDuration, ease: animationEase }, "mobile-slide-one"),
+        jsx(SlideTwo, { duration: animationDuration, ease: animationEase }, "mobile-slide-two"),
+        jsx(SlideThree, { duration: animationDuration, ease: animationEase }, "mobile-slide-three"),
+    ];
+    // Adjust height of ModalBody to fit content based on language
+    const slideHeight = (() => {
+        switch (context.uiConfig.language) {
+            case 'en-US':
+            case 'zh-CN':
+                return 64;
+            default:
+                return 84;
+        }
+    })();
+    const slides = [
+        {
+            key: 'slide-a',
+            content: (jsxs(Fragment, { children: [jsx(ModalH1, { style: { height: 24 }, "$small": true, children: jsx(FitText, { children: locales.aboutScreen_a_h1 }) }), jsx(ModalBody, { style: { height: slideHeight }, children: jsx(FitText, { children: locales.aboutScreen_a_p }) })] })),
+        },
+        {
+            key: 'slide-b',
+            content: (jsxs(Fragment, { children: [jsx(ModalH1, { style: { height: 24 }, "$small": true, children: jsx(FitText, { children: locales.aboutScreen_b_h1 }) }), jsx(ModalBody, { style: { height: slideHeight }, children: jsx(FitText, { children: locales.aboutScreen_b_p }) })] })),
+        },
+        {
+            key: 'slide-c',
+            content: (jsxs(Fragment, { children: [jsx(ModalH1, { style: { height: 24 }, "$small": true, children: jsx(FitText, { children: locales.aboutScreen_c_h1 }) }), jsx(ModalBody, { style: { height: slideHeight }, children: jsx(FitText, { children: locales.aboutScreen_c_p }) })] })),
+        },
+    ];
+    return (jsxs(PageContent, { children: [jsxs(Slider, { children: [jsx(ImageContainer, { children: jsx(MotionConfig, { transition: {
+                                duration: animationDuration / 1000,
+                                ease: animationEase,
+                            }, children: jsxs(AnimatePresence, { initial: false, onExitComplete: () => setReady(true), children: [slider === 0 && (jsx(ImageContainerInner, { style: { position: 'absolute' }, children: graphics[0] }, "graphic-0")), slider === 1 && (jsx(ImageContainerInner, { style: { position: 'absolute' }, children: graphics[1] }, "graphic-1")), slider === 2 && (jsx(ImageContainerInner, { style: { position: 'absolute' }, children: graphics[2] }, "graphic-2"))] }) }) }), jsx(Slides, { ref: sliderRef, children: jsx(AnimatePresence, { children: slides.map((s, i) => (jsxs(Slide, { "$active": slider === i, children: [jsx(MobileImageContainer, { children: jsx(MotionConfig, { transition: {
+                                                duration: 0,
+                                            }, children: jsx(ImageContainerInner, { children: mobileGraphics[i] }) }) }), jsx(ModalContent, { style: { gap: 8, paddingBottom: 0 }, children: s.content })] }, s.key))) }) })] }), jsx(OrDivider, { children: jsx(Dots, { children: slides.map((s, i) => (jsx(Dot, { "$active": slider === i, onClick: () => {
+                            didInteract();
+                            gotoSlide(i);
+                        } }, s.key))) }) }), jsx(Button, { href: ctaUrl, arrow: true, children: locales.aboutScreen_ctaText })] }));
+};
+
+export { About as default };
+//# sourceMappingURL=index.js.map

package/build/components/Pages/About/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/components/Pages/About/styles.js

@@ -0,0 +1,142 @@
+import { motion } from 'framer-motion';
+import { css } from 'styled-components';
+import defaultTheme from '../../../constants/defaultTheme.js';
+import styled from '../../../styles/styled/index.js';
+
+const imageHeight = 208;
+const ImageContainer = styled.div `
+  pointer-events: none;
+  user-select: none;
+  height: ${imageHeight}px;
+  padding: 0 0 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  svg {
+    display: block;
+  }
+  @media only screen and (max-width: ${defaultTheme.mobileWidth}px) {
+    display: none;
+  }
+`;
+const ImageContainerInner = styled(motion.div) ``;
+const MobileImageContainer = styled.div `
+  pointer-events: none;
+  user-select: none;
+  height: ${imageHeight}px;
+  padding: 0 0 12px;
+  display: none;
+  align-items: center;
+  justify-content: center;
+  svg {
+    display: block;
+  }
+  @media only screen and (max-width: ${defaultTheme.mobileWidth}px) {
+    display: flex;
+  }
+`;
+const Slides = styled.div `
+  position: relative;
+`;
+const Slide = styled(motion.div) `
+  scroll-snap-type: x mandatory;
+  position: relative;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  width: 100%;
+  padding: 0 4px 8px;
+  /* will-change: transform, opacity; */
+  transition: 400ms 50ms cubic-bezier(0.16, 1, 0.3, 1);
+  transition-property: transform, opacity;
+  ${(props) => !props.$active &&
+    css `
+      pointer-events: none;
+      position: absolute;
+      opacity: 0;
+      transform: scale(0.95);
+      transition-duration: 300ms;
+      transition-delay: 0ms;
+    `}
+`;
+const Slider = styled.div `
+  --background: var(--ck-body-background-secondary);
+  --background-transparent: var(--ck-body-background-transparent, transparent);
+  position: relative;
+  padding: 0 0 4px;
+  border-radius: 16px;
+  @media only screen and (max-width: ${defaultTheme.mobileWidth}px) {
+    margin: 0 -24px;
+    ${Slides} {
+      position: relative;
+      z-index: 3;
+      display: flex;
+      overflow: auto;
+      scroll-behavior: smooth;
+      scroll-snap-type: x mandatory;
+      margin-top: -${imageHeight}px;
+      padding-top: ${imageHeight}px;
+      -ms-overflow-style: none; /* Internet Explorer 10+ */
+      scrollbar-width: none; /* Firefox */
+      &::-webkit-scrollbar {
+        display: none; /* Safari and Chrome */
+      }
+    }
+    ${Slide} {
+      position: relative;
+      opacity: 1;
+      transform: none;
+      flex-shrink: 0;
+      scroll-snap-align: start;
+    }
+  }
+`;
+const Dots = styled.div `
+  position: relative;
+  top: -1px;
+  display: flex;
+  justify-content: center;
+  pointer-events: auto;
+`;
+const Dot = styled.button `
+  display: flex;
+  align-items: center;
+  height: 28px;
+  padding: 2px;
+  background: none;
+  @media only screen and (max-width: ${defaultTheme.mobileWidth}px) {
+    padding: 4px;
+    &:before {
+      transform: none !important;
+    }
+  }
+  &:before {
+    content: '';
+    display: block;
+    width: 16px;
+    height: 3px;
+    opacity: 0.12;
+    border-radius: 4px;
+    background: var(--ck-accent-color, var(--ck-body-color));
+    transition: transform 200ms ease, opacity 180ms ease;
+  }
+  ${(props) => props.$active
+    ? css `
+          cursor: default;
+          &:before {
+            opacity: 1;
+          }
+        `
+    : !props.disabled &&
+        css `
+          cursor: pointer;
+          &:hover:before {
+            transform: scaleY(3.5);
+          }
+          &:active:before {
+          }
+        `}
+`;
+
+export { Dot, Dots, ImageContainer, ImageContainerInner, MobileImageContainer, Slide, Slider, Slides };
+//# sourceMappingURL=styles.js.map

package/build/components/Pages/About/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/components/Pages/AssetInventory/index.js

@@ -0,0 +1,66 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { formatUnits } from 'viem';
+import { useEthereumWalletAssets } from '../../../ethereum/hooks/useEthereumWalletAssets.js';
+import { ModalHeading } from '../../Common/Modal/styles.js';
+import { EmptyState } from '../BuyProviderSelect/styles.js';
+import { SelectTokenContent, TokenList, TokenContainer, TokenInfo, TokenSymbol, TokenBalance, TokenName } from '../SelectToken/styles.js';
+import { getAssetSymbol, getAssetDecimals, formatBalanceWithSymbol } from '../Send/utils.js';
+
+const ZERO = BigInt(0);
+const usdFormatter = new Intl.NumberFormat('en-US', {
+    style: 'currency',
+    currency: 'USD',
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2,
+});
+const AssetInventory = () => {
+    const { data: walletAssets, isLoading: isBalancesLoading } = useEthereumWalletAssets();
+    // Show all tokens for both buy and send flows
+    const selectableTokens = walletAssets || [];
+    const renderContent = () => {
+        if (!selectableTokens.length) {
+            if (isBalancesLoading) {
+                return jsx(EmptyState, { children: "Loading balances\u2026" });
+            }
+            return jsx(EmptyState, { children: "No supported tokens found for this network yet." });
+        }
+        return (jsx(TokenList, { children: selectableTokens.map((token) => {
+                var _a, _b, _c, _d, _e;
+                const key = token.type === 'erc20' ? token.address : 'native';
+                const displaySymbol = getAssetSymbol(token);
+                const displayName = ((_a = token.metadata) === null || _a === void 0 ? void 0 : _a.name) || displaySymbol || 'Unknown Token';
+                const decimals = getAssetDecimals(token);
+                const pricePerToken = (_c = (_b = token.metadata) === null || _b === void 0 ? void 0 : _b.fiat) === null || _c === void 0 ? void 0 : _c.value;
+                let usdValue = null;
+                // Show loading state for balances
+                const isBalanceLoaded = token.balance !== undefined;
+                const balanceDisplay = isBalanceLoaded
+                    ? formatBalanceWithSymbol(token.balance, decimals, ((_d = token.metadata) === null || _d === void 0 ? void 0 : _d.symbol) || '')
+                    : 'Loading...';
+                // Check if token has zero balance (for send flow opacity)
+                const hasZeroBalance = isBalanceLoaded && ((_e = token.balance) !== null && _e !== void 0 ? _e : ZERO) <= ZERO;
+                if (hasZeroBalance)
+                    return null;
+                if (isBalanceLoaded && pricePerToken !== undefined && token.balance !== undefined) {
+                    const amount = parseFloat(formatUnits(token.balance, decimals));
+                    if (Number.isFinite(amount)) {
+                        const totalUsd = amount * pricePerToken;
+                        if (totalUsd >= 0.01) {
+                            usdValue = usdFormatter.format(totalUsd);
+                        }
+                        else if (totalUsd > 0) {
+                            usdValue = '<$0.01';
+                        }
+                        else {
+                            usdValue = usdFormatter.format(0);
+                        }
+                    }
+                }
+                return (jsxs(TokenContainer, { children: [jsx(TokenInfo, { children: jsx(TokenSymbol, { children: displayName }) }), jsxs(TokenInfo, { children: [jsx(TokenBalance, { children: balanceDisplay }), usdValue ? jsx(TokenName, { style: { textAlign: 'end' }, children: usdValue }) : null] })] }, key));
+            }) }));
+    };
+    return (jsxs(SelectTokenContent, { children: [jsx(ModalHeading, { children: "Your assets" }), renderContent()] }));
+};
+
+export { AssetInventory };
+//# sourceMappingURL=index.js.map

package/build/components/Pages/AssetInventory/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/components/Pages/Buy/coinbaseApi.js

@@ -0,0 +1,106 @@
+import { SDKConfiguration } from '@openfort/openfort-js';
+import { getAssetSymbol } from '../Send/utils.js';
+
+const getBackendUrl = () => {
+    const sdkConfig = SDKConfiguration.getInstance();
+    return (sdkConfig === null || sdkConfig === void 0 ? void 0 : sdkConfig.backendUrl) || 'https://api.openfort.io';
+};
+// Map chain IDs to Coinbase network names
+const getNetworkName = (chainId) => {
+    const networkMap = {
+        1: 'ethereum',
+        8453: 'base',
+        137: 'polygon',
+        42161: 'arbitrum',
+        10: 'optimism',
+    };
+    return networkMap[chainId] || 'base';
+};
+// Coinbase supported currencies (more extensive than Stripe)
+const COINBASE_SUPPORTED_CURRENCIES = [
+    'btc',
+    'eth',
+    'usdc',
+    'usdt',
+    'matic',
+    'pol', // Polygon native token (rebranded from MATIC)
+    'sol',
+    'avax',
+    'atom',
+    'dot',
+    'link',
+    'uni',
+    'aave',
+    'comp',
+    'snx',
+    'mkr',
+    'dai',
+    'wld',
+    'xlm',
+];
+// Check if a token is supported by Coinbase
+const isCoinbaseSupported = (token) => {
+    const symbol = getAssetSymbol(token);
+    return COINBASE_SUPPORTED_CURRENCIES.includes(symbol.toLowerCase());
+};
+// Map token symbol to Coinbase currency code
+const getCurrencyCode = (token) => {
+    const symbol = getAssetSymbol(token);
+    const lowercaseSymbol = symbol.toLowerCase();
+    // Validate that the currency is supported by Coinbase
+    if (!COINBASE_SUPPORTED_CURRENCIES.includes(lowercaseSymbol)) {
+        throw new Error(`Unsupported currency for Coinbase: ${symbol}. Supported currencies are: ${COINBASE_SUPPORTED_CURRENCIES.join(', ')}`);
+    }
+    return symbol;
+};
+/**
+ * Create a Coinbase onramp session
+ * Supports three use cases based on provided parameters:
+ * 1. Basic session: Only required params (destinationAddress, destinationCurrency, destinationNetwork)
+ * 2. One-click URL: Required + sourceAmount + sourceCurrency
+ * 3. One-click with quote: One-click + paymentMethod + country (+ subdivision for US)
+ */
+const createCoinbaseSession = async (params) => {
+    const { token, chainId, publishableKey, ...rest } = params;
+    if (!publishableKey) {
+        throw new Error('Publishable key is required for authentication');
+    }
+    // Build request body with only provided parameters
+    const requestBody = {
+        provider: 'coinbase',
+        destinationCurrency: getCurrencyCode(token),
+        destinationNetwork: getNetworkName(chainId),
+        destinationAddress: rest.destinationAddress,
+    };
+    // Add optional parameters only if provided
+    if (rest.sourceAmount)
+        requestBody.sourceAmount = rest.sourceAmount;
+    if (rest.sourceCurrency)
+        requestBody.sourceCurrency = rest.sourceCurrency;
+    if (rest.paymentMethod)
+        requestBody.paymentMethod = rest.paymentMethod;
+    if (rest.country)
+        requestBody.country = rest.country;
+    if (rest.subdivision)
+        requestBody.subdivision = rest.subdivision;
+    if (rest.redirectUrl)
+        requestBody.redirectUrl = rest.redirectUrl;
+    if (rest.clientIp)
+        requestBody.clientIp = rest.clientIp;
+    const response = await fetch(`${getBackendUrl()}/v1/onramp/sessions`, {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+            Authorization: `Bearer ${publishableKey}`,
+        },
+        body: JSON.stringify(requestBody),
+    });
+    if (!response.ok) {
+        const errorData = await response.json().catch(() => ({}));
+        throw new Error(errorData.error || errorData.errorMessage || 'Failed to create Coinbase session');
+    }
+    return response.json();
+};
+
+export { createCoinbaseSession, isCoinbaseSupported };
+//# sourceMappingURL=coinbaseApi.js.map

package/build/components/Pages/Buy/coinbaseApi.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"coinbaseApi.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/components/Pages/Buy/index.js

@@ -0,0 +1,88 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useMemo, useEffect } from 'react';
+import { useEthereumWalletAssets } from '../../../ethereum/hooks/useEthereumWalletAssets.js';
+import useLocales from '../../../hooks/useLocales.js';
+import Button from '../../Common/Button/index.js';
+import { Arrow, ArrowChevron } from '../../Common/Button/styles.js';
+import { ModalHeading, ModalBody } from '../../Common/Modal/styles.js';
+import { routes } from '../../Openfort/types.js';
+import { useOpenfort } from '../../Openfort/useOpenfort.js';
+import { PageContent } from '../../PageContent/index.js';
+import { sanitizeForParsing, sanitizeAmountInput, isSameToken, getAssetSymbol } from '../Send/utils.js';
+import { Section, SectionLabel, AmountCard, CurrencySymbol, AmountInput, PresetList, PresetButton, SelectorButton, SelectorContent, SelectorTitle, SelectorSubtitle, SelectorRight, ContinueButtonWrapper } from './styles.js';
+import { createCurrencyFormatter, getCurrencySymbol } from './utils.js';
+
+const amountPresets = [10, 20, 50];
+const Buy = () => {
+    var _a;
+    const { buyForm, setBuyForm, setRoute, triggerResize } = useOpenfort();
+    const locales = useLocales();
+    const { data: assets } = useEthereumWalletAssets();
+    const [pressedPreset, setPressedPreset] = useState(null);
+    const fiatAmount = useMemo(() => {
+        const normalizedAmount = sanitizeForParsing(sanitizeAmountInput(buyForm.amount));
+        if (!normalizedAmount)
+            return null;
+        const numeric = Number(normalizedAmount);
+        if (!Number.isFinite(numeric))
+            return null;
+        return numeric;
+    }, [buyForm.amount]);
+    // Trigger resize on mount
+    useEffect(() => {
+        triggerResize();
+    }, [triggerResize]);
+    const matchedToken = useMemo(() => assets === null || assets === void 0 ? void 0 : assets.find((asset) => isSameToken(asset, buyForm.asset)), [assets, buyForm.asset]);
+    const selectedTokenOption = matchedToken !== null && matchedToken !== void 0 ? matchedToken : assets === null || assets === void 0 ? void 0 : assets[0];
+    const selectedToken = selectedTokenOption !== null && selectedTokenOption !== void 0 ? selectedTokenOption : buyForm.asset;
+    const tokenSymbol = getAssetSymbol(selectedToken);
+    const tokenName = ((_a = selectedToken.metadata) === null || _a === void 0 ? void 0 : _a.name) || tokenSymbol;
+    const currencyFormatter = useMemo(() => createCurrencyFormatter(buyForm.currency), [buyForm.currency]);
+    const currencySymbol = useMemo(() => getCurrencySymbol(buyForm.currency), [buyForm.currency]);
+    const handleAmountChange = (event) => {
+        const raw = sanitizeAmountInput(event.target.value);
+        if (raw === '' || /^[0-9]*\.?[0-9]*$/.test(raw)) {
+            setPressedPreset(null);
+            setBuyForm((prev) => ({
+                ...prev,
+                amount: raw,
+            }));
+        }
+    };
+    const handleAmountBlur = () => {
+        const normalized = sanitizeForParsing(sanitizeAmountInput(buyForm.amount));
+        if (normalized) {
+            const numeric = Number(normalized);
+            if (Number.isFinite(numeric) && numeric > 0) {
+                setBuyForm((prev) => ({
+                    ...prev,
+                    amount: numeric.toFixed(2),
+                }));
+            }
+        }
+    };
+    const handlePresetClick = (value) => {
+        setPressedPreset(value);
+        setBuyForm((prev) => ({
+            ...prev,
+            amount: value.toFixed(2),
+        }));
+    };
+    const handleOpenTokenSelector = () => {
+        setRoute(routes.BUY_TOKEN_SELECT);
+    };
+    const handleContinue = () => {
+        if (fiatAmount === null || fiatAmount <= 0)
+            return;
+        setRoute(routes.BUY_SELECT_PROVIDER);
+    };
+    const handleBack = () => {
+        setRoute(routes.CONNECTED);
+    };
+    const isPresetSelected = (value) => pressedPreset === value;
+    const step1Disabled = fiatAmount === null || fiatAmount <= 0;
+    return (jsxs(PageContent, { onBack: handleBack, children: [jsx(ModalHeading, { children: locales.buyScreen_heading }), jsx(ModalBody, { children: locales.buyScreen_subheading }), jsxs(Section, { children: [jsx(SectionLabel, { children: "Amount" }), jsxs(AmountCard, { children: [jsx(CurrencySymbol, { children: currencySymbol }), jsx(AmountInput, { value: buyForm.amount, onChange: handleAmountChange, onBlur: handleAmountBlur, placeholder: "0.00", inputMode: "decimal", autoComplete: "off" })] }), jsx(PresetList, { children: amountPresets.map((preset) => (jsx(PresetButton, { type: "button", onClick: () => handlePresetClick(preset), "$active": isPresetSelected(preset), children: currencyFormatter.format(preset) }, preset))) })] }), jsxs(Section, { children: [jsx(SectionLabel, { children: "Asset" }), jsxs(SelectorButton, { type: "button", onClick: handleOpenTokenSelector, children: [jsxs(SelectorContent, { children: [jsx(SelectorTitle, { children: tokenSymbol || 'Select asset' }), jsx(SelectorSubtitle, { children: tokenName })] }), jsx(SelectorRight, { children: jsx(Arrow, { width: "13", height: "12", viewBox: "0 0 13 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx(ArrowChevron, { stroke: "currentColor", d: "M7.51431 1.5L11.757 5.74264M7.5 10.4858L11.7426 6.24314", strokeWidth: "2", strokeLinecap: "round" }) }) })] })] }), jsx(ContinueButtonWrapper, { children: jsx(Button, { variant: "primary", onClick: handleContinue, disabled: step1Disabled, children: "Continue" }) })] }));
+};
+
+export { Buy as default };
+//# sourceMappingURL=index.js.map

package/build/components/Pages/Buy/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/components/Pages/Buy/onrampApi.js

@@ -0,0 +1,57 @@
+import { SDKConfiguration } from '@openfort/openfort-js';
+import { getAssetSymbol } from '../Send/utils.js';
+
+const getBackendUrl = () => {
+    const sdkConfig = SDKConfiguration.getInstance();
+    return (sdkConfig === null || sdkConfig === void 0 ? void 0 : sdkConfig.backendUrl) || 'https://api.openfort.io';
+};
+// Map chain IDs to network names
+const getNetworkName = (chainId) => {
+    const networkMap = {
+        1: 'ethereum',
+        8453: 'base',
+        137: 'polygon',
+        42161: 'arbitrum',
+        10: 'optimism',
+    };
+    return networkMap[chainId] || 'base';
+};
+// Map token symbol to currency code
+const getCurrencyCode = (token) => {
+    return getAssetSymbol(token).toLowerCase();
+};
+/**
+ * Get quotes from all available providers
+ * Calls the backend without specifying a provider to get quotes from all providers
+ */
+const getAllQuotes = async (params) => {
+    const { token, chainId, publishableKey, sourceCurrency, sourceAmount } = params;
+    if (!publishableKey) {
+        throw new Error('Publishable key is required for authentication');
+    }
+    // Build request body WITHOUT provider to get all quotes
+    const requestBody = {
+        destinationCurrency: getCurrencyCode(token),
+        destinationNetwork: getNetworkName(chainId),
+        sourceCurrency: sourceCurrency.toLowerCase(),
+        sourceAmount,
+    };
+    const response = await fetch(`${getBackendUrl()}/v1/onramp/quotes`, {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+            Authorization: `Bearer ${publishableKey}`,
+        },
+        body: JSON.stringify(requestBody),
+    });
+    if (!response.ok) {
+        const errorData = await response.json().catch(() => ({}));
+        throw new Error(errorData.error || errorData.errorMessage || 'Failed to fetch quotes');
+    }
+    const data = await response.json();
+    // Backend returns array when provider is not specified
+    return Array.isArray(data) ? data : [data];
+};
+
+export { getAllQuotes };
+//# sourceMappingURL=onrampApi.js.map

package/build/components/Pages/Buy/onrampApi.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"onrampApi.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/components/Pages/Buy/providers.js

@@ -0,0 +1,39 @@
+const PROVIDERS = [
+    {
+        id: 'coinbase',
+        name: 'Coinbase',
+        feeBps: 250,
+        highlight: 'best',
+    },
+    {
+        id: 'stripe',
+        name: 'Stripe',
+        feeBps: 405,
+        highlight: 'fast',
+    },
+];
+const getProviders = () => PROVIDERS;
+/**
+ * Get provider quotes - for now returns mock data until real quote is fetched
+ */
+const getProviderQuotes = (amount) => {
+    return PROVIDERS.map((provider) => {
+        if (amount === null || Number.isNaN(amount) || amount <= 0) {
+            return {
+                provider,
+                netAmount: null,
+                feeAmount: null,
+            };
+        }
+        const feeAmount = +(amount * (provider.feeBps / 10000)).toFixed(2);
+        const netAmount = Math.max(amount - feeAmount, 0);
+        return {
+            provider,
+            netAmount,
+            feeAmount,
+        };
+    });
+};
+
+export { getProviderQuotes, getProviders };
+//# sourceMappingURL=providers.js.map

package/build/components/Pages/Buy/providers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"providers.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}