@openfort/react 0.3.2 → 1.0.1

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

@@ -0,0 +1,74 @@
+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 Stripe network names
+const getNetworkName = (chainId) => {
+    const networkMap = {
+        1: 'ethereum',
+        8453: 'base',
+        137: 'polygon',
+        42161: 'arbitrum',
+        10: 'optimism',
+    };
+    return networkMap[chainId] || 'base';
+};
+// Stripe supported currencies
+const STRIPE_SUPPORTED_CURRENCIES = ['btc', 'eth', 'xlm', 'matic', 'pol', 'sol', 'usdc', 'avax', 'wld'];
+// Check if a token is supported by Stripe
+const isStripeSupported = (token) => {
+    const symbol = getAssetSymbol(token);
+    return STRIPE_SUPPORTED_CURRENCIES.includes(symbol.toLowerCase());
+};
+// Map token symbol to Stripe currency code
+const getCurrencyCode = (token) => {
+    const symbol = getAssetSymbol(token);
+    const lowercaseSymbol = symbol.toLowerCase();
+    // Validate that the currency is supported by Stripe
+    if (!STRIPE_SUPPORTED_CURRENCIES.includes(lowercaseSymbol)) {
+        throw new Error(`Unsupported currency for Stripe: ${symbol}. Supported currencies are: ${STRIPE_SUPPORTED_CURRENCIES.join(', ')}`);
+    }
+    return lowercaseSymbol;
+};
+/**
+ * Create a Stripe onramp session
+ * Calls backend API to create a prefilled session with wallet addresses and amounts
+ */
+const createStripeSession = async (params) => {
+    const { token, chainId, publishableKey, destinationAddress, sourceAmount, sourceCurrency, redirectUrl } = params;
+    if (!publishableKey) {
+        throw new Error('Publishable key is required for authentication');
+    }
+    const destinationCurrency = getCurrencyCode(token);
+    const destinationNetwork = getNetworkName(chainId);
+    // Build request body for backend API
+    const requestBody = {
+        provider: 'stripe',
+        destinationCurrency,
+        destinationNetwork,
+        destinationAddress,
+        sourceAmount,
+        sourceCurrency: sourceCurrency === null || sourceCurrency === void 0 ? void 0 : sourceCurrency.toLowerCase(),
+        redirectUrl,
+    };
+    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 Stripe session');
+    }
+    const data = await response.json();
+    return data;
+};
+
+export { createStripeSession, isStripeSupported };
+//# sourceMappingURL=stripeApi.js.map

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

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

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

@@ -0,0 +1,230 @@
+import styled from '../../../styles/styled/index.js';
+import { ButtonContainer } from '../../Common/Button/styles.js';
+
+const Section = styled.div `
+  display: flex;
+  flex-direction: column;
+  margin-top: 20px;
+  gap: 12px;
+`;
+const SectionLabel = styled.span `
+  font-size: 13px;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+  color: var(--ck-body-color-muted);
+`;
+const AmountCard = styled.div `
+  display: flex;
+  align-items: baseline;
+  gap: 12px;
+  padding: 18px 20px;
+  border-radius: var(--ck-secondary-button-border-radius);
+  border: 1px solid var(--ck-body-divider);
+  background: var(--ck-secondary-button-background);
+  color: var(--ck-body-color);
+`;
+const CurrencySymbol = styled.span `
+  font-size: 28px;
+  font-weight: 600;
+  color: var(--ck-body-color-muted);
+  line-height: 1;
+`;
+const AmountInput = styled.input `
+  flex: 1;
+  border: none;
+  background: transparent;
+  color: var(--ck-body-color);
+  font-size: 44px;
+  font-weight: 600;
+  line-height: 1;
+  padding: 0;
+  outline: none;
+  width: 100%;
+
+  &::placeholder {
+    color: var(--ck-body-color-muted);
+  }
+`;
+const PresetList = styled.div `
+  display: flex;
+  gap: 10px;
+  width: 100%;
+`;
+const PresetButton = styled.button `
+  flex: 1;
+  padding: 10px 14px;
+  border-radius: 999px;
+  border: none;
+  background: ${({ $active }) => ($active ? 'var(--ck-accent-color)' : 'var(--ck-secondary-button-background)')};
+  color: ${({ $active }) => ($active ? 'var(--ck-accent-text-color)' : 'var(--ck-body-color)')};
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+
+  &:hover {
+    background: ${({ $active }) => ($active ? 'var(--ck-accent-color)' : 'var(--ck-secondary-button-hover-background)')};
+  }
+`;
+const SelectorButton = styled.button `
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 14px 16px;
+  border-radius: var(--ck-secondary-button-border-radius);
+  border: 1px solid var(--ck-body-divider);
+  background: var(--ck-secondary-button-background);
+  color: var(--ck-body-color);
+  cursor: pointer;
+  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
+  text-align: left;
+
+  &:hover {
+    background: var(--ck-secondary-button-hover-background);
+    border-color: var(--ck-body-color-muted);
+  }
+`;
+const SelectorContent = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  overflow: hidden;
+`;
+const SelectorTitle = styled.span `
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--ck-body-color);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+const SelectorSubtitle = styled.span `
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--ck-body-color-muted);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+const SelectorRight = styled.div `
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: var(--ck-body-color-muted);
+`;
+const ContinueButtonWrapper = styled.div `
+  margin-top: 24px;
+  display: flex;
+  gap: 12px;
+
+  > button {
+    flex: 1;
+  }
+
+  ${ButtonContainer} {
+    margin: 0;
+  }
+`;
+const StackedButtonWrapper = styled.div `
+  display: flex;
+  gap: 12px;
+
+  > button {
+    flex: 1;
+  }
+`;
+const ProviderList = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  margin-top: 12px;
+`;
+const ProviderButton = styled.button `
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 14px 16px;
+  border-radius: var(--ck-secondary-button-border-radius);
+  border: 1px solid ${({ $active }) => ($active ? 'var(--ck-focus-color)' : 'var(--ck-body-divider)')};
+  background: var(--ck-secondary-button-background);
+  color: var(--ck-body-color);
+  cursor: pointer;
+  transition: background 150ms ease, border-color 150ms ease, color 150ms ease, opacity 150ms ease;
+  text-align: left;
+
+  &:hover:not(:disabled) {
+    background: var(--ck-secondary-button-hover-background);
+    border-color: ${({ $active }) => ($active ? 'var(--ck-focus-color)' : 'var(--ck-body-color-muted)')};
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+`;
+const ProviderInfo = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  overflow: hidden;
+`;
+const ProviderNameRow = styled.div `
+  display: flex;
+  align-items: center;
+  gap: 8px;
+`;
+const ProviderName = styled.span `
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--ck-body-color);
+`;
+const ProviderBadge = styled.span `
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+  padding: 4px 8px;
+  border-radius: 999px;
+  background: var(--ck-secondary-button-hover-background);
+  color: var(--ck-body-color-muted);
+`;
+const ProviderMeta = styled.span `
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--ck-body-color-muted);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+const ProviderRight = styled.div `
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 4px;
+  white-space: nowrap;
+`;
+const ProviderQuote = styled.span `
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--ck-body-color);
+`;
+const ProviderFiat = styled.span `
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--ck-body-color-muted);
+`;
+const PendingContainer = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 20px auto 32px;
+  height: 120px;
+`;
+
+export { AmountCard, AmountInput, ContinueButtonWrapper, CurrencySymbol, PendingContainer, PresetButton, PresetList, ProviderBadge, ProviderButton, ProviderFiat, ProviderInfo, ProviderList, ProviderMeta, ProviderName, ProviderNameRow, ProviderQuote, ProviderRight, Section, SectionLabel, SelectorButton, SelectorContent, SelectorRight, SelectorSubtitle, SelectorTitle, StackedButtonWrapper };
+//# sourceMappingURL=styles.js.map

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

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

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

@@ -0,0 +1,71 @@
+const createCurrencyFormatter = (currency) => {
+    try {
+        return new Intl.NumberFormat('en-US', {
+            style: 'currency',
+            currency,
+            minimumFractionDigits: 2,
+            maximumFractionDigits: 2,
+        });
+    }
+    catch {
+        return new Intl.NumberFormat('en-US', {
+            style: 'currency',
+            currency: 'USD',
+            minimumFractionDigits: 2,
+            maximumFractionDigits: 2,
+        });
+    }
+};
+const getCurrencySymbol = (currency) => {
+    var _a, _b;
+    try {
+        const parts = new Intl.NumberFormat('en-US', {
+            style: 'currency',
+            currency,
+        }).formatToParts(0);
+        return (_b = (_a = parts.find((part) => part.type === 'currency')) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : '$';
+    }
+    catch {
+        return '$';
+    }
+};
+/**
+ * Formats a number with dynamic decimal places between 2 and 6
+ * Removes trailing zeros but ensures at least 2 decimals
+ */
+const formatWithDynamicDecimals = (amount) => {
+    const MIN_DECIMALS = 2;
+    const MAX_DECIMALS = 6;
+    // Format with max decimals, remove trailing zeros, then ensure min decimals
+    const formatted = amount.toFixed(MAX_DECIMALS);
+    const withoutTrailingZeros = Number.parseFloat(formatted).toString();
+    // If it has a decimal point, check if we need to pad to MIN_DECIMALS
+    if (withoutTrailingZeros.includes('.')) {
+        const [integer, decimal] = withoutTrailingZeros.split('.');
+        if (decimal.length < MIN_DECIMALS) {
+            return `${integer}.${decimal.padEnd(MIN_DECIMALS, '0')}`;
+        }
+        return withoutTrailingZeros;
+    }
+    // No decimal point, add MIN_DECIMALS
+    return amount.toFixed(MIN_DECIMALS);
+};
+/**
+ * Formats a token amount with appropriate decimal places
+ * Handles special cases: 0 shows as "0", values less than 0.000001 show as "<0.000001"
+ */
+const formatTokenAmount = (amount, includeSymbol) => {
+    // Handle zero case
+    if (amount === 0) {
+        return includeSymbol ? `0 ${includeSymbol}` : '0';
+    }
+    // Handle very small amounts
+    if (amount > 0 && amount < 0.000001) {
+        return includeSymbol ? `<0.000001 ${includeSymbol}` : '<0.000001';
+    }
+    const formatted = formatWithDynamicDecimals(amount);
+    return includeSymbol ? `${formatted} ${includeSymbol}` : formatted;
+};
+
+export { createCurrencyFormatter, formatTokenAmount, formatWithDynamicDecimals, getCurrencySymbol };
+//# sourceMappingURL=utils.js.map

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

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

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

@@ -0,0 +1,47 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { ChainTypeEnum } from '@openfort/openfort-js';
+import { useEffect } from 'react';
+import { ExternalLinkIcon } from '../../../assets/icons.js';
+import { useEthereumEmbeddedWallet } from '../../../ethereum/hooks/useEthereumEmbeddedWallet.js';
+import { useOpenfortCore } from '../../../openfort/useOpenfort.js';
+import { getExplorerUrl } from '../../../shared/utils/explorer.js';
+import { useSolanaEmbeddedWallet } from '../../../solana/hooks/useSolanaEmbeddedWallet.js';
+import Button from '../../Common/Button/index.js';
+import { ModalContent, ModalH1, 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 { Section, ContinueButtonWrapper } from '../Buy/styles.js';
+
+const BuyComplete = () => {
+    const { setRoute, triggerResize } = useOpenfort();
+    const { chainType } = useOpenfortCore();
+    // Use chain-specific hooks
+    const ethereumWallet = useEthereumEmbeddedWallet();
+    const solanaWallet = useSolanaEmbeddedWallet();
+    const wallet = chainType === ChainTypeEnum.EVM ? ethereumWallet : solanaWallet;
+    const isConnected = wallet.status === 'connected';
+    const address = isConnected ? wallet.address : undefined;
+    const chainId = isConnected && chainType === ChainTypeEnum.EVM ? wallet.chainId : undefined;
+    // Trigger resize on mount
+    useEffect(() => {
+        triggerResize();
+    }, [triggerResize]);
+    // Clean up sessionStorage (SSR-safe)
+    useEffect(() => {
+        if (typeof sessionStorage !== 'undefined') {
+            sessionStorage.removeItem('buyPopupOpen');
+        }
+    }, []);
+    const handleDone = () => {
+        setRoute(routes.CONNECTED);
+    };
+    const handleBack = () => {
+        setRoute(routes.CONNECTED);
+    };
+    const blockExplorerUrl = address && chainId ? getExplorerUrl(ChainTypeEnum.EVM, { chainId, address }) : '';
+    return (jsx(PageContent, { onBack: handleBack, children: jsxs(ModalContent, { style: { paddingBottom: 18, textAlign: 'center' }, children: [jsx(ModalH1, { children: "Provider Finished" }), jsx(ModalBody, { style: { marginTop: 24 }, children: "The provider flow has been completed. You can view your wallet on the block explorer to check your transactions." }), jsxs(Section, { style: { marginTop: 24 }, children: [blockExplorerUrl && (jsx(ContinueButtonWrapper, { style: { marginTop: 0 }, children: jsx(Button, { variant: "secondary", onClick: () => window.open(blockExplorerUrl, '_blank', 'noopener,noreferrer'), children: jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '8px' }, children: [jsx("span", { children: "View Wallet Transactions" }), jsx(ExternalLinkIcon, {})] }) }) })), jsx(ContinueButtonWrapper, { style: { marginTop: blockExplorerUrl ? 4 : 0 }, children: jsx(Button, { variant: "primary", onClick: handleDone, children: "Done" }) })] })] }) }));
+};
+
+export { BuyComplete as default };
+//# sourceMappingURL=index.js.map

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

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

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

@@ -0,0 +1,231 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { ChainTypeEnum } from '@openfort/openfort-js';
+import { useState, useMemo, useEffect } from 'react';
+import Logos from '../../../assets/logos.js';
+import { useEthereumEmbeddedWallet } from '../../../ethereum/hooks/useEthereumEmbeddedWallet.js';
+import { useEthereumWalletAssets } from '../../../ethereum/hooks/useEthereumWalletAssets.js';
+import { useOpenfortCore } from '../../../openfort/useOpenfort.js';
+import { useSolanaEmbeddedWallet } from '../../../solana/hooks/useSolanaEmbeddedWallet.js';
+import Button from '../../Common/Button/index.js';
+import { ModalContent, ModalHeading, ModalBody } from '../../Common/Modal/styles.js';
+import SquircleSpinner from '../../Common/SquircleSpinner/index.js';
+import { routes } from '../../Openfort/types.js';
+import { useOpenfort } from '../../Openfort/useOpenfort.js';
+import { PageContent } from '../../PageContent/index.js';
+import { createCoinbaseSession } from '../Buy/coinbaseApi.js';
+import { createStripeSession } from '../Buy/stripeApi.js';
+import { ContinueButtonWrapper, PendingContainer, StackedButtonWrapper } from '../Buy/styles.js';
+import { isSameToken } from '../Send/utils.js';
+
+const BuyProcessing = () => {
+    const { buyForm, setRoute, triggerResize, publishableKey } = useOpenfort();
+    const { chainType } = useOpenfortCore();
+    // Use chain-specific hooks
+    const ethereumWallet = useEthereumEmbeddedWallet();
+    const solanaWallet = useSolanaEmbeddedWallet();
+    const wallet = chainType === ChainTypeEnum.EVM ? ethereumWallet : solanaWallet;
+    const isConnected = wallet.status === 'connected';
+    const address = isConnected ? wallet.address : undefined;
+    const chainId = isConnected && chainType === ChainTypeEnum.EVM ? wallet.chainId : undefined;
+    const [popupWindow, setPopupWindow] = useState(null);
+    const [showContinueButton, setShowContinueButton] = useState(false);
+    const [isCreatingSession, setIsCreatingSession] = useState(true);
+    const [sessionError, setSessionError] = useState(false);
+    const { data: assets } = useEthereumWalletAssets();
+    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 fiatAmount = useMemo(() => {
+        const normalized = buyForm.amount;
+        if (!normalized)
+            return null;
+        const numeric = Number(normalized);
+        if (!Number.isFinite(numeric))
+            return null;
+        return numeric;
+    }, [buyForm.amount]);
+    // Create session and open popup on mount
+    useEffect(() => {
+        const createSessionAndOpenPopup = async () => {
+            if (!address || !chainId || !fiatAmount || fiatAmount <= 0) {
+                setRoute(routes.BUY_SELECT_PROVIDER);
+                return;
+            }
+            setIsCreatingSession(true);
+            setSessionError(false);
+            try {
+                let onrampUrl = null;
+                // Create session based on selected provider
+                if (buyForm.providerId === 'coinbase') {
+                    const session = await createCoinbaseSession({
+                        token: selectedToken,
+                        chainId,
+                        publishableKey,
+                        destinationAddress: address,
+                        sourceAmount: fiatAmount.toFixed(2),
+                        sourceCurrency: buyForm.currency,
+                        redirectUrl: `${window.location.origin}?coinbase_onramp=success`,
+                    });
+                    onrampUrl = session.onrampUrl;
+                }
+                else if (buyForm.providerId === 'stripe') {
+                    const session = await createStripeSession({
+                        token: selectedToken,
+                        chainId,
+                        publishableKey,
+                        destinationAddress: address,
+                        sourceAmount: fiatAmount.toFixed(2),
+                        sourceCurrency: buyForm.currency,
+                        redirectUrl: `${window.location.origin}?stripe_onramp=success`,
+                    });
+                    onrampUrl = session.onrampUrl;
+                }
+                if (!onrampUrl) {
+                    setSessionError(true);
+                    return;
+                }
+                // Coinbase onramp rejects requests when fiatCurrency is set to a non-USD currency (e.g. EUR).
+                // Strip the param so it uses the user's default currency instead.
+                const url = new URL(onrampUrl);
+                url.searchParams.delete('fiatCurrency');
+                const sanitizedProviderUrl = url.toString();
+                if (typeof window !== 'undefined') {
+                    const popupWidth = 500;
+                    const popupHeight = 700;
+                    const dualScreenLeft = window.screenLeft !== undefined ? window.screenLeft : window.screenX;
+                    const dualScreenTop = window.screenTop !== undefined ? window.screenTop : window.screenY;
+                    const width = window.innerWidth
+                        ? window.innerWidth
+                        : document.documentElement.clientWidth
+                            ? document.documentElement.clientWidth
+                            : screen.width;
+                    const height = window.innerHeight
+                        ? window.innerHeight
+                        : document.documentElement.clientHeight
+                            ? document.documentElement.clientHeight
+                            : screen.height;
+                    const left = width / 2 - popupWidth / 2 + dualScreenLeft;
+                    const top = height / 2 - popupHeight / 2 + dualScreenTop;
+                    const popup = window.open(sanitizedProviderUrl, 'BuyPopup', `scrollbars=yes,width=${popupWidth},height=${popupHeight},top=${top},left=${left}`);
+                    if (popup) {
+                        setPopupWindow(popup);
+                    }
+                    else {
+                        setSessionError(true);
+                    }
+                }
+            }
+            catch (_error) {
+                setSessionError(true);
+            }
+            finally {
+                setIsCreatingSession(false);
+            }
+        };
+        createSessionAndOpenPopup();
+    }, []); // Only run once on mount
+    // Trigger resize on mount and when state changes
+    useEffect(() => {
+        triggerResize();
+    }, [triggerResize, isCreatingSession, showContinueButton, sessionError]);
+    // Show continue button after 2 seconds
+    useEffect(() => {
+        if (isCreatingSession)
+            return;
+        setShowContinueButton(false);
+        const timer = setTimeout(() => {
+            setShowContinueButton(true);
+        }, 2000);
+        return () => clearTimeout(timer);
+    }, [isCreatingSession]);
+    // Monitor popup window for redirect or close
+    useEffect(() => {
+        if (!popupWindow || isCreatingSession)
+            return;
+        const checkPopup = setInterval(() => {
+            try {
+                // Check if popup is closed
+                if (popupWindow.closed) {
+                    clearInterval(checkPopup);
+                    setPopupWindow(null);
+                    // Only auto-advance for Coinbase
+                    if (buyForm.providerId === 'coinbase') {
+                        setRoute(routes.BUY_COMPLETE);
+                    }
+                    return;
+                }
+                // Try to check if popup has redirected to our success URL
+                try {
+                    const popupUrl = popupWindow.location.href;
+                    if (popupUrl.includes('coinbase_onramp=success') || popupUrl.includes('stripe_onramp=success')) {
+                        popupWindow.close();
+                        setPopupWindow(null);
+                        setRoute(routes.BUY_COMPLETE);
+                        clearInterval(checkPopup);
+                    }
+                }
+                catch (_e) {
+                    // Cross-origin error is expected while on provider domain
+                    // We can't read the URL until it redirects back to our domain
+                }
+            }
+            catch (_error) {
+                // Handle any other errors
+                clearInterval(checkPopup);
+            }
+        }, 500);
+        return () => {
+            clearInterval(checkPopup);
+        };
+    }, [popupWindow, buyForm.providerId, setRoute, isCreatingSession]);
+    const handleCancel = () => {
+        if (popupWindow && !popupWindow.closed) {
+            popupWindow.close();
+        }
+        setPopupWindow(null);
+        setRoute(routes.BUY);
+    };
+    const handleContinue = () => {
+        if (popupWindow && !popupWindow.closed) {
+            popupWindow.close();
+        }
+        setPopupWindow(null);
+        setRoute(routes.BUY_COMPLETE);
+    };
+    const handleBack = () => {
+        if (popupWindow && !popupWindow.closed) {
+            popupWindow.close();
+        }
+        setPopupWindow(null);
+        setRoute(routes.BUY_SELECT_PROVIDER);
+    };
+    if (sessionError) {
+        return (jsx(PageContent, { onBack: handleBack, children: jsxs(ModalContent, { style: { paddingBottom: 18, textAlign: 'center' }, children: [jsx(ModalHeading, { children: "Error" }), jsxs(ModalBody, { children: ["Failed to create payment session.", jsx("br", {}), "Please try again."] }), jsx(ContinueButtonWrapper, { style: { marginTop: 24 }, children: jsx(Button, { variant: "primary", onClick: handleBack, children: "Go Back" }) })] }) }));
+    }
+    const isStripe = buyForm.providerId === 'stripe';
+    const isCoinbase = buyForm.providerId === 'coinbase';
+    const isProvider = isStripe || isCoinbase;
+    if (isCreatingSession) {
+        return (jsx(PageContent, { onBack: handleBack, children: jsxs(ModalContent, { style: { paddingBottom: 18, textAlign: 'center' }, children: [jsx(ModalHeading, { children: "Creating Session" }), jsx(ModalBody, { children: "Please wait..." }), jsx(PendingContainer, { children: jsx(SquircleSpinner, { logo: isProvider ? (jsxs("div", { style: {
+                                    padding: '12px',
+                                    position: 'relative',
+                                    width: '100%',
+                                    height: '100%',
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    justifyContent: 'center',
+                                }, children: [isStripe && jsx(Logos.Stripe, {}), isCoinbase && jsx(Logos.CoinbasePay, {})] })) : undefined, connecting: true }) })] }) }));
+    }
+    return (jsx(PageContent, { onBack: handleCancel, children: jsxs(ModalContent, { style: { paddingBottom: 18, textAlign: 'center' }, children: [jsx(ModalHeading, { children: "Processing Purchase" }), jsx(ModalBody, { children: "Complete the purchase in the popup window..." }), jsx(PendingContainer, { children: jsx(SquircleSpinner, { logo: jsxs("div", { style: {
+                                padding: '12px',
+                                position: 'relative',
+                                width: '100%',
+                                height: '100%',
+                                display: 'flex',
+                                alignItems: 'center',
+                                justifyContent: 'center',
+                            }, children: [isStripe && jsx(Logos.Stripe, {}), isCoinbase && jsx(Logos.CoinbasePay, {}), !isStripe && !isCoinbase && jsx(Logos.Openfort, {})] }), connecting: true }) }), showContinueButton && jsx(ModalBody, { children: "Click Continue when you are done." }), showContinueButton && (jsxs(Fragment, { children: [jsx(StackedButtonWrapper, { children: jsx(Button, { variant: "primary", onClick: handleContinue, children: "Continue" }) }), jsx(StackedButtonWrapper, { children: jsx(Button, { variant: "secondary", onClick: handleCancel, children: "Cancel" }) })] }))] }) }));
+};
+
+export { BuyProcessing as default };
+//# sourceMappingURL=index.js.map

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

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