@openfort/react 1.2.0 → 1.3.0

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

@@ -8,12 +8,15 @@ 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 { Section, SectionLabel, AmountCard, CurrencySymbol, AmountInput, PresetList, PresetButton } from '../Buy/styles.js';
 import { AddressPageLink } from '../Deposit/AddressPageLink.js';
 import { isDepositFlowActive, DepositProgress } from '../Deposit/DepositProgress.js';
 import { walletListBtn } from '../Deposit/formStyles.js';
 import { RouteSelectors } from '../Deposit/RouteSelectors.js';
+import { isSolana } from '../Deposit/sources.js';
 import { StepDivider, Skeleton, ButtonLogo } from '../Deposit/styles.js';
 import { useDepositRoute } from '../Deposit/useDepositRoute.js';
+import { sanitizeAmountInput } from '../Send/utils.js';
 import { DepositWalletDesktop } from './DepositWalletDesktop.js';
 import { OPENFORT_DEPOSIT_PAGE_URL, caipToChainId, buildDepositPageUrl, buildOpenDappLinks } from './walletDeeplinks.js';
 
@@ -26,58 +29,60 @@ const WALLET_LOGO = {
     rainbow: jsx(Logos.Rainbow, { round: true }),
     rabby: jsx(Logos.Rabby, {}),
 };
-const amountInputStyle = {
-    width: '100%',
-    padding: '12px 14px',
-    borderRadius: 12,
-    border: '1px solid var(--ck-body-divider, #e4e4e7)',
-    background: 'var(--ck-body-background-secondary, #fafafa)',
-    color: 'var(--ck-body-color, #111)',
-    fontSize: 16,
-    outline: 'none',
-    marginTop: 14,
-};
-/** Keep only digits and a single decimal point. */
-function sanitizeAmount(v) {
-    const cleaned = v.replace(/[^0-9.]/g, '');
-    const [whole, ...rest] = cleaned.split('.');
-    return rest.length ? `${whole}.${rest.join('')}` : cleaned;
-}
+/** Preset deposit amounts, in the selected source token's units. */
+const PRESETS = [10, 25, 50];
 /**
- * Transfer from wallet. On mobile, leads with open-dApp deeplinks that send the
- * user into their wallet app's in-app browser pointed at the hosted deposit page
- * (with the address/chain/token/amount prefilled). On desktop, sends straight
- * from the browser-extension wallet. Either way the manual deposit-address / QR
- * path stays available below.
+ * Transfer from wallet. Pick a source chain/token and an amount, then choose the
+ * wallet to send from. On mobile that's open-dApp deeplinks into the wallet app's
+ * in-app browser (address/chain/token/amount prefilled); on desktop it's a direct
+ * send from a browser-extension wallet. The manual deposit-address / QR path stays
+ * available below.
  */
 const DepositWallet = () => {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
     const { triggerResize, uiConfig } = useOpenfort();
     const isMobile = useIsMobile();
     const route = useDepositRoute('crypto');
     const [amount, setAmount] = useState('');
+    const [pressedPreset, setPressedPreset] = useState(null);
     const depositPageUrl = (_b = (_a = uiConfig.funding) === null || _a === void 0 ? void 0 : _a.depositPageUrl) !== null && _b !== void 0 ? _b : OPENFORT_DEPOSIT_PAGE_URL;
-    const srcChainId = caipToChainId((_c = route.activeChain) === null || _c === void 0 ? void 0 : _c.id);
+    // Solana sources have no numeric chain id and no desktop EVM-extension send, so
+    // they route through the deeplink (Phantom) on every platform instead of the
+    // wagmi-bridge desktop path.
+    const isSolanaSrc = isSolana((_d = (_c = route.activeChain) === null || _c === void 0 ? void 0 : _c.id) !== null && _d !== void 0 ? _d : '');
+    const srcChainId = caipToChainId((_e = route.activeChain) === null || _e === void 0 ? void 0 : _e.id);
     const amountValid = Number.parseFloat(amount) > 0;
+    const handleAmountChange = (event) => {
+        const raw = sanitizeAmountInput(event.target.value);
+        if (raw === '' || /^[0-9]*\.?[0-9]*$/.test(raw)) {
+            setPressedPreset(null);
+            setAmount(raw);
+        }
+    };
+    const handlePreset = (value) => {
+        setPressedPreset(value);
+        setAmount(String(value));
+    };
     // Open-dApp deeplinks: prefer backend-provided ones; otherwise build them from
     // the hosted deposit page URL (if the integrator configured one) carrying the
     // resolved transfer params. The hosted page sends via the wallet's injected
     // provider, so no backend wiring is required for the link itself.
-    const pageUrl = depositPageUrl && route.receiverAddress && route.activeCurrency && srcChainId
+    const pageUrl = depositPageUrl && route.receiverAddress && route.activeCurrency && (isSolanaSrc || srcChainId)
         ? buildDepositPageUrl(depositPageUrl, {
+            vm: isSolanaSrc ? 'svm' : 'evm',
             to: route.receiverAddress,
-            chainId: srcChainId,
+            chainId: isSolanaSrc ? undefined : srcChainId,
             token: route.activeCurrency.native ? undefined : route.activeCurrency.address,
             decimals: route.activeCurrency.decimals,
             symbol: route.activeCurrency.symbol,
-            chain: (_d = route.activeChain) === null || _d === void 0 ? void 0 : _d.name,
+            chain: (_f = route.activeChain) === null || _f === void 0 ? void 0 : _f.name,
             amount: amountValid ? parseUnits(amount, route.activeCurrency.decimals).toString() : undefined,
         })
         : null;
-    const allDeeplinks = ((_f = (_e = route.pm) === null || _e === void 0 ? void 0 : _e.deeplinks) === null || _f === void 0 ? void 0 : _f.length)
+    const allDeeplinks = ((_h = (_g = route.pm) === null || _g === void 0 ? void 0 : _g.deeplinks) === null || _h === void 0 ? void 0 : _h.length)
         ? route.pm.deeplinks
         : pageUrl
-            ? buildOpenDappLinks(pageUrl, (_h = (_g = route.activeChain) === null || _g === void 0 ? void 0 : _g.vmType) !== null && _h !== void 0 ? _h : 'evm')
+            ? buildOpenDappLinks(pageUrl, (_k = (_j = route.activeChain) === null || _j === void 0 ? void 0 : _j.vmType) !== null && _k !== void 0 ? _k : 'evm')
             : [];
     // Trust's in-app dApp browser was removed on iOS (Apple, 2021) — the link
     // dead-ends there, so hide it on iOS while keeping it on Android.
@@ -87,7 +92,7 @@ const DepositWallet = () => {
     }, [route.receiverAddress, route.loading, route.status, deeplinks.length, triggerResize]);
     if (isDepositFlowActive(route.status))
         return jsx(DepositProgress, { status: route.status });
-    return (jsxs(PageContent, { onBack: routes.DEPOSIT, children: [jsx(ModalHeading, { children: "Transfer from wallet" }), jsx(RouteSelectors, { chains: route.chains, chain: route.chain, currency: route.currency, chainLabel: "Supported chain", onChainChange: route.setChain, onCurrencyChange: route.setCurrency }), !route.isAvailable && jsx(ModalBody, { children: "Funding isn't available right now." }), jsx(StepDivider, { children: isMobile ? 'Then open your wallet' : 'Then send from your wallet' }), isMobile ? (jsxs(Fragment, { children: [jsx("input", { value: amount, onChange: (e) => setAmount(sanitizeAmount(e.target.value)), placeholder: `Amount${route.activeCurrency ? ` in ${route.activeCurrency.symbol}` : ''}`, inputMode: "decimal", style: amountInputStyle }), !depositPageUrl && (jsx(ModalBody, { style: { marginTop: 12 }, children: "Use a deposit address below to fund from your wallet." })), route.loading && !route.pm && (jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 8, marginTop: 14 }, children: [jsx(Skeleton, { "$h": "44px", "$r": "10px" }), jsx(Skeleton, { "$h": "44px", "$r": "10px" }), jsx(Skeleton, { "$h": "44px", "$r": "10px" })] })), deeplinks.length > 0 && (jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: 8, marginTop: 14 }, children: deeplinks.map((d) => (jsxs("a", { href: amountValid ? d.url : undefined, "aria-disabled": !amountValid, target: "_blank", rel: "noreferrer", style: {
+    return (jsxs(PageContent, { onBack: routes.DEPOSIT, children: [jsx(ModalHeading, { children: "Transfer from wallet" }), jsx(RouteSelectors, { chains: route.chains, chain: route.chain, currency: route.currency, chainLabel: "Supported chain", onChainChange: route.setChain, onCurrencyChange: route.setCurrency }), !route.isAvailable && jsx(ModalBody, { children: "Funding isn't available right now." }), jsxs(Section, { children: [jsx(SectionLabel, { children: "Amount" }), jsxs(AmountCard, { children: [jsx(CurrencySymbol, { children: (_m = (_l = route.activeCurrency) === null || _l === void 0 ? void 0 : _l.symbol) !== null && _m !== void 0 ? _m : '' }), jsx(AmountInput, { value: amount, onChange: handleAmountChange, placeholder: "0.00", inputMode: "decimal", autoComplete: "off" })] }), jsx(PresetList, { children: PRESETS.map((preset) => (jsx(PresetButton, { type: "button", "$active": pressedPreset === preset, onClick: () => handlePreset(preset), children: preset }, preset))) })] }), jsx(StepDivider, { children: "Then select the wallet you want to use" }), isMobile || isSolanaSrc ? (jsxs(Fragment, { children: [!depositPageUrl && (jsx(ModalBody, { style: { marginTop: 12 }, children: "Use a deposit address below to fund from your wallet." })), route.loading && !route.pm && (jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 8, marginTop: 14 }, children: [jsx(Skeleton, { "$h": "44px", "$r": "10px" }), jsx(Skeleton, { "$h": "44px", "$r": "10px" }), jsx(Skeleton, { "$h": "44px", "$r": "10px" })] })), deeplinks.length > 0 && (jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: 8, marginTop: 14 }, children: deeplinks.map((d) => (jsxs("a", { href: amountValid ? d.url : undefined, "aria-disabled": !amountValid, target: "_blank", rel: "noreferrer", style: {
                                 ...walletListBtn,
                                 display: 'flex',
                                 alignItems: 'center',
@@ -95,7 +100,7 @@ const DepositWallet = () => {
                                 gap: 8,
                                 opacity: amountValid ? 1 : 0.55,
                                 pointerEvents: amountValid ? 'auto' : 'none',
-                            }, children: [WALLET_LOGO[d.app] && jsx(ButtonLogo, { children: WALLET_LOGO[d.app] }), d.label, " \u2197"] }, d.app))) }))] })) : (jsx(DepositWalletDesktop, { receiverAddress: route.receiverAddress, activeChain: route.activeChain, activeCurrency: route.activeCurrency, loading: route.loading })), jsx(AddressPageLink, { label: "Or send to a deposit address" }), route.error && jsx(ModalBody, { style: { color: '#dc2626', marginTop: 12 }, children: route.error.message })] }));
+                            }, children: [WALLET_LOGO[d.app] && jsx(ButtonLogo, { children: WALLET_LOGO[d.app] }), d.label, " \u2197"] }, d.app))) }))] })) : (jsx(DepositWalletDesktop, { receiverAddress: route.receiverAddress, activeChain: route.activeChain, activeCurrency: route.activeCurrency, loading: route.loading, amount: amount })), jsx(AddressPageLink, { label: "Or send to a deposit address" }), route.error && jsx(ModalBody, { style: { color: '#dc2626', marginTop: 12 }, children: route.error.message })] }));
 };
 
 export { DepositWallet as default };

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

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

package/build/components/Pages/DepositWallet/walletDeeplinks.d.ts

@@ -23,11 +23,13 @@ export type VmType = 'evm' | 'svm';
  */
 export declare const OPENFORT_DEPOSIT_PAGE_URL = "https://deposit.openfort.io";
 type DepositPageParams = {
-    /** Relay deposit address the source funds go to. */
+    /** Source VM family. `evm` drives a window.ethereum send; `svm` a Solana Pay request. */
+    vm: VmType;
+    /** Relay deposit address the source funds go to (0x for EVM, base58 for Solana). */
     to: string;
-    /** Numeric source chain id (e.g. 42161). */
-    chainId: number;
-    /** ERC-20 contract, or empty/undefined for the chain's native token. */
+    /** Numeric source chain id (e.g. 42161). EVM only. */
+    chainId?: number;
+    /** ERC-20 contract / SPL mint, or empty/undefined for the chain's native token. */
     token?: string;
     decimals: number;
     symbol: string;

package/build/components/Pages/DepositWallet/walletDeeplinks.js

@@ -19,8 +19,10 @@ const OPENFORT_DEPOSIT_PAGE_URL = 'https://deposit.openfort.io';
 /** Build the deposit "send" page URL with the transfer params encoded. */
 function buildDepositPageUrl(baseUrl, p) {
     const url = new URL(baseUrl);
+    url.searchParams.set('vm', p.vm);
     url.searchParams.set('to', p.to);
-    url.searchParams.set('chainId', String(p.chainId));
+    if (p.vm === 'evm' && p.chainId !== undefined)
+        url.searchParams.set('chainId', String(p.chainId));
     if (p.token)
         url.searchParams.set('token', p.token);
     url.searchParams.set('decimals', String(p.decimals));

package/build/components/Pages/DepositWallet/walletDeeplinks.js.map

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

package/build/components/Pages/SelectToken/SolanaSelectToken.d.ts

@@ -0,0 +1 @@
+export declare const SolanaSelectToken: () => import("react/jsx-runtime").JSX.Element;

package/build/components/Pages/SelectToken/SolanaSelectToken.js

@@ -0,0 +1,50 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useEffect, useState } from 'react';
+import { formatUnits } from 'viem';
+import { TOKEN_LOGO, symbolToColor } from '../../../constants/logos.js';
+import { useSolanaWalletAssets } from '../../../solana/hooks/useSolanaWalletAssets.js';
+import { ModalHeading } from '../../Common/Modal/styles.js';
+import { routes } from '../../Openfort/types.js';
+import { useOpenfort } from '../../Openfort/useOpenfort.js';
+import { SelectTokenContent, EmptyState, TokenList, TokenButton, TokenLeftGroup, TokenInfo, TokenSymbol, TokenName, TokenBalance, TokenLogoArea, TokenLogoImg, TokenLogoFallback } from './styles.js';
+
+const ZERO = BigInt(0);
+function SolanaTokenLogo({ symbol }) {
+    var _a;
+    const [imgError, setImgError] = useState(false);
+    const url = (_a = TOKEN_LOGO[symbol.toUpperCase()]) !== null && _a !== void 0 ? _a : null;
+    return (jsx(TokenLogoArea, { children: url && !imgError ? (jsx(TokenLogoImg, { src: url, alt: symbol, onError: () => setImgError(true) })) : (jsx(TokenLogoFallback, { "$bg": symbolToColor(symbol), children: symbol.charAt(0).toUpperCase() })) }));
+}
+const SolanaSelectToken = () => {
+    const { setSendForm, setRoute, triggerResize } = useOpenfort();
+    const { data, isLoading } = useSolanaWalletAssets();
+    const tokens = (data !== null && data !== void 0 ? data : []).filter((t) => t.amount > ZERO);
+    useEffect(() => {
+        if (!isLoading)
+            triggerResize();
+    }, [isLoading, triggerResize]);
+    const handleSelect = (token) => {
+        const asset = token.isNative
+            ? {
+                type: 'native',
+                balance: token.amount,
+                metadata: { symbol: 'SOL', decimals: token.decimals, fiat: { value: 0, currency: 'USD' } },
+            }
+            : {
+                type: 'spl',
+                address: token.mint,
+                balance: token.amount,
+                metadata: { symbol: token.symbol, name: token.name, decimals: token.decimals },
+            };
+        setSendForm((prev) => ({ ...prev, asset, amount: '' }));
+        setRoute(routes.SOL_SEND);
+    };
+    return (jsxs(SelectTokenContent, { onBack: routes.SOL_SEND, children: [jsx(ModalHeading, { children: "Select asset" }), tokens.length === 0 ? (jsx(EmptyState, { children: isLoading ? 'Loading balances…' : 'No assets found' })) : (jsx(TokenList, { children: tokens.map((token) => {
+                    const amount = Number(formatUnits(token.amount, token.decimals));
+                    const balanceStr = `${amount.toLocaleString('en-US', { maximumFractionDigits: 4 })} ${token.symbol}`;
+                    return (jsxs(TokenButton, { type: "button", onClick: () => handleSelect(token), children: [jsxs(TokenLeftGroup, { children: [jsx(SolanaTokenLogo, { symbol: token.symbol }), jsxs(TokenInfo, { style: { textAlign: 'left' }, children: [jsx(TokenSymbol, { children: token.name }), jsx(TokenName, { children: token.symbol })] })] }), jsx(TokenBalance, { children: balanceStr })] }, token.mint));
+                }) }))] }));
+};
+
+export { SolanaSelectToken };
+//# sourceMappingURL=SolanaSelectToken.js.map

package/build/components/Pages/SelectToken/SolanaSelectToken.js.map

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

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

@@ -1,11 +1,15 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { ChainTypeEnum } from '@openfort/openfort-js';
 import { useState, useEffect } from 'react';
 import { formatUnits } from 'viem';
 import { useEthereumWalletAssets } from '../../../ethereum/hooks/useEthereumWalletAssets.js';
+import { useOpenfortCore } from '../../../openfort/useOpenfort.js';
 import { Arrow, ArrowChevron, TextLinkButton } from '../../Common/Button/styles.js';
 import { ModalHeading } from '../../Common/Modal/styles.js';
 import { routes } from '../../Openfort/types.js';
 import { useOpenfort } from '../../Openfort/useOpenfort.js';
+import { EVM_BUY_CURRENCIES } from '../Buy/evmCurrencies.js';
+import { SOLANA_BUY_CURRENCIES } from '../Buy/solanaCurrencies.js';
 import { getAssetSymbol, getAssetDecimals, formatBalanceWithSymbol } from '../Send/utils.js';
 import { SelectTokenContent, EmptyState, TokenList, TokenButton, TokenInfo, TokenSymbol, TokenName, TokenBalance } from './styles.js';
 
@@ -22,9 +26,16 @@ const SelectToken = ({ isBuyFlow }) => {
     useEffect(() => {
         triggerResize();
     }, [viewAllAssets]);
+    const { chainType } = useOpenfortCore();
     const { data: walletAssets, isLoading: isBalancesLoading } = useEthereumWalletAssets();
-    // Show all tokens for both buy and send flows
-    const selectableTokens = walletAssets || [];
+    // Buys pick from a fixed buyable-currency list (USDC first, then native) per
+    // chain family, so the picker always has options even for a fresh wallet with no
+    // indexed balances. The send flow reads the EVM wallet's actual assets.
+    const selectableTokens = isBuyFlow
+        ? chainType === ChainTypeEnum.SVM
+            ? SOLANA_BUY_CURRENCIES
+            : EVM_BUY_CURRENCIES
+        : walletAssets || [];
     const handleSelect = (asset) => {
         var _a;
         // In send flow, don't allow selecting tokens with 0 balance

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

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

package/build/components/Pages/Send/SolanaSend.js

@@ -1,16 +1,15 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useMemo } from 'react';
 import { parseUnits, formatUnits } from 'viem';
-import { fetchSolanaBalance } from '../../../hooks/useBalance.js';
-import { useAsyncData } from '../../../shared/hooks/useAsyncData.js';
-import { useSolanaEmbeddedWallet } from '../../../solana/hooks/useSolanaEmbeddedWallet.js';
+import { useSolanaWalletAssets } from '../../../solana/hooks/useSolanaWalletAssets.js';
 import Button from '../../Common/Button/index.js';
+import { Arrow, ArrowChevron } from '../../Common/Button/styles.js';
 import Input from '../../Common/Input/index.js';
 import { ModalHeading } from '../../Common/Modal/styles.js';
 import { routes } from '../../Openfort/types.js';
 import { useOpenfort } from '../../Openfort/useOpenfort.js';
 import { PageContent } from '../../PageContent/index.js';
-import { Form, Field, FieldLabel, AmountInputWrapper, MaxButton, HelperText, ErrorText } from './styles.js';
+import { Form, Field, FieldLabel, TokenSelectorButton, TokenSelectorContent, TokenSelectorValue, TokenSelectorRight, AmountInputWrapper, MaxButton, HelperText, ErrorText } from './styles.js';
 import { sanitizeForParsing, formatBalance, sanitizeAmountInput } from './utils.js';
 
 const SOL_DECIMALS = 9;
@@ -18,39 +17,40 @@ const SOL_DECIMALS = 9;
 function isLikelySolanaAddress(value) {
     return /^[1-9A-HJ-NP-Za-km-z]{32,44}$/.test(value);
 }
+/** A native SOL asset with the canonical metadata (the default form asset has none). */
+function solAsset(balance) {
+    return {
+        type: 'native',
+        balance,
+        metadata: { symbol: 'SOL', decimals: SOL_DECIMALS, fiat: { value: 0, currency: 'USD' } },
+    };
+}
 const SolanaSend = () => {
-    var _a;
     const { sendForm, setSendForm, setRoute } = useOpenfort();
-    const wallet = useSolanaEmbeddedWallet();
-    const address = wallet.status === 'connected' ? wallet.address : undefined;
-    const rpcUrl = wallet.rpcUrl;
-    const balanceResult = useAsyncData({
-        queryKey: ['solana-balance', address, rpcUrl],
-        queryFn: async () => {
-            if (!address || !rpcUrl)
-                return null;
-            const { value } = await fetchSolanaBalance(address, rpcUrl, 'confirmed');
-            return value;
-        },
-        enabled: Boolean(address && rpcUrl),
-    });
-    const balanceLamports = (_a = balanceResult.data) !== null && _a !== void 0 ? _a : undefined;
+    const { data: assets } = useSolanaWalletAssets();
+    const asset = sendForm.asset;
+    const selected = asset.type === 'spl'
+        ? { isSpl: true, mint: asset.address, decimals: asset.metadata.decimals, symbol: asset.metadata.symbol }
+        : { isSpl: false, mint: 'native', decimals: SOL_DECIMALS, symbol: 'SOL' };
+    // Live balance (base units) for the selected token, matched by mint.
+    const liveToken = assets === null || assets === void 0 ? void 0 : assets.find((t) => (selected.isSpl ? t.mint === selected.mint : t.isNative));
+    const balanceBase = liveToken === null || liveToken === void 0 ? void 0 : liveToken.amount;
     const parsedAmount = useMemo(() => {
         const raw = sanitizeForParsing(sendForm.amount);
         if (!raw)
             return null;
         try {
-            return parseUnits(raw, SOL_DECIMALS);
+            return parseUnits(raw, selected.decimals);
         }
         catch {
             return null;
         }
-    }, [sendForm.amount]);
+    }, [sendForm.amount, selected.decimals]);
     const recipientValid = isLikelySolanaAddress(sendForm.recipient.trim());
-    const insufficientBalance = parsedAmount !== null && balanceLamports !== undefined ? parsedAmount > balanceLamports : false;
+    const insufficientBalance = parsedAmount !== null && balanceBase !== undefined ? parsedAmount > balanceBase : false;
     const amountValid = parsedAmount !== null && parsedAmount > BigInt(0) && !insufficientBalance;
     const canProceed = recipientValid && amountValid;
-    const availableLabel = formatBalance(balanceLamports, SOL_DECIMALS);
+    const availableLabel = formatBalance(balanceBase, selected.decimals);
     const handleSubmit = (event) => {
         event.preventDefault();
         if (!canProceed)
@@ -58,15 +58,15 @@ const SolanaSend = () => {
         const normalized = sanitizeForParsing(sendForm.amount);
         if (!normalized)
             return;
+        // Persist the selected token with its live balance so the confirmation reads it.
+        const nextAsset = asset.type === 'spl'
+            ? { type: 'spl', address: asset.address, balance: balanceBase !== null && balanceBase !== void 0 ? balanceBase : asset.balance, metadata: asset.metadata }
+            : solAsset(balanceBase !== null && balanceBase !== void 0 ? balanceBase : BigInt(0));
         setSendForm((prev) => ({
             ...prev,
             recipient: prev.recipient.trim(),
             amount: normalized,
-            asset: {
-                type: 'native',
-                balance: balanceLamports !== null && balanceLamports !== void 0 ? balanceLamports : BigInt(0),
-                metadata: { symbol: 'SOL', decimals: SOL_DECIMALS, fiat: { value: 0, currency: 'USD' } },
-            },
+            asset: nextAsset,
         }));
         setRoute(routes.SOL_SEND_CONFIRMATION);
     };
@@ -77,11 +77,12 @@ const SolanaSend = () => {
         }
     };
     const handleMax = () => {
-        if (balanceLamports === undefined)
+        if (balanceBase === undefined)
             return;
-        setSendForm((prev) => ({ ...prev, amount: formatUnits(balanceLamports, SOL_DECIMALS) }));
+        setSendForm((prev) => ({ ...prev, amount: formatUnits(balanceBase, selected.decimals) }));
     };
-    return (jsxs(PageContent, { onBack: routes.SOL_CONNECTED, children: [jsx(ModalHeading, { children: "Send SOL" }), jsxs(Form, { onSubmit: handleSubmit, children: [jsxs(Field, { children: [jsx(FieldLabel, { children: "Amount" }), jsxs(AmountInputWrapper, { children: [jsx(Input, { placeholder: "0.00", value: sendForm.amount, onChange: handleAmountChange, inputMode: "decimal", autoComplete: "off", style: { paddingRight: '86px' } }), jsx(MaxButton, { type: "button", onClick: handleMax, disabled: balanceLamports === undefined, children: "Max" })] }), jsxs(HelperText, { children: ["Available: ", availableLabel, " SOL"] }), sendForm.amount && parsedAmount === null && jsx(ErrorText, { children: "Enter a valid amount." }), insufficientBalance && jsx(ErrorText, { children: "Insufficient SOL balance for this transfer." })] }), jsxs(Field, { children: [jsx(FieldLabel, { children: "Recipient address" }), jsx(Input, { placeholder: "Solana address", value: sendForm.recipient, onChange: (e) => setSendForm((prev) => ({ ...prev, recipient: e.target.value })), autoComplete: "off" }), sendForm.recipient && !recipientValid && jsx(ErrorText, { children: "Enter a valid Solana address." })] }), jsx(Button, { variant: "primary", disabled: !canProceed, children: "Review transfer" })] })] }));
+    const handleOpenTokenSelector = () => setRoute(routes.SOL_SEND_TOKEN_SELECT);
+    return (jsxs(PageContent, { onBack: routes.SOL_CONNECTED, children: [jsx(ModalHeading, { children: "Send assets" }), jsxs(Form, { onSubmit: handleSubmit, children: [jsxs(Field, { children: [jsx(FieldLabel, { children: "Asset" }), jsxs(TokenSelectorButton, { type: "button", onClick: handleOpenTokenSelector, children: [jsx(TokenSelectorContent, { children: jsx(TokenSelectorValue, { "$primary": true, children: selected.symbol }) }), jsxs(TokenSelectorRight, { children: [jsx(TokenSelectorValue, { children: availableLabel === '--' ? '--' : `${availableLabel} ${selected.symbol}` }), 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" }) })] })] })] }), jsxs(Field, { children: [jsx(FieldLabel, { children: "Amount" }), jsxs(AmountInputWrapper, { children: [jsx(Input, { placeholder: "0.00", value: sendForm.amount, onChange: handleAmountChange, inputMode: "decimal", autoComplete: "off", style: { paddingRight: '86px' } }), jsx(MaxButton, { type: "button", onClick: handleMax, disabled: balanceBase === undefined, children: "Max" })] }), jsxs(HelperText, { children: ["Available: ", availableLabel, " ", selected.symbol] }), sendForm.amount && parsedAmount === null && jsx(ErrorText, { children: "Enter a valid amount." }), insufficientBalance && jsxs(ErrorText, { children: ["Insufficient ", selected.symbol, " balance for this transfer."] })] }), jsxs(Field, { children: [jsx(FieldLabel, { children: "Recipient address" }), jsx(Input, { placeholder: "Solana address", value: sendForm.recipient, onChange: (e) => setSendForm((prev) => ({ ...prev, recipient: e.target.value })), autoComplete: "off" }), sendForm.recipient && !recipientValid && jsx(ErrorText, { children: "Enter a valid Solana address." })] }), jsx(Button, { variant: "primary", disabled: !canProceed, children: "Review transfer" })] })] }));
 };
 
 export { SolanaSend };

package/build/components/Pages/Send/SolanaSend.js.map

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

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

@@ -44,10 +44,13 @@ const isSameToken = (a, b) => {
         return false;
     if (a.type === 'native')
         return true;
-    // At this point, a.type === 'erc20' and b.type === 'erc20'
     if (a.type === 'erc20' && b.type === 'erc20') {
         return a.address.toLowerCase() === b.address.toLowerCase();
     }
+    // SPL mints are base58 and case-sensitive — compare verbatim.
+    if (a.type === 'spl' && b.type === 'spl') {
+        return a.address === b.address;
+    }
     return false;
 };
 const getAssetSymbol = (asset) => {

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

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

package/build/components/Pages/SendConfirmation/SolanaSendConfirmation.js

@@ -1,9 +1,10 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { ChainTypeEnum } from '@openfort/openfort-js';
 import { useState, useEffect } from 'react';
+import { parseUnits } from 'viem';
 import { getExplorerUrl } from '../../../shared/utils/explorer.js';
 import { useSolanaEmbeddedWallet } from '../../../solana/hooks/useSolanaEmbeddedWallet.js';
-import { sendSolGasless, sendSol } from '../../../solana/transfer.js';
+import { sendSplTokenGasless, sendSplToken, sendSolGasless, sendSol } from '../../../solana/transfer.js';
 import 'detect-browser';
 import { truncateSolanaAddress } from '../../../utils/format.js';
 import Button from '../../Common/Button/index.js';
@@ -13,11 +14,12 @@ 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 { ButtonRow, SummaryList, SummaryItem, SummaryLabel, AmountValue, AddressValue, GaslessRow, GaslessToggle, ErrorContainer, ErrorTitle, ErrorMessage } from './styles.js';
+import { ButtonRow, SummaryList, SummaryItem, SummaryLabel, AmountValue, AddressValue, FeesValue, ErrorContainer, ErrorTitle, ErrorMessage } from './styles.js';
 
+const SOL_DECIMALS = 9;
 const SolanaSendConfirmation = () => {
-    var _a;
-    const { sendForm, setRoute, publishableKey, triggerResize } = useOpenfort();
+    var _a, _b;
+    const { sendForm, setRoute, publishableKey, triggerResize, walletConfig } = useOpenfort();
     const wallet = useSolanaEmbeddedWallet();
     const address = wallet.status === 'connected' ? wallet.address : undefined;
     const provider = wallet.status === 'connected' ? wallet.provider : undefined;
@@ -25,7 +27,11 @@ const SolanaSendConfirmation = () => {
     const rpcUrl = wallet.rpcUrl;
     const recipient = sendForm.recipient;
     const amount = sendForm.amount;
-    const [gasless, setGasless] = useState(false);
+    const asset = sendForm.asset;
+    const symbol = asset.type === 'spl' ? asset.metadata.symbol : 'SOL';
+    const decimals = asset.type === 'spl' ? asset.metadata.decimals : SOL_DECIMALS;
+    // Fees are sponsored from config (the SVM counterpart of ethereumFeeSponsorshipId).
+    const isSponsored = Boolean((_b = walletConfig === null || walletConfig === void 0 ? void 0 : walletConfig.solana) === null || _b === void 0 ? void 0 : _b.sponsorFees);
     const [isLoading, setIsLoading] = useState(false);
     const [signature, setSignature] = useState(null);
     const [error, setError] = useState(null);
@@ -37,21 +43,59 @@ const SolanaSendConfirmation = () => {
     const handleConfirm = async () => {
         if (!address || !provider || isLoading)
             return;
-        const amountSol = Number(amount);
-        if (!Number.isFinite(amountSol) || amountSol <= 0) {
+        // The Send screen validates these before navigating here; re-guard in case
+        // this page is reached directly with an unvalidated form.
+        if (!recipient.trim()) {
+            setError('Enter a recipient address.');
+            return;
+        }
+        const amountNum = Number(amount);
+        if (!Number.isFinite(amountNum) || amountNum <= 0) {
             setError('Enter a valid amount.');
             return;
         }
-        if (!gasless && !rpcUrl) {
+        if (!isSponsored && !rpcUrl) {
             setError('No Solana RPC is configured for this network.');
             return;
         }
         setIsLoading(true);
         setError(null);
         try {
-            const sig = gasless
-                ? await sendSolGasless({ from: address, to: recipient, amountSol, provider, cluster, publishableKey })
-                : await sendSol({ from: address, to: recipient, amountSol, provider, rpcUrl: rpcUrl !== null && rpcUrl !== void 0 ? rpcUrl : '' });
+            let sig;
+            if (asset.type === 'spl') {
+                const baseUnits = parseUnits(amount, decimals);
+                sig = isSponsored
+                    ? await sendSplTokenGasless({
+                        from: address,
+                        to: recipient,
+                        mint: asset.address,
+                        amount: baseUnits,
+                        provider,
+                        cluster,
+                        publishableKey,
+                    })
+                    : await sendSplToken({
+                        from: address,
+                        to: recipient,
+                        mint: asset.address,
+                        amount: baseUnits,
+                        decimals,
+                        provider,
+                        rpcUrl: rpcUrl !== null && rpcUrl !== void 0 ? rpcUrl : '',
+                    });
+            }
+            else {
+                sig = isSponsored
+                    ? await sendSolGasless({
+                        from: address,
+                        to: recipient,
+                        amountSol: amountNum,
+                        provider,
+                        cluster,
+                        publishableKey,
+                    })
+                    : await sendSol({ from: address, to: recipient, amountSol: amountNum, provider, rpcUrl: rpcUrl !== null && rpcUrl !== void 0 ? rpcUrl : '' });
+            }
             setSignature(sig);
         }
         catch (err) {
@@ -68,9 +112,9 @@ const SolanaSendConfirmation = () => {
         window.open(getExplorerUrl(ChainTypeEnum.SVM, { txHash: signature, cluster }), '_blank', 'noopener,noreferrer');
     };
     if (signature) {
-        return (jsxs(PageContent, { children: [jsx(Loader, { isSuccess: true, header: "Transfer sent", description: `${amount} SOL sent successfully` }), jsxs(ButtonRow, { children: [jsx(Button, { variant: "primary", onClick: handleViewExplorer, children: "View on Explorer" }), jsx(Button, { variant: "secondary", onClick: handleFinish, children: "Back to profile" })] })] }));
+        return (jsxs(PageContent, { children: [jsx(Loader, { isSuccess: true, header: "Transfer sent", description: `${amount} ${symbol} sent successfully` }), jsxs(ButtonRow, { children: [jsx(Button, { variant: "primary", onClick: handleViewExplorer, children: "View on Explorer" }), jsx(Button, { variant: "secondary", onClick: handleFinish, children: "Back to profile" })] })] }));
     }
-    return (jsxs(PageContent, { onBack: routes.SOL_SEND, children: [jsx(ModalHeading, { children: "Confirm transfer" }), jsx(ModalBody, { children: "Review the transaction details before sending." }), jsxs(SummaryList, { children: [jsxs(SummaryItem, { children: [jsx(SummaryLabel, { children: "Sending" }), jsxs(AmountValue, { children: [amount || '0', " SOL"] })] }), jsxs(SummaryItem, { children: [jsx(SummaryLabel, { children: "From" }), jsx(AddressValue, { children: address ? (jsx(CopyText, { size: "1rem", value: address, children: truncateSolanaAddress(address) })) : ('--') })] }), jsxs(SummaryItem, { children: [jsx(SummaryLabel, { children: "To" }), jsx(AddressValue, { children: recipient ? (jsx(CopyText, { size: "1rem", value: recipient, children: truncateSolanaAddress(recipient) })) : ('--') })] })] }), jsxs(GaslessRow, { children: [jsxs("div", { children: [jsx(SummaryLabel, { children: "Sponsor network fee" }), jsx("div", { style: { fontSize: 12, color: 'var(--ck-body-color-muted)', marginTop: 2 }, children: "Pay no SOL fee (requires a sponsorship policy)" })] }), jsx(GaslessToggle, { type: "button", role: "switch", "aria-checked": gasless, "aria-label": "Sponsor network fee", "$on": gasless, onClick: () => setGasless((v) => !v), disabled: isLoading, children: jsx("span", {}) })] }), error && (jsxs(ErrorContainer, { children: [jsx(ErrorTitle, { children: "Transaction failed" }), jsx(ErrorMessage, { children: error })] })), jsxs(ButtonRow, { children: [jsx(Button, { variant: "primary", onClick: handleConfirm, disabled: !address || isLoading, waiting: isLoading, children: isLoading ? 'Confirming...' : 'Confirm' }), jsx(Button, { variant: "secondary", onClick: () => setRoute(routes.SOL_SEND), disabled: isLoading, children: "Cancel" })] })] }));
+    return (jsxs(PageContent, { onBack: routes.SOL_SEND, children: [jsx(ModalHeading, { children: "Confirm transfer" }), jsx(ModalBody, { children: "Review the transaction details before sending." }), jsxs(SummaryList, { children: [jsxs(SummaryItem, { children: [jsx(SummaryLabel, { children: "Sending" }), jsxs(AmountValue, { children: [amount || '0', " ", symbol] })] }), jsxs(SummaryItem, { children: [jsx(SummaryLabel, { children: "From" }), jsx(AddressValue, { children: address ? (jsx(CopyText, { size: "1rem", value: address, children: truncateSolanaAddress(address) })) : ('--') })] }), jsxs(SummaryItem, { children: [jsx(SummaryLabel, { children: "To" }), jsx(AddressValue, { children: recipient ? (jsx(CopyText, { size: "1rem", value: recipient, children: truncateSolanaAddress(recipient) })) : ('--') })] }), isSponsored && (jsxs(SummaryItem, { children: [jsx(SummaryLabel, { children: "Network fee" }), jsx(FeesValue, { "$completed": true, children: "Sponsored" })] }))] }), error && (jsxs(ErrorContainer, { children: [jsx(ErrorTitle, { children: "Transaction failed" }), jsx(ErrorMessage, { children: error })] })), jsxs(ButtonRow, { children: [jsx(Button, { variant: "primary", onClick: handleConfirm, disabled: !address || isLoading, waiting: isLoading, children: isLoading ? 'Confirming...' : 'Confirm' }), jsx(Button, { variant: "secondary", onClick: () => setRoute(routes.SOL_SEND), disabled: isLoading, children: "Cancel" })] })] }));
 };
 
 export { SolanaSendConfirmation };

package/build/components/Pages/SendConfirmation/SolanaSendConfirmation.js.map

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

package/build/components/Pages/SendConfirmation/styles.d.ts

@@ -16,8 +16,3 @@ export declare const ErrorContainer: import("styled-components").StyledComponent
 export declare const ErrorTitle: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ErrorMessage: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ErrorAction: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const GaslessRow: import("styled-components").StyledComponent<"div", any, {}, never>;
-/** A minimal theme-aware switch for the Solana "sponsor fee" toggle. */
-export declare const GaslessToggle: import("styled-components").StyledComponent<"button", any, {
-    $on?: boolean;
-}, never>;

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

@@ -124,44 +124,6 @@ const ErrorAction = styled.div `
   color: var(--ck-body-color-muted);
   line-height: 1.4;
 `;
-const GaslessRow = styled.div `
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-  margin: 4px 0 8px;
-  text-align: left;
-`;
-/** A minimal theme-aware switch for the Solana "sponsor fee" toggle. */
-const GaslessToggle = styled.button `
-  position: relative;
-  flex-shrink: 0;
-  width: 40px;
-  height: 24px;
-  border-radius: 999px;
-  border: 1px solid var(--ck-body-divider);
-  background: ${(props) => (props.$on ? 'var(--ck-body-color-valid, #22c55e)' : 'var(--ck-body-background-secondary)')};
-  cursor: pointer;
-  transition: background 150ms ease;
-  padding: 0;
-
-  &:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-
-  > span {
-    position: absolute;
-    top: 50%;
-    left: ${(props) => (props.$on ? '18px' : '2px')};
-    transform: translateY(-50%);
-    width: 18px;
-    height: 18px;
-    border-radius: 50%;
-    background: #fff;
-    transition: left 150ms ease;
-  }
-`;
 
-export { AddressValue, AmountValue, ButtonRow, CheckIconWrapper, ErrorAction, ErrorContainer, ErrorMessage, ErrorTitle, FeesValue, GaslessRow, GaslessToggle, InfoIconWrapper, StatusMessage, SummaryItem, SummaryLabel, SummaryList };
+export { AddressValue, AmountValue, ButtonRow, CheckIconWrapper, ErrorAction, ErrorContainer, ErrorMessage, ErrorTitle, FeesValue, InfoIconWrapper, StatusMessage, SummaryItem, SummaryLabel, SummaryList };
 //# sourceMappingURL=styles.js.map

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

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