@openfort/react 1.5.1 → 1.6.1

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

@@ -6,4 +6,14 @@ export declare const ChainContainer: import("styled-components").StyledComponent
 export declare const LogoContainer: import("styled-components").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, any, {}, never>;
 export declare const LoadingContainer: import("styled-components").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, any, {}, never>;
 export declare const Unsupported: import("styled-components").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, any, {}, never>;
+/**
+ * Pill-shaped chain indicator/switch button shown in the connected header.
+ *
+ * Shared by the EVM `ChainSelect` (which adds a chevron + dropdown when more
+ * than one chain is available) and the read-only Solana indicator (which always
+ * renders in the `disabled` single-network state). The `disabled` branch
+ * collapses to an icon-only badge and shifts left to keep the icon aligned with
+ * the enabled pill.
+ */
+export declare const SwitchChainButton: import("styled-components").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLButtonElement, import("framer-motion").HTMLMotionProps<"button">>, any, {}, never>;
 export {};

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

@@ -1,5 +1,6 @@
 import { motion } from 'framer-motion';
 import { css, keyframes } from 'styled-components';
+import defaultTheme from '../../../constants/defaultTheme.js';
 import styled from '../../../styles/styled/index.js';
 
 const ChainContainer = styled.div `
@@ -89,6 +90,107 @@ const Unsupported = styled(motion.div) `
     right: -30%;
   }
 `;
+/**
+ * Pill-shaped chain indicator/switch button shown in the connected header.
+ *
+ * Shared by the EVM `ChainSelect` (which adds a chevron + dropdown when more
+ * than one chain is available) and the read-only Solana indicator (which always
+ * renders in the `disabled` single-network state). The `disabled` branch
+ * collapses to an icon-only badge and shifts left to keep the icon aligned with
+ * the enabled pill.
+ */
+const SwitchChainButton = styled(motion.button) `
+  --color: var(
+    --ck-dropdown-button-color,
+    var(--ck-button-primary-color, var(--ck-body-color))
+  );
+  --background: var(
+    --ck-dropdown-button-background,
+    var(--ck-secondary-button-background, var(--ck-body-background-secondary))
+  );
+  --box-shadow: var(
+    --ck-dropdown-button-box-shadow,
+    var(
+      --ck-secondary-button-box-shadow,
+      var(--ck-button-primary-box-shadow),
+      none
+    )
+  );
 
-export { ChainContainer, LoadingContainer, LogoContainer, Unsupported };
+  --hover-color: var(--ck-dropdown-button-hover-color, var(--color));
+  --hover-background: var(
+    --ck-dropdown-button-hover-background,
+    var(--background)
+  );
+  --hover-box-shadow: var(
+    --ck-dropdown-button-hover-box-shadow,
+    var(--box-shadow)
+  );
+
+  --active-color: var(--ck-dropdown-button-active-color, var(--hover-color));
+  --active-background: var(
+    --ck-dropdown-button-active-background,
+    var(--hover-background)
+  );
+  --active-box-shadow: var(
+    --ck-dropdown-button-active-box-shadow,
+    var(--hover-box-shadow)
+  );
+
+  appearance: none;
+  user-select: none;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-radius: 15px;
+  width: 52px;
+  height: 30px;
+  padding: 2px 6px 2px 3px;
+  font-size: 16px;
+  line-height: 19px;
+  font-weight: 500;
+  text-decoration: none;
+  white-space: nowrap;
+  transform: translateZ(0px);
+
+  transition: 100ms ease;
+  transition-property: transform, background-color, box-shadow, color;
+
+  color: var(--color);
+  background: var(--background);
+  box-shadow: var(--box-shadow);
+
+  svg {
+    position: relative;
+    display: block;
+  }
+
+  ${(props) => props.disabled
+    ? css `
+          width: auto;
+          padding: 3px;
+          position: relative;
+          left: -22px;
+        `
+    : css `
+          cursor: pointer;
+
+          @media only screen and (min-width: ${defaultTheme.mobileWidth + 1}px) {
+            &:hover,
+            &:focus-visible {
+              color: var(--hover-color);
+              background: var(--hover-background);
+              box-shadow: var(--hover-box-shadow);
+            }
+            &:active {
+              color: var(--active-color);
+              background: var(--active-background);
+              box-shadow: var(--active-box-shadow);
+            }
+          }
+        `}
+`;
+
+export { ChainContainer, LoadingContainer, LogoContainer, SwitchChainButton, Unsupported };
 //# sourceMappingURL=styles.js.map

package/build/components/Common/Chain/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/Modal/index.js

@@ -2,6 +2,7 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { AnimatePresence, motion } from 'framer-motion';
 import { useEffect, useState, useCallback, useRef } from 'react';
 import { useTransition } from 'react-transition-state';
+import ResizeObserver from 'resize-observer-polyfill';
 import { useConnectionStrategy } from '../../../core/ConnectionStrategyContext.js';
 import { useEthereumBridge } from '../../../ethereum/OpenfortEthereumBridgeContext.js';
 import FocusTrap from '../../../hooks/useFocusTrap.js';
@@ -107,6 +108,7 @@ onInfo, }) => {
     };
     let blockTimeout;
     const contentRef = useCallback((node) => {
+        var _a;
         if (!node)
             return;
         ref.current = node;
@@ -116,6 +118,16 @@ onInfo, }) => {
         blockTimeout = setTimeout(() => setInTransition(false), 360);
         // Calculate new content bounds
         updateBounds(node);
+        // Auto-fit: re-measure whenever the active page's content size changes, so
+        // every page — and any new one — sizes the modal correctly without having
+        // to call triggerResize() itself.
+        (_a = resizeObserverRef.current) === null || _a === void 0 ? void 0 : _a.disconnect();
+        const observer = new ResizeObserver(() => {
+            if (ref.current === node)
+                updateBounds(node);
+        });
+        observer.observe(node);
+        resizeObserverRef.current = observer;
     }, [open, inTransition]);
     // Update layout on chain/network switch to avoid clipping
     const strategy = useConnectionStrategy();
@@ -123,10 +135,12 @@ onInfo, }) => {
     const chainId = (_j = (_f = strategy === null || strategy === void 0 ? void 0 : strategy.getChainId()) !== null && _f !== void 0 ? _f : (_h = (_g = bridge === null || bridge === void 0 ? void 0 : bridge.account) === null || _g === void 0 ? void 0 : _g.chain) === null || _h === void 0 ? void 0 : _h.id) !== null && _j !== void 0 ? _j : bridge === null || bridge === void 0 ? void 0 : bridge.chainId;
     const switchChain = (_k = bridge === null || bridge === void 0 ? void 0 : bridge.switchChain) === null || _k === void 0 ? void 0 : _k.switchChain;
     const ref = useRef(null);
+    const resizeObserverRef = useRef(null);
     useEffect(() => {
         if (ref.current)
             updateBounds(ref.current);
     }, [chainId, switchChain, mobile, context.uiConfig, context.resize]);
+    useEffect(() => () => { var _a; return (_a = resizeObserverRef.current) === null || _a === void 0 ? void 0 : _a.disconnect(); }, []);
     useEffect(() => {
         if (!mounted) {
             setDimensions({
@@ -186,6 +200,8 @@ onInfo, }) => {
             case routes.SWITCHNETWORKS:
             case routes.ETH_SWITCH_NETWORK:
                 return locales.switchNetworkScreen_heading;
+            case routes.SIGN_MESSAGE:
+                return 'Sign message';
             default:
                 return '';
         }

package/build/components/Common/Modal/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/Common/SolanaChain/index.d.ts

@@ -1,8 +1,9 @@
 /**
- * Read-only Solana network indicator for the Connected modal — the Solana logo,
- * with the active cluster shown on hover. There is no switch: the cluster is
- * fixed by `walletConfig.solana`, and switching between Solana and EVM is
- * intentionally unsupported.
+ * Read-only Solana network indicator for the Connected modal. Mirrors the EVM
+ * `ChainSelect` in its single-network (`disabled`) state — the same pill button
+ * and tooltip — so EVM and Solana headers stay visually consistent. There is no
+ * switch: the cluster is fixed by `walletConfig.solana` and cannot change at
+ * runtime, so the button never gains a chevron or dropdown.
  */
 declare const SolanaChain: () => import("react/jsx-runtime").JSX.Element;
 export default SolanaChain;

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

@@ -1,7 +1,7 @@
 import { jsx } from 'react/jsx-runtime';
 import Logos from '../../../assets/logos.js';
 import { useSolanaContext } from '../../../solana/SolanaContext.js';
-import styled from '../../../styles/styled/index.js';
+import { SwitchChainButton, ChainContainer, LogoContainer } from '../Chain/styles.js';
 import Tooltip from '../Tooltip/index.js';
 
 /** `mainnet-beta` → "Mainnet"; otherwise capitalize the cluster name. */
@@ -12,28 +12,20 @@ function formatCluster(cluster) {
         return 'Mainnet';
     return cluster.charAt(0).toUpperCase() + cluster.slice(1);
 }
-const Badge = styled.div `
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 24px;
-  height: 24px;
-  border-radius: 50%;
-  background: #131313;
-  border: 2px solid var(--ck-body-background, #fff);
-  box-sizing: border-box;
-`;
+/** Solana mark rendered in the same circular container as the EVM `Chain` icon. */
+const SolanaChainIcon = () => (jsx(ChainContainer, { size: 24, radius: "50%", children: jsx(LogoContainer, { initial: false, animate: { opacity: 1 }, children: jsx(Logos.Solana, { style: { width: '62%', height: 'auto' } }) }) }));
 /**
- * Read-only Solana network indicator for the Connected modal — the Solana logo,
- * with the active cluster shown on hover. There is no switch: the cluster is
- * fixed by `walletConfig.solana`, and switching between Solana and EVM is
- * intentionally unsupported.
+ * Read-only Solana network indicator for the Connected modal. Mirrors the EVM
+ * `ChainSelect` in its single-network (`disabled`) state — the same pill button
+ * and tooltip — so EVM and Solana headers stay visually consistent. There is no
+ * switch: the cluster is fixed by `walletConfig.solana` and cannot change at
+ * runtime, so the button never gains a chevron or dropdown.
  */
 const SolanaChain = () => {
     var _a;
     const cluster = (_a = useSolanaContext()) === null || _a === void 0 ? void 0 : _a.cluster;
     const label = cluster ? `Solana · ${formatCluster(cluster)}` : 'Solana';
-    return (jsx(Tooltip, { message: label, children: jsx(Badge, { "aria-label": label, children: jsx(Logos.Solana, { style: { width: '62%', height: 'auto' } }) }) }));
+    return (jsx(SwitchChainButton, { type: "button", disabled: true, "aria-label": label, children: jsx(Tooltip, { message: label, xOffset: -6, delay: 0.01, children: jsx(SolanaChainIcon, {}) }) }));
 };
 
 export { SolanaChain as default };

package/build/components/Common/SolanaChain/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/ConnectModal/index.js

@@ -52,6 +52,7 @@ import Send from '../Pages/Send/index.js';
 import { SolanaSend } from '../Pages/Send/SolanaSend.js';
 import SendConfirmation from '../Pages/SendConfirmation/index.js';
 import { SolanaSendConfirmation } from '../Pages/SendConfirmation/SolanaSendConfirmation.js';
+import SignMessage from '../Pages/SignMessage/index.js';
 import SocialProviders from '../Pages/SocialProviders/index.js';
 import ConnectUsing from './ConnectUsing.js';
 import ConnectWithMobile from './ConnectWithMobile.js';
@@ -103,6 +104,7 @@ function buildSharedPages() {
         depositWallet: jsx(DepositWallet, {}),
         depositCex: jsx(DepositCex, {}),
         exportKey: jsx(ExportKey, {}),
+        signMessage: jsx(SignMessage, {}),
         walletOverview: jsx(Connected, {}),
     };
 }

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/Openfort/OpenfortProvider.js

@@ -145,6 +145,7 @@ const OpenfortProvider = ({ children, uiConfig, onConnect, onDisconnect, debugMo
     const [emailInput, setEmailInput] = useState('');
     const [phoneInput, setPhoneInput] = useState('');
     const [sendForm, setSendForm] = useState(defaultSendFormState);
+    const [signRequest, setSignRequest] = useState(null);
     const [buyForm, setBuyForm] = useState(defaultBuyFormState);
     const [headerLeftSlot, setHeaderLeftSlot] = useState(null);
     const [chainType, setChainType] = useState((_g = walletConfig === null || walletConfig === void 0 ? void 0 : walletConfig.chainType) !== null && _g !== void 0 ? _g : ChainTypeEnum.EVM);
@@ -263,6 +264,8 @@ const OpenfortProvider = ({ children, uiConfig, onConnect, onDisconnect, debugMo
         setSendForm,
         buyForm,
         setBuyForm,
+        signRequest,
+        setSignRequest,
         onConnect,
         onDisconnect,
         chains,
@@ -291,6 +294,7 @@ const OpenfortProvider = ({ children, uiConfig, onConnect, onDisconnect, debugMo
         phoneInput,
         sendForm,
         buyForm,
+        signRequest,
         headerLeftSlot,
         onConnect,
         onDisconnect,

package/build/components/Openfort/OpenfortProvider.js.map

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

package/build/components/Openfort/context.d.ts

@@ -3,7 +3,7 @@ import type React from 'react';
 import type { Chain } from 'viem';
 import type { useConnectCallbackProps } from '../../openfort/connectCallbackTypes';
 import type { CustomTheme, Languages, Mode, Theme } from '../../types';
-import type { BuyFormState, DebugModeOptions, OpenfortUIOptionsExtended, OpenfortWalletConfig, RouteOptions, SendFormState, SetRouteOptions } from './types';
+import type { BuyFormState, DebugModeOptions, OpenfortUIOptionsExtended, OpenfortWalletConfig, RouteOptions, SendFormState, SetRouteOptions, SignRequest } from './types';
 type Connector = {
     id: string;
     type?: 'wallet';
@@ -50,6 +50,9 @@ export type ContextValue = {
     setSendForm: React.Dispatch<React.SetStateAction<SendFormState>>;
     buyForm: BuyFormState;
     setBuyForm: React.Dispatch<React.SetStateAction<BuyFormState>>;
+    /** In-flight message/typed-data sign request driving the Sign message screen. */
+    signRequest: SignRequest | null;
+    setSignRequest: React.Dispatch<React.SetStateAction<SignRequest | null>>;
     /** Configured EVM chains (from wagmi bridge or walletConfig.ethereum). Empty when not EVM. */
     chains: Chain[];
 } & useConnectCallbackProps;

package/build/components/Openfort/types.d.ts

@@ -13,6 +13,7 @@ export declare const routes: {
     readonly SOCIAL_PROVIDERS: "socialProviders";
     readonly PROFILE: "profile";
     readonly EXPORT_KEY: "exportKey";
+    readonly SIGN_MESSAGE: "signMessage";
     readonly LOADING: "loading";
     readonly LOAD_WALLETS: "loadWallets";
     readonly RECOVER_WALLET: "recoverWallets";
@@ -473,6 +474,27 @@ export type SendFormState = {
     asset: Asset;
 };
 export declare const defaultSendFormState: SendFormState;
+/** EIP-712 typed-data payload accepted by `useSignMessage().signTypedData`. */
+export type SignTypedDataPayload = {
+    domain?: Record<string, unknown>;
+    types: Record<string, {
+        name: string;
+        type: string;
+    }[]>;
+    primaryType: string;
+    message: Record<string, unknown>;
+};
+/** An in-flight sign request that drives the Sign message modal screen. */
+export type SignRequest = ({
+    kind: 'message';
+    message: string;
+} | {
+    kind: 'typedData';
+    typedData: SignTypedDataPayload;
+}) & {
+    resolve: (signature: string) => void;
+    reject: (reason?: unknown) => void;
+};
 export type BuyProviderId = 'moonpay' | 'coinbase' | 'stripe';
 export type BuyFormState = {
     amount: string;

package/build/components/Openfort/types.js

@@ -3,6 +3,7 @@ const routes = {
     SOCIAL_PROVIDERS: 'socialProviders',
     PROFILE: 'profile',
     EXPORT_KEY: 'exportKey',
+    SIGN_MESSAGE: 'signMessage',
     LOADING: 'loading',
     LOAD_WALLETS: 'loadWallets',
     RECOVER_WALLET: 'recoverWallets',

package/build/components/Openfort/types.js.map

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

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

@@ -1,19 +1,19 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useEffect, useState } from 'react';
+import { useEffect } from 'react';
 import { formatUnits } from 'viem';
-import { TOKEN_LOGO, symbolToColor } from '../../../constants/logos.js';
+import { currencyLogoUrl } 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, ContentWrapper, TokenList, TokenContainer, TokenLeftGroup, TokenInfo, TokenSymbol, TokenName, TokenLogoArea, TokenLogoImg, TokenLogoFallback } from '../SelectToken/styles.js';
+import { AssetChainLogo } from '../Deposit/AssetChainLogo.js';
+import { SelectTokenContent, EmptyState, ContentWrapper, TokenList, TokenContainer, TokenLeftGroup, TokenInfo, TokenSymbol, TokenName, TokenLogoArea } from '../SelectToken/styles.js';
 
 const ZERO = BigInt(0);
+/** Token logo with the Solana chain badge, matching the EVM inventory. */
 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() })) }));
+    var _a, _b;
+    return (jsx(TokenLogoArea, { children: jsx(AssetChainLogo, { assetLogo: (_a = currencyLogoUrl(symbol)) !== null && _a !== void 0 ? _a : '', chainLogo: (_b = currencyLogoUrl('SOL')) !== null && _b !== void 0 ? _b : '', symbol: symbol }) }));
 }
 /**
  * SVM counterpart of {@link AssetInventory}: lists the connected Solana wallet's

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

@@ -4,8 +4,8 @@ import { ButtonContainer } from '../../Common/Button/styles.js';
 const Section = styled.div `
   display: flex;
   flex-direction: column;
-  margin-top: 20px;
-  gap: 12px;
+  margin-top: 16px;
+  gap: 10px;
 `;
 const SectionLabel = styled.span `
   font-size: 13px;
@@ -16,16 +16,16 @@ const SectionLabel = styled.span `
 `;
 const AmountCard = styled.div `
   display: flex;
-  align-items: baseline;
-  gap: 12px;
-  padding: 18px 20px;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 14px;
   border-radius: var(--ck-secondary-button-border-radius);
   border: 1px solid var(--ck-body-divider);
   background: var(--ck-secondary-button-background);
   color: var(--ck-body-color);
 `;
 const CurrencySymbol = styled.span `
-  font-size: 28px;
+  font-size: 18px;
   font-weight: 600;
   color: var(--ck-body-color-muted);
   line-height: 1;
@@ -35,7 +35,7 @@ const AmountInput = styled.input `
   border: none;
   background: transparent;
   color: var(--ck-body-color);
-  font-size: 44px;
+  font-size: 24px;
   font-weight: 600;
   line-height: 1;
   padding: 0;
@@ -53,12 +53,12 @@ const PresetList = styled.div `
 `;
 const PresetButton = styled.button `
   flex: 1;
-  padding: 10px 14px;
+  padding: 8px 12px;
   border-radius: 999px;
   border: none;
   background: ${({ $active }) => ($active ? 'var(--ck-accent-color)' : 'var(--ck-secondary-button-background)')};
   color: ${({ $active }) => ($active ? 'var(--ck-accent-text-color)' : 'var(--ck-body-color)')};
-  font-size: 14px;
+  font-size: 13px;
   font-weight: 600;
   cursor: pointer;
 
@@ -71,7 +71,7 @@ const SelectorButton = styled.button `
   align-items: center;
   justify-content: space-between;
   width: 100%;
-  padding: 14px 16px;
+  padding: 10px 14px;
   border-radius: var(--ck-secondary-button-border-radius);
   border: 1px solid var(--ck-body-divider);
   background: var(--ck-secondary-button-background);

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

@@ -81,9 +81,15 @@ const EthereumConnected = () => {
             return acc + price * balance;
         }, 0);
     }, [multiChainAssets]);
+    // Re-measure on mount, after paint, and when the async assets resolve. Without
+    // the post-paint pass, returning to this screen (assets already cached) measures
+    // before layout settles and the modal keeps the shorter height, clipping the
+    // actions below the fold.
     useEffect(() => {
         context.triggerResize();
-    }, [context.triggerResize]);
+        const id = requestAnimationFrame(() => context.triggerResize());
+        return () => cancelAnimationFrame(id);
+    }, [context.triggerResize, isLoading, totalBalanceUsd]);
     useEffect(() => {
         if (!address) {
             setHeaderLeftSlot(null);

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/TestnetNotice.js

@@ -1,7 +1,11 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { ChainTypeEnum } from '@openfort/openfort-js';
 import { useState, useEffect } from 'react';
+import { useEthereumEmbeddedWallet } from '../../../ethereum/hooks/useEthereumEmbeddedWallet.js';
+import { useOpenfortCore } from '../../../openfort/useOpenfort.js';
+import { useSolanaEmbeddedWallet } from '../../../solana/hooks/useSolanaEmbeddedWallet.js';
 import styled from '../../../styles/styled/index.js';
-import { getPublishableKeyEnvironment } from '../../../utils/validation.js';
+import { isTestnetChainId } from '../../../utils/rpc.js';
 import { useOpenfort } from '../../Openfort/useOpenfort.js';
 
 /** Relay's own testnet guide — the authoritative explanation of the limitation. */
@@ -116,13 +120,21 @@ const DocsLink = styled.a `
  * Renders nothing on live keys.
  */
 function TestnetNotice() {
-    const { publishableKey, triggerResize } = useOpenfort();
+    const { triggerResize } = useOpenfort();
+    const { chainType } = useOpenfortCore();
+    const ethereumWallet = useEthereumEmbeddedWallet();
+    const solanaWallet = useSolanaEmbeddedWallet();
     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')
+    // Testnet is a property of the active chain, not the publishable key — read it
+    // from the connected embedded wallet so the notice tracks the real deposit network.
+    const isTestnet = chainType === ChainTypeEnum.SVM
+        ? solanaWallet.status === 'connected' && solanaWallet.cluster !== 'mainnet-beta'
+        : ethereumWallet.status === 'connected' && isTestnetChainId(ethereumWallet.chainId);
+    if (!isTestnet)
         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" })] }))] }));
 }

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

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

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

@@ -16,7 +16,6 @@ import { EVM_BUY_CURRENCIES } from '../Buy/evmCurrencies.js';
 import { SOLANA_BUY_CURRENCIES } from '../Buy/solanaCurrencies.js';
 import { getPaymentOptions } from './paymentOptions.js';
 import { DepositContent, OptionList, OptionButton, OptionLeft, OptionIconBadge, OptionInfo, OptionTitle, OptionSubtitle, LogoCluster } from './styles.js';
-import { TestnetNotice } from './TestnetNotice.js';
 import { UnsupportedNetworkNotice } from './UnsupportedNetworkNotice.js';
 import { useFundingTarget } from './useFundingTarget.js';
 
@@ -118,7 +117,7 @@ const Deposit = () => {
         }));
         setRoute(routes.BUY);
     };
-    return (jsxs(PageContent, { onBack: routes.CONNECTED, children: [jsx(ModalHeading, { children: "Add funds" }), jsx(TestnetNotice, {}), targetUnsupported ? (jsx(UnsupportedNetworkNotice, { targetChain: target.chain, railChains: railChains })) : (jsx(DepositContent, { children: jsx(OptionList, { children: options.map((option) => {
+    return (jsxs(PageContent, { onBack: routes.CONNECTED, children: [jsx(ModalHeading, { children: "Add funds" }), targetUnsupported ? (jsx(UnsupportedNetworkNotice, { targetChain: target.chain, railChains: railChains })) : (jsx(DepositContent, { children: jsx(OptionList, { children: options.map((option) => {
                         var _a;
                         return (jsxs(OptionButton, { type: "button", disabled: option.disabled, onClick: () => go(option.target), children: [jsxs(OptionLeft, { children: [jsx(OptionIconBadge, { children: METHOD_ICON[option.id] }), jsxs(OptionInfo, { children: [jsx(OptionTitle, { children: option.title }), jsx(OptionSubtitle, { children: (_a = option.disabledReason) !== null && _a !== void 0 ? _a : option.subtitle })] })] }), jsx(LogoCluster, { children: clusterFor(option.id) })] }, option.id));
                     }) }) })), jsx(PoweredByFooter, {})] }));

package/build/components/Pages/Deposit/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/Deposit/sources.d.ts

@@ -13,5 +13,8 @@ export declare const DEST_USDC = "0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913";
  */
 export declare const DEST_CHAIN_SOL = "solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp";
 export declare const DEST_USDC_SOL = "EPjFWdd5AufqSSqeM2qN1xzybapC8G4wEGGkZwyTDt1v";
+/** EVM native-asset sentinel (zero address) — the default destination currency on
+ * chains where we don't ship a stablecoin address (e.g. testnets). */
+export declare const NATIVE_TOKEN_ADDRESS = "0x0000000000000000000000000000000000000000";
 /** True for a CAIP-2 Solana chain id. */
 export declare function isSolana(chain: string): boolean;

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

@@ -13,10 +13,13 @@ const DEST_USDC = '0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913';
  */
 const DEST_CHAIN_SOL = 'solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp';
 const DEST_USDC_SOL = 'EPjFWdd5AufqSSqeM2qN1xzybapC8G4wEGGkZwyTDt1v';
+/** EVM native-asset sentinel (zero address) — the default destination currency on
+ * chains where we don't ship a stablecoin address (e.g. testnets). */
+const NATIVE_TOKEN_ADDRESS = '0x0000000000000000000000000000000000000000';
 /** True for a CAIP-2 Solana chain id. */
 function isSolana(chain) {
     return chain.startsWith('solana:');
 }
 
-export { DEST_CHAIN, DEST_CHAIN_SOL, DEST_USDC, DEST_USDC_SOL, isSolana };
+export { DEST_CHAIN, DEST_CHAIN_SOL, DEST_USDC, DEST_USDC_SOL, NATIVE_TOKEN_ADDRESS, isSolana };
 //# sourceMappingURL=sources.js.map

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

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

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

@@ -1,9 +1,11 @@
 /**
  * The destination route Deposit-hub funding settles into. Integrators override the
- * chain and currency via `uiConfig.funding.{targetChain,targetCurrency}`; both
- * default to USDC on the active chain type (Base for EVM, Solana mainnet for SVM)
- * so the flow works with zero configuration. The deposit recipient is always the
- * active embedded wallet for the destination chain family — callers resolve it.
+ * chain and currency via `uiConfig.funding.{targetChain,targetCurrency}`. With no
+ * override the destination follows the wallet's ACTIVE chain — so a testnet wallet
+ * funds on its own network instead of being told "funding isn't available on Base".
+ * Currency defaults to USDC where we ship its address (Base, Solana mainnet) and to
+ * the native asset otherwise, so the destination currency is always valid on-chain.
+ * The deposit recipient is always the active embedded wallet — callers resolve it.
  */
 export declare function useFundingTarget(): {
     chain: string;