@openfort/react 0.3.2 → 1.0.0

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

@@ -0,0 +1,55 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useMemo, useEffect } from 'react';
+import { ModalHeading, ModalBody } from '../../Common/Modal/styles.js';
+import { routes } from '../../Openfort/types.js';
+import { useOpenfort } from '../../Openfort/useOpenfort.js';
+import { getProviderQuotes, getProviders } from '../Buy/providers.js';
+import { createCurrencyFormatter } from '../Buy/utils.js';
+import { sanitizeForParsing, sanitizeAmountInput, getAssetSymbol } from '../Send/utils.js';
+import { ProviderSelectContent, EmptyState, ProviderList, ProviderButton, ProviderInfo, ProviderNameRow, ProviderName, ProviderBadge, ProviderMeta, ProviderRight, ProviderQuote, ProviderFiat } from './styles.js';
+
+const BuyProviderSelect = () => {
+    const { buyForm, setBuyForm, setRoute, triggerResize } = useOpenfort();
+    const providers = getProviders();
+    const normalizedAmount = sanitizeForParsing(sanitizeAmountInput(buyForm.amount));
+    const fiatAmount = useMemo(() => {
+        if (!normalizedAmount)
+            return null;
+        const numeric = Number(normalizedAmount);
+        if (!Number.isFinite(numeric))
+            return null;
+        return numeric;
+    }, [normalizedAmount]);
+    const quotes = useMemo(() => getProviderQuotes(fiatAmount), [fiatAmount]);
+    useEffect(() => {
+        triggerResize();
+    }, [quotes.length]);
+    const currencyFormatter = useMemo(() => createCurrencyFormatter(buyForm.currency), [buyForm.currency]);
+    const tokenSymbol = getAssetSymbol(buyForm.asset);
+    const handleSelect = (id) => {
+        setBuyForm((prev) => ({
+            ...prev,
+            providerId: id,
+        }));
+        setRoute(routes.BUY);
+    };
+    const renderProviders = () => {
+        if (!providers.length) {
+            return jsx(EmptyState, { children: "No providers available right now." });
+        }
+        return (jsx(ProviderList, { children: providers.map((provider) => {
+                const quote = quotes.find((item) => item.provider.id === provider.id);
+                const netDisplay = quote && quote.netAmount !== null ? `${quote.netAmount.toFixed(2)} ${tokenSymbol}` : '--';
+                const fiatDisplay = fiatAmount !== null ? currencyFormatter.format(fiatAmount) : '--';
+                const feePercentage = (provider.feeBps / 100).toFixed(2);
+                const highlight = provider.highlight === 'best' ? 'Best price' : provider.highlight === 'fast' ? 'Fastest' : null;
+                const metaText = `Fee ${feePercentage}%`;
+                const isActive = buyForm.providerId === provider.id;
+                return (jsxs(ProviderButton, { type: "button", onClick: () => handleSelect(provider.id), "$active": isActive, children: [jsxs(ProviderInfo, { children: [jsxs(ProviderNameRow, { children: [jsx(ProviderName, { children: provider.name }), highlight ? jsx(ProviderBadge, { children: highlight }) : null] }), jsx(ProviderMeta, { children: metaText })] }), jsxs(ProviderRight, { children: [jsx(ProviderQuote, { children: netDisplay }), jsx(ProviderFiat, { children: fiatDisplay })] })] }, provider.id));
+            }) }));
+    };
+    return (jsxs(ProviderSelectContent, { children: [jsx(ModalHeading, { children: "Choose provider" }), jsx(ModalBody, { children: "Compare quotes and pick the provider that works best for you." }), renderProviders()] }));
+};
+
+export { BuyProviderSelect as default };
+//# sourceMappingURL=index.js.map

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

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

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

@@ -0,0 +1,103 @@
+import styled from '../../../styles/styled/index.js';
+import { PageContent } from '../../PageContent/index.js';
+
+const ProviderSelectContent = styled(PageContent) `
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  text-align: left;
+  padding-bottom: 16px;
+`;
+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-accent-color)' : 'var(--ck-body-divider)')};
+  background: ${({ $active }) => $active ? 'var(--ck-secondary-button-hover-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: ${({ $active }) => ($active ? 'var(--ck-accent-color)' : 'var(--ck-body-color-muted)')};
+  }
+`;
+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 EmptyState = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+  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-muted);
+  font-size: 14px;
+`;
+
+export { EmptyState, ProviderBadge, ProviderButton, ProviderFiat, ProviderInfo, ProviderList, ProviderMeta, ProviderName, ProviderNameRow, ProviderQuote, ProviderRight, ProviderSelectContent };
+//# sourceMappingURL=styles.js.map

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

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

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

@@ -0,0 +1,245 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { ChainTypeEnum } from '@openfort/openfort-js';
+import { useState, useMemo, useEffect } from 'react';
+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 { 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 { isCoinbaseSupported } from '../Buy/coinbaseApi.js';
+import { getAllQuotes } from '../Buy/onrampApi.js';
+import { getProviders } from '../Buy/providers.js';
+import { isStripeSupported } from '../Buy/stripeApi.js';
+import { ProviderList, ProviderButton, ProviderInfo, ProviderNameRow, ProviderName, ProviderBadge, ProviderMeta, ProviderRight, ProviderQuote, ProviderFiat, ContinueButtonWrapper } from '../Buy/styles.js';
+import { createCurrencyFormatter, formatTokenAmount } from '../Buy/utils.js';
+import { isSameToken, getAssetSymbol } from '../Send/utils.js';
+
+const BuySelectProvider = () => {
+    const { buyForm, setBuyForm, 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 [quotes, setQuotes] = useState({});
+    const [isLoadingQuote, setIsLoadingQuote] = useState(false);
+    const [coinbaseError, setCoinbaseError] = useState(false);
+    const [stripeError, setStripeError] = useState(false);
+    const [quoteRefreshTimer, setQuoteRefreshTimer] = useState(60);
+    const [refetchTrigger, setRefetchTrigger] = useState(0);
+    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]);
+    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 tokenSymbol = getAssetSymbol(selectedToken);
+    const currencyFormatter = useMemo(() => createCurrencyFormatter(buyForm.currency), [buyForm.currency]);
+    // Trigger resize on mount
+    useEffect(() => {
+        triggerResize();
+    }, [triggerResize]);
+    // Quote refresh timer - counts down from 60 and triggers refetch
+    useEffect(() => {
+        if (!fiatAmount || fiatAmount <= 0)
+            return;
+        const interval = setInterval(() => {
+            setQuoteRefreshTimer((prev) => {
+                if (prev <= 1) {
+                    setRefetchTrigger((t) => t + 1);
+                    return 60;
+                }
+                return prev - 1;
+            });
+        }, 1000);
+        return () => clearInterval(interval);
+    }, [fiatAmount]);
+    // Reset timer when amount changes
+    useEffect(() => {
+        if (fiatAmount && fiatAmount > 0) {
+            setQuoteRefreshTimer(60);
+        }
+    }, [fiatAmount]);
+    // Fetch quotes from all providers
+    useEffect(() => {
+        const fetchQuotes = async () => {
+            if (!address || !chainId || !fiatAmount || fiatAmount <= 0) {
+                setQuotes({});
+                setCoinbaseError(false);
+                setStripeError(false);
+                return;
+            }
+            setIsLoadingQuote(true);
+            setCoinbaseError(false);
+            setStripeError(false);
+            try {
+                const allQuotes = await getAllQuotes({
+                    token: selectedToken,
+                    chainId,
+                    publishableKey,
+                    sourceAmount: fiatAmount.toFixed(2),
+                    sourceCurrency: buyForm.currency,
+                });
+                const quotesMap = {};
+                for (const quote of allQuotes) {
+                    quotesMap[quote.provider] = quote;
+                }
+                setQuotes(quotesMap);
+                // Update error states based on which providers returned quotes
+                setCoinbaseError(!quotesMap.coinbase && isCoinbaseSupported(selectedToken));
+                setStripeError(!quotesMap.stripe && isStripeSupported(selectedToken));
+            }
+            catch (_error) {
+                setQuotes({});
+                setCoinbaseError(true);
+                setStripeError(true);
+            }
+            finally {
+                setIsLoadingQuote(false);
+            }
+        };
+        // Debounce the quote fetching
+        const timeoutId = setTimeout(fetchQuotes, 500);
+        return () => clearTimeout(timeoutId);
+    }, [
+        fiatAmount,
+        selectedToken.metadata,
+        selectedToken.type,
+        buyForm.currency,
+        chainId,
+        address,
+        publishableKey,
+        refetchTrigger,
+    ]);
+    const handleSelectProvider = (id) => {
+        setBuyForm((prev) => ({
+            ...prev,
+            providerId: id,
+        }));
+    };
+    const handleContinue = () => {
+        // Just navigate to the processing screen
+        // The processing screen will handle session creation and popup
+        setRoute(routes.BUY_PROCESSING);
+    };
+    const handleBack = () => {
+        setRoute(routes.BUY);
+    };
+    const formattedFiat = fiatAmount !== null ? currencyFormatter.format(fiatAmount) : null;
+    const step2Disabled = !address || isLoadingQuote;
+    const providers = getProviders();
+    // Find the highest destination amount across all quotes to use as the target
+    const targetDestinationAmount = useMemo(() => {
+        const amounts = Object.values(quotes)
+            .map((q) => Number.parseFloat(q.destinationAmount))
+            .filter((n) => Number.isFinite(n));
+        return amounts.length > 0 ? Math.max(...amounts) : null;
+    }, [quotes]);
+    return (jsxs(PageContent, { onBack: handleBack, children: [jsx(ModalHeading, { children: "Select Provider" }), jsx(ModalBody, { children: formattedFiat && `Buying ${formattedFiat} of ${tokenSymbol}` }), jsx(ModalBody, { style: { marginTop: 4, fontSize: '12px', opacity: 0.7 }, children: isLoadingQuote ? 'Loading quotes...' : `Quotes refresh in ${quoteRefreshTimer}s` }), jsx(ProviderList, { children: providers.map((provider) => {
+                    var _a, _b, _c, _d, _e, _f;
+                    // Get provider-specific quote data
+                    const providerQuote = quotes[provider.id];
+                    let providerNetAmount = null;
+                    let providerFeePercentage = null;
+                    let providerFiatAmount = fiatAmount;
+                    let isDisabled = false;
+                    let disabledReason = '';
+                    let isEstimated = false;
+                    if (provider.id === 'coinbase') {
+                        // Check if token is supported
+                        if (!isCoinbaseSupported(selectedToken)) {
+                            isDisabled = true;
+                            disabledReason = 'Token not supported';
+                        }
+                        else if (coinbaseError) {
+                            isDisabled = true;
+                            disabledReason = 'Provider not supported';
+                        }
+                        else if (providerQuote) {
+                            const originalDestinationAmount = Number.parseFloat(providerQuote.destinationAmount);
+                            // Normalize to target destination amount
+                            if (targetDestinationAmount !== null &&
+                                Math.abs(originalDestinationAmount - targetDestinationAmount) > 0.000001) {
+                                // Amounts differ, need to estimate
+                                isEstimated = true;
+                                providerNetAmount = targetDestinationAmount;
+                                // Estimate the cost: base amount + scaled fees
+                                // Formula: baseAmount + (fees × (targetAmount / originalAmount))
+                                const totalFees = (_b = (_a = providerQuote.fees) === null || _a === void 0 ? void 0 : _a.reduce((sum, fee) => sum + Number.parseFloat(fee.amount), 0)) !== null && _b !== void 0 ? _b : 0;
+                                const baseAmount = fiatAmount !== null && fiatAmount !== void 0 ? fiatAmount : 0;
+                                const ratio = targetDestinationAmount / originalDestinationAmount;
+                                const estimatedFees = totalFees * ratio;
+                                providerFiatAmount = baseAmount + estimatedFees;
+                                // Recalculate fee percentage based on estimated fees
+                                providerFeePercentage = baseAmount > 0 ? ((estimatedFees / baseAmount) * 100).toFixed(2) : null;
+                            }
+                            else {
+                                // Amounts match, use actual quote
+                                providerNetAmount = originalDestinationAmount;
+                                const totalFees = (_d = (_c = providerQuote.fees) === null || _c === void 0 ? void 0 : _c.reduce((sum, fee) => sum + Number.parseFloat(fee.amount), 0)) !== null && _d !== void 0 ? _d : 0;
+                                providerFeePercentage = fiatAmount ? ((totalFees / fiatAmount) * 100).toFixed(2) : null;
+                                const sourceAmount = Number.parseFloat(providerQuote.sourceAmount);
+                                providerFiatAmount = sourceAmount + totalFees;
+                            }
+                        }
+                    }
+                    else if (provider.id === 'stripe') {
+                        // Check if token is supported
+                        if (!isStripeSupported(selectedToken)) {
+                            isDisabled = true;
+                            disabledReason = 'Token not supported';
+                        }
+                        else if (stripeError) {
+                            isDisabled = true;
+                            disabledReason = 'Provider not supported';
+                        }
+                        else if (providerQuote) {
+                            // Stripe quote is always used as-is (it typically has the best rate)
+                            providerNetAmount = Number.parseFloat(providerQuote.destinationAmount);
+                            // Use sourceAmount to show the actual total the user will pay
+                            providerFiatAmount = Number.parseFloat(providerQuote.sourceAmount);
+                            // Calculate total fees
+                            const totalFees = (_f = (_e = providerQuote.fees) === null || _e === void 0 ? void 0 : _e.reduce((sum, fee) => sum + Number.parseFloat(fee.amount), 0)) !== null && _f !== void 0 ? _f : 0;
+                            providerFeePercentage = fiatAmount ? ((totalFees / fiatAmount) * 100).toFixed(2) : null;
+                        }
+                    }
+                    // Use real quote data if available, otherwise show loading or fallback
+                    const netDisplay = isDisabled
+                        ? disabledReason
+                        : isLoadingQuote || !providerQuote
+                            ? '...'
+                            : providerNetAmount !== null
+                                ? formatTokenAmount(providerNetAmount, tokenSymbol)
+                                : '--';
+                    const fiatDisplay = isDisabled
+                        ? ''
+                        : isLoadingQuote || !providerQuote
+                            ? '...'
+                            : providerFiatAmount !== null
+                                ? `${isEstimated ? '~' : ''}${currencyFormatter.format(providerFiatAmount)}`
+                                : '--';
+                    // Use real fee percentage if available
+                    const feePercentage = providerFeePercentage !== null && providerFeePercentage !== void 0 ? providerFeePercentage : (provider.feeBps / 100).toFixed(2);
+                    const highlight = provider.highlight === 'best' ? 'Best price' : provider.highlight === 'fast' ? 'Fastest' : null;
+                    const metaText = isDisabled ? '' : `Fee ${isEstimated ? '~' : ''}${feePercentage}%`;
+                    const isActive = buyForm.providerId === provider.id;
+                    return (jsxs(ProviderButton, { type: "button", onClick: () => !isDisabled && handleSelectProvider(provider.id), "$active": isActive, disabled: isDisabled, children: [jsxs(ProviderInfo, { children: [jsxs(ProviderNameRow, { children: [jsx(ProviderName, { children: provider.name }), highlight && !isDisabled ? jsx(ProviderBadge, { children: highlight }) : null] }), jsx(ProviderMeta, { children: metaText })] }), jsxs(ProviderRight, { children: [jsx(ProviderQuote, { children: fiatDisplay }), jsx(ProviderFiat, { children: netDisplay })] })] }, provider.id));
+                }) }), jsxs(ContinueButtonWrapper, { children: [jsx(Button, { variant: "secondary", onClick: handleBack, children: "Back" }), jsx(Button, { variant: "primary", onClick: handleContinue, disabled: step2Disabled, children: "Continue" })] })] }));
+};
+
+export { BuySelectProvider as default };
+//# sourceMappingURL=index.js.map

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

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

package/build/components/Pages/Connected/ConnectedPageLayout.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Shared layout for Ethereum and Solana connected pages.
+ * Renders avatar, address, balance, and action buttons with chain-specific content.
+ */
+import type React from 'react';
+type ConnectedPageLayoutProps = {
+    address: string;
+    displayName: React.ReactNode;
+    avatar: React.ReactNode;
+    balance: React.ReactNode | null;
+    actions: React.ReactNode;
+    beforeAvatar?: React.ReactNode;
+    hideBalance?: boolean;
+    isBalanceLoading?: boolean;
+    /** When true and address is empty, show Loading... instead of noWalletFallback */
+    isAddressLoading?: boolean;
+    noWalletFallback: React.ReactNode;
+    /** Optional content after actions (e.g. AnimatePresence for testnet message) */
+    afterActions?: React.ReactNode;
+};
+export declare const ConnectedPageLayout: React.FC<ConnectedPageLayoutProps>;
+export {};

package/build/components/Pages/Connected/ConnectedPageLayout.js

@@ -0,0 +1,11 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { ModalContent, ModalH1, ModalBody } from '../../Common/Modal/styles.js';
+import PoweredByFooter from '../../Common/PoweredByFooter/index.js';
+import { AvatarContainer, AvatarInner, BalanceContainer, LoadingBalance, ActionButtonsContainer } from './styles.js';
+
+const ConnectedPageLayout = ({ address, displayName, avatar, balance, actions, beforeAvatar, hideBalance, isBalanceLoading, isAddressLoading, noWalletFallback, afterActions, }) => {
+    return (jsxs(ModalContent, { style: { paddingBottom: 6, gap: 6 }, children: [address ? (jsxs(Fragment, { children: [jsx(AvatarContainer, { children: jsxs(AvatarInner, { children: [beforeAvatar, avatar] }) }), jsx(ModalH1, { children: displayName }), hideBalance ? null : (jsxs(ModalBody, { children: [jsx(BalanceContainer, { children: isBalanceLoading ? (jsx(LoadingBalance, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.2 }, children: "\u00A0" })) : (balance) }), jsx(ActionButtonsContainer, { children: actions }), afterActions] }))] })) : isAddressLoading ? (jsx(LoadingBalance, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.2 }, children: "Loading..." })) : (noWalletFallback), jsx(PoweredByFooter, {})] }));
+};
+
+export { ConnectedPageLayout };
+//# sourceMappingURL=ConnectedPageLayout.js.map

package/build/components/Pages/Connected/ConnectedPageLayout.js.map

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

package/build/components/Pages/Connected/EthereumConnected.d.ts

@@ -0,0 +1,3 @@
+import type React from 'react';
+declare const EthereumConnected: React.FC;
+export default EthereumConnected;

package/build/components/Pages/Connected/EthereumConnected.js

@@ -0,0 +1,133 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { ChainTypeEnum } from '@openfort/openfort-js';
+import { AnimatePresence, motion } from 'framer-motion';
+import { useEffect, useMemo, useState } from 'react';
+import { formatUnits } from 'viem';
+import { UserRoundIcon, SendIcon, ReceiveIcon, BuyIcon } from '../../../assets/icons.js';
+import { useEthereumEmbeddedWallet } from '../../../ethereum/hooks/useEthereumEmbeddedWallet.js';
+import { useEthereumWalletAssets } from '../../../ethereum/hooks/useEthereumWalletAssets.js';
+import useLocales from '../../../hooks/useLocales.js';
+import { useResolvedIdentity } from '../../../hooks/useResolvedIdentity.js';
+import { useOpenfortCore } from '../../../openfort/useOpenfort.js';
+import { nFormatter } from '../../../utils/index.js';
+import { logger } from '../../../utils/logger.js';
+import ChainSelector from '../../../wagmi/components/ChainSelect/index.js';
+import Avatar from '../../Common/Avatar/index.js';
+import Button from '../../Common/Button/index.js';
+import { TextLinkButton } from '../../Common/Button/styles.js';
+import { CopyText } from '../../Common/CopyToClipboard/CopyText.js';
+import { ModalBody } from '../../Common/Modal/styles.js';
+import { useThemeContext } from '../../ConnectKitThemeProvider/ConnectKitThemeProvider.js';
+import { routes, defaultSendFormState } from '../../Openfort/types.js';
+import { useOpenfort } from '../../Openfort/useOpenfort.js';
+import { PageContent } from '../../PageContent/index.js';
+import { getAssetDecimals } from '../Send/utils.js';
+import { ConnectedPageLayout } from './ConnectedPageLayout.js';
+import { LinkedProvidersToggle, Balance, Unsupported, ChainSelectorContainer, ActionButton } from './styles.js';
+import { truncateEthAddress } from '../../../utils/format.js';
+
+function getFirstBalanceAsset(assets) {
+    return assets === null || assets === void 0 ? void 0 : assets.find((a) => a.balance && a.balance > BigInt(0));
+}
+const EthereumConnected = () => {
+    var _a, _b, _c, _d;
+    const context = useOpenfort();
+    const { setHeaderLeftSlot, setRoute, chains } = context;
+    const themeContext = useThemeContext();
+    const wallet = useEthereumEmbeddedWallet();
+    const { embeddedAccounts } = useOpenfortCore();
+    const hasEthereumWallets = ((_a = embeddedAccounts === null || embeddedAccounts === void 0 ? void 0 : embeddedAccounts.filter((a) => a.chainType === ChainTypeEnum.EVM)) !== null && _a !== void 0 ? _a : []).length > 0;
+    const isConnected = wallet.status === 'connected';
+    const address = isConnected ? wallet.address : undefined;
+    const chainId = isConnected ? wallet.chainId : undefined;
+    const { chainType } = useOpenfortCore();
+    useEffect(() => {
+        if (process.env.NODE_ENV === 'development' && chainType !== ChainTypeEnum.EVM) {
+            logger.warn('[EthereumConnected] This component is for EVM only. Current chainType is not EVM; ensure OpenfortProvider uses chainType={ChainTypeEnum.EVM}.');
+        }
+    }, [chainType]);
+    const chain = chains.find((c) => c.id === chainId);
+    const identity = useResolvedIdentity({
+        address: address !== null && address !== void 0 ? address : '',
+        chainType,
+        ensChainId: chainId !== null && chainId !== void 0 ? chainId : 0,
+        enabled: isConnected && !!address,
+    });
+    const ensName = identity.status === 'success' ? identity.name : undefined;
+    const { data: assets, isLoading, refetch } = useEthereumWalletAssets();
+    const totalBalanceUsd = useMemo(() => {
+        if (!assets)
+            return 0;
+        return assets.reduce((acc, asset) => {
+            var _a, _b, _c, _d;
+            if (!asset.metadata || !asset.balance)
+                return acc;
+            const price = (_c = (_b = (_a = asset.metadata) === null || _a === void 0 ? void 0 : _a.fiat) === null || _b === void 0 ? void 0 : _b.value) !== null && _c !== void 0 ? _c : 0;
+            if (!price)
+                return acc;
+            const balance = Number(formatUnits((_d = asset.balance) !== null && _d !== void 0 ? _d : BigInt(0), getAssetDecimals(asset)));
+            return acc + price * balance;
+        }, 0);
+    }, [assets]);
+    useEffect(() => {
+        if (isConnected) {
+            refetch();
+        }
+    }, [isConnected, refetch]);
+    const isTestnet = (_b = chain === null || chain === void 0 ? void 0 : chain.testnet) !== null && _b !== void 0 ? _b : false;
+    const [showTestnetMessage, setShowTestnetMessage] = useState(false);
+    useEffect(() => {
+        context.triggerResize();
+        if (showTestnetMessage) {
+            const timer = setTimeout(() => {
+                setShowTestnetMessage(false);
+            }, 2000);
+            return () => clearTimeout(timer);
+        }
+    }, [showTestnetMessage, context.triggerResize]);
+    const handleBuyClick = (e) => {
+        if (!chain || isTestnet) {
+            e.preventDefault();
+            setShowTestnetMessage(true);
+        }
+        else {
+            context.setRoute(routes.BUY);
+        }
+    };
+    useEffect(() => {
+        if (!address) {
+            setHeaderLeftSlot(null);
+            return;
+        }
+        setHeaderLeftSlot(jsx(LinkedProvidersToggle, { type: "button", onClick: () => setRoute(routes.PROFILE), "aria-label": "Profile", title: "Profile", children: jsx(UserRoundIcon, {}) }));
+        return () => {
+            setHeaderLeftSlot(null);
+        };
+    }, [address, setHeaderLeftSlot, setRoute]);
+    const { setSendForm } = context;
+    const separator = ['web95', 'rounded', 'minimal'].includes((_d = (_c = themeContext.theme) !== null && _c !== void 0 ? _c : context.uiConfig.theme) !== null && _d !== void 0 ? _d : '')
+        ? '....'
+        : undefined;
+    const locales = useLocales();
+    const balanceNode = !!assets && !isLoading ? (jsx(TextLinkButton, { type: "button", onClick: () => {
+            const firstBalanceAsset = getFirstBalanceAsset(assets);
+            if (!firstBalanceAsset) {
+                setRoute(routes.NO_ASSETS_AVAILABLE);
+                return;
+            }
+            setRoute(routes.ASSET_INVENTORY);
+        }, children: jsxs(Balance, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.2 }, children: ["$", nFormatter(totalBalanceUsd)] }, `chain-${chain === null || chain === void 0 ? void 0 : chain.id}`) })) : null;
+    const noWalletFallback = hasEthereumWallets ? (jsx(Button, { onClick: () => context.setRoute(routes.LOAD_WALLETS), children: "Manage wallets" })) : (jsx(Button, { onClick: () => context.setRoute({ route: routes.CONNECTORS, connectType: 'link' }), icon: jsx(Unsupported, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, children: jsxs("svg", { width: "130", height: "120", viewBox: "0 0 13 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx("title", { children: "Unsupported wallet icon" }), jsx("path", { d: "M2.61317 11.2501H9.46246C10.6009 11.2501 11.3256 10.3506 11.3256 9.3549C11.3256 9.05145 11.255 8.73244 11.0881 8.43303L7.65903 2.14708C7.659 2.14702 7.65897 2.14696 7.65893 2.1469C7.65889 2.14682 7.65884 2.14673 7.65879 2.14664C7.31045 1.50746 6.6741 1.17871 6.04 1.17871C5.41478 1.17871 4.763 1.50043 4.41518 2.14968L0.993416 8.43476C0.828865 8.72426 0.75 9.04297 0.75 9.3549C0.75 10.3506 1.47471 11.2501 2.61317 11.2501Z", fill: "currentColor", stroke: "var(--ck-body-background, #fff)", strokeWidth: "1.5" }), jsx("path", { d: "M6.03258 7.43916C5.77502 7.43916 5.63096 7.29153 5.62223 7.02311L5.55675 4.96973C5.54802 4.69684 5.74446 4.5 6.02821 4.5C6.3076 4.5 6.51277 4.70131 6.50404 4.9742L6.43856 7.01864C6.42546 7.29153 6.2814 7.43916 6.03258 7.43916ZM6.03258 9.11676C5.7401 9.11676 5.5 8.9065 5.5 8.60677C5.5 8.30704 5.7401 8.09678 6.03258 8.09678C6.32506 8.09678 6.56515 8.30256 6.56515 8.60677C6.56515 8.91097 6.32069 9.11676 6.03258 9.11676Z", fill: "white" })] }) }), children: "Connect wallet" }));
+    return (jsx(PageContent, { onBack: null, header: locales.profileScreen_heading, children: jsx(ConnectedPageLayout, { address: address !== null && address !== void 0 ? address : '', displayName: jsx(CopyText, { value: address !== null && address !== void 0 ? address : '', children: ensName !== null && ensName !== void 0 ? ensName : truncateEthAddress(address !== null && address !== void 0 ? address : '', separator) }), avatar: address ? jsx(Avatar, { address: address }) : jsx("span", {}), beforeAvatar: jsx(ChainSelectorContainer, { initial: { opacity: 0 }, animate: { opacity: 1 }, transition: { duration: 0.2 }, children: jsx(ChainSelector, {}) }, chainId !== null && chainId !== void 0 ? chainId : 'loading'), balance: balanceNode, actions: jsxs(Fragment, { children: [jsx(ActionButton, { icon: jsx(SendIcon, {}), onClick: () => {
+                            const firstBalanceAsset = getFirstBalanceAsset(assets);
+                            if (!firstBalanceAsset) {
+                                setRoute(routes.NO_ASSETS_AVAILABLE);
+                                return;
+                            }
+                            setSendForm({ ...defaultSendFormState, asset: firstBalanceAsset });
+                            context.setRoute(routes.SEND);
+                        }, children: "Send" }), jsx(ActionButton, { icon: jsx(ReceiveIcon, {}), onClick: () => context.setRoute(routes.RECEIVE), children: "Get" }), jsx(ActionButton, { icon: jsx(BuyIcon, {}), onClick: handleBuyClick, style: isTestnet ? { cursor: 'not-allowed', opacity: 0.4, pointerEvents: 'auto' } : undefined, children: "Buy" })] }), hideBalance: context === null || context === void 0 ? void 0 : context.uiConfig.hideBalance, isBalanceLoading: isLoading, noWalletFallback: noWalletFallback, afterActions: jsx(AnimatePresence, { onExitComplete: () => context.triggerResize(), children: showTestnetMessage && (jsx(ModalBody, { as: motion.div, initial: { opacity: 0, y: -10 }, animate: { opacity: 0.7, y: 0 }, exit: { opacity: 0, y: -10 }, transition: { duration: 0.2 }, style: { marginTop: 12, fontSize: 14, textAlign: 'center' }, children: "Buy is only available on mainnet chains" })) }) }) }));
+};
+
+export { EthereumConnected as default };
+//# sourceMappingURL=EthereumConnected.js.map

package/build/components/Pages/Connected/EthereumConnected.js.map

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

package/build/components/Pages/Connected/SolanaConnected.d.ts

@@ -0,0 +1,3 @@
+import type React from 'react';
+declare const SolanaConnected: React.FC;
+export default SolanaConnected;