@openfort/react 1.3.0 → 1.4.0

package/build/components/Common/Modal/styles.js

@@ -237,6 +237,9 @@ const BoxContainer = styled(motion.div) `
     left: 50%;
     width: var(--width);
     height: var(--height);
+    /* Match InnerContainer's viewport cap so a tall page's card background
+       doesn't run off-screen while the content scrolls inside. */
+    max-height: 88vh;
     transform: translateX(-50%);
     backface-visibility: hidden;
     transition: all 200ms ease;

package/build/components/Common/Modal/styles.js.map

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

package/build/components/Common/ScrollArea/index.d.ts

@@ -1,7 +1,11 @@
 import type React from 'react';
-export declare const ScrollArea: ({ children, height, backgroundColor, mobileDirection, }: {
+export declare const ScrollArea: ({ children, height, backgroundColor, mobileDirection, fill, }: {
     children: React.ReactNode;
     height?: number;
     backgroundColor?: string;
     mobileDirection?: "horizontal" | "vertical";
+    /** Grow to fill a flex parent and scroll internally, instead of capping at a
+     * fixed pixel height. Use inside a bounded flex column to keep siblings (e.g.
+     * a footer) pinned while only this region scrolls. */
+    fill?: boolean;
 }) => import("react/jsx-runtime").JSX.Element;

package/build/components/Common/ScrollArea/index.js

@@ -4,7 +4,7 @@ import useIsMobile from '../../../hooks/useIsMobile.js';
 import { ScrollContainer, ScrollAreaContainer, MoreIndicator } from './styles.js';
 
 const ArrowDown = () => (jsxs("svg", { width: "11", height: "12", viewBox: "0 0 11 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx("title", { children: "Scroll down arrow" }), jsx("path", { d: "M5.49438 1L5.49438 11M5.49438 11L9.5 7M5.49438 11L1.5 7", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round" })] }));
-const ScrollArea = ({ children, height, backgroundColor, mobileDirection, }) => {
+const ScrollArea = ({ children, height, backgroundColor, mobileDirection, fill, }) => {
     const ref = useRef(null);
     const moreRef = useRef(null);
     const isMobile = useIsMobile();
@@ -44,7 +44,7 @@ const ScrollArea = ({ children, height, backgroundColor, mobileDirection, }) =>
             el.removeEventListener('scroll', handleScroll);
         };
     }, [ref.current]);
-    return (jsxs(ScrollContainer, { children: [jsx(ScrollAreaContainer, { ref: ref, "$mobile": isMobile, "$height": height, "$backgroundColor": backgroundColor, "$mobileDirection": mobileDirection, children: children }), jsx(MoreIndicator, { ref: moreRef, className: "hide", onClick: () => {
+    return (jsxs(ScrollContainer, { "$fill": fill, children: [jsx(ScrollAreaContainer, { ref: ref, "$mobile": isMobile, "$height": height, "$backgroundColor": backgroundColor, "$mobileDirection": mobileDirection, "$fill": fill, children: children }), jsx(MoreIndicator, { ref: moreRef, className: "hide", onClick: () => {
                     if (ref.current) {
                         ref.current.scrollTo({
                             top: ref.current.scrollHeight,

package/build/components/Common/ScrollArea/styles.d.ts

@@ -1,8 +1,11 @@
-export declare const ScrollContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ScrollContainer: import("styled-components").StyledComponent<"div", any, {
+    $fill?: boolean;
+}, never>;
 export declare const MoreIndicator: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ScrollAreaContainer: import("styled-components").StyledComponent<"div", any, {
     $mobile?: boolean;
     $height?: number;
     $backgroundColor?: string;
     $mobileDirection?: "horizontal" | "vertical";
+    $fill?: boolean;
 }, never>;

package/build/components/Common/ScrollArea/styles.js

@@ -1,8 +1,15 @@
-import { keyframes, css } from 'styled-components';
+import { css, keyframes } from 'styled-components';
 import styled from '../../../styles/styled/index.js';
 
 const ScrollContainer = styled.div `
   position: relative;
+  ${({ $fill }) => $fill &&
+    css `
+      display: flex;
+      flex-direction: column;
+      flex: 1 1 auto;
+      min-height: 0;
+    `}
 `;
 const fadeIn = keyframes `
 0%{ opacity:0; }
@@ -60,7 +67,7 @@ const ScrollAreaContainer = styled.div `
   position: relative;
   z-index: 1;
 
-  ${({ $mobile, $height, $mobileDirection }) => $mobile && $mobileDirection === 'horizontal'
+  ${({ $mobile, $height, $mobileDirection, $fill }) => $mobile && $mobileDirection === 'horizontal'
     ? css `
           overflow-x: scroll;
           margin: 0 -24px;
@@ -103,8 +110,16 @@ const ScrollAreaContainer = styled.div `
           }
         `
     : css `
-          max-height: ${$height ? `${$height}px` : '310px'};
-          overflow-y: scroll;
+          ${$fill
+        ? css `
+                flex: 1 1 auto;
+                min-height: 0;
+                overflow-y: scroll;
+              `
+        : css `
+                max-height: ${$height ? `${$height}px` : '310px'};
+                overflow-y: scroll;
+              `}
           padding: 0 10px;
           margin: calc(var(--fade-height) * -1) -16px 0 -10px;
 

package/build/components/Common/ScrollArea/styles.js.map

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

package/build/components/ConnectModal/index.js

@@ -149,17 +149,27 @@ const ConnectModal = ({ mode = 'auto', theme = 'auto', customTheme = customTheme
     const isConnected = (_a = strategy === null || strategy === void 0 ? void 0 : strategy.isConnected(state)) !== null && _a !== void 0 ? _a : false;
     const chainId = strategy === null || strategy === void 0 ? void 0 : strategy.getChainId();
     const chainIsSupported = chainId != null && context.chains.some((c) => c.id === chainId);
-    // Auto-close when the user goes from not-connected → connected while the modal is open.
-    // Using a ref to track the previous value so we only react to the false → true transition,
-    // not when the modal is opened while already connected (e.g. user opens profile).
+    // Auto-close only when the connect/auth flow completes: the modal was opened while
+    // disconnected and then became connected. We latch the "opened-while-connected" state
+    // on each open transition, so a chain switch — which briefly drops and restores the
+    // connection while the modal is already open and connected — never triggers a close.
+    const prevOpenRef = useRef(context.open);
+    const openedConnectedRef = useRef(isConnected);
     const prevIsConnectedRef = useRef(isConnected);
     useEffect(() => {
+        const justOpened = context.open && !prevOpenRef.current;
+        prevOpenRef.current = context.open;
+        if (justOpened) {
+            openedConnectedRef.current = isConnected;
+            prevIsConnectedRef.current = isConnected;
+            return;
+        }
         const wasConnected = prevIsConnectedRef.current;
         prevIsConnectedRef.current = isConnected;
-        if (!wasConnected && isConnected && context.open) {
+        if (!openedConnectedRef.current && !wasConnected && isConnected && context.open) {
             context.setOpen(false);
         }
-    }, [isConnected]);
+    }, [isConnected, context.open]);
     //if chain is unsupported we enforce a "switch chain" prompt
     const closeable = !(context.uiConfig.enforceSupportedChains && isConnected && !chainIsSupported);
     const route = context.route.route;

package/build/components/ConnectModal/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/PageContent/index.d.ts

@@ -6,6 +6,7 @@ type PageContentProps = {
     onBack?: SetOnBackFunction;
     logoutOnBack?: boolean;
     header?: string;
+    className?: string;
 };
-export declare const PageContent: ({ children, width, onBack, logoutOnBack, header }: PageContentProps) => import("react/jsx-runtime").JSX.Element;
+export declare const PageContent: ({ children, width, onBack, logoutOnBack, header, className, }: PageContentProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/build/components/PageContent/index.js

@@ -5,7 +5,7 @@ import { ModalHeading } from '../Common/Modal/styles.js';
 import { useOpenfort } from '../Openfort/useOpenfort.js';
 import { PageContentStyle } from './styles.js';
 
-const PageContent = ({ children, width, onBack = 'back', logoutOnBack, header }) => {
+const PageContent = ({ children, width, onBack = 'back', logoutOnBack, header, className, }) => {
     const { setOnBack, setRoute, setPreviousRoute, setRouteHistory } = useOpenfort();
     const { signOut } = useSignOut();
     useEffect(() => {
@@ -48,7 +48,7 @@ const PageContent = ({ children, width, onBack = 'back', logoutOnBack, header })
         else
             setOnBack(null);
     }, [!!onBack, !!logoutOnBack]);
-    return (jsxs(PageContentStyle, { style: { width }, children: [header && jsx(ModalHeading, { children: header }), children] }));
+    return (jsxs(PageContentStyle, { className: className, style: { width }, children: [header && jsx(ModalHeading, { children: header }), children] }));
 };
 
 export { PageContent };

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

@@ -1,9 +1,10 @@
-export declare const ProviderSelectContent: import("styled-components").StyledComponent<({ children, width, onBack, logoutOnBack, header }: {
+export declare const ProviderSelectContent: import("styled-components").StyledComponent<({ children, width, onBack, logoutOnBack, header, className, }: {
     children?: React.ReactNode;
     width?: number | string;
     onBack?: import("../../PageContent").SetOnBackFunction;
     logoutOnBack?: boolean;
     header?: string;
+    className?: string;
 }) => import("react/jsx-runtime").JSX.Element, any, {}, never>;
 export declare const ProviderList: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ProviderButton: import("styled-components").StyledComponent<"button", any, {

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

@@ -63,10 +63,14 @@ const EthereumConnected = () => {
     });
     const ensName = identity.status === 'success' ? identity.name : undefined;
     const { data: assets, isLoading } = useEthereumWalletAssets();
+    // Total is summed from the multi-chain assets so the headline matches the
+    // "Your assets" breakdown. The single-chain path omits fiat for native ETH,
+    // which would otherwise drop it from the total.
+    const { data: multiChainAssets } = useEthereumWalletAssets({ multiChain: true });
     const totalBalanceUsd = useMemo(() => {
-        if (!assets)
+        if (!multiChainAssets)
             return 0;
-        return assets.reduce((acc, asset) => {
+        return multiChainAssets.reduce((acc, asset) => {
             var _a, _b, _c, _d;
             if (!asset.metadata || !asset.balance)
                 return acc;
@@ -76,7 +80,7 @@ const EthereumConnected = () => {
             const balance = Number(formatUnits((_d = asset.balance) !== null && _d !== void 0 ? _d : BigInt(0), getAssetDecimals(asset)));
             return acc + price * balance;
         }, 0);
-    }, [assets]);
+    }, [multiChainAssets]);
     useEffect(() => {
         context.triggerResize();
     }, [context.triggerResize]);

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

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

package/build/components/Pages/Deposit/AssetChainLogo.d.ts

@@ -1,9 +1,12 @@
 /**
  * Center logo for the deposit QR: the asset logo with the chain logo as a small
  * badge bottom-left, so scanners can confirm the right token + network at a glance.
- * Kept fully within the logo slot (no overflow) so it never covers QR data modules.
+ * Falls back to a colored monogram when the token has no usable logo, so the QR
+ * centre is never blank (and never collapses to just the chain badge). Kept fully
+ * within the logo slot (no overflow) so it never covers QR data modules.
  */
-export declare function AssetChainLogo({ assetLogo, chainLogo }: {
+export declare function AssetChainLogo({ assetLogo, chainLogo, symbol, }: {
     assetLogo: string;
     chainLogo: string;
+    symbol?: string;
 }): import("react/jsx-runtime").JSX.Element;

package/build/components/Pages/Deposit/AssetChainLogo.js

@@ -1,4 +1,6 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import { symbolToColor } from '../../../constants/logos.js';
 
 const hide = (e) => {
     e.currentTarget.style.display = 'none';
@@ -6,10 +8,25 @@ const hide = (e) => {
 /**
  * Center logo for the deposit QR: the asset logo with the chain logo as a small
  * badge bottom-left, so scanners can confirm the right token + network at a glance.
- * Kept fully within the logo slot (no overflow) so it never covers QR data modules.
+ * Falls back to a colored monogram when the token has no usable logo, so the QR
+ * centre is never blank (and never collapses to just the chain badge). Kept fully
+ * within the logo slot (no overflow) so it never covers QR data modules.
  */
-function AssetChainLogo({ assetLogo, chainLogo }) {
-    return (jsxs("div", { style: { position: 'relative', width: '100%' }, children: [jsx("img", { src: assetLogo, alt: "", onError: hide, style: { display: 'block', width: '100%', borderRadius: '50%' } }), jsx("img", { src: chainLogo, alt: "", onError: hide, style: {
+function AssetChainLogo({ assetLogo, chainLogo, symbol, }) {
+    const [assetFailed, setAssetFailed] = useState(false);
+    const showMonogram = !assetLogo || assetFailed;
+    return (jsxs("div", { style: { position: 'relative', width: '100%' }, children: [showMonogram ? (jsx("div", { style: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    width: '100%',
+                    aspectRatio: '1 / 1',
+                    borderRadius: '50%',
+                    background: symbolToColor(symbol || '?'),
+                    color: '#fff',
+                    fontWeight: 600,
+                    fontSize: 28,
+                }, children: (symbol || '?').charAt(0).toUpperCase() })) : (jsx("img", { src: assetLogo, alt: "", onError: () => setAssetFailed(true), style: { display: 'block', width: '100%', borderRadius: '50%' } })), chainLogo && (jsx("img", { src: chainLogo, alt: "", onError: hide, style: {
                     position: 'absolute',
                     bottom: 0,
                     left: 0,
@@ -17,7 +34,7 @@ function AssetChainLogo({ assetLogo, chainLogo }) {
                     borderRadius: '50%',
                     border: '2px solid #fff',
                     background: '#fff',
-                } })] }));
+                } }))] }));
 }
 
 export { AssetChainLogo };

package/build/components/Pages/Deposit/AssetChainLogo.js.map

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

package/build/components/Pages/Deposit/DepositAddressBlock.js

@@ -21,7 +21,7 @@ function DepositAddressBlock({ assetLogo, chainLogo, receiverAddress, pm, source
                 , { 
                     // Encode the EIP-681 / Solana Pay URI (address + amount + network) so a
                     // scanner prefills the send; fall back to the bare address same-chain.
-                    value: (_a = pm === null || pm === void 0 ? void 0 : pm.addressUri) !== null && _a !== void 0 ? _a : receiverAddress, image: jsx(AssetChainLogo, { assetLogo: assetLogo !== null && assetLogo !== void 0 ? assetLogo : '', chainLogo: chainLogo !== null && chainLogo !== void 0 ? chainLogo : '' }), imageClip: false }) }), jsx("div", { style: depositAddressLabel, children: "Your deposit address" }), jsxs("div", { style: addressBox, children: [jsx("code", { style: codeStyle, children: receiverAddress }), jsx(CopyIconButton, { value: receiverAddress, size: 28 })] }), status && jsx(DepositStatus, { status: status }), !sameChain && pm && jsx(DepositDetails, { pm: pm, sourceCurrency: sourceCurrency })] }));
+                    value: (_a = pm === null || pm === void 0 ? void 0 : pm.addressUri) !== null && _a !== void 0 ? _a : receiverAddress, image: jsx(AssetChainLogo, { assetLogo: assetLogo !== null && assetLogo !== void 0 ? assetLogo : '', chainLogo: chainLogo !== null && chainLogo !== void 0 ? chainLogo : '', symbol: sourceCurrency === null || sourceCurrency === void 0 ? void 0 : sourceCurrency.symbol }), imageClip: false }) }), jsx("div", { style: depositAddressLabel, children: "Your deposit address" }), jsxs("div", { style: addressBox, children: [jsx("code", { style: codeStyle, children: receiverAddress }), jsx(CopyIconButton, { value: receiverAddress, size: 28 })] }), status && jsx(DepositStatus, { status: status }), !sameChain && pm && jsx(DepositDetails, { pm: pm, sourceCurrency: sourceCurrency })] }));
 }
 
 export { DepositAddressBlock };

package/build/components/Pages/Deposit/RouteSelectors.js

@@ -1,4 +1,6 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { chainLogoUrl, currencyLogoUrl } from '../../../constants/logos.js';
+import { caipToChainId } from '../DepositWallet/walletDeeplinks.js';
 import { twoCol, field } from './formStyles.js';
 import { LogoSelect } from './LogoSelect.js';
 import { Skeleton } from './styles.js';
@@ -12,7 +14,15 @@ function RouteSelectors({ chains, chain, currency, chainLabel, onChainChange, on
     }
     const activeChain = (_a = chains.find((c) => c.id === chain)) !== null && _a !== void 0 ? _a : chains[0];
     const currencies = (_b = activeChain === null || activeChain === void 0 ? void 0 : activeChain.currencies) !== null && _b !== void 0 ? _b : [];
-    return (jsxs("div", { style: twoCol, children: [jsxs("div", { style: field, children: [chainLabel, jsx(LogoSelect, { value: (_c = activeChain === null || activeChain === void 0 ? void 0 : activeChain.id) !== null && _c !== void 0 ? _c : '', onChange: onChainChange, options: chains.map((c) => ({ value: c.id, label: c.name, logo: c.logo })) })] }), jsxs("div", { style: field, children: ["Currency", jsx(LogoSelect, { value: currency, onChange: onCurrencyChange, options: currencies.map((c) => ({ value: c.symbol, label: c.symbol, logo: c.logo })) })] })] }));
+    return (jsxs("div", { style: twoCol, children: [jsxs("div", { style: field, children: [chainLabel, jsx(LogoSelect, { value: (_c = activeChain === null || activeChain === void 0 ? void 0 : activeChain.id) !== null && _c !== void 0 ? _c : '', onChange: onChainChange, options: chains.map((c) => ({
+                            value: c.id,
+                            label: c.name,
+                            logo: chainLogoUrl(caipToChainId(c.id), c.logo),
+                        })) })] }), jsxs("div", { style: field, children: ["Currency", jsx(LogoSelect, { value: currency, onChange: onCurrencyChange, options: currencies.map((c) => ({
+                            value: c.symbol,
+                            label: c.symbol,
+                            logo: currencyLogoUrl(c.symbol, c.logo),
+                        })) })] })] }));
 }
 
 export { RouteSelectors };

package/build/components/Pages/Deposit/RouteSelectors.js.map

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

package/build/components/Pages/Deposit/SameChainDepositStatus.d.ts

@@ -0,0 +1,7 @@
+/**
+ * "Waiting for your deposit…" banner shown under the deposit address for a
+ * same-chain "transfer from address". Arrival detection lives in
+ * {@link import('./useSameChainArrival').useSameChainArrival}; on arrival the
+ * page swaps to {@link import('./SameChainDepositSuccess').SameChainDepositSuccess}.
+ */
+export declare function SameChainDepositStatus(): import("react/jsx-runtime").JSX.Element;

package/build/components/Pages/Deposit/SameChainDepositStatus.js

@@ -0,0 +1,34 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useEffect } from 'react';
+import styled from '../../../styles/styled/index.js';
+import { Spinner } from '../../Common/Spinner/index.js';
+import { useOpenfort } from '../../Openfort/useOpenfort.js';
+
+const Banner = styled.div `
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 14px;
+  padding: 10px 12px;
+  border-radius: 10px;
+  border: 1px solid var(--ck-body-divider, #e4e4e7);
+  background: var(--ck-body-background-secondary, #fafafa);
+  font-size: 14px;
+  color: var(--ck-body-color-muted, #6b7280);
+`;
+/**
+ * "Waiting for your deposit…" banner shown under the deposit address for a
+ * same-chain "transfer from address". Arrival detection lives in
+ * {@link import('./useSameChainArrival').useSameChainArrival}; on arrival the
+ * page swaps to {@link import('./SameChainDepositSuccess').SameChainDepositSuccess}.
+ */
+function SameChainDepositStatus() {
+    const { triggerResize } = useOpenfort();
+    useEffect(() => {
+        triggerResize();
+    }, [triggerResize]);
+    return (jsxs(Banner, { children: [jsx(Spinner, {}), jsx("span", { children: "Waiting for your deposit\u2026" })] }));
+}
+
+export { SameChainDepositStatus };
+//# sourceMappingURL=SameChainDepositStatus.js.map

package/build/components/Pages/Deposit/SameChainDepositStatus.js.map

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

package/build/components/Pages/Deposit/SameChainDepositSuccess.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Terminal success screen for a same-chain "transfer from address" deposit.
+ * The deposit lands in the wallet itself (no rail session), so arrival is
+ * detected by a native balance increase and we don't hold the inbound tx hash —
+ * "View on Explorer" therefore opens the wallet's address page, where the
+ * incoming transfer is listed.
+ */
+export declare function SameChainDepositSuccess({ address, chainId }: {
+    address: string;
+    chainId: number;
+}): import("react/jsx-runtime").JSX.Element;

package/build/components/Pages/Deposit/SameChainDepositSuccess.js

@@ -0,0 +1,30 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { ChainTypeEnum } from '@openfort/openfort-js';
+import { useEffect } from 'react';
+import { getExplorerUrl } from '../../../shared/utils/explorer.js';
+import Button from '../../Common/Button/index.js';
+import Loader from '../../Common/Loading/index.js';
+import PoweredByFooter from '../../Common/PoweredByFooter/index.js';
+import { routes } from '../../Openfort/types.js';
+import { useOpenfort } from '../../Openfort/useOpenfort.js';
+import { PageContent } from '../../PageContent/index.js';
+
+/**
+ * Terminal success screen for a same-chain "transfer from address" deposit.
+ * The deposit lands in the wallet itself (no rail session), so arrival is
+ * detected by a native balance increase and we don't hold the inbound tx hash —
+ * "View on Explorer" therefore opens the wallet's address page, where the
+ * incoming transfer is listed.
+ */
+function SameChainDepositSuccess({ address, chainId }) {
+    const { setRoute, triggerResize } = useOpenfort();
+    // Collapse the modal from the tall deposit form down to the compact card.
+    useEffect(() => {
+        triggerResize();
+    }, [triggerResize]);
+    const explorerUrl = getExplorerUrl(ChainTypeEnum.EVM, { chainId, address });
+    return (jsxs(PageContent, { children: [jsx(Loader, { isSuccess: true, header: "Deposit received", description: "Funds are in your wallet" }), explorerUrl && (jsx(Button, { variant: "primary", onClick: () => window.open(explorerUrl, '_blank', 'noopener,noreferrer'), children: "View on Explorer" })), jsx(Button, { variant: "secondary", onClick: () => setRoute(routes.CONNECTED), children: "Back to profile" }), jsx(PoweredByFooter, {})] }));
+}
+
+export { SameChainDepositSuccess };
+//# sourceMappingURL=SameChainDepositSuccess.js.map

package/build/components/Pages/Deposit/SameChainDepositSuccess.js.map

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

package/build/components/Pages/Deposit/TestnetNotice.d.ts

@@ -0,0 +1,10 @@
+/**
+ * A dev-facing notice shown only for test keys (`pk_test_…`) in the Deposit flow.
+ *
+ * Collapsed by default to a single summary line; expands to explain that funding
+ * routes through Relay, whose testnet rail bridges the same asset but cannot swap
+ * to a different token (testnets lack DEX liquidity, so e.g. `ETH → USDC` fails),
+ * and that card/exchange rails are mainnet-only. Links to Relay's testnet guide.
+ * Renders nothing on live keys.
+ */
+export declare function TestnetNotice(): import("react/jsx-runtime").JSX.Element | null;

package/build/components/Pages/Deposit/TestnetNotice.js

@@ -0,0 +1,131 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
+import styled from '../../../styles/styled/index.js';
+import { getPublishableKeyEnvironment } from '../../../utils/validation.js';
+import { useOpenfort } from '../../Openfort/useOpenfort.js';
+
+/** Relay's own testnet guide — the authoritative explanation of the limitation. */
+const RELAY_TESTNET_DOCS = 'https://docs.relay.link/references/api/api_guides/testnet#testnet-support';
+const FlaskIcon = () => (jsxs("svg", { width: "15", height: "15", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", children: [jsx("path", { d: "M6 1.5h4M6.5 1.5v4.2L3.3 11.4A1.5 1.5 0 0 0 4.6 13.7h6.8a1.5 1.5 0 0 0 1.3-2.3L9.5 5.7V1.5", stroke: "currentColor", strokeWidth: "1.3", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M5.1 9h5.8", stroke: "currentColor", strokeWidth: "1.3", strokeLinecap: "round" })] }));
+const Card = styled.div `
+  text-align: left;
+  margin-bottom: 14px;
+  border-radius: 12px;
+  /* Amber "sandbox" tint that reads on both light and dark themes. */
+  background: rgba(245, 158, 11, 0.09);
+  border: 1px solid rgba(245, 158, 11, 0.28);
+  color: var(--ck-body-color);
+`;
+/** The always-visible summary row; the whole row toggles the details. */
+const Header = styled.button `
+  appearance: none;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  padding: 10px 12px;
+  background: none;
+  border: 0;
+  cursor: pointer;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+`;
+const Badge = styled.span `
+  flex-shrink: 0;
+  width: 22px;
+  height: 22px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 7px;
+  color: #b45309;
+  background: rgba(245, 158, 11, 0.18);
+`;
+const Summary = styled.span `
+  flex: 1;
+  min-width: 0;
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 1.3;
+`;
+const Chevron = styled.span `
+  flex-shrink: 0;
+  color: var(--ck-body-color-muted, #6b7280);
+  font-size: 11px;
+  transition: transform 150ms ease;
+  transform: rotate(${({ $open }) => ($open ? '90deg' : '0deg')});
+`;
+const Body = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 7px;
+  padding: 0 12px 12px 43px;
+  font-size: 12.5px;
+  line-height: 1.45;
+`;
+const Muted = styled.p `
+  margin: 0;
+  color: var(--ck-body-color-muted, #6b7280);
+`;
+const Rules = styled.ul `
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+
+  li {
+    display: flex;
+    align-items: flex-start;
+    gap: 7px;
+  }
+  li[data-ok='true']::before {
+    content: '✓';
+    color: #16a34a;
+    font-weight: 700;
+  }
+  li[data-ok='false']::before {
+    content: '✕';
+    color: #dc2626;
+    font-weight: 700;
+  }
+`;
+const DocsLink = styled.a `
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  width: fit-content;
+  font-weight: 600;
+  color: var(--ck-body-color);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+
+  &:hover {
+    opacity: 0.8;
+  }
+`;
+/**
+ * A dev-facing notice shown only for test keys (`pk_test_…`) in the Deposit flow.
+ *
+ * Collapsed by default to a single summary line; expands to explain that funding
+ * routes through Relay, whose testnet rail bridges the same asset but cannot swap
+ * to a different token (testnets lack DEX liquidity, so e.g. `ETH → USDC` fails),
+ * and that card/exchange rails are mainnet-only. Links to Relay's testnet guide.
+ * Renders nothing on live keys.
+ */
+function TestnetNotice() {
+    const { publishableKey, triggerResize } = useOpenfort();
+    const [open, setOpen] = useState(false);
+    // Re-measure the modal when the details expand/collapse so it grows/shrinks to fit.
+    useEffect(() => {
+        triggerResize();
+    }, [open, triggerResize]);
+    if (getPublishableKeyEnvironment(publishableKey) !== 'test')
+        return null;
+    return (jsxs(Card, { children: [jsxs(Header, { type: "button", "aria-expanded": open, onClick: () => setOpen((v) => !v), children: [jsx(Badge, { children: jsx(FlaskIcon, {}) }), jsx(Summary, { children: "Testnet mode \u2014 funding is limited" }), jsx(Chevron, { "$open": open, children: "\u25B6" })] }), open && (jsxs(Body, { children: [jsx(Muted, { children: "Deposits route through Relay's testnet rail. It bridges the same asset but can't swap between tokens \u2014 testnets have no DEX liquidity. Card and exchange rails are mainnet-only." }), jsxs(Rules, { children: [jsx("li", { "data-ok": "true", children: "Bridging the same asset (e.g. ETH \u2192 ETH) and same-chain transfers" }), jsx("li", { "data-ok": "false", children: "Swapping to another token (e.g. \u2192 USDC) \u2014 fails with \"$0 liquidity\"" })] }), jsx(Muted, { children: "To test swaps, card or exchange deposits, use a live key on a low-cost chain like Base." }), jsx(DocsLink, { href: RELAY_TESTNET_DOCS, target: "_blank", rel: "noreferrer", children: "Why? Read Relay's testnet guide \u2197" })] }))] }));
+}
+
+export { TestnetNotice };
+//# sourceMappingURL=TestnetNotice.js.map

package/build/components/Pages/Deposit/TestnetNotice.js.map

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

package/build/components/Pages/Deposit/UnsupportedNetworkNotice.d.ts

@@ -0,0 +1,12 @@
+import type { FundingChain } from '../../../hooks/openfort/useFundingChains';
+/**
+ * Shown in the deposit flow when the active funding TARGET chain (the embedded
+ * wallet's chain) isn't one the rail can deliver to — e.g. Polygon Amoy or a
+ * Solana testnet, which Relay's testnet rail doesn't route. Explains why, and
+ * (on EVM) offers a one-tap switch to the supported chains. Solana-only contexts
+ * have no in-VM switch, so they get the explanation alone.
+ */
+export declare function UnsupportedNetworkNotice({ targetChain, railChains, }: {
+    targetChain: string;
+    railChains: FundingChain[];
+}): import("react/jsx-runtime").JSX.Element;